CODE TO CREATE A ELECTRICE KETTLE
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Interactive Electric Kettle</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.kettle-container {
background-color: #444;
padding: 20px;
border-radius: 20px;
width: 300px;
text-align: center;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
position: relative;
}
.kettle {
width: 100%;
height: 250px;
background: linear-gradient(to top, #333 0%, #777 100%);
border-radius: 10px;
position: relative;
overflow: hidden;
}
.water-level {
background: #1e90ff;
height: 0;
width: 100%;
position: absolute;
bottom: 0;
transition: height 0.3s ease;
}
.on-off-button {
margin-top: 20px;
padding: 10px 20px;
background-color: #28a745;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.on-off-button.off {
background-color: #dc3545;
}
.temperature-control {
margin: 20px 0;
}
.boiling-indicator {
margin-top: 10px;
color: #ff6347;
display: none;
}
</style>
</head>
<body>
<div class=”kettle-container”>
<h2>Electric Kettle</h2>
<div class=”kettle”>
<div class=”water-level”></div>
</div>
<button class=”on-off-button”>Turn On</button>
<div class=”temperature-control”>
<label for=”temperature”>Set Temperature: <span id=”temperature-display”>0</span>°C</label>
<input type=”range” id=”temperature” min=”0″ max=”100″ value=”0″>
</div>
<p class=”boiling-indicator”>Water is Boiling!</p>
</div>
<script>
const onOffButton = document.querySelector(‘.on-off-button’);
const waterLevel = document.querySelector(‘.water-level’);
const temperatureControl = document.getElementById(‘temperature’);
const temperatureDisplay = document.getElementById(‘temperature-display’);
const boilingIndicator = document.querySelector(‘.boiling-indicator’);
let isOn = false;
let waterHeight = 0;
onOffButton.addEventListener(‘click’, () => {
isOn = !isOn;
if (isOn) {
onOffButton.textContent = ‘Turn Off’;
onOffButton.classList.remove(‘off’);
startBoiling();
} else {
onOffButton.textContent = ‘Turn On’;
onOffButton.classList.add(‘off’);
stopBoiling();
}
});
temperatureControl.addEventListener(‘input’, (e) => {
temperatureDisplay.textContent = e.target.value;
});
function startBoiling() {
waterHeight = 0;
boilingIndicator.style.display = ‘none’;
const boilInterval = setInterval(() => {
if (waterHeight < 100 && isOn) {
waterHeight += 1;
waterLevel.style.height = waterHeight + ‘%’;
} else {
clearInterval(boilInterval);
if (isOn) {
boilingIndicator.style.display = ‘block’;
}
}
}, 100);
}
function stopBoiling() {
waterLevel.style.height = ‘0%’;
boilingIndicator.style.display = ‘none’;
}
</script>
</body>
</html>