Client Side Scripting (CSS) - 22519
Topic: Digital Clock Website
Introduction
I n today's globalized world, staying connected across different time zones has become
essential. Whether it's for personal, professional, or educational purposes, people
frequently need to know the current time in various locations around the world. The Digital
Clock Website project aims to address this need by providing a straightforward and
efficient way for users to check the current time in multiple cities across the globe. Built
using HTML, CSS, and JavaScript, this project offers a real-time display of time for several
key locations, enhancing users’ ability to coordinate across time zones.
his report provides a comprehensive overview of the Digital Clock Website, outlining its
T
features, technology stack, and user interface design. The project also highlights the
teamwork involved, listing each contributor and their role. Additionally, we explore
potential improvements that could enhance the application’s functionality and user
experience. The Digital Clock Website is both a practical tool and a learning project,
showcasing the use of web technologies to create an interactive and accessible digital clock
application.
Projects Overview
he Digital Clock Website project is a simple yet informative web application built using
T
HTML, CSS, and JavaScript. This project aims to display the current time for various global
locations, allowing users to see the time across different time zones. The application also
provides an interface for users to learn about the development team and basic information
about the project.
Project Features
1) Home Page Section:
eal-time Time and Date Display:
R
● The website will constantly display the current time and date in a clear and readable
format.
updateClock()
● The time will be updated in real-time using JavaScript's function.
ull-Screen Mode:
F
● Users can toggle the website to full-screen mode by clicking a dedicated button.
● This feature will provide a larger and more immersive viewing experience.
Client Side Scripting (CSS) - 22519
esponsive Design:
R
● The website will adapt to different screen sizes and devices, ensuring optimal
viewing on desktops, tablets, and smartphones.
2) World Clocks Section:
ocal Time Display:
L
● The website displays the current local time for the user. This is typically shown
prominently at the top of the page, ensuring that users can easily keep track of their
own time.
orld Clocks for Multiple Cities:
W
● The project includes a world clock feature that displays the current time in various
major cities across different time zones. Cities included are Los Angeles, New York,
London, Paris, Beijing, and Tokyo.
● This feature allows users to see the time in these locations simultaneously, which is
useful for planning and coordination.
utomatic Time Update:
A
● The digital clock is dynamically updated using JavaScript, ensuring that the time
displayed is accurate and in sync without requiring the user to refresh the page.
This functionality is essential for a clock application, providing real-time accuracy.
Client Side Scripting (CSS) - 22519
3) Team Information Section:
ist of Team Members:
L
● The website includes a dedicated section for introducing the team members
involved in the project. Each member’s name and roll number are listed, providing
transparency about the contributors.
ormatted and Structured Layout:
F
● The team members are displayed in a structured list format, making it easy for
viewers to read each name and roll number. This section adds a personal touch to
the project, showcasing the collaborative effort behind the website.
Client Side Scripting (CSS) - 22519
4) About Project Section:
roject Description:
P
● This section provides an overview of the project, including its purpose and
technologies used. It specifies that the project was created using HTML, CSS, and
JavaScript, and identifies the topic as a Digital Clock.
ducational Value:
E
● The "About Project" section emphasizes the educational purpose of the project,
indicating that it is designed to showcase the team's web development skills and
knowledge of fundamental web technologies. This helps users understand the
project’s background.
Technologies Used
1) HTML (HyperText Markup Language)
● H TML is used to structure the content of the website, organizing sections like the
world clock, team members, and project information.
● The HTML markup provides the semantic foundation of the webpage, making it easy
to understand and navigate.
Client Side Scripting (CSS) - 22519
2) CSS (Cascading Style Sheets)
C
● SS is used to style the website, providing an aesthetically pleasing user interface.
● The color scheme includes a dark background with bright green and white text,
enhancing readability and giving the website a modern look.
● The top navigation bar, with icons for home, clock, and team sections, is styled to be
visually consistent and easy to navigate.
3) JavaScript
● J avaScript is the backbone of the clock functionality, enabling real-time updates of
the displayed time.
● JavaScript fetches the current time for different cities based on time zones and
refreshes the display every second.
● This interactive feature enhances the user experience, allowing users to see live
time updates without needing to refresh the page.
User Interface
T
● he user interface is designed to be minimalistic and user-friendly.
● A dark background with high-contrast green text makes the content easy to read
and visually appealing.
● The navigation bar at the top allows easy switching between sections, with icons
indicating the type of content available in each tab (e.g., home, clock, team, and
about).
● Each section is clearly labeled, ensuring that users can intuitively navigate through
the website.
Code
1) Home page file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
Client Side Scripting (CSS) - 22519
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<button class="button">
<a href="index.html">
<span class="popup">Home</span>
<svg
class="icon"
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 1024 1024"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
="M946.5 505L560.1 118.8l-25.9-25.9a31.5 31.5 0 0 0-44.4 0L77.5 505a63.9 63.9
d
0 0 0-18.8 46c.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7
45.3-18.8a63.6 63.6 0 0 0 18.7-45.3c0-17-6.7-33.1-18.8-45.2zM568
868H456V664h112v204zm217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1
0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z"
></path>
</svg></a>
Client Side Scripting (CSS) - 22519
</button>
<button class="button">
<a href="clocks.html">
<span class="popup">Clocks</span>
<svg
class="icon"
stroke="currentColor"
fill="none"
stroke-width="2"
viewBox="0 0 24 24"
aria-hidden="true"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
stroke-linecap="round"
stroke-linejoin="round">
<circle
cx="12"
cy="12"
r="10">
</circle>
<polyline
points="12 6 12 12 16 14">
Client Side Scripting (CSS) - 22519
</polyline>
</svg></a>
</button>
<button class="button">
<a href="team.html">
<span class="popup">Team</span>
<svg
class="icon"
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg">
<path
="M12 2.5a5.5 5.5 0 0 1 3.096 10.047 9.005 9.005 0 0 1 5.9 8.181.75.75 0 1
d
1-1.499.044 7.5 7.5 0 0 0-14.993 0 .75.75 0 0 1-1.5-.045 9.005 9.005 0 0 1 5.9-8.18A5.5 5.5 0 0
1 12 2.5ZM8 8a4 4 0 1 0 8 0 4 4 0 0 0-8 0Z"
></path>
</svg></a>
</button>
<button class="button">
<a href="about.html">
Client Side Scripting (CSS) - 22519
<span class="popup">About</span>
<svg
class="icon"
stroke="currentColor"
fill="none"
stroke-width="2"
viewBox="0 0 24 24"
aria-hidden="true"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
stroke-linecap="round"
stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="16" x2="12" y2="12"></line>
<line x1="12" y1="8" x2="12.01" y2="8"></line>
</svg></a>
</nav>
<div class="header">
<h1>Welcome to the Home Page</h1>
</div>
<div class="clock">
<div id="time"></div>
Client Side Scripting (CSS) - 22519
<div id="date"></div>
</div>
<div class="fullscreen">
<button id="fullscreen-btn">Full Screen</button>
</div>
<script src="script.js"></script>
</body>
</html>
Client Side Scripting (CSS) - 22519
2) Clocks page file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>World Clocks</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<button class="button">
<a href="index.html">
<span class="popup">Home</span>
<svg
class="icon"
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 1024 1024"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg">
Client Side Scripting (CSS) - 22519
<path
="M946.5 505L560.1 118.8l-25.9-25.9a31.5 31.5 0 0 0-44.4 0L77.5 505a63.9 63.9
d
0 0 0-18.8 46c.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7
45.3-18.8a63.6 63.6 0 0 0 18.7-45.3c0-17-6.7-33.1-18.8-45.2zM568
868H456V664h112v204zm217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1
0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z"
></path>
</svg></a>
</button>
<button class="button">
<a href="clocks.html">
<span class="popup">Clocks</span>
<svg
class="icon"
stroke="currentColor"
fill="none"
stroke-width="2"
viewBox="0 0 24 24"
aria-hidden="true"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
stroke-linecap="round"
stroke-linejoin="round">
<circle
Client Side Scripting (CSS) - 22519
cx="12"
cy="12"
r="10">
</circle>
<polyline
points="12 6 12 12 16 14">
</polyline>
</svg></a>
</button>
<button class="button">
<a href="team.html">
<span class="popup">Team</span>
<svg
class="icon"
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg">
<path
Client Side Scripting (CSS) - 22519
="M12 2.5a5.5 5.5 0 0 1 3.096 10.047 9.005 9.005 0 0 1 5.9 8.181.75.75 0 1
d
1-1.499.044 7.5 7.5 0 0 0-14.993 0 .75.75 0 0 1-1.5-.045 9.005 9.005 0 0 1 5.9-8.18A5.5 5.5 0 0
1 12 2.5ZM8 8a4 4 0 1 0 8 0 4 4 0 0 0-8 0Z"
></path>
</svg></a>
</button>
<button class="button">
<a href="about.html">
<span class="popup">About</span>
<svg
class="icon"
stroke="currentColor"
fill="none"
stroke-width="2"
viewBox="0 0 24 24"
aria-hidden="true"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
stroke-linecap="round"
stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="16" x2="12" y2="12"></line>
<line x1="12" y1="8" x2="12.01" y2="8"></line>
Client Side Scripting (CSS) - 22519
</svg></a>
</nav>
<div class="header">
<h1>World Clocks</h1>
</div>
<h1> <div id="main-time"></div> </h1>
<div id="date-info"></div><br/>
<div id="other-times">
<div class="time-box">
<strong>Los Angeles:</strong> <span id="los-angeles-time"></span>
</div>
<div class="time-box">
<strong>New York:</strong> <span id="new-york-time"></span>
</div>
<div class="time-box">
<strong>London:</strong> <span id="london-time"></span>
</div>
<div class="time-box">
<strong>Paris:</strong> <span id="paris-time"></span>
</div>
<div class="time-box">
<strong>Beijing:</strong> <span id="beijing-time"></span>
</div>
Client Side Scripting (CSS) - 22519
<div class="time-box">
<strong>Tokyo:</strong> <span id="tokyo-time"></span>
</div>
</div>
<script language="javascript">
function updateTime() {
const now = new Date();
const options = {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
timeZone: 'Asia/Kolkata'
};
ocument.getElementById('main-time').textContent = now.toLocaleTimeString('en-IN', {
d
timeZone: 'Asia/Kolkata' });
ocument.getElementById('date-info').textContent = now.toLocaleDateString('en-IN',
d
ptions);
o
const cities = [
{ name: 'Los Angeles', timeZone: 'America/Los_Angeles' },
{ name: 'New York', timeZone: 'America/New_York' },
{ name: 'London', timeZone: 'Europe/London' },
{ name: 'Paris', timeZone: 'Europe/Paris' },
{ name: 'Beijing', timeZone: 'Asia/Shanghai' },
Client Side Scripting (CSS) - 22519
{ name: 'Tokyo', timeZone: 'Asia/Tokyo' } ];
const otherTimes = document.getElementById('other-times');
otherTimes.innerHTML = '';
cities.forEach(city => {
onst cityTime = now.toLocaleTimeString('en-US', { timeZone: city.timeZone,
c
timeStyle: 'short' });
const cityElement = document.createElement('div');
cityElement.className = 'time-box';
cityElement.innerHTML = `<strong>${city.name}</strong><br>${cityTime}`;
otherTimes.appendChild(cityElement);
});
}
updateTime();
setInterval(updateTime, 1000);
</script>
</body>
</html>
Client Side Scripting (CSS) - 22519
3) Team page file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Team Members</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<button class="button">
<a href="index.html">
<span class="popup">Home</span>
<svg
class="icon"
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 1024 1024"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
Client Side Scripting (CSS) - 22519
>
<path
="M946.5 505L560.1 118.8l-25.9-25.9a31.5 31.5 0 0 0-44.4 0L77.5 505a63.9 63.9
d
0 0 0-18.8 46c.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7
45.3-18.8a63.6 63.6 0 0 0 18.7-45.3c0-17-6.7-33.1-18.8-45.2zM568
868H456V664h112v204zm217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1
0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z"
></path>
</svg></a>
</button>
<button class="button">
<a href="clocks.html">
<span class="popup">Clocks</span>
<svg
class="icon"
stroke="currentColor"
fill="none"
stroke-width="2"
viewBox="0 0 24 24"
aria-hidden="true"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
stroke-linecap="round"
stroke-linejoin="round">
Client Side Scripting (CSS) - 22519
<circle
cx="12"
cy="12"
r="10">
</circle>
<polyline
points="12 6 12 12 16 14">
</polyline>
</svg></a>
</button>
<button class="button">
<a href="team.html">
<span class="popup">Team</span>
<svg
class="icon"
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg">
<path
Client Side Scripting (CSS) - 22519
="M12 2.5a5.5 5.5 0 0 1 3.096 10.047 9.005 9.005 0 0 1 5.9 8.181.75.75 0 1
d
1-1.499.044 7.5 7.5 0 0 0-14.993 0 .75.75 0 0 1-1.5-.045 9.005 9.005 0 0 1 5.9-8.18A5.5 5.5 0 0
1 12 2.5ZM8 8a4 4 0 1 0 8 0 4 4 0 0 0-8 0Z"
></path>
</svg></a>
</button>
<button class="button">
<a href="about.html">
<span class="popup">About</span>
<svg
class="icon"
stroke="currentColor"
fill="none"
stroke-width="2"
viewBox="0 0 24 24"
aria-hidden="true"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
stroke-linecap="round"
stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="16" x2="12" y2="12"></line>
<line x1="12" y1="8" x2="12.01" y2="8"></line>
Client Side Scripting (CSS) - 22519
</svg></a>
</nav>
<div class="header">
<h1>Meet Our Team</h1>
</div>
<div class="content">
<h1>Team Members:<br></h1>
<h2> 1. Dharmin Vadher, Rollno: 03. <br> </h2>
<h2> 2. Ayush Mule, Rollno: 11. <br> </h2>
<h2> 3. Mukund Nair, Rollno: 13. <br> </h2>
<h2>4. Tejas Nikam, Rollno: 14. <br> </h2>
</p>
</div>
<script src="script.js"></script>
</body>
</html>
Client Side Scripting (CSS) - 22519
4) About page file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<button class="button">
<a href="index.html">
<span class="popup">Home</span>
<svg
class="icon"
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 1024 1024"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg" >
Client Side Scripting (CSS) - 22519
<path
="M946.5 505L560.1 118.8l-25.9-25.9a31.5 31.5 0 0 0-44.4 0L77.5 505a63.9 63.9
d
0 0 0-18.8 46c.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7
45.3-18.8a63.6 63.6 0 0 0 18.7-45.3c0-17-6.7-33.1-18.8-45.2zM568
868H456V664h112v204zm217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1
0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z"
></path>
</svg></a>
<button class="button">
<a href="clocks.html">
<span class="popup">Clocks</span>
<svg
class="icon"
stroke="currentColor"
fill="none"
stroke-width="2"
viewBox="0 0 24 24"
aria-hidden="true"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
stroke-linecap="round"
stroke-linejoin="round">
<circle
cx="12"
Client Side Scripting (CSS) - 22519
cy="12"
r="10">
</circle>
<polyline
points="12 6 12 12 16 14">
</polyline>
</svg></a>
</button>
</button>
</button>
<button class="button">
<a href="team.html">
<span class="popup">Team</span>
<svg
class="icon"
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg">
<path
Client Side Scripting (CSS) - 22519
="M12 2.5a5.5 5.5 0 0 1 3.096 10.047 9.005 9.005 0 0 1 5.9 8.181.75.75 0 1
d
1-1.499.044 7.5 7.5 0 0 0-14.993 0 .75.75 0 0 1-1.5-.045 9.005 9.005 0 0 1 5.9-8.18A5.5 5.5 0 0
1 12 2.5ZM8 8a4 4 0 1 0 8 0 4 4 0 0 0-8 0Z"
></path>
</svg></a>
</button>
<button class="button">
<a href="about.html">
<span class="popup">About</span>
<svg
class="icon"
stroke="currentColor"
fill="none"
stroke-width="2"
viewBox="0 0 24 24"
aria-hidden="true"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
stroke-linecap="round"
stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="16" x2="12" y2="12"></line>
<line x1="12" y1="8" x2="12.01" y2="8"></line>
Client Side Scripting (CSS) - 22519
</svg></a>
</nav>
<div class="header">
<h1>About Project</h1>
</div>
<div class="content">
<p>- This project is made using HTML, CSS, JAVASCRIPT languages.</p>
<p>- Topic: Digital Clock.</p>
</div>
<script src="script.js"></script>
</body>
</html>
Client Side Scripting (CSS) - 22519
5) JavaScript file:
function updateClock() {
let now = new Date();
let hours = now.getHours();
let minutes = now.getMinutes();
let seconds = now.getSeconds();
let day = now.getDate();
let month = now.getMonth() + 1; // January is 0!
let year = now.getFullYear();
hours = hours < 10 ? '0' + hours : hours;
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
day = day < 10 ? '0' + day : day;
month = month < 10 ? '0' + month : month;
let timeString = `${hours}:${minutes}:${seconds}`;
let dateString = `${day} ${now.toLocaleString('default', { month: 'long' })} ${year}`;
document.getElementById('time').textContent = timeString;
document.getElementById('date').textContent = dateString;
}
Client Side Scripting (CSS) - 22519
function toggleFullScreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
}
document.getElementById('fullscreen-btn').addEventListener('click', toggleFullScreen);
setInterval(updateClock, 1000);
updateClock();
Client Side Scripting (CSS) - 22519
6) JavaScript file:
import
@
url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;8
00;900&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
margin: 0px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 90vh;
background-color: #000;
color: #3cff00;
font-family: 'Courier New', Courier, monospace;
}
h2 {
font-size: 2em;
Client Side Scripting (CSS) - 22519
font-weight: 500;
color: #252424;
letter-spacing: 5px;
cursor: pointer;
}
h2:hover{
color:#fff;
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 40px #fff,
0 0 80px #fff,
0 0 120px #fff,
0 0 160px #fff,
}
/* Navigation Bar Styling */
.navbar{
display: flex;
background-color: rgb(8, 42, 156);
padding: 10px 0;
text-align: center;
margin-top: 0px;
top: 0;
position: fixed;
Client Side Scripting (CSS) - 22519
z-index: 0px; /* Ensures the navbar stays on top */
/* border-radius: 10px; */
width: 100%;
height: 45px;
align-items: center;
justify-content: space-around;
transition: all 1s;
}
.navbar:hover{
width: 100%;
transition: none;
}
.button {
background-color: transparent;
outline: 0;
border: 0;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
Client Side Scripting (CSS) - 22519
transition: none;
cursor: pointer;
list-style: none;
margin: 8px;
padding: 0;
display: flex;
justify-content: center;
}
.button:hover {
transform: none;
}
/* Page Header Styling */
.header {
text-align: center;
margin-top: 1px; /* Adjusted to avoid overlap with navbar */
color: #fff;
font-size: 24px;
}
/* Clock Styling */
.clock {
text-align: center;
margin-top: 40px;
}
Client Side Scripting (CSS) - 22519
#time {
font-size: 80px;
margin-bottom: 10px;
}
#date {
font-size: 30px;
}
/* World clocks */
.indian_clock {
text-align: center;
margin-top: 20px;
}
#time_india {
font-size: 220px;
margin-bottom: 10px;
}
#date_india {
font-size: 30px;
}
/* Fullscreen Button Styling */
.fullscreen {
margin-top: 20px;
Client Side Scripting (CSS) - 22519
}
#fullscreen-btn {
position: relative;
display: inline-block;
margin: 15px;
padding: 10px 20px;
text-align: center;
font-size: 18px;
letter-spacing: 1px;
text-decoration: none;
color: #00ff00;
background: transparent;
cursor: pointer;
transition: ease-out 0.5s;
border: 2px solid #00ff00;
border-radius: 10px;
box-shadow: inset 0 0 0 0 #00ff00;
}
#fullscreen-btn:hover {
color: black;
box-shadow: inset 0 -100px 0 0 #00ff00;
}
#fullscreen-btn:active {
Client Side Scripting (CSS) - 22519
transform: scale(0.9);
}
/* Additional Global Styling */
a {
color: white; /* Ensures links inherit the text color */
text-decoration: none;
font-size: 18px;
transition: color 0.3s ease;
} */
a:hover {
visibility: visible;
text-decoration: underline;
color: #ffcc00; /* Adds a color change on hover for better UX */
}
/* menu popup */
.navbar .popup {
margin: -25px;
position: absolute;
top: 25px;
background: #fff;
color: black;
padding: 5px 8px;
border-radius: 5px;
Client Side Scripting (CSS) - 22519
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
opacity: 0;
font-size: 18px;
pointer-events: none;
transition: all 0.3s;
align-items: center;
}
.navbar .popup::before {
position: absolute;
content: "";
height: 10px;
width: 6px;
background: #fff;
top: -3px;
left: 14px;
transform: translate(280%) rotate(45deg);
transition: all ;
}
.navbar .button:hover .popup{
top: 70px;
opacity: 1;
visibility: visible;
pointer-events: auto;
Client Side Scripting (CSS) - 22519
}
.time-box {
display: inline-block;
margin-right: 20px;
font-family: 'Poppins', sans-serif;
font-size: 15px;
color: #00ff00;
}
Conclusion
he Digital Clock Website project successfully demonstrates the use of HTML, CSS, and
T
JavaScript to create a functional and visually appealing application. By providing real-time
updates for multiple time zones, the application meets its goal of offering users an easy way
to check global time differences. The inclusion of team information and a brief project
overview enhances the transparency and educational value of the project. With further
enhancements, this digital clock project has the potential to serve as a comprehensive
time-tracking tool for users around the world.
Reference
ww.google.com
w
www.wikipedia.com
www.youtube.com
https://github.com
https://stackoverflow.com
