Learn How to Create a Simple and Functional 

Notes App Using HTML, CSS, JavaScript, and Node.js


Step-by-Step Guide to Building Your Own Application

Creating your own notes app is a rewarding project that can enhance your coding skills and provide a useful tool for organizing your thoughts. In this guide, we'll walk you through building a basic notes app using HTML, CSS, JavaScript, and a simple backend with Node.js and Express.

Step 1: Setting Up Your Development Environment

Tools You'll Need:

  • Code Editor: Visual Studio Code, Sublime Text, or any other code editor of your choice.
  • Node.js: Ensure you have Node.js installed. You can download it from Node.js.
  • Git: Version control system for managing your project. Download from Git.

Project Structure:

Create a project folder and set up the following structure:

java
notes-app/
─ public/
        index.html
        styles.css
        app.js

 server.js
        package.json
        README.md


Step 2: Creating the Frontend

HTML (index.html)

Create an index.html file in the public folder:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notes App</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="app">
    <h1>Notes App</h1>
    <form id="note-form">
    <input type="text" id="note-input" placeholder="Write a note..." required>
    <button type="submit">Add Note</button>
        </form>
        <ul id="notes-list"></ul>
    </div>
    <script src="app.js"></script>
</body>
</html>


CSS (styles.css)

Create a styles.css file in the public folder:

CSS
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

#app {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rebate input(0, 0, 0, 0.1);
    width: 300px;
}

h1 {
    text-align: center;
}

form {
    display: flex;
}

input[type="text"] {
    flex: 1;
    padding: 10px;
    font-size: 16px;
}

button {
    padding: 10px;
    background-color: #007BFF;
    color: white;
    border: none;
    cursor: pointer;
}

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

li {
    background: #f9f9f9;
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
}


JavaScript (app.js)

Create an app.js file in the public folder:

javascript
document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('note-form');
    const noteInput = document.getElementById('note input);
    const notesList = document.getElementById('notes-list');

    form.addEventListener('submit', (e) => {
        e.preventDefault();
        const noteText = noteInput.value.trim();
        if (noteText) {
            addNoteToList(noteText);
            noteInput.value = '';
        }
    });

    function addNoteToList(note) {
        const li = document.createElement('li');
        li.textContent = note;
        notesList.appendChild(li);
    }
});


Step 3: Setting Up the Backend

Initialize Node.js Project

Navigate to your project folder in the terminal and run:

bash
npm init -y

This will create a package.json file.


Install Dependencies

Install Express, a web framework for Node.js:

bash
npm install express

Server (server.js)

Create a server.js file in the root of your project:

javascript
const express = require('express');
const path = require('path');

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

// Serve static files from the "public" directory
app.use(express.static(path.join(__dirname, 'public')));

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

Step 4: Running Your App

Start the Server

In the terminal, run:

bash
node server.js

Your app should now be running at http://localhost:3000.


Step 5: Adding Extra Features

To make your app more robust, consider adding the following features:

  • Persistent Storage: Use a database like MongoDB to save notes.
  • User Authentication: Allow users to create accounts and log in.
  • Enhanced UI: Improve the user interface with more styling and interactive elements.


Conclusion

By following these steps, you've created a basic notes app using HTML, CSS, JavaScript, and Node.js. This project serves as a foundation that you can build upon, adding new features and functionalities as you become more comfortable with web development.

For more detailed explanations and code examples, consider visiting MDN Web Docs and Express.js Guide. Happy coding!


Note: These are education articles only. It is not written to hurt the minds of others. If there is anything wrong I will delete this article immediately.

Follow me, Thank you for your time