I would like to be able to add an item to the list, and view it when I reload the page. I am not sure how to go about doing this. I do not need it stored in a database or anything, I would just like it to be there on screen until I manually delete the list item. Is this possible?
I believe this would be kept on sharepoint, and used with multiple users adding and editing the content, but when I get to that step, I may need additional help with that as well, if that makes any difference to the current question of keeping the LI information.
$("ul").on("click", "li", function(){
$(this).toggleClass("completed");
});
$("ul").on("click", "span", function(event){
$(this).parent().fadeOut(500,function(){
$(this).remove();
});
event.stopPropagation();
});
$("input[type='text']").keypress(function(event){
if(event.which === 13){
var name = $('#name').val();
$('#name').val("");
var number = $('#number').val();
$('#number').val("");
var exception = $('#exception').val();
$('#exception').val("");
var date = $('#date').val();
$('#date').val("");
$("ul").append("<li><span><i class='fa fa-trash'></i></span> " + name + " | " + number + " | " + exception + " | " + date + "</li>")
}
});
$(".fa-plus").click(function(){
$("input[type='text']").fadeToggle();
});
body {
font-family: Roboto;
background: -webkit-linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* Chrome 10+, Saf5.1+ */
background: -moz-linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* FF3.6+ */
background: -ms-linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* IE10 */
background: -o-linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* Opera 11.10+ */
background: linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* W3C */
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
h1 {
background: #2980b9;
color: white;
margin: 0;
padding: 10px 20px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
.fa-plus {
float: right;
}
li {
background: #fff;
height: 40px;
line-height: 40px;
color: #666;
}
li:nth-child(2n){
background: #f7f7f7;
}
span {
background: #e74c3c;
height: 40px;
margin-right: 20px;
text-align: center;
color: white;
width: 0;
display: inline-block;
transition: 0.2s linear;
opacity: 0;
}
li:hover span {
width: 40px;
opacity: 1.0;
}
input {
font-size: 18px;
color: #2980b9;
background-color: #f7f7f7;
width: 100%;
padding: 13px 13px 13px 20px;
box-sizing: border-box;
border: 3px solid rgba(0,0,0,0);
}
input:focus{
background: #fff;
border: 3px solid #2980b9;
outline: none;
}
#container {
width: 360px;
margin: 100px auto;
background: #f7f7f7;
box-shadow: 0 0 3px rgba(0,0,0, 0.1);
}
.completed {
color: gray;
text-decoration: line-through;
}
<!DOCTYPE html>
<html>
<head>
<title>Exceptions</title>
<link rel="stylesheet" type="text/css" href="assets/css/todos.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700,500' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
<script type="text/javascript" src="assets/js/lib/jquery-2.1.4.min.js"></script>
</head>
<body>
<div id="container">
<h1>2223A Exceptions <i class="fa fa-plus"></i></h1>
<input id="name" type="text" placeholder="Employee Name:">
<input id="number" type="text" placeholder="Employee Number:">
<input id="exception" type="text" placeholder="Employee Exception:">
<input id="date" type="text" placeholder="Employee Date:">
<ul>
<li><span><i class="fa fa-trash"></i></span> #303974 | R. Roberts | SN | 6/25 - 6/27</li>
<li><span><i class="fa fa-trash"></i></span> #303354 | B. Smith | SN | 6/15 & 6/27</li>
<li><span><i class="fa fa-trash"></i></span> #328937 | K. Stull | NO | 6/26</li>
</ul>
</div>
<script type="text/javascript" src="assets/js/todos.js"></script>
</body>
</html>