Prodigy-InfoTech · Mayank8085 · Oct 14, 2023 · Oct 14, 2023 · Oct 17, 2023 · Oct 17, 2023
diff --git a/emojiGame/.DS_Store b/emojiGame/.DS_Store
diff --git a/emojiGame/angryface.png b/emojiGame/angryface.png
diff --git a/emojiGame/coke.png b/emojiGame/coke.png
diff --git a/emojiGame/coolface.png b/emojiGame/coolface.png
diff --git a/emojiGame/evilface.png b/emojiGame/evilface.png
diff --git a/emojiGame/feverface.png b/emojiGame/feverface.png
diff --git a/emojiGame/freezeface.png b/emojiGame/freezeface.png
diff --git a/emojiGame/index.html b/emojiGame/index.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Mind Game</title>
+    <!-- <link rel="icon" href="lco.png" sizes="16x16" type="image/png" /> -->
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <div class="gameContainer"> 
+      <div class="container">
+        <h1 class="text-center">CHECK YOUR MEMORIZING POWER </h1>
+        <div class="container bg-warning p-3">
+          <div class="container">
+            <h3 class="text-dark text-center p-2 msg"> Get Your Remark!!</h3>
+          </div>
+          <div class="row">
+            <div class="col-6"><button
+              type="button"
+              class="btn btn-danger btn-lg  mx-auto d-block sort-btn points"
+            >
+              Score Your Emoji
+            </button></div>
+            <div class="col-6">
+              <button
+          type="button"
+          class="btn btn-dark btn-lg  mx-auto d-block sort-btn again"
+        >
+          Play Again
+        </button>
+            </div>
+          </div>
+      </div>
+      </div>
+      <div class="card" data-image="evilface">
+        <img src="evilface.png" class="front " alt="evilface" />
+        <img src="mark.png" class="back" alt="lco" />
+      </div>
+      <div class="card" data-image="evilface">
+        <img src="evilface.png" class="front" alt="evilface" />
+        <img src="mark.png" class="back" alt="lco" />
+      </div>
+      <div class="card" data-image="angryface">
+        <img src="angryface.png" class="front" alt="angryface" />
+        <img src="mark.png" class="back" alt="lco" />
+      </div>
+      <div class="card" data-image="angryface">
+        <img src="angryface.png" class="front" alt="angryface" />
+        <img src="mark.png" class="back" alt="lco" />
+      </div>
+      <div class="card" data-image="coolface">
+        <img src="coolface.png" class="front" alt="coolface" />
+        <img src="mark.png" class="back" alt="lco" />
+      </div>
+      <div class="card" data-image="coolface">
+        <img src="coolface.png" class="front" alt="coolface" />
+        <img src="mark.png" class="back" alt="lco" />
+      </div>
+      <div class="card" data-image="feverface">
+        <img src="feverface.png" class="front" alt="feverface" />
+        <img src="mark.png" class="back" alt="feverface" />
+      </div>
+      <div class="card" data-image="feverface">
+        <img src="feverface.png" class="front" alt="feverface" />
+        <img src="mark.png" class="back" alt="feverface" />
+      </div>
+      <div class="card" data-image="vomitface">
+        <img src="vomitface.png" class="front" alt="vomitface" />
+        <img src="mark.png" class="back" alt="vomitface" />
+      </div>
+      <div class="card" data-image="vomitface">
+        <img src="vomitface.png" class="front" alt="vomitface" />
+        <img src="mark.png" class="back" alt="lco" />
+      </div>
+      <div class="card" data-image="sneezeface">
+        <img src="sneezeface.png" class="front" alt="sneezeface" />
+        <img src="mark.png" class="back" alt="lco" />
+      </div>
+      <div class="card" data-image="sneezeface">
+        <img src="sneezeface.png" class="front" alt="sneezeface" />
+        <img src="mark.png" class="back" alt="lco" />
+      </div>
+      <div class="card" data-image="mindblownface">
+        <img src="mindblownface.png" class="front" alt="mindblownface" />
+        <img src="mark.png" class="back" alt="lco" />
+      </div>
+      <div class="card" data-image="mindblownface">
+        <img src="mindblownface.png" class="front" alt="mindblownface" />
+        <img src="mark.png" class="back" alt="lco" />
+      </div>
+      <div class="card" data-image="thinkingface">
+        <img src="thinkingface.png" class="front" alt="thinkingface" />
+        <img src="mark.png" class="back" alt="lco" />
+      </div>
+      <div class="card" data-image="thinkingface">
+        <img src="thinkingface.png" class="front" alt="thinkingface" />
+        <img src="mark.png" class="back" alt="lco" />
+      </div>
+
+
+
+    </div>
+
+
+
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/emojiGame/index.js b/emojiGame/index.js
@@ -0,0 +1,93 @@
+const cards = document.querySelectorAll(".card");
+// console.log(cards);
+const score=document.querySelector(".points")
+const message=document.querySelector(".msg")
+const again=document.querySelector(".again")
+
+
+var points= 0;
+var msg;
+var final=0;
+//variables
+var isFlipped = false;
+var firstCard;
+var secondCard;
+
+cards.forEach((card) => card.addEventListener("click", flip));
+
+function flip() {
+  //   console.log("Card flipped");
+  // console.log(this);
+  this.classList.add("flip");
+  if (!isFlipped) {
+    isFlipped = true;
+    firstCard = this;
+  } else {
+    secondCard = this;
+    // console.log(firstCard);
+    // console.log(secondCard);
+
+    checkIt();
+  }
+}
+
+function checkIt() {
+  //   console.log("Checking...");
+  if (firstCard.dataset.image === secondCard.dataset.image) {
+    success();
+  } else {
+    fail();
+  }
+}
+
+function success() {
+  //   console.log("Success");
+  firstCard.removeEventListener("click", flip);
+  secondCard.removeEventListener("click", flip);
+  reset();
+  points+=15;
+  score.innerText=points+"Points";
+  msg="Good Going!! ";
+
+  final+=1;
+  if(final==8){
+    msg="You Won!!"
+  }
+  message.innerText=msg;
+}
+
+
+function fail() {
+  //   console.log("Failed");
+  setTimeout(() => {
+    firstCard.classList.remove("flip");
+    secondCard.classList.remove("flip");
+    reset();
+    points-=5;
+    msg= "better luck next time !!"
+  score.innerText=points+" Points";
+  message.innerText=msg;
+
+
+
+  }, 700);
+}
+
+function reset() {
+  isFlipped = false;
+  firstCard = null;
+  secondCard = null;
+}
+
+//TODO: shuffle
+
+(function shuffle() {
+  cards.forEach((card) => {
+    var index = Math.floor(Math.random() * 16);
+    card.style.order = index;
+  });
+})();
+
+again.addEventListener("click",()=>{
+  location.reload();
+})
diff --git a/emojiGame/lco.png b/emojiGame/lco.png
diff --git a/emojiGame/mark.png b/emojiGame/mark.png
diff --git a/emojiGame/mindblownface.png b/emojiGame/mindblownface.png
diff --git a/emojiGame/readme.md b/emojiGame/readme.md
@@ -0,0 +1,11 @@
+
+# Project Title
+
+This is simple project built using html css js .
+Its basically a memory based game of flipping the card and remember the images
+
+
+## 🔗 Links
+https://mayank8085.github.io/minijavascriptworld/emojiGame/index.html
+
+<img width="821" alt="image" src="https://github.com/Mayank8085/Web-Development-Projects/assets/57897376/df2f95d3-053a-4403-ad26-7f7ad0ea1ce7">
diff --git a/emojiGame/sneezeface.png b/emojiGame/sneezeface.png
diff --git a/emojiGame/styles.css b/emojiGame/styles.css
@@ -0,0 +1,57 @@
+* {
+	margin: 0 auto;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+body {
+	height: 100vh;
+	background-color: #6718a8;
+	color: whitesmoke;
+	display: flex;
+} 
+
+.gameContainer {
+	width: 600px;
+	height: 600px;
+	margin: auto;
+	display: flex;
+	flex-wrap: wrap;
+	perspective: 1000px;
+}
+
+.card {
+	width: 23%;
+	height: 23%;
+	margin: 5px;
+	position: relative;
+	transform-style: preserve-3d;
+	transition: transform 0.3s;
+	cursor: pointer;
+	background-color: transparent;
+}
+
+.card:active {
+	transform: scale(0.95);
+	transition: transform 0.2s ease-in-out;
+}
+
+.card.flip {
+	transform: rotateY(180deg);
+	cursor: pointer;
+}
+
+.back,
+.front {
+	background-color: #807f7f;
+	width: 100%;
+	height: 100%;
+	padding: 10px;
+	border-radius: 4px;
+	position: absolute;
+	backface-visibility: hidden;
+}
+
+.front {
+	transform: rotateY(180deg);
+}
diff --git a/emojiGame/thinkingface.png b/emojiGame/thinkingface.png
diff --git a/emojiGame/vomitface.png b/emojiGame/vomitface.png