diff --git a/src/assets/css/sections.css b/src/assets/css/sections.css new file mode 100644 index 00000000..b20dc5a5 --- /dev/null +++ b/src/assets/css/sections.css @@ -0,0 +1,85 @@ + + +/* The Modal (background) */ +*{ + /* overflow: hidden; */ +} + + /* Modal Content/Box */ + .modal-content { + background-image: url(/src/assets/img/vs2.jpg); + background-position: center; + background-size: cover; + background-repeat: no-repeat; + /* padding: 20px; */ + font-family: 'Permanent Marker', cursive; + color: rgb(43, 43, 43); + width: 100%; + height: 100vh; + text-align: center; + } + + .generalcontent{ + width: 100%; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + } + .generalcontent>h2{ + position: absolute; + padding-bottom: 90vh; + } + .generalcontent>div{ + padding-top: 100px; + width: 50%; + text-align: center; + height: 90vh; + } + /* .js{ + /* background-color: rgba(239,216,29,255); */ + /* } */ + /* .jq{ */ + /* background-color: rgba(8,105,174,255); */ + /* } */ + .js>.codigocontent{ + background-color: yellow; + } + .jq>.codigocontent{ + background-color: blue; + } + + .codigocontent{ + padding: 10px; + width: 50%; + margin: auto; + border-radius: 10px; +} +.testcontent{ + border:1px solid black; + width: 70%; + height: 40%; + margin: 2% auto; + +} +.resultdiv{ + height: 50px; +} +img{ + max-width: 300px; + max-height: 100px; + cursor: pointer; +} +.border{ + border: 1px solid black; +} +.btnclass{ + border: 1px solid black; + border-radius: 10px; + background-color: chocolate; + font-size: 1.5em; +} + +.generalcontent>h2{ + cursor: pointer; +} \ No newline at end of file diff --git a/src/assets/css/style.css b/src/assets/css/style.css new file mode 100644 index 00000000..bab7f4f2 --- /dev/null +++ b/src/assets/css/style.css @@ -0,0 +1,100 @@ + +/* contenedor principal */ +body{ + overflow: hidden; +} +.content{ + font-family: 'Permanent Marker', cursive; + display: flex; + width: 100%; + justify-content: space-around; + margin: auto; +} +section{ + height: 100vh; +} +/* secciones */ +.content>div{ + text-align: center; + width: 25%; + padding: 0.2%; + border-radius: 1%; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; +} +h1{ + position:relative; + top: -3px; + border-radius: 10px; + width: 100%; + padding: 10px; + margin: 0; +} +.events{ + background-color: red; +} +.events>h1{ + background-color: rgb(185, 0, 0); +} +.functions{ + background-color: green; +} +.functions>h1{ + background-color: rgb(0, 90, 0); +} +.selectors{ + background-color: blue; +} +.selectors>h1{ + background-color: rgb(0, 0, 168); +} + +.sec{ + box-shadow: 1px 1px 3px white; + background-color: white; + border: 1px solid gray; + border-radius: 10px; + width: 80%; + margin: 3%; + display: flex; + flex-direction: column; + align-items: center; + height: 60px; + transition: 1s; +} +.sec:hover{ + height: 100%; +} + +/* listas */ +.sec>ul{ + /* transition: 1s; */ + visibility:hidden; + padding: 0; + display: flex; + flex-direction: column; + align-items: center; +} + + + +.sec>ul>li{ + text-align: center; + width: 100%; + margin: auto; + list-style: none; + margin: 0.5em; + cursor: pointer; +} +.sec>ul>li:hover{ + box-shadow: 1px 1px 4px black; + border-radius: 4px; + background-color: rgb(240, 240, 240); +} +.sec>ul>li>a{ + text-decoration: none; + color: black; +} + diff --git a/src/assets/html/event.html b/src/assets/html/event.html new file mode 100644 index 00000000..c4592736 --- /dev/null +++ b/src/assets/html/event.html @@ -0,0 +1,413 @@ + + + + + + + + + + + + + + Events + + + +
+
+
+

HTML document has been loaded

+
+

JavaScript

+
+ document.onload() +
+
+

Click the button

+ +
+
+
+
+

JQuery

+
+ $(document).ready() +
+
+

Document is Loaded?

+ +
+
+
+
+
+
+
+
+
+

HTML item has been clicked

+
+

JavaScript

+
+ document.addEventListener("click", () => {}) +
+
+

Do you have clicked?

+ +
+
+
+
+

JQuery

+
+ $(".myvalue").click(() => {}) +
+
+

Do you have clicked?

+ +
+
+
+
+
+
+
+
+
+

HTML item has been doble clicked

+
+

JavaScript

+
+ document.addEventListener("dblclick", () => {}) +
+
+

Do you have doble clicked?

+ +
+
+
+
+

JQuery

+
+ $(".myvalue").dblclick(() => {}) +
+
+

Do you have doble clicked?

+ +
+
+
+
+
+
+
+
+
+

Presses a key on the keyboard

+
+

JavaScript

+
+ document.addEventListener('keypress', (e) => {}) +
+
+

Do you have press any key?

+
+
+
+
+

JQuery

+
+ $(".myvalue").keypress(() => {}) +
+
+

Do you have press any key?

+
+
+
+
+
+
+
+
+
+

Moves the mouse cursor

+
+

JavaScript

+
+ document.onmousemove() + onmousemove = function(e){e.x} +
+
+

Where is your mouse?

+
+
+
+
+

JQuery

+
+ $(document).bind('mousemove', function (e) {e.pageX})) +
+
+

Where is your mouse?

+
+
+
+
+
+
+
+
+
+

Changes a value of an text input

+
+

JavaScript

+
+ select.addEventListener("change", function () { }) +
+
+

have you changed the value?

+ +
+
+
+
+

JQuery

+
+ $('select').on('input', function (e) {}); +
+
+

have you changed the value?

+ +
+
+
+
+
+
+
+
+
+

When an image is loaded

+
+

JavaScript

+
+ if(img.complete) { }) +
+
+

the image is load?

+ Gato +
+
+
+
+

JQuery

+
+ $('img').load(function() {}) +
+
+

the image is load?

+ Gato +
+
+
+
+
+
+
+
+
+

When an image fails to load,

+
+

JavaScript

+
+ if(img.complete) { }) +
+
+

the image is load?

+ Gato +
+
+
+
+

JQuery

+
+ $('img').load(function() {}) +
+
+

the image is load?

+ Gato +
+
+
+
+
+
+
+
+
+

When the user changes the option of a select element

+
+

JavaScript

+
+ select.addEventListener("change", function () { }) +
+
+

have you changed the value?

+ +
+
+
+
+

JQuery

+
+ $('select').on('input', function (e) {}); +
+
+

have you changed the value?

+ +
+
+
+
+
+
+
+
+
+

When you position the mouse over an element

+
+

JavaScript

+
+ button.onmouseover=function(){} + button.onmouseout=function(){} + +
+
+

The mouse is over?

+ +
a
+
+
+
+

JQuery

+
+ $("button").mouseover(function () { } + $("button").mouseout(function () { } + +
+
+

The mouse is over?

+ +
a
+
+
+
+
+
+
+
+
+

When a checkbox is checked or unchecked

+
+

JavaScript

+
+ if (input.checked) { } +
+
+

this is checked?

+ +
+
+
+
+

JQuery

+
+ $(".checkbox").change(function () { + if (this.checked) { + //Do stuff + }}}) + +
+
+

this is checked?

+ +
+
+
+
+
+
+
+
+
+

Down the key on the keyboard

+
+

JavaScript

+
+ document.addEventListener('keydown', (e) => {}) +
+
+

Do you have press any key?

+
+
+
+
+

JQuery

+
+ $(".myvalue").keydown(() => {}) +
+
+

Do you have press any key?

+
+
+
+
+
+
+
+
+
+

Presses and up the key on the keyboard

+
+

JavaScript

+
+ document.addEventListener('keyup', (e) => {}) +
+
+

Do you have press any key?

+
+
+
+
+

JQuery

+
+ $(".myvalue").keyup(() => {}) +
+
+

Do you have press any key?

+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/src/assets/html/functions.html b/src/assets/html/functions.html new file mode 100644 index 00000000..2ddc1b35 --- /dev/null +++ b/src/assets/html/functions.html @@ -0,0 +1,580 @@ + + + + + + + + + + + + + + functions + + + +
+
+
+

Create HTML element

+
+

JavaScript

+
+ document.createElement("div"); +
+
+

Create new element

+ +
+
+
+
+

JQuery

+
+ $("< div>< /div>") +
+
+

Create new element

+ +
+
+
+
+
+
+
+
+
+

Remove HTML element

+
+

JavaScript

+
+ element.remove(); +
+
+

Remove the div

+ +
remove me
+
+
+
+

JQuery

+
+ $("element").remove(); +
+
+

Remove the div

+ +
remove me
+
+
+
+
+
+
+
+
+

Remove all elements whith a class

+
+

JavaScript

+
+ for (const elem of allElems) { + elem.remove(); + }; +
+
+

Remove elements with class a

+ +
class:a
+
class:b
+
class:a
+
+
+
+

JQuery

+
+ $('.allElems').remove(); +
+
+

Remove elements with class a

+ +
class:b
+
class:a
+
class:b
+
+
+
+
+
+
+
+
+

Apend a element

+
+

JavaScript

+
+ button.append(element) +
+
+

Append a element in the Text

+ +
texto
+
+
+
+

JQuery

+
+ $("button").append(element); +
+
+

Append a element in the Text

+ +
text
+
+
+
+
+
+
+
+
+

Prepend a element

+
+

JavaScript

+
+ button.prepend(element); +
+
+

Prepend a element in the text

+ +
text
+
+
+
+

JQuery

+
+ $("button").prepend(element); +
+
+

Prepend a element in the text

+ +
text
+
+
+
+
+
+
+
+
+

Create and add after

+
+

JavaScript

+
+ .insertAdjacentElement("afterEnd", el)} +
+
+

Insert after the text

+ +
text
+
+
+
+

JQuery

+
+ $(element).after(button); +
+
+

Insert after the text

+ +
text
+
+
+
+
+
+
+
+
+

Create and add befor

+
+

JavaScript

+
+ .insertAdjacentElement("beforebegin", el) +
+
+

Insert befor the text

+ +
text
+
+
+
+

JQuery

+
+ $(element).before(button); +
+
+

Insert befor the text

+ +
text
+
+
+
+
+
+
+
+
+

Clone Element

+
+

JavaScript

+
+ newElement = oldElement.cloneNode(true); +
+
+

Clon Element

+ Gato +
+
+
+
+

JQuery

+
+ newElement = $("oldElement").clone() +
+
+

Clon Element

+ Gato +
+
+
+
+
+
+
+
+
+

Add a new clas

+
+

JavaScript

+
+ element.classList.add("mystyle"); +
+
+

Add a class

+ +
+
+
+
+

JQuery

+
+ $("element").addClass("mystyle"); +
+
+

Add a class

+ +
+
+
+
+
+
+
+
+
+

Remove a class

+
+

JavaScript

+
+ element.classList.remove("mystyle"); +
+
+

Remove a clas with button

+ +
+
+
+
+

JQuery

+
+ $("element").removeClass("mystyle") +
+
+

Remove a clas with button

+ +
+
+
+
+
+
+
+
+
+

Toggel a class

+
+

JavaScript

+
+ element.classList.toggle("mystyle"); +
+
+

Toggel a clas with a button

+ +
+
+
+
+

JQuery

+
+ $("element").toggleClass("mystyle"); +
+
+

Toggel a clas with a button

+ +
+
+
+
+
+
+
+
+
+

Add a Attribute

+
+

JavaScript

+
+ element.setAttribute("attr","value attr") +
+
+

Add a Attribute with button

+ +
+
+
+
+

JQuery

+
+ $("element").attr("attr", "value attr"); +
+
+

Add a Attribute with button

+ +
+
+
+
+
+
+
+
+
+

Remove a Attribute

+
+

JavaScript

+
+ element.removeAttribute("attr") +
+
+

Remove a Attribute with button

+ +
+
+
+
+

JQuery

+
+ $("element").removeAttr("attr") +
+
+

Remove a Attribute with button

+ +
+
+
+
+
+
+
+
+
+

Add Data attribute

+
+

JavaScript

+
+ element.setAttribute("data-pre") +
+
+

add the data-src attribute

+ Gato +
+
+
+
+

JQuery

+
+ element.data("pre") +
+
+

add the data-src attribute

+ Gato +
+
+
+
+
+
+
+
+
+

Remove Data attribute

+
+

JavaScript

+
+ element.removeAttribute("data-pre") +
+
+

remove the data-src attribute

+ Gato +
/src/assets/img/gato.jpg
+
+
+
+

JQuery

+
+ element.removeAttr("data-pre") + element.removeData("pre") + +
+
+

remove the data-src attribute

+ Gato +
/src/assets/img/gato.jpg
+
+
+
+
+
+
+
+
+

Change the attribut

+
+

JavaScript

+
+ element.attr=val attr +
+
+

Change the attribut of the button

+ +
+
+
+
+

JQuery

+
+ element.attr=val attr +
+
+

Change the attribut of the button

+ +
+
+
+
+
+
+
+
+
+

Hide and Show

+
+

JavaScript

+
+ element.style.display = 'block'; + element.style.display = 'none'; + +
+
+

the image is hiden?

+ + Gato +
+
+
+

JQuery

+
+ element.show() + element.hide() + element.toggle() + +
+
+

the image is hiden?

+ + Gato +
+
+
+
+
+
+
+
+

FedeIn FedeOut

+
+

JavaScript

+
+
+

JQuery

+
+ $(".checkbox").change(function () { + if (this.checked) { + //Do stuff + }}}) + +
+
+

the image is hiden?

+
+ Gato +
+
+
+
+
+
+
+
+

Animates

+
+

JavaScript

+
+ animationHTML.style.animationName = 'example'; + animationHTML.style.transition = '2s'; +
+
+

animate the imge

+ + Gato +
+
+
+

JQuery

+
+ $("img").animate() +
+
+

animate the imge

+ + Gato +
+
+
+
+
+ + \ No newline at end of file diff --git a/src/assets/html/selectors.html b/src/assets/html/selectors.html new file mode 100644 index 00000000..9866feb2 --- /dev/null +++ b/src/assets/html/selectors.html @@ -0,0 +1,295 @@ + + + + + + + + + + + + + + Selectors + + +
+
+
+

Get a parent element

+
+

JavaScript

+
+ element.parentElement; +
+
+

Get a button parent

+
+ +
+
+
+
+
+

JQuery

+
+ $(Selection).parent() +
+
+

Get a button parent

+
+ +
+
+
+
+
+
+
+
+
+
+

Get a collection childre

+
+

JavaScript

+
+ myElement.children; +
+
+

Get a collection childre of the list

+ +
    +
  • a
    • +
  • b
    • +
  • c
    • +
+
+
+
+
+

JQuery

+
+ $(Selection).children() +
+
+

Get a collection childre of the list

+ +
    +
  • a
    • +
  • b
    • +
  • c
    • +
+
+
+
+
+
+
+
+
+
+

Get all elements whith a class

+
+

JavaScript

+
+ document.getElementsByClassName("class") +
+
+

Get element with the class is a

+ +
class:a
+
class:b
+
class:a
+
+
+
+

JQuery

+
+ $(".class") +
+
+

Get element with the class is a

+ +
class:b
+
class:a
+
class:b
+
+
+
+
+
+
+
+
+

Get element by Id

+
+

JavaScript

+
+ document.getElementById("Id"); +
+
+

Get a element with the id:b

+ +
id:a
+
id:b
+
id:c
+
+
+
+
+

JQuery

+
+ $('#Id') +
+
+

Get a element with the id:a

+ +
id:a
+
id:b
+
id:c
+
+
+
+
+
+
+
+
+
+

Get elements for attributs

+
+

JavaScript

+
+ document.querySelectorAll('option[selected]'); +
+
+

Get elements with the src atributs

+ +
class:a
+
class:b
+
class:a
+
+
+
+

JQuery

+
+ $('option[selected]'); +
+
+

Get elements with the src atributs

+ +
class:b
+
class:a
+
class:b
+
+
+
+
+
+
+
+
+

Get a value for the input

+
+

JavaScript

+
+ select.value +
+
+

Get the value is selected

+ +
+
+
+
+

JQuery

+
+ $('select').val() +
+
+

Get the value is selected

+ +
+
+
+
+
+
+
+
+
+

Get the value inputs

+
+

JavaScript

+
+ select.value +
+
+

this is checked?

+ +
+
+
+
+

JQuery

+
+ $('select').val() +
+
+

this is checked?

+ +
+
+
+
+
+
+
+
+
+

Get a first element

+
+

JavaScript

+
+ button.append(element) +
+
+

Get a first element of the div

+ +
+
a
+
b
+
c
+
+
+
+
+

JQuery

+
+ $('element').first(); +
+
+

Get a first element of the div

+ +
+
a
+
b
+
c
+
+ +
+
+
+
+
+ + \ No newline at end of file diff --git a/src/assets/img/gato.jpg b/src/assets/img/gato.jpg new file mode 100644 index 00000000..2e665cab Binary files /dev/null and b/src/assets/img/gato.jpg differ diff --git a/src/assets/img/vs2.jpg b/src/assets/img/vs2.jpg new file mode 100644 index 00000000..09313144 Binary files /dev/null and b/src/assets/img/vs2.jpg differ diff --git a/src/assets/index.html b/src/assets/index.html new file mode 100644 index 00000000..0fcf5e20 --- /dev/null +++ b/src/assets/index.html @@ -0,0 +1,116 @@ + + + + + + + + + + + + + cheat sheet + + +
+
+

Events

+
+

Keyboard

+ +
+
+

Mouse

+ +
+
+

Load

+ +
+
+

Change

+ +
+
+
+

Functions

+
+

create and place

+ +
+
+

Class

+ +
+
+

Atributes

+ +
+
+

Efects

+ +
+
+
+

Selectors

+
+

Selectors

+ +
+
+ + +
+ + \ No newline at end of file diff --git a/src/assets/js/jqueryEvents.js b/src/assets/js/jqueryEvents.js new file mode 100644 index 00000000..9f66f8bd --- /dev/null +++ b/src/assets/js/jqueryEvents.js @@ -0,0 +1,89 @@ + + + +//? keyboard +//todo When the user presses a key on the keyboard +var jqresult4=$("#jqresult4") +window.addEventListener('keypress', function (e) { + jqresult4.text(`You pressed ${e.key} and code is ${e.keyCode}`) ; +}, false); +//todo When the user presses down a key on the keyboard +var jqresult35=$("#jqresult35") +window.addEventListener('keydown', function (e) { + jqresult35.text(`You pressed ${e.key} and code is ${e.keyCode}`) ; +}, false); +//todo When the user presses up a key on the keyboard +var jqresult36=$("#jqresult36") +window.addEventListener('keyup', function (e) { + jqresult36.text(`You pressed ${e.key} and code is ${e.keyCode}`) ; +}, false); +//? MOUSE +//todo When an HTML item has been clicked +var jqresult2=$("#jqresult2") +var jqbtn2=$("#jqbtntest2") +jqbtn2.on("click", () => { + jqresult2.text("estoy haciendo un click") +}) +//todo When an HTML item has been double clicked +var jqresult3=$("#jqresult3") +var jqbtn3=$("#jqbtntest3") +jqbtn3.on("dblclick", () => { + jqresult3.text("estoy haciendo doble-click") +}) +//todo to see where the mouse moves +var jqresult5=$("#jqresult5") +function jqtest5(a) { + jqresult5.text(`mouse location = X: ${a.x}, Y: ${a.y}`) ; +} +//todo When you position the mouse over an element +$("#jqbtntest10").onmouseover = function () { + mouseOverj()}; +$("#jqbtntest10").onmouseout = function () { + mouseOutj()}; +function mouseOverj() { + $("#jqresult10").css({"color" : "red"});} +function mouseOutj() { + $("#jqresult10").css({"color" : "black"});} +//? LOAD +//todo When an image is loaded +var jqresult7 = $('#jqresult7') +var jqimg7 = $('#jqbtntest7') +jqimg7.on("click",function(){ + jqresult7.text("image is loaded") +}) +//todo When an image is no loaded +var jqresult7_1 = $('#jqresult7_1') +var jqimg7_1 = $('#jqbtntest7_1') +jqimg7_1.on("click",function(){ + jqresult7_1.text("image is no loaded") +}) +//todo HTML document has been loaded +var jqresult1=$("#jqresult1") +var jqbtn1=$("#jqbtntest1") +jqbtn1.on("click",function(){ + window.onload(jqresult1.text("document is loaded")) +}) +//? CHANGE +//todo When the user changes a value of an text input +var jqresult6=$("#jqresult6") +var jqinput6=$("#jqbtntest6") +jqinput6.on("change", function () { + jqresult6.text("Your are change the select") +}) +//todo When the user changes the option of a select element - +function myFunctionjq9() { + console.log("a") + var x = $("#jqbtntest9").val(); + $("#jqresult9").text("You selected: " + x); +} +//TODO When a checkbox is checked or unchecked +var jqcheck11=$('#jqbtntest11') +jqcheck11.on("change",function(){validatejq()}) +function validatejq() { + var jqresult11=$("#jqresult11") + if (jqcheck11.prop('checked')) { + jqresult11.text("checked") + } else { + jqresult11.text("You didn't check it!") + } +} \ No newline at end of file diff --git a/src/assets/js/jqueryFunctions.js b/src/assets/js/jqueryFunctions.js new file mode 100644 index 00000000..a53e290b --- /dev/null +++ b/src/assets/js/jqueryFunctions.js @@ -0,0 +1,159 @@ + +//?CREATE AND PLACE +//todo Create an HTML element with any text value +var jqbtn13=$('#jqbtntest13') +var jqresult13=$("#jqresult13") +jqbtn13.on("click",function(){ + var newbtn=$("") + newbtn.text("button") + jqresult13.append(newbtn) +}) +// //todo Remove an HTML element with any text value +var jqbtn14=$('#jqbtntest14') +var jqresult14=$('#jqresult14') +jqbtn14.on("click",function(){ + jqresult14.remove() +}) + +//todo remove all elements with the any class +var jqbtntest15=$("#jqbtntest15") +jqbtntest15.on("click",function(){ + var allElems= $(".jqa") + for (var i=0;i<=allElems.length;i++) { + allElems[0].remove(); + }; +}) + +//todo Append an HTML element with any text value to a parent element +var jqbtn16=$('#jqbtntest16') +var jqresult16=$("#jqresult16") +jqbtn16.on("click",function(){ + var newbtn=$(""); + newbtn.text("button") + jqresult16.append(newbtn) +}) + +//todo prepend an HTML element with any text value to a parent element +var jqbtn17=$('#jqbtntest17') +var jqresult17=$("#jqresult17") +jqbtn17.on("click",function(){ + var newbtn=$("") + newbtn.text("button") + jqresult17.prepend(newbtn) +}) + +//todo Create and add an HTML element with any text value after another element +var divjq = $("#jqbtntest18"); +divjq.on("click",function(){ + var jqresult18=$("#jqresult18") + var eljq = $("") + eljq.text("text"); + jqresult18.after(eljq) +}) + +//todo Create and add an HTML element with any text value before another element +var divjq = $("#jqbtntest19"); +var jqresult19=$("#jqresult19") +divjq.on("click",function(){ + el = $("") + el.text("text"); + jqresult19.before(el)}) + +//todo Clone an HTML element within other element +var oldElementj = $("#jqbtntest20"); +var newElementj = oldElementj.clone(); +oldElementj.on("click",function(){ + console.log(newElementj); + oldElementj.after(newElementj)}) + + +//? CLass +//todo Add a class to an HTML item +var jqbtntest21 = $("#jqbtntest21"); +jqbtntest21.on("click",function(){ + jqbtntest21.addClass("btnclass")}) + +//todo Remove a class to an HTML item +var jqbtntest22 = $("#jqbtntest22"); +jqbtntest22.on("click",function(){jqbtntest22.removeClass("btnclass")}) + +//todo Toggle a class to an HTML item +var jqbtntest23 = $("#jqbtntest23"); +jqbtntest23.on("click",function(){jqbtntest23.toggleClass("btnclass")}) + +//? attributes +//todo Add a disabled attribute to an HTML button +var jqbtntest24 = $("#jqbtntest24"); +var jqresult24 = $("#jqresult24"); +jqbtntest24.on("click",function(){ + jqresult24.text("disabled:true") + jqbtntest24.attr("disabled","true") +}) + +//todo Add a disabled attribute to an HTML button +var jqbtntest25 = $("#jqbtntest25"); +var jqresult25 = $("#jqresult25"); +jqbtntest25.on("click",function(){ + jqresult25.removeAttr("disabled") + jqresult25.text("no disabled") +}) + + +//todo Set a data-src attribute to a img elementconst +var jqresult26=$("#jqresult26") +var jqbtntest26=$("#jqbtntest26") +jqbtntest26.on("click",function(){ + jqbtntest26.data('data-src', '/src/assets/img/gato.jpg'); + jqresult26.text('/src/assets/img/gato.jpg') +}) + +// //todo remove a data-src attribute to a img elementconst +var jqresult27=$("#jqresult27") +var jqbtntest27=$("#jqbtntest27") +jqbtntest27.on("click",function(){ + jqbtntest27.removeData("src") + jqresult27.text('undefined') +}) + +//todo change a disabled attribute to an HTML button +var jqbtntest28 = $("#jqbtntest28"); +var jqresult28 = $("#jqresult28"); +jqbtntest28.on("click",function(){ + console.log(jqresult28.prop("disabled")); + if(jqresult28.prop("disabled")==false){ + jqresult28.text("disabledtrue") + jqresult28.prop("disabled","true") + }else{ + jqresult28.prop("disabled","false") + jqresult28.text("disabled:false") + } +}) +// //? efects + +//todo Hide and show the img +var jqbtntest30 = $("#jqbtntest30"); +var jqresult30 = $("#jqresult30"); +jqbtntest30.on("click",function(){ + if(jqbtntest30.text()=="Fade In"){ + jqresult30.fadeIn(); + jqbtntest30.text("Fade Out") + } + else{ + jqresult30.fadeOut() + jqbtntest30.text("Fade In") + } + }) + +//todo Hide and show the img +var jqbtntest29 = $("#jqbtntest29"); +var jqresult29 = $("#jqresult29"); +jqbtntest29.on("click",function(){ + jqresult29.toggle(); +}) + +//todo animate +let jqbtntest31 = $('#jqbtntest31'); +let jqresult31 = $('#jqresult31'); +jqbtntest31.on('click', function (params) { + jqresult31.animate({"opacity": '0.2'}); +}) diff --git a/src/assets/js/jquerySelected.js b/src/assets/js/jquerySelected.js new file mode 100644 index 00000000..7298f4a1 --- /dev/null +++ b/src/assets/js/jquerySelected.js @@ -0,0 +1,52 @@ + +//? selectors + +//todo get a parent +$('#jqbtntest40').on("click",function(){ + $('#jqbtntest40').parent().css({"backgroundColor":"red"}) +}) + +//todo collection children +$("#jqbtntest41_1").on("click",function(){ + var arr=[] + for (const x of $('#jqbtntest41').children()) { + arr.push(x.innerHTML) + } + $("#jqresult41").text(arr) +}) + +//todo get element with a class +$("#jqbtntest42").on("click",function(){ + $(".jqa").css({"backgroundColor":"red"}) +}) + +//todo get element with a id +$("#jqbtntest43").on("click",function(){ + $("#jqresult43_2").css({"backgroundColor":"red"}) +}) + +// //todo get element with a attribut +$("#jqbtntest44").on("click",function(){ + $("div[src='']").eq(1).css({"backgroundColor":"red"}) +}) + +// //todo When the user changes the option of a select element - +function myFunctionjq45() { + var x = $("#jqbtntest45").val(); + $("#jqresult45").text("You selected: " + x) +} + +// //TODO When a checkbox is checked or unchecked +$("#jqbtntest46").on("change",function(){validateq()}) +function validateq() { + if ($("#jqbtntest46").prop("checked")==true) { + $("#jqresult46").text("checked") + } else { + $("#jqresult46").text("You didn't check it!") + } +} + +// //todo get first children +$("#jqbtntest47").on("click",function(){ +$("#jqresult47>div").eq(0).css({"backgroundColor":"red"}) +}) \ No newline at end of file diff --git a/src/assets/js/jsVanillaSelector.js b/src/assets/js/jsVanillaSelector.js new file mode 100644 index 00000000..afc49a22 --- /dev/null +++ b/src/assets/js/jsVanillaSelector.js @@ -0,0 +1,75 @@ +var titles=document.querySelectorAll(".generalcontent>h2") +for (const tit of titles) { + tit.addEventListener("click",function(){ + window.location.href="/src/assets/index.html" + }) +} + + +//? selectors + +//todo get a parent +var jsbtntest40 = document.getElementById('jsbtntest40'); +jsbtntest40.addEventListener("click",function(){ + jsbtntest40.parentElement.style.backgroundColor="red" +}) + +//todo collection children +var jsbtntest41 = document.getElementById('jsbtntest41'); +var jsbtntest41_1 = document.getElementById('jsbtntest41_1'); +var jsresult41 = document.getElementById('jsresult41'); +jsbtntest41_1.addEventListener("click",function(){ + var arr=[] + for (const x of jsbtntest41.children) { + arr.push(x.innerHTML) + } + jsresult41.innerHTML=arr +}) + +//todo get element with a class +var jsa = document.getElementsByClassName("jsa") +var jsbtntest42=document.getElementById("jsbtntest42") +jsbtntest42.addEventListener("click",function(){ + for (const x of jsa) { + x.style.backgroundColor="red" + } +}) + +//todo get element with a class +var jsresult43_2 = document.getElementById("jsresult43_2") +var jsbtntest43=document.getElementById("jsbtntest43") +jsbtntest43.addEventListener("click",function(){ + jsresult43_2.style.backgroundColor="red" +}) + +//todo get element with a class +var divsrc = document.querySelector("div[src='']") +var jsbtntest44=document.getElementById("jsbtntest44") +jsbtntest44.addEventListener("click",function(){ + divsrc.style.backgroundColor="red" +}) + +//todo When the user changes the option of a select element - +function myFunctionjs45() { + var x = document.getElementById("jsbtntest45").value; + document.getElementById("jsresult45").innerHTML = "You selected: " + x; +} + +//TODO When a checkbox is checked or unchecked +var jscheck46=document.getElementById('jsbtntest46') +jscheck46.addEventListener("change",function(){validate()}) +function validate() { + var jsresult46=document.getElementById("jsresult46") + if (jscheck46.checked) { + jsresult46.innerHTML="checked" + } else { + jsresult46.innerHTML="You didn't check it!" + } +} + +//todo get first children +var firstA = document.querySelector("#jsresult47>div") +var jsbtntest47=document.getElementById("jsbtntest47") +jsbtntest47.addEventListener("click",function(){ + firstA.style.backgroundColor="red" +}) \ No newline at end of file diff --git a/src/assets/js/jsvanillaEvents.js b/src/assets/js/jsvanillaEvents.js new file mode 100644 index 00000000..6ddf173f --- /dev/null +++ b/src/assets/js/jsvanillaEvents.js @@ -0,0 +1,104 @@ + +var titles=document.querySelectorAll(".generalcontent>h2") +console.log(titles) + +for (const tit of titles) { + tit.addEventListener("click",function(){ + window.location.href="/src/assets/index.html" + }) +} + +//? keyboard +//todo When the user presses a key on the keyboard +var jsresult4=document.getElementById("jsresult4") +window.addEventListener('keypress', function (e) { + jsresult4.innerHTML = `You pressed ${e.key} and code is ${e.keyCode}` ; +}, false); +//todo When the user presses down a key on the keyboard +var jsresult35=document.getElementById("jsresult35") +window.addEventListener('keydown', function (e) { + jsresult35.innerHTML = `You pressed ${e.key} and code is ${e.keyCode}` ; +}, false); +//todo When the user presses up a key on the keyboard +var jsresult36=document.getElementById("jsresult36") +window.addEventListener('keyup', function (e) { + jsresult36.innerHTML = `You pressed ${e.key} and code is ${e.keyCode}` ; +}, false); +//? MOUSE +//todo When an HTML item has been clicked +var jsresult2=document.getElementById("jsresult2") +var jsbtn2=document.getElementById("jsbtntest2") +jsbtn2.addEventListener("click", () => { + jsresult2.innerHTML="estoy haciendo un click" +}) +//todo When an HTML item has been double clicked +var jsresult3=document.getElementById("jsresult3") +var jsbtn3=document.getElementById("jsbtntest3") +jsbtn3.addEventListener("dblclick", () => { + jsresult3.innerHTML="estoy haciendo doble-click" +}) +//todo to see where the mouse moves +var jsresult5=document.getElementById("jsresult5") +onmousemove = function (e) { + jstest5(e) + jqtest5(e) +} +function jstest5(e){ + jsresult5.innerHTML = `mouse location = X: ${e.x}, Y: ${e.y}` ; +} +//todo When you position the mouse over an element +document.getElementById("jsbtntest10").onmouseover = function () { + mouseOver()}; +document.getElementById("jsbtntest10").onmouseout = function () { + mouseOut()}; +function mouseOver() { + console.log("a") + document.getElementById("jsresult10").style.color = "red";} +function mouseOut() { + document.getElementById("jsresult10").style.color = "black";} +//? LOAD +//todo When an image is loaded +var jsresult7 = document.getElementById('jsresult7') +var jsimg7 = document.getElementById('jsbtntest7') +jsimg7.addEventListener("click",function(){ + if (jsimg7.complete) { + jsresult7.innerHTML="image is loaded" +}}) +//todo When an image is no loaded +var jsresult7_1 = document.getElementById('jsresult7_1') +var jsimg7_1 = document.getElementById('jsbtntest7_1') +jsimg7_1.addEventListener("click",function(){ + if (!jsimg7_1.complete) { + jsresult7_1.innerHTML="image is loaded" +}else{ + jsresult7_1.innerHTML="image is no loaded" +}}) +//todo HTML document has been loaded +var jsresult1=document.getElementById("jsresult1") +var jsbtn1=document.getElementById("jsbtntest1") +jsbtn1.addEventListener("click",function(){ + window.onload(jsresult1.innerHTML="document is loaded") +}) +//? CHANGE +//todo When the user changes a value of an text input +var jsresult6=document.getElementById("jsresult6") +var jsinput6=document.getElementById("jsbtntest6") +jsinput6.addEventListener("change", function () { + jsresult6.innerHTML="Your are change the select" +}) +//todo When the user changes the option of a select element - +function myFunctionjs9() { + var x = document.getElementById("jsbtntest9").value; + document.getElementById("jsresult9").innerHTML = "You selected: " + x; +} +//TODO When a checkbox is checked or unchecked +var jscheck11=document.getElementById('jsbtntest11') +jscheck11.addEventListener("change",function(){validate()}) +function validate() { + var jsresult11=document.getElementById("jsresult11") + if (jscheck11.checked) { + jsresult11.innerHTML="checked" + } else { + jsresult11.innerHTML="You didn't check it!" + } +} \ No newline at end of file diff --git a/src/assets/js/jsvanillaFunctions.js b/src/assets/js/jsvanillaFunctions.js new file mode 100644 index 00000000..02cb08e8 --- /dev/null +++ b/src/assets/js/jsvanillaFunctions.js @@ -0,0 +1,159 @@ +var titles=document.querySelectorAll(".generalcontent>h2") +console.log(titles) + +for (const tit of titles) { + tit.addEventListener("click",function(){ + window.location.href="/src/assets/index.html" + }) +} + + +//?CREATE AND PLACE +//todo Create an HTML element with any text value +var jsbtn13=document.getElementById('jsbtntest13') +var jsresult13=document.getElementById("jsresult13") +jsbtn13.addEventListener("click",function(){ + var newbtn=document.createElement("BUTTON"); + newbtn.innerText="button" + jsresult13.append(newbtn) +}) +// //todo Remove an HTML element with any text value +var jsbtn14=document.getElementById('jsbtntest14') +var jsresult14=document.getElementById('jsresult14') +jsbtn14.addEventListener("click",function(){ + jsresult14.remove() +}) + +//todo remove all elements with the any class +var jsbtntest15=document.getElementById("jsbtntest15") +jsbtntest15.addEventListener("click",function(){ + var allElems= document.getElementsByClassName("jsa") + for (var i=0;i<=allElems.length;i++) { + allElems[0].remove(); + }; +}) + +//todo Append an HTML element with any text value to a parent element +var jsbtn16=document.getElementById('jsbtntest16') +var jsresult16=document.getElementById("jsresult16") +jsbtn16.addEventListener("click",function(){ + var newbtn=document.createElement("BUTTON"); + newbtn.innerText="button" + jsresult16.append(newbtn) +}) + +//todo prepend an HTML element with any text value to a parent element +var jsbtn17=document.getElementById('jsbtntest17') +var jsresult17=document.getElementById("jsresult17") +jsbtn17.addEventListener("click",function(){ + var newbtn=document.createElement("BUTTON"); + newbtn.innerText="button" + jsresult17.prepend(newbtn) +}) + +//todo Create and add an HTML element with any text value after another element +var div = document.getElementById("jsbtntest18"); +var jsresult18=document.getElementById("jsresult18") +div.addEventListener("click",function(){ + el = document.createElement("button"); + el.innerHTML = "text"; + jsresult18.insertAdjacentElement("afterEnd", el)}) + +//todo Create and add an HTML element with any text value after another element +var div = document.getElementById("jsbtntest19"); +var jsresult19=document.getElementById("jsresult19") +div.addEventListener("click",function(){ + el = document.createElement("button"); + el.innerHTML = "text"; + jsresult19.insertAdjacentElement("beforebegin", el)}) + +//todo Clone an HTML element within other element +var oldElement = document.getElementById("jsbtntest20"); +var newElement = oldElement.cloneNode(true); +oldElement.addEventListener("click",function(){ + oldElement.insertAdjacentElement("beforebegin", newElement)}) + + +//? CLass +//todo Add a class to an HTML item +var jsbtntest21 = document.getElementById("jsbtntest21"); +jsbtntest21.addEventListener("click",function(){ + jsbtntest21.classList.add("btnclass")}) + +//todo Remove a class to an HTML item +var jsbtntest22 = document.getElementById("jsbtntest22"); +jsbtntest22.addEventListener("click",function(){jsbtntest22.classList.remove("btnclass")}) + +//todo Toggle a class to an HTML item +var jsbtntest23 = document.getElementById("jsbtntest23"); +jsbtntest23.addEventListener("click",function(){jsbtntest23.classList.toggle("btnclass")}) + +//? attributes +//todo Add a disabled attribute to an HTML button +var jsbtntest24 = document.getElementById("jsbtntest24"); +var jsresult24 = document.getElementById("jsresult24"); +jsbtntest24.addEventListener("click",function(){ + jsresult24.innerHTML="disabled:true" + jsbtntest24.setAttribute("disabled","true") +}) + +//todo Add a disabled attribute to an HTML button +var jsbtntest25 = document.getElementById("jsbtntest25"); +var jsresult25 = document.getElementById("jsresult25"); +jsbtntest25.addEventListener("click",function(){ + jsresult25.removeAttribute("disabled") + jsresult25.innerHTML="no disabled" +}) + + +// //todo Set a data-src attribute to a img elementconst +var jsresult26=document.getElementById("jsresult26") +var jsbtntest26=document.getElementById("jsbtntest26") +jsbtntest26.addEventListener("click",function(){ + jsbtntest26.setAttribute('data-src', '/src/assets/img/gato.jpg'); + jsresult26.innerText='/src/assets/img/gato.jpg' +}) + +// //todo remove a data-src attribute to a img elementconst +var jsresult27=document.getElementById("jsresult27") +var jsbtntest27=document.getElementById("jsbtntest27") +jsbtntest27.addEventListener("click",function(){ + jsbtntest27.removeAttribute("data-src") + jsresult27.innerText='undefined' +}) + +//todo change a disabled attribute to an HTML button +var jsbtntest28 = document.getElementById("jsbtntest28"); +var jsresult28 = document.getElementById("jsresult28"); +jsbtntest28.addEventListener("click",function(){ + if(jsresult28.disabled==false){ + jsresult28.disabled=true + jsresult28.innerHTML="disabled:true" + }else{ + jsresult28.disabled=false + jsresult28.innerHTML="disabled:false" + } + +}) +//? efects + + +//todo Hide and show the img +var jsbtntest29 = document.getElementById("jsbtntest29"); +var jsresult29 = document.getElementById("jsresult29"); +jsbtntest29.addEventListener("click",function(){ + if(jsresult29.style.display=="none"){ + jsresult29.style.display="block" + }else{ + jsresult29.style.display="none" + } +}) + +//todo animate +let jsbtntest31 = document.getElementById('jsbtntest31'); +let jsresult31 = document.getElementById('jsresult31'); +jsbtntest31.addEventListener('click', function (params) { + console.log("a"); + jsresult31.style.transition = '2s'; + jsresult31.style.opacity = '0.2'; +}) diff --git a/src/assets/js/main.js b/src/assets/js/main.js new file mode 100644 index 00000000..b2fa281f --- /dev/null +++ b/src/assets/js/main.js @@ -0,0 +1,8 @@ + +$(".sec").on("mouseover",function(){ $(this).children("ul").css({"visibility":"visible"});}) +$(".sec").on("mouseout",function(){$(this).children("ul").css({"visibility":"hidden"});}) + + + + +