HALDIA INSTITUTE OF TECHNOLOGY, WEST BENGAL 721657

PROJECT
ON

Web Development Guess my number using HTML,

CSS and Javascript
Submitted By
SACHIN KUMAR
Roll no.: 10300222143
SHRUTI KUMARI
Roll no.: 10300222164
SAYAN SARKAR
Roll no.: 10300122160
SAKSHI SHARMA
Roll no.:10331722055
SHUBHANKAR SAHU
Roll no.:10300122166
PUSHP RANJAN
ROLL NO:10331722030

Under the Guidance of

DEBASHISH SAHU SIR

PROFESSIONAL TRAINER

1
CERTIFICATE OF APPROVAL

This certifies that the technical report titled “[Web

Development Guess my number using HTML, CSS
and JAVASCRIPT]” prepared by
[Group], has been reviewed and approved. The report content has been
thoroughly examined, demonstrating a comprehensive understanding
of the subject matter. Research methodology, analysis,and conclusions
are sound.

DATE-13/02/2025 Signature of Approval

2
 ACKNOWLEDGEMENT

I would like to extend my

heartfelt gratitude to everyone who contributed to
the successful completion of this project, " Web
Development Guess my number using HTML, CSS
and JAVASCRIPT’’.
."

Firstly, I am grateful to my mentors and instructors, whose

valuable guidance, insights, and support were instrumental throughout this project.
Their expertise and encouragement provided me with the direction necessary to
accomplish each phase effectively.
I would also like to thank my peers for their collaboration and constructive
feedback. Their suggestions helped refine the project and ensured a well-rounded
approach to problem-solving.

Finally, I acknowledge the vast resources and documentation provided by AWS,

which enabled me to explore and implement the features of Lambda, S3, and
CloudWatch with greater clarity and precision. This project has been a remarkable
learning experience, and I am thankful for the opportunity to deepen my
understanding of cloud services and event-driven automation.

Thank you all for your invaluable support and encouragement.

3
 ABSTRACT

"Guess My Number" is a simple, interactive web game where users guess a

randomly generated number. Built with HTML and CSS, it offers a clean and
engaging user experience.
This game demonstrates foundational web development skills and offers
opportunities for future enhancements like JavaScript interactivity and score
tracking.

In this game, the computer generates a secret number in the range of 1 to 100, and
the player has to guess it. The game has three difficulty levels.
A player's chances of guessing are limited by the level they choose. The easy level
gives the player 10 chances to guess the secret number, the medium level 7 chances
whereas the difficult level only offers 5 chances.
During the game, a player tells the computer his assumption about a number, and
the computer tells if the player is correct. If his number is less or more than the
secret number, the computer informs the player, and the player tries again.

4
 Introduction
"Guess My Number" is a simple and interactive web game built using
HTML and CSS. The game challenges users to guess a randomly
generated number, offering instant feedback and a clean, responsive
design. This project showcases fundamental web development skills while
providing an engaging user experience.

The design emphasizes simplicity, ensuring the interface is easy to

navigate while keeping the user engaged through immediate feedback. By
utilizing responsive design principles, the game works smoothly across
different screen sizes, providing a consistent experience on both desktop
and mobile devices. This project serves as a foundational exercise in web
development, showcasing how HTML and CSS can work together to
create interactive and enjoyable digital experiences.

5
 What is FULL STACK DEVELOPMENT
Full Stack Development refers to the practice of building both the front-end and
back-end components of a web application. A Full Stack Developer is capable of
creating a complete web solution, handling everything from the user interface to the
server, database, and application logic. This comprehensive approach ensures that a
developer can work on all layers of a software system, offering greater flexibility
and problem-solving capability.

Front-End Development
Front-end development focuses on the part of the application that users interact
with directly. It involves creating visually appealing and responsive interfaces.
 Technologies: HTML, CSS, and JavaScript.

 Frameworks/Libraries: React, Angular, Vue.js.

 Key Responsibilities: Designing layouts, creating interactive elements,

ensuring cross-browser compatibility, and optimizing performance.

Back-End Development
Back-end development handles the server, database, and application logic,
ensuring that the front-end receives the right data and performs as expected.
 Technologies: Node.js, Python (Django/Flask), Ruby on Rails, PHP, Java

(Spring Boot).
 Database Management: MySQL, PostgreSQL, MongoDB.

 Key Responsibilities: Server scripting, API development, authentication,

database interaction, and application architecture.

Database Management
The database stores and retrieves information for the application. A Full Stack
Developer manages database schema design, data integrity, and optimization.
 Types: Relational (SQL) and Non-relational (NoSQL) databases.

 Common Tools: MySQL, MongoDB, Firebase, PostgreSQL.

6
Version Control and Deployment
Managing code versions and deploying applications are critical skills for Full Stack
Developers.
 Version Control: Git and GitHub/GitLab.

 Deployment Tools: Docker, Kubernetes, CI/CD pipelines.

DevOps and Server Management

Understanding server infrastructure and cloud platforms helps ensure the
application runs smoothly and securely.
 Cloud Providers: AWS, Azure, Google Cloud.

 Server Management: Linux, Nginx, Apache.

7
 Advantages and disadvantages of FULL STACK
Advantages
 Versatility: Developers can work on both the client and server sides.
 Cost Efficiency: One developer can handle multiple roles, reducing the need
for larger teams.
 Faster Development: Seamless communication between front-end and back-
end components.
 Broader Skill Set: Enhances problem-solving and technical versatility.

Disadvantages of AWS

 Complexity: Managing the entire stack can be overwhelming.

 Limited Specialization: May lack deep expertise in either front-end or back-
end technologies.
 Workload: Higher responsibility, which can lead to burnout.
 Maintenance Challenges: Single developers might face difficulties
managing large projects alone.

8
Features and it's functions
Features of Guess My Number
 Random Number Generation: Each time the

game starts, a new random number is generated.

 User Input Field: Allows the player to enter their

guess.
 Feedback System: Indicates if the guess is too

high, too low, or correct.

 Score Tracking: Displays the number of attempts

made.
 Reset Button: Allows the player to start a new

game.
 Responsive Design: Adapts to different screen

sizes for a seamless experience.

Functions of Guess My Number

 Initialize Game: Generates a random number and

sets initial game state.

 Validate Input: Ensures the player's guess is

within the valid range.

 Compare Guess: Provides feedback on whether the

guess is too high, too low, or correct.

 Track Attempts: Keeps count of how many

9
  guesses the player has made.
 Reset Game: Clears input, resets the score, and
generates a new random number.

Structure & Design

 HTML: Defines the layout, including input fields,

buttons, and feedback messages.

 CSS: Styles the page with a clean, user-friendly

interface and responsive design principles.

User Flow Diagram

+------------------+
| Page Loads |
+------------------+
|
v
+------------------+
| User Inputs Guess|
+------------------+
|
v
+------------------+
| Feedback Display |
+------------------+
10
 |
v
+------------------+
| Reset Game |
+------------------+

Conclusion
"Guess My Number" is a simple yet entertaining web
project that highlights essential HTML and CSS
techniques. It encourages interactive learning while
delivering a fun and engaging experience for users.

Future Enhancements
 Add JavaScript for dynamic interactions and

enhanced gameplay.
 Implement score tracking and accessibility

improvements.

11
Features used in our project and their explanations
 Random Number Generation:

o This feature ensures that each game session is

unique by generating a random number when

the game starts. It creates a challenging and
dynamic experience for the player.
 User Input Field:

o Allows the player to enter their guess through

an intuitive and simple text input box. This field

accepts only valid numerical values to maintain
smooth gameplay.
 Feedback System:

o Displays messages indicating whether the guess

is too high, too low, or correct. This feature

enhances user engagement by providing real-
time guidance toward the correct answer.
 Score Tracking:

o Keeps count of the number of attempts the

player makes to guess the correct number. This

helps encourage the player to improve their
guessing strategy with each attempt.
 Reset Button:

o Enables the player to start a new game without

refreshing the page. It resets the score, clears the

12
 input field, and generates a new random
number.
 Responsive Design:
o The game adapts to different screen sizes,

ensuring a seamless and enjoyable experience

on desktops, tablets, and mobile devices.

Functions of Guess My Number

 Initialize Game:

o Generates a random number and sets the initial

game state.
 Validate Input:

o Ensures the player's guess is within the valid

range to avoid errors.

 Compare Guess:

o Provides feedback on whether the guess is too

high, too low, or correct.

 Track Attempts:

o Keeps count of how many guesses the player

has made and displays the score.

 Reset Game:

o Clears input, resets the score, and generates a

new random number to start a fresh game

session.
13
 Conclusion
"Guess My Number" is a simple yet entertaining web
project that highlights essential HTML and CSS
techniques. It encourages interactive learning while
delivering a fun and engaging experience for users.

Future Enhancements
 Add JavaScript for dynamic interactions and

enhanced gameplay.
 Implement score tracking and accessibility

improvements.

References
 Mozilla Developer Network (MDN)

 W3Schools HTML & CSS Guide

 CSS-Tricks for responsive design tips

 Stack Overflow for coding issues and solutions

14