For Bit Project's Javascript with Twilio bootcamp, I had to privilege of making a simple digital/analog clock website.
This project can tell the user the time, key features include:
- Availability of digital and analog forms.
- Choice between all US time zones.
- Day and night mode
- Mood lighting!!! (with all colors of the rainbow)
A bit about myself - I was interested in web design and had taken some HTML/CSS/Javascript courses on Codecademy, but I didn't like their spoon-feeding teaching model and it was hard to see how to bring these three wonderful languages together. So one of the biggest takeaways was that I learned how to integrate all of these components together into a beautiful site. Additionally, I had used GitHub a few times in the past but it was always a sloppy and spontaneous process. This course's structure has made me develop and push my projects in a more organized and professional manner, which are definitely good habits to have. I also appreciate how this course helped me practice newer concepts that Codecademy had glossed over, such as CSS variables and changing values between HTML, CSS, and Javascript files.
While all projects within the boot camp have to follow certain standards, I tried making mine a bit different through the availability of a day/night mode as well as a mood lighting animation. I'll cover in more detail how these work below...
I have covered the key features of my work above. Overall, I think someone with beginning-intermediate experience can replicate my work fairly well. I hope users enjoy the analog/digital switch setup and the graphics.
The digital clock didn't need a lot of HTML elements, but the analog clock did:
For the digital clock I could just print the time using a Date object and then make smaller adjustments:
but for the analog clock I had to write a function and a CSS variable that would continually adjust my clock hands based on a time ratio (CSS variable not shown):
For time zones, I made good use of HTML forms:
This then modifies a variable in the js file to adjust the clock depending on what time zone is selected.
The clocks themselves can be styled with adequate knowledge of colors, borders, and fonts. There are some interesting stylistic choices I made however:
Day/night modes are increasingly common online, so here is mine.
The HTML file itself has a form that would change the background when one of the radio buttons are clicked.
This is tied to a JS function that adjusts the color scheme:
Day
The mood lighting itself is not static - the color continuously changes. To achieve this effect, I first created a special shadow effect using webkit-box-shadow, as seen in the CSS file.
To change it, however, I took advantage of CSS's animation feature, where we would cycle through the colors of the rainbow infinitely, for 15 seconds at a time.
Below is are the key frames I established for the animation.
I am very grateful for this experience in that it helped me get experience building a more complex website, not just one with a bunch of text and colors. Working with forms and animations, as well as having the JS, HTML, and CSS files interact with each other are all new content to me. I think making the analog clock was the hardest part because that meant continually adjusting the hands of the clock and telling it how and where to rotate. The hands especially needed to make good use of Javascript to work. My favorite parts were designing the animation and the different color modes at the end; I hope Bit Project does more to make their assignments much more open-ended. In the future, I would improve this site by using a color wheel rather than just day/night modes and including music, more fonts, and a cleaner, more vertical layout.