diff --git a/index.html b/index.html index 4d5bb54..8a90c17 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,6 @@ Jigsaw Puzzle - @@ -15,17 +14,13 @@
-

Puzzle 1

+

Pick a jigsaw to complete!

-
-
-
-
-
- + diff --git a/interactive.js b/interactive.js index 45f7f2d..ec361c6 100644 --- a/interactive.js +++ b/interactive.js @@ -53,7 +53,6 @@ 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 @@ -61,23 +60,10 @@ document.addEventListener('DOMContentLoaded', function () { // Assuring page is 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 new file mode 100644 index 0000000..0d75a85 --- /dev/null +++ b/puzzle1.html @@ -0,0 +1,32 @@ + + + + + + Jigsaw Puzzle + + + + + + +
+ +
+
+
+

Puzzle 1

+ +
+
+
+
+
+
+ + + diff --git a/puzzle2.html b/puzzle2.html new file mode 100644 index 0000000..d5a16ae --- /dev/null +++ b/puzzle2.html @@ -0,0 +1,31 @@ + + + + + + Jigsaw Puzzle + + + + + +
+ +
+
+
+

Puzzle 2

+ +
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/puzzle3.html b/puzzle3.html new file mode 100644 index 0000000..8b0b6a8 --- /dev/null +++ b/puzzle3.html @@ -0,0 +1,31 @@ + + + + + + Jigsaw Puzzle + + + + + +
+ +
+
+
+

Puzzle 3

+ +
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/style.css b/style.css index 9468479..02e3931 100644 --- a/style.css +++ b/style.css @@ -2,6 +2,8 @@ margin: 0; padding: 0; box-sizing: border-box; + font-size: 16px; + font-family: Helvetica, Arial, sans-serif } body, main { @@ -18,6 +20,70 @@ h1 { justify-content: center; } +.button{ + padding: 10px 20px; + color: white; + text-align: center; + text-decoration: none; + display: inline-block; + margin: 5% 5% 5% 5%; + border: none; + border-radius: 4px; +} + +#puzzle1{ + background-color: #90EE90; +} + +#puzzle2{ + background-color: #FFA07A; +} + +#puzzle3{ + background-color: #FF6347; +} + +#leave { + background-color: #4682B4; +} + + +#buttons { + display: flex; + justify-content: center; + list-style-type: none; + font-size: 16px; + gap: 2px; +} + +#start { + display: flex; + justify-content: center; + list-style-type: none; + padding: 10px 20px; + color: white; + text-align: center; + text-decoration: none; + display: inline-block; + margin: 5% 5% 5% 5%; + border: none; + border-radius: 4px; + background-color: #D8BFD8; +} + +#reset { + display: none; + list-style-type: none; + padding: 10px 20px; + color: white; + text-align: center; + text-decoration: none; + margin: 5% 5% 5% 5%; + border: none; + border-radius: 4px; + background-color: #D8BFD8; +} + @media (max-width: 767px) and (orientation: portrait) { /*Orientation property: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation*/ #containers{ @@ -99,24 +165,6 @@ h1 { left: -1%; } -#buttons { - display: flex; - justify-content: center; - list-style-type: none; - font-size: 16px; -} - -#start { - display: flex; - justify-content: center; - list-style-type: none; - padding: 2%; -} - -#reset { - display: none; - list-style-type: none; -} } @media (max-width: 767px) and (orientation: landscape){ @@ -200,24 +248,6 @@ h1 { left: -1%; } -#buttons { - display: flex; - justify-content: center; - list-style-type: none; - font-size: 16px; -} - -#start { - display: flex; - justify-content: center; - list-style-type: none; - padding: 2%; -} - -#reset { - display: none; - list-style-type: none; -} } @media only screen and (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) { @@ -301,24 +331,6 @@ h1 { left: -1%; } -#buttons { - display: flex; - justify-content: center; - list-style-type: none; - font-size: 16px; -} - -#start { - display: flex; - justify-content: center; - list-style-type: none; - padding: 2%; -} - -#reset { - display: none; - list-style-type: none; -} } @media only screen and (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) { @@ -402,24 +414,6 @@ h1 { left: -1%; } -#buttons { - display: flex; - justify-content: center; - list-style-type: none; - font-size: 16px; -} - -#start { - display: flex; - justify-content: center; - list-style-type: none; - padding: 2%; -} - -#reset { - display: none; - list-style-type: none; -} } @media only screen and (min-width: 1024px) and (orientation: portrait){ @@ -503,24 +497,6 @@ h1 { left: -1%; } -#buttons { - display: flex; - justify-content: center; - list-style-type: none; - font-size: 16px; -} - -#start { - display: flex; - justify-content: center; - list-style-type: none; - padding: 2%; -} - -#reset { - display: none; - list-style-type: none; -} } @media only screen and (min-width: 1024px) and (orientation: landscape){ @@ -604,24 +580,6 @@ h1 { left: -1%; } -#buttons { - display: flex; - justify-content: center; - list-style-type: none; - font-size: 16px; -} - -#start { - display: flex; - justify-content: center; - list-style-type: none; - padding: 2%; -} - -#reset { - display: none; - list-style-type: none; -} } @media only screen and (min-width: 1200px){ @@ -705,24 +663,6 @@ h1 { left: -1%; } -#buttons { - display: flex; - justify-content: center; - list-style-type: none; - font-size: 16px; -} - -#start { - display: flex; - justify-content: center; - list-style-type: none; - padding: 2%; -} - -#reset { - display: none; - list-style-type: none; -} } @media only screen and (min-width: 1400px){ @@ -806,22 +746,4 @@ h1 { left: -1%; } -#buttons { - display: flex; - justify-content: center; - list-style-type: none; - font-size: 16px; -} - -#start { - display: flex; - justify-content: center; - list-style-type: none; - padding: 2%; -} - -#reset { - display: none; - list-style-type: none; -} } \ No newline at end of file