0

Im a first timer in javacript and I tried to create a notes app but i got into this problem where everytime I refresh the page the notes disappear.

function addItem(){

    var ul = document.getElementById('q-block');
    var candidate = document.getElementById('q-field');
    var li = document.createElement("li");
    li.setAttribute('id', candidate.value);
    li.appendChild(document.createTextNode(candidate.value));
    ul.appendChild(li);
    li.className = 'q-content';
    li.value.setClassName = 'q-content';

}
*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

.container{
    height: 100vh;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 1fr);
}

.input-container{
    grid-column: 5/9;
    grid-row: 1/2;
    padding: 1em;
}

#q-field{
    height: 40px;
    padding: .5em;
    width: 100%;
    border: none;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
}

#q-auth{
    margin-top: 1em;
    width: 50%;
    border: none;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    padding: .5em;

}

#submitbtn{
    padding: 1em;
    border: none;
    outline: none;
    font-weight: bold;
    cursor: pointer;
    background-color: #000;
    color: white;
}

.q-table{
    margin: .5em;
    height: auto;
    grid-column: 1/-1;
    grid-row: 3/13;
    background-color: #fff; 
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3,1fr); 
    overflow-y: scroll; 
    grid-gap: 10px;
}

.q-content{
    list-style-type: none;
    height: 200px;
    background-color: #ddd; 
    padding: .5em;
    font-size: .9em;
    text-align: left;
    display: grid;
    grid-template-rows: 150px 40px;
}

.quote{
    margin-top: 1em;
}

.author{
    font-size: 1.3em;
    font-style: italic;
    grid-row: 2;
    text-align: left;
    font-weight: lighter;
}

/*.author:before{
    content: '-';
    margin-right: .1em;
}*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quote Saver</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    
    <div class="container">
        
        <div class="input-container">
            

            <textarea id="q-field" placeholder="Enter Quote"></textarea>
            <input type="text" id="q-auth" placeholder="Author">
            <input type="submit" value="SUBMIT" id="submitbtn" onclick="addItem()" onsubmit="check()">

        </div>

        <ul class="q-table" id="q-block">

        </ul>

    </div>

    <script type="text/javascript" src="js/main.js"></script>
</body>
</html>

is there any way to fix this? and how? Im so sorry again. I got some idea though like javascript cookies or local storage but I've had some difficulty on implementing that and right now im still trying to figure it out.

Ned Alturas
  • 1
  • 1
  • 1
    Yep. That is exactly what localStorage is for. (Cookies are for data that needs to be sent to a server along with every single request, and are managed _by_ the server, so you don't want to even be thinking of those). – Mike 'Pomax' Kamermans Oct 24 '20 at 15:37
  • you mean that it would run offline right? – Ned Alturas Oct 24 '20 at 15:45
  • "offline" is rarely the right term to use: using localStorage means the data gets stored by the browser in a way that lets you retrieve it again at some later point, for any URL that has the same `protocol://host:port` combination that was in effect when you set values in it (so it's not restricted to a single URL). It won't work "offline" because if your browser has no connectivity, it can't load URLs (unless you instead wrote your page using ServiceWorker, which is a whole different thing) – Mike 'Pomax' Kamermans Oct 24 '20 at 15:49
  • Okay thanks for that but I had heard this preventDefualt thing what does that do? is that gonna help me with this? – Ned Alturas Oct 24 '20 at 15:56
  • Allow me to point you to to [MDN](https://developer.mozilla.org/) where you can, and should, look up things you don't fully understand, or need more details on. – Mike 'Pomax' Kamermans Oct 24 '20 at 16:01

0 Answers0