/
expirationCalculator.html
75 lines (62 loc) · 1.5 KB
/
expirationCalculator.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
<style>
table {
color: #333;
/* Lighten up font color */
font-family: Helvetica, Arial, sans-serif;
/* Nicer font */
width: 640px;
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
border: 1px solid #CCC;
height: 30px;
}
/* Make cells a bit taller */
th {
background: #F3F3F3;
/* Light grey background */
font-weight: bold;
/* Make sure they're bold */
}
td {
/* Lighter grey background */
text-align: left;
/* Center our text */
padding-left: 1rem;
}
.completed {
background-color:green;
color: white;
}
a:visited {
color:blue;
}
body {
padding: 1rem;
}
</style>
<script>
const oneWeekAhead = new Date();
oneWeekAhead.setDate(oneWeekAhead.getDate() + 7);
document.getElementById("weekAhead").innerHTML = oneWeekAhead.toLocaleDateString('en-US')
</script>
Todays Date: 4/24/2024</br>
<table>
<th>Item</th>
<th>Days To Expire</th>
<th>Expiration Date</th>
<tr onclick="this.classList.toggle('completed')">
<td>Mushrooms</td>
<td>3</td>
<td>4/27/2024</td>
</tr><tr onclick="this.classList.toggle('completed')">
<td>Sausage</td>
<td>3</td>
<td>4/27/2024</td>
</tr><tr onclick="this.classList.toggle('completed')">
<td>Carrot</td>
<td>7</td>
<td>5/1/2024</td>
</tr></table>