Javascript Projects

Simple CSS / JavaScript Clock

Description

This is a css / JavaScrict clock that I built to better understand javascript and some of it's uses. The clock itself is made by using css alone. The goal of doing this project was to see how to target objects using javascript and applying some basic transitions using JavaScript functions.

Challenges

Some of the challenges I faced in doing this project was trying to understand the JavaScript and figure out what certain functions did as this was my first venture into creating a JavaScript project there was a lot of stopping the tutorial to figure out what something did and how it worked.

JavaScript Scrolling Effects

Description

This is webpage that I built to show off some JavaScript functionality. The goal of the website was to showcase a navigation bar that when scrolled down turns into a fixed nav with the logo sliding in. The other goal that I had was I wanted to fade in/out images when you scroll by them.

Challenges

Some of the challenges that I faced when making this page was understanding the concepts behind calculating where the image was on the screen at any given point. The navigation bar was relatively simple to complete and I didn't have much trouble understanding how the code worked for it.

JavaScript Scrolling Effects Thumbnail
JavaScript Scrolling Effects Thumbnail

JavaScript Keyboard

Description

This is a javaScript keyboard that I made to help me learn how to use javaScript. The goal of the keyboard was to figure out how to target specific keys and then run a function that plays an audio sound effect when the key is pressed while also changing some of the css styling effects.

Challenges

This was one of the first tutorials that I had followed to create something with JavaScript and I found that I had to look up some of the simpler terms that weren't described in the tutorial for instance the Const tag, I didn't realise at the time that was another way to make a variable.

Drawing in Canvas with JavaScript

Description

This was a small project that I built to help me understand the basics of Canvas, while continuing to practice my JavaScript. The goal of this project was to create an area where a user can draw in and the brush would have some cool stylistic effects.

Challenges

The challenge for this project was adding the clear button as in the tutorials that I was following did not have it I went and figured out how to do it on my own.

JavaScript Scrolling Effects Thumbnail
JavaScript Scrolling Effects Thumbnail

Updating CSS Variables with JavaScript

Description

This is a small project where the goal and purpose was to play around with CSS variables and to modify them by using javascript.

Challenges

The challenge for this project was learning about css variables and how they work as well as trying to understand how the javascript was modifying those variables.