-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
249 lines (245 loc) · 19.8 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
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
<!DOCTYPE html>
<html>
<head>
<title>Becca's Projects</title>
<meta charset="UTF-8">
<link href="./index.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1><img src="./bv_grayStars.png" alt="Becca Vilar logo" width="5%" height="50px" />
Becca's Projects <img src="./bv_grayStars.png" alt="Becca Vilar logo" width="5%" height="50px" /></h1>
<nav>
<ul>
<li><a href="#hosted">Hosted Projects</a></li>
<li><a href="#selfProjects">Becca's Self Projects</a></li>
<li><a href="#tutorialProjects">Tutorial Projects</a></li>
<li><a href="#codecademyProjects">Codecademy Projects</a></li>
</ul>
</nav>
</header>
<main>
<section id="hosted">
<h2>Apps I've Hosted</h2>
<ul>
<li><a href="https://becca-learning.cyclic.app/" target="_blank">Learning Tracker</a>: This is my
favorite project right now. I created this fully by myself, it started as a way to practice flexbox
and keep track of my learning using a static page I updated. I've worked on it incrementally, from
updating the styling of the boxes to the nav bar at the top and making the article sections separate
parts. This latest update connects it with MongoDB using a Node.js backend so I can update it on my
computer or phone, and the newest feature is to track the amount of time all sections will take, and
update it to only include incomplete sections.</li>
<li><a href="https://becca-books.cyclic.app/" target="_blank">Book List Library
Organizer</a>: This is a project I made since I use library books and too often I go through
phases and get too many books at one time. It lets me input the title, number of pages, length of
audiobook, due date, and progress of the book in one place and it's saved to MongoDB so I don't have
to keep entering the info. It builds off a previous static version I made of this site that had been
built fully off of JS (but since it was static, info had to be re-enterred any time the page
refreshed). Most recent update includes favorited and archived books and adding notes to a book's
individual page. It uses Bootstrap, EJS, Express, and MongoDB. <strong>Please note: it looks best on
Google Chrome from a computer, it's mobile
functional with Bootstrap but some quirks need to be worked out.</strong></li>
<li><a href="https://becca-books.cyclic.app/quotes/random/6" target="_blank">Random Quotes
App</a>: This project was created because I discovered how to use the quotes from my 6+ year old
Kindle to populate a quotes database that stores the quote, the author, and which text it is from. I
used the File System (fs) module to read from the 'myClippings.txt' file and then parse through it
to get the relevant information I wanted and store each highlight as a quote object. Then I created
a page that displays all the quotes, but since there's over 4000, I can't read them one at a time
since scrolling takes forever so I miss quotes in the middle, so I created one page that will show
one random quote and also the option to use router parameters to specify the number of random quotes
in the browser to display. I've found 6 works well for me to see some content without too much at
one time so that's what I've linked here. Since my old hand-written quote journal could never keep
up with all the scientific studies from books I've read and it fell apart over time, this project
excited me since I love reviewing quotes from books that really made me view life differently.
Eventually I will add ways to favorite and delete quotes without having to go to an individual
quote's page. Disclaimer: Please keep in mind that since these quotes are spanning 6+ years of
books, my views may have changed and I may not necessarily agree with the quoted text, it just was
interesting enough to make me pause and highlight it, also context may be missing regarding the
quoted material if you haven't read the book it's from. </li>
<li><a href="https://agile-harbor-60196.herokuapp.com/" target="_blank">Daily Journal:</a> Daily journal
connected to MongoDB for persistence, node.js backend. Followed a tutorial (Angela Yu's Udemy Web
Dev course) but also adjusted things by adding the Compose button at top and the All Posts section.
Using it to blog about my experiences learning to code.
</li>
<li><a href="https://fathomless-crag-48774.herokuapp.com/" target="_blank">To Do List:</a> Another
tutorial from Angela Yu's Web Dev. MongoDB backend, customizable routes using parameters to create
new lists.</li>
</ul>
</section>
<section id="selfProjects">
<h2>Becca's Self Projects</h2>
<ul>
<li><a href="../100DaysOfCode/tracker.html" target="_blank">100 Days of Code Tracker</a>: A project
like PathToCareer but with better styling (thanks to my lovely gradient picker app) and with a
time-imposed deadline trying to spend at least 1 hour a day working on projects/learning for the
next 100 Days.</li>
<li><a href="../100DaysOfCode/day1.html" target="_blank">Day 1 Simple Form</a>: a simple form built
quickly that has a date input and takes in number and text inputs to keep track of time spent on
various activities.</li>
<li><a href="../100DaysOfCode/day3.html" target="_blank">Day 3 Local Storage Goal Box</a>: a daily
goal box with 3 inputs currently hard-coded, but the plan is to use arrays stored in localStorage,
but I had trouble getting it to cooperate at the moment. I kept running into a glitch where it turns
every past array element into a further array of characters. Time is limited tonight so I moved on
but hope to troubleshoot it further soon.</li>
<li><a href="../100DaysOfCode/day5.html" target="_blank">Day 5 LocalStorage Planning Page</a>: created a
planning page that has daily, weekly, monthly, and yearly goals and has priorities and gratitude
that it saves to local storage.</li>
<li><a href="./LocalStoragePractice/index.html" target="_blank">localStoragePractice.html</a>: a page
with cards in
Bootstrap that uses LocalStorage to save the title and content of the boxes.</li>
<li><a href="./portfolio.html" target="_blank">portfolio.html</a>: my portfolio page to show to
potential employers, using Bootstrap. It links to and explains some of the works I'm most proud of.
</li>
<li><a href="./pathToCareer.html" target="_blank">pathToCareer.html</a>: a page that has Bootstrap cards
which keep track of what progress I'm making daily towards becoming a software engineer and keeps a
progress tracker to make 100 hours of study time by 11/14</li>
<li><a href="./studyFullStack.html" target="_blank">studyFullStack.html</a>: a list of all the next
courses I plan on finishing with Udemy, and practice with Bootstrap's grid</li>
<li><a href="./bookList.html" target="_blank">bookList.html</a>: (the original HTML/JS library book
tracker that was a static page, no DB included) a book list that includes a form to add
more books to, eventually will add the ability to remove books from the list using a click event
</li>
<li><a href="./timer.html" target="_blank">timer.html</a>: a timer set for 60 minutes with topic to set
what is being studied, along with a textarea input to add notes along the way, thus increasing
active recall by reminding myself what I learned over that hour studying</li>
<li><a href="./monthlyPlan.html" target="_blank">monthlyPlan.html</a>: a basic plan for the next month's
goals, separated into weeks</li>
<li><a href="./weeklyPlan.html" target="_blank">weeklyPlan.html</a>: a weekly plan using flexbox
containers to store top 3 to-dos</li>
<li><a href="./calendar.html" target="_blank">calendar.html</a>: a calendar created from HTML tables for
November and December, along with lists of
goals and a small form to log goal information</li>
<li><a href="./learningTracker.html" target="_blank">learningTracker.html</a>: several different flex
box containers tracking my progress on completing Angela Yu's Udemy Web Development Course, my
progress with FreeCodeCamp's Responsive Design curriculum, and my progress with Codecademy's
Full-Stack Path</li>
<li>bookFactoryCalculations.js: a program to store book information (title, author, audiobook time,
number of pages, and --if a library book-- the return date) and then calculate percent done with the
book from audiobook time or current page number. Also can calculate amount needed to finish a book
before a library return date or a specific goal date, specifying either audio minutes or pages to
read a day.</li>
<li><a href="./reviewPages.html" target="_blank">reviewPages.html</a>: a long list of notes I'm
recording on HTML, CSS, JS, and Git... eventually I will
go through and format my notes and separate them into a more readable file... Also has a little
progress bar tracker for my Codecademy progress and a list of articles/tutorials to return to when I
have more time or more understanding</li>
<li><a href="./heartBackground.html" target="_blank">heartBackground.html</a>: a simple program that
changes color and background when clicked to practice JS manipulation</li>
<li><a href="./mixedMessages.html" target="_blank">mixedMessages.html</a>: another simple program that
changes the font type, color, and border color when clicked to randomly generate a motivational
quote</li>
<li><a href="./goal_boxes.html" target="_blank">goal_boxes.html</a>: a list of various books I'm reading
with metrics and some goals I'm working on, in boxes to practice FlexBox</li>
<li><a href="./planningBook.html" target="_blank">planningBook.html</a>: a goal list broken down by week
and separated between coding and personal categories</li>
<li><a href="https://becca-the-tech.github.io/100DevsTracker/" target="_blank">100 Devs Tracker</a>: a
tracking app for 100 Devs homework to make it easier to read through and complete</li>
</ul>
<h3>100 Days of Code Projects</h3>
<ul>
<li><a href="./daysOfCode100/day1.html" target="_blank">Day 1 of Code:</a> One of my first solo
projects listing several of my goals at the time</li>
<li><a href="./daysOfCode100/day2.html" target="_blank">Day 2 of Code:</a> Professional
Accomplishments,
Goals, Hobbies, and Quotes page</li>
<li><a href="./daysOfCode100/day3.html" target="_blank">Day 3 of Code:</a> Very simplistic page
displaying a schedule for a day</li>
<li><a href="./daysOfCode100/day4.html" target="_blank">Day 4 of Code:</a> Blog style code listing my
learning focus, current and future projects, and mini-blog posts based on what I'm reading/learning
not coding related</li>
</ul>
<h3>Python</h3>
<ul>
<li><a href="https://repl.it/@beccavilar/AlwaysCorrectCoinFlip#main.py" target="_blank">Flip the
Coin:</a> Interactive
coin flip, you tell it what the options are and it tells you what your binding choice is. No
fair flipping it again for other choices.</li>
<li><a href="https://repl.it/@beccavilar/DaysLeftToGoal#main.py" target="_blank">Days Left to Goal
Calculator:</a> Calculates numbers of days left between current date and goal date (does not
work currently for dates into a new year, ends at 12/31 but does work for dates in the same month)
</li>
</ul>
</section>
<section id="tutorialProjects">
<h2>Tutorial Projects</h2>
<ul>
<li><a href="./100Devs/background-picker" target="_blank">Youtube Background Picker</a>: This was a
homework project from 100 Devs (eventually I will add a 100 Devs section). The project was to
recreate the JS in main without looking (which I did other than the missing quotes when using the
DOM to adjust the CSS). The second part of the assignment was to do something to make the project
your own, so I added a random color option and a random linear gradient option so that when I'm
struggling to pick colors for my projects I can play with this code until I find something I like.
</li>
<li><a href="./todo_list_tutorial/index.html" target="_blank">toDo List Tutorial</a>: followed this
YouTube tutorial to create a ToDo List with just vanilla JS, CSS,
and HTML and using local storage and Font-Awesome icons</li>
<li><a href="./UdemyPractice/Bootstrap-Projects/tinDog/index.html" target="_blank">tinDog Tutorial</a>:
Udemy Web Development by Angela Yu tutorial to create a Tinder for dogs clone using Bootstrap styles
</li>
<li><a href="./UdemyPractice/Challenge1-DiceeProject/dicee.html">Dicee Challenge</a>: click the Roll
Dice Button to randomly roll two dice and output whether player1 or player 2 wins. Fun color
changing with JS. (I did this project only using the picture outline of how it should look and the
dice images, all color modifications and the h2 fake button were my own twist on the idea).</li>
<li><a href="./UdemyPractice/DrumKit/index.html">DrumKit</a>: This was a Udemy tutorial to create a Drum
Kit taking in click events and keydown events for buttons to play drum noises. I followed along with
the tutorial but did the lessons with minimal hints (got stuck realizing I needed to query the DOM
in order to apply the animation and had to find help for that part but the rest I was able to do
without hints).
</li>
</ul>
</section>
<section id="codecademyProjects">
<h2>Codecademy Projects</h2>
<ul>
<li class="chapter">Ch. 5- JS Syntax Part 2 Projects</li>
<ul>
<li>secretMessage.js: Performs various array methods to transform a given text into a secret message
</li>
<li>whaleSong.js: Array manipulation to turn any input text into a "whale song" that uses only
vowels, doubling the presence of 'e' and 'u' and capitalizing the resulting string</li>
<li>mealMaker.js: Using objects, this program creates arrays of appetizer, main, and dessert objects
then randomly takes one item from each to generate a meal and display the total cost of the meal
</li>
<li>teamStats.js: Takes an object with player names and competition stats, adds methods to add games
to the list</li>
<li>miniLinter.js: Takes a story text and removes certain meaningless words, displays number of
overused words found in the text</li>
<li>lodash.js: Creates a miniature version of lodash.js library using an object with many of the
methods implemented in it by hand</li>
<li>creditCardChecker.js: Takes in arrays of Credit Card Numbers and checks them for validity using
the Luhn algorithm, then takes an array of both valid and invalid credit card numbers to find
only the invalid ones and returns a list of companies that were found with invalid cards</li>
<li>mysteriousOrganism.js: An object of a strange organism that can have one of its bases mutated at
random and that has greater survivability when 'G' and 'C' bases are over 60%, so creates an
array of 30 creatures based upon their isLikelyToSurvive() method</li>
</ul>
<li class="chapter">Ch. 7- Mixed Messages Project</li>
<ul>
<li>mixedMessages.js: a small project that takes in encouraging quotes by various authors and
outputs a random quote every time the program is run.</li>
</ul>
<li class="chapter">Ch. 8- Web Development Intro (HTML and CSS) Projects</li>
<ul>
<li><a href="./Codecademy_Projects/Ch8_WebDev_Fundamentals/fashionBlog.html"
target="_blank">fashionBlog.html</a>: a beginner html project, adds images, footer, and
headings/lists</li>
<li><a href="./Codecademy_Projects/Ch8_WebDev_Fundamentals/nycBlog.html"
target="_blank">newYorkCityBlog.html</a>: a project for practicing semantic HTML with main,
nav, section, article, figures and figcaptions, adds image, video, and audio, and has a cool
header nav bar at the top (made by Codecademy, not me)</li>
<li><a href="./Codecademy_Projects/Ch8_WebDev_Fundamentals/healthyRecipes.html"
target="_blank">healthyRecipes.html</a>: beginner project creating CSS rule sets</li>
<li><a href="./Codecademy_Projects/Ch8_WebDev_Fundamentals/oliviaPortfolio.html"
target="_blank">oliviaPortfolio.html</a>: early CSS project changing background image and
color and using opacity
</li>
<li><a href="./Codecademy_Projects/Ch8_WebDev_Fundamentals/dasmotosArtsAndCrafts.html"
target="_blank">dasmotosArtsAndCrafts.html</a>: a simple website based upon a <a
href="https://content.codecademy.com/courses/freelance-1/unit-2/dasmotos-arts_redline.jpg"
target="_blank">specification page</a> that was given to guide the work</li>
</ul>
</ul>
</section>
</main>
</body>
</html>