My Journey Through JavaScript30!
I created this portfolio to show off my progress through the JavaScript30 program. Click the links below to check out each completed project, and be sure to check the source code to see how these projects came to life.
JavaScript Drum Kit
A small JS drum kit: when the corresponding key is pressed, the appropriate sound will play. Additionally, the class of 'playing' is added to the key, which triggers a color transition.
CSS + JS Clock
JavaScript clock that accesses the current time using new Date(), getSeconds(), getMinutes() & getHours() and updates the time accordingly!
CSS Variables with JS
CSS Variables can be updated with JavaScript so that when you update a variable in CSS, everywhere on the page where that variable is referenced will be updated as well. Change the spacing, blur and base color to suit your own style!
Array Cardio Day 1
First round of array method practice! Right-click on the page and select 'Inspect' to view the array problem solutions in the console
Flex Panels Image Gallery
CSS featuring flexbox and transitions! Click on each panel to see where I've traveled and when!
Ajax Type Ahead
Filter an array of cities and states into a subset, based on what you've typed in. You'll also get the current population of each city/state! This mini-project grabs data from a third-party API using fetch().
Array Cardio Day 2
Round two of working with arrays! This lesson features the following methods: .some(), .every(), .find(), .findIndex(), and .slice()!
HTML Canvas Tool
This project uses the HTML canvas element to draw 2D graphics via Javascript. Click and drag your mouse over the screen to create whatever design you wish, and visit the Mozilla Canvas Tutorial Docs for more info!
14 Must-Know Dev Tools/Tricks
Another project you'll need to view in the console! Pop it open to see how to use handy developer tools, like console.group, console.time, and console.info! And if you click the text on the page, you'll witness an onClick inline event at work.
Hold Shift & Check
Ever clicked on a spam email in your inbox, held down shift, and deleted multiple junk messages at once? If you haven't...how is that possible? This project mimics said functionality. Follow the instructions to check and uncheck the list items!
HTML5 Video Player
This project allowed me to get a closer look into customizing video players. Embedded video players are a common feature on websites, and I learned a ton about creating unique controls to toggle the volume, video speed, and enter/exit fullscreen mode. Pop it open and test out the controls yourself!
Key Sequence Detection
This project was a quick glimpse into using key press events and KONAMI code. If you happen to type the secret code (melnesbitt) while visiting this project page, this project's key sequence detection function will send a surprise message both in the console and on the page.
Slide In On Scroll
This project is a quick tutorial on a bit of image animation: allowing images to slide in and out of view as the user scrolls up and down the page! Take a look at the different images that populate as you scroll, and refresh the page to see some new ones each time! Bonus points if you can read Latin...
References Vs. Copies
A quick refresher on the differences between references and copies with strings, objects and arrays. Not knowing if you are working with a reference or a copy can be a source of bugs, especially when working with nested data. Pop open the console to see references vs copies at work!
Local Storage
Local Storage is an excellent resource for storing information to your browser that you can revisit even after navigating away from the page. You can add some items to the local tapas list, refresh, and voila! They are still in your local tapas list as well as in your local storage array, in the Application tab in the console.
Mouseover Shadow Effect
A quick review of mouseover events and generating a dyanmic text shadow based on how the user moves their mouse! This project makes use of offsetWidth and offsetHeight, offsetX and offsetY, and event.target. Hover your mouse over 'WHOAH' to see it in action!