Introduction
In the dynamic world of web development, building an impressive portfolio is a key step toward landing your dream job, freelancing opportunities, or even launching your own projects. A strong portfolio not only showcases your skills but also tells a story of your growth and capabilities as a developer.
Are you ready to take your portfolio to the next level? In this blog post, we'll embark on a captivating journey, where we'll dive deep into the creation of a "Number Guessing Game" using HTML, CSS, and JavaScript. This project is more than just lines of code; it's a testament to your evolving proficiency in web development.
Step By Step Guide
- Creating an Html document
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Guess The Number</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="main"> <h3>I think the number between 1 to 100 you have to guess it correctly</h3> <input type="number" id="inputNumber" placeholder="Number"><br> <button id="btn" onclick="play()">Guess</button> <p id="msg1">Enter your guess in the box...!</p> <p id="msg2">No. of guess: 0</p> <p id="msg3">Your Scoor is the: 0</p> </div> <script src="./app.js"></script> </body> </html> -
Creat a css File and add this code to your css
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;1,300;1,400&family=Poppins:ital,wght@0,200;0,400;1,200;1,300&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; } body{ width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; background: rgb(31, 58, 211); font-family: 'Poppins', sans-serif; } .main{ width: 50%; background: #fff; padding: 4rem 0; border-radius: 5px; } .main h3{ font-size: 1.7rem; padding: 1.5rem 3rem; } #inputNumber{ width: 7rem; padding: 1rem; color: #000; font-size: 1rem; outline-color: rgb(10, 219, 41); margin-bottom: 1rem; text-align: center; } button{ width: 10rem; padding: .5rem 1rem; margin-bottom: 1rem; background: rgb(152, 29, 228); color: #fff; border: 5px double rgb(177, 183, 226); text-transform: capitalize; border-radius: -5px; cursor: pointer; outline-color: rgb(10, 219, 41); } p{ padding-bottom: .2rem; } -
Now create a javascript file(app.js)
This code is a JavaScript implementation of a simple Number Guessing Game. I'll explain each part of the code step by step:
-
HTML Elements and Variables Setup:
These lines fetch HTML elements by their id attribute and assign them to JavaScript variables. btn represents a button, msg1, msg2, and msg3 represent different message elements that will be used to display information to the user.
let btn = document.getElementById('btn'); let msg1 = document.getElementById('msg1'); let msg2 = document.getElementById('msg2'); let msg3 = document.getElementById('msg3'); -
Generate a Random Number:
This line generates a random number between 1 and 100 (inclusive) and stores it in the variable ' ans '. This is the number that the user needs to guess.
let ans = Math.floor(Math.random() * 100) + 1; -
Initialize Variables:
These variables are initialized to keep track of the user's score and the guessed numbers. score starts at 0, and guessNum is an empty array to store guessed numbers.
let score = 0; let guessNum = []; -
The play Function:
This function is called when the user clicks a button (presumably with the id "btn"). It handles the game logic.
function play(){ let inputNumber = document.getElementById('inputNumber').value; if(inputNumber < 1 || inputNumber > 100){ alert("Please enter the number between 1 to 100"); } else{ guessNum.push(inputNumber); // push the input number into the arry score += 1 // incrmet the value to score 1 if(inputNumber < ans ){ msg1.textContent = "Your guess is low"; msg2.textContent = "No of guess: " + score; msg3.textContent = "Guessed number are: " + guessNum; } else if(inputNumber > ans){ console.log('high number'); msg1.textContent = "Your guess is high"; msg2.textContent = "No of guess: " + score; msg3.textContent = "Guessed number are: " + guessNum; } else if(inputNumber == ans){ console.log('same number'); msg1.style.color = 'red'; msg1.textContent = 'OOww...! You own the game...'; msg2.textContent = 'The number is the: ' + ans; msg3.style.color = 'Green'; msg3.textContent = 'Your Score is the: '+(100 - score) // calculate the finel score } } }Depending on whether the input number is less than, greater than, or equal to the random number (ans), different messages are displayed to the user:
- If it's less than ans, a message saying "Your guess is low" is displayed.
- If it's greater than ans, a message saying "Your guess is high" is displayed.
- If it's equal to ans, a message saying "You own the game" is displayed along with the correct number and the user's score.
-
HTML Elements and Variables Setup:
Video Tutorial:
Overall, this code provides a solid foundation for a simple Number Guessing Game, which can be a fun and educational project for web developers. It showcases essential concepts in HTML, CSS, and JavaScript and can serve as a valuable addition to a developer's portfolio, demonstrating their ability to create interactive web applications. Further enhancements and features can be added to make the game more engaging and challenging.
Posts
No comments: