-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
224 lines (212 loc) · 9.51 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
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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sonika's Journal Entries</title>
<meta name="author" content="Sonika Ram">
<link rel="icon" href="sloth.ico">
<link rel="stylesheet" href="mystyle.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Orelega+One&display=swap" rel="stylesheet">
<style>
#happy-sunday {
color: white;
}
</style>
</head>
<body>
<main>
<header>
<h1 id="title">Sonika's Journal Entries</h1>
</header>
<div class="container">
<details open>
<summary>Sonika's Journal</summary>
<p>These are my journal entries for the past three days! I have listed some tasks and
a few things that I did recently. I hope you enjoy reading them!</p>
</details>
<div>
<nav>
<a href="#firstEntry">Entry #1</a>
<a href="#secondEntry">Entry #2</a>
<a href="#thirdEntry">Entry #3</a>
</nav>
</div>
<section id="journal-one">
<div class="journalText">
<h2 id="firstEntry">Entry 1 - Almost the weekend!</h2>
<h3>04/09/21</h3>
<p> Today was a good day! I was really productive and I completed
most of the tasks that were assigned to me. I had some trouble
beginning my assignments, but once I got started, I was able to
finish which is good.
<br><br>After we finished our assignments for the day, my roommate and I watched the sunset!
</p>
<video controls>
<source src="sunset.mp4" type="video/mp4">
</video>
</div>
<hr>
<div class="tasks">
<p class="friday-task-title"><b>Friday's Tasks:</b></p>
<ol>
<li>CSE 11 Lecture</li>
<li>Go to work</li>
<li>Workout</li>
<li>Go to my classes</li>
<li>Tutor for CSE 11</li>
<li>Finish math homework</li>
<li>Do research about the <i>Geospiza scandens</i></li>
</ol>
</div>
</section>
<section id="journal-two">
<h2 id="secondEntry">Entry 2 - Weekending!</h2>
<h3>04/10/21</h3>
<p> Today was <em>really</em> relaxing, but also stressful at the same time. We are looking for
our apartments for next year, and we toured a few today. I think we found one we all
liked, but it isn't available for June yet so we are unsure what to do. I am sure it
will all work out in the end though! <br> <br>Other than that, we came back to our apartment
on campus and did homework and listened to music. We also went grocery shopping today and went on
a spontaneous hike!
</p>
<div>
<img src="hike.jpg" alt="hiking" width="300">
<p>Here's a picture of the hike we went on today!</p>
</div>
<hr>
<div class="tasks2">
<p><b>Saturday's Tasks:</b></p>
<ol>
<li><strong>URGENT!! Apartment tours</strong></li>
<li>Start weekend homework</li>
<li>Grocery shopping</li>
</ol>
</div>
<hr>
<div class="shopping-list">
<p><b>Shopping list:</b></p>
<ul class="list">
<li>Chia Seeds</li>
<li>Apples</li>
<li>Oranges</li>
<li>Toothpaste</li>
<li>Cookies</li>
</ul>
</div>
</section>
<section id="journal-three">
<div class="journalText3">
<h2 id="thirdEntry">Entry 3 - Getting ready for the week!</h2>
<h3>04/11/21</h3>
<p id="happy-sunday"> Happy Sunday! This morning I went to get coffee from the market. Today I plan on grading some PA's for the class I am tutoring for, and finishing
up my weekend homework. I think my roommate and I will watch a movie tonight, but I have lots of
meetings before then. I got lunch with my parents, and I am feeling good about the day and the
week to come.
</p>
<hr>
<div>
<p><b>Sunday's Tasks:</b></p>
<ol class="sunday-task">
<li>Grade PA's</li>
<li>Finish homework</li>
<li>Lunch with parents</li>
</ol>
</div>
<hr>
<div>
<p><b>Song of the day!</b></p>
<p><span>Deja Vu by Olivia Rodrigo (credits: on Youtube by Criz Depz Music)</span></p>
<audio controls>
<source src="deja-vu.mp3" type="audio/mp3">
</audio>
</div>
</div>
</section>
</div>
</main>
<br>
<hr>
<div>
<h2>Add a new entry!</h2>
<form>
<div>
<label for="entryNum">Enter the entry number: </label>
<input type="text" name="entryNum" id="entryNum">
</div>
<br>
<div>
<label for="entryDate">What is today's date?</label>
<input type="date" id="entryDate" name="entryDate">
</div>
<div>
<p>What do you want to include in this entry?</p>
<input type="checkbox" id="rant" name="rant">
<label for="rant">Rant</label>
<input type="checkbox" id="shopping-list" name="shopping-list" >
<label for="shopping-list">Shopping List</label>
<input type="checkbox" id="tasks" name="tasks" >
<label for="tasks">Tasks</label>
<input type="checkbox" id="audio" name="audio" >
<label for="audio">Audio</label>
<input type="checkbox" id="images" name="images" >
<label for="images">Images</label>
<input type="checkbox" id="video" name="video" >
<label for="video">Video</label>
</div>
<div>
<p>How are you feeling today?</p>
<input type="radio" id="good" name="feeling" value="good">
<label for="good">Good!</label>
<input type="radio" id="eh" name="feeling" value="eh">
<label for="eh">Eh..</label>
<input type="radio" id="bad" name="feeling" value="bad">
<label for="bad">Bad!</label>
</div>
<br>
<div class = "add-goals">
<p>Today's Goal:</p>
<input list="goals" id="goals-choices" name="goals-choices"/>
<datalist id="goals">
<option value="Be productive!">
<option value="Sleep in.">
<option value="Run errands.">
<option value="Relax and have fun!">
<option value="WORK WORK WORK">
</datalist>
</div>
<br>
<div>
<fieldset>
<legend>Where are you eating dinner today?</legend>
<input type="radio" id="dinner1" name="dinner1">
<label for="dinner1">Eating at home!</label>
<input type="radio" id="dinner2" name="dinner2">
<label for="dinner2">Eating at a restaurant</label>
<input type="radio" id="dinner3" name="dinner3">
<label for="dinner3">Getting takeout!</label>
</fieldset>
</div>
<div>
<p style="font-style: italic;">Start typing your entry:</p>
<textarea id="story" name="story" rows="10" cols="50">Today was a fun day!</textarea>
</div>
<br>
<div>
<label for="sleep-select">How much did you sleep last night?</label>
<select name="sleep" id="sleep-select">
<option value="">--Please choose an option--</option>
<option value="none">0</option>
<option value="one-to-four">1-4 hours</option>
<option value="five-to-seven">5-7 hours</option>
<option value="more-than-eight">> 8 hours</option>
</select>
</div>
<br>
<button class="add-entry" type="button">Add Entry!</button>
</form>
</div>
<footer>
<p>© 2021 Sonika Ram</p>
</footer>
</body>
</html>