-
Notifications
You must be signed in to change notification settings - Fork 0
/
Products Tekelps.html
100 lines (98 loc) · 2.64 KB
/
Products Tekelps.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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html>
<head>
<title>Products | Tekelps</title>
<link rel="shortcut icon" href="Tekelps Logo.png" type="image/x-icon"/>
<style>
{margin: 0; padding: 0;}
ul li{list-style: none; display: inline-block; float: center; line-height: 75px;}
ul li a{display: block; text-decoration: none; float: right; font-size: 20px; font-family: calibri;
color: blue; padding: 0 20px;}
ul li a:hover{color: white;}
nav{width: 100%; height: 75px; background-color: turquoise;}
</style>
<b>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Future Tekelps.html">Future</a></li>
<li><a href="Products Tekelps.html">Products</a></li>
<li><a href="All Videos Tekelps.html">All Videos</a></li>
<li><a href="FAQ 1 Tekelps.html">FAQ</a></li>
<li><a href="About Tekelps.html">About</a></li>
</ul>
</nav>
</b>
<style>
img{margin: 20px;}
body{background-image: url("cv.png");background-repeat: no-repeat;background-attachment: fixed;background-size: cover;}
p{margin: 20px;}
{tab { margin-left: 40px;}
</style>
<script>
function addItem() {
var newItem = document.createElement("div");
newItem.innerHTML = document.getElementById("box").value;
newItem.onclick = removeItem;
document.getElementById("list").appendChild(newItem);
saveList();
}
function removeItem() {
document.getElementById("list").removeChild(this);
saveList();
}
function saveList() {
localStorage.storedList = document.getElementById("list").innerHTML;
}
function loadList() {
document.getElementById("list").innerHTML = localStorage.storedList;
for(var i = 0; i < list.children.length; i++) {
list.children[i].onclick = removeItem;
}
}
</script>
<style>
.header {
height:75px;
width: 350px;
background-color:lightblue;
float: center;
padding:10px;
margin:20px;
text-align:centre;
font-size:24px;
}
.app {
height:600px;
width: 350px;
background-color:lightgreen;
float: center;
padding:10px;
margin:20px;
}
input[type="button"] {
background-color: pink;
}
</style>
</head>
<body>
<div class="header">
<center>
<p>Technology Products</p>
</center>
</div>
<div class="app">
<p style="font-size:18px; font-style:bold;">Type in some Technology Products onto the list below. Click on a Product to remove it from the list.</p>
<input type="text" id="box" value="Type here to add product"/>
<br/>
<input type="button" value="Add Product" onclick="addItem();"/>
<br/>
<div id="list"></div>
</div>
<script>
if(localStorage.storedList) {
loadList();
}
</script>
</body>
</html>