Ayush7614 · heyimShivam · May 26, 2022 · May 26, 2022
diff --git a/memoryPairGame/index.css b/memoryPairGame/index.css
@@ -0,0 +1,74 @@
+#title{
+    text-transform: capitalize;
+    color:gray;
+}
+.title{
+    text-transform: capitalize;
+    color:gray;
+}
+.btn-yellow{
+    background-color: yellow;
+}
+.btn-green{
+    background-color: green;
+}
+.btn-blue{
+    background-color: blue;
+}
+.btn-red{
+    background-color:red;
+}
+.btnk{
+    display: block;
+    padding: 60px 90px;
+    border: 3px solid black;
+    border-radius: 15px;
+}
+.kt{
+    float: right;
+}
+
+
+
+@media only screen and (max-width:403px) {
+    .btnk{
+        padding: 50px 40px;
+    }
+    #score{
+        padding: 10px 10px;
+        font-size: 25px;
+    }
+}
+
+
+.btnsw-yellow{
+    background-color: rgba(255, 255, 0, 0.7);
+    border: 10px solid rgba(0, 0, 0, 0.616);
+}
+.btnsw-green{
+    background-color: rgba(0, 128, 0, 0.7);
+    border: 10px solid rgba(0, 0, 0, 0.616);
+}
+.btnsw-blue{
+    background-color: rgba(0, 0, 255, 0.7);
+    border: 10px solid rgba(0, 0, 0, 0.616);
+}
+.btnsw-red{
+    background-color:rgba(255, 0, 0, 0.7);
+    border: 10px solid rgba(0, 0, 0, 0.616);
+}
+
+.pressed {
+    box-shadow: 0 0 20px white;
+    background-color: grey;
+  }
+
+
+  #score{
+    display: block;
+    color:gold;
+    padding: 24px 30px;
+    background: #333;
+    border: 2px solid yellow;
+    border-radius: 15px;
+}
diff --git a/memoryPairGame/index.html b/memoryPairGame/index.html
@@ -0,0 +1,68 @@
+<html>
+
+<head>
+  <title>Game</title>
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
+    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+  <link rel="stylesheet" href=index.css>
+</head>
+
+<body>
+
+  <div class="container">
+    <div class="row my-3">
+      <div class="col d-flex justify-content-center">
+        <h1 id="title">Press <span class="badge badge-secondary" id="s">S</span> To Start The Game</h1>
+
+      </div>
+    </div>
+    <hr>
+    <div class="containe my-4">
+      <div class="row my">
+        <div class="col-6 "><a class=" btnk btn-blue  " id="blue" style="float: right;"></a></div>
+        <div class="col-xm-6"><a class="btnk btn-red" id="red"></a></div>
+      </div>
+      <br>
+      <div class="row ">
+        <div class="col-6"><a class="btnk btn-yellow " id="yellow" style="float: right;"></a></div>
+        <div class="col-xs-6"><a class="btnk btn-green" id="green"></a></div>
+      </div>
+
+    </div>
+    <div class="show ">
+      <div class="row d-flex justify-content-center">
+        <h2 id="score">Your Highest Score is</h2>
+      </div>
+    </div>
+  </div>
+
+  <div class="container">
+    <div class="row">
+      <div class="col">
+        <div class="alert alert-warning alert-dismissible fade show" role="alert" id="alert">
+          <strong>Rules !! </strong>Press S To Start. (Remember order of color given by system)
+          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <hr>
+
+  <div class="container">
+    <div class="row">
+      <div class="col d-flex justify-content-center">
+        Made By <b style="padding-left:5px; padding-right:5px;"> Shivam Chaudhary </b>For any Error Contact<a
+          href="instagram.com/hey.imshivam" style="padding-left:5px; padding-right:5px;"> Me</a>
+      </div>
+    </div>
+  </div>
+  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+  <script src="index.js"></script>
+</body>
+
+</html>
diff --git a/memoryPairGame/index.js b/memoryPairGame/index.js
@@ -0,0 +1,129 @@
+var color = ["blue", "red", "yellow", "green"];
+var userEntery = [];
+var random = [];
+var started = false;
+var level = 0;
+
+if (localStorage.getItem("score") == undefined) {
+    $("#score").css("display", "none");
+} else {
+    $("#score").css("display", "block");
+    $("#score").text(`Your Highest Score is ${localStorage.getItem('score')}`);
+}
+
+
+function update() {
+    if (started) {
+        $("h1").html(`Round  <span class="badge badge-primary" style="color:white">${level}</span>`);
+        $("h1").attr("class", "text-primary")
+        $("#alert").html(`<strong>Press !! </strong>all ${level} colours in order`);
+
+    }
+    else {
+        if (level == 0) { $("h1").html(`Press <span class="badge badge-secondary">S</span> To Start The Game`); }
+        $("#alert").html("<strong>Rules !! </strong>Press S To Start Game (Remember order of color given by system)");
+        $("h1").attr("class", "title")
+    }
+
+}
+$(document).keypress(function (event) {
+    if (!started) {
+        if (event.key == "s" || event.key == "S") {
+        }
+        started = true;
+        $("#score").css("display", "none");
+        gen();
+    }
+})
+
+$("#s").click(()=>{
+    if (!started) {
+        if (event.key == "s" || event.key == "S") {
+        }
+        started = true;
+        $("#score").css("display", "none");
+        gen();
+    }
+})
+
+
+function gen() {
+    userEntery = [];
+    let temp = 0;
+    level = level + 1;
+    update();
+    temp = Math.floor(Math.random() * (4 - 0) + 0);
+    random.push(color[temp]);
+    console.log(`${color[temp]}`)
+    $(`#${color[temp]}`).attr("class", `btnk btnsw-${color[temp]}`);
+    setTimeout(() => { $(`#${color[temp]}`).attr("class", `btnk btn-${color[temp]}`); }, 600);
+}
+
+
+$(".btnk").click(function () {
+    let userInputColor = $(this).attr("id");
+    userEntery.push(userInputColor);
+    $(this).attr("class", "btnk btn-${userInputColor} pressed");
+    setTimeout(() => { $(this).attr("class", `btnk btn-${userInputColor}`); }, 300);
+    soundplay(userInputColor);
+    checkAnswer(userEntery.length - 1);
+
+})
+
+function checkAnswer(currentlevel) {
+    if (userEntery[currentlevel] == random[currentlevel]) {
+        if (random.length - 1 == currentlevel) {
+            setTimeout(gen,300);
+
+        }
+    } else {
+
+        soundplay("wrong");
+        $("body").css("background-color", "red");
+        setTimeout(function () { $("body").css("background-color", "white"); }, 300);
+        recordt();
+        random = [];
+        level = 0;
+        userEntery = [];
+        started = false;
+        update();
+    }
+}
+
+
+function soundplay(userInputColor) {
+    var audio = new Audio("sounds/" + userInputColor + ".mp3");
+    audio.play();
+}
+
+function recordt() {
+
+    let prev = localStorage.getItem("score");
+    if (prev == undefined) {
+
+        $("#score").text(`Your Score is ${level}`);
+        $("#score").css("display", "block");
+        setTimeout(() => { $("#score").css("display", "none"); }, 5000);
+        localStorage.setItem("score", level);
+    }
+    if (level <= prev) {
+
+       if(level==0){
+        $("#score").html(`Press S To Start The Game First`);
+        $("#score").css("display", "block");
+        setTimeout(() => { $("#score").css("display", "none"); }, 5000);
+       }else{
+        $("#score").html(`Your Score is ${level} keep trying<br>Highest Score ${prev}`);
+        $("#score").css("display", "block");
+        setTimeout(() => { $("#score").css("display", "none"); }, 5000);
+       }
+
+    } else {
+
+        $("#score").text(`Your Score Highest Score is ${level}`);
+        $("#score").css("display", "block");
+        setTimeout(() => { $("#score").css("display", "none"); }, 5000);
+        localStorage.setItem("score", level);
+    }
+
+}
diff --git a/memoryPairGame/readme.md b/memoryPairGame/readme.md
@@ -0,0 +1,3 @@
+Just press S to start the game
+
+copy/Paste the code in your website for implementing the same
diff --git a/memoryPairGame/sounds/blue.mp3 b/memoryPairGame/sounds/blue.mp3
diff --git a/memoryPairGame/sounds/green.mp3 b/memoryPairGame/sounds/green.mp3
diff --git a/memoryPairGame/sounds/red.mp3 b/memoryPairGame/sounds/red.mp3
diff --git a/memoryPairGame/sounds/wrong.mp3 b/memoryPairGame/sounds/wrong.mp3
diff --git a/memoryPairGame/sounds/yellow.mp3 b/memoryPairGame/sounds/yellow.mp3
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		Just press S to start the game

		copy/Paste the code in your website for implementing the same