JavaScript Project: 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 :)

=== 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