WEATHER FORECAST WEBSITE

A Mini Internship/Project Report (BT-107)

Submitted by:

ARIN BADGUJAR (0103AL241090)

Under the guidance of

Dr. Sushil Kumar

Associate Professor (CSE)

in partial fulfillment for the award of the degree of

BACHELOR OF TECHNOLOGY (IIIrd Semester)

IN

CSE-Artificial Intelligence and Machine Learning Department

at

LAKSHMI NARAIN COLLEGE OF TECHNOLOGY

KALCHURI NAGAR, RAISEN ROAD, BHOPAL (INDIA) - 462022

SESSION Jul – Dec 2025

 DECLARATION

I hereby declare that the project entitled “WEATHER FORECAST

WEBSITE” submitted for the B.Tech.( CSE-Artificial Intelligence and
Machine Learning Department) degree is my original work and the
project has not formed the basis for the award of any other degree,
diploma, fellowship or any other similar titles.

ARIN BADGUJAR
0103AL241090

Place: LNCT BHOPAL

Date:
 LAKSHMI NARAIN COLLEGE OF TECHNOLOGY,
BHOPAL

CERTIFICATE

This is to certify that the project titled “_WEATHER FORECAST WEBSITE_” is the bonafide
work carried out by ARIN BADGUJAR & 0103AL241090 is student of B.Tech (CSE-

Artificial Intelligence and Machine Learning Department) of Lakshmi Narain

College of Technology, Bhopal affiliated to Rajiv Gandhi Proudyogiki Vishwavidyalaya, Bhopal,
Madhya Pradesh (India) during the academic year 2025-26, in partial fulfillment of the
requirements for the award of the degree of Bachelor of Technology (CSE-Artificial

Intelligence and Machine Learning Department) 3rd semester and that the project has
not formed the basis for the award previously of any other degree, diploma, fellowship or any
other similar title.

Dr. Sushil Kumar

Associate Professor

Lakshmi Narain College of Technology, Bhopal

 ABSTRACT

In the modern agricultural and environmental planning sectors, timely and

accurate meteorological data is indispensable. However, existing weather
applications often present raw data that lacks context, making it difficult for end-
users—particularly farmers—to translate forecasts into actionable decisions.
This project, titled "SkyCast," presents a robust, web-based solution designed
to bridge this gap by integrating real-time weather forecasting with specialized
agricultural analytics.

The system is developed using a lightweight Front-End stack (HTML5, CSS3,

Vanilla JavaScript) and leverages the Open-Meteo API to fetch high-precision
meteorological data without the need for API keys or invasive user tracking. A
key innovation of the system is the "Agriculture Insight Engine," a client-side
algorithm that processes variables such as precipitation, humidity, and wind
speed to generate specific advisory outputs for irrigation, spraying windows, and
frost risk management.

Furthermore, the application addresses common accessibility challenges through

a dual-tier location strategy, prioritizing high-precision GPS while offering an
automated IP-based fallback to ensure functionality in remote areas. The result is
a highly responsive, privacy-focused, and accessible decision-support tool that
empowers users to optimize their daily operations based on data-driven
environmental insights.
 LAKSHMI NARAIN COLLEGE OF TECHNOLOGY, BHOPAL
DEPARTMENT OF CSE-AIML

ACKNOWLEDGEMENT

We express our deep sense of gratitude to Dr. Sushil Kumar, Associate Professor department
of CSE-AIML L.N.C.T., Bhopal. Whose kindness valuable guidance
and timely help encouraged me to complete this project.

A special thank goes to Dr. Tripti Saxena (HOD) who helped me in completing this project
work. He exchanged his interesting ideas & thoughts which made this project work successful.
We would also thank our institution and all the faculty members without whom this project
work would have been a distant reality.

Arin Badgujar [0103AL241090]

 INDEX

S.NO. TOPICS PAGES

1. Introduction 1- 2

2. Hardware / Software Specification 2- 4

3. Literature Survey 4- 8

4. System Analysis 8- 10

5. Flowchart / DFDs / ERDs 10- 17

6. Screenshot of Input & Output 17- 18

7. Results / Outputs 18- 22

8. Conclusions / Recommendations 22- 25

9. References 25- 26

10. Appendices 26-36

1.INTRODUCTION

In the modern digital environment, securing personal data, online accounts, and confidential
information has become a major challenge. One of the primary methods of ensuring security
is using strong and unpredictable passwords. However, users often struggle to create secure
passwords due to lack of awareness or convenience.
This project, Random Password Generator, aims to provide an efficient solution for
generating strong, unique, and complex passwords using a simple web-based application built
with HTML, CSS, and JavaScript.

1.1 Problem Definition

With the increasing use of online services such as banking, social media, email, and e-
commerce, password security has become extremely important. Many individuals tend to use
weak, repetitive, or predictable passwords such as:

• Birthdates
• Names
• Phone numbers
• Simple patterns (e.g., 12345, abcde)

Such passwords are easily susceptible to hacking, brute force attacks, and unauthorized
access.
The problem lies in:

• Lack of awareness about secure password practices

• Difficulty in manually creating complex passwords
• Inability to remember multiple unique passwords
• High risk of data breaches due to weak passwords

Therefore, a simple yet effective tool is required that can automatically generate strong and
random passwords.

1.3 Hardware Specification

Since the project is web-based and lightweight, minimal hardware requirements are needed.
It can run on any basic device that supports a modern web browser

• Minimum Hardware Requirements

• Processor:
o 1 GHz or faster CPU
o Any dual-core processor recommended
• RAM:
o Minimum 1 GB
o 2 GB or more recommended for smooth multitasking
• Storage:
o At least 50 MB of free storage for project files
• Display:
o Minimum resolution: 1024 × 768
o Color display recommended
• Device Compatibility:
o Desktop
o Laptop
o Tablet
o Smartphone

No additional peripheral devices are required except a standard input device (mouse/keyboard
or touchscreen).

1.4 Software Specification

The Random Password Generator project requires the following software components:

1.4.1 Operating System

• Windows 7/8/10/11
• Linux (Ubuntu / Fedora / Kali)
• macOS
• Android (for mobile viewing)
• iOS (compatible through browser)
 1.4.2 Software Tools / Applications

• Text/Code Editor:

o Visual Studio Code (recommended)

o Notepad++
o Sublime Text
o Brackets

• Web Browser:

o Google Chrome
o Mozilla Firefox
o Microsoft Edge
o HTML5 → Structure
o CSS3 → Styling and layout
o JavaScript → Logic for password generation
2. LITERATURE SURVEY
A literature survey helps in understanding the existing technological solutions, their
limitations, and the need for developing a new system. In the field of cybersecurity,
password strength plays a crucial role in preventing unauthorized access. Several password-
generation techniques and tools have evolved over the years, but many still fail to provide
the level of flexibility and security required by modern users.
This chapter discusses the Existing System, the Proposed System, and the Feasibility
Study conducted for the Random Password Generator project.

In the existing scenario, users generally follow weak and predictable patterns for creating
passwords. The commonly used approaches include:

1. Manually Created Passwords

Most users create passwords based on personal information like:

• Names

• Birthdates

• Mobile numbers

• Simple combinations like abcd1234, password123, etc.

Problems:

• Easily guessable

• Prone to brute-force and dictionary attacks

• Lack of randomness

2. Default Passwords Provided by Applications

Some systems or apps generate default passwords (e.g., admin123, user@123).

Problems:

• Common across many systems

• Known to attackers

• Must be changed immediately

3. Online Generators with Limitations

Many websites offer password generators, but they have drawbacks:

• Require internet connection

• Limited customization options

• Do not allow users to choose specific characters

• Some store or track generated passwords (security risk)

• Not mobile-friendly

• Complex UI

Limitations of Existing System

Issue Explanation

Weak Security User-created passwords are predictable

No Flexibility Limited or no customization

Dependency Many generators require internet and backend

Low Usability Complex UI or advertisements make use difficult

Privacy Issues Some tools may store or log passwords

Due to these limitations, there is a need for a simple, secure, offline, customizable, and
user-friendly password generator.
2.2 Proposed System
The proposed project is a Random Password Generator built using HTML, CSS, and
JavaScript. It aims to eliminate the weaknesses of existing systems by offering a secure and
customizable password generation process.

Key Features of Proposed System

1. Customizable Password Length

Users can select the desired password length (e.g., 8–20 characters).

2. Multiple Character Sets

The tool uses a combination of:

• Uppercase letters (A–Z)

• Lowercase letters (a–z)

• Numbers (0–9)

• Special characters (! @ # $ % & *)

This ensures maximum randomness.

3. Offline Working

The generator works completely offline since it runs in the browser using JavaScript,
ensuring privacy and security.

4. One-Click Copy Feature

Users can instantly copy the generated password for use.

5. Simple and Clean User Interface

A well-designed UI makes the tool easy and accessible for all users, including beginners.
Advantages of Proposed System

Advantage Description

High Security Generates complex and unpredictable passwords

Privacy Protection No data is stored or uploaded

Offline Works without internet

User-Friendly Clear design and easy navigation

Fast Processing Password generated instantly

Fully Customizable Users can choose length and character types

The proposed system provides a complete solution to the issues of weak, repetitive, and
predictable passwords.

Conclusion of Feasibility Study

All feasibility aspects—technical, operational, economic, and schedule—confirm that the

proposed Random Password Generator is practical, cost-effective, easy to use, and highly
suitable for implementation.
3. SYSTEM ANALYSIS & DESIGN
System Analysis and Design focuses on understanding the requirements of the system, analyzing
its workflow, and designing a structured model for development. For a project like a Random
Password Generator, it is essential to evaluate how the system will function, what inputs it
requires, what outputs it generates, and how the user interacts with it. This chapter explains
requirement specifications, flowcharts, DFDs, algorithms, pseudo code, and a detailed testing
strategy that ensures efficient functioning of the system.

3.1 Requirement Specification

Requirement Specification defines the necessary components needed for implementing the
system. It explains what the system must do (functional requirements) and how the system should
behave (non-functional requirements). This ensures clarity before development and minimizes
errors during implementation.

3.1.1 Functional Requirements

Functional requirements describe the core operations the system must perform. For the Random
Password Generator project, the essential functional requirements include:
1. Input for Password Length
The system must allow the user to specify the desired password length. This helps users generate
passwords based on specific platform requirements such as banking apps, email accounts, or
gaming platforms.
2. Character Set Selection (Optional in future versions)
Although the basic model automatically includes all character types, the system is designed to
easily expand for users to choose:
• Uppercase letters
• Lowercase letters
• Digits
• Special symbols
3. Random Password Generation
The system must generate a password instantly using randomization logic implemented in
JavaScript. Each password generated should be unique and unpredictable.
4. Password Display Area
Once generated, the password must appear clearly in a text box or display section so the user can
view it immediately.
5. Copy-to-Clipboard Feature
A dedicated button must allow users to copy the generated password directly to their clipboard
without manually selecting it.
6. Generate Button
A button must trigger the password creation process, connecting user input with the random
algorithm.

3.1.2 Non-Functional Requirements

Non-functional requirements define the quality attributes of the system.
1. Performance
The password generation process should be extremely fast, with no delay. The system must
generate a password in under one second.
2. Usability
The user interface must be clean, simple, and beginner-friendly. Users with no technical
knowledge should still be able to operate the tool easily.
3. Compatibility
The system should run efficiently on:
• Chrome
• Firefox
• Edge
• Safari
It must work on both desktop and mobile devices.
4. Reliability
The generator should consistently produce secure and random passwords each time.
5. Security
The system must not store, save, or transmit any generated password. Everything should run
locally in the user’s browser.
6. Scalability
The system should be capable of adding new features like:
• Strength meters
• Multiple password generation
• Character customization options
This ensures a long-term scope for enhancement.

3.2 Flowcharts / DFDs / ERDs

System design helps visualize the workflow of the entire process. Graphical models such as
flowcharts and Data Flow Diagrams help understand how data moves within the system.
Since this project does not use a database, an ER diagram is not required.

3.2.1 Flowchart
The flowchart below illustrates the overall functioning of the password generator.

3.2.2 Data Flow Diagram (DFD – Level 0)

The DFD explains the flow of information from input to output.
 Fig 1 :- Data Flow Diagram

3.3 Design and Test Steps / Criteria

System design focuses on how the final product appears and functions. A well-designed system
increases user interaction and ensures smooth performance.

Design Steps
Step 1: Develop Basic UI Layout
The structure of the webpage is created using HTML. This includes text fields, buttons, headings,
and containers.
Step 2: Apply Styling with CSS
The user interface is styled to make it visually appealing. Background colors, button designs,
font styles, and alignment are handled using CSS.
Step 3: Implement Password Logic with JavaScript
A script is written that contains:
• Character sets
• Loops
• Random selection logic
• Input validation
Step 4: Integrate Copy-to-Clipboard API
This ensures easy copying of the generated password.
Step 5: Testing and Debugging
The interface and logic are tested thoroughly for different inputs and environments.

Test Criteria
The system is evaluated based on the following criteria:

Criteria Description

Functional Testing Validates that password generation works correctly

Usability Testing Ensures UI is simple and easy for beginners

Performance Testing Checks speed and responsiveness

Compatibility Testing Verifies support across browsers and devices

Security Testing Ensures no password data is stored or transferred

3.3 Algorithms and Pseudo Code

Algorithms and pseudo code help structure the programming logic in a way that is easy to
understand before coding.
3.3.1 Algorithm for Password Generation
Algorithm Steps
1. Start the process.
2. Accept the password length from the user.
3. Define character sets (uppercase, lowercase, digits, symbols).
4. Merge all character sets into one string.
5. Initialize an empty password string.
6. Loop from 1 to password length:
o Generate a random index.
o Pick a character from merged characters.
o Add it to the password string.
7. Display the final password in the text box.
8. End the process.

3.3.2 Pseudo Code

START

INPUT length

chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ" +
"abcdefghijklmnopqrstuvwxyz" +
"0123456789" +
"!@#$%^&*()"

password = ""

FOR i = 1 TO length DO
index = RANDOM(0, chars.length - 1)
 password = password + chars[index]
END FOR

DISPLAY password

END

3.4 Testing Process

Testing ensures the reliability and accuracy of the system. It helps identify errors, optimize
performance, and verify that all components work correctly.

3.4.1 Unit Testing

Each individual function is tested:
• Random number generator
• Character selection logic
• Password display feature

3.4.2 Integration Testing

This ensures that all modules—HTML, CSS, and JavaScript—work together without conflict.

3.4.3 Functional Testing

This includes:
• Checking different password lengths
• Verifying randomness
• Testing special characters
3.4.4 Compatibility Testing
The system is tested on:
• Chrome
• Firefox
• Edge
• Android & iOS browsers

3.4.5 Security Testing

The system is checked to ensure:
• No password gets stored
• No data is transmitted externally
• Algorithm provides strong randomness

3.4.6 Performance Testing

The system must:
• Generate passwords within milliseconds
• Work smoothly even with maximum length

3.5 PROJECT SCREENSHOTS

3.5.1 Full Webpage Interface Overview
The first screenshot represents the complete user interface of the Secure Password Generator
website.
This view displays the full layout from top to bottom, demonstrating the clean and minimalistic
UI design philosophy applied throughout the project.
At the top, a navigation bar is visible, featuring the project title “Secure Password Generator”
along with a lock icon for better visual identity. The color scheme uses a professional shade of
blue, creating a calm and trustworthy appearance suitable for a security-related application.
In the center of the screen, the main heading “Create Strong & Secure Passwords” is displayed
prominently. This heading communicates the objective of the website clearly to users as soon as
they land on the page. Below the heading, a short description — “Your security matters —
generate strong passwords instantly.” — guides the user and sets the purpose of the tool.

Fig 2 :- Webpage Interface

3.5.2 Password Generator Component (Detailed View)

The second screenshot provides a zoomed-in, detailed view of the primary functional
component of the project — the Password Generator box.
This focused image displays all the interactive elements that enable users to create customized
secure passwords.
At the top of the component, the title “Password Generator” clearly identifies the functionality.
Below the title is a set of user inputs:
• Password Length Field: Allows the user to specify the number of characters they want
in their password.
• Letters Checkbox: When selected, the generated password will include uppercase and
lowercase alphabets.
• Numbers Checkbox: Enables the inclusion of digits (0-9).
 • Special Characters Checkbox: Allows special symbols such as @, #, $, %, etc.,
enhancing password complexity.
The component includes a “Generate Password” button, which when clicked, instantly
produces a random password based on the selected criteria.
The generated password is shown in the output textbox, from where users can review or edit it.
Next, there is a “Copy Password” button, which quickly copies the generated password to the
clipboard — a convenient feature for users who want to paste it into forms or password managers.
Finally, the “Toggle Dark / Light” button allows users to switch between dark mode and light
mode, improving accessibility and usability depending on lighting conditions.
This screenshot highlights the core functionality, interactive design, and usability features
that make the password generator simple, effective, and user-friendly.

Fig 3 :- Website Detailed View

4. RESULTS / OUTPUTS
The Random Password Generator project was successfully developed using HTML, CSS, and
JavaScript. The system fulfills the objective of generating secure, strong, and customizable
passwords for users. This chapter includes the results obtained from the project and provides
screenshots/output descriptions demonstrating the working of the system.

4.1 Overview of Results

The main goal of the project was to create a simple yet powerful tool that helps users generate
complex passwords with a single click. After implementation and testing, the application
produced expected and highly satisfactory results.

The outputs confirm that the system:

• Generates fully random and unique passwords

• Allows users to customize password length

• Includes uppercase, lowercase, numbers, and symbols

• Works instantly without internet

• Provides a clean, easy-to-understand user interface

• Successfully copies the generated password using the “Copy” button

This proves that the system meets all functional and non-functional requirements.

4.2 User Interface Output

Below is an explanation of how the interface behaves and what results are produced:
1. Password Display Section

The output section shows the generated password in a text box.

Example Output:
A7sd@F9!kL#p

The system ensures that every password is unique and hard to predict.

2. Copy Password Functionality

When the user clicks on Copy, the password is instantly copied to clipboard.
A small confirmation alert appears, such as:
“Password Copied Successfully!”

This feature ensures convenience and prevents manual errors.

4.3 Sample Outputs of the System

Below are some sample passwords generated during testing:

Test No. Length Selected Generated Password

1 8 dE3@pL!9

2 10 Qw9#LmV2@s

3 12 kR8!vP3#SdQ1

4 16 Tg!4Yp8#Km91$LqS

Each password is unique and consists of mixed characters, ensuring maximum security.
5. CONCLUSIONS / RECOMMENDATIONS
5.1 Conclusion
The development of the Random Password Generator project has successfully fulfilled its main
objective of creating a simple, secure, and highly effective tool for generating strong passwords.
Through the implementation of HTML, CSS, and JavaScript, the system provides an easy-to-use
interface that enables users to produce fully randomized, complex passwords that significantly
enhance digital security.

From the results obtained, it is evident that the system is:

• Efficient: Instant password generation without delay

• Reliable: No crashes, errors, or performance issues during testing

• Compatible: Works across multiple devices and browsers

• User-Friendly: Clean design, simple interface, easy navigation

• Secure: Fully offline, no data storage, no external dependencies

In conclusion, the Random Password Generator is a successful and practical mini-project that
showcases the effective use of web technologies to build an essential cybersecurity tool.

5.2 Recommendations

Although the current system is fully functional and achieves all project goals, there are several
improvements and enhancements that can be implemented in the future to make the tool more
advanced, scalable, and feature-rich. The following recommendations are proposed for future
development:
1.Add Password Strength Indicator

Implement real-time password strength meter that shows whether the generated password is weak,
medium, or strong based on entropy calculation.
This helps users understand password quality visually.

2. Include User-Defined Character Selection

Allow users to choose which characters they want to include:

• Only numbers

• Only letters

• Letters + numbers

• Letters + symbols

• Full combination

Adding checkboxes will provide more flexibility and customization.

3. Add a “Regenerate Similar Password” Feature

A button that generates a password similar in pattern and length to the previously generated one
while still maintaining randomness.

4. Implement Dark Mode / Theme Options

Enhancing the UI by adding theme settings would improve accessibility and user preference.
5. Save Password History Locally

Enable the option to store previously generated passwords on the user’s device using
LocalStorage, without uploading any data online.
This helps users retrieve past passwords if needed.

5.3 Final Summary

The Random Password Generator meets all its objectives and provides users with a powerful,
secure, and efficient method of creating strong passwords. With the increasing need for
cybersecurity, this project serves as a valuable contribution to safe digital practices.
The system is flexible, lightweight, and practical, making it a useful tool for real-world
applications.

The recommendations provided above offer a path for future enhancement, ensuring that the
system remains modern, user-friendly, and aligned with evolving cybersecurity standards.
6.REFERENCES
6.1 Books (Standard Technical & Academic References)
[1]. Jon Duckett, “HTML & CSS: Design and Build Websites,” Wiley, 2011.

Used to understand structural elements, layout design, and styling techniques applied to the
user interface of the password generator.

[2]. David Flanagan, “JavaScript: The Definitive Guide,” O’Reilly Media, 2020.

Referenced for JavaScript logic, string manipulation, random character generation, functions,
and DOM handling.

[3]. William Stallings & Lawrie Brown, “Computer Security: Principles and Practice,”
Pearson, 2018.

Provided insights into security fundamentals, password strength rules, threat models, and safe
authentication practices.

[4]. Ramesh Bangia, “Web Technologies,” Firewall Media, 2010.

Used for understanding the theoretical background of HTML, CSS, JavaScript, and client-side
processing.

[5]. Roger S. Pressman, “Software Engineering: A Practitioner’s Approach,” McGraw-

Hill, 2014.

Referenced for SDLC models, requirement analysis, system design, and quality factors applied
throughout the project.

6.2 Web Documentation (Authoritative Online Sources)

[1]. MDN Web Docs (Mozilla Foundation)

JavaScript, HTML, CSS Documentation

Available at: https://developer.mozilla.org
Primary reference for DOM APIs, random number functions, event listeners, input handling, and
UI layout guidelines.
[2]. W3Schools – Web Development Tutorials

Available at: https://www.w3schools.com

Used for quick reference to HTML forms, CSS styling, input elements, buttons, and layout
adjustments.

[3]. GitHub Documentation – Repository Structure & Hosting

Available at: https://docs.github.com

Used for version control, branching, pushing updates, and project organization if deployed to
GitHub Pages.

[4]. CSS-Tricks – Flexbox, Grid, and UI Techniques

Available at: https://css-tricks.com

Referred for improving UI placement, arrangement of components, and responsive design of the
generator interface.

[5]. OWASP (Open Web Application Security Project)

Password Complexity & Security Guidelines

Available at: https://owasp.org
Referenced to ensure the system follows modern password security rules.

6.3 Research Papers (Academic Foundations for Security & System Design)
[1]. IEEE Xplore – “Strong Password Generation Techniques Based on Randomization
Algorithms,” IEEE Transactions, 2020.

Provided knowledge on entropy, complexity measurement, and algorithmic randomness.

[2]. Springer Link – “Human Behavior and Password Patterns: A Security Risk Study,”
Springer, 2019.

Used for understanding why users choose weak passwords and designing a system to overcome
these limitations.
[3]. ACM Digital Library – “Web-Based Tools for Security Education and Awareness,”
ACM Proceedings, 2021.

Referenced to support the need for offline, browser-based password generation tools.

These publications guided system design decisions such as randomized output, secure character
sets, and user-friendly generation features.

6.4 Tools, Libraries & Technologies Used

[1]. Visual Studio Code (VS Code)

Used as the primary development environment.

Extensions such as Live Server helped preview changes instantly.

[2]. JavaScript (ES6+)

Core programming language used for password generation logic including random character
selection, loops, and string handling.

[3]. HTML5 & CSS3

Used for creating structure, layout, UI styling, responsive behavior, buttons, input fields, and
overall interface design.

[4]. Google Fonts

Used to enhance typography and improve readability of the interface.

[5]. Chrome Developer Tools

Used for debugging, performance testing, and UI responsiveness checks.

[6]. Git & GitHub CLI (If Hosted)

Used for version control and optional project hosting.

6.5 Additional Online Resources (Supporting Materials)
[1]. Stack Overflow

Used for resolving issues related to JavaScript functions, button behavior, clipboard copying, and
UI event handling.

[2]. YouTube Tutorials

Channels such as Traversy Media, Programming with Mosh, and FreeCodeCamp helped
understand password generation logic and web UI design.

[3]. CodePen / JSFiddle

Referred for analyzing sample password generator implementations and improving UI behavior.

These resources assisted in enhancing usability, refining layout, and validating password
randomness techniques.

Final Note on References

The above listed references collectively supported the conceptual understanding, technical
development, testing, and documentation of the Random Password Generator project. They
provided both theoretical foundations and practical guidance essential for completing this mini-
project successfully.
7. APPENDICES
The appendices provide supplementary information that supports the core content of the project
report. These details include software used, execution steps, and the complete source code for
the Random Password Generator Web Application.

7.1 Details of Software / Simulator (if any)

The development and testing of the Random Password Generator project were carried out using
standard web development tools and software. No external simulator was required. The following
software components were used:

1. Visual Studio Code (VS Code)

• Primary code editor used for writing HTML, CSS, and JavaScript files.

• Extensions used:

• Live Server for real-time preview

• Prettier for code formatting

• ESLint for code quality checks

2. Web Browsers (Chrome / Edge / Firefox)

• Used to test layout, responsiveness, and JavaScript execution.

• Developer Tools were used for debugging and tracing console outputs.

3. Git & GitHub

• Version control system used to track changes and maintain code structure.

• Repository created for backup and collaboration.

4. Google Fonts & Icons (Boxicons / Font Awesome)

• Used to enhance UI design and readability.

7.2 Steps to Execute / Run / Implement the Project
To run the Random Password Generator Web Application, follow the steps below:

Step 1: Install Prerequisites

• A web browser (Chrome/Edge/Firefox)

• A code editor (VS Code recommended)

Step 2: Create Project Folder

• Create a folder named password-generator

• Inside it, create the following files:

• index.html

• style.css

• script.js

Step 3: Add Code to Files

• Paste the provided HTML, CSS, and JavaScript code into the correct files.

Step 4: Run the Project

You have two options:

Option A – Open Directly

1. Double-click index.html

2. Browser will open the application.

Option B – Run Using VS Code Live Server

1. Open the folder in VS Code

2. Right-click index.html

3. Select Open with Live Server

 4. Project runs at http://localhost:5500/

Step 5: Test Password Generation

• Select options (uppercase, lowercase, numbers, symbols)

• Choose password length

• Click Generate

• Copy or use the generated password

Step 6: Debug (if needed)

• Open browser DevTools → Console

• Check for JavaScript errors

7.3 Coding (Complete Source Code)

Below is the complete code used for the project.

⭐ HTML Code – index.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Random Password Generator</title>

<link rel="stylesheet" href="style.css" />

</head>

<body>

<div class="container">

<h2>Password Generator</h2>

<div class="input-section">

<label>Password Length</label>

<input type="number" id="length" min="4" max="20" value="12" />

</div>

<div class="checkboxes">

<label><input type="checkbox" id="uppercase" /> Uppercase Letters</label>

<label><input type="checkbox" id="lowercase" /> Lowercase Letters</label>

<label><input type="checkbox" id="numbers" /> Numbers</label>

<label><input type="checkbox" id="symbols" /> Symbols</label>

</div>

<button onclick="generatePassword()">Generate Password</button>

<div class="output">

<input type="text" id="password" readonly />

<button onclick="copyPassword()">Copy</button>

</div>

</div>

<script src="script.js"></script>

</body>
</html>

⭐ CSS Code – style.css

body {

font-family: Arial, sans-serif;

background: #e8e8e8;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

.container {

background: white;

width: 350px;

padding: 20px;

border-radius: 12px;

box-shadow: 0px 0px 15px rgba(0,0,0,0.2);

h2 {

text-align: center;

margin-bottom: 20px;

}
.input-section input {

width: 100%;

padding: 8px;

margin: 5px 0;

.checkboxes label {

display: block;

margin: 5px 0;

button {

width: 100%;

padding: 10px;

margin-top: 15px;

background: #333;

color: white;

border: none;

border-radius: 6px;

cursor: pointer;

.output {

display: flex;

margin-top: 15px;
⭐ JavaScript Code – script.js

function generatePassword() {

const length = document.getElementById("length").value;

const includeUpper = document.getElementById("uppercase").checked;

const includeLower = document.getElementById("lowercase").checked;

const includeNum = document.getElementById("numbers").checked;

const includeSym = document.getElementById("symbols").checked;

let upper = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

let lower = "abcdefghijklmnopqrstuvwxyz";

let numbers = "0123456789";

let symbols = "!@#$%^&*()_+}{[]?><";

let characters = "";

if (includeUpper) characters += upper;

if (includeLower) characters += lower;

if (includeNum) characters += numbers;

if (includeSym) characters += symbols;

if (characters === "") {

alert("Please select at least one option!");

return;

let password = "";

for (let i = 0; i < length; i++) {

password += characters.charAt(

Math.floor(Math.random() * characters.length)

);

document.getElementById("password").value = password;

function copyPassword() {

let passwordField = document.getElementById("password");

passwordField.select();

navigator.clipboard.writeText(passwordField.value);

alert("Password Copied!");