- Implement HTML elements that use specific attributes to perform actions
- Implement CSS styling using
id=s andclass=es - Use Javascript to interact with your web page or the Docuement Object Model (DOM)
- Use HTML or DOM methods to edit, add, and delete elements on your webpage in real time.
- GET CREATIVE
Let's create a simple number guessing game. The computer will pick a random number between 1 and 100 and you will have to guess that number.
- The user should be able to guess a number until they guess the right number.
- The user should be able to input a number and click a button to submit the number.
- The webpage should inform the user to guess a higher number, guess a lower number, or tell the user they guessed the correct number.
- The webpage should list all guessed numbers the user guessed during the session.
Your number guessing game will consist of an HTML file, CSS file, and a Javascript file.
Your HTML file is already given to you with a <nav> element and a <h1> tag.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>TITLE</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Your link to your CSS file -->
<link rel="stylesheet" href="">
<!-- Your Javascript file goes here -->
<script src="" defer></script>
</head>
<body>
<!-- your HTML should go here -->
<nav>
<h1>Let's Play the Guessing Number Game!</h1>
</nav>
</body>
</html>Your Javascript file will automatically run when your HTML file loads in the web browser.
Here in your Javascript file you will write function(s) to that will manipulate your webpage and perform all the game logic.
console.log("HELLO PAPA PLATOON!")
// Your function(s) should go here that will interact with the webpage or DOMYour CSS file is basically empty at the moment. Once you complete the Javascript portion of the Challenge have fun and start designing a sleak looking Guessing Game app.
Remember, don't worry about styling to begin with.
Let's add our styles.css and app.js files to our index.html file:
<link rel="stylesheet" href="the path to your style.css file">
<script src="the path to your Javascript file" async defer></script>To open the index.html file in the browser by running the following command:
$ open index.html
As we add new elements and tags you can refresh your browser and it will reload your Guessing Game app and it will also automatically run your Javascript file and import your CSS styling.
To ensure our Javascript file has loaded with our HTML open up the Chrome Developer Tools and click on the "Console" tab to see the HELLO PAPA PLATOON! console log.
Shortcut to open the Chrome Dev Tools: command + option + i
First, create the HTML elements needed to <input> a value and a <button> to submit your answer.
Each element has specific attributes to it. Research what attributes the <input>, <button>, and <form> elements have.
Think about how you would execute a Javascript function within an HTML element. (maybe Google it)
Let's create a function that generates a random number between 1 - 100 and store it in a variable.
let randomNumber = someFunction() {
}Using the documents built in methods 'grab' the user's input number from the <input> element when the <button> is pressed and assign it to a variable.
Research what document built in methods can interact with the DOM (ex: getElement..., onclick, etc.)
Next, insert an HTML element of the Guessed Number somewhere on your webpage.
Research the following DOM built in methods:
createElement, createTextNode, and appendChild
Lastly, insert or edit an HTML element telling the user to guess higher, lower, or they've won.