Adrian Stanton
Munchbyte

Munchbyte

JavaScript building my skills part 1

JavaScript building my skills part 1

Adrian Stanton's photo
Adrian Stanton
·Jun 22, 2022·

2 min read

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: typing test final.png

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.

typin test html.png

A link for fetching the quotes

typintest_js1.png

then there is the logic for comparing the input to the quote and comparing the accuracy.

typingtet_js3.png

typingtest_js4.png And the timer

typingtest_js5.png

typingtes_js6.png

Digital clock

this is the result I was aiming for:

digiclk_original.png

This clock is more CSS and HTML with a little Javascript.

digiclk_js.png

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.

mydigiclk.png

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
 
Share this