" + 'This is a P ' + "
"); + main.append(el) + setTimeout(() => { + let span = $('' + 'this is a Span' + '') + $(el).append(span) + }, 3000); +} + +function prependElementfunctionJq() { + var main = $('#prependElementIdTestResultjq') + let el = $("" + 'This is a P ' + "
"); + setTimeout(() => { + let span = $('' + 'this is a Span' + '') + main.append(el).prepend(span) + }, 3000); +} + +function createandAddBeforefunctionJq() { + let mainjq = $('#createandAddBeforeIdTestResultjq') + let content = '' + mainjq.html(content) + setTimeout(() => { + li = $("").text('First This'); + li.insertBefore($('#liFirst')) + }, 3000); +} + +function createandAddAfterfunctionJq() { + let mainjq = $('#createandAddAfterIdTestResultjq') + content = '' + mainjq.html(content) + setTimeout(() => { + li = $("").text('Second This'); + li.insertAfter($('#liFirst1')) + }, 3000); +} + +function clonefunctionJq() { + var main = $('#cloneIdTestResultjq') + let el = $("" + 'This is a P ' + "
"); + main.append(el) + setTimeout(() => { + let newElement = $(el).clone() + newElement.text('This is a P is a clone') + main.append(newElement) + }, 3000); +} + +function addClassfunctionJq() { + var main = $('#addClassIdTestResultjq') + let el = $("" + 'This is a P ' + "
"); + main.append(el) + setTimeout(() => { + $(el).addClass('pClassGreen') + el.text('This is a P with class') + }, 3000); +} + +function removeClassfunctionJq() { + var main = $('#removeClassIdTestResultjq') + let el = $("" + 'This is a P with class ' + "
"); + $(el).addClass('pClassGreen') + main.append(el) + setTimeout(() => { + $(el).removeClass('pClassGreen') + el.text('This is a P without class') + }, 3000); +} + +function toggleClassfunctionJq() { + buttonTest('toggleClassIdTestResultjq', 'togglebtnjq') + var main = $('#toggleClassIdTestResultjq') + let el = $("" + 'This is a P' + "
"); + main.append(el) + $('#togglebtnjq').on('click', function () { + $(el).toggleClass('pClassGreen') + }) +} + +function addDisabledfunctionJq() { + buttonTest('addDisabledIdTestResultjq', 'addDisabledbtnjq') + buttonTest('addDisabledIdTestResultjq', 'jqaddDisabled') + + $('#addDisabledbtnjq').on('click', function () { + $('#jqaddDisabled').attr('disabled', true) + }) + $('#jqaddDisabled').on('click', function () { + let el = $("" + 'This is a P' + "
"); + $(el).insertAfter($('#jqaddDisabled')) + + }) +} + +function removeDisabledfunctionJq() { + buttonTest('removeDisabledIdTestResultjq', 'removeDisabledbtnjq') + buttonTest('removeDisabledIdTestResultjq', 'removeDisabledjq') + $('#removeDisabledjq').attr('disabled', true) + $('#removeDisabledbtnjq').on('click', function () { + $('#removeDisabledjq').attr('disabled', false) + }) + $('#removeDisabledjq').on('click', function () { + let el = $("" + 'This is a P' + "
"); + $(el).insertAfter($('#removeDisabledjq')) + + }) +} + +function setDataSrcfunctionJq() { + buttonTest('setDataSrcIdTestResultjq', 'setDatasrcbtnjq') + let imageJq = $('").text("Don't have Data-src").insertAfter($(imageJq))
+
+ $('#setDatasrcbtnjq').on('click', function () {
+ $(imageJq).attr('data-src', 'This is a Data Src')
+ el.text(imageJq.attr('data-src')).insertAfter($(imageJq))
+ $(el).insertAfter($(imageJq))
+ })
+}
+
+
+function removeDataSrcfunctionJq() {
+ buttonTest('removeDataSrcIdTestResultjq', 'removeDatasrcbtnjq')
+ let imageJq = $('').attr('src', './assets/css/img/10592-EGO-LV1-6-Planet-Eclipse--68-Cal-Fire-Opal-gold---rot.jpg')
+ $('#removeDataSrcIdTestResultjq')
+ imageJq.addClass('my-img')
+ $('#removeDataSrcIdTestResultjq').append(imageJq)
+ $(imageJq).attr('data-src', 'This is a Data Src')
+ let el = $("
").text(" This is a P") + $('#hideHTMLIdTestResultjq').append(el) + + $('#hideHTMLbtnjq').on('click', function () { + $(el).hide() + }) +} + +function showHTMLfunctionJq() { + buttonTest('showHTMLIdTestResultjq', 'showHTMLbtnjq') + let el = $("
").text(" This is a P") + $('#showHTMLIdTestResultjq').append(el) + $(el).hide() + + $('#showHTMLbtnjq').on('click', function () { + $(el).show() + }) +} + +function fadeInfunctionJq() { + buttonTest('fadeInIdTestResultjq', 'fadeInbtnjq') + let el = $("
").text(" This is a P") + el.attr('id', 'fadeInjq') + $('#fadeInIdTestResultjq').append(el) + $("#fadeInjq").css('opacity', '0'); + + $('#fadeInbtnjq').on('click', function () { + $("#fadeInjq").css('transition', 'opacity 3s'); + $("#fadeInjq").css('opacity', '100%'); + }) +} + +function fadeOutfunctionJq() { + buttonTest('fadeOutIdTestResultjq', 'fadeoutbtnjq') + let el = $("
").text(" This is a P") + el.attr('id', 'fadeoutjq') + $('#fadeOutIdTestResultjq').append(el) + + $('#fadeoutbtnjq').on('click', function () { + $('#fadeoutjq').fadeOut('slow'); + }) +} \ No newline at end of file diff --git a/assets/scripts/functionsFunctionsJs.js b/assets/scripts/functionsFunctionsJs.js new file mode 100644 index 00000000..56674ac9 --- /dev/null +++ b/assets/scripts/functionsFunctionsJs.js @@ -0,0 +1,249 @@ +//! functions +function createElementfunctionJs() { + var div = document.getElementById("createElementIdTestResultjs"); + el = document.createElement("span"); + el.innerHTML = "text"; + div.appendChild(el); +} + +function removeElementfunctionJs() { + buttonTest('removeElementIdTestResultjs', "button-testjs") + setTimeout(() => { + var myobj = document.getElementById("button-testjs"); + myobj.remove(); + }, 3000); +} + +function appendElementfunctionJs() { + var main = document.getElementById('appendElementIdTestResultjs') + let pOne = document.createElement("p") + main.appendChild(pOne) + pOne.innerText = 'This is a P' + setTimeout(() => { + let span = document.createElement("span") + pOne.appendChild(span); + span.innerText = 'this is a Span' + }, 3000); +} + +function prependElementfunctionJs() { + var main = document.getElementById('prependElementIdTestResultjs') + let pOne = document.createElement("p") + main.appendChild(pOne) + pOne.innerText = 'This is a P' + setTimeout(() => { + let span = document.createElement("span") + pOne.prepend(span); + span.innerText = 'this is a Span' + }, 3000); +} + +function createandAddBeforefunctionJs() { + let main = document.getElementById('createandAddBeforeIdTestResultjs') + let content = '
' + main.innerHTML = content + let menu = document.getElementById('menujs') + setTimeout(() => { + li = document.createElement("li"); + li.innerText = 'First This' + menu.insertBefore(li, menu.firstElementChild); + }, 3000); +} + +function createandAddAfterfunctionJs() { + let main = document.getElementById('createandAddAfterIdTestResultjs') + let content = '' + main.innerHTML = content + let menu = document.getElementById('menujs1') + setTimeout(() => { + let li = document.createElement("li"); + li.innerHTML = 'Second This' + menu.firstElementChild.after(li); + }, 3000); +} + +function clonefunctionJs() { + var mainclone = document.getElementById('cloneIdTestResultjs') + let pOne = document.createElement("p") + mainclone.appendChild(pOne) + pOne.innerText = 'This is a P' + setTimeout(() => { + let newElement = pOne.cloneNode(true); + newElement.innerText = 'This is a P is a clone' + mainclone.appendChild(newElement) + }, 3000); +} + +function addClassfunctionJs() { + var mainclone = document.getElementById('addClassIdTestResultjs') + let pOne = document.createElement("p") + mainclone.appendChild(pOne) + pOne.innerText = 'This is a P ' + setTimeout(() => { + pOne.innerText = 'This is a P with class' + pOne.classList.add('pClassGreen') + }, 3000); +} + +function removeClassfunctionJs() { + var main = document.getElementById('removeClassIdTestResultjs') + let pOne = document.createElement("p") + main.appendChild(pOne) + pOne.innerText = 'This is a P with class ' + pOne.classList.add('pClassGreen') + setTimeout(() => { + pOne.innerText = 'This is a P wihtout class' + pOne.classList.remove('pClassGreen') + + }, 3000); +} + +function toggleClassfunctionJs() { + buttonTest('toggleClassIdTestResultjs', 'togglebtnjs') + btn = document.getElementById('togglebtnjs') + var main = document.getElementById('toggleClassIdTestResultjs') + let pOne = document.createElement("p") + main.appendChild(pOne) + pOne.innerText = 'This is a P ' + btn.addEventListener('click', function () { + pOne.classList.toggle('pClassGreen') + }) +} + +function addDisabledfunctionJs() { + buttonTest('addDisabledIdTestResultjs', 'addDisabledbtn') + buttonTest('addDisabledIdTestResultjs', 'AddDisabledjs') + + btn = document.getElementById('addDisabledbtn') + let btnTwo = document.getElementById('AddDisabledjs') + + btnTwo.addEventListener('click', function () { + let pOne = document.createElement("p") + btnTwo.after(pOne) + pOne.innerText = 'This is a P ' + }) + btn.addEventListener('click', function () { + document.getElementById('AddDisabledjs').disabled = true; + }) +} + +function removeDisabledfunctionJs() { + buttonTest('removeDisabledIdTestResultjs', 'removeDisabledbtn') + buttonTest('removeDisabledIdTestResultjs', 'removeDisabledjs') + + btn = document.getElementById('removeDisabledbtn') + let btnTwo = document.getElementById('removeDisabledjs') + + btnTwo.disabled = true; + btnTwo.addEventListener('click', function () { + let pOne = document.createElement("p") + btnTwo.after(pOne) + pOne.innerText = 'This is a P ' + }) + btn.addEventListener('click', function () { + btnTwo.disabled = false; + }) +} + + +function setDataSrcfunctionJs() { + buttonTest('setDataSrcIdTestResultjs', 'setDataSrcbtn') + let main = document.getElementById('setDataSrcIdTestResultjs') + + btn = document.getElementById('setDataSrcbtn') + let image = document.createElement("img") + image.src = './assets/css/img/10592-EGO-LV1-6-Planet-Eclipse--68-Cal-Fire-Opal-gold---rot.jpg'; + main.appendChild(image); + + let pOne = document.createElement("p") + pOne.innerText = "Don't have Data-src" + image.after(pOne) + + btn.addEventListener('click', function () { + image.setAttribute('data-src', 'This is a Data Src'); + pOne.innerText = image.getAttribute('data-src') + image.after(pOne) + }) +} + +function removeDataSrcfunctionJs() { + buttonTest('removeDataSrcIdTestResultjs', 'removeDataSrcbtn') + let main = document.getElementById('removeDataSrcIdTestResultjs') + + btn = document.getElementById('removeDataSrcbtn') + + let image = document.createElement("img") + image.src = './assets/css/img/10592-EGO-LV1-6-Planet-Eclipse--68-Cal-Fire-Opal-gold---rot.jpg'; + main.appendChild(image); + image.setAttribute('data-src', 'This is a Data Src'); + + let pOne = document.createElement("p") + pOne.innerText = image.getAttribute('data-src') + image.after(pOne) + + btn.addEventListener('click', function () { + image.removeAttribute('data-src') + pOne.innerText = "Don't have Data-src" + image.after(pOne) + }) +} + +function hideHTMLfunctionJs() { + buttonTest('hideHTMLIdTestResultjs', 'hideHTMLbtn') + let main = document.getElementById('hideHTMLIdTestResultjs') + btn = document.getElementById('hideHTMLbtn') + + let pOne = document.createElement("p") + pOne.innerText = 'This is a P ' + main.appendChild(pOne) + + btn.addEventListener('click', function () { + pOne.style.display = 'none' + }) +} + +function showHTMLfunctionJs() { + buttonTest('showHTMLIdTestResultjs', 'showHTMLbtn') + let main = document.getElementById('showHTMLIdTestResultjs') + btn = document.getElementById('showHTMLbtn') + + let pOne = document.createElement("p") + pOne.innerText = 'This is a P ' + pOne.style.display = 'none' + main.appendChild(pOne) + + btn.addEventListener('click', function () { + pOne.style.display = 'block' + }) +} + +function fadeInfunctionJs() { + buttonTest('fadeInIdTestResultjs', 'fadeInbtn') + let main = document.getElementById('fadeInIdTestResultjs') + btn = document.getElementById('fadeInbtn') + + let pOne = document.createElement("p") + pOne.innerText = 'This is a P ' + main.appendChild(pOne) + pOne.style.opacity = "0"; + + btn.addEventListener('click', function () { + pOne.style.transition = "opacity 1s"; + pOne.style.opacity = '100%'; + }) +} + +function fadeOutfunctionJs() { + buttonTest('fadeOutIdTestResultjs', 'fadeoutbtn') + let main = document.getElementById('fadeOutIdTestResultjs') + btn = document.getElementById('fadeoutbtn') + + let pOne = document.createElement("p") + pOne.innerText = 'This is a P ' + main.appendChild(pOne) + + btn.addEventListener('click', function () { + pOne.style.transition = "opacity 1s"; + pOne.style.opacity = '0'; + }) +} \ No newline at end of file diff --git a/assets/scripts/functionsSelectorsJq.js b/assets/scripts/functionsSelectorsJq.js new file mode 100644 index 00000000..6fc25fe1 --- /dev/null +++ b/assets/scripts/functionsSelectorsJq.js @@ -0,0 +1,170 @@ +//! Selectors Functions------------------------------------------------------------ + +function iterateCollectionfunctionJq() { + buttonTest('iterateCollectionIdTestResultjq', 'interatecollectionjq') + for (let index = 0; index < 5; index++) { + let el = $("").text(" This is a P").addClass('pdif') + $('#iterateCollectionIdTestResultjq').append(el) + } + + + $('#interatecollectionjq').on('click', function () { + $('.pdif').each(function (indexInArray, valueOfElement) { + $(valueOfElement).removeClass('pdif') + $(valueOfElement).addClass('pClassGreen') + + }) + }) +} + +function parentElementfunctionJq() { + buttonTest('parentElementIdTestResultjq', 'parentElementjq') + let div1 = $("
").text(" This is a div").attr('id', 'div1id')
+ $('#parentElementIdTestResultjq').append(div1)
+
+ let el = $("
").text(" This is a P") + $('#div1id').append(el) + + $('#parentElementjq').on('click', function () { + el.parent().css('fontWeight', 'bolder') + }) +} + +function childrenElementfunctionJq() { + buttonTest('childrenElementIdTestResultjq', 'childrenElementjq') + let div1 = $("
").text(" This is a div").attr('id', 'div1id')
+ $('#childrenElementIdTestResultjq').append(div1)
+
+ let el = $("·option 1 ")
+ let lijq2 = $("·option 2 ")
+ lijq1.attr("id", "liq1id")
+ lijq2.attr("id", "liq2id")
+ console.log(lijq1)
+ lijq1.css("color", "black")
+ lijq2.css("color", "black")
+ uljq.append(lijq1)
+ uljq.append(lijq2)
+ $("#ullistElementIdTestResultjq").append(uljq)
+ lijq1.on("click", () => {
+ alert("first")
+ })
+ lijq2.on("click", () => {
+ alert("second")
+ }
+ )
+}
diff --git a/assets/scripts/scriptJs.js b/assets/scripts/scriptJs.js
new file mode 100644
index 00000000..8f900df1
--- /dev/null
+++ b/assets/scripts/scriptJs.js
@@ -0,0 +1,252 @@
+//! Events
+
+function htmlLoadedElementfunctionIdJs() {
+ let p = document.createElement("p")
+ p.textContent = "Document HTML loaded"
+ document.getElementById("HTMLLoadedElementIdTestResultjs").appendChild(p)
+}
+
+function clickElementfunctionIdJs() {
+ let p = document.createElement("p")
+ p.textContent = "click"
+ document.getElementById("clickElementIdTestResultjs").appendChild(p)
+}
+
+function dblclickElementfunctionIdJs() {
+ let dblclick = document.getElementById("dblclickElementfunctionIdJs")
+ dblclick.addEventListener("dblclick", () => {
+ let pe = document.createElement("p")
+ pe = "js Doble click"
+ document.getElementById("dblclickElementIdTestResultjs").innerHTML = pe
+ })
+}
+
+function keyListenerjs() {
+ let prueba1 = document.getElementById("keyElementfunctionIdJs")
+ prueba1.addEventListener('keydown', function (e) {
+ let pruebajs = document.createElement("p")
+ pruebajs = ` You pressed ${e.key}`
+ document.getElementById("keyElementIdTestResultjs").innerHTML = pruebajs
+ }, false);
+}
+
+
+function cursorElementfunctionIdJs() {
+ let cursor = document.getElementById("cursorElementfunctionIdJs")
+ cursor.addEventListener("mousemove", function (e) {
+ let p = document.createElement("p")
+ p = ` mouse location = x: ${e.x},Y:${e.y}`
+ document.getElementById("cursorElementIdTestResultjs").innerHTML = p
+ })
+}
+
+function valueInputElementfunctionIdJs() {
+ let input = document.createElement("input")
+ document.getElementById("valueInputElementIdTestResultjs").appendChild(input)
+ document.getElementById("valueInputElementIdTestResultjs").addEventListener("change", function () {
+ alert("Input Changed")
+ })
+}
+
+function imageloadInputElementfunctionIdJs() {
+ let input = document.createElement("input")
+ input.setAttribute("type", "file")
+ input.setAttribute("accept", "image/png, image/jpeg")
+ document.getElementById("imageloadInputElementIdTestResultjs").appendChild(input)
+ document.getElementById("imageloadInputElementIdTestResultjs").addEventListener("change", function () {
+ alert("Image Loaded")
+ console.log(input.files[0])
+ let foto = input.files[0]
+ let imageType = /image.*/;
+ if (foto.type.match(imageType)) {
+ var reader = new FileReader()
+ reader.onload = function (e) {
+ document.getElementById("imageloadInputElementIdTestResultjs").innerHTML = "";
+ let img = new Image()
+ img.src = reader.result;
+ document.getElementById("imageloadInputElementIdTestResultjs").appendChild(img)
+ }
+ reader.readAsDataURL(foto)
+ } else {
+ document.getElementById("imageloadInputElementIdTestResultjs").innerHTML = "File not supported!"
+ }
+ })
+}
+
+
+function failImageloadInputElementIdTestResultjs() {
+ let input = document.createElement("input")
+ input.setAttribute("type", "file")
+ input.setAttribute("accept", "image/png, image/jpeg")
+ document.getElementById("failImageloadInputElementIdTestResultjs").appendChild(input)
+ document.getElementById("failImageloadInputElementIdTestResultjs").addEventListener("change", function () {
+ alert("Image has failed")
+ })
+}
+
+function formSubmloadInputElementfunctionIdJs() {
+ let inputform = document.createElement("input")
+ inputform.value = "submit"
+ inputform.setAttribute("type", "submit")
+ document.getElementById("formSubmloadInputElementIdTestResultjs").appendChild(inputform)
+ document.getElementById("formSubmloadInputElementIdTestResultjs").addEventListener("click", () => {
+ alert("submitted")
+ })
+}
+
+function changSelectInputElementfunctionIdJs() {
+ let formElement = document.createElement("select");
+ let optionElement = document.createElement("option");
+ optionElement.value = "a";
+ optionElement.text = "a"
+ let optionElement2 = document.createElement("option");
+ optionElement2.value = "b";
+ optionElement2.text = "b";
+ let optionElement3 = document.createElement("option");
+ optionElement3.value = "c";
+ optionElement3.text = "c";
+ formElement.appendChild(optionElement);
+ formElement.appendChild(optionElement2)
+ formElement.appendChild(optionElement3)
+ formElement.id = "bar";
+ let testresultform = document.getElementById("changSelectInputElementIdTestResultjs")
+ testresultform.appendChild(formElement)
+ testresultform.addEventListener("change", () => {
+ optionSelect = `You select ${formElement.value}`
+ testresultform.innerHTML = optionSelect
+ })
+}
+
+function posiMouseElementfunctionIdJs() {
+ let boton = document.createElement("button")
+ boton.textContent = "mouseover"
+ document.getElementById("posiMouseElementIdTestResultjs").appendChild(boton)
+ document.getElementById("posiMouseElementIdTestResultjs").addEventListener("mouseover", () => {
+ let texto = document.createElement("p")
+ texto.textContent = "mouseover detected"
+ document.getElementById("posiMouseElementIdTestResultjs").appendChild(texto)
+ })
+
+}
+
+function checkboxElementfunctionIdJs() {
+ let inputcheckbox = document.createElement("input")
+ inputcheckbox.setAttribute("type", "checkbox")
+ let checkresult = document.getElementById("checkboxElementIdTestResultjs")
+ checkresult.appendChild(inputcheckbox)
+ checkresult.addEventListener("change", () => {
+ if (inputcheckbox.checked == true) {
+ alert("you have checked the box")
+ } else if (inputcheckbox.checked == false)
+ alert("you have unchecked the box")
+ })
+}
+
+function ullistElementfunctionIdJs() {
+ let ul = document.createElement("ul")
+ let li = document.createElement("li")
+ let li2 = document.createElement("li")
+ li.innerText = "·one"
+ li.setAttribute("id", "p1li")
+ li2.innerText = "·two"
+ li.style.color = "black"
+ li2.setAttribute("id", "p2li")
+ li2.style.color = "black"
+ ul.appendChild(li)
+ ul.appendChild(li2)
+ document.getElementById("ullistElementIdTestResultjs").appendChild(ul)
+ document.getElementById("p1li").addEventListener("click", (e) => {
+ alert("selected one")
+ })
+ document.getElementById("p2li").addEventListener("click", () => {
+ alert("selected two")
+ })
+}
+
+
+function failImageloadInputElementIdTestResultjs() {
+ let input = document.createElement("input")
+ input.setAttribute("type", "file")
+ input.setAttribute("accept", "image/png, image/jpeg")
+ document.getElementById("failImageloadInputElementIdTestResultjs").appendChild(input)
+ document.getElementById("failImageloadInputElementIdTestResultjs").addEventListener("change", function () {
+ alert("Image has failed")
+ })
+}
+
+function formSubmloadInputElementfunctionIdJs() {
+ let inputform = document.createElement("input")
+ inputform.value = "submit"
+ inputform.setAttribute("type", "submit")
+ document.getElementById("formSubmloadInputElementIdTestResultjs").appendChild(inputform)
+ document.getElementById("formSubmloadInputElementIdTestResultjs").addEventListener("click", () => {
+ alert("submitted")
+ })
+}
+
+function changSelectInputElementfunctionIdJs() {
+ let formElement = document.createElement("select");
+ let optionElement = document.createElement("option");
+ optionElement.value = "a";
+ optionElement.text = "a"
+ let optionElement2 = document.createElement("option");
+ optionElement2.value = "b";
+ optionElement2.text = "b";
+ let optionElement3 = document.createElement("option");
+ optionElement3.value = "c";
+ optionElement3.text = "c";
+ formElement.appendChild(optionElement);
+ formElement.appendChild(optionElement2)
+ formElement.appendChild(optionElement3)
+ formElement.id = "bar";
+ let testresultform = document.getElementById("changSelectInputElementIdTestResultjs")
+ testresultform.appendChild(formElement)
+ testresultform.addEventListener("change", () => {
+ optionSelect = `You select ${formElement.value}`
+ testresultform.innerHTML = optionSelect
+ })
+}
+
+function posiMouseElementfunctionIdJs() {
+ let boton = document.createElement("button")
+ boton.textContent = "mouseover"
+ document.getElementById("posiMouseElementIdTestResultjs").appendChild(boton)
+ document.getElementById("posiMouseElementIdTestResultjs").addEventListener("mouseover", () => {
+ let texto = document.createElement("p")
+ texto.textContent = "mouseover detected"
+ document.getElementById("posiMouseElementIdTestResultjs").appendChild(texto)
+ })
+
+}
+function checkboxElementfunctionIdJs() {
+ let inputcheckbox = document.createElement("input")
+ inputcheckbox.setAttribute("type", "checkbox")
+ let checkresult = document.getElementById("checkboxElementIdTestResultjs")
+ checkresult.appendChild(inputcheckbox)
+ checkresult.addEventListener("change", () => {
+ if (inputcheckbox.checked == true) {
+ alert("you have checked the box")
+ } else if (inputcheckbox.checked == false)
+ alert("you have unchecked the box")
+ })
+}
+function ullistElementfunctionIdJs() {
+ let ul = document.createElement("ul")
+ let li = document.createElement("li")
+ let li2 = document.createElement("li")
+ li.innerText = "·one"
+ li.setAttribute("id", "p1li")
+ li2.innerText = "·two"
+ li.style.color = "black"
+ li2.setAttribute("id", "p2li")
+ li2.style.color = "black"
+ ul.appendChild(li)
+ ul.appendChild(li2)
+ document.getElementById("ullistElementIdTestResultjs").appendChild(ul)
+ document.getElementById("p1li").addEventListener("click", (e) => {
+ alert("selected one")
+ })
+ document.getElementById("p2li").addEventListener("click", () => {
+ alert("selected two")
+ })
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..308ac312
--- /dev/null
+++ b/index.html
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ JQuery Cheat Sheets
+
+
+
+
+
+
+
\ No newline at end of file
").text(" This is a P") + $('#div1id').append(el) + + $('#childrenElementjq').on('click', function () { + $('#div1id').children().css('fontWeight', 'bolder') + }) +} + +function classElementfunctionJq() { + buttonTest('classElementIdTestResultjq', 'classElemenntjq') + for (let index = 0; index < 5; index++) { + let el = $("
").text(" This is a P").addClass('pdifjq') + $('#classElementIdTestResultjq').append(el) + } + + + $('#classElemenntjq').on('click', function () { + $('.pdifjq').css('font-weight', 'bolder'); + }) +} + +function getElementbyidfunctionJq() { + buttonTest('getElementbyidIdTestResultjq', 'getelementbyidjq') + let el = $("
").text(" This is a P").attr('id', 'pOneidjq') + $('#getElementbyidIdTestResultjq').append(el) + + $('#getelementbyidjq').on('click', function () { + $('#pOneidjq').css('fontWeight', 'bolder') + }) +} + +function getOptionsfunctionJq() { + buttonTest('getOptionsIdTestResultjq', 'getoptionsjq') + for (let index = 0; index < 4; index++) { + let el = $("
").text(" This is a P").addClass('pdifjq') + $('#getOptionsIdTestResultjq').append(el) + } + let el = $("
").text(" This is a P").addClass('pdifjq').attr('id', 'pOneidjq') + $('#getOptionsIdTestResultjq').append(el) + + $('#getoptionsjq').on('click', function () { + $('.pdifjq[id]').css('fontWeight', 'bolder') + }) +} + +function valueFirstinputfunctionJq() { + buttonTest('valueFirstinputIdTestResultjq', 'valuefirstinputjq') + let el = $("").attr('placeholder', 'write something here') + $('#valueFirstinputIdTestResultjq').append(el) + + $('#valuefirstinputjq').on('click', function () { + inputvaluejq = $('input').first().val(); + console.log(inputvaluejq) + alert(inputvaluejq) + }) +} + +function animateitemfunctionJq() { + buttonTest('valueFirstinputIdTestResultjq', 'valuefirstinputjq') + let el = $("").attr('placeholder', 'write something here') + $('#valueFirstinputIdTestResultjq').append(el) + + $('#valuefirstinputjq').on('click', function () { + inputvaluejq = $('input').first().val(); + console.log(inputvaluejq) + alert(inputvaluejq) + }) +} + +function displaynoneandblockElementfunctionIdJq() { + buttonTest('displaynoneandblockElementIdTestResultjq', 'callmebaby2') + let contentoft = $("
") + let contentoft1 = $("") + contentoft.text("content 1").css("display", "none") + contentoft1.text("content 2").css("display", "none") + $("#displaynoneandblockElementIdTestResultjq").append(contentoft) + $("#displaynoneandblockElementIdTestResultjq").append(contentoft1) + $("#callmebaby2").on("click", () => { + if (contentoft.css('display') == 'none' && contentoft1.css('display') == 'none') { + contentoft.css('color', 'red') + contentoft.css('display', 'block') + contentoft1.css('color', 'green') + contentoft1.css('display', 'block') + } else if (contentoft.css('display') == 'block' && contentoft1.css('display') == 'block') { + contentoft.css('display', 'none') + contentoft1.css('display', 'none') + } + }) +} + +function changehrefattributeElementfunctionIdJq() { + let a1 = $('') + let a2 = $('') + let a3 = $('') + a1.text('link 1') + a2.text('link 2') + a3.text('link 2') + $("#changehrefattributeElementIdTestResultjq").append(a1) + $("#changehrefattributeElementIdTestResultjq").append(a2) + $("#changehrefattributeElementIdTestResultjq").append(a3) + buttonTest('changehrefattributeElementIdTestResultjq', 'changehrefjq') + $("#changehrefjq").on("click", () => { + a1.text('link changed') + }) +} + +function removeallitemsElementfunctionIdJq() { + let p1 = $("content1
") + let p2 = $("content2
") + let p3 = $("content3
") + $("#removeallitemsElementIdTestResultjq").append(p1) + $("#removeallitemsElementIdTestResultjq").append(p2) + $("#removeallitemsElementIdTestResultjq").append(p3) + buttonTest('removeallitemsElementIdTestResultjq', 'removelementalljq') + $("#removelementalljq").on("click", () => { + p1.remove() + }) +} + +function animateitemfunctionJq() { + buttonTest('animateitemIdTestResultjq', 'animateitemjq') + let main = $("#animateitemIdTestResultjq") + let btnjq = $("#animateitemjq") + let p = $("background animation
") + p.attr("id", "animatejq") + main.append(p) + btnjq.on("click", ()=>{ + setTimeout(() => { + p.css("animationName", "example") + p.css("animationDuration", "5s") + }, 2000); + }) +} \ No newline at end of file diff --git a/assets/scripts/functionsSelectorsJs.js b/assets/scripts/functionsSelectorsJs.js new file mode 100644 index 00000000..a0703624 --- /dev/null +++ b/assets/scripts/functionsSelectorsJs.js @@ -0,0 +1,217 @@ +//! Selectors Functions------------------------------------------------------------ + +function iterateCollectionfunctionJs() { + buttonTest('iterateCollectionIdTestResultjs', 'interateCollection') + let main = document.getElementById('iterateCollectionIdTestResultjs') + btn = document.getElementById('interateCollection') + for (let index = 0; index < 5; index++) { + let pOne = document.createElement("p") + pOne.innerText = 'This is a P ' + main.appendChild(pOne) + } + + btn.addEventListener('click', function () { + allP = document.querySelectorAll('p') + allP.forEach(element => { + element.classList.add('pClassGreen') + }); + }) +} + +function parentElementfunctionJs() { + buttonTest('parentElementIdTestResultjs', 'parentElementjs') + let main = document.getElementById('parentElementIdTestResultjs') + btn = document.getElementById('parentElementjs') + + let divOne = document.createElement("div") + divOne.setAttribute('id', 'divOneid') + divOne.innerText = 'This is a Div ' + main.appendChild(divOne) + + let pOne = document.createElement("p") + pOne.innerText = 'This is a P ' + divOne.appendChild(pOne) + + btn.addEventListener('click', function () { + parent = pOne.parentElement + parent.style.fontWeight = 'bolder'; + }) +} + + +function childrenElementfunctionJs() { + buttonTest('childrenElementIdTestResultjs', 'childrenElementjs') + let main = document.getElementById('childrenElementIdTestResultjs') + btn = document.getElementById('childrenElementjs') + + let divOne = document.createElement("div") + divOne.setAttribute('id', 'divOneid') + divOne.innerText = 'This is a Div ' + main.appendChild(divOne) + + let pOne = document.createElement("p") + pOne.innerText = 'This is a P ' + divOne.appendChild(pOne) + + btn.addEventListener('click', function () { + childrens = divOne.children + childrens[0].style.fontWeight = 'bolder'; + }) +} + +function classElementfunctionJs() { + buttonTest('classElementIdTestResultjs', 'classElementsjs') + let main = document.getElementById('classElementIdTestResultjs') + btn = document.getElementById('classElementsjs') + for (let index = 0; index < 5; index++) { + let pOne = document.createElement("p") + pOne.innerText = 'This is a P ' + pOne.setAttribute('class', 'pdif') + main.appendChild(pOne) + } + + btn.addEventListener('click', function () { + elems = document.getElementsByClassName('pdif') + + for (var i = 0; i < elems.length; ++i) { + elems[i].style.fontWeight = 'bolder'; + } + }) +} + + +function getElementbyidfunctionJs() { + buttonTest('getElementbyidIdTestResultjs', 'getelementbyidjs') + let main = document.getElementById('getElementbyidIdTestResultjs') + btn = document.getElementById('getelementbyidjs') + + let pOne = document.createElement("p") + pOne.innerText = 'This is a P ' + pOne.setAttribute('id', 'pOneidjs') + main.appendChild(pOne) + + btn.addEventListener('click', function () { + pOneId = document.getElementById('pOneidjs') + pOneId.style.fontWeight = 'bolder'; + }) +} + + +function displaynoneandblockElementfunctionIdJs() { + buttonTest('displaynoneandblockElementIdTestResultjs', 'callmebaby') + let content1 = document.createElement("p") + content1.textContent = "content 1" + let content2 = document.createElement("p") + content2.textContent = "content 2" + content1.setAttribute("class", "contentdisplaynone") + content2.setAttribute("class", "contentdisplaynone") + let pr = document.getElementById("displaynoneandblockElementIdTestResultjs") + pr.appendChild(content1) + pr.appendChild(content2) + content1.style.display = "none" + content2.style.display = "none" + document.getElementById("callmebaby").addEventListener("click", () => { + if (content1.style.display == "none" && content2.style.display == "none") { + content1.style.display = "block" + content2.style.display = "block" + content2.style.color = "red" + content1.style.color = "green" + } else if (content1.style.display == "block" && content2.style.display == "block") { + content1.style.display = "none" + content2.style.display = "none" + } + }) +} + +function changehrefattributeElementfunctionIdJs() { + let a1 = document.createElement("a") + let a2 = document.createElement("a") + let a3 = document.createElement("a") + a1.href = "link1" + a1.textContent = 'link 1' + document.getElementById("changehrefattributeElementIdTestResultjs").appendChild(a1) + a2.textContent = 'link 2' + a3.textContent = 'link 3' + a2.href = "link2" + document.getElementById("changehrefattributeElementIdTestResultjs").appendChild(a2) + a3.href = "link3" + document.getElementById("changehrefattributeElementIdTestResultjs").appendChild(a3) + buttonTest('changehrefattributeElementIdTestResultjs', 'changehref') + document.getElementById("changehref").addEventListener("click", () => { + a1.textContent = 'link 1' + }) +} + +function getOptionsfunctionJs() { + buttonTest('getOptionsIdTestResultjs', 'getoptionsjs') + let main = document.getElementById('getOptionsIdTestResultjs') + btn = document.getElementById('getoptionsjs') + + for (let index = 0; index < 4; index++) { + let pOne = document.createElement("p") + pOne.innerText = 'This is a P ' + pOne.setAttribute('class', 'pdif') + main.appendChild(pOne) + } + + let ptwo = document.createElement("p") + ptwo.innerText = 'This is a P ' + ptwo.setAttribute('class', 'pdif') + ptwo.setAttribute('id', 'ptwoidjs') + main.appendChild(ptwo) + + btn.addEventListener('click', function () { + pOption = document.querySelectorAll('.pdif[id]') + pOption[0].style.fontWeight = 'bolder'; + }) +} + + +function valueFirstinputfunctionJs() { + buttonTest('valueFirstinputIdTestResultjs', 'valuefirstinputjs') + let main = document.getElementById('valueFirstinputIdTestResultjs') + btn = document.getElementById('valuefirstinputjs') + + let ptwo = document.createElement("input") + ptwo.setAttribute('placeholder', 'write something here') + main.appendChild(ptwo) + + btn.addEventListener('click', function () { + inputvaluejs = document.querySelector('input').value + console.log(inputvaluejs) + alert(inputvaluejs) + }) +} + +function animateitemfunctionJs() { + buttonTest('animateitemIdTestResultjs', 'animateitemjs') + let main = document.getElementById('animateitemIdTestResultjs') + btn = document.getElementById('animateitemjs') + let ptwo = document.createElement("p") + ptwo.innerText = 'background animation' + ptwo.setAttribute('id', 'animatejs') + main.appendChild(ptwo) + btn.addEventListener('click', function () { + let animationHTML = document.getElementById('animatejs'); + setTimeout(() => { + animationHTML.style.animationName = 'example'; + animationHTML.style.animationDuration = '5s'; + }, 2000); + }) +} + +function removeallitemsElementfunctionIdJs() { + let p1 = document.createElement("p") + let p2 = document.createElement("p") + let p3 = document.createElement("p") + p1.textContent = "content1" + p2.textContent = "content2" + p3.textContent = "content3" + document.getElementById("removeallitemsElementIdTestResultjs").appendChild(p1) + document.getElementById("removeallitemsElementIdTestResultjs").appendChild(p2) + document.getElementById("removeallitemsElementIdTestResultjs").appendChild(p3) + buttonTest('removeallitemsElementIdTestResultjs', 'removelementall') + document.getElementById("removelementall").addEventListener("click", () => { + p2.remove() + }) +} \ No newline at end of file diff --git a/assets/scripts/mainScript.js b/assets/scripts/mainScript.js new file mode 100644 index 00000000..a73ab876 --- /dev/null +++ b/assets/scripts/mainScript.js @@ -0,0 +1,77 @@ + +function createaDiv(title, idButtonClick, divdisplay, functionIdJs, functionJs, jsText, IdTestResultjs, functionIdJq, functionJq, jqText, IdTestResultjq) { + divContent = document.getElementById('content') + + let content = ``
+ content += `
`
+ content += ``
+
+ divContent.innerHTML += content
+}
+
+function cleanDiv() {
+ divContent = document.getElementById('content')
+ divContent.innerHTML = ''
+}
+
+function buttonTest(father, id) {
+ var btn = document.createElement('button')
+ btn.textContent = 'Button Test'
+ btn.setAttribute('id', id)
+ btn.classList.add('btn')
+ btn.classList.add('btn-danger')
+ divtest = document.getElementById(father)
+ divtest.appendChild(btn)
+}
+
+function functionsF(arrayName) {
+ arrayName.forEach(function (elem) {
+ createaDiv(elem.title, elem.idButtonClick, elem.divdisplay, elem.functionIdJs, elem.functionJs, elem.jsText, elem.IdTestResultjs, elem.functionIdJq, elem.functionJq, elem.jqText, elem.IdTestResultjq)
+ })
+
+ arrayName.forEach(function (elem) {
+ let divdisplay = document.getElementById(elem.divdisplay)
+
+ let showButton = document.getElementById(elem.idButtonClick)
+ showButton.addEventListener('click', function () {
+ divdisplay.classList.toggle("hide");
+ })
+
+ let callFunctionjs = document.getElementById(elem.functionIdJs)
+ callFunctionjs.addEventListener('click', elem.functionJs)
+
+ let callFunctionjq = document.getElementById(elem.functionIdJq)
+ callFunctionjq.addEventListener('click', elem.functionJq)
+ })
+}
+
+callEvents = document.getElementById('navBarEvents')
+callEvents.addEventListener('click', () => {
+ cleanDiv()
+ functionsF(allEvents)
+})
+
+callFunctions = document.getElementById('navBarFunctions')
+callFunctions.addEventListener('click', () => {
+ cleanDiv()
+ functionsF(allFunctions)
+})
+callSelectors = document.getElementById('navBarSelectors')
+callSelectors.addEventListener('click', () => {
+ cleanDiv()
+ functionsF(allSelectors)
+})
diff --git a/assets/scripts/scriptJquery.js b/assets/scripts/scriptJquery.js
new file mode 100644
index 00000000..74ee6ce2
--- /dev/null
+++ b/assets/scripts/scriptJquery.js
@@ -0,0 +1,145 @@
+//! Events
+
+function htmlLoadedElementfunctionIdJq() {
+ let textodelhtml = $("").text("Document HTML loaded")
+ $("#HTMLLoadedElementIdTestResultjq").append(textodelhtml)
+}
+
+function clickElementfunctionIdJq() {
+ let textodelhtml = $("").text("click")
+ $("#clickElementIdTestResultjq").append(textodelhtml)
+}
+
+function dblclickElementfunctionIdJq() {
+ $("#dblclickElementfunctionIdJq").dblclick(() => {
+ let textoadelhtml = $("").text("double click")
+ $("#dblclickElementIdTestResultjq").html(textoadelhtml)
+ })
+}
+
+function keyListenerjq() {
+ $("#keyElementfunctionIdJq").keypress(function (e) {
+ let pruebajq = document.createElement("p")
+ pruebajq = ` You pressed ${e.key}`
+ $("#keyElementIdTestResultjq").html(pruebajq)
+ })
+}
+
+function cursorElementfunctionIdJq() {
+ $("#cursorElementfunctionIdJq").bind("mousemove", function (e) {
+ let cursor = $("").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY);
+ $("#cursorElementIdTestResultjq").html(cursor)
+ });
+}
+function valueInputElementfunctionIdJq() {
+ let input = $("")
+ $("#valueInputElementIdTestResultjq").append(input)
+ $("#valueInputElementIdTestResultjq").on("change", function () {
+ alert("Input Changed")
+ })
+}
+function imageloadInputElementfunctionIdJq() {
+ var inputfoto = $("").attr("type", "file")
+ let imageloading = $("#imageloadInputElementIdTestResultjq")
+ imageloading.append(inputfoto)
+ imageloading.on("change", () => {
+ alert("Image Loaded")
+ foto = inputfoto[0].files[0]
+ let imageType = /image.*/;
+ if (foto.type.match(imageType)) {
+ let reader = new FileReader()
+ reader.onload = function (e) {
+ let prueba1 = ""
+ $("#imageloadInputElementIdTestResultjq").html(prueba1)
+ imageloading.html(prueba1)
+ let img = new Image()
+ img.src = reader.result;
+ $("#imageloadInputElementIdTestResultjq").append(img)
+ }
+ reader.readAsDataURL(foto)
+ } else {
+ let not = "File not supported!"
+ $("#imageloadInputElementIdTestResultjq").html(not)
+ }
+ })
+}
+
+function failImageloadInputElementIdTestResultjq() {
+ let inputimage = $("").attr("type", "file");
+ let imageload = $("#failImageloadInputElementIdTestResultjq")
+ imageload.html(inputimage)
+ imageload.on("change", () => {
+ alert("image failed")
+ let texto = "image failed to load"
+ imageload.append(texto)
+ })
+}
+function formSubmloadInputElementfunctionIdJq() {
+ let inputformjq = $("").attr("type", "submit")
+ let inputid = $("#formSubmloadInputElementIdTestResultjq")
+ let texto = "submit"
+ $(inputformjq).attr("value", texto)
+ inputid.html(inputformjq)
+ inputid.on("click", () => {
+ let content = "Your form has been submited"
+ inputid.append(content);
+ })
+}
+function changSelectInputElementfunctionIdJq() {
+ // $("")
+ let s = $('');
+ let o = [1, 2, 3];
+ for (var i in o) {
+ s.append($('').html(o[i]));
+ }
+ let changeselecet = $('#changSelectInputElementIdTestResultjq')
+ changeselecet.append(s);
+ changeselecet.on("change", (e) => {
+ console.log(e)
+ alert("input changed")
+ })
+}
+
+function posiMouseElementfunctionIdJq() {
+ let boton = $("")
+ $("#posiMouseElementIdTestResultjq").append(boton)
+ $("#posiMouseElementIdTestResultjq").on("mouseover", () => {
+ let texto = $("${title}
+mouser over detected
") + $("#posiMouseElementIdTestResultjq").append(texto) + }) +} + + +function checkboxElementfunctionIdJq() { + let input = $("").attr("type", "checkbox") + let resultid = $("#checkboxElementIdTestResultjq") + resultid.append(input) + resultid.on("change", () => { + if ($("input").is(":checked") == true) { + alert("you have checked the box") + } else if ($("input").is(":checked") == false) { + alert("you have unchecked the box") + } + }) +} + +function ullistElementfunctionIdJq() { + let uljq = $("