We Keep Coding

Javascript file partially running

So I taught myself coding a few years ago, and got it just enough to put together a few tools for work. I recently had to migrate my site out of CodePen and onto an actual web server. Now I'm having an issue where part of my javascript is executing properly (a portion that empties all other input fields when a user enters an input field using JQuery), but the button that calculates an answer will not work. I believe the .click is not picking it up. Either way I'm not getting error messages, the button just does nothing when I press it.
When I put the code in a snippet to share with you guys, it works (just like it did in CodePen), but the exact same code on my web host does not work. I'm really at a loss here and any help would be greatly appreciated. I feel like I'm missing some small line of code that's supposed to be included in all web files.
$(document).ready(function() {
//Clear out input fields when not selected
$("#sg").focusin(function() {
$("#density").val("");
});
$("#density").focusin(function() {
$("#sg").val("");
});
$("#pounds").focusin(function() {
$("#grams").val("");
$("#percentage").val("");
});
$("#grams").focusin(function() {
$("#percentage").val("");
$("#pounds").val("");
});
$("#percentage").focusin(function() {
$("#pounds").val("");
$("#grams").val("");
});
$(".input_field").focusin(function() {
$("#density").removeClass('highlight');
$("#sg").removeClass('highlight');
$("#pounds").removeClass('highlight');
$("#grams").removeClass('highlight');
$("#percentage").removeClass('highlight');
});
//Calculate on press of enter
$("#button").keypress(function(e) {
if (e.which == 13) {
alert("this is working");
}
});
$("#button").click(function() {
calculateButton();
});
//Calculate values on button hit
function calculateButton() {
function numberWithCommas(x) {
x = x.toString();
var pattern = /(-?\d+)(\d{3})/;
while (pattern.test(x))
x = x.replace(pattern, "$1,$2");
return x;
}
function removeCommas(x) {
x = x.replace(",", "");
return x;
}
var results = 0;
//Pulling information from input cells
var densityStr = document.getElementById("density").value;
var sgStr = document.getElementById("sg").value;
var poundsStr = document.getElementById("pounds").value;
var gramsStr = document.getElementById("grams").value;
var percentageStr = document.getElementById("percentage").value;
//remove commas from string and then convert string to number
var densityNum = Number(removeCommas(densityStr));
var sgNum = Number(removeCommas(sgStr));
var poundsNum = Number(removeCommas(poundsStr));
var gramsNum = Number(removeCommas(gramsStr));
var percentageNum = Number(removeCommas(percentageStr));
if (densityStr.length !== 0) {
var sgConversion = densityNum / 8.3454;
$("#sg").val(sgConversion.toFixed(3));
$("#density").addClass('highlight');
} else if (sgStr.length !== 0) {
var densityConversion = sgNum * 8.3454;
$("#density").val(densityConversion.toFixed(3));
$("#sg").addClass('highlight');
}
if (poundsStr.length !== 0) {
$("#pounds").addClass("highlight");
densityNum = document.getElementById("density").value;
var gramsConversion = poundsNum * 119.83;
var percentageConversion = poundsNum / densityNum * 100;
$("#grams").val(gramsConversion.toFixed(0));
$("#percentage").val(percentageConversion.toFixed(2));
} else if (gramsStr.length !== 0) {
$("#grams").addClass("highlight");
densityNum = document.getElementById("density").value;
var poundsConversion = gramsNum / 119.83;
var percentageConversion = poundsConversion / densityNum * 100;
$("#pounds").val(poundsConversion.toFixed(2));
$("#percentage").val(percentageConversion.toFixed(2));
} else if (percentageStr.length !== 0) {
$("#percentage").addClass("highlight");
densityNum = document.getElementById("density").value;
var percentageDec = percentageNum / 100;
var poundsConversion = densityNum * percentageDec;
var gramsConversion = poundsConversion * 119.83;
$("#pounds").val(poundsConversion.toFixed(2));
$("#grams").val(gramsConversion.toFixed(2));
}
}
});
body {
margin: 0;
font-family: 'Lato', sans-serif;
background: #d2d2d2;
}
p {
text-align: center;
}
conatiner {
max-width: 1024px;
margin: 0 auto;
}
#navbarContainer {
background: #F44336;
overflow: hidden;
width: 100%;
margin: 0;
}
.navbar {
float: left;
display: block;
font-family: 'Lato', sans-serif;
height: 40px;
width: 200px;
line-height: 40px;
text-align: center;
background: #F44336;
text-decoration: none;
color: #212121;
}
.navbar:hover {
background: #E57373;
color: white;
}
.active {
background: #C62828;
color: white;
}
#formContainer {
width: 450px;
background: #FDFFFC;
margin: 50px auto;
padding: 0px;
border-radius: 8px;
overflow: hidden;
}
#formContainer header {
width: 100%;
height: 130px;
background-color: #3cba54;
overflow: auto;
color: white;
}
header h1 {
margin: 35px 0 0 0;
text-align: center;
line-height: 30px;
}
header h3 {
line-height: 40px;
text-align: center;
margin: 0;
}
#heading {
background-color: #3cba54;
height: 40px;
color: white;
margin-bottom: 25px;
margin-left: -30px;
}
#heading h3 {
line-height: 40px;
}
form {
padding: 20px 0 0 20px;
text-align: center;
}
label {
display: inline-block;
width: 220px;
text-align: right;
}
#myForm .input_field {
margin-left: 20px;
margin-bottom: 10px;
font-size: 20px;
padding-left: 10px;
width: 125px;
height: 35px;
font-size: 17px;
border-radius: 3px;
background-color: #E0E0E0;
border: none;
}
#button {
display: block;
border-radius: 6px;
width: 200px;
height: 50px;
padding: 8px 15px 8px 15px;
margin: 0 auto;
margin-bottom: 50px;
font-size: 16px;
box-shadow: 0 6px #540000;
background-color: #FF3636;
border: none;
outline: none;
}
#button:active {
background-color: #B81B1B;
box-shadow: 0 1px #27496d;
transform: translateY(5px);
}
.highlight {
background: #FFEB3B !important;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="container">
<div id="navbarContainer">
<a class="navbar" id="62" href="https://s.codepen.io/awheat/debug/MpMrEo/yYAyLDjQWgKr">326 IAC 6-2 Tool</a>
<a class="navbar" id="63" href="https://s.codepen.io/awheat/debug/gWmazm/NQkzYnjeQZyA">326 IAC 6-3 Tool</a>
<a class="navbar active" id="voc" href="https://s.codepen.io/awheat/debug/qVpPNm/VGAWNnJYBjZr">VOC Conversion Tool</a>
</div>
<div id="formContainer">
<header>
<h1>VOC Conversion Tool</h1>
<h3>(for conversion of VOC data to other units)</h3>
</header>
<form id="myForm">
<label>Density of Coating (lbs/gal): </label><input type="text" id="density" class="input_field">
<label>Specific Graviy: </label><input type="text" id="sg" class="input_field">
<div id="heading">
<h3>VOC Content</h3>
</div>
<label>Pounds per Gallon (lbs/gal): </label><input type="text" id="pounds" class="input_field">
<label>Grams per Liter (g/L): </label><input type="text" id="grams" class="input_field">
<label>Percentage (%): </label><input type="text" id="percentage" class="input_field"><br><br>
<input type="button" id="button" value="Calculate" autofocus>
</form>
</div>
</div>
</body>
</html>

Sometimes putting script tags before the elements on the page can cause issues. You can try to put the scripts at the bottom of the body like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="navbarContainer">
<a class="navbar" id="62" href="https://s.codepen.io/awheat/debug/MpMrEo/yYAyLDjQWgKr">326 IAC 6-2 Tool</a>
<a class="navbar" id="63" href="https://s.codepen.io/awheat/debug/gWmazm/NQkzYnjeQZyA">326 IAC 6-3 Tool</a>
<a class="navbar active" id="voc" href="https://s.codepen.io/awheat/debug/qVpPNm/VGAWNnJYBjZr">VOC Conversion Tool</a>
</div>
<div id="formContainer">
<header>
<h1>VOC Conversion Tool</h1>
<h3>(for conversion of VOC data to other units)</h3>
</header>
<form id="myForm">
<label>Density of Coating (lbs/gal): </label><input type="text" id="density" class="input_field">
<label>Specific Graviy: </label><input type="text" id="sg" class="input_field">
<div id="heading">
<h3>VOC Content</h3>
</div>
<label>Pounds per Gallon (lbs/gal): </label><input type="text" id="pounds" class="input_field">
<label>Grams per Liter (g/L): </label><input type="text" id="grams" class="input_field">
<label>Percentage (%): </label><input type="text" id="percentage" class="input_field"><br><br>
<input type="button" id="button" value="Calculate" autofocus>
</form>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

Saving To-Do list data to local storage with HTML

So if I want to save all the To-Do items in Local storage and retrieve when I restart the computer or refresh the page all the items come up on the page in their original order.?
//check of spec
$("ol").on("click", "li", function(){
$(this).toggleClass("completed");
});
//click on X to delete To-DO
$("ol").on("click", "span", function(event){
$(this).parent().fadeOut(500,function(){
$(this).remove();
});
event.stopPropagation();
});
$("input[type='text'").keypress(function(event){
if(event.which === 13) {
//grabbing the text typed
var todoText = $(this).val();
$(this).val("");
//create a new LI and add to UL
$("ol").append("<li><span><i class='fa fa-trash'></i></span> " + todoText +"</li>")
}
});
$(".fa-plus").click(function(){
$("input[type='text'").fadeToggle();
});
h1 {
background: #2980b9;
color: white;
margin: 0;
padding: 10px 15px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
iframe {
float: left;
}
ol {
/* THE BULLET POINTS
list-style: none;
*/
margin: 0;
padding: 0;
font-size: 18px;
}
body {
background-color: rgb(13, 168, 108);
}
li {
background: #fff;
height: 30px;
line-height: 30px;
color: #666;
}
li:nth-child(2n){
background: #d3d3d3;
}
span {
height: 30px;
width: 0px;
margin-right: 20px;
text-align: center;
color:white;
display: inline-block;
transition: 0.2s linear;
opacity:0;
background: #e74c3c
}
li:hover span {
width: 30px;
opacity: 1.0;
}
input {
font-size: 18px;
width: 100%;
padding: 13px 13px 13px 20px;
box-sizing: border-box;
border: 3px solid rgba(0,0,0,0);
color: #2980b9;
background-color: #e4e4e4;
}
input:focus {
background: white;
border: 3px solid green;
/*OUTLINE OF INPUT BOX
outlin: none; */
}
.fa-plus {
float: right;
}
#container {
width: 360px;
margin: 60px auto;
background: #d3d3d3;
box-shadow: 0 0 3px rgba(0,0,0,0.1);
}
.completed {
color: red;
text-decoration: line-through;
}
<!DOCTYPE html>
<html>
<head>
<title>ToDo List</title>
<link rel="stylesheet" type="text/css" href="utd.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
} );
</script>
</head>
<body>
<iframe src="http://free.timeanddate.com/clock/i5zr5d5i/n1991/szw110/szh110/hoc09f/hbw0/hfc09f/cf100/hnce1ead6/fas30/fdi66/mqc000/mql15/mqw4/mqd98/mhc000/mhl15/mhw4/mhd98/mmc000/mml10/mmw1/mmd98/hhc00f/hhs2/hmcf00/hms2/hsv0" frameborder="0" width="110" height="110"></iframe>
<div id="container">
<h1>To-do List <i class="fa fa-plus"></i></h1>
<form id="task-list">
<input type="text" placeholder="Add a To-Do" id="task">
</form>
<ol id="sortable">
<li><span><i class="fa fa-trash"></i></span> EXAMPLE</li>
</ol>
</div>
<script type="text/javascript" src="Utd.js"></script>
</body>
</html>

Happy Holidays!
Your coding wishes are granted. This is a gift, to you, and you will have to be a good person and post better examples and remember that people are not here to write code for you.
There was a LOT of stuff lacking from your example.
Add items to a list
Update local storage when items are added to a list
Allow list to be sorted
Update local storage when list is updated
Allow task items to be marked completed
Update local storage when items are completed
Allow task items to be deleted
Update local storage when tasks are deleted
Load locally stored tasks
I think that covers everything you wanted this script to do. Is it becoming more clear now?
Working Example: https://jsfiddle.net/Twisty/ae6oLr47/12/
HTML
<iframe src="https://free.timeanddate.com/clock/i5zr5d5i/n1991/szw110/szh110/hoc09f/hbw0/hfc09f/cf100/hnce1ead6/fas30/fdi66/mqc000/mql15/mqw4/mqd98/mhc000/mhl15/mhw4/mhd98/mmc000/mml10/mmw1/mmd98/hhc00f/hhs2/hmcf00/hms2/hsv0" frameborder="0" width="110"
height="110"></iframe>
<div id="container">
<h1>To-do List <i class="fa fa-plus"></i></h1>
<form id="task-list">
<input type="text" placeholder="Add a To-Do" id="task">
<button type="submit"></button>
</form>
<ol id="sortable">
<li id="task-EXAMPLE"><span><i class="fa fa-trash"></i></span>
<label>EXAMPLE</label>
</li>
</ol>
</div>
The first time this loads, there will be no storage, so we can read an examples from the HTML. As you will see, once you make an update, this will no longer be the case.
Q: Why the <button>?
A: <form> likes to have a submit button. It does not need it, yet having it will help a lot in ways I do not want to go into for this question.
JavaScript
$(function() {
$("#sortable").on("click", function(event) {
console.log(event.target);
var $thatItem = $(event.target).parents("li");
switch (event.target.nodeName) {
case "SPAN":
case "I":
$thatItem.fadeOut(500, function() {
$thatItem.remove();
$("#sortable").sortable("refresh");
});
break;
case "LABEL":
$thatItem.toggleClass("completed");
break;
}
setTimeout(function() {
updateLocalStorage($("#sortable"));
}, 500);
event.stopPropagation();
});
$("#task-list").submit(function(event) {
event.preventDefault();
// Grabbing the text typed
var todoText = $("#task").val();
addListItem($("#sortable"), todoText, false);
// Clear the text field
$("#task").val("");
updateLocalStorage($("#sortable"));
});
$(".fa-plus").click(function() {
$("#task-list").fadeToggle();
});
$("#sortable").sortable({
update: function(e, ui) {
updateLocalStorage($(this));
}
}).disableSelection();
function addListItem($t, s, c) {
//create a new LI
var $li = $("<li>", {
id: "task-" + s.replace(" ", "_")
});
if (c) {
$li.addClass("completed");
}
var $wrap = $("<span>").appendTo($li);
$wrap.append($("<i>", {
class: "fa fa-trash"
}));
$li.append($("<label>").html(s));
$li.appendTo($t);
$t.sortable("refresh");
}
function updateLocalStorage($list) {
var tasks = {};
$list.find("li").each(function(ind, elem) {
var task = $(elem).text().trim();
var completed = $(elem).hasClass("completed");
tasks[task] = completed;
if (typeof(Storage) !== "undefined") {
localStorage.setItem("tasks", JSON.stringify(tasks));
}
});
}
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
if (localStorage.getItem("tasks") !== "undefined") {
var localTasks = JSON.parse(localStorage.getItem("tasks"));
// Grab stored tasks
$("#sortable").find("li").remove();
$.each(localTasks, function(task, status) {
addListItem($("#sortable"), task, status);
});
}
} else {
// Sorry! No Web Storage support..
}
});
You might see that there is very little of your original code left in here. There was just a lot of places to improve the code. I will discuss a bit briefly.
Click Events
Since we're basically listening for click events on the same parent, but want to do different things when specific elements are clicked, that are going to be dynamically created, we can make use of the event.target from the click event. If it's the span or the i that's clicked, we do one thing, if it's the label, another.
The setTimeout is just a way to create a delay in the operations from switch to updating. Otherwise the update will execute almost on top of the switch and will not see the changes to the list, this record no changes.
Submit Event
When you hit Enter or Return you're essentially submitting the form. Part of the reason to add a submit button. Instead of catching the keypress and trying to prevent this, why not just use the submit event to our advantage. This method will help on mobile browsers and such.
Sortable Update Event
When the list is sorted, and updated, we need to update that order in the local storage. Now is the time to do that.
Functions
I think these are pretty clear. You have an operation you will repeat many times, write a function.
Get Item
The last bit of code will load when the page is all ready. It will check for localStorage and check if there are tasks stored within. It will then populate the list with them.
Q: What's with the JSON.stringify()?
A: Yes, you can store stuff locally... only as String. This creates a string version of our object for storage.
Comment if you have other questions.

//check of spec
$("ol").on("click", "li", function(){
$(this).toggleClass("completed");
});
//click on X to delete To-DO
$("ol").on("click", "span", function(event){
$(this).parent().fadeOut(500,function(){
$(this).remove();
});
event.stopPropagation();
});
$("input[type='text'").keypress(function(event){
if(event.which === 13) {
//grabbing the text typed
var todoText = $(this).val();
$(this).val("");
//create a new LI and add to UL
$("ol").append("<li><span><i class='fa fa-trash'></i></span> " + todoText +"</li>")
}
});
$(".fa-plus").click(function(){
$("input[type='text'").fadeToggle();
});
h1 {
background: #2980b9;
color: white;
margin: 0;
padding: 10px 15px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
iframe {
float: left;
}
ol {
/* THE BULLET POINTS
list-style: none;
*/
margin: 0;
padding: 0;
font-size: 18px;
}
body {
background-color: rgb(13, 168, 108);
}
li {
background: #fff;
height: 30px;
line-height: 30px;
color: #666;
}
li:nth-child(2n){
background: #d3d3d3;
}
span {
height: 30px;
width: 0px;
margin-right: 20px;
text-align: center;
color:white;
display: inline-block;
transition: 0.2s linear;
opacity:0;
background: #e74c3c
}
li:hover span {
width: 30px;
opacity: 1.0;
}
input {
font-size: 18px;
width: 100%;
padding: 13px 13px 13px 20px;
box-sizing: border-box;
border: 3px solid rgba(0,0,0,0);
color: #2980b9;
background-color: #e4e4e4;
}
input:focus {
background: white;
border: 3px solid green;
/*OUTLINE OF INPUT BOX
outlin: none; */
}
.fa-plus {
float: right;
}
#container {
width: 360px;
margin: 60px auto;
background: #d3d3d3;
box-shadow: 0 0 3px rgba(0,0,0,0.1);
}
.completed {
color: red;
text-decoration: line-through;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>ToDo List</title>
<link rel="stylesheet" type="text/css" href="utd.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
} );
</script>
</head>
<body>
<iframe src="http://free.timeanddate.com/clock/i5zr5d5i/n1991/szw110/szh110/hoc09f/hbw0/hfc09f/cf100/hnce1ead6/fas30/fdi66/mqc000/mql15/mqw4/mqd98/mhc000/mhl15/mhw4/mhd98/mmc000/mml10/mmw1/mmd98/hhc00f/hhs2/hmcf00/hms2/hsv0" frameborder="0" width="110" height="110"></iframe>
<div id="container">
<h1>To-do List <i class="fa fa-plus"></i></h1>
<form id="task-list">
<input type="text" placeholder="Add a To-Do" id="task">
</form>
<ol id="sortable">
<li><span><i class="fa fa-trash"></i></span> EXAMPLE</li>
</ol>
</div>
<script type="text/javascript" src="Utd.js"></script>
</body>
</html>
//check of spec
$("ol").on("click", "li", function(){
$(this).toggleClass("completed");
});
//click on X to delete To-DO
$("ol").on("click", "span", function(event){
$(this).parent().fadeOut(500,function(){
// $(this).remove();
});
//event.stopPropagation();
});
$("input[type='text'").keypress(function(event){
if(event.which === 13) {
//grabbing the text typed
var todoText = $(this).val();
$(this).val("");
//create a new LI and add to UL
$("ol").append("<li><span><i class='fa fa-trash'></i></span> " + todoText +"</li>")
}
});
$(".fa-plus").click(function(){
$("input[type='text'").fadeToggle();
});
h1 {
background: #2980b9;
color: white;
margin: 0;
padding: 10px 15px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
iframe {
float: left;
}
ol {
/* THE BULLET POINTS
list-style: none;
*/
margin: 0;
padding: 0;
font-size: 18px;
}
body {
background-color: rgb(13, 168, 108);
}
li {
background: #fff;
height: 30px;
line-height: 30px;
color: #666;
}
li:nth-child(2n){
background: #d3d3d3;
}
span {
height: 30px;
width: 0px;
margin-right: 20px;
text-align: center;
color:white;
display: inline-block;
transition: 0.2s linear;
opacity:0;
background: #e74c3c
}
li:hover span {
width: 30px;
opacity: 1.0;
}
input {
font-size: 18px;
width: 100%;
padding: 13px 13px 13px 20px;
box-sizing: border-box;
border: 3px solid rgba(0,0,0,0);
color: #2980b9;
background-color: #e4e4e4;
}
input:focus {
background: white;
border: 3px solid green;
/*OUTLINE OF INPUT BOX
outlin: none; */
}
.fa-plus {
float: right;
}
#container {
width: 360px;
margin: 60px auto;
background: #d3d3d3;
box-shadow: 0 0 3px rgba(0,0,0,0.1);
}
.completed {
color: red;
text-decoration: line-through;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>ToDo List</title>
<link rel="stylesheet" type="text/css" href="utd.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
} );
</script>
</head>
<body>
<div id="container">
<h1>To-do List <i class="fa fa-plus"></i></h1>
<input type="text" placeholder="Add a To-Do" id="task">
<ol id="sortable">
<li><span><i class="fa fa-trash"></i></span> EXAMPLE</li>
</ol>
</div>
<script type="text/javascript" src="Utd.js"></script>
</body>
</html>

After making edits in browser, simply save the page as HTML with different file name. Your selected values will be saved.

save a dynamically created <textarea> tag using javascript ONLY

I am creating textarea tags as the user clicks a button. And i want the dynamically created texarea tags to remain as such when we close and open the browser again.
I am able to save the CONTENT of the textarea tag,but there is no point in it when the textarea tag itself doesnt remain after closing the browser.
ok: SO here is the code :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id="A" onclick="add()" type="button">ADD</button>
<button id="S" onclick="save()" type="button">SAVE</button>
<button id="E" onclick="edit()" type="button">EDIT</button>
<button id="D" onclick="del('x')" type="button">DELETE</button>
</body>
<script type="text/javascript">
var text_new,x;
var i=0,j,y;
function add()
{
text_new=document.createElement("textarea");/*I WANT TO STORE THESE CREATED TAGS USING LOCAL STORAGE*/
text_new.id="a"+i.toString();
var t = document.createTextNode("");
text_new.appendChild(t);
console.log(text_new.id);
i++;
document.body.appendChild(text_new);
}
document.body.addEventListener("click", activate);
function activate()
{
if(document.activeElement.tagName.toLowerCase() ==="textarea")
{
x = document.activeElement.id;
y=x;
console.log(x);
console.log(typeof x);
}
}
function save()
{
document.getElementById(x).readOnly=true;
console.log(document.getElementById(x).value);
localStorage.y=document.getElementById(x).value;
document.getElementById(x).value=localStorage.y;
}
function edit()
{
document.getElementById(x).readOnly=false;
}
function del()
{
var element = document.getElementById(x);
element.remove();
}
</script>
</html>

Suggest you to try this.
Cookies are data, stored in small text files, on your computer.
When a user visits a web page, his name can be stored in a cookie.
Next time the user visits the page, the cookie "remembers" his name.
https://www.w3schools.com/js/js_cookies.asp

You can use html5 web storage, specifically the localStorage.
https://www.w3schools.com/html/html5_webstorage.asp
I hope this Helps!

ok i got it....
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
body
{
box-sizing: border-box;
background-image: url(images/note2.jpg);
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
body, html {
height: 100%;
margin: 0;
}
button {
display: inline-block;
width: 150px;
background: black;
margin: 0 10px 0 0;
color: white;
font-size: 25px;
font-family: Oswald, Helvetica, Arial, sans-serif;
line-height: 1.8;
appearance: none;
box-shadow: none;
text-align: center;
border-radius: 20px;
border : 6px solid black;
}
#D:hover
{
background: red;
}
#S:hover
{
background: green;
}
button:hover
{
background-color: #417cb8
}
button:active
{
background-color: #417cb8;
box-shadow: 0 5px #27496d;
transform: translateY(5px);
}
textarea
{
height: 170px;
width: 500px;
border: 3px solid black;
border-radius: 20px;
resize: none;
font-family: Tahoma, Verdana, Segoe, sans-serif;
font-size: 20px;
padding: 10px;
letter-spacing: 2px;
opacity: 0.6;
text-overflow: auto;
}
#header
{
height: 100px;
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 40px;
text-align: center;
padding-top: 30px;
position: relative;
}
#buts
{
position: relative;
margin: 0 auto;
}
#con
{
position: relative;
text-align: center;
padding: 10px;
}
img
{
position: absolute;
height: 60%;
}
</style>
<body>
<div id="header">NOTE IT OR FORGET IT!
<img src="images/note1.png"> </div>
<div id="con">
<div id="buts">
<button id="A" onclick="add()" type="button">ADD</button>
<button id="S" onclick="save()" type="button">SAVE</button>
<button id="E" onclick="edit()" type="button">EDIT</button>
<button id="D" onclick="del('x')" type="button">DELETE</button>
</div>
</div>
</body>
<script type="text/javascript">
var text_new,x;
var i=0,j,y,num=0;
window.onload=function ()
{i=0;
for (var key in localStorage)
{
text_new=document.createElement("textarea");
var t = document.createTextNode(localStorage.getItem(key));
text_new.appendChild(t);
document.body.appendChild(text_new);
text_new.id=key;
i++;
}
}
/*window.onbeforeunload=function()
{
var x=document.querySelectorAll("textarea");
for(num=0;num<x.length;x++)
{
if
}
}
}*/
function add()
{
text_new=document.createElement("textarea");
text_new.id="a"+i.toString();
for(var key in localStorage)
{
if (text_new.id==key)
{
i++;
text_new.id="a"+i.toString();
}
}
var t = document.createTextNode("");
text_new.appendChild(t);
console.log(text_new.id);
i++;
document.body.appendChild(text_new);
}
document.body.addEventListener("click", activate);
function activate()
{
if(document.activeElement.tagName.toLowerCase() ==="textarea")
{
x = document.activeElement.id;
console.log(x);
}
}
function save()
{
if((document.getElementById(x).readOnly==false)&&(document.getElementById(x).value!=""))
{
document.getElementById(x).readOnly=true;
console.log(x);
console.log(document.getElementById(x).value);
localStorage.setItem(x,document.getElementById(x).value);
document.getElementById(x).value=localStorage.getItem(x);
}
}
function edit()
{
document.getElementById(x).readOnly=false;
}
function del()
{
var element = document.getElementById(x);
localStorage.removeItem(x);
element.remove();
}
</script>
</html>

Showing/hiding <div> with JavaScript

I wrote simple JavaScript to show hidden <div> after clicking another <div>. Everything works fine however when clicking checkbox in that <div> the hidden one appears and hides instantly.
$(document).ready(function() {
$('#click1').click(function() {
if ($('#hidden1').is(':hidden')) {
$('#hidden1').show(500);
} else {
$('#hidden1').hide(500);
}
});
});
.divCell {
width: 500px;
height: 35px;
margin: 2px 0;
display: inline-block;
background-color: #D4F78F;
}
.checkbox_div {
width: 25px;
position: relative;
margin: 5px;
float: left;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label {
width: 25px;
height: 25px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
background-color: white;
border-radius: 4px;
}
.div_name_divcell {
line-height: 35px;
width: auto;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="divCell" id="click1">
<div class="checkbox_div">
<input type="checkbox" id="checkbox1">
<label for="checkbox1"><span></span>
</label>
</div>
<div class="div_name_divcell">Name1</div>
</div>
<div id="hidden1" style="display: none;">
hidden text
</div>
Fiddle:
https://jsfiddle.net/mamzj4tw/

Add event.preventdefault to your code
$(document).ready(function() {
$('#click1').click(function(event) {
event.preventDefault();
if ($('#hidden1').is(':hidden')) {
$('#hidden1').show(500);
} else {
$('#hidden1').hide(500);
}
});
});
Here is the Fiddle: https://jsfiddle.net/mamzj4tw/1/

You can use just return false;
$(document).ready(function() {
$('#click1').click(function() {
if ($('#hidden1').is(':hidden')) {
$('#hidden1').show(500);
} else {
$('#hidden1').hide(500);
}
return false;
});
});
https://jsfiddle.net/shadiq_aust/m91wf79y/1/

Multiple image upload and preview

I am learning how to upload multiple images and showing their preview...
I came across the following code
<html>
<head>
<style>
.input-file-row-1:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.input-file-row-1{
display: inline-block;
margin-top: 25px;
position: relative;
}
#preview_image {
display: none;
width: 90px;
height: 90px;
margin: 2px 0px 0px 5px;
border-radius: 10px;
}
.upload-file-container {
position: relative;
width: 100px;
height: 137px;
overflow: hidden;
background: url('images/picplus.png') top center no-repeat;
float: left;
margin-left: 23px;
}
.upload-file-container-text{
font-family: Arial, sans-serif;
font-size: 12px;
color: #719d2b;
line-height: 17px;
text-align: center;
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100px;
height: 35px;
}
.upload-file-container-text > span{
border-bottom: 1px solid #719d2b;
cursor: pointer;
}
.one_opacity_0 {
opacity: 0;
height: 0;
width: 1px;
float: left;
}
</style>
<script>
function readURL(input,target)
{
if(input.files && input.files[0])
{
var reader=new FileReader();
var image_target=$(target);
reader.onload=function(e)
{
image_target.attr('src',e.target.result).show();
};
reader.readAsDataUrl(input.files[0]);
}
}
$("patient_pic").live("change",function(){
readURL(this,"#preview_image")
});
</script>
</head>
<body>
<form name="" method="post" action="#" class="feedback-form-1">
<fieldset>
<div class="input-file-row-1">
<div class="upload-file-container">
<img id="preview_image" src="#" alt="" />
<div class="upload-file-container-text">
<div class = 'one_opacity_0'>
<input type="file" id="patient_pic" label = "add" />
</div>
<span> Add Photo </span>
</div>
<div class="upload-file-container-text">
<div class = 'one_opacity_0'>
<input type="file" id="patient_pic" label = "add" />
</div>
<span> Add Photo </span>
</div>
</div>
</div>
</fieldset>
</form>
</body>
</html>
I came across this JS Fiddle which explains it perfectly to me. But being a beginner I know it includes a jQuery library which clearly shows in framework extension of Fiddle. Now my issue is, how should I include it when I start the coding on my machine?
What will be included in the head (<script src="???">) section to make a call to the library?

Below is a working example of a solution to preview multiple uploaded image. (Source, Fiddle)
window.onload = function() {
//Check File API support
if (window.File && window.FileList && window.FileReader) {
var filesInput = document.getElementById("files");
filesInput.addEventListener("change", function(event) {
var files = event.target.files; //FileList object
var output = document.getElementById("result");
for (var i = 0; i < files.length; i++) {
var file = files[i];
//Only pics
if (!file.type.match('image'))
continue;
var picReader = new FileReader();
picReader.addEventListener("load", function(event) {
var picFile = event.target;
var div = document.createElement("div");
div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +
"title='" + picFile.name + "'/>";
output.insertBefore(div, null);
});
//Read the image
picReader.readAsDataURL(file);
}
});
} else {
console.log("Your browser does not support File API");
}
}
body {
font-family: ‘Segoe UI’;
font-size: 12pt;
}
header h1 {
font-size: 12pt;
color: #fff;
background-color: #1BA1E2;
padding: 20px;
}
article {
width: 80%;
margin: auto;
margin-top: 10px;
}
.thumbnail {
height: 100px;
margin: 10px;
}
<form id='post-form' class='post-form' method='post'>
<label for='files'>Select multiple files: </label>
<input id='files' type='file' multiple/>
<output id='result' />
</form>

First include Jquery library in your <head> section
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
Then below that
<script>
$(function(){
//Here your function
});
</script>
Change in your function use on instead of live
$("patient_pic").on("change",function(){
readURL(this,"#preview_image")
});
jQuery has deprecated live() since 1.7, instead use on()

Its as simple as :-
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
//Your Code Goes Here
});
</script>
</head>
<body>
<!--Your H
</body>
</html>