This is what I am working with <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Note Taking App</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Note Taking App</h1>
        <div class="note-editor">
            <input type="text" id="note-title" placeholder="Title (optional)">
            
            <div class="formatting-toolbar">
                <button id="bold-btn"><b>B</b></button>
                <button id="italic-btn"><i>I</i></button>
                <button id="underline-btn"><u>U</u></button>

                <label for="underline-color">Underline Color:</label>
                <input type="color" id="underline-color">
                
                <label for="highlight-color">Highlight Color:</label>
                <input type="color" id="highlight-color">
            </div>

            <div contenteditable="true" id="note-content" placeholder="Write your note here..." style="border: 1px solid #ccc; padding: 10px; min-height: 100px;"></div>
            <button id="save-note">Save Note</button>
        </div>
        <h2>Your Notes</h2>
        <div id="notes-list"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>
  /* Formatting toolbar styles */
.formatting-toolbar {
    margin-bottom: 10px;
    text-align: center;
}

.formatting-toolbar button {
    background-color: #f0f0f0;
    border: none;
    padding: 10px;
    margin-right: 5px;
    cursor: pointer;
    font-size: 1.2em;
    border-radius: 4px;
    transition: background-color 0.3s, border 0.3s;
}

.formatting-toolbar button.active {
    border: 2px solid #007bff;
    background-color: #e0e0e0;
}

.formatting-toolbar button:hover {
    background-color: #ddd;
}

#note-content {
    width: 100%;
    padding: 10px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 10px;
    background-color: #fff;
    min-height: 150px;
    overflow-y: auto;
    white-space: pre-wrap; /* ensures whitespace formatting is preserved */
}

.formatting-toolbar input[type="color"] {
    margin-right: 10px;
    cursor: pointer;
}
document.getElementById('save-note').addEventListener('click', saveNote);
document.getElementById('bold-btn').addEventListener('click', () => formatText('bold', 'bold-btn'));
document.getElementById('italic-btn').addEventListener('click', () => formatText('italic', 'italic-btn'));
document.getElementById('underline-btn').addEventListener('click', () => formatText('underline', 'underline-btn'));

document.getElementById('underline-color').addEventListener('input', () => applyColor('underlineColor', 'underline-color'));
document.getElementById('highlight-color').addEventListener('input', () => applyColor('hiliteColor', 'highlight-color'));

function formatText(command, buttonId) {
    document.execCommand(command, false, null);
    toggleActiveState(buttonId);
}

function applyColor(command, colorPickerId) {
    const color = document.getElementById(colorPickerId).value;
    document.execCommand(command, false, color);
}

function toggleActiveState(buttonId) {
    const button = document.getElementById(buttonId);
    button.classList.toggle('active');
}

function saveNote() {
    const title = document.getElementById('note-title').value;
    const content = document.getElementById('note-content').innerHTML;

    if (content.trim() === '') {
        alert('Note content cannot be empty!');
        return;
    }

    const note = {
        title: title,
        content: content,
    };

    let notes = JSON.parse(localStorage.getItem('notes')) || [];
    notes.push(note);
    localStorage.setItem('notes', JSON.stringify(notes));

    displayNotes();
    document.getElementById('note-title').value = '';
    document.getElementById('note-content').innerHTML = '';

    // Reset the formatting buttons and color pickers
    document.getElementById('bold-btn').classList.remove('active');
    document.getElementById('italic-btn').classList.remove('active');
    document.getElementById('underline-btn').classList.remove('active');
    document.getElementById('underline-color').value = '#000000';
    document.getElementById('highlight-color').value = '#ffff00';
}

function displayNotes() {
    const notesList = document.getElementById('notes-list');
    notesList.innerHTML = '';

    const notes = JSON.parse(localStorage.getItem('notes')) || [];

    notes.forEach((note, index) => {
        const noteItem = document.createElement('div');
        noteItem.classList.add('note-item');

        const noteTitle = document.createElement('h3');
        noteTitle.innerText = note.title || `Note ${index + 1}`;

        const noteContent = document.createElement('div');
        noteContent.innerHTML = note.content;

        noteItem.appendChild(noteTitle);
        noteItem.appendChild(noteContent);

        notesList.appendChild(noteItem);
    });
}

window.onload = displayNotes;
I want develop an app through code pen