DEV Community: Muhammad Atif Latif

Building a Simple To-Do List App with JavaScript

Muhammad Atif Latif — Fri, 27 Jun 2025 05:11:22 +0000

In this post, we’ll create a simple To-Do List application using JavaScript. This app will allow users to add, remove, and mark tasks as complete.

Features of the To-Do List App

Add new tasks
Remove tasks
Mark tasks as complete

Setting Up Your Project

Create a new directory:

   mkdir todo-app
   cd todo-app

Create an index.html file and add the basic structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>To-Do List</h1>
        <input type="text" id="taskInput" placeholder="Add a new task...">
        <button id="addTaskButton">Add Task</button>
        <ul id="taskList"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

Adding Styles

Create a styles.css file to style your app:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 600px;
    margin: auto;
    background: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
}

input[type="text"] {
    width: 70%;
    padding: 10px;
    margin-right: 10px;
}

button {
    padding: 10px;
}

ul {
    list-style: none;
    padding: 0;
}

li {
    padding: 10px;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

Adding Functionality with JavaScript

Create a script.js file to add functionality:

document.getElementById('addTaskButton').addEventListener('click', addTask);

function addTask() {
    const taskInput = document.getElementById('taskInput');
    const taskValue = taskInput.value.trim();

    if (taskValue) {
        const taskList = document.getElementById('taskList');
        const li = document.createElement('li');
        li.textContent = taskValue;

        const removeButton = document.createElement('button');
        removeButton.textContent = 'Remove';
        removeButton.onclick = () => {
            taskList.removeChild(li);
        };

        li.appendChild(removeButton);
        taskList.appendChild(li);
        taskInput.value = '';
    }
}

Conclusion

You’ve now built a simple To-Do List app using HTML, CSS, and JavaScript. This project can be expanded further by adding features like task persistence using local storage, editing tasks, or adding a filter for completed tasks.

Feel free to share your thoughts or improvements in the comments below!

Understanding Promises in JavaScript: A Comprehensive Guide

Muhammad Atif Latif — Fri, 27 Jun 2025 05:07:25 +0000

In this post, we'll explore Promises in JavaScript, a powerful feature for handling asynchronous operations. We'll cover what Promises are, how to use them, and some common patterns.

What is a Promise?

A Promise is an object that represents the eventual completion (or failure) of an asynchronous operation and its resulting value. It can be in one of three states:

Pending: The initial state, neither fulfilled nor rejected.
Fulfilled: The operation completed successfully.
Rejected: The operation failed.

Creating a Promise

You can create a Promise using the Promise constructor:

const myPromise = new Promise((resolve, reject) => {
    // Asynchronous operation
    const success = true; // Change this to false to see rejection

    if (success) {
        resolve('Operation was successful!');
    } else {
        reject('Operation failed.');
    }
});

Using Promises

You can handle the result of a Promise using .then() for fulfilled promises and .catch() for rejected promises:

myPromise
    .then(result => {
        console.log(result); // Output: Operation was successful!
    })
    .catch(error => {
        console.error(error); // Output: Operation failed.
    });

Chaining Promises

Promises can be chained to perform multiple asynchronous operations in sequence:

const firstPromise = new Promise((resolve) => {
    setTimeout(() => resolve('First operation complete'), 1000);
});

firstPromise
    .then(result => {
        console.log(result);
        return new Promise((resolve) => {
            setTimeout(() => resolve('Second operation complete'), 1000);
        });
    })
    .then(result => {
        console.log(result);
    });

Using `Promise.all()`

If you want to execute multiple promises in parallel and wait for all of them to complete, use Promise.all():

const promise1 = Promise.resolve('Promise 1 resolved');
const promise2 = Promise.resolve('Promise 2 resolved');

Promise.all([promise1, promise2])
    .then(results => {
        console.log(results); // Output: [ 'Promise 1 resolved', 'Promise 2 resolved' ]
    })
    .catch(error => {
        console.error('One of the promises failed:', error);
    });

Conclusion

Promises are a powerful way to handle asynchronous operations in JavaScript, making your code cleaner and easier to manage. Understanding how to create, use, and chain promises is essential for modern JavaScript development.

Feel free to share your thoughts or any questions in the comments below!

How to Build a REST API with Node.js and Express

Muhammad Atif Latif — Fri, 27 Jun 2025 05:03:55 +0000

In this tutorial, we'll learn how to create a simple REST API using Node.js and the Express framework. REST APIs are vital for enabling communication between clients and servers, allowing them to interact with data over the web.

Prerequisites

Before we begin, ensure you have the following installed:

Node.js: Download and install from [nodejs.org].
npm: Comes bundled with Node.js, but make sure it's up to date.

Step 1: Setting Up the Project

Create a new directory for your project:

   mkdir my-api
   cd my-api

Initialize a new Node.js project:

   npm init -y

Install Express:

   npm install express

Step 2: Creating Your First Endpoint

Create a file named server.js in your project directory and add the following code:

const express = require('express');
const app = express();
const PORT = process.env.PORT || 3000;

app.use(express.json());

// Simple GET endpoint
app.get('/', (req, res) => {
    res.send('Welcome to my API!');
});

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

Testing the Endpoint

Run your server:

node server.js

Open your browser or Postman and go to http://localhost:3000. You should see "Welcome to my API!".

Step 3: Adding CRUD Functionality

Now, let's implement Create, Read, Update, and Delete operations. For simplicity, we’ll store data in memory.

Sample Data

Add this sample data at the top of your server.js file:

let items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
];

Create an Item

Add the following POST endpoint:

app.post('/items', (req, res) => {
    const newItem = {
        id: items.length + 1,
        name: req.body.name,
    };
    items.push(newItem);
    res.status(201).send(newItem);
});

Read All Items

Add the following GET endpoint:

app.get('/items', (req, res) => {
    res.send(items);
});

Update an Item

Add the following PUT endpoint:

app.put('/items/:id', (req, res) => {
    const item = items.find(i => i.id === parseInt(req.params.id));
    if (!item) return res.status(404).send('Item not found.');

    item.name = req.body.name;
    res.send(item);
});

Delete an Item

Add the following DELETE endpoint:

app.delete('/items/:id', (req, res) => {
    const itemIndex = items.findIndex(i => i.id === parseInt(req.params.id));
    if (itemIndex === -1) return res.status(404).send('Item not found.');

    const deletedItem = items.splice(itemIndex, 1);
    res.send(deletedItem);
});

Step 4: Error Handling

To handle errors gracefully, you can add a middleware for 404 errors:

app.use((req, res) => {
    res.status(404).send('Resource not found.');
});

Conclusion

Congratulations! You've built a simple REST API using Node.js and Express. You can now expand this API by adding features like authentication, connecting to a database, or implementing advanced error handling.

DEV Community: Muhammad Atif Latif

Building a Simple To-Do List App with JavaScript

Features of the To-Do List App

Setting Up Your Project

Adding Styles

Adding Functionality with JavaScript

Conclusion

Understanding Promises in JavaScript: A Comprehensive Guide

What is a Promise?

Creating a Promise

Using Promises

Chaining Promises

Using Promise.all()

Conclusion

How to Build a REST API with Node.js and Express

Prerequisites

Step 1: Setting Up the Project

Step 2: Creating Your First Endpoint

Testing the Endpoint

Step 3: Adding CRUD Functionality

Sample Data

Create an Item

Read All Items

Update an Item

Delete an Item

Step 4: Error Handling

Conclusion

Further Reading

Using `Promise.all()`