Learning Tracker: 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.
Book List Library
Organizer: 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. 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.
Random Quotes
App: 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.
Daily Journal: 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.
To Do List: Another
tutorial from Angela Yu's Web Dev. MongoDB backend, customizable routes using parameters to create
new lists.
Becca's Self Projects
100 Days of Code Tracker: 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.
Day 1 Simple Form: 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.
Day 3 Local Storage Goal Box: 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.
Day 5 LocalStorage Planning Page: created a
planning page that has daily, weekly, monthly, and yearly goals and has priorities and gratitude
that it saves to local storage.
localStoragePractice.html: a page
with cards in
Bootstrap that uses LocalStorage to save the title and content of the boxes.
portfolio.html: my portfolio page to show to
potential employers, using Bootstrap. It links to and explains some of the works I'm most proud of.
pathToCareer.html: 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
studyFullStack.html: a list of all the next
courses I plan on finishing with Udemy, and practice with Bootstrap's grid
bookList.html: (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
timer.html: 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
monthlyPlan.html: a basic plan for the next month's
goals, separated into weeks
weeklyPlan.html: a weekly plan using flexbox
containers to store top 3 to-dos
calendar.html: a calendar created from HTML tables for
November and December, along with lists of
goals and a small form to log goal information
learningTracker.html: 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
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.
reviewPages.html: 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
heartBackground.html: a simple program that
changes color and background when clicked to practice JS manipulation
mixedMessages.html: another simple program that
changes the font type, color, and border color when clicked to randomly generate a motivational
quote
goal_boxes.html: a list of various books I'm reading
with metrics and some goals I'm working on, in boxes to practice FlexBox
planningBook.html: a goal list broken down by week
and separated between coding and personal categories
100 Devs Tracker: a
tracking app for 100 Devs homework to make it easier to read through and complete
100 Days of Code Projects
Day 1 of Code: One of my first solo
projects listing several of my goals at the time
Day 2 of Code: Professional
Accomplishments,
Goals, Hobbies, and Quotes page
Day 3 of Code: Very simplistic page
displaying a schedule for a day
Day 4 of Code: 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
Python
Flip the
Coin: 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.
Days Left to Goal
Calculator: 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)
Tutorial Projects
Youtube Background Picker: 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.
toDo List Tutorial: followed this
YouTube tutorial to create a ToDo List with just vanilla JS, CSS,
and HTML and using local storage and Font-Awesome icons
tinDog Tutorial:
Udemy Web Development by Angela Yu tutorial to create a Tinder for dogs clone using Bootstrap styles
Dicee Challenge: 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).
DrumKit: 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).
Codecademy Projects
Ch. 5- JS Syntax Part 2 Projects
secretMessage.js: Performs various array methods to transform a given text into a secret message
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
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
teamStats.js: Takes an object with player names and competition stats, adds methods to add games
to the list
miniLinter.js: Takes a story text and removes certain meaningless words, displays number of
overused words found in the text
lodash.js: Creates a miniature version of lodash.js library using an object with many of the
methods implemented in it by hand
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
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
Ch. 7- Mixed Messages Project
mixedMessages.js: a small project that takes in encouraging quotes by various authors and
outputs a random quote every time the program is run.
Ch. 8- Web Development Intro (HTML and CSS) Projects
fashionBlog.html: a beginner html project, adds images, footer, and
headings/lists
newYorkCityBlog.html: 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)
Becca's Projects