DjalimSimaila/site-perso-poly
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(grocery-list): add grocery list functionality with HTML, CSS, and JS
All checks were successful
DEPLOY / deploy (push) Successful in 8s
Details

Browse Source 
- Create TP5.html for the grocery list interface
- Implement TP5.js for managing grocery items and local storage
- Update style.css to style the grocery list and its items
This commit is contained in:
Djalim Simaila 2025-01-24 14:14:48 +01:00
parent 92eef672e0
commit f171492e15
3 changed files with 131 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
TP5.html Normal file
View File

@ -0,0 +1,27 @@
<head>
<meta name="Acceuil">
<meta charset="UTF-8">
<link rel="stylesheet" href="static/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body onload="restoreList()">
<i class="fa-solid fa-trash"></i>
<div id="main">
<h1>Grocery list</h1>
<div>
<button id="clear_button" type="button" onclick="clear_input()"><i class="bi bi-eraser"></i></button>
<input type="text" id="new_item_input" placeholder="A new pair of Jordans">
<input type="number" id="new_item_quantity" value="1" min="0">
<select id="new_item_unit">
<option value="unit">unit</option>
<option value="L">L</option>
<option value="KG">KG</option>
</select>
</div>
<div id="grocery_list">
</div>
</div>
</body>
<script src="static/js/TP5.js" defer></script>

83
static/js/TP5.js Normal file
View File

@ -0,0 +1,83 @@
var grocery_array = []
function clear_input(){
document.getElementById("new_item_input").value = "";
}
function addItemToList(item){
grocery_array.push(item)
localStorage.setItem("grocery_list",JSON.stringify(grocery_array))
let item_box = document.createElement("div");
item_box.classList.add("grocery_item")
let item_name_container = document.createElement("span");
item_name_container.classList.add("grocery_item_name");
item_name_container.textContent = item;
let item_button = document.createElement("button");
item_button.innerHTML = "<i class='bi bi-trash'></i>"
item_button.onclick = (ev) =>{
let parent_div = ev.target.parentElement.closest('div');
let item_name;
var children = parent_div.childNodes;
for (var i=0; i < children.length; i++) {
console.log(children[i]);
if (children[i].tagName == "SPAN") {
item_name = children[i].textContent;
break;
}
}
grocery_array = grocery_array.filter((value) => value != item_name );
localStorage.setItem("grocery_list",JSON.stringify(grocery_array))
parent_div.remove();
}
item_box.appendChild(item_button);
item_box.appendChild(item_name_container);
document.getElementById("grocery_list").appendChild(item_box);
}
function addNewItemToList(){
let input = document.getElementById("new_item_input")
if (input.value === "") return;
let item = input.value;
input.value = "";
// quantity
let quantity = document.getElementById("new_item_quantity").value
// unit
let e = document.getElementById("new_item_unit");
let text = e.options[e.selectedIndex].text;
switch(text){
case 'L':
item = ""+ quantity + (quantity == 1 ? " liter of ":" liters of ") + item;
break;
case 'KG':
item = ""+ quantity + (quantity == 1 ? " kilogram of":" kilograms of ") + item;
break;
default:
item = "" + quantity + " " + item;
}
addItemToList(item)
}
function restoreList(){
JSON.parse(localStorage.getItem("grocery_list")).forEach(element => {
addItemToList(element);
});
}
document.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
addNewItemToList();
}
});

22
static/style.css
View File

@ -19,6 +19,7 @@ body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#pokemon_team{
@ -28,6 +29,12 @@ body {
flex-direction: column;
}
#grocery_list {
display: flex;
flex-direction: column;
}
#header {
display: flex;
flex-direction: column;
@ -99,15 +106,28 @@ button:hover {
display: none;
}
#player_input {
input {
color: #F8F8F2;
border-radius: 30px;
border: none;
padding: 10px;
background-color: #44475A;
margin: 10px;
}
#pokemon_frame{
width: 200px;
height: 200px;
}
.grocery_item{
margin: 15px;
}
.grocery_item_name{
padding: 10px;
background-color:#44475A;
border-color: #BD93F9;
border-radius: 10px;
margin: 10px;
}