INDEX

SR_NO. CONTENT PAGE NO.

Part A

1.0 Title of Project 2

2.0 Aim of Micro Project 2

3.0 Course outcome Addressed 2

4.0 Action Plan 2

5.0 Resources Required 2

Part B

1.0 Title of project 3

2.0 Aim of Micro Project 3

3.0 Course Outcome 3

4.0 Actual Procedure Followed 3

5.0 Actual Resource Used 9

6.0 Ouput 10

7.0 Skill Developed 10

8.0 Applications of this Microproject

1
 PART A-Plan

1.0 Title of micro-project: Digital Clock

2.0 Aim/Benefits of the Micro-Project : Digital clocks provide precise timekeeping, making them
easy to read with clear numerals. They often feature alarms, timers, and adjustable formats (12-hour
or 24-hour) for convenience. Many use energy-efficient LED technology and are more durable than
analog clocks. Their straightforward setup process adds to their appeal, making them a popular choice
for both home and office use.

3.0 Cource Outcome Addressed

CO-a. create interactive web page using program flow control structure

CO-b. implement arrays and functions in java script

CO-c. create event based web page forms using java script.

CO-d use javascript for handling cookies

CO-e. create interactive webpage using regular expression for validation

CO-f. create menus and nevigations in web pages.

3.0 Proposed Methodology:- The proposed methodology for designing a digital clock involves
several key steps. First, gather user requirements to identify necessary features and select appropriate hardware
components. Next, create a circuit design and, if needed, a PCB layout. Program the microcontroller to handle
timekeeping, display updates, and user interactions. Develop a prototype to conduct functional testing and
debugging. Design an intuitive user interface for easy operation and ensure the display is clear. After making
final adjustments and optimizing performance, prepare for production, including creating user documentation.
Finally, collect user feedback for future improvements and provide software updates as necessary. This
structured approach ensures a reliable, user-friendly digital clock.

Action Plan-
Planned Start Planned Finish
Sr no. Details of activity
Date Date

1. Finalization of topic
2. Preparation of Abstract
3. Collection of data
4. Preparation of concept
5. Seminar / Presentation
6. Submission of Micro Project

4.0 Resources Required:

. Name of Resource/Material Specification Quantity Remarks

1 Computer (Desktop/Laptop) I5,RAM 8GB 1

.
2 Microsoft office word 2010 1
.
3 Books javascript 1
.
4 Websites 1
.
5 Softwares Notpad++, 1
. micosoft edge

2
 Part-B plan
1.0 Title of micro-project: Digital Clock

2.0Aim/Benefits of the Micro-Project- Digital clocks provide precise timekeeping, making them
easy to read with clear numerals. They often feature alarms, timers, and adjustable formats (12-hour
or 24-hour) for convenience. Many use energy-efficient LED technology and are more durable than
analog clocks. Their straightforward setup process adds to their appeal, making them a popular choice
for both home and office use.

3.0Course Outcomes Achieved-

CO-a. create interactive web page using program flow control structure

CO-b. implement arrays and functions in java script

CO-c. create event based web page forms using java script.

CO-e create interactive webpage using regular expression for validation

4.0Proposed Methodology— The proposed methodology for designing a digital clock involves several key
steps. First, gather user requirements to identify necessary features and select appropriate hardware
components. Next, create a circuit design and, if needed, a PCB layout. Program the microcontroller to handle
timekeeping, display updates, and user interactions. Develop a prototype to conduct functional testing and
debugging. Design an intuitive user interface for easy operation and ensure the display is clear. After making
final adjustments and optimizing performance, prepare for production, including creating user documentation.
Finally, collect user feedback for future improvements and provide software updates as necessary. This
structured approach ensures a reliable, user-friendly digital clock .

5.0 Program code:

<! DOCTYPE html>

<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<meta http-equiv = "X-UA-Compatible" content = "ie=edge">
<title> How to display a digital clock using HTML, CSS and JavaScript?
</title>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script src =
"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"> </script>
<style>
body {
text-align: center;
}
a{
outline: none;
color: #389dc1;
}
a:visited {
outline: none;
color: #389dc1;
}
a:hover {
text-decoration: none;
3
}
section, footer, header, aside {
display: block;
}
#clock {
width: 370px;
padding: 40px;
margin: 100px auto 60px;
position: relative;
}
#clock:after {
content: ' ';
position: absolute;
width: 400px;
height: 20px;
border-radius: 100%;
left: 50%;
margin-left: -200px;
bottom: 2px;
z-index: -1;
}
#clock .display {
text-align: center;
padding: 40px 20px 20px;
border-radius: 6px;
position: relative;
height: 54px;
}
#clock.light {
background-color: #f3f3f3;
color: #272e38;
}
#clock.light:after {
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
#clock.light .digits div span {
background-color: #272e38;
border-color: #272e38;
}
#clock.light .digits div.dots:before {
background-color: #272e38;
}
#clock.light .digits div.dots:after {
background-color: #272e38;
}
#clock.light .alarm {
background:url('../img/alarm_light.jpg');
}
#clock.light .display {
background-color: #dddddd;
box-shadow: 0 1px 1px rgba(0,0,0,0.08) inset, 0 1px 1px #fafafa;
}
#clock.dark {
background-color: #272e38;
4
 color: #cacaca;
}
#clock.dark:after {
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
#clock.dark .digits div span {
background-color: #cacaca;
border-color: #cacaca;
}
#clock.dark .alarm {
background:url('../img/alarm_dark.jpg');
}
#clock.dark .display {
background-color: #0f1620;
box-shadow: 0 1px 1px rgba(0,0,0,0.08) inset, 0 1px 1px #2d3642;
}
#clock.dark .digits div.dots:before {
background-color: #cacaca;
}
#clock.dark .digits div.dots:after {
background-color: #cacaca;
}
#clock .digits div {
text-align: left;
position: relative;
width: 28px;
height: 50px;
display: inline-block;
margin: 0 4px;
}
#clock .digits div span {
opacity: 0;
position: absolute;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
transition: 0.25s;
}
#clock .digits div span:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
border: 5px solid transparent;
}
#clock .digits div span:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
border: 5px solid transparent;
}

#clock .digits .d1 {

height: 5px;
5
width: 16px;
top: 0;
left: 6px; }
#clock .digits .d1:before {
border-width: 0 5px 5px 0;
border-right-color: inherit;
left: -5px; }
#clock .digits .d1:after {
border-width: 0 0 5px 5px;
border-left-color: inherit; right: -5px;
}
#clock .digits .d2 {
height: 5px;
width: 16px;
top: 24px;
left: 6px; }
#clock .digits .d2:before {
border-width: 3px 4px 2px;
border-right-color: inherit;
left: -8px; }
#clock .digits .d2:after {
border-width: 3px 4px 2px;
border-left-color: inherit;
right: -8px; }
#clock .digits .d3 {
height: 5px;
width: 16px;
top: 48px;
left: 6px; }
#clock .digits .d3:before {
border-width: 5px 5px 0 0;
border-right-color: inherit;
left: -5px; }
#clock .digits .d3:after {
border-width: 5px 0 0 5px;
border-left-color: inherit; right: -5px; }

#clock .digits .d4 {

width: 5px;
height: 14px;
top: 7px; left: 0;
}
#clock .digits .d4:before {
border-width: 0 5px 5px 0;
border-bottom-color: inherit;
top: -5px; }
#clock .digits .d4:after {
border-width: 0 0 5px 5px;
border-left-color: inherit;
bottom: -5px; }
#clock .digits .d5 {
width: 5px;
height: 14px;
top: 7px;
6
right: 0; }
#clock .digits .d5:before {
border-width: 0 0 5px 5px;
border-bottom-color: inherit;
top: -5px; }
#clock .digits .d5:after {
border-width: 5px 0 0 5px;
border-top-color: inherit;
bottom: -5px; }
#clock .digits .d6 {
width: 5px;
height: 14px;
top: 32px;
left: 0; }
#clock .digits .d6:before {
border-width: 0 5px 5px 0;
border-bottom-color: inherit;
top: -5px; }
#clock .digits .d6:after {
border-width: 0 0 5px 5px;
border-left-color: inherit;
bottom: -5px; }
#clock .digits .d7 {
width: 5px;
height: 14px;
top: 32px;
right: 0; }
#clock .digits .d7:before {
border-width: 0 0 5px 5px;
border-bottom-color: inherit;
top: -5px; }
#clock .digits .d7:after {
border-width: 5px 0 0 5px;
border-top-color: inherit;
bottom: -5px; }
#clock .digits div.one .d5 {
opacity: 1;
}
#clock .digits div.one .d7 {
opacity: 1;
}
#clock .digits div.two .d1 {
opacity: 1;
}
#clock .digits div.two .d5 {
opacity: 1;
}
#clock .digits div.two .d2 {
opacity: 1;
}
#clock .digits div.two .d6 {
opacity: 1;
}
#clock .digits div.two .d3 {
7
 opacity: 1;
}
#clock .digits div.three .d1,
#clock .digits div.three .d5,
#clock .digits div.three .d2,
#clock .digits div.three .d7,
#clock .digits div.three .d3 {
opacity: 1;
}
#clock .digits div.four .d5,
#clock .digits div.four .d2,
#clock .digits div.four .d4,
#clock .digits div.four .d7 {
opacity: 1;
}
#clock .digits div.five .d1,
#clock .digits div.five .d2,
#clock .digits div.five .d4,
#clock .digits div.five .d3,
#clock .digits div.five .d7 {
opacity: 1;
}
#clock .digits div.six .d1,
#clock .digits div.six .d2,
#clock .digits div.six .d4,
#clock .digits div.six .d3,
#clock .digits div.six .d6,
#clock .digits div.six .d7 {
opacity: 1;
}

#clock .digits div.seven .d1,

#clock .digits div.seven .d5,
#clock .digits div.seven .d7 {
opacity: 1;
}
#clock .digits div.eight .d1,
#clock .digits div.eight .d2,
#clock .digits div.eight .d3,
#clock .digits div.eight .d4,
#clock .digits div.eight .d5,
#clock .digits div.eight .d6,
#clock .digits div.eight .d7 {
opacity: 1;
}
#clock .digits div.nine .d1,
#clock .digits div.nine .d2,
#clock .digits div.nine .d3,
#clock .digits div.nine .d4,
#clock .digits div.nine .d5,
#clock .digits div.nine .d7 {
opacity: 1;
8
}
#clock .digits div.zero .d1,
#clock .digits div.zero .d3 {
opacity: 1;
}
#clock .digits div.zero .d4 {
opacity: 1;
}
#clock .digits div.zero .d5 {
opacity: 1;
}
#clock .digits div.zero .d6 {
opacity: 1;
}
#clock .digits div.zero .d7 {
opacity: 1;
}
#clock .digits div.dots {
width: 5px;
}
#clock .digits div.dots:before {
width: 5px;
height: 5px;
content: ' ';
position: absolute;
left: 0;
top: 14px;
}
#clock .digits div.dots:after {
width: 5px;
height: 5px;
content: ' ';
position: absolute;
left: 0;
top: 14px;
}
#clock .digits div.dots:after {
top: 34px;
}
#clock .alarm {
width: 16px;
height: 16px;
bottom: 20px;
background: url('../img/alarm_light.jpg');
position: absolute;
opacity: 0.2;
}
#clock .alarm.active {
opacity: 1;
}
#clock .weekdays {
font-size: 12px;
position: absolute;
width: 100%;
9
 top: 10px;
left: 0;
text-align: center;
}
#clock .weekdays span {
opacity: 0.2;
padding: 0 10px;
}
#clock .weekdays span.active {
opacity: 1;
}
#clock .ampm {
position: absolute;
bottom: 20px;
right: 20px;
font-size: 12px;
}
.button-holder {
text-align: center;
padding-bottom: 100px;
}
a.button {
background-color: #f6a7b3;
background-image: -webkit-linear-gradient(top, #f6a7b3, #f0a3af);
background-image: -moz-linear-gradient(top, #f6a7b3, #f0a3af);
background-image: linear-gradient(top, #f6a7b3, #f0a3af);
border: 1px solid #eb9ba7;
border-radius: 2px;
box-shadow: 0 2px 2px #ccc;
color: #fff;
text-decoration: none !important;
padding: 15px 20px;
display: inline-block;
cursor: pointer;
}
a.button:hover {
opacity: 0.9;
}
footer {
width: 770px;
font: normal 16px Arial, Helvetica, sans-serif;
padding: 15px 35px;
position: fixed;
bottom: 0;
left: 50%;
margin-left: -420px;
background-color:#1f1f1f;
background-image: -webkit-linear-gradient(top, #1f1f1f, #101010);
background-image: -moz-linear-gradient(top, #1f1f1f, #101010);
background-image: linear-gradient(top, #1f1f1f, #101010);
border-radius: 2px 2px 0 0;
box-shadow: 0 -1px 4px rgba(0,0,0,0.4);
z-index:1;
}
10
footer a.tz {
font-weight: normal;
font-size: 16px !important;
text-decoration: none !important;
display: block;
margin-right: 300px;
text-overflow: ellipsis;
white-space: nowrap;
color: #bfbfbf !important;
z-index: 1;
}
footer a.tz:before {
content: ' ';
background: url('http://cdn.tutorialzine.com/misc/enhance/v2_footer_bg.png') no-
repeat 0 -53px;
width: 138px;
height: 20px;
display: inline-block;
position: relative;
bottom: -3px;
}
footer .close {
position: absolute;
cursor: pointer;
width: 8px;
height: 8px;
background: url('http://cdn.tutorialzine.com/misc/enhance/v2_footer_bg.png') no-
repeat 0 0px;
top: 10px;
right: 10px;
z-index: 3;
}
footer #tzine-actions {
position: absolute;
top: 8px;
width: 500px;
right: 50%;
margin-right: -650px;
text-align: right;
z-index: 2;
}
h1 {
line-height: 2em;
padding-bottom: 5px;
text-transform: none;
font-size: 1.7em;
font-weight: bold;
font-style: italic;
font-family: "Lucida Console", "Courier New", monospace;
color: #999;
letter-spacing: -0.005em;
word-spacing: 1px;
letter-spacing: none;
}
11
h2 {
margin-top: 40px;
text-transform: none;
font-size: 1.75em;
font-weight: bold;
font-family: "Lucida Console", "Courier New", monospace;
color: #999;
letter-spacing: -0.005em;
word-spacing: 1px;
letter-spacing: none;
}
footer #tzine-actions iframe {
display: inline-block;
height: 21px;
width: 95px;
position: relative;
float: left;
margin-top: 11px;
}
</style>
<body>
<h1> Example </h1>
<h2> How to display a digital clock using HTML, CSS and JavaScript? </h2>
<div id = "clock" class = "light">
<div class = "display">
<div class = "weekdays"> </div>
<div class = "ampm"> </div>
<div class = "alarm"> </div>
<div class = "digits"> </div>
</div>
</div>
<div class = "button-holder">
<a class = "button"> Switch Theme </a>
</div>
<script>
$(function() {
var clock = $('#clock'),
alarm = clock.find('.alarm'),
ampm = clock.find('.ampm');
var digit_to_name = 'zero one two three four five six seven eight nine'.split(' ');
var digits = {};
var positions = [
'h1', 'h2', ':', 'm1', 'm2', ':', 's1', 's2'
];
var digit_holder = clock.find('.digits');
$.each(positions, function(){
if(this == ':') {
digit_holder.append('<div class="dots">');
}
else {
var pos = $('<div>');
for(var i=1; i<8; i++) {
pos.append('<span class="d' + i + '">');
}
12
 digits[this] = pos;
digit_holder.append(pos);
}
});
var weekday_names = 'MON TUE WED THU FRI SAT SUN'.split(' '),
weekday_holder = clock.find('.weekdays');
$.each(weekday_names, function() {
weekday_holder.append('<span>' + this + '</span>');
});
var weekdays = clock.find('.weekdays span');.-Compatible" content = "ie=edge">
<title> How to display a digital clock using HTML, CSS and JavaScript?
</title>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script src =
"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"> </script>
<style>
body {
text-align: center;
padding: 20px;
background-color: #F8F9FA;
background-size: 1800% 1800%;
font-family: "Lucida Console", "Courier New", monospace;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
animation: rainbow 18s ease infinite; }
h1 {
line-height: 2em;
padding-bottom: 5px;
text-transform: none;
font-size: 1.7em;
font-weight: bold;
font-style: italic;
font-family: "Lucida Console", "Courier New", monospace;
color: #999;
letter-spacing: -0.005em;
word-spacing: 1px;
letter-spacing: none;
}
h2 {
margin-top: 40px;
text-transform: none;
font-size: 1.75em;
font-weight: bold;
font-family: "Lucida Console", "Courier New", monospace;
color: #999;
letter-spacing: -0.005em;
word-spacing: 1px;
letter-spacing: none;
}
.clock {
position: absolute;
top: 50%;
13
 left: 50%;
padding-top: 15px;
transform: translateX(-50%) translateY(-50%);
color: #17D4FE;
font-size: 60px;
font-family: Orbitron;
letter-spacing: 7px;
}
</style>
<body>
<h1> Example </h1>
<h2> How to display a digital clock using HTML, CSS and JavaScript? </h2>
<div id = "MyClockDisplay" class = "clock" onload = "showTime()"> </div>
<script>
function showTime(){
var date = new Date();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
var session = "AM";
if(h == 0) {
h = 12;
}
if(h > 12) {
hh = h - 12;
session = "PM";
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
var time = h + ":" + m + ":" + s + " " + session;
document.getElementById("MyClockDisplay").innerText = time;
document.getElementById("MyClockDisplay").textContent = time;
setTimeout(showTime, 1000);
}
showTime();
</script>
</body>
</html>

14
7.0 output

8.0 skill developed:-

A digital clock helps you learn to manage your time better. It shows time clearly, making it easier to be on time
and plan your day. It also helps kids learn how to tell time.

9.0 Application:-

1. Time Management:** Track tasks and appointments.

2. Alarms:** Set wake-up and reminder alerts.

3. Timers:** Use for cooking or workouts.

4. World Clocks:** Show time in different time zones.

15
10