fun mini game using html, css and js

kenma kozume

2037

this is not well designed game but its fun to play haha

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Ranchers&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <title>guess the number</title>
</head>
<body>
  <div class="header">  
    <h1>Guess the number game</h1>
    <p>You have to guess the random number between <b>1 - 100</b> you have only 10 guesses, <br> each wrong guess will tell you if the last guess was too low or too high.</p>
  </div>  
  <div class="form">
    <label for="guessField">Enter your guess:</label>
    <input type="text" placeholder="guess between 1 - 100" class="guessField">       
    <div class="resultParas">
      <p class="guesses"></p>
      <p class="lastResult"></p>
      <p class="lowOrHi"></p>
    </div>
  </div>
  <div class="buttons">
    <button class="resetGame">Start new game</button>
    <button class="guessSubmit">Submit</button>
  </div>
  
  <script src="index.js"></script>
</body>
</html>

Try it Yourself >>

 *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: lightgreen;
    font-family: 'Poppins';
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas: 
        "header header header"
        ". form ."
        ". buttons ."
        ". . .";
}

.header{
    grid-area: header;
}

h1 {
    font-family: 'Ranchers', cursive;
    letter-spacing: 9px;
    font-size: 6rem;
    text-align: center;
    margin-top: 20px;
}
p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.3rem;
    text-align: center;
    margin-top: 20px;
}
.form {
    grid-area: form;
    margin: 40px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}
.form label {
    font-family: 'Poppins';
    font-size: 1.1rem;
}
.form .guessField{
    font-size: 1.5rem;
    border-radius: 10px;
    border: none;
    height: 40px;
    text-align: center;
    width: 400px;
    font-family: 'Poppins';
}
.buttons {
    grid-area: buttons;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: start;
}
.buttons button{
    margin: 10px;
    font-family: 'Poppins';
    font-size: 1.1rem;
    height: 50px;
    width: 200px;
}
.buttons .resetGame{
    background: rgb(0, 255, 0);
    border: none;
    color: #555;
    transition: 0.5s;
}
.buttons .resetGame:hover{
    color: rgb(0, 255, 0);
    background: #555;
}
.buttons .guessSubmit{
    background: rgb(161, 171, 255);
    border: none;
    color: #555;
    transition: 0.5s;
}
.buttons .guessSubmit:hover{
    color: rgb(161, 171, 255);
    background: #555;
}

Try it Yourself >>

let randomNumber = Math.floor(Math.random() * 100) + 1;

const guesses = document.querySelector('.guesses');
const lastResult = document.querySelector('.lastResult');
const lowOrHi = document.querySelector('.lowOrHi');
const guessField = document.querySelector('.guessField');
const resetGame = document.querySelector('.resetGame');
const guessSubmit = document.querySelector('.guessSubmit');

let guessCount = 1;

guessSubmit.addEventListener('click', checkGuess);

guessField.focus();
function checkGuess() {
    let userGuess = Number(guessField.value);
        if (guessCount === 1) {
            guesses.textContent = 'Previous guesses: ';
        }
            guesses.textContent += userGuess + ' ';

        if (userGuess === randomNumber) {
            lastResult.textContent = 'Congratulation you got it!';
            lastResult.style.background = 'rgb(0, 255, 0)';
            lastResult.style.color = '#555'
            lastResult.style.fontSize = '30px';
            lastResult.style.width = '400px'
            lowOrHi.textContent = '';
            //set game over
            setGameOver();
        } else if (guessCount === 10) {
            lastResult.textContent = '!!GAME OVER!!';
            lowOrHi.textContent = 'better luck next time'
            //set game over
            setGameOver();
        } else {
            lastResult.textContent = 'Wrong!!';
            lastResult.style.color = '#fff'
            lastResult.style.width = '400px'
            lastResult.style.background = 'red'
            lastResult.style.fontSize = '30px';
        if (userGuess < randomNumber) {
            lowOrHi.textContent = 'the last guess was too low';
        } else if (userGuess > randomNumber) {
            lowOrHi.textContent = 'the last guess was too high';
        }
    }
    guessCount++;
    guessField.value = '';
    guessField.focus();
}

function setGameOver() {
    guessField.disabled = true;
    guessSubmit.disabled = true;
}

resetGame.addEventListener('click', startNewGame);

function startNewGame() {
    guessCount = 1;

    let resultParas = document.querySelectorAll('.resultParas p');
    for (let i = 0; i < resultParas.length; i++) {
        resultParas[i].textContent = '';
    }

    guessField.disabled = false;
    guessSubmit.disabled = false;
    guessField.focus();
    randomNumber = Math.floor(Math.random() * 100) + 1;
}

Try it Yourself >>