Solution: Adrián Serrano Rojas

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,)},
+    },
+]

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;
+    }
+}