index.html
Changed around line 3
-
Memory game 😊 (Have Fun!)
+
Memory game 😊 (Have Fun!!)
index.html
Changed around line 3
-
Memory game 😊
+
Memory game 😊 (Have Fun!)
index.scroll
Changed around line 1
- title added
+ title added.
index.scroll
Changed around line 1
- title added
+ title added
index.scroll
Changed around line 1
-
+ title added
style.css
Changed around line 1
+ font-family: Arial, Helvetica, sans-serif;
Changed around line 61: a, a:visited {
- font-family: Arial, Helvetica, sans-serif;
+ padding: 1rem;
style.css
Changed around line 62: a, a:visited {
+ }
+
+ h1 {
+ color: #fff;
+ text-align: center;
index.html
Changed around line 3
+
Memory game 😊
style.css
Changed around line 61: a, a:visited {
+ text-decoration: underline;
tc.png
sc.png
pp.png
overpaid.png
mb.png
cp.png
br.png
os.png
style.css
Changed around line 34: body {
- background: transparent url('/question.png') no-repeat center center / contain;
+ background: transparent url('question.png') no-repeat center center / contain;
style.css
Changed around line 34: body {
- background: transparent url('../img/question.png') no-repeat center center / contain;
+ background: transparent url('/question.png') no-repeat center center / contain;
script.js
Changed around line 1
- img: "img/tc.png",
+ img: "tc.png",
- img: "img/os.png",
+ img: "os.png",
- img: "img/overpaid.png",
+ img: "overpaid.png",
- img: "img/pp.png",
+ img: "pp.png",
- img: "img/sc.png",
+ img: "sc.png",
- img: "img/mb.png",
+ img: "mb.png",
- img: "img/cp.png",
+ img: "cp.png",
- img: "img/br.png",
+ img: "br.png",
question.png
index.html
Changed around line 5
+
script.js
Changed around line 1
+ const cardsArray = [
+ {
+ name: "twocents",
+ img: "img/tc.png",
+ },
+ {
+ name: "officeslacker",
+ img: "img/os.png",
+ },
+ {
+ name: "overpaid",
+ img: "img/overpaid.png",
+ },
+ {
+ name: "perfectpitch",
+ img: "img/pp.png",
+ },
+ {
+ name: "sonicity",
+ img: "img/sc.png",
+ },
+ {
+ name: "musicalbox",
+ img: "img/mb.png",
+ },
+ {
+ name: "chronopiano",
+ img: "img/cp.png",
+ },
+ {
+ name: "brownie",
+ img: "img/br.png",
+ },
+ ];
+
+ const gameGrid = cardsArray.concat(cardsArray).sort(() => 0.5 - Math.random());
+
+ let firstGuess = "";
+ let secondGuess = "";
+ let count = 0;
+ let previousTarget = null;
+ let delay = 1200;
+
+ const game = document.getElementById("game");
+ const grid = document.createElement("section");
+ grid.setAttribute("class", "grid");
+ game.appendChild(grid);
+
+ gameGrid.forEach((item) => {
+ const { name, img } = item;
+
+ const card = document.createElement("div");
+ card.classList.add("card");
+ card.dataset.name = name;
+
+ const front = document.createElement("div");
+ front.classList.add("front");
+
+ const back = document.createElement("div");
+ back.classList.add("back");
+ back.style.backgroundImage = `url(${img})`;
+
+ grid.appendChild(card);
+ card.appendChild(front);
+ card.appendChild(back);
+ });
+
+ const match = () => {
+ const selected = document.querySelectorAll(".selected");
+ selected.forEach((card) => {
+ card.classList.add("match");
+ });
+ };
+
+ const resetGuesses = () => {
+ firstGuess = "";
+ secondGuess = "";
+ count = 0;
+ previousTarget = null;
+
+ var selected = document.querySelectorAll(".selected");
+ selected.forEach((card) => {
+ card.classList.remove("selected");
+ });
+ };
+
+ grid.addEventListener("click", (event) => {
+ const clicked = event.target;
+
+ if (
+ clicked.nodeName === "SECTION" ||
+ clicked === previousTarget ||
+ clicked.parentNode.classList.contains("selected") ||
+ clicked.parentNode.classList.contains("match")
+ ) {
+ return;
+ }
+
+ if (count < 2) {
+ count++;
+ if (count === 1) {
+ firstGuess = clicked.parentNode.dataset.name;
+ console.log(firstGuess);
+ clicked.parentNode.classList.add("selected");
+ } else {
+ secondGuess = clicked.parentNode.dataset.name;
+ console.log(secondGuess);
+ clicked.parentNode.classList.add("selected");
+ }
+
+ if (firstGuess && secondGuess) {
+ if (firstGuess === secondGuess) {
+ setTimeout(match, delay);
+ }
+ setTimeout(resetGuesses, delay);
+ }
+ previousTarget = clicked;
+ }
+ });
script.js
index.html
index.html
Changed around line 1
-
+
index.html
Changed around line 1
-
-
Hello World my name is
-
a
+
+
index.scroll
Changed around line 1
- buildHtml
- theme roboto
-
- Hello World my name is
-
- a
index.html
Changed around line 1
-
-
Hello World my name isa
+
+
Hello World my name is
+
a
index.scroll
Changed around line 4: theme roboto
-
a
+ a
index.scroll
Changed around line 4: theme roboto
-
+
a
index.scroll
Changed around line 1
- buildHtml
-
- theme roboto
-
- Hello World my name is
-
-
+ buildHtml
+
+ theme roboto
+
+ Hello World my name is
+
+
index.scroll
Changed around line 3: buildHtml
+
+
index.html
Changed around line 1
-
-
Hello World my name is
+
+
Hello World my name isa
index.html
.gitignore
Changed around line 1
+ *.html
+ *.txt
+ *.xml
+ *.css
+ *.js
index.html
index.scroll
Changed around line 2: buildHtml
- hello
+ Hello World my name is
roboto.css
Changed around line 1
- body {
- margin: 20px 0;
- background: #000;
- }
-
- .grid {
- max-width: 500px;
- margin: 0 auto;
- display: flex;
- flex-wrap: wrap;
- justify-content: space-evenly;
- }
-
- .card {
- position: relative;
- transition: all .4s linear;
- transform-style: preserve-3d;
- margin: 5px;
- border-radius: 50px;
- }
-
- .card,
- .back,
- .front {
- height: 100px;
- width: 100px;
- }
-
- .back,
- .front {
- position: absolute;
- backface-visibility: hidden;
- }
-
- .front {
- z-index: 2;
- background: transparent url('../img/question.png') no-repeat center center / contain;
- }
-
- .back {
- transform: rotateY(180deg);
- background-color: #000;
- background-size: contain;
- background-repeat: no-repeat;
- background-position: center center;
- }
-
- .selected {
- transform: rotateY(180deg);
- }
-
- .match .front {
- background: #000 !important;
- }
-
- a, a:visited {
- width: 100%;
- display: block;
- text-align: center;
- margin: 3rem 0rem;
- color: #fff;
- text-decoration: none;
- font-family: Arial, Helvetica, sans-serif;
- }
+ body {
+ font-family: "Roboto", sans-serif;
+ line-height: 1.6;
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 20px;
+ background-color: #f0f0f0;
+ color: #333;
+ }
+ h1,
+ h2,
+ h3 {
+ margin-top: 1.5em;
+ }
+ a {
+ color: #0066cc;
+ text-decoration: none;
+ background-image: linear-gradient(currentColor, currentColor);
+ background-position: 0% 100%;
+ background-repeat: no-repeat;
+ background-size: 0% 2px;
+ transition: background-size 0.3s;
+ }
+ a:hover,
+ a:focus {
+ background-size: 100% 2px;
+ }
+ iframe {
+ width: 300px;
+ height: 300px;
+ border-radius: 15px;
+ box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+ padding: 20px;
+ display: inline-block;
+ }
+ code {
+ background: rgba(224, 224, 224);
+ padding: 3px;
+ }
index.html
Changed around line 1
+
+
+
-
+
index.html
Changed around line 1
-
+
hello
index.scroll
Changed around line 1
+
+ hello
index.html
Changed around line 1
+
index.html
style.css
Changed around line 1
+ body {
+ margin: 20px 0;
+ background: #000;
+ }
+
+ .grid {
+ max-width: 500px;
+ margin: 0 auto;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-evenly;
+ }
+
+ .card {
+ position: relative;
+ transition: all .4s linear;
+ transform-style: preserve-3d;
+ margin: 5px;
+ border-radius: 50px;
+ }
+
+ .card,
+ .back,
+ .front {
+ height: 100px;
+ width: 100px;
+ }
+
+ .back,
+ .front {
+ position: absolute;
+ backface-visibility: hidden;
+ }
+
+ .front {
+ z-index: 2;
+ background: transparent url('../img/question.png') no-repeat center center / contain;
+ }
+
+ .back {
+ transform: rotateY(180deg);
+ background-color: #000;
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center center;
+ }
+
+ .selected {
+ transform: rotateY(180deg);
+ }
+
+ .match .front {
+ background: #000 !important;
+ }
+
+ a, a:visited {
+ width: 100%;
+ display: block;
+ text-align: center;
+ margin: 3rem 0rem;
+ color: #fff;
+ text-decoration: none;
+ font-family: Arial, Helvetica, sans-serif;
+ }
style.css
roboto.css
Changed around line 1
+ body {
+ margin: 20px 0;
+ background: #000;
+ }
+
+ .grid {
+ max-width: 500px;
+ margin: 0 auto;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-evenly;
+ }
+
+ .card {
+ position: relative;
+ transition: all .4s linear;
+ transform-style: preserve-3d;
+ margin: 5px;
+ border-radius: 50px;
+ }
+
+ .card,
+ .back,
+ .front {
+ height: 100px;
+ width: 100px;
+ }
+
+ .back,
+ .front {
+ position: absolute;
+ backface-visibility: hidden;
+ }
+
+ .front {
+ z-index: 2;
+ background: transparent url('../img/question.png') no-repeat center center / contain;
+ }
+
+ .back {
+ transform: rotateY(180deg);
+ background-color: #000;
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center center;
+ }
+
+ .selected {
+ transform: rotateY(180deg);
+ }
+
+ .match .front {
+ background: #000 !important;
+ }
+
+ a, a:visited {
+ width: 100%;
+ display: block;
+ text-align: center;
+ margin: 3rem 0rem;
+ color: #fff;
+ text-decoration: none;
+ font-family: Arial, Helvetica, sans-serif;
+ }
index.scroll
Changed around line 1
-
- Hello World my name is
index.html
index.scroll
Changed around line 1
+ buildHtml
+
+ theme roboto
+
+ Hello World my name is