-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
67 lines (47 loc) · 1.85 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<title>IndInv - CSS-GRID-REDESIGN-PROPOSITION</title>
<link href='https://fonts.googleapis.com/css?family=Space+Mono' rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="main-grid">
<header>
<nav class="header-nav">
<a href="#" onclick="POPULATE();">Supplies</a>
<a href="#">Goods</a>
<a href="#">History</a>
<a href="#">?</a>
</nav>
</header>
<div style="margin-top: 2.25em;"></div>
<main class="body">
</main>
<footer class="footer"></footer>
</div>
</body>
<script type="text/javascript">
function POPULATE() {
document.getElementsByClassName('body')[0].innerHTML = '';
let amnt = Math.floor(Math.random()*100);
for (var i = 0; i < amnt; i++) {
document.getElementsByClassName('body')[0].innerHTML += `
<div class="supply-item">
<div class="supply-amount"><strong>`+Math.floor(Math.random()*1000)+`</strong><br><em>units</em></div>
<div class="supply-info">
<h1 class="supply-name">SUPPLY NAME #`+(i+1)+`<br> </h1>
<p class="supply-use-tag">used in:</p>
<p class="supply-use-list"><em>item #1, item #2, item #3</em></p>
<p class="supply-source-tag">get from:</p>
<p class="supply-source-link"><em>https://shop.link/item/</em></p>
</div>
<div class="amount-button-increase"><p>+</p></div>
<div class="amount-button-decrease"><p>-</p></div>
<div class="supply-settings">></div>
</div>
`;
}
}
</script>
</html>