update js slids and css font, background

Mohadese-Keshtkar · Oct 12, 2023 · dcb44d6 · dcb44d6
1 parent 3265d5b
commit dcb44d6
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 22 deletions.
diff --git a/index.html b/index.html
@@ -1,21 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <link rel="stylesheet" href="style.css">
 </head>
+
 <body>
-
-<div class="container">
-    <div class="emoji" id="emoji">💜;</div>
-    <p class="mood" id="mood">Heart</p>
-    <input type="range" min="0" max="100" value="10"
-    class="emoji-slider" id="range">
-</div>
+
+    <div class="container">
+        <div class="emoji" id="emoji">🥰;</div>
+        <p class="mood" id="mood">Heart</p>
+        <input type="range" min="0" max="100" value="10" class="emoji-slider" id="range">
+    </div>
 
 
     <script src="script.js"></script>
 </body>
+
 </html>
diff --git a/script.js b/script.js
@@ -5,32 +5,32 @@ var sliderValue = document.getElementById('range');
 sliderValue.oninput = function () {
     var value = this.value;
     if (value <= 0) {
-        emoji.innerHTML = '💜';
-        mood.innerHTML = 'Heart';
+        emoji.innerHTML = '🥰';
+        mood.innerHTML = 'Lovely';
     }
 
     else if (value <= 20) {
-        emoji.innerHTML = '🍇';
-        mood.innerHTML = 'Grape';
+        emoji.innerHTML = '😭';
+        mood.innerHTML = 'Cry';
     }
 
     else if (value <= 40) {
-        emoji.innerHTML = '🔮';
-        mood.innerHTML = 'Orb';
+        emoji.innerHTML = '🥲';
+        mood.innerHTML = 'Fear';
     }
 
     else if (value <= 60) {
-        emoji.innerHTML = '👾';
-        mood.innerHTML = 'Alien Monster';
+        emoji.innerHTML = '🥳';
+        mood.innerHTML = 'Happy';
     }
 
     else if (value <= 80) {
-        emoji.innerHTML = '🍆';
-        mood.innerHTML = 'Eggplant';
+        emoji.innerHTML = '🥺';
+        mood.innerHTML = 'Oppressed';
     }
 
     else if (value <= 100) {
-        emoji.innerHTML = '💁‍♀️';
+        emoji.innerHTML = '💜';
         mood.innerHTML = 'Thanks for watching';
     }
 

diff --git a/style.css b/style.css
@@ -1,7 +1,12 @@
-* {
+@font-face {
+    font-family: pop;
+    src: url(Poppins/Poppins-Medium.ttf);
+}
+
+body {
 
     font-weight: 600;
-    font-family: 'Poppins', 'Segoe UI', Tahoma, Verdana, sans-serif;
+    font-family: pop;
 }
 
 p {
@@ -11,7 +16,7 @@ p {
 body {
     margin: 0;
     padding: 0;
-    background: linear-gradient(90deg, rgb(210, 0, 252) 0%, rgba(101, 9, 121, 1) 51%, rgba(158, 0, 255, 1) 100%);
+    background: linear-gradient(to top, rgb(155, 122, 201) 0%, #89c2c8 100%);
     display: flex;
     justify-content: center;
     min-height: 100vh;
@@ -24,7 +29,6 @@ body {
     border-radius: 10px;
     padding: 30px;
     background-color: rgb(0, 0, 0);
-    box-shadow: 0px 0px 10px 1px #363636;
 }
 
 .emoji {