JavaScript practical project

JavaScript practical project

Here’s a guide to JavaScript practical project examples, combining ES6+, Fetch API, Async/Await, LocalStorage, and DOM manipulation. These examples are beginner-friendly but cover real-world use cases.

Todo List App

Features:

Add, delete, and mark tasks as completed
Store tasks in LocalStorage
Responsive UI using DOM manipulation

<h2>Todo List</h2>
<input type="text" id="taskInput" placeholder="Add new task">
<button onclick="addTask()">Add</button>
<ul id="taskList"></ul><script>
let tasks = JSON.parse(localStorage.getItem("tasks")) || [];

function displayTasks() {
const list = document.getElementById("taskList");
list.innerHTML = "";
tasks.forEach((task, index) => {
let li = document.createElement("li");
li.innerHTML = `${task} <button onclick="deleteTask(${index})">Delete</button>`;
list.appendChild(li);
});
}

function addTask() {
let input = document.getElementById("taskInput");
if(input.value){
tasks.push(input.value);
localStorage.setItem("tasks", JSON.stringify(tasks));
input.value = "";
displayTasks();
}
}

function deleteTask(index) {
tasks.splice(index, 1);
localStorage.setItem("tasks", JSON.stringify(tasks));
displayTasks();
}

displayTasks();
</script>

let tasks = JSON.parse(localStorage.getItem("tasks")) || [];

function displayTasks() {

const list = document.getElementById("taskList");

list.innerHTML = "";

tasks.forEach((task, index) => {

let li = document.createElement("li");

li.innerHTML = `${task} <button onclick="deleteTask(${index})">Delete</button>`;

list.appendChild(li);

});

}

function addTask() {

let input = document.getElementById("taskInput");

if(input.value){

tasks.push(input.value);

localStorage.setItem("tasks", JSON.stringify(tasks));

input.value = "";

displayTasks();

}

function deleteTask(index) {

tasks.splice(index, 1);

localStorage.setItem("tasks", JSON.stringify(tasks));

displayTasks();

}

displayTasks();

</script>

Weather App Using Fetch API

Features:

Get real-time weather data from OpenWeatherMap API
Use async/await for fetching
Show data dynamically in DOM

<input type="text" id="city" placeholder="Enter city">
<button onclick="getWeather()">Get Weather</button>
<div id="output"></div><script>
async function getWeather() {
let city = document.getElementById("city").value;
let apiKey = "YOUR_API_KEY";
try {
let res = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`);
if(!res.ok) throw new Error("City not found");
let data = await res.json();
document.getElementById("output").innerHTML =
`<h3>${data.name}</h3>
<p>Temperature: ${data.main.temp}°C</p>
<p>Weather: ${data.weather[0].main}</p>`;
} catch (err) {
document.getElementById("output").innerHTML = `<p>${err.message}</p>`;
}
}
</script>

<button onclick="getWeather()">Get Weather</button>

async function getWeather() {

let city = document.getElementById("city").value;

let apiKey = "YOUR_API_KEY";

try {

let res = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`);

if(!res.ok) throw new Error("City not found");

let data = await res.json();

document.getElementById("output").innerHTML =

`<h3>${data.name}</h3>

<p>Temperature: ${data.main.temp}°C</p>

<p>Weather: ${data.weather[0].main}</p>`;

} catch (err) {

document.getElementById("output").innerHTML = `<p>${err.message}</p>`;

}

</script>

Quiz App

Features:

Load questions from a JSON file or API
Show one question at a time
Display score at the end
Use LocalStorage to save last score

<div id="quiz"></div>
<button onclick="nextQuestion()">Next</button>
<p id="score"></p><script>
const questions = [
{q:"Capital of India?", a:["Delhi","Mumbai"], correct:0},
{q:"5 + 7 = ?", a:["10","12"], correct:1}
];

let index = 0, score = 0;

function displayQuestion() {
const quiz = document.getElementById("quiz");
let q = questions[index];
let options = q.a.map((opt,i) => `<button onclick="checkAnswer(${i})">${opt}</button>`).join(" ");
quiz.innerHTML = `<p>${q.q}</p>${options}`;
}

function checkAnswer(i) {
if(i === questions[index].correct) score++;
index++;
if(index < questions.length) displayQuestion();
else document.getElementById("score").innerHTML = `Your score: ${score}`;
}

displayQuestion();
</script>

const questions = [

{q:"Capital of India?", a:["Delhi","Mumbai"], correct:0},

{q:"5 + 7 = ?", a:["10","12"], correct:1}

];

let index = 0, score = 0;

function displayQuestion() {

const quiz = document.getElementById("quiz");

let q = questions[index];

let options = q.a.map((opt,i) => `<button onclick="checkAnswer(${i})">${opt}</button>`).join(" ");

quiz.innerHTML = `<p>${q.q}</p>${options}`;

}

function checkAnswer(i) {

if(i === questions[index].correct) score++;

index++;

if(index < questions.length) displayQuestion();

else document.getElementById("score").innerHTML = `Your score: ${score}`;

}

displayQuestion();

</script>

Notes App with LocalStorage

Features:

Add, edit, delete notes
Store notes in LocalStorage
Simple UI

<textarea id="note"></textarea>
<button onclick="saveNote()">Save Note</button>
<ul id="notesList"></ul><script>
let notes = JSON.parse(localStorage.getItem("notes")) || [];

function displayNotes() {
const list = document.getElementById("notesList");
list.innerHTML = "";
notes.forEach((n,i) => {
list.innerHTML += `<li>${n} <button onclick="deleteNote(${i})">Delete</button></li>`;
});
}

function saveNote() {
let n = document.getElementById("note").value;
if(n){
notes.push(n);
localStorage.setItem("notes", JSON.stringify(notes));
document.getElementById("note").value = "";
displayNotes();
}
}

function deleteNote(i) {
notes.splice(i,1);
localStorage.setItem("notes", JSON.stringify(notes));
displayNotes();
}

displayNotes();
</script>

let notes = JSON.parse(localStorage.getItem("notes")) || [];

function displayNotes() {

const list = document.getElementById("notesList");

list.innerHTML = "";

notes.forEach((n,i) => {

list.innerHTML += `<li>${n} <button onclick="deleteNote(${i})">Delete</button></li>`;

});

}

function saveNote() {

let n = document.getElementById("note").value;

if(n){

notes.push(n);

localStorage.setItem("notes", JSON.stringify(notes));

document.getElementById("note").value = "";

displayNotes();

}

function deleteNote(i) {

notes.splice(i,1);

localStorage.setItem("notes", JSON.stringify(notes));

displayNotes();

}

displayNotes();

</script>

Random Joke Generator (Fetch + Async/Await)

Features:

Get random jokes from API
Display dynamically

<button onclick="getJoke()">Get Joke</button>
<p id="joke"></p><script>
async function getJoke() {
let res = await fetch("https://official-joke-api.appspot.com/random_joke");
let data = await res.json();
document.getElementById("joke").innerHTML = `${data.setup} - ${data.punchline}`;
}
</script>

async function getJoke() {

let res = await fetch("https://official-joke-api.appspot.com/random_joke");

let data = await res.json();

document.getElementById("joke").innerHTML = `${data.setup} - ${data.punchline}`;

}

</script>

Tips for Practical Projects

Always use async/await for API requests
Use LocalStorage/SessionStorage for temporary storage
Modularize code with ES6 modules
Use template literals for dynamic HTML
Handle errors gracefully with try/catch

JavaScript practical project