Projects

My website has moved! Visit my new site here:

robbiegay.art

Here you can find a list of web dev projects that I have been working on recently:


Prework Weeks 1-4:

Git, GitHub, HTML, CSS, JavaScript

We spent Prework Week 1 learning about Git and GitHub. I don't have any projects to share from this first week, but you can read more about what we did in my Prework Week 1 Blog Post!

  • Building Resizable Websites using HTML
    • Created different resolutions of project images. Embedded a YouTube video onto the page. Created responsive images using “src”, “alt”, “srcset”, and “sizes” attributes as well as creating an Art Directed element using <picture>.
    • Project Prompt
    • GitHub Repo
  • Creating a Silly Story Generator using JavaScript
    • Took a Silly Story string and inserted various silly people/events which we pulled from two different arrays. Also added functionality to switch between US, and UK measurement systems (as well as a third "Easter Egg" unit of measurement, found via hovering your mouse over it). Additionally, added a Typewriter Effect that made use of a loop which would print one letter at a time before waiting and moving on to the next letter.
    • Project Prompt
    • GitHub Repo

  • Image Gallery
    • Created an image gallery that allows the user to click through 5 image thumbnails which, when selected, enlarge and replace the previously displayed image. Also included a button which allows users to "lighten" or "darken" the image — a function similar to those included in many basic photo display programs. The main problem that I had with getting this software to work involved figuring out how to use event.target in JavaScript to select each image as it was created in a loop. Otherwise, the loop would complete and replace the currently targeted image with the last image + 1 (i.e. the loop ends on pic5.jpg, this would attempt to target a fictional pic6.jpg).
    • Project Prompt
    • GitHub Repo
  • Digital Clock
    • Created a digital clock interface that tells the current time. Included button to switch between Military (default) and Civil time.
    • Project Prompt
    • GitHub Repo
  • Countdown Timer
    • Created a timer that counts down to a user-inputted date and time. The display counts down in units of years, days, hours, minutes, and seconds. When that date and time is reached, the display reads "DONE!!!" and a "reset" button appears to allow the user to initiate a new countdown.
    • Project Prompt
    • GitHub Repo
  • Mind Reader
    • This program can read your mind!! Seriously, try it out. The computer will guide you through a series of 4 questions and will then be able to tell you the symbol you were thinking of. Uses some sort of cutting-edge Bluetooth waves to read your mind (or something like that..)
    • Project Prompt
    • GitHub Repo

Bootcamp Weeks 1-6: Front End

JavaScript, Bootstrap, React

  • Created a Mock Campaign Website
    • For this assignment, we were tasked with creating a mock campaign website for a fictional character. I chose Chidi Anagonye from the American Comedy series "The Good Place." The goal was to create a responsive, mobile-first website using the Bootstrap frame work. Switching to Bootstrap from vanilla CSS was like being given superpowers. I was able to do things with just a word or two of Bootstrap that I might not have been able to do with 50 lines of CSS.
    • Project Prompt
    • GitHub Repo
  • Bouncing Balls Game
    • Now that we've looked at Bootstrap, we are going to be moving back into JavaScript for the next two weeks. This project involved using JavaScript objects to create a Bouncing Balls game.
    • Project Prompt
    • GitHub Repo

  • Weather App
    • An App that takes a user-inputted zip code and displays various real-time weather conditions for that area. This was our first time working with an API (openweathermap API). We used JSON to retrieve weather conditions and insert them into the webpage. I also included an error message for unknown zip codes or invalid user inputs.
    • Project Prompt
    • GitHub Repo
  • Tic-Tac-Toe
    • Built a Tic-Tac-Toe game that allows two users to play against each other. Used nested arrays to test win conditions against the current board setup. Includes a reset button that allows the board to be reset. After at least 1 game has been played, a tally appears that keeps track of X wins, O wins and ties.
    • Project Prompt
    • GitHub Repo
  • Calculator
    • Created a calculator app that can perform various mathematical functions. Dynamically rendered the HTML elements using JS. The most challenging aspect was dealing with various "edge-case" scenarios. The calculator would work pretty well if users performed a basic math function (ex. 5 + 3), then cleared the memory ("C" button), and then performed another basic math function. A real world user, however, would likely use the calculator in many different ways. There were a multitude of orders in which the user might press various buttons. Additionally, there had to be ways of dealing with inputs that didn't make much sense at all (ex. What would happen if the user inputted: + - 53 + / 4 - 4?). And the final (and perhaps most difficult) part of dealing with edge-cases was getting to a point where you had several fixes for very specific situations, and then had to try to not break any of those old fixes whenever you implemented a fix for a new scenario.
    • Project Prompt
    • GitHub Repo

  • Sliding Puzzle
    • Built a Sliding Puzzle game that allows users to rearrange a 4x4 grid of tiles to create a completed image. Built using an object-oriented approach, using an array of objects to store information such as the name of the tile, and the tile's current location on the board. Users can upload their own image or use the provided default image.
    • Project Prompt
    • GitHub Repo

  • To-Do List
    • Worked with the Local Storage API in order to build a To-Do List app that can save entires between page loads. Has several "view states", allowing users to toggle between viewing: all entries, completed entires, or entries that you have yet to complete.
    • Project Prompt
    • GitHub Repo

  • React Restaurant
    • Built a website for a fictional restaurant located at Awesome Inc! Used the Random Menu Generator API to get a list of random menu items, and then pulled both a title and a description from that JSON file. Generated random menu prices and included a parameter for low, medium, and high price range items. Menu items are stored in Local Storage, allowing for menu consistency across page loads (restaurant name, operating hours, and item prices are not saved to Local Storage and will reload upon each page load).
    • Project Prompt
    • GitHub Repo

Bootcamp Weeks 6-12: Back End

PHP, MySQL, Laravel

  • Laravel Library
    • Built a website and checkout system for a fictional library. Used foreign keys to link between tables, allowing book and user data to be connected. Allowed users to sign-up for an account. Gave librarians the ability to add books to the database. Books can be added manually or by using searching the Google Books API. Librarians can checkout or return books by entering the books ISBN number, and the user's username. Checked out books appear in red on the view all books page. Utilized the 7 RESTful controller actions and CRUD principles.
    • Project Prompt
    • GitHub Repo

Spring 2020: Job Hunting

React Hooks, Swift 5

  • Phone Simulator
    • For the Phone Simulator, I combined 6 projects that we worked on during the Awesome Inc Web Developer Bootcamp. The Phone Simulator displays the current time at the top of the "screen". Below that, there is a weather module that pulls realtime weather data based on your current location. Below the weather app is a countdown timer (currently set to countdown to my birthday — March 21st). Below the countdown timer are three applications: Calculator, Todo List, and Mind Reader.
      For this project, I wanted to use React Hooks, as these are a feature of React that I was previously not too familiar with.
    • GitHub Repo
  • Facebook Emulator
    • In order to both help onboard Swift 5, and make me more comfortable working in Xcode/iOS simulators, I created an emulation of the Facebook homepage. I called my version of the app "Robbiebook".
    • GitHub Repo