diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..cd3a2cf Binary files /dev/null and b/.DS_Store differ diff --git a/.github/.keep b/.github/.keep deleted file mode 100644 index e69de29..0000000 diff --git a/README.md b/README.md index 71b7c30..22bafee 100644 --- 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 new file mode 100644 index 0000000..a04b7fc --- /dev/null +++ b/game/game.html @@ -0,0 +1,85 @@ + + + + + + + Card game + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Congratulations! You found all the sea creatures!
+
+ + +
+

How to play

+
    +
  1. + 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. +
    2. +
  2. + 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. +
    3. +
+
+ + + \ No newline at end of file diff --git a/images/Sustainable_Development_Goal_6.png b/images/Sustainable_Development_Goal_6.png new file mode 100644 index 0000000..d1c48e3 Binary files /dev/null and b/images/Sustainable_Development_Goal_6.png differ diff --git a/images/card-back-blue.png b/images/card-back-blue.png new file mode 100644 index 0000000..e6691ba Binary files /dev/null and b/images/card-back-blue.png differ diff --git a/images/dugong.png b/images/dugong.png new file mode 100644 index 0000000..b8a3f4b Binary files /dev/null and b/images/dugong.png differ diff --git a/images/hawksbill-turtle.jpeg b/images/hawksbill-turtle.jpeg new file mode 100644 index 0000000..e75bdda Binary files /dev/null and b/images/hawksbill-turtle.jpeg differ diff --git a/images/marine-iguana.png b/images/marine-iguana.png new file mode 100644 index 0000000..9446423 Binary files /dev/null and b/images/marine-iguana.png differ diff --git a/images/sea-lion.png b/images/sea-lion.png new file mode 100644 index 0000000..7a390ab Binary files /dev/null and b/images/sea-lion.png differ diff --git a/images/sea-turtle.png b/images/sea-turtle.png new file mode 100644 index 0000000..39a717e Binary files /dev/null and b/images/sea-turtle.png differ diff --git a/images/sei-whale.png b/images/sei-whale.png new file mode 100644 index 0000000..ba79d10 Binary files /dev/null and b/images/sei-whale.png differ diff --git a/images/vaquita-porpoise.png b/images/vaquita-porpoise.png new file mode 100644 index 0000000..e79245a Binary files /dev/null and b/images/vaquita-porpoise.png differ diff --git a/images/whale-shark.png b/images/whale-shark.png new file mode 100644 index 0000000..3a6a7e1 Binary files /dev/null and b/images/whale-shark.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..28a2b99 --- /dev/null +++ b/index.html @@ -0,0 +1,43 @@ + + + + + + + + + Document + + + + +
+
+ UNs sustainability development goal 6, clean water and sanitaton + +

Goal 6 of UNs Sustainability goals.

+

+ 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. +

+
+
+ + diff --git a/script.js b/script.js new file mode 100644 index 0000000..22dd68d --- /dev/null +++ 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 new file mode 100644 index 0000000..a91097f --- /dev/null +++ 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%); \ No newline at end of file diff --git a/styles/styles.css b/styles/styles.css new file mode 100644 index 0000000..6dec303 --- /dev/null +++ b/styles/styles.css @@ -0,0 +1,232 @@ +@charset "UTF-8"; +:root { + --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%); +} + +body { + margin: 0 auto; + height: 100%; + background-color: #E7F4FB; +} + +/*endre på og bruk BEM*/ +/*nav*/ +nav { + background-color: var(--un-blue); + float: right; + border-radius: 0 0 0 20px; + margin-bottom: 8%; + height: auto; + display: flex; + margin-right: 0; + +} + +nav a { + padding: 20px; + font-size: 20px; + text-decoration: none; + color: white; + text-transform: uppercase; +} + +nav a:hover { + transition-delay: 0.1s; + background-color: var(--background); + color: black; +} + +nav a:hover:first-child { + border-radius: 0 0 0 20px; +} + +nav a:focus { + color: var(--nav-blue); +} + +/* main page */ +main, +.title, +.container { + clear: right; +} +main, +.title, +.container { + clear: right; +} + +main { + text-align: center; + margin: 0 auto; + width: auto; + min-width: 35%; + height: auto; + margin-bottom: 5%; + padding-left: 15%; + padding-right: 15%; +} +main { + text-align: center; + margin: 0 auto; + width: auto; + min-width: 35%; + height: auto; + margin-bottom: 5%; + padding-left: 15%; + padding-right: 15%; +} + + + +img { + height: auto; + width: 20%; +} +img { + height: auto; + width: 20%; +} + +p { + border-radius: 15px; + padding: 10px 10px; + background-color: var(--un-blue); + color: white; + font-size: large; + line-height: 30px; +} +p { + border-radius: 15px; + padding: 10px 10px; + background-color: var(--un-blue); + color: white; + font-size: large; + line-height: 30px; +} + +/* Game page */ +h1 { + margin-left: 1em; + font-size: 2em; +} +h1 { + margin-left: 1em; + font-size: 2em; +} + +#game-body { + min-height: 100vh; +} + +.container { + display: flex; + justify-content: center; + padding-bottom: 10%; +} +.container { + display: flex; + justify-content: center; + padding-bottom: 10%; +} + +.grid { + width: auto; + display: grid; + grid-gap: 10px; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + grid-template-rows: 1fr; +} + +#congrats { + display: none; + text-align: center; + justify-content: center; + color: white; + font-size: 3em; +} + +/*cards*/ +.card { + display: flex; + width: 115px; + height: 160px; + margin: 5px; + border: 3px solid gold; + border-radius: 0.5em; + justify-content: center; + align-content: center; + position: relative; + transition: transform 0.6s ease-in-out; + transform-style: preserve-3d; + background: url("/images/card-back-blue.png"); + background-size: cover; + /* Define a different back image for each pair of card types */ +} +.card__face--front, .card__face--back { + position: absolute; + width: 100%; + height: 100%; + border-radius: 0.3em; + backface-visibility: hidden; + -o-object-fit: cover; + object-fit: cover; /* make the back image fit the container */ +} +.card__face--front { + z-index: 2; +} +.card--type1 .card__face--back { + background-image: url("/images/sea-lion.png"); +} +.card--type2 .card__face--back { + background-image: url("/images/marine-iguana.png"); +} +.card--type3 .card__face--back { + background-image: url("/images/dugong.png"); +} +.card--type4 .card__face--back { + background-image: url("/images/sea-turtle.png"); +} +.card--type5 .card__face--back { + background-image: url("/images/vaquita-porpoise.png"); +} +.card__face--back { + transform: rotateY(180deg); + z-index: 1; + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} +.card.is-flipped { + transform: rotateY(180deg); +} + +.card.hidden { + display: none; +} + +.how-to-play { + bottom: 0; + width: 60%; + margin: 0 auto; + background-color: var(--un-blue); + color: white; + padding: 5px; + border-radius: 0.5em; +} +.how-to-play h2 { + font-size: 20px; + text-align: center; +} +.how-to-play li { + font-size: 17px; + margin-bottom: 5px; +}/*# sourceMappingURL=styles.css.map */ \ No newline at end of file diff --git a/styles/styles.css.map b/styles/styles.css.map new file mode 100644 index 0000000..87cf0e5 --- /dev/null +++ b/styles/styles.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["styles.css","styles.scss","_variables.scss"],"names":[],"mappings":"AAAA,gBAAgB;ACGhB;EACE,mBAAA;EACA,kBAAA;EACA,qBAAA;EACA,+BAAA;EACA,8FAAA;EACA,gCAAA;EACA,+FAAA;EACA,8BAAA;EACA,6FAAA;ADDF;;ACIA;EACE,cAAA;EACA,YAAA;EACA,yBCfW;AFcb;;ACMA,uBAAA;AACA,MAAA;AAEA;EACE,yBCzBQ;ED0BR,YAAA;EACA,+BAAA;EACA,iBAAA;EACA,YAAA;EACA,aAAA;EACA,eAAA;ADJF;ACME;EACE,aAAA;EACA,eAAA;EACA,qBAAA;EACA,YAAA;EACA,yBAAA;ADJJ;ACMI;EACE,sBAAA;EACA,qBAAA;EACA,kBAAA;ADJN;ACOI;EACE,cChDK;AF2CX;;ACYA,cAAA;AAEA;;;EAGE,YAAA;ADVF;ACYE;;;EACE,YAAA;ADRJ;;ACYA;EACE,kBAAA;EACA,cAAA;EACA,WAAA;EACA,cAAA;EACA,YAAA;EACA,iBAAA;EACA,iBAAA;EACA,kBAAA;ADTF;ACWE;EACE,kBAAA;EACA,cAAA;EACA,WAAA;EACA,cAAA;EACA,YAAA;EACA,iBAAA;EACA,iBAAA;EACA,kBAAA;ADTJ;ACYI;EACE,UAAA;EACA,yCAAA;ADVN;ACYM;EACE;IACE,UAAA;IACA,2BAAA;EDVR;ECYM;IACE,UAAA;IACA,wBAAA;EDVR;AACF;;ACiBA;EACE,YAAA;EACA,UAAA;ADdF;ACgBE;EACE,YAAA;EACA,UAAA;ADdJ;;ACkBA;EACE,mBAAA;EACA,kBAAA;EACA,gCAAA;EACA,YAAA;EACA,gBAAA;EACA,iBAAA;ADfF;ACiBE;EACE,mBAAA;EACA,kBAAA;EACA,gCAAA;EACA,YAAA;EACA,gBAAA;EACA,iBAAA;ADfJ;;ACmBA,cAAA;AAEA;EACE,gBAAA;EACA,cAAA;ADjBF;ACmBE;EACE,gBAAA;EACA,cAAA;ADjBJ;;ACqBA;EAEI,iBAAA;ADnBJ;;ACsBA;EACE,aAAA;EACA,uBAAA;EACA,mBAAA;ADnBF;ACqBE;EACE,aAAA;EACA,uBAAA;EACA,mBAAA;ADnBJ;;ACuBA;EACE,WAAA;EACA,aAAA;EACA,cAAA;EACA,0CAAA;EACA,uBAAA;EACA,uBAAA;ADpBF;ACsBE;EACE,WAAA;EACA,aAAA;EACA,cAAA;EACA,0CAAA;EACA,uBAAA;EACA,uBAAA;ADpBJ;;ACyBA,QAAA;AAEA;EACI,aAAA;EACA,YAAA;EACA,aAAA;EACA,WAAA;EACA,sBAAA;EACA,oBAAA;EACA,uBAAA;EACA,qBAAA;EACA,kBAAA;EACA,0BAAA;EACA,4BAAA;EACA,6CAAA;EACA,sBAAA;EAeA,8DAAA;ADrCJ;ACwBI;EAEE,kBAAA;EACA,WAAA;EACA,YAAA;EACA,2BAAA;EACA,oBAAA;KAAA,iBAAA,EAAA,0CAAA;ADvBN;AC0BI;EACE,UAAA;ADxBN;AC6BM;EACE,6CAAA;AD3BR;ACgCM;EACE,kDAAA;AD9BR;ACmCM;EACE,2CAAA;ADjCR;ACsCM;EACE,+CAAA;ADpCR;ACyCM;EACE,qDAAA;ADvCR;AC2CI;EACE,0BAAA;EACA,UAAA;EACA,sBAAA;EACA,2BAAA;EACA,4BAAA;ADzCN;AC6CM;EACE,0BAAA;AD3CR;AC8CM;EACE,wBAAA;AD5CR;ACgDI;EACE,aAAA;AD9CN;;ACmDE;EACE,SAAA;EACA,UAAA;EACA,cAAA;EACA,gCAAA;EACA,YAAA;EACA,YAAA;EACA,oBAAA;ADhDJ;ACkDI;EACE,eAAA;EACA,kBAAA;ADhDN;ACmDI;EACE,eAAA;EACA,kBAAA;ADjDN","file":"styles.css"} \ No newline at end of file diff --git a/styles/styles.scss b/styles/styles.scss new file mode 100644 index 0000000..88c4935 --- /dev/null +++ b/styles/styles.scss @@ -0,0 +1,290 @@ +@import "./variables"; + + +:root { + --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%); +} + +body { + margin: 0 auto; + height: 100%; + background-color: $background; +} + + + +/*endre på og bruk BEM*/ +/*nav*/ + +nav { + background-color: $un-blue; + float: right; + border-radius: 0px 0px 0px 20px; + margin-bottom: 8%; + height: auto; + display: flex; + margin-right: 0; + + a { + padding: 20px; + font-size: 20px; + text-decoration: none; + color: white; + text-transform: uppercase; + + &:hover { + transition-delay: 0.1s; + transform: scale(1.1); + border-radius: 5px; + } + + &:focus { + color: $nav-blue; + } + } +} + + + +/* main page */ + +main, +.title, +.container { + clear: right; + + & { + clear: right; + } +} + +main { + text-align: center; + margin: 0 auto; + width: auto; + min-width: 35%; + height: auto; + margin-bottom: 5%; + padding-left: 15%; + padding-right: 15%; + + & { + text-align: center; + margin: 0 auto; + width: auto; + min-width: 35%; + height: auto; + margin-bottom: 5%; + padding-left: 15%; + padding-right: 15%; + + + .article__text { + opacity: 0; + animation: fadeIn 1s ease-in-out forwards; + + @keyframes fadeIn { + from { + opacity: 0; + transform: translateY(50px); + } + to { + opacity: 1; + transform: translateY(0); + } + } + } + } +} + + +img { + height: auto; + width: 20%; + + & { + height: auto; + width: 20%; + } +} + +p { + border-radius: 15px; + padding: 10px 10px; + background-color: var(--un-blue); + color: white; + font-size: large; + line-height: 30px; + + & { + border-radius: 15px; + padding: 10px 10px; + background-color: var(--un-blue); + color: white; + font-size: large; + line-height: 30px; + } +} + +/* Game page */ + +h1 { + margin-left: 1em; + font-size: 2em; + + & { + margin-left: 1em; + font-size: 2em; + } +} + +#game-body { + + min-height: 100vh; + } + +.container { + display: flex; + justify-content: center; + padding-bottom: 10%; + + & { + display: flex; + justify-content: center; + padding-bottom: 10%; + } +} + +.grid { + width: auto; + display: grid; + grid-gap: 10px; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + grid-template-rows: 1fr; + border: 1px solid white; + + & { + width: auto; + display: grid; + grid-gap: 10px; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + grid-template-rows: 1fr; + border: 1px solid white; + } +} + + +/*cards*/ + +.card { + display: flex; + width: 115px; + height: 160px; + margin: 5px; + border: 3px solid gold; + border-radius: .5em; + justify-content: center; + align-content: center; + position: relative; + transition: transform 0.6s; + transform-style: preserve-3d; + background: url("/images/card-back-blue.png"); + background-size: cover; + + &__face--front, + &__face--back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; + object-fit: cover; /* make the back image fit the container */ + } + + &__face--front { + z-index: 2; + } + + /* Define a different back image for each pair of card types */ + &--type1 { + & .card__face--back { + background-image: url("/images/sea-lion.png"); + } + } + + &--type2 { + & .card__face--back { + background-image: url("/images/marine-iguana.png"); + } + } + + &--type3 { + & .card__face--back { + background-image: url("/images/dugong.png"); + } + } + + &--type4 { + & .card__face--back { + background-image: url("/images/sea-turtle.png"); + } + } + + &--type5 { + & .card__face--back { + background-image: url('/images/vaquita-porpoise.png'); + } + } + + &__face--back { + transform: rotateY(180deg); + z-index: 1; + background-size: cover; + background-position: center; + background-repeat: no-repeat; + } + + &.is-flipped { + & .card__face--front { + transform: rotateY(180deg); + } + + & .card__face--back { + transform: rotateY(0deg); + } + } + + &.hidden { + display: none; + + } + } + + .how-to-play { + bottom: 0; + width: 60%; + margin: 0 auto; + background-color: var(--un-blue); + color: white; + padding: 5px; + border-radius: 0.5em; + + h2 { + font-size: 20px; + text-align: center; + } + + li { + font-size: 17px; + margin-bottom: 5px; + } + } + + diff --git a/styles/variables.css b/styles/variables.css new file mode 100644 index 0000000..1451a15 --- /dev/null +++ b/styles/variables.css @@ -0,0 +1 @@ +/*# sourceMappingURL=variables.css.map */ \ No newline at end of file diff --git a/styles/variables.css.map b/styles/variables.css.map new file mode 100644 index 0000000..639caba --- /dev/null +++ b/styles/variables.css.map @@ -0,0 +1 @@ +{"version":3,"sources":[],"names":[],"mappings":"","file":"variables.css"} \ No newline at end of file