start

index.html

@@ -15,9 +15,9 @@ <h3>Your score is:</h3>
     </div>
 
     <div class="img-container">
-      <img src="./assets/img/cookie.png" alt="Click me!" />
+      <img  onclick="increase()" src="./assets/img/cookie (1).png" alt="Click me!" />
     </div>
 
-    <script src="./script.js"></script>
+    <script src="./scripts.js"></script>
   </body>
-</html>
+</html>

scripts.js

@@ -0,0 +1,6 @@
+let score = 0;
+let scoreHTML = document.getElementById("score");
+function increase(){
+    score=score+1
+    scoreHTML.innerHTML=score;
+}

styel.css

@@ -0,0 +1,62 @@
+
+
+* {
+    margin: 0;
+    padding: 0;
+  }
+
+  body {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    font-family: "Handjet", cursive;
+    background: rgb(181, 149, 116);
+    background: linear-gradient(
+      288deg,
+      rgba(181, 149, 116, 1) 0%,
+      rgba(255, 223, 190, 1) 100%
+    );
+    background-position: center center;
+    background-size: cover;
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+  }
+
+  .score-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+  }
+
+  h1 {
+    font-size: 60px;
+  }
+
+  h3 {
+    font-size: 40px;
+    margin: 10px;
+  }
+
+  p {
+    font-size: 40px;
+    margin: 10px;
+  }
+
+  .img-container {
+    width: 512px;
+    height: 512px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  img:active {
+    width: 480px;
+    height: 480px;
+  }
+
+  img:hover {
+    cursor: pointer;
+  }