-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathProjects.html
437 lines (403 loc) · 19.1 KB
/
Projects.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
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Projects</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="avatar.png" rel="icon" type="image/png">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body id="project">
<div style="text-align: center;">
<img src="border.gif" id="let">
<div id="lol">
<h2>Projects</h2>
<br>
<h4>In this page, you will explore some of the projects that I do everyday. Press to "Open in Replit Button" and press "Run" to see the code in action</h4>
<br>
</div>
<div style="text-align: left;">
<span id="aasMenu" style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span>
</div>
</div>
<!--Java that controled the overlay nav-->
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="index.html" class="nav-link active">Home</a>
<a href="AboutMe.html">About Me</a>
<a href="Assignments.html">Assignments</a>
<a href="Projects.html">Projects</a>
<!-- <a href="resources.html">Resources</a>-->
<!-- <a href="Vocabulary.html">Vocabulary</a>-->
</div>
</div>
<div class="container-fluid mt-3">
<div id="eight">
<div id="accordion">
<!--Collapsable One~Output Make-->
<div class="card ">
<div class="card-header">
<a class="collapsed btn bg-warning" data-bs-toggle="collapse" href="#collapseOne">
Project 1: Silly Sentences
</a>
</div>
<div id="collapseOne" class="collapse bg-warning" data-bs-parent="#accordion">
<div class="card-body">
<div class="right">
<h4><b>Description
</b></h4>
<br>
<h5>
I wrote a program that will ask the user for a series of words. Then plug them into a paragraph template.
</h5>
<br>
<br>
<h4><b>Reflection
</b></h4>
<br>
<h6>
The assignment was easy because we mostly used concatenations and variables. It was good practice for the work we have completed before. To improve the code, I would have added more sentences so the story would have been longer and more engaging.
</h6>
</div>
<div class="left">
<iframe frameboard="1" width="95%" height="500px" src="https://replit.com/@JAUNELDEANS/Project-1-Silly-Sentences?lite=true"></iframe>
</div>
<br>
<br>
</div>
</div>
</div>
<!--Collapsable Two~Variables Make-->
<div class="card ">
<div class="card-header">
<a class="collapsed btn bg-warning" data-bs-toggle="collapse" href="#collapseTwo">
Project 2: Room Area
</a>
</div>
<div id="collapseTwo" class="collapse bg-warning" data-bs-parent="#accordion">
<div class="card-body">
<div class="right">
<h4><b>Description
</b></h4>
<br>
<h5>For this lab, you will find the area of an irregularly shaped room with the shape as shown above.<br>
<img src="#" alt="shape"><br>
Ask the user to enter the values for sides A, B, C, D, and E and print out the total room area using are of a rectangle (length * width) and the area of a right triangle is (0.5 * the base * height).
</h5>
<br>
<br>
<h4><b>Reflection
</b></h4>
<br>
<h6>
I liked this project because it was an adventure to use Math to find the area of the irregular shape. It was difficult to find the area of the shape with a plan of how to divide the shape. After the plan, the assignment went smoothly.
</h6>
</div>
<br>
<iframe frameboard="1" width="95%" height="500px" src="https://replit.com/@JAUNELDEANS/Project-2-Room-Area?lite=true"></iframe>
</div>
</div>
</div>
<!--Collapsable Three-->
<div class="card ">
<div class="card-header">
<a class="collapsed btn bg-warning" data-bs-toggle="collapse" href="#collapseThree">
Project 3: Chatbot
</a>
</div>
<div id="collapseThree" class="collapse bg-warning" data-bs-parent="#accordion">
<div class="card-body">
<div class="right">
<h4><b>Description
</b></h4>
<br>
<h5>
You have decided to design a fashion chatbot that helps people pick out their fashion preferences. Your bot can gauge what types of clothes and accessories the user might like.
Your chatbot should ask the user the following (minimum requirements for the grader) and then give answers depending on the answers the user inputs:
<br>
at least 6 questions<br>
at least 3 if-elif-else statements<br>
the use of the random module and randomly generated numbers <br>Based on these criteria, some responses will be based on what the user types and some will be based on random numbers.
</h5>
<br>
<br>
<h4><b>Reflection</b></h4>
<br>
<h6>
It was a stressful project but when it was complete I was happy that the code worked well together. The difficulty was to keep track of the number of variables and what the chatbot will say when the user input yes, no, or any other answer. After completing it, it was fun to talk to the Chatbot. To edit the code, I would have added more questions to talk to the user.
</h6>
</div>
<iframe frameboard="1" width="95%" height="500px" src="https://replit.com/@JAUNELDEANS/Project-3-Chatbot?lite=true"></iframe>
</div>
</div>
</div>
<!--Collapsable Four-->
<div class="card ">
<div class="card-header">
<a class="collapsed btn bg-warning" data-bs-toggle="collapse" href="#collapseFour">
Project 4: Divisible by 3
</a>
</div>
<div id="collapseFour" class="collapse bg-warning" data-bs-parent="#accordion">
<div class="card-body">
<div class="right">
<h4><b>Description
</b></h4>
<br>
<h5>
Write a program that will ask a user how many numbers they would like to check. Then, using a for loop, prompt the user for a number, and output if that number is divisible by 3 or not. Continue doing this as many times as the user indicated. Once the loop ends, output how many numbers entered were divisible by 3 and how many were not divisible by 3.
</h5>
<br>
<br>
<h4><b>Reflection</b></h4>
<br>
<h6>
I enjoyed this project because it was centered around one of my favorite subjects, Math. It was fun to figure out how the code should work. Working with the input function, variable, for loops and the modulus was a good way for me to practice my skills in coding and Math. A challenge was to make the user determine the number of times the program should check if the number is divisible by 3. To make the code more challenging, I would add an input in which the user can ask what number they can divide by.
</h6>
</div>
<iframe frameboard="1" width="95%" height="500px" src="https://replit.com/@JAUNELDEANS/Project-4-Divisible-by-3?lite=true"></iframe>
</div>
</div>
</div>
<!--Collapsable Five-->
<div class="card">
<div class="card-header">
<a class="collapsed btn bg-warning" data-bs-toggle="collapse" href="#collapseFive">
Project 5: Design a Ringtone
</a>
</div>
<div id="collapseFive" class="collapse bg-warning" data-bs-parent="#accordion">
<div class="card-body">
<div class="right">
<h4><b>Description</b></h4>
<br>
<h5>
Create a unique ringtone using python code in a platform called earsketch. The criteria was: <br>
must use both of the EarSketch functions fitMedia() and setEffect()
<br>
You must use string operations (concatenation or splicing) to create your own beat, using the EarSketch function makeBeat().
<br>
You must use for loops to add repetition to your ringtone.
<br>
You must use at least one user-defined (custom) function to create musical sections for your ringtone.
<br>
Your ringtone should be a minimum of 60 seconds and a maximum of 90 seconds
<br>
Your ringtone should include a sound clip found in the EarSketch sound library.
<br>
Your ringtone should appeal to high school students.
<br>
Your ringtone should use efficient code whenever possible
</h5>
<br>
<br>
<h4><b>Reflection</b></h4>
<br>
<h6>
I had a blast while working on this project. I wanted to make a funky and unique beat that would stand out when played. I wanted the user to enjoy and dance to their ringtone rather than be annoyed at how it sounds. The hardest part of the project was to find beats that blend well together and conveys my theme well. It was a tough task but I believe that I completed it well. The part I enjoyed the most was hearing the product after every choice I made. I felt proud that I could make a song so well put together. I would like to make a different song that had more planning and thought put into the process of making the song.
</h6>
</div>
<iframe width="600" height="400" src="https://earsketch.gatech.edu/earsketch2/?sharing=OIGdNjn3Vqw_-5pN7_QZpA&embedded=true"></iframe>
</div>
</div>
</div>
<!--Collapsable Six-->
<div class="card ">
<div class="card-header">
<a class="collapsed btn bg-warning" data-bs-toggle="collapse" href="#collapseSix">
Project 6: Animation(Storyboard)
</a>
</div>
<div id="collapseSix" class="collapse bg-warning" data-bs-parent="#accordion">
<div class="card-body">
<div class="text-body">
<h4><b>Description</b></h4>
<br>
<h5>
Create a storyboard that will be used for your animation idea
</h5>
<br>
<br>
<h4><b>Reflection</b></h4>
<BR>
<h6>
I wanted to create a fun animation that had a solid background story and the viewers can understand what it is about. The hardest part was finding a topic to explore. It surprised me that it was very hard to come up with an idea.
</h6>
</div>
<br>
<br>
<center>
<iframe id="story" src="https://docs.google.com/document/d/e/2PACX-1vTCRU9Ogj5dzLe5lHq5Lfg7Ehl0jm_yfd7yEhkxsAf_yD0G5_gmpbrogLiCY5Mx88a-zwQU6dKibZV7/pub?embedded=true"></iframe>
<br>
</center>
<br>
</div>
</div>
</div>
<!--Collapsable Seven-->
<div class="card ">
<div class="card-header">
<a class="collapsed btn bg-warning" data-bs-toggle="collapse" href="#collapseSeven">
Project 6: Animation
</a>
</div>
<div id="collapseSeven" class="collapse bg-warning" data-bs-parent="#accordion">
<div class="card-body">
<div class="right">
<h4><b>Description</b></h4>
<br>
<h5>
In this assignment, you will use all of the graphics commands you have learned to create an animated scene. Your program should have a clear theme and tell a story. You may pick any school-appropriate theme that you like.
<br>
<br>
The program must include a minimum of:
<br>
<br>
5 circles<br>
5 polygons<br>
5 line commands<br>
2 for loops<br>
1 global variable
</h5>
<br>
<br>
<h4><b>Reflection</b></h4>
<br>
<h6>
I had to change the animation concept because I did not have enough time to create the story I wanted to in the initial storyboard. I enjoyed seeing the end product. If I had more time, I would have made a more detailed animation and made it have more content.
</h6>
</div>
<iframe frameboard="1" width="95%" height="500px" src="https://py3.codeskulptor.org/#user308_emr86n4LVq37fc7.py"></iframe>
</div>
</div>
</div>
<!--Collapsable Eight-->
<div class="card ">
<div class="card-header">
<a class="collapsed btn bg-warning" data-bs-toggle="collapse" href="#collapseEight">
Project 6: Animation(Reflection)
</a>
</div>
<div id="collapseEight" class="collapse bg-warning" data-bs-parent="#accordion">
<div class="card-body">
<div class="text-body">
<h4><b>Description</b></h4>
<br>
<h5>
Reflection questions were used to reflect on the animation-making process.
</h5>
<br>
<br>
<h4><b>Reflection</b></h4>
<BR>
<h6>
It was nice to reflect on the hard work that I put into the animation. I think that I could have made a more detailed animation and added more content. I think that I could have made a more descriptive story. I think that I could have made the animation more interesting.
</h6>
</div>
<br>
<br>
<center>
<iframe src="https://docs.google.com/document/d/e/2PACX-1vRI6vsehNI3DbdXtEM-qoQFxWAX6Dg6sALo2zW3aaaRz3LwViJkQ4vuqa9ZOyqkU3razKSrjuqzLwYP/pub?embedded=true"></iframe>
<br>
</center>
<br>
</div>
</div>
</div>
<!--Collapsable Nine-->
<div class="card ">
<div class="card-header">
<a class="collapsed btn bg-warning" data-bs-toggle="collapse" href="#collapseNine">
6.1 p5 Generate Color Dots
</a>
</div>
<div id="collapseNine" class="collapse bg-warning" data-bs-parent="#accordion">
<div class="card-body">
<div class="right">
<h4><b>Description</b></h4>
<br>
<h5>
We created a website allowing users to draw on a platform using circles. If the user clicks on the screen, it will erase everything on the screen. We did this code using p5.js, a JavaScript library.
</h5>
<br>
<br>
<h4><b>Reflection</b></h4>
<br>
<h6>
I enjoyed creating the project and using functions and parameters to make the program possible. To edit the code, I would make the dots smaller so they appear as a pencil stroke and change the cursor's icon to a pencil. I would also make it possible for the user to have a access to the option to erase the entire page, or they control where to erase. Overall, I am proud of my work.
</h6>
</div>
<iframe frameboard="1" width="95%" height="500px" src="https://replit.com/@JAUNELDEANS/CMU-Graphics?lite=true"></iframe>
</div>
</div>
</div>
<!--Collapsable Ten-->
<div class="card ">
<div class="card-header">
<a class="collapsed btn bg-warning" data-bs-toggle="collapse" href="#collapseTen">
6.3 CMU Graphics
</a>
</div>
<div id="collapseTen" class="collapse bg-warning" data-bs-parent="#accordion">
<div class="card-body">
<div class="right" >
<h4><b>Description</b></h4>
<br>
<h5>
In this program, we explored the Carnegie Mellon School of Computer Science graphics module and created various shapes. The final task was to create an avatar.
</h5>
<br>
<br>
<h4><b>Reflection</b></h4>
<br>
<h6>
This is one of my favorite projects because I had the opportunity to be as creative as I pleased. I designed a pirate named Hack. It was very difficult to estimate the correct placement of different shapes.
</h6>
</div>
<iframe frameboard="1" width="95%" height="500px" src="https://replit.com/@JAUNELDEANS/Graphics-63?lite=true"></iframe>
</div>
</div>
</div>
<!--Collapsable Eleven-->
<div class="card ">
<div class="card-header">
<a class="collapsed btn bg-warning" data-bs-toggle="collapse" href="#collapseEleven">
Bouncing Ball
</a>
</div>
<div id="collapseEleven" class="collapse bg-warning" data-bs-parent="#accordion">
<div class="card-body">
<div class="right" >
<h4><b>Description</b></h4>
<br>
<h5>
This program was to create a game in which the goal is to eliminate all of the bricks with a ball while keeping the ball bouncing.
</h5>
<br>
<br>
<h4><b>Reflection</b></h4>
<br>
<h6>
I did everything correct in the code but unfortunately, the module was corrupted, which resulted in my work not working. It is disappointing because the brick-breaking game is one of my favorite apps to play. I believed that I was going to get the opportunity to code something I loved, but I was wrong. I enjoyed coding, but it was impossible to get the full experience without seeing the output.
</h6>
</div>
<iframe frameboard="1" width="95%" height="500px" src="https://replit.com/@JAUNELDEANS/Bouncing-Ball?lite=true"></iframe>
</div>
</div>
</div>
</div>
<!--Input Make
-->
</div>
</body>
</html>