solution: Andres Arboleda

js/jQuery.js

@@ -0,0 +1,136 @@
+//funcion html
+//HTML item has been clicked
+$('#solutionjq1').on('click', function() { $('#solutionjq1').text('this button has been clicked') });
+//HTML item has been double clicked
+$('#solutionjq2').on('dblclick', function() { $('#solutionjq2').text('this button has been double clicked') });
+//press key
+
+$(document).on("keypress", function(e) {
+    let prueba = $("#solutionjq3").text(e.key);
+});
+//mousehover
+$('#solutionjq4').on("mouseenter", function() {
+    $('#solutionjq4').text('you are hovered');
+});
+$('#solutionjq4').on("mouseleave", function() {
+    $('#solutionjq4').text('hover here');
+});
+
+//input change text
+$(document).on("input", function() {
+    let text1 = $("#inputText").val();
+    $("#solutionjq5").text(text1)
+});
+//Show img
+let imgJq = $("<img id='imgJq'src ='./img/js.jpg'></img>");
+$("#question6").on("click", function() {
+        imgJq.addClass("photo_jq")
+        $("#solutionjq6").append(imgJq)
+    })
+    //error
+
+$("#question7").on("click", function() {
+    let imgErrorJq = $("<img id='imgJqe' class='photo_jq'src ='not img' alt='Error loading'></img>");
+    $("#solutionjq7").append(imgErrorJq)
+});
+
+$("#formJq").on("submit", function(event) {
+        event.preventDefault();
+        $("#formJqText").text("this button is summited ")
+    })
+    //checked funtion
+$("#soluctionjq9").on("change", function(event) {
+    //$("#checkboxjq9").text("checked")
+    if ($(event.target).is(":checked")) {
+        $(event.target).next().text("Checked");
+    } else {
+        $(event.target).next().text("Unchecked");
+    }
+});
+//
+
+$("#listItemsJq").on("click", (event) => {
+    event.target.innerText = "you clicked  " + event.target.textContent
+});
+//Create element any text
+
+$("#createElementjq").on("click", () => {
+        let p = $('<p>any text</p>')
+        $("#solutionFunctionJq1").append(p)
+    })
+    // remove element
+$("#removeElementJq").on("click", () => { $("#removeElementJq").remove(); });
+
+//append text
+$("#appendElementJq").on("click", () => {
+    let li = $("<li>Go is appened</li>");
+    $("#listItemsJqfunction").append(li);
+});
+//prepend
+$("#prependElementJq").on("click", (event) => {
+        let li = ("<li>GO is prepend</li>")
+        $("#listItemsJqfunctionPrepend").prepend(li);
+    })
+    //create and insert text After
+$("#prependCreateElementJq").on("click", (event) => {
+    let li = $("<li>This text is After parent Node</li>");
+    let valueInser = $("#prependCreateElementJq");
+    valueInser.after(li);
+});
+//create and insert text After
+$("#beforeElementJq").on("click", (event) => {
+    let li = $("<li>This text is Before parent Node</li>");
+    let valueInser = $("#createApppendJqBe");
+    valueInser.before(li)
+
+});
+
+//clone an HTML element within other element
+$("#CloneElementButtonJq").on("click", (event) => {
+    let parentClon = $(event.target).parent();
+    $("#elementClonJq").first().clone().appendTo(parentClon);
+});
+//Add class
+$("#classButtonJq").on("click", () => {
+    $("#addClassJq").addClass("background__item");
+});
+//Remove class
+$("#classButtonRJq").on("click", () => {
+    $("#removeClassJq").removeClass("background__item")
+});
+//Toggle Class
+$("#classButtonToggleJq").on("click", () => {
+    $("#toggleClassJq").toggleClass("background__item")
+});
+//disabled button
+$("#disabledButtonJq").on("click", () => {
+    $("#clickMeButtonJq").prop("disabled", true)
+});
+//remove disabled
+$("#enableButtonJq").on("click", () => {
+    $("#clickMeButtonEnableJq").prop("disabled", false)
+});
+//create src
+$("#createSrcButtonJq").on("click", () => {
+    $("#imgCreateSrcJq").attr("src", "./img/js.jpg")
+});
+//remove src
+$("#removeSrcButtonJq").on("click", () => {
+        $("#imgRemoveSrcJq").removeAttr("src", "./img/jq.jpg")
+    })
+    //display none
+$("#buttonHideElementJq").on("click", () => {
+    $("#HidemeJq").toggleClass("none")
+})
+$("#buttonShowElementJq").on("click", () => {
+    $("#showMeJq").toggleClass("block")
+})
+
+//fade In
+$("#fadeInButton").on("click", (event) => {
+    $("#imgFadeIn").fadeToggle("slow");
+});
+//Fade Out
+$("#fadeOutButton").on("click", (event) => {
+    $("#imgFadeOut").fadeToggle(3000);
+});

js/javascript.js

@@ -0,0 +1,186 @@
+//InnerHtml
+
+//HTML item has been clicked
+let button = document.querySelector("#solutionjs1");
+button.addEventListener("click", event => {
+    button.innerHTML = 'this button has been clicked'
+});
+//HTML item has been double clicked
+let button2 = document.querySelector('#solutionjs2');
+button2.addEventListener("dblclick", event => {
+    button2.innerHTML = 'this button has been double clicked'
+});
+//press key
+document.addEventListener('keypress', pressKey);
+
+function pressKey(e) {
+    let key = document.querySelector('#solutionjs3')
+    key.textContent = `${e.key}`;
+}
+//mouseover
+let hover = document.querySelector('#solutionjs4');
+hover.addEventListener("mouseover", function(e) {
+    e.target.innerHTML = "you are hovered";
+});
+hover.addEventListener("mouseout", function(e) {
+    e.target.innerHTML = "hover here";
+});
+//input change text
+let submitText = document.querySelector("#input__button");
+document.addEventListener("input", event => {
+    let div = document.createElement("div")
+    div.classList.add("solution__js", "items");
+    let input = document.querySelector("#inputText").value
+    document.querySelector("#solutionjs5").innerHTML = input
+});
+//img
+let buttonImg = document.querySelector("#question6");
+//if (img.id === "") {
+buttonImg.addEventListener("click", event => {
+    let img = document.createElement("img")
+    img.classList.add("img", "solution__js");
+    img.src = "./img/jq.jpg"
+    img.id = "imgJs"
+    document.querySelector("#solutionjs6").append(img)
+});
+//}
+//error
+
+let buttonImgError = document.querySelector("#question7");
+buttonImgError.addEventListener("click", event => {
+    let imgErrorJs = document.createElement("img")
+    imgErrorJs.classList.add("img", "solution__js");
+    imgErrorJs.src = "no_img"
+    imgErrorJs.id = "imgJse"
+    imgErrorJs.alt = "Error Loading"
+    document.querySelector("#solutionjs7").append(imgErrorJs)
+});
+
+
+
+// form 
+let $formContainer = document.querySelector("#formContainerJs")
+$formContainer.addEventListener("submit", function(event) {
+        event.preventDefault();
+
+        $formJsText = document.querySelector("#formJsText")
+        $formJsText.innerHTML = "this button is summited "
+    })
+    //checked 
+
+let checkedButton = document.querySelector("#soluctionjs9")
+checkedButton.addEventListener("change", (event) => {
+    if ($(event.target).is(":checked")) {
+        $(event.target).next().text("Checked");
+    } else {
+        $(event.target).next().text("Unchecked");
+    }
+
+});
+//item is clicked
+
+document.querySelector("#listItemsJs").addEventListener("click", (event) => {
+
+    event.target.innerHTML = "you clicked  " + event.target.textContent
+});
+//-------------------------------------------------functions-------------------------------------------------
+//create a Html with any text
+let createElementHtml = document.querySelector("#createElement")
+
+createElementHtml.addEventListener("click", () => {
+    let p = document.createElement("p")
+    p.innerHTML = "any text"
+    document.querySelector("#soluctionFunctionJS1").append(p)
+})
+
+//Remove text
+document.querySelector("#removeElement").addEventListener("click", () => {
+    document.querySelector("#removeElement").remove();
+});
+//append text
+document.querySelector("#appendElement").addEventListener("click", () => {
+    let li = document.createElement("li");
+    li.innerText = "Go is appened";
+    document.querySelector("#listItemsJsfunction").appendChild(li);
+});
+
+//prepend text
+document.querySelector("#prependElement").addEventListener("click", (event) => {
+    let li = document.createElement("li");
+    li.innerText = "GO is prepend";
+    document.querySelector("#listItemsJsfunctionPrepend").prepend(li);
+    event.target.insertBefore(li, event.target)
+})
+
+
+//create and insert text After
+document.querySelector("#prependCreateElement").addEventListener("click", (event) => {
+    let li = document.createElement("li");
+    li.innerText = "This text is After parent Node ";
+    event.target.parentNode.insertBefore(li, event.target);
+});
+//create and insert text Before
+document.querySelector("#beforeElement").addEventListener("click", (event) => {
+    let li = document.createElement("li");
+    li.id = "li"
+    li.innerText = "This text is Before parent Node ";
+    let valueInser = event.target.parentNode.querySelector("#li");
+    event.target.parentNode.append(li);
+});
+
+//clone an HTML element within other element
+document.querySelector("#CloneElementButton").addEventListener("click", (event) => {
+    let orgn = event.target.parentNode.querySelector("#elementClon");
+    let cln = orgn.cloneNode(true);
+    event.target.parentNode.appendChild(cln);
+});
+//add Class
+document.querySelector("#classButton").addEventListener("click", () => {
+    let li = document.querySelector("#addClass")
+    li.classList.add("background__item")
+});
+//Remove Class
+document.querySelector("#classButtonR").addEventListener("click", () => {
+    let li = document.querySelector("#removeClass")
+    li.classList.remove("background__item")
+});
+//Toggle Class
+document.querySelector("#classButtonToggle").addEventListener("click", () => {
+    let li = document.querySelector("#toggleClass")
+    li.classList.toggle("background__item")
+});
+//disabled button
+document.querySelector("#disabledButton").addEventListener("click", () => {
+    document.querySelector("#clickMeButton").disabled = true;
+});
+//remove disabled
+document.querySelector("#enableButton").addEventListener("click", () => {
+    document.querySelector("#clickMeButtonEnable").removeAttribute("disabled")
+});
+//create src
+document.querySelector("#createSrcButton").addEventListener("click", () => {
+    document.querySelector("#imgCreateSrc").src = "./img/js.jpg"
+});
+//remove src
+document.querySelector("#removeSrcButton").addEventListener("click", () => {
+        document.querySelector("#imgRemoveSrc").removeAttribute("src")
+    })
+    //display none
+document.querySelector("#buttonHideElement").addEventListener("click", () => {
+        let hideElement = document.querySelector("#Hideme");
+        hideElement.classList.toggle("none")
+    })
+    //display block
+document.querySelector("#buttonShowElement").addEventListener("click", () => {
+    let hideElement = document.querySelector("#showMe");
+    hideElement.classList.toggle("block")
+})
+
+
+// Add class Items
+let itemsIterable = document.querySelectorAll("#itemIterable")
+document.querySelector("#changeStyleButton").addEventListener("click", () => {
+    itemsIterable.forEach(element => {
+        element.style.color = "red"
+    });
+})