Skip to content

gudiez / Lab10

Go to a project
Commit fb150f8c by gudiez
Options

Lab10

parents
Inline Side-by-side
Showing with 263 additions and 0 deletions
LAB10.pdf 0 → 100644
File added
shopping_list.css 0 → 100644
@charset "utf‐8";
body{
background-color: #D7D4C9;
}
#tittle_name{
font-family: Courier;
color: black;
font-size:38px;
font-weight: bold;
letter-spacing: 0pt;
margin-left: 7%;
margin-top: 3%;
text-align: center;
width: 600px;
background-color: yellow;
}
.input1{
margin-left: 36%;
margin-top: 12%;
font-family: sans-serif;
font-size:17px;
color: black;
padding: 1% ;
border: black 2px solid;
background-color: yellow;
width:250px;
}
.input2{
display:none;
margin-left: 24%;
margin-top: 13%;
font-family: sans-serif;
padding: 1% ;
}
.input3{
display:none;
margin-left: 42%;
margin-top: 13%;
font-family: sans-serif;
padding: 1% ;
}
button.add_1{
display: none;
font-family: sans-serif;
width: 100px;
padding: 1% ;
}
button.next{
font-family: Courier;
color: black;
font-size:18px;
font-weight: bold;
letter-spacing: 0pt;
text-align: center;
width: 150px;
border: black 2px solid;
background-color: yellow;
}
#table_gr{
width: 700px;
border-collapse: collapse;
border: 1px solid black;
}
tr{
border-bottom: 3px solid black;
height: 40px;
text-align: center;
background-color: #40A5BB;
}
th{
color:white;
background-color: black;
}
shopping_list.html 0 → 100644
<html lang="en">
<head>
<meta charset= "UTF-8">
<title>Players</title>
<link rel="stylesheet" type="text/css" href="shopping_list.css" media="screen"/>
<script type="text/javascript" src="shopping_list.js"></script>
</head>
<body>
<!-- Text where we are going to show the name of the shopping list -->
<div style ="position:absolute; top:7%; left:20%;">
<p class="tittle_name" id="tittle_name"></p>
</div>
<!--1.1 Input of the first player -->
<div class = "input1" id="input1"; style="position:absolute">
Name: <input type="text" id="name1" name="name1" placeholder="Write name"> </br>
<div style="position:absolute; top: 35%; margin-left:100%;">
<button class="next" onclick="name_comp()"> Continue </button>
</div>
</div>
<!--Input of product -->
<div class = "input2" id="input2"; style="position:absolute">
Product: <input type="text" id="product1" name="product1"> </br>
</div>
<!--Input of quantity -->
<div class = "input3" id="input3"; style="position:absolute">
Quantity: <input type="text" id="quantity1" name="quantity1"> </br>
</div>
<!-- Buttons to add a product -->
<div style="position:absolute; top: 29%; margin-left:63%;">
<button class="add_1" id="add_1" onclick="addRow()"> Add to list </button>
</div>
<table id="table_gr"; style="position: absolute; top: 33%; margin-left: 25%;">
<tr>
<th>No. </th>
<th> Product </th>
<th> Quantity </th>
</tr>
</table>
</body>
</html>
shopping_list.js 0 → 100644
var flag_same_name = "false";
//Compare if the name has a shopping list
function name_comp(){
var name_1 = document.getElementById("name1").value;
var name1_load = window.sessionStorage.getItem('name_local');
if(name_1 != ""){ //If the number is not null
document.getElementById("tittle_name").innerHTML = name_1 +"'s shopping list"; //1.3 the user name in the top
if(name_1 == name1_load){
alert("We are going to charge the shopping list of "+name_1);
flag_same_name = "true";
}else {
alert(name_1 + " doesn't have a shopping list we are going to create a new one");
}
}else{
alert("Name are empty");
location.href = ("shopping_list.html");
}
window.sessionStorage.setItem("name_local",name_1);
var i1 = document.getElementById("input1"); //We don't want to show the input of the name
i1.style.display ="none";
var i2 = document.getElementById("input2"); //We want to show the input of the product
i2.style.display ="block";
var i3 = document.getElementById("input3"); //We want to show the input of the quantity
i3.style.display ="block";
var a1 = document.getElementById("add_1"); //We want to show the input of the add
a1.style.display ="block";
same_name();
}
function same_name(){
if(flag_same_name == "true"){
var product = localStorage.getItem("product_stored");
var quantity = localStorage.getItem("quantity_stored");
alert(product);
var t = document.getElementById("table_gr");
var n = t.rows.length;
var row = t.insertRow(n);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = n ;
cell2.innerHTML = product;
cell3.innerHTML = quantity;
}
}
function addRow(){
var t = document.getElementById("table_gr");
var n = t.rows.length;
var row = t.insertRow(n);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var product = document.getElementById("product1").value;
var quantity = document.getElementById("quantity1").value;
cell1.innerHTML = n ;
cell2.innerHTML = product;
cell3.innerHTML = quantity;
appendToLocalProduct(product); //Add the product to local storage
appendToLocalQuantity(quantity); //Add the quantity
}
function appendToLocalProduct(product) {
var items = [];
dataInLocalStorage = localStorage.getItem("product_stored");
if (dataInLocalStorage !== null) {
items = JSON.parse(dataInLocalStorage);
}
items.push(product);
localStorage.setItem("product_stored", JSON.stringify(items));
}
function appendToLocalQuantity(quantity) {
var items = [];
dataInLocalStorage = localStorage.getItem("quantity_stored");
if (dataInLocalStorage !== null) {
items = JSON.parse(dataInLocalStorage);
}
items.push(quantity);
localStorage.setItem("quantity_stored", JSON.stringify(items));
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment