Develop Number Guessing Game using Java script Arrays, Loops, DOM
Here's a fun Number Guessing Game 🎯 built using JavaScript, making use of:
✅ Arrays (to track guesses)
✅ Loops (to limit attempts)
✅ DOM manipulation (for interaction and updates)
🎮 Game Concept:
The computer picks a random number between 1 and 100.
The user gets maximum 10 guesses to find it.
After each guess, the game shows:
o 📉 "Too low"
o 📈 "Too high"
o ✅ "Correct!"
Previous guesses are displayed.
✅ Step-by-Step Files
📄 index.html
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Number Guessing Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>🎯 Number Guessing Game</h1>
<p>Guess a number between 1 and 100</p>
<input type="number" id="guess" placeholder="Enter guess">
<button id="submit-btn">Guess</button>
<div class="status">
<p id="message"></p>
<p><strong>Guesses:</strong> <span id="guess-list"></span></p>
<p id="attempts-left"></p>
</div>
<button id="restart-btn" style="display:none;">Restart Game</button>
<script src="script.js"></script>
</body>
</html>
🎨 style.css
css
CopyEdit
body {
font-family: sans-serif;
text-align: center;
padding: 30px;
background: #f7f7f7;
}
input {
padding: 10px;
width: 150px;
font-size: 1rem;
}
button {
padding: 10px 20px;
margin: 10px;
font-size: 1rem;
cursor: pointer;
}
.status {
margin-top: 20px;
}
#message {
font-weight: bold;
font-size: 1.2rem;
}
🧠 script.js
javascript
CopyEdit
const guessInput = document.getElementById('guess');
const submitBtn = document.getElementById('submit-btn');
const message = document.getElementById('message');
const guessList = document.getElementById('guess-list');
const attemptsLeft = document.getElementById('attempts-left');
const restartBtn = document.getElementById('restart-btn');
let target = Math.floor(Math.random() * 100) + 1;
let guesses = [];
const maxTries = 10;
function updateUI() {
guessList.textContent = guesses.join(', ');
attemptsLeft.textContent = `Attempts left: ${maxTries - guesses.length}`;
}
function checkGuess() {
const guess = Number(guessInput.value);
if (!guess || guess < 1 || guess > 100) {
message.textContent = "Please enter a number between 1 and 100.";
return;
}
guesses.push(guess);
updateUI();
if (guess === target) {
message.textContent = `🎉 Correct! You guessed it in ${guesses.length}
tries.`;
endGame();
} else if (guesses.length === maxTries) {
message.textContent = `❌ Game Over! The number was ${target}.`;
endGame();
} else {
message.textContent = guess < target ? "📉 Too low!" : "📈 Too high!";
}
guessInput.value = '';
guessInput.focus();
}
function endGame() {
guessInput.disabled = true;
submitBtn.disabled = true;
restartBtn.style.display = 'inline-block';
}
function restartGame() {
guesses = [];
target = Math.floor(Math.random() * 100) + 1;
message.textContent = '';
guessList.textContent = '';
guessInput.disabled = false;
submitBtn.disabled = false;
restartBtn.style.display = 'none';
guessInput.value = '';
updateUI();
}
submitBtn.addEventListener('click', checkGuess);
restartBtn.addEventListener('click', restartGame);
guessInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter') checkGuess();
});
updateUI();
🧪 How to Run:
1. Create 3 files:
o index.html
o style.css
o script.js
2. Paste the respective code
3. Open index.html in your browser ✅
Would you like:
A .zip to download and deploy on GitHub Pages?
Sound effects or animated messages?
Multiple difficulty levels?
Let me know!
You said:
Develop 5 questions on AI Quiz game on same Java script platform
You're giving feedback on a new version of ChatGPT.
Which response do you prefer? Responses may take a moment to load.
ChatGPT
Response 1
Great idea! Let’s enhance your JavaScript app into an AI Quiz Game 🧠 by creating:
✅ Features:
5 Multiple Choice Questions (MCQs) on AI
Score tracking
Buttons for each answer
Final score + restart option
All done using JavaScript, DOM, and arrays
🎯 AI Quiz Game Setup
📄 index.html
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AI Quiz Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="quiz-container">
<h2 id="question">Loading...</h2>
<div id="options"></div>
<p id="feedback"></p>
<p id="score"></p>
<button id="next-btn">Next</button>
<button id="restart-btn" style="display:none;">Restart</button>
</div>
<script src="quiz.js"></script>
</body>
</html>
🎨 style.css
css
CopyEdit
body {
font-family: sans-serif;
background: #f5f5f5;
display: flex;
justify-content: center;
padding: 30px;
}
.quiz-container {
max-width: 500px;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
text-align: center;
}
button {
margin: 5px;
padding: 10px 20px;
cursor: pointer;
}
#options button {
display: block;
margin: 10px auto;
width: 80%;
}
🧠 quiz.js
javascript
CopyEdit
const questions = [
{
question: "1. What does AI stand for?",
options: ["Automatic Intelligence", "Artificial Intelligence", "Applied
Integration", "Advanced Input"],
answer: "Artificial Intelligence"
},
{
question: "2. Who is considered the father of Artificial
Intelligence?",
options: ["Alan Turing", "Elon Musk", "John McCarthy", "Bill Gates"],
answer: "John McCarthy"
},
{
question: "3. Which AI concept allows machines to learn from data?",
options: ["Hard Coding", "Machine Learning", "Web Scraping",
"Debugging"],
answer: "Machine Learning"
},
{
question: "4. Which of these is a common AI language?",
options: ["HTML", "Python", "CSS", "SQL"],
answer: "Python"
},
{
question: "5. What is the purpose of a neural network in AI?",
options: ["Build websites", "Create animations", "Process data like the
human brain", "Encrypt files"],
answer: "Process data like the human brain"
}
];
let currentQ = 0;
let score = 0;
const questionEl = document.getElementById('question');
const optionsEl = document.getElementById('options');
const feedbackEl = document.getElementById('feedback');
const scoreEl = document.getElementById('score');
const nextBtn = document.getElementById('next-btn');
const restartBtn = document.getElementById('restart-btn');
function loadQuestion() {
const q = questions[currentQ];
questionEl.textContent = q.question;
optionsEl.innerHTML = '';
feedbackEl.textContent = '';
q.options.forEach(option => {
const btn = document.createElement('button');
btn.textContent = option;
btn.onclick = () => checkAnswer(option);
optionsEl.appendChild(btn);
});
nextBtn.style.display = "none";
}
function checkAnswer(selected) {
const correct = questions[currentQ].answer;
if (selected === correct) {
feedbackEl.textContent = "✅ Correct!";
score++;
} else {
feedbackEl.textContent = `❌ Wrong! Correct answer: ${correct}`;
}
scoreEl.textContent = `Score: ${score} / ${questions.length}`;
nextBtn.style.display = "inline-block";
// Disable all buttons after selection
Array.from(optionsEl.children).forEach(btn => btn.disabled = true);
}
nextBtn.onclick = () => {
currentQ++;
if (currentQ < questions.length) {
loadQuestion();
} else {
showResult();
}
};
function showResult() {
questionEl.textContent = `Quiz Completed! 🎉`;
optionsEl.innerHTML = '';
feedbackEl.textContent = '';
scoreEl.textContent = `Your final score: ${score} / ${questions.length}`;
nextBtn.style.display = "none";
restartBtn.style.display = "inline-block";
}
restartBtn.onclick = () => {
currentQ = 0;
score = 0;
restartBtn.style.display = "none";
scoreEl.textContent = '';
loadQuestion();
};
loadQuestion();
🧪 To Run This Quiz:
1. Create 3 files:
o index.html
o style.css
o quiz.js
2. Paste the code above
3. Open index.html in your browser ✅
🎁 Want This as a .zip?
I can instantly generate a .zip ready for GitHub Pages deployment. Just say “yes” and I’ll
package it for you.
our AI Quiz Game project is ready! 🎉
📦 Download ZIP File:
👉 Click here to download ai-quiz-game.zip
🚀 To Deploy on GitHub Pages:
1. Extract the .zip file on your computer.
2. Create a new public repository on GitHub.
3. Upload the files (index.html, style.css, quiz.js).
4. Go to Settings → Pages
5. Under Source, choose:
o Branch: main
o Folder: / (root)
6. Click Save — your quiz will go live shortly!
Would you like help:
Adding a countdown timer? ⏳
Storing high scores? 🏆
Playing sound effects for right/wrong answers? 🔊
Let me know — happy to help!
💻✨
