WEB BASED STOPWATCH AND A TIC-TAC-TOE GAME APPLICATION
AN INTERNSHIP REPORT
Submitted
by
Sanjay V(310622104127)
BACHELOR OF ENGINEERING
in
COMPUTER SCIENCE AND ENGINEERING
EASWARI ENGINEERING COLLEGE,CHENNAI
(Autonomous Institution)
Affiliated to
ANNA UNIVERSITY::CHENNAI -600025
April 2025
CERTIFICATE OF EVALUATION
College Name : Easwari Engineering College
Branch & Semester : Computer Science and Engineering VI
Internship Period : 01/02/2025-28/02/2025
Company Name : PRODOGY INFO TECH
S.NO Name of the Title Name of the
Student with Supervisor with
Reg No Designation in
industry
1 Sanjay V
(310622104127) Stopwatch and a Tic- online
Tac-Toe game
s
The report of the internship work submitted by the above students in partial fullillment for the
award of Bachelor of Engineering Degree in Computer Science and Engineering of Anna
University were evaluated and confirmed to be are part of the work done by the above
student.
The internship evaluation was held on ______________
Internal Examiner
TABLE OF CONTENTS
CHAPTER NO TITLE PAGENO
1 INTERNSHIP REPORT
1.1 Objective 4
1.2 Scope Of the Internship 4
1.3 Milestones 5
1.4 Risks 6
1.5 Implementation 7
1.6 Conclusion 12
2 ANNEXURES
A1. Request Letter
A2. Acceptance
A3. Internship Completion Certificate
A4. Proof for paid Internship (if any)
A5. Outcome of Internship(if any)
OBJECTIVE
To develop hands-on experience in front-end web development by building interactive and
visually appealing web applications using HTML, CSS, and JavaScript.
The internship aimed to enhance my understanding of UI/UX principles, DOM manipulation,
and event-driven programming, while strengthening my ability to create functional and
responsive web projects from scratch.
SCOPE OF THE INTERNSHIP
The scope of this internship was to gain practical knowledge and hands-on experience in
front-end web development using HTML, CSS, and JavaScript.
It involved designing and building interactive web applications like a Stopwatch and a Tic-
Tac-Toe game, focusing on real-time DOM manipulation, event handling, and user interface
design.
The internship also aimed to strengthen skills in responsive design and provide a strong
foundation for future learning in full-stack web development.
MILESTONE
DESCRIPTION
PHASE STATUS
Designed and developed
Project Overview interactive web applications
using HTML, CSS, and
JavaScript. Completed
Gained hands-on experience
s in UI design, event-driven
programming, and
responsive web
development.
Project Kickoff and Planning Define project objectives, Completed
requirements, and scope.
Design and Architecture Finalize the application's Completed
Completion architecture, including front-
end and back-end
components.
Risks
Limited exposure to real-world project complexity due to the basic scope of
applications.
Challenges in debugging JavaScript errors during DOM manipulation and event
handling.
Difficulty in ensuring cross-browser compatibility and responsive design without
frameworks.
Time constraints while learning and implementing new web development concepts
independently.
Implementation
Technologies Used:
Frontend Development:
HTML5 for creating the basic structure and layout of the web pages.
CSS3 for styling the elements, including layouts, buttons, and responsiveness.
JavaScript for implementing core functionality and interactivity (e.g., timer logic, game
rules).
Development Tools:
Visual Studio Code (VS Code) as the primary code editor.
Live Server Extension to preview the web pages in real-time.
Version Control:
Git tracking code changes during development.
GitHub for storing and sharing the project repositories.
Project 1: Stopwatch Web App – Implementation
1. Introduction
The Stopwatch Web App is a browser-based tool built using HTML, CSS, and JavaScript. It
offers an interactive stopwatch with Start, Stop, Lap, and Reset features. Designed to work on
both desktop and mobile, it has a sleek glassmorphism UI and includes extras like a dark/light
mode switch and sound feedback on button clicks.
2. User Interface Design
The layout is created with HTML, using semantic tags and classes for easy styling. CSS
Flexbox centers the main content, and transitions give the UI a smooth, modern look.
Glassmorphism is achieved using background blur, transparency, and subtle shadows. Media
queries make the app responsive.
3. Timer Logic and JavaScript Functions
JavaScript handles the timing mechanism using setInterval() to update the timer every 10
milliseconds. The core functions include:
startTimer() – Begins or resumes timing.
stopTimer() – Pauses the current time.
resetTimer() – Clears everything and resets the display.
recordLap() – Captures and lists the current timer value.
Each action is bound to its respective button via addEventListener.
4. Lap Recording with localStorage
The recordLap() function stores lap times in an array, which is also saved in localStorage.
When the app reloads, it fetches previously stored laps to maintain continuity. This
demonstrates practical use of browser storage APIs.
5. Dark/Light Mode and Sound Integration
A toggle button switches between themes by dynamically changing the body class
(e.g., .dark-mode). CSS adjusts background and text accordingly. Button actions are paired
with sound effects triggered by JavaScript’s Audio object to enhance feedback.
6. Code Structure and Real-Time Updates
Time is broken down into minutes, seconds, and milliseconds.
updateDisplay() updates the DOM continuously with each timer tick.
The logic ensures accurate time tracking even when paused/resumed.
CSS classes are toggled for visual cues (like active buttons).
7. Challenges Faced and Learnings
One of the key challenges was preventing overlapping timers. This was resolved by disabling
the Start button when the timer is already running. The project helped me understand:
Real-time DOM updates
JavaScript timing functions
Event handling
Persistent data storage in the browser
Project 2: Tic-Tac-Toe – Implementation
1. Introduction
This project is a classic two-player Tic-Tac-Toe game built using HTML, CSS, and
JavaScript. The board is created dynamically, and players take turns marking their symbol (X
or O). The game checks for wins or draws after every move and offers a Restart Game option.
2. Dynamic Board Generation
Instead of hardcoding 9 cells, the JavaScript function createBoard() loops from 0 to 8,
creating div elements with the class cell, and appending them to the board. Each cell is
clickable, with an event listener that triggers the main game logic.
javascript
Copy code
for (let i = 0; i < 9; i++) {
const cell = document.createElement("div");
cell.classList.add("cell");
board.appendChild(cell);
}
3. Handling Turns and UI Status
Players alternate after each move. The current player is tracked using a variable
(currentPlayer), and the status is shown using a <p> element. The text updates after each
valid move, indicating whose turn it is.
4. Win and Draw Logic
Winning conditions are stored in a 2D array:
javascript
Copy code
const winningCombinations = [
[0, 1, 2], [3, 4, 5], [6, 7, 8],
[0, 3, 6], [1, 4, 7], [2, 5, 8],
[0, 4, 8], [2, 4, 6]
];
After each move, the checkWin() function runs through these combinations to check if a
player has won. If all cells are filled and no winner is found, it declares a draw.
5. Restart Functionality
The "Restart Game" button calls resetGame(), which clears all cells and resets variables like
gameActive and currentPlayer. This ensures players can start fresh without refreshing the
page.
javascript
Copy code
function resetGame() {
cells.forEach(cell => {
cell.textContent = "";
cell.classList.remove("taken");
});
currentPlayer = "X";
gameActive = true;
document.getElementById("status").textContent = "Player X's turn";
6. CSS Styling and UX
CSS Grid creates the 3x3 board layout.
.cell elements have hover effects and are styled with borders, font size, and cursor
styles.
Used pointer-events: none to prevent clicking an already-taken cell.
Flexbox is used to center everything on the screen.
7. Learnings and Outcomes
This project improved my understanding of:
Dynamic DOM manipulation
Handling game states (win/draw)
Writing clean, reusable JavaScript functions
Building interactive user interfaces
It also gave me a practical foundation in building simple games and managing UI logic
without external libraries.
Conclusion:
Through this internship, I gained hands-on experience in building interactive web
applications using core web technologies like HTML, CSS, and JavaScript. Developing
projects such as a stopwatch and a tic-tac-toe game improved my understanding of DOM
manipulation, event handling, and responsive design. This experience enhanced my problem-
solving skills and laid a strong foundation for more advanced web development projects in
the future.
Acceptance Letter
Letter of Recommendation
Completion Certificate
