Hello,
I have started my first project and I choose a grocery list. I made the dynamic list, it works and all, but I also tried to save the list even if you refresh the page, but I don’t find anything helpful. I also tried to make a delete button, but it doesn’t work. I searched on stackoverflow.com, w3school and freecodecamp. Could anyone help me or give me some ideas?
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Charmonman' rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
<head>
<title> Grocery List </title>
</head>
<style>
.bar-menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #41B3A3;
font-family: 'Charmonman';
}
.menu {
float: left;
}
li {
cursor: pointer;
}
.menu a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.menu a:hover {
background-color: #E27D60;
}
.active {
background-color: #C38D9E;
}
h1{
margin-top: 40px;
text-align: center;
font-size: 32px;
font-family: 'Charmonman';
}
body {
background-color: #85DCAB;
}
input {
margin: 0;
border: none;
border-radius: 0;
width: 75%;
padding: 10px;
float: left;
font-size: 16px;
}
#btnn {
padding: 10px;
width: 25%;
background: #41B3A3;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
}
</style>
<body>
<!-- Navigation bar-->
<ul class="bar-menu">
<li class ="menu"><a href="New project.html">Home</a></li>
<li class ="menu"><a href="page2.html">Grocery list</a></li>
<li class ="menu"><a href="Contact.html">Contact</a></li>
</ul>
<h1>Grocery list</h1>
<hr>
<form>
<input placeholder = "Write item..." type="text" id= "addinggroceries" >
<button type= "button" id = "btnn">Add item!</button>
<ul id="groceryList">
</ul>
</form>
<script>
//list of items added to a list by input of the user
var groceries = [];
var list = $("#groceryList");
$.each(groceries, function(index,value){
$("<li/>").text(value).appendTo(list)
});
$("#btnn").click(function(){
var add = $("#addinggroceries").val();
$("<li/>").text(add).appendTo(list)
});
</script>
</body>
</html>
I have 3 pages, but this is the main one. I also tried to put a “required” attribute to the “input” tag, but it doesn’t work.