swag

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Notes</title>
    <link rel="stylesheet" href="style.css">

</head>
<body>
<div class="row">
    <div id="title"><h1>Sticky Notes</h1></div>
</div>
<div class="row">
    <input type="text" id="noteInput" placeholder="Enter your text here" size="70">
    <button class="noteSubmit" onclick="addNote()">Add a note</button>
</div>
    <div id="noteContainer">

    </div>
    <script src="notes.js"></script>
</body>
</html>

function addNote(){
    let userNote = document.createElement("div");
    userNote.className="userNote";
    let noteText = document.getElementById("noteInput").value;
    let n = document.createTextNode(noteText);
    userNote.appendChild(n);
    document.getElementById("noteContainer").appendChild(userNote);
}

const notes = []

notes.push({
    title: 'first note',
    description: 'do something',
    pinned: true,
    color: 'green'
})

notes.push({
    title: 'second note',
    description: 'do something else',
    pinned: true,
    color: 'yellow'
})

notes.push({
    title: 'third note',
    description: 'do something else yet',
    pinned: false,
    color: 'green'
})

localStorage.setItem('notes', JSON.stringify(notes))

body {
    background-color: rgb(0, 51, 102);
    color: white;
}

.row {
    display:flex;
    justify-content: center;
}

.noteContainer {
    display:flex;
    justify-content: center;
}

.noteSubmit {
    background-color: #0080ff;
    padding: 1rem 1.5rem;
    border: none;
}

.userNote {
    background-color: rgb(179, 217, 255);
    color: black;
    padding: 3rem 6rem;
    width: 20%;
    text-align: center;
    font-size: 5rem;
}