JavaScript 30: JS and CSS Clock

-

 

JavaScript 30 Image
JavaScript 30 by Wes Bos

Next up is a JavaScript and CSS Clock.  This lesson was a lot of fun as I was able to take what I initially learned and customized the overall look and feel of the clock.  The original clock had a blue background and a simple white design.  Although I could have stopped here, I decided to change the background and colors.  It is important to note that when Wes Bos said, "...now that we have created the animations for the seconds, you can stop the video and try to figure out the minute and hours hand" <--paraphrasing, I was able to do just that.  It felt great to be able to finish the project and then confirm my code with the rest of the video.  At this point, I'm feeling pretty proud of my JavaScript clock as I have made it into a themed based design, specifically A Clockwork Orange.  See screenshots below.


Image of JavaScript Clock Original
Original JavaScript 30 JS CSS Clock


Image of JavaScript Clock: A Clockwork Orange
A Clockwork Orange Themed JS and CSS Clock

Alternate Image was from DeviantArt by Estyy.  clockwork woomy

Comments

Post a Comment

Popular posts from this blog

JavaScript 30: JavaScript Drum Kit

-
Image
JavaScript 30 with Wes Bos Before we begin, I would like to point out that I have not had a good experience with JavaScript.  Unlike HTML and CSS, JavaScript felt like a lot of code and work.  What I mean to say is that in the past, instead of using JavaScript, I used frameworks and other technologies to help make things work without all of the fuss. From what I understand, this practice of being a "script kiddie" by copying and pasting existing code is a normal progression of the learning process.   This didn't end as well as I hoped because life jumped on top of my code learning adventure and the train came to screeching halt. In any case, below starts my journey back onto hand coding "vanilla" JavaScript.  First stop, JavaScript Drum Kit.  (side note, I made a drum kit back in the day using Flash) This was the the 1st lesson out of the 30 that are a part of the JavaScript 30 course.  For this lesson, I was able to create a drum kit using with most o...
Read more

Lynda.com: Become a Unity 2D Developer (Day 11..Sort of)

-
Image
UNITY 2D LEVEL DESIGN (...continued part IV) Unfortunately, I had to take a huge departure from learning Unity.  Let's just say that I'm also studying Cisco stuff.  Needless to say, I figured it was time to finish what I had started.  Switches Create Switches This chapter was similar to other animation tutorials, specifically in the setup process.  First, I had to create a switch object by utilizing the three images of the switch, which are the three states of the switch, specifically "Down, Up, and Idle". Afterwards, it was a matter of setting up the animations and then sequencing them.  I created three animations for the switch: SwitchUpAnimation, SwitchDownAnaimtion, and SwitchIdleAnimation.  From there, the AnimState was configured according to the sequence of the animation. Switch Collision Trigger Creating the switch now leads to implementing code.  First, I created a new C# script and then proceeded to create new funct...
Read more

Back On the Coding Horse

-
I am finally getting back into coding.  It has been a long hiatus, but the time away helped refocus my career goals.  Nevertheless, I am going to dive into coding.  Within this learning blog, I will work on web development and video games.  Yes, it is an ambitious goal, but I figured I would shoot for the stars.  If I land on the moon, that's okay too.  Below are a list of things I would like to learn. Web Development HTML CSS JavaScript Application/Game Development C++ Rust Python Although I may have a BS in Web Design and Interactive Media, I have yet to gain traction in my career.  Yes, I'm in IT currently.  I make a decent living, but I cannot help but want more than troubleshooting issues and documentation.  With all that said, to get back on the "coding horse", I'm going to take full advantage of the free tutorials and resources I have at my disposal.  First up is JavaScript 30 by Wes Bos.  In the web development world, he's w...
Read more