After completing the Mario game I decided to move on to a javascript project that wasn't a game, so after a bit of research, I had myself a good list of projects. I thought if I work my way through the list each could teach me different things about the javascript language and its functions. Below is a list of projects thought could be useful or interesting. I will cover most in my blog, I may do 2 or 3 each post depending on how long they take. the first tutorials in the undertaking are a typing test and a digital clock. The typing test displays a quote for you to type in the text box, and then tells you how fast you type and how accurate your typing is.
This is the final result:
First I set up a standard HTML, CSS and javascript file. first was the set-up of the HTML code for the text box and the quotes, which is served using an API, something I will be learning in more detail later. some basic CSS to style the page.
A link for fetching the quotes
then there is the logic for comparing the input to the quote and comparing the accuracy.
And the timer
Digital clock
this is the result I was aiming for:
This clock is more CSS and HTML with a little Javascript.
I tried to get a little clever and started playing around with the code, I tried adding milliseconds and changing the shape. my results were not great.
as you see it's not lined up properly, I will go through the code to find my error and will update on the final result.
In conclusion, I have learnt a few basics of javascript still more to learn, and I need to better my learning methods I will improve my write-ups as I go. all my code will be on my Github repository.
- sticky notes
- to do list
- budget app
- live cricket app
- book list app
- weather app
- animated simple form
- movie search app
- eyes following mouse
- spotify clone
- shopping cart
- pop up window
- usplash clone
- digital clock
- resume generator
- Pomodoro timer app
- typing tester
- movie player
- image generator
- currency converter
- translator
- music player
- rich text editor
- book marker
- password generator
- slideshow