index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyNotes</title>
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script&family=Montserrat:wght@300;700&display=swap"
        rel="stylesheet">
    <script src="https://kit.fontawesome.com/0076359c68.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="./main.css">
</head>

<body>

    <div class="menu">
        <h1><i class="fas fa-sticky-note"></i> MyNotes</h1>
        <div class="menu-buttons">
            <button class="add icon"><i class="fas fa-plus"></i> Add</button>
            <button class="delete-all icon"><i class="fas fa-trash-alt"></i> Delate all</button>
        </div>
    </div>


    <div class="note-area">
        <!-- <div class="note">

            <div class="note-header">
                <h3 class="note-title">Note #1</h3>
                <button class="delete-note">
                    <i class="fas fa-times icon"></i>
                </button>
            </div>
            <div class="note-body">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere dolores consectetur sapiente optio nobis
                obcaecati quisquam. Ullam, aut. Minus iste iure recusandae saepe officiis voluptas, molestiae
                accusantium at ipsa consequuntur!
            </div>

        </div> -->
    </div>


    <div class="note-panel">
        <h2>Add note</h2>
        <label for="category">Choose category</label>
        <select id="category" onchange="selectValue()">
            <option value="0" disabled selected>- Choose category -</option>
            <option value="1">Shopping</option>
            <option value="1">Work</option>
            <option value="1">Others</option>
        </select>

        <label for="text">Your note</label>
        <textarea id="text"></textarea>

        <p class="error">Fill all of the inputs!</p>

        <div class="panel-buttons">
            <button class="save icon"><i class="fas fa-save"></i> Save</button>
            <button class="cancel icon"><i class="far fa-window-close"></i> Cancel</button>
        </div>
    </div>


    <script src="./script.js"></script>
</body>

</html>