Skip to content

Commit 900bf55

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1629 from Keyuri-19/Shopping_List
Shopping List Added
2 parents b3ac80a + b0a5cdc commit 900bf55

5 files changed

Lines changed: 162 additions & 0 deletions

File tree

‎Projects/Shopping List/README.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# PROJECT NAME AND INTRODUCTION :
2+
## Shopping List - A website for making Shopping List:
3+
A webpage made using html , css ,and javascript for making the shopping list.Overall it will be able to add items you want to listed them and also be able to remove the items you don't want in your list.
4+
5+
# TECH STACK:
6+
HTML , CSS , JAVASCRIPT
7+
8+
9+
# Can Have Your Own List :
10+
(https://keyuri-19.github.io/Shopping-List/)
11+
12+
13+
# CONTRIBUTED BY:
14+
KEYURI PATEL
15+
16+
Hope this would be really useful for making Shopping List!!

‎Projects/Shopping List/index.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>My Shopping List</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
11+
<body>
12+
<div class="container">
13+
<h1><strong>My Shopping List</strong></h1>
14+
<input id="name" type="text" placeholder="Enter items want to add in List">
15+
<button id="add">Add</button>
16+
<ul>
17+
<li>Pens <button class="btn">Remove</button></li>
18+
<li>Salt <button class="btn">Remove</button></li>
19+
<li>Snacks<button class="btn">Remove</button></li>
20+
<li>Fruits<button class="btn">Remove</button></li>
21+
<li>Sandals<button class="btn">Remove</button></li>
22+
</ul>
23+
</div>
24+
<script src="script.js"></script>
25+
</body>
26+
</html>

‎Projects/Shopping List/script.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
var button = document.getElementById("add");
2+
var input = document.getElementById("name");
3+
var ul = document.querySelector("ul");
4+
var dlt = document.getElementsByClassName("btn");
5+
6+
//remove element
7+
function removeParent(event){
8+
event.target.removeEventListener("click", removeParent);
9+
event.target.parentNode.remove();
10+
}
11+
12+
//delete already exist list item
13+
for (var i=0; i < dlt.length; i++){
14+
dlt[i].addEventListener("click", removeParent);
15+
}
16+
17+
//create a list of element
18+
function createListElement(){
19+
var bttn = document.createElement("button");
20+
bttn.innerHTML = "Remove";
21+
bttn.onclick = removeParent;
22+
23+
var li = document.createElement("li");
24+
li.appendChild(document.createTextNode(input.value));
25+
li.innerHTML = li.innerHTML + " ";
26+
li.appendChild(bttn);
27+
ul.appendChild(li);
28+
input.value = "";
29+
}
30+
31+
//add item into list after click enter
32+
function addListAfterClick(){
33+
if (input.value.length > 0){
34+
createListElement();
35+
}
36+
}
37+
38+
//add item into list after press enter
39+
function addListAfterKeyPress(event){
40+
if (input.value.length > 0 && event.code == "Add"){
41+
createListElement();
42+
}
43+
}
44+
45+
//Listen to event occure of click on "enter item"
46+
button.addEventListener("click", addListAfterClick);
47+
48+
//Listen to event occure of press "enter"
49+
input.addEventListener("keypress", addListAfterKeyPress);

‎Projects/Shopping List/style.css‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
body{
2+
margin:13px;
3+
text-align: center;
4+
background: linear-gradient(217deg, rgba(247, 131, 131, 0.8), rgba(255,0,0,0) 70.71%),
5+
linear-gradient(127deg, rgba(171, 248, 171, 0.8), rgba(0,255,0,0) 70.71%),
6+
linear-gradient(336deg, rgba(143, 143, 248, 0.8), rgba(0,0,255,0) 70.71%);
7+
background-repeat: no-repeat;
8+
background-size: cover;
9+
min-height: 50px;
10+
}
11+
12+
.container{
13+
border: 3px solid rgb(2, 35, 4);
14+
border-radius: 35px;
15+
width: 800px;
16+
min-height: 500px;
17+
margin: auto;
18+
margin-bottom: 6px;
19+
background: -webkit-linear-gradient(top, rgba(165, 230, 247, 0.8) 10%, rgba(246, 190, 240, 0.878) 100%);
20+
}
21+
22+
h1{
23+
font-weight: 150;
24+
font-size: 60px;
25+
color: rgb(0,0,0);
26+
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
27+
text-align: center;
28+
margin-bottom: 50px;
29+
}
30+
31+
li{
32+
list-style: none;
33+
font-size: 20px;
34+
font-family: Verdana, Geneva, Tahoma, sans-serif;
35+
}
36+
37+
button
38+
{
39+
font-family:Verdana, Geneva, Tahoma, sans-serif;
40+
border: 1px solid black;
41+
background-color: rgb(250, 154, 154);
42+
color: black;
43+
border-radius: 5px;
44+
padding: 2px;
45+
margin-bottom: 5px;
46+
margin-left: 15px;
47+
}
48+
49+
#name{
50+
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
51+
justify-content: center;
52+
background-color: white;
53+
font-size: 25px;
54+
color: black;
55+
border-radius: 3px;
56+
padding-top: 5px;
57+
padding-bottom: 5px;
58+
border: 1.5px solid black;
59+
}
60+
61+
62+
#add{
63+
border: 1.5px solid black;
64+
background-color: rgb(185, 252, 188);
65+
font-size: 20px;
66+
color: black;
67+
border-radius: 3px;
68+
padding: 2px 10px;
69+
padding-top: 5px;
70+
padding-bottom: 5px;
71+
}

‎img/projects/Shopping_List.png‎

838 KB
Loading

0 commit comments

Comments
 (0)