‭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‬