using xsd, Create a number guessing game You would need an input box and buttons Ask...

using xsd, Create a number guessing game

You would need an input box and buttons

Ask the user for a number

Produce a random number from 1-50

Do the comparison

a. Make sure to provide hints back to the user if the number enter is low or high

-this element should be automatically added

b. Clear the value enter in the text

c. Give them 3 tries

Whether the user wins or loses, display all the guesses along with the actual number with

congrats or try again message

-after the message, allow them to play again

Solutions

Expert Solution

<!DOCTYPE html>
<html>
<head>
    <title>Guess The Number</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="script.js"></script>
</head>
<body class="text-center">
    <nav class="navbar navbar-dark bg-dark">
        <!-- Navbar content -->
        <a class="navbar-brand" href="#">Guess The Number</a>
    </nav>
    <main>
        <h1 class="banner p-3">Can u guess the number that computer has selected?</h1>
        <div class="form-group ">
            <input id="number-guess" class="form-control form-control-lg" type="number" placeholder="What's your guess?">
        </div>
        <div id="result">
            <!-- This is where the result will be-->
        </div>
        <button type="button" id="number-submit" class="btn btn-lg btn-secondary">Check Me</button>
        <button type="button" id="restart-game" class="btn btn-lg btn-light">Restart</button>
        <div id="history">
            <!-- This is where the guess history will be-->
        </div>
    </main>
</body>
</html>

style.css

#number-guess, #result, #history {
    max-width: 400px;
    margin: 0 auto;
}

#history {
    margin-top: 16px;
}
  
.banner {
    color:#070d4f;
    font-size: 30px;
    font-family: sans-serif;
}

script.js

/**
 * Guess The Number Game
 */

// Variable to store the list of guesses
let guesses;
// Variable for store the correct random number
let correctNumber;

window.onload = function () {
  initGame();
  document.getElementById("number-submit").addEventListener("click", playGame);
  document.getElementById("restart-game").addEventListener("click", initGame);
};

function playGame() {
  let numberGuess = document.getElementById("number-guess").value;
  saveGuessHistory(numberGuess);
  displayHistory();
  displayResult(numberGuess);
}

// Initialize a new game by resetting all values and content on the page
function initGame() {
  correctNumber = getRandomNumber();
  guesses = [];
  displayHistory();
  resetResultContent();
}

// Reset the results list display
function resetResultContent() {
  document.getElementById("result").innerHTML = "";
}

// Return random number between 1 and 100
function getRandomNumber() {
  /**
   * Math.random returns a number between 0 and 1,
   * and that's why we multiply it by 50
   */
  return Math.floor(Math.random() * 50 + 1);
}

// Save the user guess entered from the input
function saveGuessHistory(guess) {
  guesses.push(guess);
}

// Display history in HTML
function displayHistory() {
  let index = guesses.length - 1;
  let list = "<ul class='list-group'>";
  while (index >= 0) {
    list +=
      "<li class='list-group-item'>" +
      "You guessed " +
      guesses[index] +
      "</li>";
    index -= 1;
  }
  list += "</ul>";
  document.getElementById("history").innerHTML = list;
}

// Display the result in HTML
function displayResult(numberGuess) {
  if (numberGuess > correctNumber) {
    showNumberAbove();
  } else if (numberGuess < correctNumber) {
    showNumberBelow();
  } else {
    showYouWon();
  }
}

// Retrieve the dialog based on if the guess is wrong or correct
function getDialog(dialogType, text) {
  let dialog;
  switch (dialogType) {
    case "warning":
      dialog = "<div class='alert alert-warning' role='alert'>";
      break;
    case "won":
      dialog = "<div class='alert alert-success' role='alert'>";
      break;
  }
  dialog += text;
  dialog += "</div>";
  return dialog;
}

function showYouWon() {
  const text = "Awesome job, you got it!";
  let dialog = getDialog("won", text);
  document.getElementById("result").innerHTML = dialog;
}

function showNumberAbove() {
  const text = "Your guess is too high!";
  let dialog = getDialog("warning", text);
  document.getElementById("result").innerHTML = dialog;
}

function showNumberBelow() {
  const text = "Your guess is too low!";
  let dialog = getDialog("warning", text);
  document.getElementById("result").innerHTML = dialog;
}

venereology answered 1 year ago

Next > < Previous

Related Solutions

using xml, Create a number guessing game You would need an input box and buttons Ask...

using xml, Create a number guessing game You would need an input box and buttons Ask the user for a number Produce a random number from 1-50 Do the comparison a. Make sure to provide hints back to the user if the number enter is low or high -this element should be automatically added b. Clear the value enter in the text c. Give them 3 tries Whether the user wins or loses, display all the...

guessing game in Java. It will have a guess input used for guessing the random number...

guessing game in Java. It will have a guess input used for guessing the random number that is generated from 1 - 100. When the user makes a guess it will tell them if the number is lower or higher than the guess. There is also a choice to give up which then reveals the correct number. The last choice will be new game which resets the random number. Last, the program should keep counts of tries. When the user...

1. [100] Create a C program for a number guessing game. Here are the requirements: a....

1. [100] Create a C program for a number guessing game. Here are the requirements: a. Your program generates a random number between -100 and 100 and keeps asking the user to guess the number until the user guesses it correctly. Your random number generator should be implemented as a C function which takes min and max values as input parameters and returns a random number between those values including the min and the max. b. If the user guesses...

Part1. Create a number guessing game in Python. Randomly generate a number from 1 to 10....

Part1. Create a number guessing game in Python. Randomly generate a number from 1 to 10. Have the user guess the number. If it is too high, tell the user to guess lower - it it is too low, tell the user to guess higher. Continue until she guesses the correct number. - Part 2. Allow the user to play a new game after they have guessed correctly. Part 3. Ask for a different name and keep track of how...

Project 5-3: Guessing Game Create an application that lets a user guess a number between 1...

Project 5-3: Guessing Game Create an application that lets a user guess a number between 1 and 100. Console Welcome to the Guess the Number Game ++++++++++++++++++++++++++++++++++++ I'm thinking of a number from 1 to 100. Try to guess it. Enter number: 50 You got it in 1 tries. Great work! You are a mathematical wizard. Try again? (y/n): y I'm thinking of a number from 1 to 100. Try to guess it. Enter number: 50 Way too high! Guess...

Part (a) Write a number guessing game using System.Collections.Generic.Dictionary. Generate 10 distinct random numbers in the...

Part (a) Write a number guessing game using System.Collections.Generic.Dictionary. Generate 10 distinct random numbers in the range of 1 to 20. Each random number is associated with a prize money (from 1 to 10000). Use a Dictionary to store the mapping between the random number and the prize money. Ask user for two distinct numbers, a and b, both from 1 to 20; if a and b are not distinct, or out of range, quit the program Lookup the prize...

Please Use JavaScript and HTML 5) Number guesser (easier) Create a number guessing name, using an...

Please Use JavaScript and HTML 5) Number guesser (easier) Create a number guessing name, using an input and a button to gather a number. The number to be guessed should be a hard-coded whole number between 1 and 20. Tell the user if the number is too high, equal to, or too low than a number you have hard-coded in your application. Remove the text in the input when the user clicks the button.

Number guessing Game (20 Marks) Write a C program that implements the “guess my number” game....

Number guessing Game Write a C program that implements the “guess my number” game. The computer chooses a random number using the following random generator function srand(time(NULL)); int r = rand() % 100 + 1; that creates a random number between 1 and 100 and puts it in the variable r. (Note that you have to include <time.h>) Then it asks the user to make a guess. Each time the user makes a guess, the program tells the user if...

Create a simple shopping cart application. Ask the user to input an item number and quantity....

Create a simple shopping cart application. Ask the user to input an item number and quantity. Update the shopping cart. Display the updated cart. Include the following when displaying cart: item number, name, quantity and total price. Ask for another update or end the program. Design Requires 2 classes: the main class and the cartItem class In the main class: Need one array named cartArray of type cartItem. Size = ? Need a loop that asks the user for input....

I need to write PYTHON program which is like a guessing game using randint function which...

I need to write PYTHON program which is like a guessing game using randint function which is already done, the user has to guess a number between 1 and 1000 and the game musn't end until you guess the number, if you input a smaller number you must get hints, the same goes if your input is bigger than the wining number , also you must get notified if you repeat a number (example, you pick 1 and in the...

Subjects