Note app is a web based system developed for keeping notes and reduce use of papers that are sometimes difficult to keep

Technologies used

HTML5
CSS3
Bootstrap 5
JavaScript
font awesome 6
Feature of the system
add note component to add a new note
Edit icon for editing and saving the notes
delete icon for deleting a note

where does the system store

Localstorage. So the user does not lose data even when the tab is closed Here is the link to the system notes app

Source code

HTML5


<!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="style.css" />
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
        />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.1.1/marked.min.js"></script>
        <script src="script.js" defer></script>
        <link rel="icon" href="sydotech.png">
    </head>
    <body>
        <button class="add" id="add">
            <i class="fas fa-plus"></i> Add note
        </button>
    </body>

    <footer>
        <div class="company">
            <a href="http://www.sydotech.com/" style="text-decoration: none ;">ICT specialists/ Sydotech</a>
        </div>
        <div class="date">
            copyright &copy; <span class="dated"></span>
        </div>
    </footer>

</html>

CSS

######Create a file and name it style.css

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap");

* {
    box-sizing: border-box;
}

body {
    background-color: deepskyblue !important;
    display: flex;
    flex-wrap: wrap;
    font-family: "Poppins", sans-serif;
    margin: 0;
    padding-top: 3rem;
}
.notes img{
    height: 40px;
    width: 40px;
}
.add {
    background-color: #9ec862;
    border-radius: 3px;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0.5rem 1rem;
    position: fixed;
    top: 1rem;
    right: 1rem;
}
input{
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
    background: transparent;
}
.note {
    background-color: #fff;
    box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);
    margin: 20px;
    height: 400px;
    width: 400px;
}

.note .tools {
    background-color: #9ec862;
    display: flex;
   justify-content: space-between;
    padding: 0.5rem;
}
img{
    height: 50px;
    width: 50px;
    border-radius: 50%;
}
.note .tools button {
    background-color: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 1rem;
    margin-left: 0.5rem;
}

.note .main {
    background-color: #eee;
    overflow: hidden;
    height: 400px;
    width: 100%;
}

.note textarea {
    outline: none;
    font-family: inherit;
    font-size: 1.2rem;
    border: none;
    height: 400px;
    width: 100%;
}

.note .hidden {
    display: none;
}
footer{
    padding: 1rem;
    font-size: 1.1rem;
    background: grey ;
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
}

JavaScript

create a file and name it script.js

const addBtn = document.getElementById("add");

const notes = JSON.parse(localStorage.getItem("notes"));

if (notes) {
    notes.forEach((note) => {
        addNewNote(note);
    });
}

addBtn.addEventListener("click", () => {
    addNewNote();
});

function addNewNote(text = "") {
    const note = document.createElement("div");
    note.classList.add("note");

    note.innerHTML = `
        <div class="notes">
        <input type="text">
            <div class="tools">
            <div>
            <img src="sydotech.png" alt="">
            </div>
                <div>
                <button class="edit"><i class="fas fa-edit"></i></button>
                <button class="delete"><i class="fas fa-trash-alt"></i></button>
                </div>
            </div>
            <div class="main ${text ? "" : "hidden"}"></div>
            <textarea class="${text ? "hidden" : ""}"></textarea>
        </div>
    `;
    note.querySelector('input').value = new Date().toDateString();
    const editBtn = note.querySelector(".edit");
    const deleteBtn = note.querySelector(".delete");

    const main = note.querySelector(".main");
    const textArea = note.querySelector("textarea");

    textArea.value = text;
    main.innerHTML = marked(text);

    editBtn.addEventListener("click", () => {
        main.classList.toggle("hidden");
        textArea.classList.toggle("hidden");
    });

    deleteBtn.addEventListener("click", () => {
        note.remove();

        updateLS();
    });

    textArea.addEventListener("input", (e) => {
        const { value } = e.target;

        main.innerHTML = marked(value);

        updateLS();
    });

    document.body.appendChild(note);
}

function updateLS() {
    const notesText = document.querySelectorAll("textarea");

    const notes = [];

    notesText.forEach((note) => {
        notes.push(note.value);
    });

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



// ==========working on date========
document.querySelector('.dated').innerHTML = new Date().getFullYear();

Kato James's blog