How to Create a Temperature Control Interface Using HTML, CSS, and JavaScript
Creating a temperature control interface using HTML, CSS, and JavaScript is a fantastic way to learn the basics of web development. This project combines visual styling, dynamic interactions, and responsive design, making it an excellent exercise for new learners. You’ll build a functional temperature control panel that responds to user input and updates automatically, providing a hands-on experience with key web technologies.
Temperature Control Interface Demo:
Why This is Good Practice for New Learners?
This project is an ideal starting point for new developers because it covers several fundamental concepts:
HTML
You’ll structure the webpage with HTML, creating elements like sliders, buttons, and displays.
CSS
You’ll style the interface to make it visually appealing, learning about layout, colors, and animations.
JavaScript
You’ll add interactivity, making the elements respond to user actions and updating the display dynamically.
Step-by-Step Guide to Create This Project
HTML Code:
The HTML code structures the webpage. It includes a slider to select the temperature, a list to display the current temperature, and buttons to increase or decrease the temperature manually.
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Temperature Control</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="temperature-control">
<div class="slider-container">
<div class="temperature-display" id="sliderValue">0°</div>
<input type="range" min="-30" max="30" value="0" class="slider" id="temperatureSlider">
</div>
<div class="list-container" id="listContainer">
<div class="temperature-list" id="temperatureList">
<div class="list-item active">0°</div>
</div>
</div>
<div class="button-container">
<button class="arrow-button" id="increaseButton">▲</button>
<div class="temperature-display" id="buttonValue">0°</div>
<button class="arrow-button" id="decreaseButton">▼</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>CSS Code
The CSS code styles the interface, making it look clean and user-friendly. It sets the layout, colors, and animations for a smooth user experience.
CSS CODE
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.temperature-control {
display: flex;
gap: 20px;
}
.slider-container,
.list-container,
.button-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #333;
border-radius: 10px;
padding: 20px;
color: #fff;
height: 200px;
}
.slider-container {
width: 50px;
}
.temperature-display {
font-size: 18px;
color: #ffbf00;
}
.slider {
writing-mode: bt-lr;
-webkit-appearance: slider-vertical;
width: 8px;
height: 150px;
margin-top: 10px;
background: linear-gradient(to bottom, #ffbf00, #ffcc00, #ffff00);
}
.list-container {
width: 60px;
display: flex;
align-items: center;
cursor: pointer;
}
.temperature-list {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
position: relative;
}
.list-item {
text-align: center;
position: absolute;
opacity: 0;
transition: opacity 0.5s, transform 0.5s, color 0.5s;
animation: fadeSlide 0.5s ease-in-out;
}
list-item.active {
opacity: 1;
transform: translateY(0);
color: #ff6600;
}
.list-item.up {
transform: translateY(-20px);
}
.list-item.down {
transform: translateY(20px);
}
.button-container {
width: 50px;
text-align: center;
justify-content: space-between;
}
.arrow-button {
background: none;
border: none;
color: #00cc99;
font-size: 24px;
cursor: pointer;
}
.slider::-webkit-slider-thumb {
background: #ffbf00;
}
.slider::-moz-range-thumb {
background: #ffbf00;
}
.slider::-ms-thumb {
background: #ffbf00;
}
@keyframes fadeSlide {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}JavaScript Code
The JavaScript code adds functionality to the interface. It handles user input from the slider and buttons, updates the display, and changes the temperature list dynamically.
JAVASCRIPT CODE
document.addEventListener("DOMContentLoaded", () => {
/////////////////////////////////////////////////////
////// Get references to DOM elements//////////////
///////////////////////////////////////////////////
const slider = document.getElementById("temperatureSlider");
const sliderValueDisplay = document.getElementById("sliderValue");
const increaseButton = document.getElementById("increaseButton");
const decreaseButton = document.getElementById("decreaseButton");
const buttonValue = document.getElementById("buttonValue");
const temperatureList = document.getElementById("temperatureList");
const listContainer = document.getElementById("listContainer");
let currentListValue = 0;
let sliderAutoUpdateInterval;
let temperatureListAutoUpdateInterval;
let isPaused = false;
////////////////////////////////////////////////////////////////
// Function to update the temperature list with a new value////
////////////////////////////////////////////////////////////////
const updateTemperatureList = (newValue, direction) => {
const newItem = document.createElement("div");
newItem.className = `list-item ${direction}`;
newItem.innerHTML = `${newValue}°`;
newItem.style.color = getColorForTemperature(newValue);
temperatureList.innerHTML = "";
temperatureList.appendChild(newItem);
setTimeout(() => {
newItem.classList.add("active");
}, 10);
};
// Function to determine color based on temperature value
const getColorForTemperature = (value) => {
if (value <= 0) {
return "#00BFFF"; // Deep Sky Blue
} else if (value <= 24) {
return "#FFBF00"; // Golden Yellow
} else {
return "#FF4500"; // Orange Red
}
};
////////////////////////////////////////////////////////////////////////
//// Function to automatically update the slider value and display/////
////////////////////////////////////////////////////////////////////
const updateSliderAndDisplay = () => {
let currentValue = parseInt(slider.value);
currentValue += 1;
if (currentValue > 30) currentValue = -30; // Loop back to -30
slider.value = currentValue;
sliderValueDisplay.innerHTML = currentValue + "°";
};
// Function to automatically update the temperature list with a new random value
const updateTemperatureListAutomatically = () => {
let randomValue = Math.floor(Math.random() * 61) - 30; // Random value between -30 and 30
currentListValue = randomValue;
updateTemperatureList(currentListValue, "auto");
};
// Function to start automatic updates for the slider
const startSliderAutoUpdate = () => {
sliderAutoUpdateInterval = setInterval(updateSliderAndDisplay, 3000); // Update slider every 3 seconds
};
// Function to start automatic updates for the temperature list
const startTemperatureListAutoUpdate = () => {
temperatureListAutoUpdateInterval = setInterval(
updateTemperatureListAutomatically,
3000
); // Update temperature list every 3 seconds
};
// Function to pause automatic updates
const pauseAutoUpdate = () => {
clearInterval(sliderAutoUpdateInterval);
clearInterval(temperatureListAutoUpdateInterval);
};
// Function to resume automatic updates
const resumeAutoUpdate = () => {
if (!isPaused) {
startSliderAutoUpdate();
startTemperatureListAutoUpdate();
}
};
// Event listener for slider input changes
slider.addEventListener("input", () => {
const value = slider.value;
sliderValueDisplay.innerHTML = value + "°";
});
// Event listener for increase button clicks
increaseButton.addEventListener("click", () => {
let currentValue = parseInt(buttonValue.innerText);
if (currentValue < 30) {
currentValue++;
buttonValue.innerHTML = currentValue + "°";
updateTemperatureList(currentValue, "manual");
}
});
// Event listener for decrease button clicks
decreaseButton.addEventListener("click", () => {
let currentValue = parseInt(buttonValue.innerText);
if (currentValue > -30) {
currentValue--;
buttonValue.innerHTML = currentValue + "°";
updateTemperatureList(currentValue, "manual");
}
});
// Event listener for clicks within the list container
listContainer.addEventListener("click", (event) => {
const rect = listContainer.getBoundingClientRect();
const y = event.clientY - rect.top; // y position within the element
if (y < rect.height / 2) {
// Clicked above
if (currentListValue < 30) {
currentListValue++;
updateTemperatureList(currentListValue, "up");
}
} else {
// Clicked below
if (currentListValue > -30) {
currentListValue--;
updateTemperatureList(currentListValue, "down");
}
}
// Pause automatic updates on click
isPaused = true;
pauseAutoUpdate();
});
// Event listeners for mouse enter and leave on the list container
listContainer.addEventListener("mouseenter", () => {
isPaused = true;
pauseAutoUpdate();
});
listContainer.addEventListener("mouseleave", () => {
isPaused = false;
resumeAutoUpdate();
});
// Event listeners for mouse enter and leave on the slider container
const sliderContainer = document.querySelector(".slider-container");
sliderContainer.addEventListener("mouseenter", () => {
isPaused = true;
pauseAutoUpdate();
});
sliderContainer.addEventListener("mouseleave", () => {
isPaused = false;
resumeAutoUpdate();
});
// Event listeners for mouse enter and leave on the button container
const buttonContainer = document.querySelector(".button-container");
buttonContainer.addEventListener("mouseenter", () => {
isPaused = true;
pauseAutoUpdate();
});
buttonContainer.addEventListener("mouseleave", () => {
isPaused = false;
resumeAutoUpdate();
});
// Initialize default values and start automatic updates
updateTemperatureList(currentListValue, "");
startSliderAutoUpdate();
startTemperatureListAutoUpdate();
});Conclusion
Copy and paste all the HTML, CSS, and JavaScript code that are provided in this article to try it yourself and customize styles, colors, and animations to see for yourself. Creating a temperature control interface is a great way to practice your HTML, CSS, and JavaScript skills. It offers a comprehensive learning experience by combining structure, style, and interactivity. By following this guide, you’ll gain a deeper understanding of how these technologies work together to create dynamic web applications. Enjoy your coding journey!
