stop watch using javascript and css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>stopwatch</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- create stop watch using javascript and css? -->
<div class="stopwatch">
<h1>Stopwatch</h1>
<div class="display">00:00:00</div>
<button class="start-stop">Start</button>
<button class="reset">Reset</button>
</div>
</body>
<script src="script.js"></script>
</html>
javascript
const display = document.querySelector('.display');
let intervalId;
let time = 0;
function startStopwatch() {
if (!intervalId) {
intervalId = setInterval(() => {
time++;
display.textContent = formatTime(time);
}, 1000);
document.querySelector('.start-stop').textContent = 'Stop';
} else {
clearInterval(intervalId);
intervalId = null;
document.querySelector('.start-stop').textContent = 'Start';
}
}
function resetStopwatch() {
clearInterval(intervalId);
intervalId = null;
time = 0;
display.textContent = formatTime(time);
document.querySelector('.start-stop').textContent = 'Start';
}
function formatTime(time) {
const hours = Math.floor(time / 3600);
const minutes = Math.floor((time % 3600) / 60);
const seconds = time % 60;
return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
}
function pad(time) {
return time.toString().padStart(2, '0');
}
document.querySelector('.start-stop').addEventListener('click', startStopwatch);
document.querySelector('.reset').addEventListener('click', resetStopwatch);
css
.stopwatch {
width: 400px;
margin: 0 auto;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}
.display {
font-size: 48px;
font-weight: bold;
margin: 20px 0;
}
button {
padding: 10px 20px;
font-size: 20px;
border: none;
border-radius: 5px;
background-color: #4CAF50;
color: white;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
Calculator
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>calculator</title>
<style>
#calculator {
width: 250px;
margin: auto;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 5px;
}
#display {
width: 95%;
height: 40px;
margin-bottom: 10px;
padding: 5px;
font-size: 18px;
text-align: right;
}
.btn {
width: 50px;
height: 50px;
margin: 5px;
background-color: #ddd;
border: none;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
}
.operator {
background-color: #5c3d8e;
color: white;
}
#buttons{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
</style>
</head>
<body>
<!-- designe proper calculator using css and javascript? -->
<div id="calculator">
<input type="text" id="display" disabled>
<div id="buttons">
<button class="btn" value="1">1</button>
<button class="btn" value="2">2</button>
<button class="btn" value="3">3</button>
<button class="btn operator" value="+">+</button>
<button class="btn" value="4">4</button>
<button class="btn" value="5">5</button>
<button class="btn" value="6">6</button>
<button class="btn operator" value="-">-</button>
<button class="btn" value="7">7</button>
<button class="btn" value="8">8</button>
<button class="btn" value="9">9</button>
<button class="btn operator" value="*">*</button>
<button class="btn" value="0">0</button>
<button class="btn" id="clear">C</button>
<button class="btn" id="equals">=</button>
<button class="btn operator" value="/">/</button>
</div>
</div>
</body>
<script>
const display = document.getElementById('display');
const numbers = Array.from(document.getElementsByClassName('btn'));
const operators = Array.from(document.getElementsByClassName('operator'));
const clear = document.getElementById('clear');
const equals = document.getElementById('equals');
numbers.forEach(number => {
number.addEventListener('click', (e) => {
display.value += e.target.value;
});
});
operators.forEach(operator => {
operator.addEventListener('click', (e) => {
const lastChar = display.value.slice(-1);
if (!isOperator(lastChar)) { // Only add the operator if the last character is not an operator
display.value += e.target.value;
} else { // If the last character is an operator, replace it with the new one
display.value = display.value.slice(0, -1) + e.target.value;
}
});
});
clear.addEventListener('click', () => {
display.value = '';
});
equals.addEventListener('click', () => {
try {
display.value = eval(display.value);
} catch {
display.value = "Error";
}
});
// Helper function to check if a character is an operator
function isOperator(char) {
return ['+', '-', '*', '/'].includes(char);
}
</script>
</html>
javaacript
0 Comments
"Thank you for your message! I appreciate your prompt response and the information you've provided. If you have any further details or if there's anything else I should know, please feel free to let me know. Looking forward to our continued communication!" -- Peaknotes.in