-
Notifications
You must be signed in to change notification settings - Fork 0
/
drugstore.html
63 lines (49 loc) · 2.73 KB
/
drugstore.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-buy list</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<button id="LogIn">Login</button>
<h1 id="mainTitle">To buy:</h1>
<span class="menuBurger">☰</span>
</div>
<nav>
<div class="navPages">
<ul>
<li><input type="radio" id="tab1" name="tab"><label for="tab1" data-page="groceries">Groceries</label></li>
<li><input type="radio" id="tab2" name="tab" checked><label for="tab2" data-page="drugstore">Drugstore</label></li>
<li><input type="radio" id="tab3" name="tab"><label for="tab3" data-page="hardware-store">Hardware store</label></li>
<li><input type="radio" id="tab4" name="tab"><label for="tab4" data-page="other">Other</label></li>
</ul>
</div>
</nav>
<div class="row">
<input type="text" id="inputBox" placeholder=" Add an element">
<input type="text" id="inputBoxQuantity" placeholder=" Quantity">
<button onclick="addElement()">Add item</button>
</div>
<!-- i wanna target with css only buttons from row and shoppingList. nav .navlinks button {} ?-->
<ul id="drugstore" class="shoppingList">
<li><span class="emoji">○</span> <span class="text">Example item 1</span> <button class="deleteBtn">x</button> <button class="quantityBtn increment">+</button> <span class="quantity">1</span> <button class="quantityBtn decrement">-</button> <button class="crossBtn">✓</button> <button class="editBtn">Edit</button></li>
<li><span class="emoji">○</span> <span class="text">Example item 2</span> <button class="deleteBtn">x</button> <button class="quantityBtn increment">+</button> <span class="quantity">1</span> <button class="quantityBtn decrement">-</button> <button class="crossBtn">✓</button> <button class="editBtn">Edit</button></li>
</ul>
<div class="image-column left-column"></div>
<div class="image-column right-column"></div>
<!-- <button class="crossBtn">✓</button> <button class="addBtn">+</button> <button class="substrBtn">-</button> <button class="deleteBtn">x</button>
-->
<br />
<p id="end">Have a nice day!</p>
<button id="modeSwitchBtn" onclick="nightMode();">☀︎ / ☾</button>
<script src="script.js"></script>
</body>
</html>
<!--
frpm mobile move navig bar into hamburger
quantity - editable by clicking on text, by clicking on +-, can add that while creating new list element on top of the page
do several folders, to buy groceries, drogerie, household items, rest
-->