Day 7: JavaScript Projects to Practice What We have Learned

Welcome back to our JavaScript series! Today, we'll work on some projects that will help you practice and apply what you've learned so far. These projects will cover the basics of JavaScript, including variables, data types, operators, control flow, functions, objects, and arrays.

Project 1: Simple Calculator

Create a simple calculator that can perform basic arithmetic operations like addition, subtraction, multiplication, and division.

Steps:

1. Create a function for each arithmetic operation (add, subtract, multiply, divide).

2. Use prompt to get input from the user.

3. Use if...else or switch statements to determine which operation to perform.

4. Display the result using alert.

function add(a, b) {
    return a + b;
}

function subtract(a, b) {
    return a - b;
}

function multiply(a, b) {
    return a * b;
}

function divide(a, b) {
    return a / b;
}

let num1 = parseFloat(prompt("Enter the first number:"));
let num2 = parseFloat(prompt("Enter the second number:"));
let operation = prompt("Enter the operation (+, -, *, /):");
let result;

if (operation === "+") {
    result = add(num1, num2);
} else if (operation === "-") {
    result = subtract(num1, num2);
} else if (operation === "*") {
    result = multiply(num1, num2);
} else if (operation === "/") {
    result = divide(num1, num2);
} else {
    result = "Invalid operation!";
}

alert("The result is: " + result);

Project 2: To-Do List

Create a simple to-do list application where users can add, view, and delete tasks.

Steps:

1. Use an array to store the tasks.

2. Create functions to add, view, and delete tasks.

3. Use prompt to get input from the user.

4. Use switch or if...else statements to navigate between different actions.

let tasks = [];

function addTask(task) {
    tasks.push(task);
}

function viewTasks() {
    if (tasks.length === 0) {
        console.log("No tasks to show.");
    } else {
        tasks.forEach((task, index) => {
            console.log((index + 1) + ". " + task);
        });
    }
}

function deleteTask(taskNumber) {
    if (taskNumber > 0 && taskNumber <= tasks.length) {
        tasks.splice(taskNumber - 1, 1);
    } else {
        console.log("Invalid task number.");
    }
}

let action;

do {
    action = prompt("Choose an action: add, view, delete, or quit");

    if (action === "add") {
        let newTask = prompt("Enter the task:");
        addTask(newTask);
    } else if (action === "view") {
        viewTasks();
    } else if (action === "delete") {
        let taskNumber = parseInt(prompt("Enter the task number to delete:"));
        deleteTask(taskNumber);
    }
} while (action !== "quit");

Project 3: Contact List

Create a contact list where users can add, view, and search for contacts by name.

Steps:

1. Use an array of objects to store the contacts.

2. Create functions to add, view, and search for contacts.

3. Use prompt to get input from the user.

4. Use forEach and filter methods to manage the contacts.

let contacts = [];

function addContact(name, phone) {
    contacts.push({ name, phone });
}

function viewContacts() {
    if (contacts.length === 0) {
        console.log("No contacts to show.");
    } else {
        contacts.forEach((contact, index) => {
            console.log((index + 1) + ". " + contact.name + " - " + contact.phone);
        });
    }
}

function searchContact(name) {
    let foundContacts = contacts.filter(contact => contact.name.toLowerCase().includes(name.toLowerCase()));
    if (foundContacts.length === 0) {
        console.log("No contacts found.");
    } else {
        foundContacts.forEach(contact => {
            console.log(contact.name + " - " + contact.phone);
        });
    }
}

let action;

do {
    action = prompt("Choose an action: add, view, search, or quit");

    if (action === "add") {
        let name = prompt("Enter the contact's name:");
        let phone = prompt("Enter the contact's phone number:");
        addContact(name, phone);
    } else if (action === "view") {
        viewContacts();
    } else if (action === "search") {
        let name = prompt("Enter the name to search:");
        searchContact(name);
    }
} while (action !== "quit");

Summary

Today, we worked on three projects: a simple calculator, a to-do list, and a contact list. From Tomorrow, we'll continue exploring some more advanced topics in JavaScript.