AdvancedCSS2023 · github-classroom · Apr 18, 2023 · Apr 18, 2023 · Apr 18, 2023 · Apr 18, 2023
diff --git a/.DS_Store b/.DS_Store
diff --git a/.github/.keep b/.github/.keep
diff --git a/README.md b/README.md
@@ -1 +1,30 @@
+[![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=10907831&assignment_repo_type=AssignmentRepo)
+
+Assigment 2.2 - Group 07 - Card memorization
+
+What the project does? 
+The CSS memory game is a web-based game that 
+challenges players to match pairs of hidden icons by flipping over cards. 
+The game is implemented using HTML, CSS, and JavaScript, and is designed 
+to be simple and easy to play.
+
+Why the project is useful?
+
+The CSS memory game is a fun and engaging way to practice memory skills 
+and challenge yourself. It can also be a great learning resource for those 
+who want to improve their understanding of HTML, CSS, and JavaScript, as 
+it provides a simple example of how these technologies can be used 
+together to create an interactive game
+
+How users can get started with the project: To get started with the CSS memory game, users can visit the web page where the game is hosted and simply start playing. The game requires no downloads or installations, and can be played directly in the user's web browser.
+
+Where users can get help with your project: If users have questions or need help with the CSS memory game, they can refer to the documentation provided on the web page, which includes instructions on how to play the game and information about how it works. 
+
+Which technology is used?
+
+We primarely use CSS (SASS, and BEM )and HTML, for the style, animation and structure in this game, but there is also minimal use of JavaScript. This is to make the game work. 
+
+Who maintains and contributes to the project
+
+The contributers and maintainers of this project are Mariam, Håkon and Julie. 
diff --git a/game/game.html b/game/game.html
@@ -0,0 +1,85 @@
+<!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" />
+    <title>Card game</title>
+
+    <link rel="stylesheet" href="/styles/styles.css"/>
+
+  </head>
+  <body id="game-body">
+    <nav class="nav">
+      <a class="nav__link nav__link--home" href="/index.html">Home</a>
+      <a class="nav__link nav__link--game" href="game.html">Play the game!</a>
+    </nav>
+
+    <div class="container">
+      <div class="grid">
+        <div class="card card--type5 card--1">
+          <div class="card__face card__face--front"></div>
+          <div class="card__face card__face--back"></div>
+        </div>
+        <div class="card card--type1 card--2">
+          <div class="card__face card__face--front"></div>
+          <div class="card__face card__face--back"></div>
+        </div>
+        <div class="card card--type2 card--3">
+          <div class="card__face card__face--front"></div>
+          <div class="card__face card__face--back"></div>
+        </div>
+        <div class="card card--type3 card--4">
+          <div class="card__face card__face--front"></div>
+          <div class="card__face card__face--back"></div>
+        </div>
+        <div class="card card--type4 card--5">
+          <div class="card__face card__face--front"></div>
+          <div class="card__face card__face--back"></div>
+        </div>
+        <div class="card card--type1 card--6">
+          <div class="card__face card__face--front"></div>
+          <div class="card__face card__face--back"></div>
+        </div>
+        <div class="card card--type2 card--7">
+          <div class="card__face card__face--front"></div>
+          <div class="card__face card__face--back"></div>
+        </div>
+        <div class="card card--type3 card--8">
+          <div class="card__face card__face--front"></div>
+          <div class="card__face card__face--back"></div>
+        </div>
+        <div class="card card--type4 card--9">
+          <div class="card__face card__face--front"></div>
+          <div class="card__face card__face--back"></div>
+        </div>
+        <div class="card card--type5 card--10">
+          <div class="card__face card__face--front"></div>
+          <div class="card__face card__face--back"></div>
+        </div>
+      </div>
+      <div id="congrats">Congratulations! You found all the sea creatures!</div>
+    </div>
+
+
+    <div class="how-to-play">
+      <h2 class="how-to-play__title">How to play</h2>
+      <ol class="how-to-play__list">
+        <li class="how-to-play__step">
+          Turn over two cards: On each turn, the player clicks on two cards to
+          turn them over. If the images on the back match, the player gets to remove them and
+          turn over two more cards. If the cards do not match, they are turned
+          back over and the player must remember where they are for future
+          turns.
+        </li>
+        <li class="how-to-play__step">
+          Keep playing until all pairs are matched: The game continues until all
+          5 pairs of matching cards have been found. The player's goal is to
+          find all the matching pairs in as few turns as possible, with fewer
+          turns indicating better memory and performance.
+        </li>
+      </ol>
+    </div>
+    <script src="/script.js"></script>
+  </body>
+</html>
diff --git a/images/Sustainable_Development_Goal_6.png b/images/Sustainable_Development_Goal_6.png
diff --git a/images/card-back-blue.png b/images/card-back-blue.png
diff --git a/images/dugong.png b/images/dugong.png
diff --git a/images/hawksbill-turtle.jpeg b/images/hawksbill-turtle.jpeg
diff --git a/images/marine-iguana.png b/images/marine-iguana.png
diff --git a/images/sea-lion.png b/images/sea-lion.png
diff --git a/images/sea-turtle.png b/images/sea-turtle.png
diff --git a/images/sei-whale.png b/images/sei-whale.png
diff --git a/images/vaquita-porpoise.png b/images/vaquita-porpoise.png
diff --git a/images/whale-shark.png b/images/whale-shark.png
diff --git a/index.html b/index.html
@@ -0,0 +1,43 @@
+<!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" type="text/css" href="/styles/styles.css" />
+
+    <title>Document</title>
+  </head>
+  <body>
+    <nav class="nav">
+      <a class="nav__link nav__link--home" href="./index.html">Home</a>
+      <a class="nav__link nav__link--game" href="game/game.html"
+        >Play the game!</a
+      >
+    </nav>
+
+    <main>
+      <article class="article">
+        <img
+          src="/images/Sustainable_Development_Goal_6.png"
+          alt="UNs sustainability development goal 6, clean water and sanitaton"
+        />
+
+        <h1 class="article__title">Goal 6 of UNs Sustainability goals.</h1>
+        <p class="article__text">
+          Goal 6 of the UN's Sustainable Development Goals aims to ensure
+          availability and sustainable management of water and sanitation for
+          all. One of the key targets under this goal is to prevent and
+          significantly reduce marine pollution of all kinds, including by
+          nutrient pollution and marine debris. This is important for the
+          preservation of sea creatures, as they can be greatly impacted by
+          water pollution. Marine pollution can harm sea creatures directly,
+          through ingestion of or entanglement in debris, or indirectly through
+          the contamination of the food chain. Therefore, achieving Goal 6 can
+          play a crucial role in ensuring the health and wellbeing of sea
+          creatures and their ecosystems.
+        </p>
+      </article>
+    </main>
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,46 @@
+const cards = document.querySelectorAll(".card");
+const flippedCards = [];
+
+function flipCard() {
+  if (flippedCards.length >= 2) {
+    return;
+  }
+
+  this.classList.toggle("is-flipped");
+  flippedCards.push(this);
+
+  if (flippedCards.length === 2) {
+    const [card1, card2] = flippedCards;
+
+    setTimeout(() => {
+      if (flippedCards[0].classList[2] === flippedCards[1].classList[2]) {
+        flippedCards.forEach((card) => card.classList.remove("is-flipped"));
+        flippedCards.length = 0;
+      } else {
+        if (card1.classList[1] === card2.classList[1]) {
+          flippedCards.forEach((card) => (card.style.display = "none"));
+        } else {
+          flippedCards.forEach((card) => card.classList.remove("is-flipped"));
+        }
+        flippedCards.length = 0;
+      }
+
+      const remainingCards = document.querySelectorAll(
+        '.card:not([style="display: none;"])'
+      );
+      if (remainingCards.length === 6) {
+        document.body.style.background =
+          "linear-gradient(180deg, rgb(205, 194, 172) 0%, rgba(0, 106, 171, 1) 77%)";
+      }
+      if (remainingCards.length === 2) {
+        document.body.style.background =
+          "linear-gradient(180deg, rgba(124,185,242,1) 0%, rgba(0,106,171,1) 77%)";
+      }
+      if (!remainingCards.length) {
+        document.querySelector("#congrats").style.display = "flex";
+      }
+    }, 1000);
+  }
+}
+
+cards.forEach((card) => card.addEventListener("click", flipCard));
diff --git a/styles/_variables.scss b/styles/_variables.scss
@@ -0,0 +1,10 @@
+
+$nav-blue: #3127ef;
+$un-blue: #04ADD9;
+$background: #E7F4FB;
+$ocean-brown: rgb(228,198,132);
+$ocean-brown-gradient: linear-gradient(180deg, rgba(228,198,132,1) 0%, rgba(128,93,15,1) 77%);
+$ocean-middle: rgb(228,198,132);
+$ocean-middle-gradient: linear-gradient(180deg, rgba(228,198,132,1) 0%, rgba(0,106,171,1) 77%);
+$ocean-blue: rgb(124,185,242);
+$ocean-blue-gradient: linear-gradient(180deg, rgba(124,185,242,1) 0%, rgba(0,106,171,1) 77%);