JavaScript Tutorial: A Simple Clock (Code Fully Explained)
In this video I will teach you how to build a simple clock, step by step, using JavaScript. This tutorial is designed for beginners. Enjoy :)
Done with the tutorial? Keep learning here: https://jaydoesjs.com/clock
=== Chapters ===
00:00:00 - Overview
00:01:04 - The plan
00:02:46 - Setting things up
00:04:52 - The project folder
00:08:35 - The webpage
00:16:52 - Automatic reload
00:24:58 - The tools
00:31:53 - HTML overview
00:33:59 - The canvas tag
00:41:10 - HTML attributes
00:53:35 - HTML closing tags
01:01:46 - The style tag
01:16:02 - The brush
01:21:35 - JavaScript
01:30:45 - The canvas in JavaScript
01:47:23 - Saving things in JavaScript
01:52:33 - The brush in JavaScript
02:07:56 - Drawing the hands (overview)
02:09:56 - Brush color
02:25:04 - Brush thickness
02:29:49 - Moving the brush
02:44:37 - Drawing one line
02:58:14 - Code review
03:05:49 - Drawing the other two hands
03:21:31 - Functions and boxes
03:28:01 - The drawHand function
03:39:13 - Using functions
03:48:51 - The color parameter
04:03:47 - The thickness parameter
04:09:16 - The x and y parameters
04:16:38 - Improving the parameters
04:33:47 - Finding x and y (steps)
04:48:11 - Finding x and y (code)
05:02:08 - Drawing the detail
05:09:48 - The drawCircle function
05:31:58 - Drawing the frame
05:50:42 - Moving the hands
06:13:10 - Finding the current time
06:22:34 - The redraw function
06:33:59 - Clearing the canvas
06:50:38 - Filling the gaps
On this page of the site you can watch the video online JavaScript Tutorial: A Simple Clock (Code Fully Explained) with a duration of hours minute second in good quality, which was uploaded by the user JayDoesJS 05 September 2024, share the link with friends and acquaintances, this video has already been watched 139 times on youtube and it was liked by 2 viewers. Enjoy your viewing!
