Updated
This commit is contained in:
Ionel Andrei Cataon
248
Project/project.html
Normal file
248
Project/project.html
Normal file
@@ -0,0 +1,248 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Professional Calculator</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
padding: 40px;
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: #667eea;
|
||||
margin-bottom: 10px;
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
.progress {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
margin-bottom: 30px;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.equation-box {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 30px;
|
||||
border-radius: 15px;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.equation-box h2 {
|
||||
font-size: 2.5em;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#answer {
|
||||
flex: 1;
|
||||
padding: 15px;
|
||||
font-size: 1.1em;
|
||||
border: 2px solid #667eea;
|
||||
border-radius: 10px;
|
||||
outline: none;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
#answer:focus {
|
||||
border-color: #764ba2;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 15px 30px;
|
||||
font-size: 1.1em;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: #764ba2;
|
||||
}
|
||||
|
||||
.feedback {
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
min-height: 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.feedback.correct {
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
border: 2px solid #28a745;
|
||||
}
|
||||
|
||||
.feedback.incorrect {
|
||||
background: #f8d7da;
|
||||
color: #721c24;
|
||||
border: 2px solid #f5c6cb;
|
||||
}
|
||||
|
||||
.fun-fact {
|
||||
margin-top: 10px;
|
||||
font-style: italic;
|
||||
font-size: 0.95em;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.completion {
|
||||
text-align: center;
|
||||
padding: 30px;
|
||||
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
|
||||
color: white;
|
||||
border-radius: 15px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.completion h2 {
|
||||
font-size: 2em;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.completion button {
|
||||
background: white;
|
||||
color: #28a745;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.completion button:hover {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>🧮 Professional Calculator</h1>
|
||||
<div class="progress">Question <span id="current">1</span> of 10</div>
|
||||
|
||||
<div id="game">
|
||||
<div class="equation-box">
|
||||
<h2 id="equation"></h2>
|
||||
</div>
|
||||
|
||||
<div id="feedback" class="feedback" style="display: none;"></div>
|
||||
|
||||
<div class="input-group">
|
||||
<input type="number" id="answer" placeholder="Enter your answer" autocomplete="off">
|
||||
<button onclick="checkAnswer()">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="completion" class="completion">
|
||||
<h2>🎉 Congratulations!</h2>
|
||||
<p>You've completed all 10 equations!</p>
|
||||
<button onclick="location.reload()">Play Again</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const equations = [
|
||||
{ problem: '25 + 15', answer: 40, fact: '40 is the number of days and nights of the Great Flood in the Bible!' },
|
||||
{ problem: '100 - 37', answer: 63, fact: '63 is the atomic number of Europium, a rare earth element!' },
|
||||
{ problem: '12 × 6', answer: 72, fact: '72 is the number of virgins promised in Islamic tradition!' },
|
||||
{ problem: '144 ÷ 12', answer: 12, fact: '12 is one of the most significant numbers - 12 months, 12 hours, 12 apostles!' },
|
||||
{ problem: '7 × 8', answer: 56, fact: '56 is the number of playing cards in a standard deck plus jokers!' },
|
||||
{ problem: '200 - 85', answer: 115, fact: '115 is the atomic number of Moscovium, a synthetic element!' },
|
||||
{ problem: '9 × 9', answer: 81, fact: '81 is a perfect square - the fourth power of 3!' },
|
||||
{ problem: '256 ÷ 4', answer: 64, fact: '64 is the number of squares on a chessboard!' },
|
||||
{ problem: '50 + 50', answer: 100, fact: '100 is a perfect square and the base for our decimal system!' },
|
||||
{ problem: '99 - 54', answer: 45, fact: '45 is a triangular number - the sum of 1+2+3+4+5+6+7+8+9!' }
|
||||
];
|
||||
|
||||
let currentQuestion = 0;
|
||||
const answerInput = document.getElementById('answer');
|
||||
const feedbackDiv = document.getElementById('feedback');
|
||||
|
||||
function loadQuestion() {
|
||||
const eq = equations[currentQuestion];
|
||||
document.getElementById('equation').textContent = eq.problem + ' = ?';
|
||||
document.getElementById('current').textContent = currentQuestion + 1;
|
||||
answerInput.value = '';
|
||||
answerInput.focus();
|
||||
feedbackDiv.style.display = 'none';
|
||||
}
|
||||
|
||||
function checkAnswer() {
|
||||
const userAnswer = parseInt(answerInput.value);
|
||||
const correctAnswer = equations[currentQuestion].answer;
|
||||
|
||||
if (isNaN(userAnswer)) {
|
||||
feedbackDiv.className = 'feedback incorrect';
|
||||
feedbackDiv.textContent = '⚠️ Please enter a valid number!';
|
||||
feedbackDiv.style.display = 'flex';
|
||||
return;
|
||||
}
|
||||
|
||||
if (userAnswer === correctAnswer) {
|
||||
feedbackDiv.className = 'feedback correct';
|
||||
feedbackDiv.innerHTML = `✅ Correct!<div class="fun-fact">💡 ${equations[currentQuestion].fact}</div>`;
|
||||
feedbackDiv.style.display = 'flex';
|
||||
|
||||
currentQuestion++;
|
||||
if (currentQuestion < equations.length) {
|
||||
setTimeout(loadQuestion, 3000);
|
||||
} else {
|
||||
setTimeout(showCompletion, 3000);
|
||||
}
|
||||
} else {
|
||||
feedbackDiv.className = 'feedback incorrect';
|
||||
feedbackDiv.textContent = '❌ Study some more! Try again.';
|
||||
feedbackDiv.style.display = 'flex';
|
||||
answerInput.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
function showCompletion() {
|
||||
document.getElementById('game').style.display = 'none';
|
||||
document.getElementById('completion').style.display = 'block';
|
||||
}
|
||||
|
||||
answerInput.addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter') checkAnswer();
|
||||
});
|
||||
|
||||
loadQuestion();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user