Instantly share code, notes, and snippets.

Embed
What would you like to do?
to demonstrate localstorage; allows to take notes and store the notes in localstorage
<!DOCTYPE html>
<html>
<head>
<title>
Journal page
</title>
<link rel="stylesheet" href="journal.css">
<link href="https://fonts.googleapis.com/css?family=Concert+One|Work+Sans" rel="stylesheet">
</head>
<body>
<header>
<div id="hea"></div>
<button id="myBtn" class="button" onclick="add()">Add</button>
</header>
<main>
<div class="box-1">
<form class="form">
<textarea id="jrnl" class= "journal-input" cols="50" rows="20" autofocus></textarea>
<button type="button" onclick="save()"class="form-btn">Done</button>
</form>
</div>
<div class="box-2">
</div>
</main>
</body>
<script>
if(localStorage.journal==undefined) {
localStorage.setItem("journal",JSON.stringify([]));
}
else {
var j = JSON.parse(localStorage.journal);
j.forEach(element => {
var para = document.createElement('p');
var t=document.createTextNode(element);
para.appendChild(t);
para.className = "box-3";
document.getElementsByClassName('box-2')[0].appendChild(para);
});
}
var arr =["col1","col2","col3","col4","col5"];
var header = document.getElementById('hea');
var heading = "I will accomplish my desired skills in one month!";
for(var i=0;i<heading.length;i++) {
var n = document.createElement("span");
if(heading[i]==' ')
n.innerHTML = '&nbsp;&nbsp;&nbsp;&nbsp;';
else {
n.className = "text"+" "+arr[parseInt(((Math.random()*5)),10)];
var t =document.createTextNode(heading[i]);
n.appendChild(t);
}
header.appendChild(n);
}
function add() {
}
function save() {
var j = JSON.parse(localStorage.journal);
var div = document.getElementsByClassName('box-2')[0];
var text = document.getElementById('jrnl');
j.push(text.value);
text.value="";
while(div.firstElementChild) {
div.removeChild(div.firstElementChild);
}
j.forEach(element => {
var para = document.createElement('p');
var t=document.createTextNode(element);
para.appendChild(t);
para.className = "box-3";
div.appendChild(para);
});
localStorage.setItem("journal",JSON.stringify(j));
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment