Planets-Site
Responsive site featuring facts about planets in our solar system.
Tic-Tac-Toe Game
I created an online version of the classic game of tic tac toe, utilising HTML, CSS, and good old-fashioned vanilla JavaScript.
Keyboard Drum Kit
A fun project from the Wes Bos 30-Day Vanilla JavaScript Challenge! Turn your keyboard into a working drum kit. Sounds include boom, clap, hihat, kick, openhat, ride, snare, tink, and wave. Desktop only.
JS-and-CSS-Clock
Another Wes Bos-inspired project that utilizes JavaScript getHours, getSeconds, and getMinutes methods to access information on the Date object. I implemented CSS transition and transform properties, most notably the transitions-timing-function, to control the animation speed of the ticking clock.
Product Card
Here is my solution to the Frontend Mentor "Product Card Preview Component" challenge. I used semantic HTML5 markup to make the code clean and readable and create a better user experience, and I used CSS flex and grid layout properties to style it up.
Magic 8 Ball
Just like the real-life 3-D plastic toy, click the button to see the custom CSS properties shake the 8 ball as you ask your question. It will return a random selection from an array of the original 20 Magic 8 Ball replies.
Typing Speed Test
Show off your speed and accuracy typing skills with this whimsically designed test! JavaScript functions compare user input against an array of predetermined sentences to calculate words per minute, characters per minute, and accuracy as a percentage. User has 90 seconds to complete the test.
QR Code
Another fun Frontend Mentor challenge, to create a functional QR code. My name at the bottom of the QR Code image is a hyperlink which redirects to my GitHub profile when clicked.
Ken-Ken Puzzle
The name derives from the Japanese word for cleverness (賢, ken, kashiko(i)).
Giphy API
Enter a search keyword into the text input box, click the "Giphy Search" button, and this app will fetch data from the Giphy API to return a GIF image of your search term.
Flex Panel Gallery
A fun project from the Wes Bos 30-day Vanilla JavaScript Challenge, one that relies heavily on nested CSS flexbox properties to make the panels grow and shrink both horizontally and vertically.
Speech Detection
Allow the app to access your device's microphone, and anything you say will be converted to text.
React Memory Game
A memory game created with React. Click on the cards to turn them over, if a matching pair is revealed, then they remain highlighted in green and stay facing up. If the cards are not a match, they will be highlighted in red and return to their original downward-facing position after 2 seconds.
3-panel product preview
A Frontend Mentor design challenge.
URL-shortening app
This app integrates the shrtcode API to generate shortened links. Just enter a link into the search bar to safely and securely generate a short link that is easier to remember. When visiting the short link, the short link will automatically redirect you to the long link.
Minecraft Simulator
Basic Minecraft simulator. Use W-A-S-D keys to move, press the space bar to jump. There are five materials to choose from: dirt, glass, grass, log, wood. Press keys 1, 2, 3, 4, 5 to select material. Right-click to place block; alt + right-click to remove selected block. Press reset button to reset world. *Desktop/laptop only; no mobile version, as a mouse is necessary!
Connect Four
Select mode: easy, medium, or difficult. Play against computer or another player. A React app built with node.js, npm, and TypeScript.
Weather-App
A completely functional weather app that fetches data for any city in real time from the Open Weather API. Reports temperature in both Fahrenheit and Celsius, wind speed, expected high and low temperatures, plus what the current temperature actually feels like.☁️ ❄️ ☀️.
Movie-App
An app to search for trending films, as well as keep track of movies you've seen and would like to see. Fetches current movie data from The Movie DB API. Click the "Home" link to load all currently trending films. Tap any movie poster to make the "Watched" and "Watchlist" options appear, tap either option to add the movie to that list.
- Powered by: ElizabethKennedy