diff --git a/README.md b/README.md
index 6af2a82..6228904 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,84 @@
-# tell-the-time
-A clock I made using Javascript 2D WebGL Canvas
+# JavaScript Canvas Clock
+
+This is a simple clock created using JavaScript and HTML5 Canvas.
+
+## Table of Contents
+- [JavaScript Canvas Clock](#javascript-canvas-clock)
+  - [Table of Contents](#table-of-contents)
+  - [1. Canvas Dimensions](#1-canvas-dimensions)
+  - [2. Origin and Coordinates](#2-origin-and-coordinates)
+  - [3. Drawing Axes](#3-drawing-axes)
+  - [4. Drawing a Circle](#4-drawing-a-circle)
+  - [5. Adding Clock Tics](#5-adding-clock-tics)
+  - [6. Displaying Current Datetime](#6-displaying-current-datetime)
+  - [7. Creating Clock Hands](#7-creating-clock-hands)
+  - [8. Using setInterval](#8-using-setinterval)
+  - [9. Clearing the Canvas](#9-clearing-the-canvas)
+  - [10. Smooth Clock Movement](#10-smooth-clock-movement)
+  - [11. Project Completion Date](#11-project-completion-date)
+  - [12. License](#12-license)
+
+## 1. Canvas Dimensions
+The canvas dimensions are specified in your code. You can adjust the width and height to fit your requirements.
+
+## 2. Origin and Coordinates
+The origin of the canvas is typically at the top-left corner (0, 0). Coordinates increase as you move right (X-axis) and down (Y-axis).
+
+## 3. Drawing Axes
+You can create a function to draw axes to help with your design.
+
+![Drawing Axes](images/clock%20(1).png)
+
+## 4. Drawing a Circle
+A circle can be drawn by generating points along its circumference and creating a path from one point to the next. Parameterise a circle with radius, r, and centre, c, as follows:
+
+![Drawing a Circle Equation](images/clock%20(2).png)
+
+Then create a function that draws a circle of radius 240 centered in the middle of the canvas. Draw
+the circle by generating points by sweeping over different values of θ ∈ [0, 2π] and creating a
+path from p(θi) to p(θi+1). Close and then stroke the path. See how the circle becomes smoother as you increase the number of points.
+
+![Drawing a Circle](images/clock%20(3).png)
+
+## 5. Adding Clock Tics
+To represent hours and minutes on the clock, you can create a function that draws lines from the center to different radii.
+
+![Adding Clock Tics](images/clock%20(4).png)
+
+## 6. Displaying Current Datetime
+You can use a JavaScript date object to display the current datetime.
+
+```javascript
+let d = new Date();
+document.getElementById("some_id").innerHTML = d;
+```
+![Displaying Current Datetime](images/clock%20(5).png)
+
+## 7. Creating Clock Hands
+Functions convert the current time into θ values for each clock hand and draw the lines.
+
+![Creating Clock Hands](images/clock%20(6).png)
+
+## 8. Using setInterval
+The `setInterval` function is used to update the clock every second.
+
+![Using setInterval](images/clock%20(7).png)
+
+## 9. Clearing the Canvas
+The canvas should be cleared before each render. Use the following code to clear the canvas:
+```javascript
+graphics.clearRect(0, 0, canvas.width, canvas.height);
+```
+
+![Clearing the Canvas](images/clock%20(8).png)
+
+## 10. Smooth Clock Movement
+Adjust the code to make the clock hands move smoothly, and update the second hand every 10ms. Remove the axes/guidelines.
+
+![Smooth Clock Movement](images/clock-final.gif)
+
+## 11. Project Completion Date
+This project was completed on Sunday, 13 August 2023, at 5:20 PM.
+
+## 12. License
+This project is licensed under the [MIT License](LICENSE).
diff --git a/images/clock (1).png b/images/clock (1).png
new file mode 100644
index 0000000..f5db28c
Binary files /dev/null and b/images/clock (1).png differ
diff --git a/images/clock (2).png b/images/clock (2).png
new file mode 100644
index 0000000..98600ac
Binary files /dev/null and b/images/clock (2).png differ
diff --git a/images/clock (3).png b/images/clock (3).png
new file mode 100644
index 0000000..6f424e2
Binary files /dev/null and b/images/clock (3).png differ
diff --git a/images/clock (4).png b/images/clock (4).png
new file mode 100644
index 0000000..05f3eb3
Binary files /dev/null and b/images/clock (4).png differ
diff --git a/images/clock (5).png b/images/clock (5).png
new file mode 100644
index 0000000..3106d37
Binary files /dev/null and b/images/clock (5).png differ
diff --git a/images/clock (6).png b/images/clock (6).png
new file mode 100644
index 0000000..7b44f07
Binary files /dev/null and b/images/clock (6).png differ
diff --git a/images/clock (7).png b/images/clock (7).png
new file mode 100644
index 0000000..05e8059
Binary files /dev/null and b/images/clock (7).png differ
diff --git a/images/clock (8).png b/images/clock (8).png
new file mode 100644
index 0000000..01affb7
Binary files /dev/null and b/images/clock (8).png differ
diff --git a/images/clock-final.gif b/images/clock-final.gif
new file mode 100644
index 0000000..0b84b04
Binary files /dev/null and b/images/clock-final.gif differ
diff --git a/index.html.html b/index.html.html
new file mode 100644
index 0000000..51bf0f6
--- /dev/null
+++ b/index.html.html
@@ -0,0 +1,340 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+    <!--meta declarations and links...-->
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200&display=swap" rel="stylesheet">
+    <title> Lab-0 </title>
+
+
+    <!--the styles and stuff that make the site look the way it looks-->
+    <style>
+        
+        *{
+            font-family: 'Inter', sans-serif;
+        }
+
+        #myCanvas {
+            border:1px solid #d3d3d3;
+            margin-right: auto;
+            margin-left: auto;
+            display: block;
+        }
+
+        h1, h2, p {
+            display: flex;
+            justify-content: center;
+        }
+
+    </style>
+
+    <!--this script only runs when the page has fully loaded and the body's onload event is triggered (i.e. <body onload="init()">). In other words, scripts in the head will only run if they are called. -->
+    <script>
+
+        var canvas;
+        var graphics;
+
+        // draws a black line segment
+        function Blackline (x1, y1, x2, y2) {
+            // Save the current graphics state.
+            graphics.save()
+
+            graphics.beginPath();
+            graphics.moveTo(x1, y1);
+            graphics.lineTo(x2,y2);
+            graphics.strokeStyle = "black";
+            graphics.stroke();
+
+            // Restore the graphics state to its original state.
+            graphics.restore();
+        }
+
+        // this function is merely a tweek of the one provided above: draws a red line segment
+        function Redline (x1, y1, x2, y2) {
+            // Save the current graphics state.
+            graphics.save();
+
+            graphics.beginPath();
+            graphics.moveTo(x1, y1);
+            graphics.lineTo(x2,y2);
+            graphics.strokeStyle = "red";
+            graphics.stroke();
+
+            // Restore the graphics state to its original state.
+            graphics.restore();
+        }
+
+        function drawCircle(radius, centerX, centerY, numPoints) {
+            // Save the current graphics state.
+            graphics.save();
+
+            // Begin a new path, clearing any existing path.
+            graphics.beginPath();
+
+            // Calculate the angle increment between each point on the circle.
+            var angleIncrement = (2 * Math.PI) / numPoints;
+
+            // Loop through the number of points specified to create the circle.
+            for (let i = 0; i <= numPoints; i++) {
+                // Calculate the current angle (theta) for this point.
+                var theta = i * angleIncrement;
+
+                // Calculate the X and Y coordinates of the current point on the circle.
+                // The parametric equations for the circle are used here.
+                var x = centerX + radius * Math.cos(theta);
+                var y = centerY + radius * Math.sin(theta);
+
+                // If it's the first point in the loop, move the pen to that point (without drawing a line).
+                // Otherwise, draw a line from the previous point to this point.
+                if (i === 0) {
+                    graphics.moveTo(x, y);
+                } else {
+                    graphics.lineTo(x, y);
+                }
+                
+            }
+
+            // Connect the last point to the first point to close the path, creating a closed circle.
+            graphics.closePath();
+
+            // Draw the circle on the canvas using the current stroke style (black line color).
+            graphics.stroke();
+
+            // Restore the graphics state to its original state.
+            graphics.restore();
+        }
+
+
+        function grid () {
+            // Save the current graphics state.
+            graphics.save();
+
+            for (let index = 60; index < 600; index+=60) {
+                
+                //start by checking if line being drawn is middle line...
+                if (index==300) {
+
+                    //drawing vertical lines from left to right
+                    Redline(index, 0, index, 600);
+
+                    //drawing horizontal lines from top to bottom
+                    Redline(0, index, 600, index);
+
+                }else{
+
+                    //drawing vertical lines from left to right
+                    Blackline(index, 0, index, 600);
+
+                    //drawing horizontal lines from top to bottom
+                    Blackline(0, index, 600, index);
+
+                }
+
+            }
+
+            // Restore the graphics state to its original state.
+            graphics.restore();
+        }
+
+
+        function drawTics(centerX, centerY, numPoints, radius, lengthFactor) {
+            // Save the current graphics state.
+            graphics.save();
+
+            // Calculate the angle increment for each tic point.
+            var angleIncrement = (2 * Math.PI) / numPoints;
+
+            // Loop through all the tic points.
+            for (let i = 0; i < numPoints; i++) {
+                // Calculate the angle in radians for the current tic.
+                var theta = i * angleIncrement;
+
+                // Check if the current tic is a multiple of 5 (hour tic).
+                if (i % 5 === 0) {
+                    // Calculate the length of the hour tic.
+                    var hourLength = radius * lengthFactor * 2;
+
+                    // Calculate coordinates for the inner end of the hour tic.
+                    var x1 = centerX + ((radius - hourLength) - (radius * lengthFactor)) * Math.cos(theta);
+                    var y1 = centerY + ((radius - hourLength) - (radius * lengthFactor)) * Math.sin(theta);
+
+                    // Calculate coordinates for the outer end of the hour tic.
+                    var x2 = centerX + ((radius - hourLength) + (radius * lengthFactor)) * Math.cos(theta);
+                    var y2 = centerY + ((radius - hourLength) + (radius * lengthFactor)) * Math.sin(theta);
+
+                    // Draw a longer black line for the hour tic.
+                    Blackline(x1, y1, x2, y2);
+                }
+
+                // Calculate the length of the minute tic.
+                var minuteLength = radius * lengthFactor / 2;
+
+                // Calculate coordinates for the inner end of the minute tic.
+                var x3 = centerX + (radius - minuteLength) * Math.cos(theta);
+                var y3 = centerY + (radius - minuteLength) * Math.sin(theta);
+
+                // Calculate coordinates for the outer end of the minute tic.
+                var x4 = centerX + radius * Math.cos(theta);
+                var y4 = centerY + radius * Math.sin(theta);
+
+                // Draw a shorter black line for the minute tic.
+                Blackline(x3, y3, x4, y4);
+                
+            }
+
+            // Restore the graphics state to its original state.
+            graphics.restore();
+        }
+
+
+        function drawHand(centerX, centerY, length, angle, color) {
+            // Save the current graphics state.
+            graphics.save();
+
+            // Convert the angle from degrees to radians and adjust by -90 degrees (for 0 starting from top).
+            var theta = (angle - 90) * (Math.PI / 180);
+
+            // Calculate the end point coordinates of the hand.
+            var x2 = centerX + length * Math.cos(theta);
+            var y2 = centerY + length * Math.sin(theta);
+
+            // Begin a new path for drawing.
+            graphics.beginPath();
+
+            // Move the starting point of the path to the center of the clock.
+            graphics.moveTo(centerX, centerY);
+
+            // Draw a line from the center to the end point of the hand.
+            graphics.lineTo(x2, y2);
+
+            // Set the stroke color of the line.
+            graphics.strokeStyle = color;
+
+            // Stroke (draw) the path with the specified color.
+            graphics.stroke();
+
+            // Restore the graphics state to its original state.
+            graphics.restore();
+        }
+
+
+
+        function drawClock(centerX, centerY, radius) {
+            // Save the current graphics state.
+            graphics.save();
+
+            // Clear the canvas before drawing the clock
+            graphics.clearRect(0, 0, canvas.width, canvas.height);
+
+            drawCircle(radius, centerX, centerY, 100);
+
+            // Add the 'tics' for hours and minutes
+            drawTics(300, 300, 60, 240, 0.05);
+
+            // Restore the graphics state to its original state.
+            graphics.restore();
+        }
+
+
+
+        function animateClock() {
+            // Save the current graphics state.
+            graphics.save();
+
+            // Clear the canvas to prepare for drawing the clock.
+            graphics.clearRect(0, 0, canvas.width, canvas.height);
+            
+            // Get the current date and time.
+            var d = new Date();
+
+            // Calculate the angles for the clock hands based on the current time.
+            var milliseconds = d.getMilliseconds();
+            var seconds = d.getSeconds() + milliseconds / 1000;
+            var minutes = d.getMinutes() + seconds / 60;
+            var hours = d.getHours() % 12 + minutes / 60;
+
+            // Calculate the angles for each clock hand.
+            var secondAngle = (360 / 60) * seconds;
+            var minuteAngle = (360 / 60) * minutes;
+            var hourAngle = (360 / 12) * hours;
+
+            // Draw the clock circle.
+            drawClock(300, 300, 240);
+
+            // Draw the second hand.
+            drawHand(300, 300, 300 * 0.8, secondAngle, "red");
+
+            // Draw the minute hand.
+            drawHand(300, 300, 300 * 0.7, minuteAngle, "black");
+
+            // Draw the hour hand.
+            drawHand(300, 300, 300 * 0.5, hourAngle, "black");
+
+            // Request the next animation frame to continue the animation loop.
+            requestAnimationFrame(animateClock);
+
+            // Restore the graphics state to its original state.
+            graphics.restore();
+        }
+
+
+        function updateDateTime() {
+            // Get the current date and time.
+            let d = new Date();
+
+            // Update the content of the HTML paragraph element with the current date and time.
+            document.getElementById("paragraph").innerHTML = d;
+        }
+
+
+        function init () {
+            canvas = document.getElementById("myCanvas");
+            graphics = canvas.getContext("2d");
+
+            // Call the grid function to construct the 10x10 grid on the canvas
+            grid();
+
+            // Then draw the circle of radius 240 centered in the middle of the canvas
+            drawCircle(240, 300, 300, 100);
+
+            // Add the 'tics' for hours and minutes
+            drawTics(300, 300, 60, 240, 0.05);
+
+            // Set up the animation loop
+            requestAnimationFrame(animateClock);
+            
+            // Set interval to update the text clock every second
+            setInterval(function() {
+                updateDateTime();
+            }, 1000);
+        }
+
+    </script>
+
+</head>
+<body onload="init()">
+
+    <h1>COMS3006A: Computer Graphics and Visualisation</h1>
+    <h2>Lab 0: Javascript Canvas</h2>
+    <p id="paragraph">Time will appear here if working correctly.</p>
+
+    <!--the html5 canvas tag begins here-->
+    <canvas id="myCanvas" width="600" height="600">
+
+    Your browser does not support the HTML5 canvas tag.
+
+    </canvas>
+    <!--the html5 canvas tag ends here-->
+
+
+    <!--this script will run as the browser's interpreter reaches the line-->
+    <script>
+        //alert ("Hello, World!");
+    </script>
+
+</body>
+</html>
\ No newline at end of file