Side Projects & Exercises

A dark black border on the left hand side shows a table of contents. The right hand side shows a white blackground with black text, showing the title Learn with Jason commands and a few list items showing a command name and description.

Technical Documentation

HTML

CSS

JS

Code
Centered in the screen is the title Color Picker, with five buttons below it. From left to right, they say red, blue, yellow, green, and random, and each has a background color matching it's name - random is black. Below these, the hex code #35ddb6 is displayed. The background color matches the hex code displayed.

Color Switcher

React

HTML

CSS

Created following along with Ali Spittel's Intro to React live stream! First time really playing with React, was not as bad as I'd feared. Then I went a little further and figured out a way to have it pick a random color!

Demo Code Live Site
A dark background sidebar on the left with the current room highlighted, which shows a list of users in the room. A chat section on the right, showing a few messages as well as a text box on the bottom to add messages, a send button, and a button to send your location.,Title of Super Cool Weather app on top of page, links for weather, about, and help, then a form input to add your zip code, a search button, and the results showing underneath.

Complete Node Developer Course

Node

MongoDB

Express

JS

HTML

CSS

Projects created while working through the Complete Node Developer course on Udemy. Using Node, Express, MongoDB, & others, I created a weather app, built a to-do API, & created a chat room!

Code
A dark patterned background contains multiple boxes with green, pink, or yellow borders and multiple links.

Home Page

HTML

CSS

JS

My own personal home page, filled with links I visit regularly. The greeting randomly selects an adjective from a list and updates morning/afternoon/evening depending on the time of day.

Code Live Site
A blue background with a white textbox centered inside, which shows a quote from Ratatouille, with a Twitter icon in the lower left and a new quote button on the lower right.

Random Quote Generator

HTML

CSS

JS

jQuery

Pulls a random quote from a separate JSON file and displays it. Also provides the ability to create a Tweet sharing the quote. I created the JSON file with a ton of my favorite quotes to use for this project, and adjusted the styling to change coordinating colors when a new quote is generated.

Code
A title of Wiki-Search, with a text box to enter your search and a search button, a link to view a random article, and then a list of search results, each showing the title of the wiki article, a short description of the article, and a link to read the full article.

Wikipedia Search

HTML

CSS

JS

jQuery

Search Wikipedia for any category, and see matching search results that link to the articles. Can also get a random article to view. This was one of the first Free Code Camp projects I did that utilized API data.

Code
A page talking about Cookie Cat, showing a list of items describing him, with a picture of a cat in a space helmet next to a sign up for more info form underneath. The background is a cream to pink gradient.

Product Landing Page

HTML

CSS

JS

Code
A black background with 25 white numbers along the right side, each with two gold stars to the right of them. Ascii art creates a map of bracket markers and land masses with a small red pole with a star centered along the top, a purple sea monster in the ocean, and a hurricane spiral along the bottom right.

Advent of Code

JS

Rust

Advent of Code is a daily puzzle game that happens every December. Each year, there's problems that deal with common math or algorithm puzzles, and each year's map creates a different picture. The puzzles are always challenging and feel so good to complete! In 2020, I also built a helper terminal command in Rust to create the day's files for me.

Code