JavaScript is the most important programming language for web development today. If you are a beginner and want to learn JavaScript, just reading the theory will not suffice. You will have to create small JavaScript projects for beginners so that the concepts become clear and your coding skills improve.
The good news is that now you do not need a laptop or a heavy setup. You can easily create mini JavaScript projects online and run them in practice JavaScript online compilers like CodePen, JSFiddle, Replit or Code Sandbox and see the live output.
In this article, we will tell you about the top 10 JavaScript projects with source code, which you can try immediately. Along with this, you will also get JavaScript examples with output in every project so that you can practice in real life.
1. Digital Clock Project
A simple project that shows the current time (hours, minutes, seconds) and auto-updates every second.
Code (js projects with source code):
<!DOCTYPE html>
<html>
<head>
<title>Digital Clock</title>
</head>
<body>
<h1 id="clock"></h1>
<script>
function showTime() {
let date = new Date();
let time = date.toLocaleTimeString();
document.getElementById("clock").innerText = time;
}
setInterval(showTime, 1000);
</script>
</body>
</html>Output (javascript examples with output):
A digital clock on the page that will keep updating every second.
2. Calculator App
A simple calculator that performs addition, subtraction, multiplication and division.
Source Code:
<!DOCTYPE html>
<html>
<head><title>Calculator</title></head>
<body>
<input type="text" id="result" readonly>
<br>
<button onclick="addNumber(1)">1</button>
<button onclick="addNumber(2)">2</button>
<button onclick="addNumber('+')">+</button>
<button onclick="calculate()">=</button>
<script>
function addNumber(val) {
document.getElementById("result").value += val;
}
function calculate() {
let exp = document.getElementById("result").value;
document.getElementById("result").value = eval(exp);
}
</script>
</body>
</html>Output:
A working calculator that performs operations on user input.
3. To-Do List App
A beginner-friendly project where you can add and delete tasks.
Code:
<input type="text" id="task">
<button onclick="addTask()">Add</button>
<ul id="list"></ul>
<script>
function addTask() {
let task = document.getElementById("task").value;
let li = document.createElement("li");
li.innerHTML = task + " <button onclick='this.parentNode.remove()'>X</button>";
document.getElementById("list").appendChild(li);
}
</script>Output:
A simple to-do list where tasks can be added or removed.
4. Random Quote Generator
Each time the button is pressed, a new motivational quote will be displayed.
Source Code:
<button onclick="newQuote()">Get Quote</button>
<p id="quote"></p>
<script>
let quotes = [
"Code is like humor. When you have to explain it, it’s bad.",
"JavaScript is the duct tape of the Internet.",
"First, solve the problem. Then, write the code."
];
function newQuote() {
let random = Math.floor(Math.random() * quotes.length);
document.getElementById("quote").innerText = quotes[random];
}
</script>Output:
A new quote will be displayed every time.
5. Form Validation Project
A small project to validate user input (such as whether an email is valid).
Code:
<form onsubmit="return validate()">
Email: <input type="text" id="email">
<input type="submit">
</form>
<p id="error"></p>
<script>
function validate() {
let email = document.getElementById("email").value;
let pattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
if (!email.match(pattern)) {
document.getElementById("error").innerText = "Invalid Email!";
return false;
}
return true;
}
</script>
Output:
If the email is incorrect, an error message will appear.
6. Background Color Changer
Clicking the button will change the background color.
Code:
<button onclick="changeColor()">Change Color</button>
<script>
function changeColor() {
let colors = ["red","blue","green","yellow","purple"];
document.body.style.background = colors[Math.floor(Math.random()*colors.length)];
}
</script>Output:
The background color will change on every click.
7. Image Slider
A small project in which images auto-slide.
Code:
<img id="slider" src="https://via.placeholder.com/300x200">
<script>
let images = [
"https://via.placeholder.com/300x200/FF0000",
"https://via.placeholder.com/300x200/00FF00",
"https://via.placeholder.com/300x200/0000FF"
];
let i = 0;
setInterval(() => {
document.getElementById("slider").src = images[i];
i = (i+1)%images.length;
}, 2000);
</script>Output:
The image will change every 2 seconds.
8. Weather App (Using API)
Fetching data from the Weather API and displaying temperature and conditions.
Code:
<input type="text" id="city" placeholder="Enter city">
<button onclick="getWeather()">Get Weather</button>
<p id="result"></p>
<script>
async function getWeather() {
let city = document.getElementById("city").value;
let res = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=demo&units=metric`);
let data = await res.json();
document.getElementById("result").innerText = data.main.temp + "°C in " + data.name;
}
</script>Output:
User enters city and temperature is shown.
9. Quiz App
A small quiz app with multiple choice questions.
Code:
<p id="q">2 + 2 = ?</p>
<button onclick="check(3)">3</button>
<button onclick="check(4)">4</button>
<p id="ans"></p>
<script>
function check(ans) {
document.getElementById("ans").innerText = (ans===4) ? "Correct!" : "Wrong!";
}
</script>Output:
“Correct!” message on correct answer.
10. Password Generator
Random secure password generating project.
Code:
<button onclick="generate()">Generate Password</button>
<p id="pass"></p>
<script>
function generate() {
let chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$";
let pass = "";
for(let i=0;i<8;i++){
pass += chars[Math.floor(Math.random()*chars.length)];
}
document.getElementById("pass").innerText = pass;
}
</script>Output:
Random password will be generated.
How to Practice These Projects Online?
You can easily run all these mini JavaScript projects online,
- CodePen (Best for front-end)
- JSFiddle (Fast prototyping)
- Replit (Full projects + collaboration)
- CodeSandbox (React, Angular, Vue projects)
These are all practice javascript online compilers which you can run instantly.
Conclusion
If you’re a beginner, these JavaScript projects for beginners are a great way to start. Each project is simple but clarifies the concepts.
- Projects provide you with JS projects with source code.
- You can run them with any practice JavaScript online compiler.
- Each project comes with JavaScript examples with output.
- You can upload them to GitHub and create a portfolio.
In short, if you seriously want to learn JavaScript then make at least 1 project every day and keep practicing.