Merge pull request #6 from Birkbeck2/buttons

Buttons and new puzzle page
Birkbeck2 · Apr 9, 2024 · 0825285 · 0825285
2 parents 29aeb39 + 0c833ce
commit 0825285
Show file tree

Hide file tree

Showing 6 changed files with 166 additions and 169 deletions.
diff --git a/index.html b/index.html
@@ -6,7 +6,6 @@
         <title>Jigsaw Puzzle</title>
         <link rel="stylesheet" href="style.css">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <script src="interactive.js" defer> </script> <!--Specify defer or async?-->
     </head>
 
     <body>
@@ -15,17 +14,13 @@
         </header>
         <main>
             <section>
-                <h1>Puzzle 1</h1>
+                <h1>Pick a jigsaw to complete!</h1>
                 <ul id = "buttons">
-                    <li><button id = "start">start</button></li>
-                    <li><button id = "reset">reset</button></li>
+                    <li><a href="puzzle1.html" id="puzzle1" class="button">Puzzle 1 (Easy)</a></li>
+                    <li><a href="puzzle2.html" id="puzzle2" class="button">Puzzle 2 (Medium)</a></li>
+                    <li><a href="puzzle3.html" id="puzzle3" class="button">Puzzle 3 (Hard)</a></li>
                 </ul>
-                <div id="containers">
-                    <div id = "piece-container"></div> <!--creating the puzzle piece -https://www.youtube.com/watch?app=desktop&v=b-WZjv5Xglc&ab_channel=PresentationProcess-->
-                    <div id = "puzzle-container"></div>
-                </div>
             </section>
-        </main>
-
+        </main> 
     </body>
 </html>
diff --git a/interactive.js b/interactive.js
@@ -53,31 +53,17 @@ document.addEventListener('DOMContentLoaded', function () { // Assuring page is
             piece.setAttribute("draggable", "true"); // https://medium.com/@tatismolin/how-to-implement-drag-and-drop-functionality-using-vanilla-javascript-9ddfe2402695
             pieceContainer.appendChild(piece);
         });
-        toggleOrder();
     });
 
     // Event listener for the reset button
     resetButton.addEventListener('click', function(e) {
         resetButton.style.display = 'none'; // Hiding the reset button
         startButton.style.display = 'flex'; // Showing the start button
         let element = e.target;
-        e.preventDefault();
-        let pieces = document.getElementsByClassName("piece");
-        Array.from(pieces).forEach(function(piece){
-            piece.style.removeProperty('left'); 
-            piece.style.removeProperty('top');
-            piece.style.removeProperty('position');
-            puzzleContainer.appendChild(piece);
-        });
+        window.location.reload(); // https://www.freecodecamp.org/news/javascript-refresh-page-how-to-reload-a-page-in-js/#:~:text=The%20simplest%20way%20to%20refresh,and%20loading%20the%20latest%20content.
     });
 });
 
-function toggleOrder() { //I needed a function that modify the order of the div piece and div dropzone. Indeed, when clicking start, the piece would move and when reset will be visually below the dropzone div that are created below.
-    let pieces = document.getElementsByClassName('piece');
-    let dropZones = document.getElementsByClassName('drop-zone');
-    Array.from(pieces).forEach(piece => piece.style.order = '1');
-    Array.from(dropZones).forEach(dropZone => dropZone.style.order = '2');
-}
 
 //III. After adding the event, I realised that I needed to create new divs that will remain in the puzzle container so I can later drop the divs that have the nested img in them.
 function creatingDropZones() { 

diff --git a/puzzle1.html b/puzzle1.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>Jigsaw Puzzle</title>
+        <link rel="stylesheet" href="style.css">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <script src="interactive.js" defer> </script> <!--Specify defer or async?-->
+    </head>
+
+    <body>
+        <header>
+
+        </header>
+        <main>
+            <section>
+                <h1>Puzzle 1</h1>
+                <ul id = "buttons">
+                    <li><button id = "start">Start</button></li>
+                    <li><button id = "reset">Reset</button></li>
+                    <li><a href="index.html" id="leave" class="button">Leave</a></li>
+                </ul>
+                <div id="containers">
+                    <div id = "piece-container"></div> <!--creating the puzzle piece -https://www.youtube.com/watch?app=desktop&v=b-WZjv5Xglc&ab_channel=PresentationProcess-->
+                    <div id = "puzzle-container"></div>
+                </div>
+            </section>
+        </main>
+
+    </body>
+</html>
diff --git a/puzzle2.html b/puzzle2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>Jigsaw Puzzle</title>
+        <link rel="stylesheet" href="style.css">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    </head>
+
+    <body>
+        <header>
+
+        </header>
+        <main>
+            <section>
+                <h1>Puzzle 2</h1>
+                <ul id = "buttons">
+                    <li><button id = "start">Start</button></li>
+                    <li><button id = "reset">Reset</button></li>
+                    <li><a href="index.html" id="leave" class="button">Leave</a></li>
+                </ul>
+                <div id="containers">
+                    <div id = "piece-container"></div> <!--creating the puzzle piece -https://www.youtube.com/watch?app=desktop&v=b-WZjv5Xglc&ab_channel=PresentationProcess-->
+                    <div id = "puzzle-container"></div>
+                </div>
+            </section>
+        </main>
+
+    </body>
+</html>
diff --git a/puzzle3.html b/puzzle3.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>Jigsaw Puzzle</title>
+        <link rel="stylesheet" href="style.css">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    </head>
+
+    <body>
+        <header>
+
+        </header>
+        <main>
+            <section>
+                <h1>Puzzle 3</h1>
+                <ul id = "buttons">
+                    <li><button id = "start">Start</button></li>
+                    <li><button id = "reset">Reset</button></li>
+                    <li><a href="index.html" id="leave" class="button">Leave</a></li>
+                </ul>
+                <div id="containers">
+                    <div id = "piece-container"></div> <!--creating the puzzle piece -https://www.youtube.com/watch?app=desktop&v=b-WZjv5Xglc&ab_channel=PresentationProcess-->
+                    <div id = "puzzle-container"></div>
+                </div>
+            </section>
+        </main>
+
+    </body>
+</html>