Add files via upload

guess-the-number.css

@@ -0,0 +1,144 @@
+@font-face {
+    font-family: ocr-a;
+    src: url(ocr-a-regular.ttf);
+}
+
+*{
+    letter-spacing: 0.25vw;
+    line-height: 2.2vw;
+}
+
+body{
+    margin: 0%;
+    padding: 0%;
+    border: 0%;
+    background-color: black;
+}
+
+.header{
+    margin-top: 6vh;
+    width: 102vw;
+}
+.playAgain{
+    position: absolute;
+    border: 0vw;
+    margin: 72vh 43.8vw;
+    padding: 0.5vw;
+    width: 12vw;
+    border-width: 0.2vw;
+    font-family: ocr-a;
+    text-align: center;
+    background-color:#EF4423;
+    cursor:pointer;
+}
+.hint{
+    position: absolute;
+    font-family:'Segoe UI';
+    font-style: italic;
+    display: flex;
+    justify-content:space-around;
+    align-items: center;
+    height: 0vh;
+    margin: -5vw 0vw;
+    padding: 2vh 0vw;
+    width: 100vw;
+    color: #000;
+    background-color: #FF9526
+}
+
+.middleSec{
+    display: block;
+    margin-top: 5vw;
+    height: 8vw;
+}
+.gameTitle{
+    margin-left: 35vw;
+    width: 30vw;
+    line-height: 5vw;
+    font-family: ocr-a;
+    font-size: 5vw;
+    color: white;
+    text-align: center;
+}
+.reveal{
+    margin-top: 4vw;
+    margin-left: 46vw;
+    height: 2vw;
+    width: 5vw;
+    padding: 1.5vw;
+    font-family: ocr-a;
+    text-align: center;
+    font-size: 4.5vw;
+    color: black;
+    border-radius: 0.3vw;
+    background-color: whitesmoke;
+}
+.line{
+    margin-top: -2.5vw;
+    height: 0.5vw;
+    border: 0vw;
+    background-color: aliceblue;
+}
+
+.bottomSec{
+    margin-top: 16vw;
+    padding-left: 23vw;
+    margin-left: 40VW;
+    font-family:'Segoe UI';
+    font-size: 1.5vw;
+    color: white;
+}
+.guess{
+    resize: none;
+    margin-left: -30.8vw;
+    height: 3vw;
+    width: 6vw;
+    font-family: ocr-a;
+    font-size: 2vw;
+    text-align: center;
+    color: black;
+    border-width: 0vw;
+    border-block-color: transparent;
+    border-bottom: solid #FF9526;
+    background-color:white;
+    outline: none;
+    cursor:auto;
+}
+.check{
+    resize: none;
+    display: block;
+    margin-top: 0.2vw;
+    margin-left: -30.9vw;
+    height: 2.3vw;
+    width: 6.45vw;
+    font-size: 1vw;
+    font-weight: 600;
+    cursor: pointer;
+    color: black;
+    border: none;
+    outline: none;
+    background-color: #FF9526;
+}
+.status{
+    display: block;
+    margin-top: -10vw;
+}
+.score{
+    margin-top: 3vw;
+}
+.scoreVal{
+    margin-top: -4.4vw;
+    margin-left: 8.5vw;
+}
+.highScoreVal{
+    margin-top: 0vw;
+    margin-left: 16.3vw;
+}
+
+/*
+#4FAF44 
+#F6EB14
+#FF9526
+#EF4423
+#2A3492
+*/

guess-the-number.js

@@ -0,0 +1,80 @@
+'use strict';
+//Declaring Global values
+//generates a random number form 1 to 6.
+let secretNum = Math.trunc(Math.random() * 6) + 1;
+//to maintain score and high score.
+let score = 10;
+let highScore = 0;
+
+//Sets 0 as by default value for input field.
+document.querySelector('.guess').value = 0;
+
+//Function to reverse the Game Winning effects.
+const gotoStart = function(){
+    changeTextContent('.status', 'Start Guessing...');
+    changeBg('.line','#FFFFFF');
+    changeBg('.reveal','#FFFFFF');
+    changeColor('.status','#FFFFFF');
+    changeColor('.reveal','#000000');
+    document.querySelector('.reveal').textContent='?';
+    changeTextContent('.scoreVal', score);
+}
+//This function replaces the value of element's text with message.
+const changeTextContent = function(el, message){
+    document.querySelector(el).textContent = message;
+}
+//This function changes the BG colour of an element.
+const changeBg = function(el, colour){
+    document.querySelector(el).style.backgroundColor = colour;
+}
+//This function changes the colour of element's text.
+const changeColor = function(el, colour){
+    document.querySelector(el).style.color = colour;
+}
+
+//Setting On-Click event for Play Again Button.
+document.querySelector('.playAgain').addEventListener('click', function(){
+    score = 10;
+    secretNum = Math.trunc(Math.random() * 6) + 1;
+    document.querySelector('.guess').value = "0";
+    gotoStart();
+});
+//Setting On-Click event for Check Button to check guess.
+document.querySelector('.check').addEventListener('click', function(){
+    const guess = document.querySelector('.guess').value;
+    if(guess == ''){changeTextContent('.status', 'Please Enter a number.')}
+    else{
+    //checking if number is between 1 to 6.
+    if(guess < 1 || guess > 6) {
+        gotoStart(); 
+        changeTextContent('.status', 'The Number is between 1 to 6.')
+    }
+    else{
+            //Winning Condition
+            if(secretNum == guess){
+                    changeTextContent('.status', 'Correct Number!!🎊🎊');
+                    changeBg('.line','#4FAF44');
+                    changeBg('.reveal','#4FAF44');
+                    changeColor('.status','#4FAF44');
+                    changeColor('.reveal','#FFFFFF');
+                    changeTextContent('.reveal', guess);
+                    if( score > highScore){
+                    highScore = score;
+                    changeTextContent('.highScoreVal', highScore);
+                    }
+            }
+            //Reducing Score as guess was high.
+            else if(guess > secretNum && score>0){
+                    score--;
+                    gotoStart();
+                    changeTextContent('.status', 'Too High');
+            }
+            //Reducing Score as guess was low.
+            else if(score>0){ 
+                    score--;
+                    gotoStart();
+                    changeTextContent('.status', 'Too Low');
+            };
+        };
+    };
+});

index.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Guess My Number - GAME</title>
+    <link rel="stylesheet" href="guess-the-number.css">
+</head>
+
+<body>
+    <main>
+        <section class="header">
+            <div><button type="button" class="playAgain"><b>Play Again</b></button></div>
+            <div class="hint"><b>*Hint: The number is between 1 to 6.</b></div>
+        </section>
+
+        <section class="middleSec">
+            <div class="gameTitle">Guess My Number!</div>
+            <div class="reveal">?</div>
+            <hr class="line">
+        </section>
+
+        <section class="bottomSec">
+            <input type="number" class="guess">
+            <button class="check">CHECK</button>
+            <div class="status">Start Guessing...</div>
+            <div class="score">💯 Score:</div>
+            <div class="highScores">🥇 Highest Score:</div>
+            <div class="scoreVal">10</div>
+            <div class="highScoreVal">--</div>
+        </section>
+        <script src="guess-the-number.js"></script>
+    </main>
+</body>
+
+</html>