figured out how to improve cliking/dragging issue, still working on p…

…utting pieces back. Started adding 3rd puzzle

interactive1.js

@@ -110,7 +110,7 @@ Instead I need to use touch start, move and end. As such, to make my code as cle
 Since event listeners can take 2 parameters, I am creating two events listeners. 
 Each take either drag or touch event as a firt parameter along with calling the appropriate function that will handle their common logic and account for their differences.*/
 let draggableImages = document.getElementsByClassName("images");
-let originalPlace = document.getElementsByClassName("piece");
+let piece = document.getElementsByClassName("piece");
 var globalDraggedItemId = null; // set data and get data are methods that do not exist for touch events. Creating global variable to maintain state.
 
 function handleStart(e) {
@@ -128,6 +128,10 @@ function handleStart(e) {
 function handleOverMove(e){ 
     e.preventDefault();
     e.stopPropagation();
+    let draggedImage = e.currentTarget; 
+    draggedImage.style.zIndex = 1000;  // Without giving high index to the images and low to their divs, clicking on images didnt work if a div was above it.
+    let originalContainer = draggedImage.parentElement;
+    originalContainer.style.zIndex = 1; 
 }
 
 function handleDropEnd(e) { //modify this function with some sort of if statement so that no bug with touch event. (what is hapenign is that the img are otherwise already nested in a drop and cant be moved to drop zones)
@@ -161,14 +165,19 @@ Array.from(dropZone).forEach(function(zone){
     zone.addEventListener('touchend', handleDropEnd);
 });
 
- /*This works for drag but for touch, I need to do some sort of if else statement so the browser detects the correct dropzones/original.
- Array.from(originalPlace).forEach(function(place){ 
-    place.addEventListener('dragover', handleOverMove);
-    place.addEventListener('touchmove', handleOverMove);
-    place.addEventListener('drop', handleDropEnd);
-    place.addEventListener('touchend', handleDropEnd);
+ //This works for drag but for touch, I need to do some sort of if else statement so the browser detects the correct dropzones/original.
+ /*Array.from(piece).forEach(function(pieces){ 
+    if (pieces.querySelector('img') === null){
+        console.log(pieces);
+        pieces.addEventListener('dragover', handleOverMove);
+        pieces.addEventListener('touchmove', handleOverMove);
+        pieces.addEventListener('drop', handleDropEnd);
+        pieces.addEventListener('touchend', handleDropEnd);
+    } 
 });
 */
+
+
 // V. Finish message
 let correctPosition = { // creating an object using individual ids created earlier.
     img0: "drop-0",

interactive2.js

@@ -114,7 +114,6 @@ document.addEventListener('DOMContentLoaded', function () {
 });
 
 
-
 let draggableImages = document.getElementsByClassName("images");
 //let originalPlace = document.getElementsByClassName("piece2");
 var globalDraggedItemId = null;
@@ -134,6 +133,10 @@ function handleStart(e) {
 function handleOverMove(e){ 
     e.preventDefault();
     e.stopPropagation();
+    let draggedImage = e.currentTarget;
+    draggedImage.style.zIndex = 1000;  
+    let originalContainer = draggedImage.parentElement;
+    originalContainer.style.zIndex = 1; 
 }
 
 function handleDropEnd(e) { 
@@ -210,6 +213,9 @@ function checkPosition() {
             alert("You are almost there! But some pieces are in the wrong place.");
         }, 500);
     } else if (allPlaced && allCorrect) {
+        Array.from(dropZone).forEach(function(drop){ //purely aesthetics considerations, otherwise, we would see the borders
+            drop.style.border = "none";
+        })
         setTimeout(() => {
             alert("Congratulations! You completed the puzzle.");
         }, 500);

interactive3.js

@@ -0,0 +1,66 @@
+let puzzleContainer = document.getElementById("puzzle-container");
+
+function creatingGrid() {
+    let rows = 4;
+    let columns = 4;
+
+    for(let i=0; i<rows*columns; i++){
+        let pieceDiv = document.createElement('div')
+        pieceDiv.className = "piece3";
+        puzzleContainer.appendChild(pieceDiv); //dynamically created 4 divs with class name and nested them in puzzlecontainer.
+        let img = document.createElement("img");
+        img.className = "images";
+        img.id = `images${i}`;
+        img.setAttribute("draggable", "true"); // https://medium.com/@tatismolin/how-to-implement-drag-and-drop-functionality-using-vanilla-javascript-9ddfe2402695 
+        pieceDiv.appendChild(img); //dynamically created 4  with individual id elements and nested them in the divs above.
+    }
+}
+creatingGrid();
+
+let img0 = document.getElementById("images0");
+img0.src = "puzzle3/piece1.png"; 
+
+let img1 = document.getElementById("images1");
+img1.src = "puzzle3/piece2.png"; 
+
+let img2 = document.getElementById("images2");
+img2.src = "puzzle3/piece3.png"; 
+
+let img3 = document.getElementById("images3");
+img3.src = "puzzle3/piece4.png"; 
+
+let img4 = document.getElementById("images4");
+img4.src = "puzzle3/piece5.png";  
+
+let img5 = document.getElementById("images5");
+img5.src = "puzzle3/piece6.png"; 
+
+let img6 = document.getElementById("images6");
+img6.src = "puzzle3/piece7.png";  
+
+let img7 = document.getElementById("images7");
+img7.src = "puzzle3/piece8.png"; 
+
+let img8 = document.getElementById("images8");
+img8.src = "puzzle3/piece9.png"; 
+
+let img9 = document.getElementById("images9");
+img9.src = "puzzle3/piece10.png"; 
+
+let img10 = document.getElementById("images10");
+img10.src = "puzzle3/piece11.png"; 
+
+let img11 = document.getElementById("images11");
+img11.src = "puzzle3/piece12.png"; 
+
+let img12 = document.getElementById("images12");
+img12.src = "puzzle3/piece13.png"; 
+
+let img13 = document.getElementById("images13");
+img13.src = "puzzle3/piece14.png"; 
+
+let img14 = document.getElementById("images14");
+img14.src = "puzzle3/piece15.png"; 
+
+let img15 = document.getElementById("images15");
+img15.src = "puzzle3/piece16.png";