DEMO: Hi-Lo Game by @AnthonyK - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

<canvas>Tag per disegnare grafica dinamica su pagine web.
Inserisce un commento nel codice
autofocusAttiva un elemento al caricamento della pagina.
idIdentifica univocamente un elemento HTML
<label>Mostrare un testo di etichetta per un elemento di input.
<link>Collega il documento corrente con una risorsa esterna

Users

Log in to search for users

Explore

Find inspiration

ximena sanchez JavaScript animati

Heads Or Tails Tally. pre ai

Curriculum html

Mare Luxus - Yachts di Lusso, Navi

Esercitazione 1

Congettura di Collatz

riepilogativo 2

vendita ebay(2)

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DEMO: Hi-Lo Game</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
</head>

<body>

    <div class="container game-container">
        <div class="card game-card">
            <h3 class="text-center">Hi-Lo Game</h3>
            <p class="text-center">Guess a number between 1 and 25</p>
            <div class="mb-3 text-center">
                <input type="number" id="guessInput" class="form-control d-inline-block" placeholder="Enter #" min="1"
                    max="25">
                <button id="submitBtn" class="btn btn-primary">Submit Guess</button>
          
            </div>
            <div class="text-center mt-3">
                <p id="message"></p>
                <p>Number of guesses: <span id="guessCount">0</span></p>
            </div>
            <button id="resetBtn" class="btn btn-secondary d-block mx-auto mt-3">Reset Game</button>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="script.js"></script>

</body>

</html>

 body {
	 background-color: black;
	 height: 100vh;
}

.game-container {
	max-width: 500px;
	margin: auto;
	padding-top: 100px;
}

.game-card {
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.form-control {
	width: 100px;
}

h3 {
	font-size: 36px;
}

// TARGETS HTML ELEMENTS
function el(t) {
	return document.querySelector(t);
}

// GENERATES RANDOM NUMBER BETWEEN 1 AND 25
function getRandomNumber() {
	return Math.floor(Math.random() * 25) + 1;
}


var resetguess=0;
var userGuess=0;
var cpuGuess= getRandomNumber();

el('#submitBtn').addEventListener('click', function() {
var guess = parseInt(document.querySelector("#guessInput").value);
console.log(cpuGuess);
if(guess === cpuGuess){
document.querySelector("#message").innerHTML="Congrats!";
} else if (guess > cpuGuess){
userGuess++;
  alert("too High");
} else if (guess < cpuGuess) {
userGuess++;
  alert("too low");
}
document.querySelector("#guessCount").innerHTML=userGuess;
console.log(guess);

});

// RESET BUTTON - END OF ASSIGNMENT
el('#resetBtn').addEventListener('click', function() {
document.querySelector("#resetBtn").value=0;
document.querySelector("#message").innerHTML="";
document.querySelector("#guessCount").innerHTML=resetguess;
document.querySelector("#guessInput").value=0;
userGuess=0;
});