KNOWLEDGE INSTITUTE OF TECHNOLOGY

(An Autonomous Institution)

Department of Computer Science and Engineering
Mini Project Report
CCS335 – WEB TECHNOLOGIES

Academic Year 2024-2025

Year/Sem/Section III / V / B

Project Title Upcoming Event CountDown Timer

Reg No 611222104068

Name of the Student Karthikaa K

Staff Name Mr.R.Sivaguru, AP/CSE

Signature
 TABLE OF CONTENTS

S.No Title Page No

1 Abstract 1

2 Introduction 2

System Analysis
3 3.1 Hardware Requirements 3
3.2 Software Requirements

Modules
4 4.1 Title of the modules 4
4.2 Description of modules

System Design
5 7
5.1 System Architecture

6 System Implementation 9

7 Screen Shots 21

8 Conclusion 24

9 References 25
 1. ABSTRACT

This project introduces a multi-event countdown timer application designed to

display real-time countdowns for various upcoming events. Built using HTML, CSS,
JavaScript, and Bootstrap, the application features a visually appealing interface that
enhances user engagement by showcasing events such as onam celebrations, myntra
sales, concert launches, website launches, and black friday sales.

At the core of the application lies a robust backend powered by Node.js and
Express.js, which efficiently handles HTTP requests and serves dynamic content to
users. A Mysql database is utilized to store essential event details, including names and
scheduled dates, ensuring data is organized and easily accessible. The application
retrieves this information through SQL queries, allowing JavaScript to dynamically
update the countdown displays in real-time, counting down in days, hours, minutes,
and seconds. This countdown timer is a practical tool for businesses and event
organizers, providing a visual representation of time remaining until significant events,
thus creating anticipation among users.

Future enhancements could include features such as user notifications for event
reminders, an administrative panel for streamlined event management, and
customizable themes for a personalized user experience. Overall, this project
exemplifies the effective integration of modern web technologies, offering a user-
friendly platform that contributes to a richer online experience. By facilitating the
management and presentation of multiple event countdowns, this application serves as
a valuable resource in various sectors, including e-commerce, entertainment, and
cultural celebrations.

1
 2. INTRODUCTION

In today’s fast-paced world, keeping track of upcoming events is crucial for both
individuals and businesses. Whether it’s a cultural festival, a sales promotion, or a
product launch, the ability to visually represent time remaining until these events can
enhance engagement and anticipation. This project focuses on developing a multi-event
countdown timer application that effectively addresses this need by providing real-
time countdowns for various significant occasions.

The application is built using a combination of modern web technologies,

including HTML, CSS, JavaScript, and Bootstrap. These tools are leveraged to create an
intuitive and visually appealing user interface that displays countdowns for events such
as Onam celebrations, Myntra sales, concert launches, website launches, and Black
Friday sales. The responsive design ensures that users have an optimal experience
across different devices, making it accessible and user-friendly.

On the backend, the application employs Node.js and Express.js to handle

server requests and manage data flow, while a Mysql database stores essential event
details. This integration allows for dynamic updates to the countdown timers, ensuring
that users receive accurate and timely information. By enhancing user interaction
through visual countdowns, this project not only serves as a practical tool for event
management but also contributes to the excitement surrounding various occasions,
making it a valuable resource in today’s digital landscape.

2
 3. SYSTEM ANALYSIS

3.1 Hardware Requirements

For successfully run the multi-event countdown timer application, the following
hardware requirements should be met:

 Processor: A dual-core processor (Intel i3 or equivalent) is recommended to

ensure smooth execution of server and client-side operations.

 RAM: A minimum of 4 GB of RAM is required for efficient multitasking and

handling multiple users accessing the application simultaneously.

 Storage: At least 500 MB of free disk space is necessary for installing the required
software, including the web server, database server, and application files.

 Network: A stable internet connection (minimum of 1 Mbps) is required for

hosting the application and enabling users to access it online.

3.2 Software Requirements

The following software components are essential for developing and running the
countdown timer application:

 Operating System: Windows, macOS, or Linux (Ubuntu recommended) to

support the development environment and server setup.

 Web Server: Node.js (latest stable version) to run the application server and
manage client requests.

 Database Management System: MySQL (latest stable version) for managing

event data, including names and scheduled dates.

 Development Environment: A code editor such as Visual Studio Code or

Sublime Text for writing and editing code.

 Web Browsers: Chrome, Firefox, or any modern web browser for testing the
application.

 Libraries and Frameworks:

 Express.js - for handling server-side routing and middleware.
 Bootstrap - for creating responsive and visually appealing UI
components.

3
 4. MODULES

The Upcoming Event Countdown Timer has several modules ,each of them handle
separate functionalities to deliver the application user friendly to users.

4.3 Title of the Modules

1. User Interface Module

2. Countdown Logic Module
3. Data Fetching Module
4. Backend Server Module
5. Database Management Module
6. Styling Module

4.4 Description of the Modules

1. User Interface Module

The User Interface (UI) Module is the face of the application, designed to provide
users with an intuitive and visually appealing way to interact with the countdown
timers. Utilizing HTML, CSS, and Bootstrap, this module focuses on responsive design,
ensuring compatibility across various devices. It organizes events into distinct sections,
each featuring an event image, a title, and the countdown timer.

 Event Sections: Each event has its dedicated section, making it easy for users to
differentiate between them.
 Responsive Layout: Bootstrap classes are utilized for a responsive grid system
that adapts to different screen sizes.
 Visual Elements: Attractive images and vibrant backgrounds enhance user
engagement.

2. Countdown Logic Module

The Countdown Logic Module is responsible for managing the countdown

timers for each event. Implemented in JavaScript, this module fetches event data from
the backend and dynamically calculates the remaining time until each event occurs. It
updates the countdown every second to provide real-time information.

4
  Real-Time Updates: Utilizes `setInterval` to update the countdown every
second, ensuring that users always see the most current time left for each event.
 Dynamic Time Calculation: Converts event dates retrieved from the database
into countdowns expressed in days, hours, minutes, and seconds.
 Event Handling: Supports multiple events by generating unique IDs for each
countdown, facilitating separate updates for each timer.

3. Data Fetching Module

The Data Fetching Module is responsible for retrieving event data from the
backend server using the Fetch API. This module ensures that the UI is populated with
up-to-date event information from the MySQL database.

 API Call: Makes a GET request to the `/events` endpoint, fetching the event data
in JSON format.
 Error Handling: Includes basic error handling to log any issues encountered
while fetching data, improving debugging capabilities.
 Event Iteration: Iterates over the received events to initiate countdowns for each
event dynamically.

4. Backend Server Module

The Backend Server Module serves as the application's server-side logic, built
with Node.js and Express.js. It facilitates communication between the frontend and the
MySQL database, handling requests to fetch event data.

 Express Framework: Utilizes Express to create a RESTful API endpoint for

fetching events, providing a structured way to manage server requests.
 MySQL Integration: Establishes a connection to a MySQL database where event
information is stored, enabling efficient data retrieval.
 CORS Support: Implements CORS to allow cross-origin requests from the
frontend, ensuring that the client-side application can access server resources
securely.

5. Database Management Module

The Database Management Module handles the interaction with the MySQL
database, managing the storage and retrieval of event information. This module is
critical for maintaining the integrity and accessibility of event data.

5
  Event Storage: Allows for the addition, modification, and removal of event
entries in the `events` table.
 Data Querying: Executes SQL queries to fetch event details when requested by
the frontend.

 Connection Handling: Manages the database connection lifecycle, ensuring it

remains active for incoming requests.

6. Styling Module

The Styling Module defines the visual presentation of the application. Using CSS,
this module establishes styles for various elements, enhancing the user experience
through aesthetic design choices.

 Responsive Design: Incorporates media queries to adjust styles for different

screen sizes, ensuring usability on mobile and desktop devices.
 Dynamic Effects: Implements hover effects for buttons and images to create a
more interactive experience for users.
 Thematic Variations: Applies different color themes to event sections, making
the application visually engaging and distinct for each event.

6
 5. SYSTEM DESIGN

The system design outlines the architecture, components, and interactions

required to implement the multi-event countdown timer application. This design
emphasizes modularity, scalability, and efficiency to deliver a seamless user experience.

5.1 System Architecture

The system architecture outlines the organization of the components, their

interactions, and how they work together to fulfill the requirements of the multi-event
countdown timer application. The application follows a Client-Server architecture
pattern, which separates the client-side user interface from the server-side logic and
data storage. This design enhances modularity and facilitates scalability.

Components in the diagram

1. Client (Frontend): User interface developed using HTML, CSS, and JavaScript.

2. Server (Backend): Handles business logic and API requests using Node.js and
Express.js.

3. Database: MySQL is utilized to store event data, allowing efficient data retrieval
and management.

7
 Frontend Layer

1.User Interface

2. CountDown
Timer UI
3.Events Display
Fetches Data
from Backend
API

/events endpoint

Backend Layer HTTP Request

Handles 1. Node js and Express

incoming http
server
requests
Event Routes(Restful API)

/events
Queries Mysql 2. Database
database for
event data
Connector(Mysql)

Database Layer

Mysql Database
Stores Data
INT primary
id key
name
VARCHAR
date DATETIME

8
 6. SYSTEM IMPLEMENTATION

The implementation phase involves coding the various components of the multi-
event countdown timer application based on the system architecture designed earlier.
This includes frontend development, backend API creation, database setup, and
integration of the components.

1. Technologies Used

 Frontend: HTML, CSS, JavaScript

 Backend: Node.js, Express.js

 Database: MySQL

2. Setting Up the Development Environment

 Node.js - Ensure Node.js is installed on machine. Create a new directory for

project and initialize a new server.js application. (npm init –y)
 Install Express.js - (npm install express mysql cors)
 MySQL Setup - Install MySQL server and set it up on machine
 Project Initialization – Initialized with npm and installed required
dependencies.

6.1 Frontend Implementation

INDEX.HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-Event Countdown Timer</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]
alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>

9
 <div class="container py-5">
<h1 class="text-center mb-5">Upcoming Events Countdown</h1>
<!-- Onam Countdown -->
<div class="row mb-5 event-section">
<div class="col-md-6">
<h2 class="text-center">Onam Celebration</h2>
<a href="https://entekeralam.com.au/onam-2024/"><img src="img1.jpg"
alt="Onam Celebration" class="img-fluid rounded mx-auto d-block event-image mb-
4"></a>
</div>
<div class="col-md-6">
<div id="onamcelebration-countdown" class="countdown d-flex justify-
content-around">
<div class="time-box"><span id="onamcelebration-days" class="display-
5"></span><p>Days</p></div>
<div class="time-box"><span id="onamcelebration-hours" class="display-
5"></span><p>Hours</p></div>
<div class="time-box"><span id="onamcelebration-minutes"
class="display-5"></span><p>Minutes</p></div>
<div class="time-box"><span id="onamcelebration-seconds"
class="display-5"></span><p>Seconds</p></div>
</div>
<div class="para"><p id="onamcelebration-message" class="text-center mt-
3"></p></div>
</div>
</div>
<!-- Myntra Sale Countdown -->
<div class="row mb-5 event-section">
<div class="col-md-6">
<h2 class="text-center">Myntra Sales Offer</h2>
<a href="https://www.myntra.com/onam"><img src="img2.jpg"
alt="Myntra Sale" class="img-fluid rounded mx-auto d-block event-image mb-
4"></a>
</div>
<div class="col-md-6">

10
 <div id="myntrasale-countdown" class="countdown d-flex justify-content-
around">
<div class="time-box"><span id="myntrasale-days" class="display-
5"></span><p>Days</p></div>
<div class="time-box"><span id="myntrasale-hours" class="display-
5"></span><p>Hours</p></div>
<div class="time-box"><span id="myntrasale-minutes" class="display-
5"></span><p>Minutes</p></div>
<div class="time-box"><span id="myntrasale-seconds" class="display-
5"></span><p>Seconds</p></div>
</div>
<div class="para"><p id="myntrasale-message" class="text-center mt-
3"></p></div>
</div>
</div>
<!-- Concert Launch Countdown -->
<div class="row mb-5 event-section">
<div class="col-md-6">
<h2 class="text-center">Concert Launch</h2>
<a href="https://www.youtube.com/watch?v=XfYWFAoSmoE"><img
src="img3.jpg" alt="Concert Launch" class="img-fluid rounded mx-auto d-block
event-image mb-4"></a>
</div>
<div class="col-md-6">
<div id="concertlaunch-countdown" class="countdown d-flex justify-
content-around">
<div class="time-box"><span id="concertlaunch-days" class="display-
5"></span><p>Days</p></div>
<div class="time-box"><span id="concertlaunch-hours" class="display-
5"></span><p>Hours</p></div>
<div class="time-box"><span id="concertlaunch-minutes" class="display-
5"></span><p>Minutes</p></div>
<div class="time-box"><span id="concertlaunch-seconds" class="display-
5"></span><p>Seconds</p></div>
</div>

11
 <div class="para"><p id="concertlaunch-message" class="text-center mt-
3"></p></div>
</div>
</div>
<!-- Website Launch Countdown -->
<div class="row mb-5 event-section">
<div class="col-md-6">
<h2 class="text-center">Website Launch</h2>
<a href="https://karthikaak.neocities.org/event/event"><img
src="img4.avif" alt="Website Launch" class="img-fluid rounded mx-auto d-block
event-image mb-4"></a>
</div>
<div class="col-md-6">
<div id="websitelaunch-countdown" class="countdown d-flex justify-
content-around">
<div class="time-box"><span id="websitelaunch-days" class="display-
5"></span><p>Days</p></div>
<div class="time-box"><span id="websitelaunch-hours" class="display-
5"></span><p>Hours</p></div>
<div class="time-box"><span id="websitelaunch-minutes" class="display-
5"></span><p>Minutes</p></div>
<div class="time-box"><span id="websitelaunch-seconds" class="display-
5"></span><p>Seconds</p></div>
</div>
<div class="para"><p id="websitelaunch-message" class="text-center mt-
3"></p></div>
</div>
</div>
<!-- Black Friday Countdown -->
<div class="row mb-5 event-section">
<div class="col-md-6">
<h2 class="text-center">Black Friday Sale</h2>
<a href="https://www.amazon.com/shop/blackfridayf22"><img
src="img5.jpg" alt="Black Friday Sale" class="img-fluid rounded mx-auto d-block
event-image mb-4"></a>
</div>

12
 <div class="col-md-6">
<div id="blackfriday-countdown" class="countdown d-flex justify-content-
around">
<div class="time-box"><span id="blackfriday-days" class="display-
5"></span><p>Days</p></div>
<div class="time-box"><span id="blackfriday-hours" class="display-
5"></span><p>Hours</p></div>
<div class="time-box"><span id="blackfriday-minutes" class="display-
5"></span><p>Minutes</p></div>
<div class="time-box"><span id="blackfriday-seconds" class="display-
5"></span><p>Seconds</p></div>
</div>
<div class="para"><p id="blackfriday-message" class="text-center mt-
3"></p></div>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]
alpha3/dist/js/bootstrap.bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>

STYLE.CSS:

body {
font-family:'Kalam', cursive;
background-color: lightpink;
}
/* Heading Style */
h1 {
font-size: 3.5rem;
color: #d9534f;
font-weight: bold;
margin-bottom: 50px;}

13
/* Event Section Styling */
.event-section {
background: linear-gradient(125deg, #d9534f, #ffedd5);
border-radius: 15px;
padding: 30px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease-in-out;
}
.event-section:hover {
transform: scale(1.05);
}
/* Different Color Themes for Each Event */
.event-section:nth-child(1) {
background-color: #ffeeba;
}
.event-section:nth-child(2) {
background-color: #d4edda;
}

.event-section:nth-child(3) {
background-color: #cce5ff;
}
.event-section:nth-child(4) {
background-color: #f5c6cb;
}
.event-section:nth-child(5) {
background-color: #cce5ff;
}
/* Event Heading Styles */
.event-section h2 {
color: crimson;
font-weight: bold;
font-size: 50px;
margin-bottom: 20px;}

14
/* Image Styling */
.event-image {
height: 400px;
width: 400px;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.event-image:hover {
transform: scale(1.05);
}
/* Countdown Styling */
.countdown {
background-color: #ffffff;
border-radius: 15px;
padding: 30px;
width: 500px;
margin:10px;
position: relative;
right:10px;
top: 100px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.time-box {
background-color: bisque;
border-radius: 10px;
padding: 15px;
width: 100px;
height: 100px;
text-align: center;
margin: 0 10px;
transition: background-color 0.3s;
}
.time-box:hover {

15
 background-color: #d1ecf1;
}
.time-box span {
display: block;
font-size: 2.5rem;
color: #0a0808;
font-weight: bold;
position: center;
}
.time-box p {
color: #777;
font-size: 1rem;
font-weight: 600;
}
/* Responsive Styling */
@media (max-width: 768px) {
.event-section {
padding: 20px;
}
.time-box {
width: 60px;
padding: 15px;
}
.time-box span {
font-size: 2.0rem;
}
}
.para p{
position: relative;
right: 10%;
top: 80px;
font-weight: bold;
font-size: 50px;
}

16
SCRIPT.JS:

document.addEventListener('DOMContentLoaded', () => {
// Fetch event data from the backend
fetch('http://localhost:3000/events')
.then(response => response.json())
.then(events => {
events.forEach(event => {
// Convert event date from the database
const eventDate = new Date(event.event_date).getTime();

// Create dynamic IDs for the countdown timers

const eventId = event.name.toLowerCase().replace(/\s+/g, '');

// Start countdown for each event

setInterval(() => {
const now = new Date().getTime();
const timeLeft = eventDate - now;

if (timeLeft > 0) {
const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 *
60));
const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

// Update the countdown timers

document.getElementById(`${eventId}-days`).innerText = days;
document.getElementById(`${eventId}-hours`).innerText = hours;
document.getElementById(`${eventId}-minutes`).innerText = minutes;
document.getElementById(`${eventId}-seconds`).innerText = seconds;

// Update "Days to Go" message

17
 const daysToGoMessage = days > 0 ? `${days} days to go!` : `Less
than a day left!`;
document.getElementById(`${eventId}-message`).innerText =
daysToGoMessage;

} else {
// Event has started
document.getElementById(`${eventId}-countdown`).innerHTML =
`<h3>${event.name} Event Started!</h3>`;
document.getElementById(`${eventId}-message`).innerHTML = '';
}
}, 1000);
});
})
.catch(error => console.error('Error fetching event data:', error));
});

6.2 Backend Implementation

SERVER.JS:
const express = require('express');
const mysql = require('mysql2');
const cors = require('cors');

const app = express();

app.use(cors()); // To allow cross-origin requests from the frontend

// Create a connection to MySQL database

const db = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'raja257?', // Your MySQL password
database: 'eventDB' // The database you created

18
});

// Connect to the database

db.connect((err) => {
if (err) {
console.error('Error connecting to MySQL:', err);
return;
}
console.log('Connected to MySQL');
});

// API endpoint to fetch events data

app.get('/events', (req, res) => {
const query = 'SELECT * FROM events';
db.query(query, (err, results) => {
if (err) {
return res.status(500).send(err);
}
res.json(results); // Send the event data to the client as JSON
});
});

// Start the Express server

app.listen(3000, () => {
console.log('Server running on port 3000');
});

19
6.3 Database Implementation

MYSQL SCRIPT FOR TABLE CREATION:

CREATE DATABASE eventDB;

USE eventDB;
CREATE TABLE events (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255),
event_date DATETIME
);
INSERT INTO events (name, event_date) VALUES
('Onam Celebration', '2024-12-01 00:00:00'),
('Myntra Sale', '2024-12-01 00:00:00'),
('Concert Launch', '2024-10-05 00:00:00'),
('Website Launch', '2024-11-20 00:00:00'),
('Black Friday', '2024-11-29 00:00:00');

6.4 Testing

 Start mysql server

 Run Node js server
 Open web browser navigate to `http://localhost:3000` to view the
application. You should see the upcoming events and their
countdown timers.

20
7. SCREENSHOTS

21
22
23
 8. CONCLUSION

In conclusion, the upcoming event countdown timer project effectively combines

frontend and backend technologies to create a dynamic and engaging user experience.
By fetching event data from a Node.js server, the application displays real-time
countdowns for various events, allowing users to easily track remaining time until each
event begins. The JavaScript code efficiently updates the countdown every second,
providing users with accurate information on days, hours, minutes, and seconds left.
This project not only demonstrates the integration of various web development
technologies but also showcases the importance of user interaction and timely
notifications in event management. Additionally, it serves as a foundation for further
enhancements, such as adding notifications, event details, or user customization
options. Overall, this countdown timer project is a practical example of how modern
web applications can enhance user engagement and streamline the experience of event
planning and participation.

24
 9. REFERNCES

1. JavaScript.info - Date and Time - https://javascript.info/date

2. Node.js Documentation - https://nodejs.org/en/docs/
3. Express.js Documentation - https://expressjs.com/
4. W3Schools - JavaScript setInterval() -
https://www.w3schools.com/jsref/met_win_setinterval.asp

25