diff --git a/assets/img/great.jpg b/assets/img/great.jpg
new file mode 100644
index 00000000..1fb0d4d5
Binary files /dev/null and b/assets/img/great.jpg differ
diff --git a/assets/js/arrayObject.js b/assets/js/arrayObject.js
new file mode 100644
index 00000000..f758b9e3
--- /dev/null
+++ b/assets/js/arrayObject.js
@@ -0,0 +1,142 @@
+const exercisesArr = [
+ {
+ dataset:0,
+ functions:function (jQueryDiv, jScriptDiv){exerciseJS0(jScriptDiv),exerciseJQ0(jQueryDiv)},
+ },
+ {
+ dataset:1,
+ functions:function (jQueryDiv, jScriptDiv){exerciseJS1(jScriptDiv),exerciseJQ1(jQueryDiv)},
+ },
+ {
+ dataset:2,
+ functions:function (jQueryDiv, jScriptDiv){exerciseJS2(jScriptDiv),exerciseJQ2(jQueryDiv)},
+ },
+ {
+ dataset:3,
+ functions:function (jQueryDiv, jScriptDiv){exerciseJS3(jScriptDiv),exerciseJQ3(jQueryDiv)},
+ },
+ {
+ dataset:4,
+ functions:function (jQueryDiv, jScriptDiv){exerciseJS4(jScriptDiv),exerciseJQ4(jQueryDiv)},
+ },
+ {
+ dataset:5,
+ functions:function (jQueryDiv, jScriptDiv){exerciseJS4(jScriptDiv),exerciseJQ4(jQueryDiv)},
+ },
+ {
+ dataset:13,
+ functions:function (jQueryDiv, jScriptDiv){exerciseJS13(jScriptDiv),exerciseJQ13(jQueryDiv)},
+ },
+ {
+ dataset:14,
+ functions:function (jQueryDiv, jScriptDiv){exerciseJS14(jScriptDiv,),exerciseJQ14(jQueryDiv,)},
+ },
+ {
+ dataset:15,
+ functions:function (jQueryDiv, jScriptDiv,){exerciseJS15(jScriptDiv,),exerciseJQ15(jQueryDiv,)},
+ },
+ {
+ dataset:16,
+ functions:function (jQueryDiv, jScriptDiv,){exerciseJS16(jScriptDiv,),exerciseJQ16(jQueryDiv,)},
+ },
+ {
+ dataset:17,
+ functions:function (jQueryDiv, jScriptDiv,){exerciseJS17(jScriptDiv,),exerciseJQ17(jQueryDiv,)},
+ },
+ {
+ dataset:18,
+ functions:function (jQueryDiv, jScriptDiv,){exerciseJS18(jScriptDiv,),exerciseJQ18(jQueryDiv,)},
+ },
+ {
+ dataset:19,
+ functions:function (jQueryDiv, jScriptDiv,){exerciseJS19(jScriptDiv,),exerciseJQ19(jQueryDiv,)},
+ },
+ {
+ dataset:20,
+ functions:function (jQueryDiv, jScriptDiv,){exerciseJS20(jScriptDiv,),exerciseJQ20(jQueryDiv,)},
+ },
+ {
+ dataset:21,
+ functions:function (jQueryDiv, jScriptDiv,){exerciseJS21(jScriptDiv,),exerciseJQ21(jQueryDiv,)},
+ },
+ {
+ dataset:22,
+ functions:function (jQueryDiv, jScriptDiv,){exerciseJS22(jScriptDiv,),exerciseJQ22(jQueryDiv,)},
+ },
+ {
+ dataset:23,
+ functions:function (jQueryDiv, jScriptDiv,){exerciseJS23(jScriptDiv,),exerciseJQ23(jQueryDiv,)},
+ },
+ {
+ dataset:24,
+ functions:function (jQueryDiv, jScriptDiv,){exerciseJS24(jScriptDiv,),exerciseJQ24(jQueryDiv,)},
+ },
+ {
+ dataset:25,
+ functions:function (jQueryDiv, jScriptDiv,){exerciseJS25(jScriptDiv,),exerciseJQ25(jQueryDiv,)},
+ },
+ {
+ dataset:26,
+ functions:function (jQueryDiv, jScriptDiv,){exerciseJS26(jScriptDiv,),exerciseJQ26(jQueryDiv,)},
+ },
+ {
+ dataset:27,
+ functions:function (jQueryDiv, jScriptDiv,){exerciseJS27(jScriptDiv,),exerciseJQ27(jQueryDiv,)},
+ },
+ {
+ dataset:28,
+ functions:function (jQueryDiv, jScriptDiv,){exerciseJS28(jScriptDiv,),exerciseJQ28(jQueryDiv,)},
+ },
+ {
+ dataset:29,
+ functions:function (jQueryDiv, jScriptDiv,){exerciseJS29(jScriptDiv,),exerciseJQ29(jQueryDiv,)},
+ },
+ {
+ dataset:30,
+ functions:function (jQueryDiv, jScriptDiv,){exerciseJS30(jScriptDiv,),exerciseJQ30(jQueryDiv,)},
+ },
+ {
+ dataset:31,
+ functions:function (jQueryDiv, jScriptDiv,){exerciseJS31(jScriptDiv,),exerciseJQ31(jQueryDiv,)},
+ },
+ {
+ dataset:32,
+ functions:function (jQueryDiv, jScriptDiv,){exerciseJS32(jScriptDiv,),exerciseJQ32(jQueryDiv,)},
+ },
+ {
+ dataset:33,
+ functions:function (jQueryDiv, jScriptDiv,){exerciseJS33(jScriptDiv,),exerciseJQ33(jQueryDiv,)},
+ },
+ {
+ dataset:34,
+ functions:function (jQueryDiv, jScriptDiv,){exerciseJS34(jScriptDiv,),exerciseJQ34(jQueryDiv,)},
+ },
+ {
+ dataset:35,
+ functions:function (jQueryDiv, jScriptDiv,){exerciseJS35(jScriptDiv,),exerciseJQ35(jQueryDiv,)},
+ },
+ {
+ dataset:36,
+ functions:function (jQueryDiv, jScriptDiv,){exerciseJS36(jScriptDiv,),exerciseJQ36(jQueryDiv,)},
+ },
+ {
+ dataset:37,
+ functions:function (jQueryDiv, jScriptDiv,){exerciseJS37(jScriptDiv,),exerciseJQ37(jQueryDiv,)},
+ },
+ {
+ dataset:38,
+ functions:function (jQueryDiv, jScriptDiv,){exerciseJS38(jScriptDiv,),exerciseJQ38(jQueryDiv,)},
+ },
+ {
+ dataset:39,
+ functions:function (jQueryDiv, jScriptDiv,){exerciseJS39(jScriptDiv,),exerciseJQ39(jQueryDiv,)},
+ },
+ {
+ dataset:40,
+ functions:function (jQueryDiv, jScriptDiv,){exerciseJS40(jScriptDiv,),exerciseJQ40(jQueryDiv,)},
+ },
+ {
+ dataset:41,
+ functions:function (jQueryDiv, jScriptDiv,){exerciseJS41(jScriptDiv,),exerciseJQ41(jQueryDiv,)},
+ },
+]
\ No newline at end of file
diff --git a/assets/js/createContent.js b/assets/js/createContent.js
new file mode 100644
index 00000000..0547f4f1
--- /dev/null
+++ b/assets/js/createContent.js
@@ -0,0 +1,74 @@
+let optionP = $("p")
+let optionPArr = Array.from(optionP)
+
+optionPArr.forEach((element,index) => {
+ element.addEventListener("click", function() {
+ if (findExercisesFun(index)){
+ createModal(element, findExercisesFun(index).functions)
+ }else{
+ return;
+ }
+ })
+});
+function createModal(element, cb){
+ let bigDiv = document.createElement("div")
+ bigDiv.classList.add("modalTransparent")
+ bigDiv.setAttribute("id","modal")
+ $("body").append(bigDiv)
+
+ let smallDiv = document.createElement("div")
+ smallDiv.classList.add("modalSmall")
+ bigDiv.appendChild(smallDiv)
+
+ let titleDiv = document.createElement("div")
+ titleDiv.classList.add("title-container")
+ titleDiv.textContent = element.textContent;
+ smallDiv.appendChild(titleDiv)
+
+ let jQueryDiv = document.createElement("div")
+ jQueryDiv.classList.add("jQuery-container")
+ smallDiv.appendChild(jQueryDiv)
+
+ let jScriptDiv = document.createElement("div")
+ jScriptDiv.classList.add("javaScript-container")
+ smallDiv.appendChild(jScriptDiv)
+
+ let buttonsDiv = document.createElement("div")
+ buttonsDiv.classList.add("buttons-container")
+ smallDiv.appendChild(buttonsDiv)
+
+ let button1 = document.createElement("button")
+ button1.classList.add("buttons-modal")
+ button1.setAttribute("id","show-solution-button")
+ button1.textContent = "Show Solution"
+ buttonsDiv.appendChild(button1)
+
+ let button2 = document.createElement("button")
+ button2.classList.add("buttons-modal")
+ button2.setAttribute("id","solution-button")
+ button2.textContent = "Validate"
+ buttonsDiv.appendChild(button2)
+
+ removeModal(bigDiv)
+
+ cb(jQueryDiv, jScriptDiv)
+}
+function removeModal(child){
+ let bigDivClose = document.getElementById("modal")
+ bigDivClose.addEventListener("click",(e)=>{
+ if(e.target.matches(".modalTransparent")){
+ document.body.removeChild(child)
+ bigDivClose.removeEventListener;
+ }
+ })
+}
+function findExercisesFun(index){
+ exercise = exercisesArr.find(item => {
+ return item.dataset === index;
+ })
+ if(exercise == null){
+ return console.log("do not exist");
+ }else{
+ return exercise;
+ }
+}
\ No newline at end of file
diff --git a/assets/js/jquery.js b/assets/js/jquery.js
new file mode 100644
index 00000000..ebaa6556
--- /dev/null
+++ b/assets/js/jquery.js
@@ -0,0 +1,932 @@
+
+function exerciseJQ0(jQueryDiv){
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ = $("document").().$("#solution-box").text("Congratulations! TIP:")
+
+ `
+ //content exercise here
+ +"
")
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ `
+ //content exercise here
+ +"
")
+
+ //$("#solution-box").append(``)
+
+ $("#solution-button").on("click",validateSolutionFun)
+ function validateSolutionFun(){
+ if( $("#input-solution").val()=="ready"){
+ $(function(){$("#solution-box").text("Congratulations! TIP:you can use the short-hand $(function(){}) or $(window).on('load',function(){})" )})
+ }else{
+ $("#solution-box").text("try again")
+ }
+ }
+ $("#show-solution-button").on("click",showSolutionFun)
+ function showSolutionFun(){
+ $("#input-solution").val("ready")
+ }
+}
+function exerciseJQ1(jQueryDiv){
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ = $("#solution-button").on('',()=>{$("#solution-box").text("clicked!!")})
+
+ `
+ //content exercise here
+ +"
")
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ `
+ //content exercise here
+ +"
")
+
+ //$("#solution-box").append(``)
+
+ $("#solution-button").on("click",validateSolutionFun)
+ function validateSolutionFun(){
+ if( $("#input-solution").val()=="click"){
+ $("#solution-box").text("clicked!!")
+ }else{
+ $("#solution-box").text("try again")
+ }
+ }
+ $("#show-solution-button").on("click",showSolutionFun)
+ function showSolutionFun(){
+ $("#input-solution").val("click")
+ }
+}
+function exerciseJQ2(jQueryDiv){
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ = $("#solution-button").on('',()=>{$("#solution-box").text("dOblE clickED!!")})
+
+ `
+ //content exercise here
+ +"
")
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ `
+ //content exercise here
+ +"
")
+
+ //$("#solution-box").append(``)
+
+ $("#solution-button").on("dblclick",validateSolutionFun)
+ function validateSolutionFun(){
+ if( $("#input-solution").val()=="dblclick"){
+ $("#solution-box").text("dOblE clickED!!")
+ }else{
+ $("#solution-box").text("try again")
+ }
+ }
+ $("#show-solution-button").on("click",showSolutionFun)
+ function showSolutionFun(){
+ $("#input-solution").val("dblclick")
+ }
+}
+function exerciseJQ3(jQueryDiv){
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ = $("#solution-button").on('',()=>{$("#solution-box").text("You just keypres the" + e.target + "key")})
+
+ `
+ //content exercise here
+ +"
")
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ `
+ //content exercise here
+ +"
")
+
+ //$("#solution-box").append(``)
+
+ $("#solution-button").on("click",validateSolutionFun)
+ function validateSolutionFun(){
+ if( $("#input-solution").val()=="keypress"){
+ console.log("entré")
+ $(document).on("keypress", function (e) {
+ console.log(e.which)
+ console.log(e.target)
+ $("#solution-box").text("You just keypres the " + String.fromCharCode(e.which) + " key")
+ })
+ }else{
+ $("#solution-box").text("try again")
+ }
+ }
+ $("#show-solution-button").on("click",showSolutionFun)
+ function showSolutionFun(){
+ $("#input-solution").val("keypress")
+ }
+}
+function exerciseJQ4(jQueryDiv){
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ = $("#solution-button").on('',()=>{$("#solution-box").text("I am moving the mouse: " + counter+ " times")})
+
+ `
+ //content exercise here
+ +"
")
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ `
+ //content exercise here
+ +"
")
+
+ //$("#solution-box").append(``)
+
+ $("#solution-button").on("click",validateSolutionFun)
+ function validateSolutionFun(){
+ if( $("#input-solution").val()=="mousemove"){
+ console.log("entré")
+ let counter = 0;
+ $(document).on("mousemove", counterFun)
+ function counterFun(){
+ while (counter <= 120000) {
+ $("#solution-box").text("I am moving the mouse: " + counter+ " times")
+ if (counter>=110000){
+ $(document).off("mousemove", counterFun)
+ return;
+ }
+ counter ++;
+ console.log(counter)
+ }
+ return;
+ }
+ }else{
+ $("#solution-box").text("try again")
+ }
+ }
+ $("#show-solution-button").on("click",showSolutionFun)
+ function showSolutionFun(){
+ $("#input-solution").val("mousemove")
+ }
+}
+function exerciseJQ5(jQueryDiv){
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ = $("#solution-button").on('',()=>{$("#solution-box").text("I am moving the mouse: " + counter+ " times")})
+
+ `
+ //content exercise here
+ +"
")
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ `
+ //content exercise here
+ +"
")
+
+ //$("#solution-box").append(``)
+
+ $("#solution-button").on("click",validateSolutionFun)
+ function validateSolutionFun(){
+ if( $("#input-solution").val()=="mousemove"){
+ console.log("entré")
+ let counter = 0;
+ $(document).on("mousemove", counterFun)
+ function counterFun(){
+ while (counter <= 120000) {
+ $("#solution-box").text("I am moving the mouse: " + counter+ " times")
+ if (counter>=110000){
+ $(document).off("mousemove", counterFun)
+ return;
+ }
+ counter ++;
+ console.log(counter)
+ }
+ return;
+ }
+ }else{
+ $("#solution-box").text("try again")
+ }
+ }
+ $("#show-solution-button").on("click",showSolutionFun)
+ function showSolutionFun(){
+ $("#input-solution").val("mousemove")
+ }
+}
+function exerciseJQ13(jQueryDiv){
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ var createElementP = $("").text("Congratulations!")
+
+ `
+ //content exercise here
+ +"
")
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ `
+ //content exercise here
+ +"
")
+ $("#solution-button").on("click",validateSolutionFun)
+ function validateSolutionFun(){
+ if( $("#input-solution").val()==""){
+ $("#solution-box").text("Congratulations!")
+ }else{
+ $("#solution-box").text("try again")
+ }
+ }
+ $("#show-solution-button").on("click",showSolutionFun)
+ function showSolutionFun(){
+ $("#input-solution").val("")
+ }
+
+}
+function exerciseJQ14(jQueryDiv){
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ $("#div1").;
+
+ `
+ //content exercise here
+ +"
")
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ `
+ //content exercise here
+ +"
")
+ $("#solution-box").append('remove me!
')
+
+ $("#solution-button").on("click",validateSolutionFun)
+ function validateSolutionFun(){
+ if( $("#input-solution").val()=="remove()"){
+ $("#solution-box").text("removed!")
+ }else{
+ $("#solution-box").text("try again")
+ }
+ }
+ $("#show-solution-button").on("click",showSolutionFun)
+ function showSolutionFun(){
+ $("#input-solution").val("remove()")
+ }
+
+}
+function exerciseJQ15(jQueryDiv){
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ $("#div1").(<div id="div2">brother2: I want to be it!!!</div>);
+
+ `
+ //content exercise here
+ +"
")
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ Parent: I am the parent,
+ `
+ //content exercise here
+ +"
")
+ $("#solution-box").append('brother1: I want a brother!
')
+
+ $("#solution-button").on("click",validateSolutionFun)
+ function validateSolutionFun(){
+ if( $("#input-solution").val()=="append"){
+ $("#solution-box").append('brother2: I want to be it!!!
')
+ }else{
+ $("#solution-box").append('Try Again!
')
+ }
+ }
+ $("#show-solution-button").on("click",showSolutionFun)
+ function showSolutionFun(){
+ $("#input-solution").val("append")
+ }
+
+}
+function exerciseJQ16(jQueryDiv){
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ $("#div1").(<div id="div2">brother2: ok I sleep up!!!</div>);
+
+ `
+ //content exercise here
+ +"
")
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ Parent: I am the parent ("textContent"),
+ `
+ //content exercise here
+ +"
")
+ $("#solution-box").append('brother1: I want tu sleep down on the bunk!
')
+
+ $("#solution-button").on("click",validateSolutionFun)
+ function validateSolutionFun(){
+ if( $("#input-solution").val()=="prepend"){
+ $("#solution-box").prepend('brother2: ok I sleep up!!!
')
+ }else{
+ $("#solution-box").append('Try Again!
')
+ }
+ }
+ $("#show-solution-button").on("click",showSolutionFun)
+ function showSolutionFun(){
+ $("#input-solution").val("prepend")
+ }
+
+}
+function exerciseJQ17(jQueryDiv){
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ $("#div1").(<div id="div2">brother2: here I am!!!!!! </div>);
+
+ `
+ //content exercise here
+ +"
")
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ `
+ //content exercise here
+ +"
")
+ $("#solution-box").append('brother1: Brother1 :I want someone bellow to me!
')
+
+ $("#solution-button").on("click",validateSolutionFun)
+ function validateSolutionFun(){
+ if( $("#input-solution").val()=="after"){
+ $("#div1").after('brother2: here I am!!!!!!
')
+ }else{
+ $("#solution-box").append('Try Again!
')
+ }
+ }
+ $("#show-solution-button").on("click",showSolutionFun)
+ function showSolutionFun(){
+ $("#input-solution").val("after")
+ }
+
+}
+function exerciseJQ18(jQueryDiv){
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ $("#div1").(<div id="div2">brother2: here I am!!!!!! </div>);
+
+ `
+ //content exercise here
+ +"
")
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ `
+ //content exercise here
+ +"
")
+ $("#solution-box").append('brother1: Brother1 :I want someone above to me!
')
+
+ $("#solution-button").on("click",validateSolutionFun)
+ function validateSolutionFun(){
+ if( $("#input-solution").val()=="before"){
+ $("#div1").before('brother2: here I am!!!!!!
')
+ }else{
+ $("#solution-box").append('Try Again!
')
+ }
+ }
+ $("#show-solution-button").on("click",showSolutionFun)
+ function showSolutionFun(){
+ $("#input-solution").val("before")
+ }
+
+}
+function exerciseJQ19(jQueryDiv){
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ $("#div1").().after("#div1");
+
+ `
+ //content exercise here
+ +"
")
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ `
+ //content exercise here
+ +"
")
+ $("#solution-box").append('Brother1 :I want to be cloned
')
+ $("#solution-box").append('Brother2 :I do not want to be cloned cloned
')
+
+ $("#solution-button").on("click",validateSolutionFun)
+ function validateSolutionFun(){
+ if( $("#input-solution").val()=="clone"){
+ $(".div1").clone().appendTo("#div2")
+ }else{
+ $("#solution-box").append('Try Again!
')
+ }
+ }
+ $("#show-solution-button").on("click",showSolutionFun)
+ function showSolutionFun(){
+ $("#input-solution").val("clone")
+ }
+
+}
+function exerciseJQ20(jQueryDiv){
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ $("#div1").("poor-class");
+
+ `
+ //content exercise here
+ +"
")
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ `
+ //content exercise here
+ +"
")
+ $("#solution-box").append('Dude :I want to have class
')
+
+ $("#solution-button").on("click",validateSolutionFun)
+ function validateSolutionFun(){
+ if( $("#input-solution").val()=="addClass"){
+ $(".div1").addClass("poor-class")
+ }else{
+ $("#solution-box").append('Try Again!
')
+ }
+ }
+ $("#show-solution-button").on("click",showSolutionFun)
+ function showSolutionFun(){
+ $("#input-solution").val("addClass")
+ }
+
+}
+function exerciseJQ21(jQueryDiv){
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ $("#div1").("poor-class");
+
+ `
+ //content exercise here
+ +"
")
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ `
+ //content exercise here
+ +"
")
+ $("#solution-box").append('Dude :I do not want this class!!
')
+ $("#solution-button").on("click",validateSolutionFun)
+ function validateSolutionFun(){
+ if( $("#input-solution").val()=="removeClass"){
+ $(".div1").removeClass("poor-class")
+ }else{
+ $("#solution-box").append('Try Again!
')
+ }
+ }
+ $("#show-solution-button").on("click",showSolutionFun)
+ function showSolutionFun(){
+ $("#input-solution").val("removeClass")
+ }
+}
+function exerciseJQ22(jQueryDiv){
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ $("#div1").("poor-class");
+
+ `
+ //content exercise here
+ +"
")
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ `
+ //content exercise here
+ +"
")
+ $("#solution-box").append('Dude :I am undecided person!!
')
+ $("#solution-button").on("click",validateSolutionFun)
+ function validateSolutionFun(){
+ if( $("#input-solution").val()=="toggleClass"){
+ $(".div1").toggleClass("poor-class")
+ }else{
+ $("#solution-box").append('Try Again!
')
+ }
+ }
+ $("#show-solution-button").on("click",showSolutionFun)
+ function showSolutionFun(){
+ $("#input-solution").val("toggleClass")
+ }
+}
+function exerciseJQ23(jQueryDiv){
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ $("#show-solution-button").("disabled", true)
+
+ `
+ //content exercise here
+ +"
")
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ `
+ //content exercise here
+ +"
")
+ $("#solution-box").append('Dude :do not show the solution any more!!
')
+ $("#solution-button").on("click",validateSolutionFun)
+ function validateSolutionFun(){
+ if( $("#input-solution").val()=="prop"){
+ $("#show-solution-button").prop("disabled", true)
+ }else{
+ $("#solution-box").append('Try Again!
')
+ }
+ }
+ $("#show-solution-button").on("click",showSolutionFun)
+ function showSolutionFun(){
+ $("#input-solution").val("prop")
+ }
+}
+function exerciseJQ24(jQueryDiv){
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ $("#show-solution-button").("disabled", "false")
+
+ `
+ //content exercise here
+ +"
")
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ `
+ //content exercise here
+ +"
")
+ $("#solution-box").append('Dude :If you want the solution, you need the solution...
')
+ $("#solution-button").on("click",validateSolutionFun)
+ $("#show-solution-button").prop("disabled", true)
+ function validateSolutionFun(){
+ if( $("#input-solution").val()=="prop"){
+ $("#show-solution-button").prop("disabled",false)
+ }else{
+ $("#solution-box").append('Try Again!
')
+ }
+ }
+ $("#show-solution-button").on("click",showSolutionFun)
+ function showSolutionFun(){
+ $("#input-solution").val("you know it...")
+ }
+}
+function exerciseJQ25(jQueryDiv){
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ $("#img1").("src","/assets/img/great.jpg")
+
+ `
+ //content exercise here
+ +"
")
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ `
+ //content exercise here
+ +"
")
+ $("#solution-box").append('![]()
')
+
+ $("#solution-button").on("click",validateSolutionFun)
+
+ function validateSolutionFun(){
+ if( $("#input-solution").val()=="attr"){
+ $( "#img1" ).attr( "src" , "/assets/img/great.jpg" );
+ $( "#img1" ).data("-src", "hola" );
+ }else{
+ $("#solution-box").append('Try Again!
')
+ }
+ }
+ $("#show-solution-button").on("click",showSolutionFun)
+ function showSolutionFun(){
+ $("#input-solution").val("attr")
+ }
+}
+function exerciseJQ26(jQueryDiv){
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ $("#img1").("src")
+
+ `
+ //content exercise here
+ +"
")
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ `
+ //content exercise here
+ +"
")
+ $("#solution-box").append('
')
+
+ $("#solution-button").on("click",validateSolutionFun)
+
+ function validateSolutionFun(){
+ if( $("#input-solution").val()=="removeData"){
+ $("#img1").removeData(data-src)
+ }else{
+ $("#solution-box").append('Try Again!
')
+ }
+ }
+ $("#show-solution-button").on("click",showSolutionFun)
+ function showSolutionFun(){
+ $("#input-solution").val("removeData")
+ }
+}
+function exerciseJQ27(jQueryDiv){
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ $("#img1").()
+
+ `
+ //content exercise here
+ +"
")
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ `
+ //content exercise here
+ +"
")
+ $("#solution-box").append('')
+
+ $("#solution-button").on("click",validateSolutionFun)
+
+ function validateSolutionFun(){
+ if( $("#input-solution").val()=="hide"){
+ $("#img1").hide()
+ }else{
+ $("#solution-box").append('Try Again!
')
+ }
+ }
+ $("#show-solution-button").on("click",showSolutionFun)
+ function showSolutionFun(){
+ $("#input-solution").val("hide")
+ }
+}
+function exerciseJQ28(jQueryDiv){
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ $("#img1").()
+
+ `
+ //content exercise here
+ +"
")
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ `
+ //content exercise here
+ +"
")
+ $("#solution-box").append('')
+
+ $("#solution-button").on("click",validateSolutionFun)
+
+ function validateSolutionFun(){
+ if( $("#input-solution").val()=="show"){
+ $("#img1").show()
+ }else{
+ $("#solution-box").append('Try Again!
')
+ }
+ }
+ $("#show-solution-button").on("click",showSolutionFun)
+ function showSolutionFun(){
+ $("#input-solution").val("show")
+ }
+}
+function exerciseJQ29(jQueryDiv){
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ $("#img1").()
+
+ `
+ //content exercise here
+ +"
")
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ `
+ //content exercise here
+ +"
")
+ $("#solution-box").append('')
+
+ $("#solution-button").on("click",validateSolutionFun)
+
+ function validateSolutionFun(){
+ if( $("#input-solution").val()=="fadeIn"){
+ $("#img1").fadeIn()
+ }else{
+ $("#solution-box").append('Try Again!
')
+ }
+ }
+ $("#show-solution-button").on("click",showSolutionFun)
+ function showSolutionFun(){
+ $("#input-solution").val("fadeIn")
+ }
+}
+function exerciseJQ30(jQueryDiv){
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ $("#img1").()
+
+ `
+ //content exercise here
+ +"
")
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ `
+ //content exercise here
+ +"
")
+ $("#solution-box").append('')
+
+ $("#solution-button").on("click",validateSolutionFun)
+
+ function validateSolutionFun(){
+ if( $("#input-solution").val()=="fadeOut"){
+ $("#img1").fadeOut()
+ }else{
+ $("#solution-box").append('Try Again!
')
+ }
+ }
+ $("#show-solution-button").on("click",showSolutionFun)
+ function showSolutionFun(){
+ $("#input-solution").val("fadeOut")
+ }
+}
+function exerciseJQ31(jQueryDiv){
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ $("#solution-box").( (i,x) => {
+ $(x).addClass("poor-class");
+ })
+
+ `
+ //content exercise here
+ +"
")
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
I am a div parent
+
I am a H1 first child
+
I am an ul
+ - list item 1
+ - list item 2
+ - list item 3
+ - list item 4
+
+
I am a H2 XAO!
+
+`
+ //content exercise here
+ +"
Try Again!
')
+ }
+ }
+ $("#show-solution-button").on("click",showSolutionFun)
+ function showSolutionFun(){
+ $("#input-solution").val("each")//solution
+ }
+}
+function exerciseJQ32(jQueryDiv){
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ $("#firstChild").().addClass("poor-class");
+
+ `
+ //content exercise here
+ +"
")
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
I am a div parent
+
I am an H1
+
I am an ul
+ - list item 1
+ - list item 2
+ - list item 3
+ - list item 4
+
+
I am a H2 XAO!
+
+`
+ //content exercise here
+ +"
Try Again!
')
+ }
+ }
+ $("#show-solution-button").on("click",showSolutionFun)
+ function showSolutionFun(){
+ $("#input-solution").val("parent")//solution
+ }
+}
+function exerciseJQ33(jQueryDiv){
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ $("#parent").().addClass("poor-class");
+
+ `
+ //content exercise here
+ +"
")
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
I am a div parent
+
I am an H1
+
I am an ul
+ - list item 1
+ - list item 2
+ - list item 3
+ - list item 4
+
+
I am a H2 XAO!
+
+`
+ //content exercise here
+ +"
Try Again!
')
+ }
+ }
+ $("#show-solution-button").on("click",showSolutionFun)
+ function showSolutionFun(){
+ $("#input-solution").val("children")//solution
+ }
+}
+function exerciseJQ34(jQueryDiv){
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
+ $(".certainClass").().addClass("poor-class");
+
+ `
+ //content exercise here
+ +"
")
+ $(jQueryDiv).append(""+
+ //content exercise here
+ `
I am a div parent
+
I am an H1
+
I am an ul
+ - list item 1
+ - list item 2
+ - list item 3
+ - list item 4
+
+
I am a H2 XAO!
+
+`
+ //content exercise here
+ +"
Try Again!
')
+ }
+ }
+ $("#show-solution-button").on("click",showSolutionFun)
+ function showSolutionFun(){
+ $("#input-solution").val("children")//solution
+ }
+}
+
+
+
diff --git a/assets/js/script.js b/assets/js/script.js
new file mode 100644
index 00000000..e3b4e965
--- /dev/null
+++ b/assets/js/script.js
@@ -0,0 +1,156 @@
+function exerciseJS0(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS1(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS2(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS3(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS4(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS5(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS6(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS7(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS8(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS9(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS10(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS11(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS12(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS13(jScriptDiv){
+
+ let jScriptDivInner2 = document.createElement("div")
+ jScriptDivInner2.classList.add("jScript-container-inner")
+ jScriptDivInner2.innerText = "CODE"
+ jScriptDiv.appendChild(jScriptDivInner2)
+
+ let jScriptDivInner3 = document.createElement("div")
+ jScriptDivInner3.classList.add("jScript-container-inner")
+ jScriptDivInner3.innerText = "PREVIEW"
+ jScriptDiv.appendChild(jScriptDivInner3)
+
+ // let jScriptDivInner4 = document.createElement("button")
+ // jScriptDivInner4.classList.add("jScript-button-inner")
+ // jScriptDivInner4.innerText = "PREVIEW"
+ // jScriptDiv.appendChild(jScriptDivInner4)
+}
+function exerciseJS14(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS15(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS16(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS17(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS18(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS19(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS20(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS21(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS22(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS23(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS24(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS25(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS26(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS27(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS28(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS29(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS30(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS31(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS32(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS33(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS34(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS35(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS36(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS37(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS38(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS39(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS40(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+function exerciseJS41(jScriptDiv){
+ console.log("hola 1"+jScriptDiv)
+}
+
+
+
+
+
+
+
+
+
+
+
+// function createContent(parent){
+// var t = document.querySelector('#template-exercise-content');
+// let tContent = t.content;
+// parent.appendChild(tContent)
+// }
\ No newline at end of file
diff --git a/assets/style/style.css b/assets/style/style.css
new file mode 100644
index 00000000..925a9165
--- /dev/null
+++ b/assets/style/style.css
@@ -0,0 +1,226 @@
+/* :root {
+ --main-bg-color: #CEC4C1;
+ --main-text-color: #93D5B1;
+ --main-color: #7A9E80;
+ --secondary-text-color: #695641;
+ --secondary-main-color: #9C9083;
+} */
+/* :root {
+ --main-bg-color: #D1B90F;
+ --main-text-color: #4552D7;
+ --main-color: #2752A1;
+ --secondary-text-color: #586B2A;
+ --secondary-main-color: #789E1B;
+} */
+/* :root {
+ --main-bg-color: #D13820;
+ --main-text-color: #008548;
+ --main-color: #1FD180;
+ --secondary-text-color: #FF5940;
+ --secondary-main-color: #851A0A;
+} */
+:root {
+ --main-bg-color: #C6D18A;
+ --main-text-color: #854A74;
+ --main-color: #D180BA;
+ --secondary-text-color: #676585;
+ --secondary-main-color: #9894D1;
+}
+
+
+
+header{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: var(--main-bg-color);
+ height: 15vh;
+}
+body{
+ background-color: var(--main-bg-color);
+}
+main{
+ height: 85vh;
+ display: flex;
+ align-content: center;
+ justify-content: center;
+ background-color: var(--main-bg-color);
+ margin: auto;
+}
+#container{
+ display: flex;
+ flex-wrap: wrap;
+ align-content: center;
+ justify-content: center;
+ border: var(--main-bg-color);
+ margin: auto;
+}
+.section-container{
+ width: 30%;
+ margin: 1%;
+ border: 1px solid #9C9083;
+ border-radius: 5px;
+}
+#events-container{
+ background-color: var(--main-color);
+}
+#functions-container{
+ background-color: var(--main-color);
+}
+#selectors-container{
+ background-color: var(--main-color);
+}
+
+h2, h1{
+ font-weight: bolder;
+ color: var(--secondary-text-color);
+}
+p{
+ cursor: pointer;
+ font-weight: bold;
+ color: var(--secondary-text-color);
+}
+p:hover{
+ background-color: var(--main-text-color);
+ color: var(--secondary-main-color);
+}
+
+/* MODAL */
+.modalTransparent{
+ position: absolute;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-content: center;
+ left: 0;
+ top: 0;
+ width: 100vw;
+ height: 100vh;
+ z-index: 1;
+ background-color: rgb(0, 0, 0,0.5);
+}
+.modalSmall{
+ width: 65%;
+ height: 65%;
+ background-color: #cec4c1b2;
+ border-radius: 10px;
+ z-index: 10;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-content: center;
+}
+
+/* EXERCISE CONTAINERS */
+.title-container{
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ text-align: center;
+ align-content: center;
+ color:var(--main-color);
+ background-color: var(--secondary-text-color);
+ border-radius: 10px;
+ height: 10%;
+ width: 98%;
+ margin: 1% 1% 0% 1%;
+ font-weight: bold;
+ font-size: large;
+}
+.jQuery-container{
+ display: flex;
+ flex-wrap: wrap;
+ align-content: flex-start;
+ justify-content: center;
+ scroll-behavior: smooth;
+ background-color: var(--main-color);
+ border-radius: 10px;
+ height: 74%;
+ width: 48.5%;
+ margin: 1% 0% 1% 1%;
+}
+.javaScript-container{
+ display: flex;
+ flex-wrap: wrap;
+ align-content: flex-start;
+ justify-content: center;
+ scroll-behavior: smooth;
+ background-color: var(--secondary-main-color) ;
+ border-radius: 10px;
+ height: 74%;
+ width: 48.5%;
+ margin: 1%;
+}
+.buttons-container{
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ text-align: center;
+ align-content: center;
+ color: var(--main-text-color);
+ background-color: var(--secondary-text-color);
+ border-radius: 10px;
+ height: 10%;
+ width: 98%;
+ margin: 0% 1% 1% 1%;
+}
+.buttons-modal:hover{
+ background-color: var(--secondary-main-color) ;
+ color: var(--main-text-color);
+}
+
+.buttons-modal{
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ border-radius: 10px;
+ background-color: var(--main-color);
+ color: var(--secondary-text-color);
+ font-size: large;
+ font-weight: bold;
+ margin: 1%;
+ width: 98%;
+}
+
+/* EXERCISE INNER CONTAINERS */
+
+.jScript-container-inner{
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ border-radius: 10px;
+ background-color: var(--main-bg-color);
+ margin: 1%;
+ width: 98%;
+ height: auto;
+ padding:5px;
+}
+.jQuery-container-inner{
+ flex-direction: column;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ border-radius: 10px;
+ background-color: var(--main-bg-color);
+ margin: 1%;
+ width: 98%;
+ min-height: 35px;
+ padding:5px;
+}
+ /* EXERCISES */
+
+ .poor-class{
+ background-color:rgb(65, 50, 32);
+ color: blanchedalmond;
+ }
+
+ input{
+ background-color: var(--main-bg-color);
+ border-radius: 5px;
+ border:1px solid var(--secondary-main-color) ;
+ }
+
diff --git a/assets/style/style_reset.css b/assets/style/style_reset.css
new file mode 100644
index 00000000..ae00af19
--- /dev/null
+++ b/assets/style/style_reset.css
@@ -0,0 +1,51 @@
+/* Box sizing rules */
+*,*::before,*::after {
+ box-sizing: border-box;
+ }
+ /* Remove default margin */
+ body,h1,h2,h3,h4,p,figure,blockquote,dl,dd {
+ margin: 0;
+ }
+ /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ ul[role='list'],
+ ol[role='list'] {
+ list-style: none;
+ }
+ /* Set core root defaults */
+ html:focus-within {
+ scroll-behavior: smooth;
+ }
+ /* Set core body defaults */
+ body {
+ min-height: 100vh;
+ text-rendering: optimizeSpeed;
+ line-height: 1.5;
+ }
+ /* A elements that don't have a class get default styles */
+ a:not([class]) {
+ text-decoration-skip-ink: auto;
+ }
+ /* Make images easier to work with */
+ img,
+ picture {
+ max-width: 100%;
+ display: block;
+ }
+ /* Inherit fonts for inputs and buttons */
+ input,button,textarea,select {
+ font: inherit;
+ }
+ /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
+ @media (prefers-reduced-motion: reduce) {
+ html:focus-within {
+ scroll-behavior: auto;
+ }
+ *,
+ *::before,
+ *::after {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ scroll-behavior: auto !important;
+ }
+ }
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..0820b3c7
--- /dev/null
+++ b/index.html
@@ -0,0 +1,85 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Jquery-Cheat-Sheet
+
+
+
+
+
+
+ Events
+ 0 HTML document has been loaded
+ 1 clicked
+ 2 double clicked
+ 3 presses a key
+ 4 moves the mouse cursor
+ 5 changes a value
+ 6 image is loaded
+ 7 image fails to load
+ 8 form is submitted
+ 9 changes the option of a select element
+ 10 position the mouse over an element
+ 11 position the mouse over an element
+ 12 ul list item is clicked
+
+
+ Functions
+ 13 Create an HTML element with any text value
+ 14 Remove an HTML element with any text value
+ 15 Append an HTML element with any text value to a parent element
+ 16 Prepend an HTML element with any text value to a parent element
+ 17 Create and add an HTML element with any text value after another element
+ 18 Create and add an HTML element with any text value before another element
+ 19 Clone an HTML element within other element
+ 20 Add a class to an HTML item
+ 21 Remove a class to an HTML item
+ 22 Toggle a class of an HTML item
+ 23 Add a disabled attribute to an HTML button
+ 24 Remove the disabled attribute of an HTML button
+ 25 Set a data-src attribute to a img element
+ 26 Remove the data-src attribute of the img element
+ 27 Hide an HTML element on click (display: none)
+ 28Show an HTML element on click (display: block)
+ 29 Fade in an HTML element using jQuery
+ 30 Fade out an HTML element using jQuery
+
+
+ Selectors
+ 31 Iterate a collection of elements and apply a change of style on them
+ 32 Get the parent element of a certain element and change its font weight
+ 33 Get the collection of children of a certain element and change its font weight
+ 34 Get all the elements that have a certain class and change their font weight
+ 35 Get an item by id and change its font weight
+ 36 Get all the elements that have a certain class and the display property of none and change their font color and the display itself so it’s visible
+ 37 Get the options of a select element that are selected (attribute selected)
+ 38 Change the href attribute of the first "a" element (You have to create several "a" elements)
+ 39 Show an alert with the value of the first "input" of the page (Create an "input" element to test this case)
+ 40 Remove all items from a specific selector
+ 41 Animate an item after 2 seconds from the initial page load
+
+