Maharashtra State Board of Technical Education

Mumbai. (M.S.B.T.E)

MICRO PROJECT ON
“Analog Clock”

Submitted by
Snehal Palkar
Kalyani Mule

G.S. Mandal’s
Department of Computer Engineering
Marathwada Institute of Technology,
Polytechnic, Chh.Sambhajinagar.

Academic Year: - 2024-2025

 MAHARASHTRA STATE
BOARD OF TECHNICAL EDUCATION

CERTIFICATE
This is to certify that : -

Roll Enrollment Exam

Name of Student
No. No. Seat No.
79 Kalyani Mule 2200660242

122 Snehal Palkar 2200660193

have successfully completed “Analog Clock” Micro-project for the subject

Client-sidescripting language as in the enclosed ‘Portfolio’ during his tenure of
Completing the Diploma in Computer Engineering CO5I in Academic Year
2024-25 from M.I.T. Polytechnic, Chh.Sambhajinagar with Institute Code 0066.

Date:

Prof.V.N.Shahane Prof. A.S.Nagrik

Guide H.O.D.

Principal
Marathwada Institute of Technology,
Polytechnic, Chh.Sambhajinagar
 INDEX
Annexure-IV Micro Project Teacher Evaluation Sheet
Annexure-I “Format for Micro-Project Proposal”
1.0 Aim/Benefits of Micro Project

2.0 Course Outcomes Addressed

3.0 Proposed Methodology

4.0 Action Plan

5.0 Resources required

6.0 Name of team member

Annexure-II “Format for Micro-Project Report”

1.0 Rationale

2.0 Aim/Benefits of Micro Project:

3.0 Course Outcomes Achieved

4.0 Literature Review

5.0 Actual Methodology Followed

6.0 Actual Resources Used

7.0 Outputs of the micro projects

8.0 Skill Developed/Learning outcome of this micro project

9.0 Applications of this micro project

 Annexure-IV
Micro Project Teacher Evaluation Sheet

Name of the student:Kalyani Mule Enrollment no: 2200660242

Name of Program: Diploma in Computer Engineering Semester : - 5th
Course Title : Client-side scripting language Code: 22519
Title of Micro Project: Analog Clock
Course Outcomes Achieved:

1. CO (a): Select, collect and use required information/knowledge to solve the problem/complete
the task.

Sr. Characteristics to be assessed Poor Average Good Excellent Sub

(Marks1-3) (Marks 4-5) (Marks 6-8) (Marks 9-10) total
no.

(A) Process and product assessment (cover above total marks out of six marks)

1 Relevance to the course

2 Literature review /Information

collection

3 Completion of target as per

project proposal

4 Analysis of data and

representation

5 Quality of prototype/model

6 Report preparation

(B)individual presentation / viva (convert above total marks out of 4 marks)

7 Presentation

8 Viva

Comments / Suggestions about work:

Signature of Teacher:

Name and Designation: Prof. V.N.Shahane

of the Teacher
 Annexure-I
Micro-Project Proposal
Title of Micro-Project : Analog Clock
1.0 Aim/Benefits of Micro Project
Analog makes it easy to visualize time differences and appraise large and
small differences of hours or minutes. Analog clocks can also help you realize
a cost savings beyond the initial purchase price. They are more energy efficient than
digital displays, which is not only good for your bottom line, but can also help you reach
your energy reduction goals Many of them are powered with AA battery packs, that
extend maintenance free operation for several years without replacement. With many
facilities placing an emphasis on “going green” these days, maybe you'll want to go
analog, as well.

2.0 Course Outcomes Addressed

a. Create interactive web pages using program flow control structure
b. Select, collect and use required information/knowledge to solve the
problem/complete the task.
3.0 Proposed Methodology
3.0.1 Create an HTML Structure: Begin by designing the basic layout of the Analog
Clock using HTML, including input fields for adding tasks, buttons for editing and
deleting tasks, and areas to display the task list.
3.0.2 Implement Task Management Functions with JavaScript: Develop JavaScript
functions to handle task addition, editing, and deletion, enabling real-time interaction
between the user and the interface.
3.0.3 Apply Local Storage for Data Persistence: Utilize JavaScript’s local Storage to
store tasks locally in the user’s browser, ensuring that tasks remain even after the browser
is closed or refreshed.
3.0.4 Use Custom JavaScript for Data Validation: Implement custom JavaScript
validation rules to ensure tasks are entered correctly. This includes checks for empty
inputs or duplicate tasks to improve the integrity of the task list
3.0.5 Real-time Feedback to Users: Provide real-time user feedback by displaying error
messages for invalid inputs, success messages when tasks are added, and updates when
tasks are completed or modified.
3.0.6 Incorporate Task Filtering: Implement filtering functionality that allows users to
categorize tasks based on completion status (e.g., show all tasks, completed tasks, or
incomplete tasks).

3.0.7 Test with Various Input Scenarios: Test the application by adding, editing,
deleting, and filtering tasks under different conditions to ensure smooth functionality and
proper handling of edge cases.

3.0.8 Finalize Documentation and Code: Document all JavaScript functions, the
overall structure of the project, and user interaction steps, and store the final version of
the project for future reference.

4.0 Action Plan

Sr. Details of Activity Planned Planned Name of

No Start Date Finish Date Responsible
Team Members
1 Select the topic for 12/08/2024 13/08/2024 Kalyani
microproject Snehal
2 Understand the requirements 13/08/2024 23/08/2024 Kalyani
Snehal
3 Finding information from 24/08/2024 28/08/2024 Kalyani
textbook and Internet Snehal
4 Discuss the microproject with 28/08/2024 01/09/2024 Kalyani
project guide Snehal
5 Create a html form 02/09/2024 06/09/2024 Kalyani
Snehal
6 Applied validation to html 06/09/2024 08/09/2024 Kalyani
form Snehal
7 Execute and test program 08/09/2024 09/09/2024 Kalyani

8 Review and report 09/09/2024 10/09/2024 Kalyani

Snehal
9 Prepare a report 11/09/2024 13/09/2024 Kalyani
Snehal
10 Print report and attach to file 14/09/2024 14/09/2024 Kalyani
Snehal
 5.0 Resources required
Sr. Name of Resource Category Specification Qty Remar
.
No ks
1 Computer system Hardware 16 GB RAM 1
&
Windows 11 OS
2 Browser Software Chrome 1
16002.60.0
3 Vs code Software 1.6 GHz 1
processor, 1GB
ram

6.0 Names of Team Members with Roll No. : -

Roll No. Name of Student

79 Kalyani Mule
122 Snehal Palkar
 Annexure-II
Micro-Project Report

Title of Micro-Project : -Analog Clock

1.0 Rationale
Analog clock shows time passing by moving hands continuously. The history and
the origin of the clock is an interesting one, as it is hard to point which civilization
invented it first. People would originally determine the time of the day by
observing the length of their shadow. When the shadow was longest it meant that
it was noon. Over centuries there have been sand dials, water clocks, and other
such clocks to tell the time. Once you can read the time, you can read a random
analog clock and not cross-check to see a digital clock.
2.0 Aim/Benefits of Micro Project:
Analog makes it easy to visualize time differences and appraise large and
small differences of hours or minutes. Analog clocks can also help you realize a
cost savings beyond the initial purchase price. They are more energy efficient than
digital displays, which is not only good for your bottom line, but can also help you
reach your energy reduction goals Many of them are powered with AA battery
packs, that extend maintenance free operation for several years without replacement.
With many facilities placing an emphasis on “going green” these days, maybe you'll
want to go analog, as well.

3.0 Course Outcomes Achieved

a. Create interactive web pages using program flow control structure
b. Select, collect and use required information/knowledge to solve the
problem/complete the task.
4.0 Literature Review : -
4.1 Introduction to Analog Clock
An analog clock is a tool for reading the time of day. The longest hand
indicates the seconds, the longer one indicates the minutes while the smallest
one indicates the hours. The shortest hand indicates the hour, a longer hand
indicates the minutes, and the longest arm indicates the seconds.
4.2 JavaScript and Analog Clock of application
JavaScript plays a significant role in building interactive and functional Analog
Clock applications. It allows users to add, delete, edit, and mark tasks as
complete, making the list dynamic and user-friendly. Additionally, JavaScript
can store tasks in the browser's local storage, so they persist even after the page
is refreshed.
4.2.1 Analog Clock Features Implementation

To create a functional Analog Clock using JavaScript, the following

features are commonly implemented:

• Add Tasks: A user can input a new task, which is dynamically

added to the
• Delete Tasks: Users can remove completed or unnecessary tasks
from the list.
• Edit Tasks: Tasks can be updated or edited for any changes in the
requirements.
• Mark as Complete: Completed tasks can be marked with a
strikethrough or moved to a separate section.
• Local Storage: The list is stored in the browser’s local storage,
ensuring the tasks are retained even after refreshing the page.

4.2.1 Advantages of Analog clock

1. Easy to Read: Analog clocks provide a quick and intuitive visual
representation of time.
2. No Battery Worries: Mechanical analog clocks don't require
batteries.
3. Durability: Well-made analog clocks can last for decades.
4. No Distractions: Analog clocks focus solely on time-telling,
minimizing distractions.
5. Simple Maintenance: Analog clocks require minimal
 maintenance.
4.2 Challenges and Considerations

While Analog Clock are effective, there are certain challenges and
considerations:

• Overloading Tasks: Too many tasks can overwhelm users, leading to

lower productivity.
• Lack of Categorization: Without proper organization, a long list of tasks
may become confusing.
• Real-time Sync: Synchronizing lists across multiple devices can be
challenging without server-side integration.

4.3Best Practices for Building a Analog Clock

To effectively implement a in JavaScript, consider the following best practices:

• Modular Code: Write reusable code for adding, deleting, and editing
tasks to improve maintainability.
• User Experience: Ensure that the interface is intuitive, with easy task
addition and deletion.
• Data Persistence: Use local storage or server-side databases to save tasks
for future sessions.
• Task Categorization: Group tasks by priority, deadlines, or project to
improve task management.

4.4 References

While developing this Analog Clock project, we referred to the following

sources:

1. W3Schools: JavaScript Analog Clock:

o In this tutorial, we learned how to implement a basic To-Do
List using JavaScript, focusing on adding, deleting, and
marking tasks as completed.
2. GeeksforGeeks: Analog Clock using JavaScript
o This tutorial provided a detailed guide on building a more
advanced To-Do List, including local storage for task
persistence.

3. https://www.youtube.com/analogclock

o This video walks through building a Analog Clock from

scratch, using JavaScript for adding tasks, and managing
them effectively.
o
 4. YouTube Video: Local Storage with JavaScript

o This video tutorial taught us how to use local storage to save

the Analog Clock so that tasks persist even after refreshing
the page.

This structure explains the Analog Clock, how to build it using JavaScript, the
advantages, challenges, and best practices, along with references to tutorials and videos.

5.0Actual Methodology Followed for Creating a Analog Clock:

5.1 Understand the Purpose of a Analog Clock

• The primary goal is to develop a system that allows users to organize tasks,
add new ones, delete them, and manage their progress efficiently. Begin by
researching the purpose of to-do lists and how they benefit users in managing
time and productivity.

5.2 Research Existing Analog Clock Applications

• Before starting, explore popular Analog Clock applications like Google

Keep, Todoist, or Microsoft clock to understand their features. Identify
common functions such as task creation, editing, deleting, and categorizing
tasks based on priorities or deadlines.

5.3 Outline the Features to Include

• Create a list of essential features the Analog Clock should have, including:
o Adding new tasks.
o Editing existing tasks.
o Deleting completed or irrelevant tasks.
o Marking tasks as complete.
o Reminders for tasks
o Option to save or print the task list.

5.4 Choose the Development Tools

• Select the programming languages and tools needed for the project. For a
simple Analog Clock:
o HTML for structuring the task list
o CSS for styling the layout.
o JavaScript for adding functionality like task creation, deletion, and
marking tasks as done.
5.5 Design the User Interface (UI)

• Draft the UI on paper or using a design tool. Plan for input fields where users
can type tasks, buttons for adding and deleting tasks, and a checkbox for
marking tasks as completed. Ensure the layout is simple and intuitive.

5.6 Develop the Structure Using HTML

• Start by writing the HTML code that defines the layout of the Analog Clock
Use a form input field for task entry, a button for adding tasks, and an
unordered HTML structure

5.7 Style the Analog Clock Using CSS

• Apply CSS to make the Analog Clock visually appealing. Use colours, fonts,
and spacing to make it user-friendly. Ensure that completed tasks are styled
differently (e.g., strikethrough text) for clear differentiation.

5.8 Write JavaScript Functions for Core Features

• Develop the core functionality of the Analog Clock:

o Add Task Function: Create a function that listens for the 'Add Task'
button click, retrieves the entered task, and displays it in the task list.
o Delete Task Function: Write a function that allows users to remove
tasks they no longer need.
o Mark Task as Completed: Implement a function that marks a task as
completed when the checkbox is checked, applying a visual cue such
as strikethrough.

5.9 Test and Debug the Application

• Once the basic functionality is implemented, test the Tthoroughly. Try

adding, editing, and deleting tasks to ensure everything works as expected.
Debug any issues that arise, such as tasks not displaying or deletion not
functioning correctly.

5.9.1 Review and Refine the Code

• Go through the code to improve readability and maintainability. Use

comments to explain key functions and ensure the code follows best
practices for web development.

5.9.2 Prepare the Final Documentation

 • Document the entire process, including the features, tools, and
resources used. Provide a brief explanation of each step, the challenges
faced, and how they were overcome.

5.9.3 Submit the Completed Project

• Once the Analog Clock is functioning as desired, print or save the final
code, along with the report, and prepare it for submission. Include
screenshots of the working application.

6.0 Actual Resources Used

Sr. Name of Category Specification Qt Remar

y.
No Resource/Material ks
1 Computer system Hardware 16 GB RAM 1
&
Windows 11
OS
2 Browser Software Chrome 1
16002.60.0
3 Vs code Software 1.6 GHz 1
processor, 1GB
ram
7.0: Outputs of the micro projects
Code: (all the files are in one folder)
Index.html: -

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<title>Analog Clock</title>
<link rel="stylesheet" href="styles.css">
</head>

<body>
<div class="clock">
<div class="clock-face">
<div class="number number1">1</div>
<div class="number number2">2</div>
<div class="number number3">3</div>
<div class="number number4">4</div>
<div class="number number5">5</div>
<div class="number number6">6</div>
<div class="number number7">7</div>
<div class="number number8">8</div>
<div class="number number9">9</div>
<div class="number number10">10</div>
<div class="number number11">11</div>
<div class="number number12">12</div>
<div class="hand hour-hand"></div>
<div class="hand minute-hand"></div>
<div class="hand second-hand"></div>
</div>
</div>
<script src="script.js"></script>
</body>

</html>
Javascript code:

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f0f0f0;
margin: 0;
}

.clock {
width: 300px;
height: 300px;
border: 20px solid black;
border-radius: 50%;
position: relative;
padding: 20px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
background: white;
}

.clock-face {
position: relative;
width: 100%;
height: 100%;
transform: translateY(-3px); /* Fix for the hands positioning */
}

.hand {
width: 50%;
background: black;
position: absolute;
top: 50%;
transform-origin: 100%;
transform: rotate(90deg);
transition: all 0.05s;
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
.hour-hand {
height: 6px;
[12:00 PM, 10/24/2024] Snehal: }

.minute-hand {
height: 4px;
}

.second-hand {
height: 2px;
background: red;
}

.number {
position: absolute;
font-size: 24px;
transform: translate(-50%, -50%);
}

.number1 { top: 20%; left: 85%; }

.number2 { top: 35%; left: 92%; }
.number3 { top: 50%; left: 97%; }
.number4 { top: 65%; left: 92%; }
.number5 { top: 80%; left: 85%; }
.number6 { top: 85%; left: 50%; }
.number7 { top: 80%; left: 15%; }
.number8 { top: 65%; left: 8%; }
.number9 { top: 50%; left: 3%; }
.number10 { top: 35%; left: 8%; }
.number11 { top: 20%; left: 15%; }
.number12 { top: 15%; left: 50%; }
Css:

const hourHand = document.querySelector('.hour-hand');

const minuteHand = document.querySelector('.minute-hand');
const secondHand = document.querySelector('.second-hand');

function setDate() {
const now = new Date();

const seconds = now.getSeconds();

const secondsDegrees = ((seconds / 60) * 360) + 90;
secondHand.style.transform = rotate(${secondsDegrees}deg);

const minutes = now.getMinutes();

const minutesDegrees = ((minutes / 60) * 360) + ((seconds / 60) * 6) + 90;
minuteHand.style.transform = rotate(${minutesDegrees}deg);

const hours = now.getHours();

const hoursDegrees = ((hours / 12) * 360) + ((minutes / 60) * 30) + 90;
hourHand.style.transform = rotate(${hoursDegrees}deg);
}

setInterval(setDate, 1000);

setDate();
7.0.1 Output:
8.0 Skill Developed/Learning outcome of this micro project

✓ Understanding of Front-End Development: Gained hands-on experience in designing and

developing a user interface (UI) for a Analog Clock application using HTML and CSS. This includes
learning how to structure content using HTML elements and apply styling techniques with CSS for
a visually appealing layout.
✓ JavaScript Programming Proficiency: Developed a stronger grasp of JavaScript for adding
dynamic functionality to web pages. Key skills include:
o Manipulating the DOM (Document Object Model) to add, edit, and delete tasks.
o Writing efficient functions to handle events such as task submission, completion, and
deletion.
o Implementing real-time interaction features like task status updates.
✓ Problem-Solving and Debugging Skills: Enhanced problem-solving abilities by identifying and
addressing bugs or issues in the Analog Clock application. Debugging involved analysing code
errors, refining logic, and improving functionality to ensure seamless task management.
✓ Logical Thinking and Workflow Management: Developed a systematic approach to planning,
designing, and executing the project. This involved breaking down the project into manageable steps,
organizing tasks logically, and following a structured workflow from start to completion.

9.0 Applications of this micro project : -

➢ Personal Task Management System

• The Analog Clock application developed in this project can be used as a personal task
manager to organize daily tasks, set priorities, and track progress. Users can add, edit, delete,
and mark tasks as completed, making it a practical tool for enhancing productivity.

➢ Educational and Learning Platform

• The Analog Clock application can be implemented as part of an educational platform for
students to manage their assignments, homework, or study plans. Teachers could use it to
assign tasks to students, while students can track their learning progress.

➢ Time Management Tool for Professionals

• Professionals in various fields can use this Analog Clock application to manage their work
schedules, deadlines, and daily to-dos. With some customization, it can be integrated with
calendar tools, providing a comprehensive time and task management solution.