JavaScript is a powerful programming language that powers interactive web pages and applications. Whether you’re a beginner or looking to sharpen your skills, practicing with JavaScript exercises is an excellent way to improve your understanding of the language. Here are 10 fun exercises to help boost your JavaScript skills.
1. Create a Calculator
A simple calculator is a great way to practice working with functions, user input, and basic arithmetic operations. The challenge is to create a calculator that can handle addition, subtraction, multiplication, and division. Once you’ve built the basic functionality, you can add features like clearing the screen or handling decimal points.
function add(a, b) {
return a + b;
}
Try expanding it further by adding more advanced operations like square roots or percentages.
2. Build a To-Do List
A to-do list is a practical exercise to practice manipulating the DOM, handling user input, and working with arrays. Your to-do list should let users add, delete, and mark tasks as completed. Bonus points if you add the ability to save the list in the browser’s local storage!
let tasks = [];
function addTask(task) {
tasks.push(task);
console.log(tasks);
}
This project is great for learning how to work with dynamic content on a webpage.
3. Create a Random Quote Generator
In this exercise, you’ll build a random quote generator that displays a new quote each time a button is clicked. You’ll use an array of quotes and pick a random one to display. This will help you practice working with arrays, functions, and the DOM.
const quotes = [“Believe in yourself!”, “Stay positive!”, “Never give up!”];
function generateQuote() {
const randomIndex = Math.floor(Math.random() * quotes.length);
return quotes[randomIndex];
}
4. Build a Countdown Timer
A countdown timer is a great way to practice working with dates and times. Set up a timer that counts down from a given time and displays the remaining seconds. Once the timer reaches zero, display a “Time’s up!” message.
let countdown = 10;
const interval = setInterval(() => {
console.log(countdown);
countdown–;
if (countdown === 0) {
clearInterval(interval);
console.log(“Time’s up!”);
}
}, 1000);
5. Create a Number Guessing Game
In this exercise, you’ll create a game where the computer generates a random number, and the player has to guess it. You’ll need to handle user input and provide feedback on whether the guess is too high, too low, or correct.
const secretNumber = Math.floor(Math.random() * 100) + 1;
function checkGuess(guess) {
if (guess > secretNumber) {
return “Too high!”;
} else if (guess < secretNumber) {
return “Too low!”;
} else {
return “You guessed it!”;
}
}
6. Create a Palindrome Checker
A palindrome is a word that reads the same backward as forward. In this exercise, write a function that checks if a string is a palindrome. Use string manipulation methods like split(), reverse(), and join() to compare the original and reversed strings.
function isPalindrome(str) {
const reversedStr = str.split(”).reverse().join(”);
return str === reversedStr;
}
7. Build a Color Picker
Create a color picker tool that lets the user select a color and changes the background color of the webpage. You can use an HTML color input and a JavaScript event listener to update the background color dynamically.
function changeColor(event) {
document.body.style.backgroundColor = event.target.value;
}
8. Create a Simple Accordion
An accordion is a UI component where one section expands to reveal content while the others collapse. Create an accordion using JavaScript and practice working with DOM manipulation and event listeners.
const accordionButtons = document.querySelectorAll(‘.accordion’);
accordionButtons.forEach(button => {
button.addEventListener(‘click’, () => {
button.classList.toggle(‘active’);
const panel = button.nextElementSibling;
if (panel.style.display === “block”) {
panel.style.display = “none”;
} else {
panel.style.display = “block”;
}
});
});
9. Create a Simple Form Validation
Form validation is a critical part of web development. Create a simple form with fields like name, email, and password, and write JavaScript to check if the fields are filled correctly. Provide feedback to the user if any fields are invalid.
function validateForm() {
const email = document.getElementById(“email”).value;
if (!email.includes(‘@’)) {
alert(“Please enter a valid email address.”);
}
}
10. Build a Simple Image Slider
An image slider allows users to scroll through images with the click of a button. In this exercise, you’ll create a simple slider that displays an image and allows the user to move to the next or previous image.
let currentIndex = 0;
const images = [“image1.jpg”, “image2.jpg”, “image3.jpg”];
function showImage() {
document.getElementById(“slider”).src = images[currentIndex];
}
function nextImage() {
currentIndex = (currentIndex + 1) % images.length;
showImage();
}
function prevImage() {
currentIndex = (currentIndex – 1 + images.length) % images.length;
showImage();
}
These 10 fun JavaScript exercises are designed to help you improve your coding skills in a hands-on way. By building these projects, you’ll become more comfortable with basic JavaScript concepts, including variables, functions, arrays, and DOM manipulation. Start with the easier exercises and work your way up to the more complex ones. Happy coding!
