AdvancedCSS2023 · github-classroom · Apr 19, 2023 · Apr 19, 2023 · Apr 19, 2023 · Apr 19, 2023
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -1 +1,29 @@
+# Assignment 2 - CSS game | Advanced CSS
+
+## What does the project do?
+
+- This project is a game that has been created using CSS. The objective of the game is to click on eggs that appear on the screen before the timer runs out, with a time limit of 30 seconds.
+
+## Why is the project useful?
+
+- From a practical standpoint, this project may not have any specific use or application. However, it can serve as an entertaining and engaging game for users to play and pass the time. Games like this can also be used to improve hand-eye coordination and reaction time, which can have practical benefits in real-world scenarios such as driving or sports. Additionally, creating games like this can help individuals develop their programming and design skills, which can be useful in future projects or career paths.
+
+## How can users get started with the project?
+
+- They can download the zip file to their computer and play the game. Or they can clone the repository and play.
+
+## Where can users get help with your project?
+
+- If users need help with the project they can contact the developers for assistance. This may be done through email, social media, or other contact methods listed on the project's website or documentation.
+
+## Which technology is used?
+
+- CSS is the primary technology used to create this game, but HTML have also been used to structure and organize the content on the page.
+- We have used some javacript to hide articles for better UX javascript have also been used to create a timer and counter for the game. We did this to create a good feeling for the users and make the game seem more like a game.
+
+## Who maintains and contributes to the project?
+
+- Elina, Hannah and Jon are the individuals who maintain and contribute to the project, as they were the ones who created it.
+
+[![Review Assignment Due Date](https://classroom.github.com/assets/deadline-readme-button-24ddc0f5d75046c5622901739e7c5dd533143b0c8e959d652212380cedb1ea36.svg)](https://classroom.github.com/a/LlYauwvp)
 [![Open in Visual Studio Code](https://classroom.github.com/assets/open-in-vscode-718a45dd9cf7e7f842a935f5ebbe5719a5e09af4491e668f4dbf3b35d5cca122.svg)](https://classroom.github.com/online_ide?assignment_repo_id=10919012&assignment_repo_type=AssignmentRepo)
diff --git a/img/.DS_Store b/img/.DS_Store
diff --git a/img/chickcry.png b/img/chickcry.png
diff --git a/img/chickhappy.png b/img/chickhappy.png
diff --git a/img/chickneutral.png b/img/chickneutral.png
diff --git a/img/easteregg1.png b/img/easteregg1.png
diff --git a/img/easteregg10.png b/img/easteregg10.png
diff --git a/img/easteregg11.png b/img/easteregg11.png
diff --git a/img/easteregg12.png b/img/easteregg12.png
diff --git a/img/easteregg13.png b/img/easteregg13.png
diff --git a/img/easteregg14.png b/img/easteregg14.png
diff --git a/img/easteregg15.png b/img/easteregg15.png
diff --git a/img/easteregg16.png b/img/easteregg16.png
diff --git a/img/easteregg17.png b/img/easteregg17.png
diff --git a/img/easteregg18.png b/img/easteregg18.png
diff --git a/img/easteregg19.png b/img/easteregg19.png
diff --git a/img/easteregg2.png b/img/easteregg2.png
diff --git a/img/easteregg20.png b/img/easteregg20.png
diff --git a/img/easteregg21.png b/img/easteregg21.png
diff --git a/img/easteregg22.png b/img/easteregg22.png
diff --git a/img/easteregg23.png b/img/easteregg23.png
diff --git a/img/easteregg24.png b/img/easteregg24.png
diff --git a/img/easteregg25.png b/img/easteregg25.png
diff --git a/img/easteregg3.png b/img/easteregg3.png
diff --git a/img/easteregg4.png b/img/easteregg4.png
diff --git a/img/easteregg5.png b/img/easteregg5.png
diff --git a/img/easteregg6.png b/img/easteregg6.png
diff --git a/img/easteregg7.png b/img/easteregg7.png
diff --git a/img/easteregg8.png b/img/easteregg8.png
diff --git a/img/easteregg9.png b/img/easteregg9.png
diff --git a/img/egg1.png b/img/egg1.png
diff --git a/img/egg10.png b/img/egg10.png
diff --git a/img/egg11.png b/img/egg11.png
diff --git a/img/egg12.png b/img/egg12.png
diff --git a/img/egg13.png b/img/egg13.png
diff --git a/img/egg14.png b/img/egg14.png
diff --git a/img/egg15.png b/img/egg15.png
diff --git a/img/egg16.png b/img/egg16.png
diff --git a/img/egg17.png b/img/egg17.png
diff --git a/img/egg18.png b/img/egg18.png
diff --git a/img/egg19.png b/img/egg19.png
diff --git a/img/egg2.png b/img/egg2.png
diff --git a/img/egg20.png b/img/egg20.png
diff --git a/img/egg21.png b/img/egg21.png
diff --git a/img/egg22.png b/img/egg22.png
diff --git a/img/egg23.png b/img/egg23.png
diff --git a/img/egg24.png b/img/egg24.png
diff --git a/img/egg25.png b/img/egg25.png
diff --git a/img/egg3.png b/img/egg3.png
diff --git a/img/egg4.png b/img/egg4.png
diff --git a/img/egg5.png b/img/egg5.png
diff --git a/img/egg6.png b/img/egg6.png
diff --git a/img/egg7.png b/img/egg7.png
diff --git a/img/egg8.png b/img/egg8.png
diff --git a/img/egg9.png b/img/egg9.png
diff --git a/img/favicon.ico b/img/favicon.ico
diff --git a/img/spoon.png b/img/spoon.png
diff --git a/index.html b/index.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" href="styles.css" />
+  <link rel="icon" type="image/x-icon" href="img/favicon.ico">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Dongle:wght@400;700&display=swap" rel="stylesheet">
+  <title>Easter Game</title>
+</head>
+
+<body>
+  <main>
+    <article id="startScreen">
+      <div class="wrapper--information">
+        <h1>Egg hunt</h1>
+        <p>You crave an omelette. Go hunt for eggs!
+        </p>
+        <img src="./img/chickneutral.png" alt="Neutral chicken">
+        <p>How to play: Crack all the eggs as fast as you can!</p>
+        <a href="#gameScreen"> <button>Start game</button></a>
+      </div>
+    </article>
+    <article id="gameScreen">
+      <div class="game--information">
+      <h1>Gametime</h1>
+      <div>
+        <p>Eggs cracked: <span id="counter">0</span></p>
+        <p>Time elapsed: <span id="timer">00:00:00</span></p>
+      </div>
+    </div>
+      <div class="gameboard">
+        <div class="gameboard__square">
+          <input type="checkbox" class="gameboard__checkbox--eggimage1">
+        </div>
+        <div class="gameboard__square">
+          <input type="checkbox" class="gameboard__checkbox--eggimage2">
+        </div>
+        <div class="gameboard__square">
+          <input type="checkbox" class="gameboard__checkbox--eggimage3">
+        </div>
+        <div class="gameboard__square">
+          <input type="checkbox" class="gameboard__checkbox--eggimage4">
+        </div>
+        <div class="gameboard__square">
+          <input type="checkbox" class="gameboard__checkbox--eggimage5">
+        </div>
+        <div class="gameboard__square">
+          <input type="checkbox" class="gameboard__checkbox--eggimage6">
+        </div>
+        <div class="gameboard__square">
+          <input type="checkbox" class="gameboard__checkbox--eggimage7">
+        </div>
+        <div class="gameboard__square">
+          <input type="checkbox" class="gameboard__checkbox--eggimage8">
+        </div>
+        <div class="gameboard__square">
+          <input type="checkbox" class="gameboard__checkbox--eggimage9">
+        </div>
+        <div class="gameboard__square">
+          <input type="checkbox" class="gameboard__checkbox--eggimage10">
+        </div>
+        <div class="gameboard__square">
+          <input type="checkbox" class="gameboard__checkbox--eggimage11">
+        </div>
+        <div class="gameboard__square">
+          <input type="checkbox" class="gameboard__checkbox--eggimage12">
+        </div>
+        <div class="gameboard__square">
+          <input type="checkbox" class="gameboard__checkbox--eggimage13">
+        </div>
+        <div class="gameboard__square">
+          <input type="checkbox" class="gameboard__checkbox--eggimage14">
+        </div>
+        <div class="gameboard__square">
+          <input type="checkbox" class="gameboard__checkbox--eggimage15">
+        </div>
+        <div class="gameboard__square">
+          <input type="checkbox" class="gameboard__checkbox--eggimage16">
+        </div>
+        <div class="gameboard__square">
+          <input type="checkbox" class="gameboard__checkbox--eggimage17">
+        </div>
+        <div class="gameboard__square">
+          <input type="checkbox" class="gameboard__checkbox--eggimage18">
+        </div>
+        <div class="gameboard__square">
+          <input type="checkbox" class="gameboard__checkbox--eggimage19">
+        </div>
+        <div class="gameboard__square">
+          <input type="checkbox" class="gameboard__checkbox--eggimage20">
+        </div>
+        <div class="gameboard__square">
+          <input type="checkbox" class="gameboard__checkbox--eggimage21">
+        </div>
+        <div class="gameboard__square">
+          <input type="checkbox" class="gameboard__checkbox--eggimage22">
+        </div>
+        <div class="gameboard__square">
+          <input type="checkbox" class="gameboard__checkbox--eggimage23">
+        </div>
+        <div class="gameboard__square">
+          <input type="checkbox" class="gameboard__checkbox--eggimage24">
+        </div>
+        <div class="gameboard__square">
+          <input type="checkbox" class="gameboard__checkbox--eggimage25">
+        </div>
+        <a href="./index.html"><button>Return to start</button></a>
+    </article>
+  </main>
+  </div>
+  <script src="./script.js"></script>
+</body>
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,86 @@
+// get all the checkboxes
+const checkboxes = document.querySelectorAll('input[type="checkbox"]');
+
+// add event listener to each checkbox
+checkboxes.forEach(function(checkbox) {
+  checkbox.addEventListener('change', function() {
+    // get the number of checked checkboxes
+    const checkedCount = document.querySelectorAll('input[type="checkbox"]:checked').length;
+
+    // update the counter display
+    const counter = document.querySelector('#counter');
+    counter.textContent = checkedCount;
+  });
+});
+
+// Timer
+
+// get all the checkboxes
+
+// add event listener to each checkbox
+checkboxes.forEach(function(checkbox) {
+  checkbox.addEventListener('change', function() {
+    // get the number of checked checkboxes
+    const checkedCount = document.querySelectorAll('input[type="checkbox"]:checked').length;
+
+    // update the counter display
+    const counter = document.querySelector('#counter');
+    counter.textContent = checkedCount;
+  });
+});
+
+// Timer
+
+const counter = document.getElementById('counter');
+const timer = document.getElementById('timer');
+let startTime;
+let timerInterval;
+
+function startTimer() {
+  startTime = new Date().getTime();
+  timerInterval = setInterval(updateTimer, 1000);
+}
+
+function updateTimer() {
+  const elapsedTime = new Date().getTime() - startTime;
+  const seconds = Math.floor(elapsedTime / 1000);
+  const minutes = Math.floor(seconds / 60);
+  timer.textContent = `${minutes.toString().padStart(2, '0')}:${(seconds % 60).toString().padStart(2, '0')}`;
+}
+
+let numChecked = 0;
+checkboxes.forEach(function(checkbox) {
+  checkbox.addEventListener('click', function() {
+    if (numChecked === 0) {
+      startTimer();
+    }
+    if (checkbox.checked) {
+      numChecked++;
+    } else {
+      numChecked--;
+    }
+    counter.textContent = numChecked;
+    if (numChecked === checkboxes.length) {
+      clearInterval(timerInterval);
+      alert(`You cracked all the eggs in ${timer.textContent}!`);
+    }
+  });
+});
+
+// Hide and show articles
+const startButton = document.querySelector('#startScreen button');
+const gameScreen = document.querySelector('#gameScreen');
+const returnButton = document.querySelector('#gameScreen button');
+
+
+startButton.addEventListener('click', () => {
+  // hide the start screen
+  startScreen.style.display = 'none';
+  // show the game screen
+  gameScreen.style.display = 'block';
+});
+
+returnButton.addEventListener('click', () => {
+  // reset the game
+  location.reload();
+});