NEWBIG (1)
NEWBIG (1)
NEWBIG (1)
ON
Web-Devlopment
AT
UNISOFT TECHNOLOGIES
Submitted in partial fulfilment of the requirements
for the award of degree of
Diploma
In
Computer Engineering
Submitted To Submitted By
Mrs. S. A. Wanjari Mr. Vaibhav Pachkore
(2201070041)
The successful completion of this project mark the beginning of an ever - going
learning experience of converting ideas and concepts into real life, practical
system. This project was a quite a learning experience for me at each and every
step. At the same time it has given me confidence to work in professional setup.
I feel the experience gained during the project will lead me to gain the bright
prospect in the future.With the deep sense of gratitude, I express my sincere thanks to
Mr. Arnab Banerjee, for his active support and continuous guidance without which
it would have been difficult for me to complete this project. I will also like to
the other working staff teachers at UNISOFT TECHNOLOGIES for taking keen
interest in my project and giving valuable suggestions and helping me directly or
indirectly to complete this project.
VAIBHAV
PACHKORE
02413302713
Diploma(CO)
CERTIFICATE
CONTENTS
DECLARATION 2
ACKNOWLEDGEMENT 3
CERTIFICATE 4
ABSTRACT 5
CONTENTS 6
1. INTRODUCTION
2. SYSTEM ANALYSIS
3. DEVELPOMENT ENVIRONMENT
4. SYSTEM DESIGN
a. Testing… ...................................................................................................................... 33
b. Implementation and Screenshots… ............................................................................37
6. CONCLUSION… ................................................................................................................ 44
7. BIBLIOGRAPHY… ............................................................................................................ 45
INTRODUCTION
ORGANISATION PROFILE:
Unisoft education ventured in certification lead IT training since it’s inception on 14th
September 2000. Based out of Nagpur, during the initial years we were known as HAT
sellers (only of RED color) and a misplaced high end IT training institute. People found us
ahead of times and out of world.In last 23 years we have produced more than 40000 highly
successful IT professionals working with best known IT companies across the globe.
IT industry which is most employing industry till has distinct attribute of creating equal
number of semi skilled unemployable human resource. The people who are partially trained,
are the big market opportunity, to cater these people Unisoft’s career programs like ADNSM,
ADHNT, UltraMCA are industry acclaimed and hugely successful individual IT training
solutions.Unisoft touches 10000+ life's every year and help each of them in achieving next
level of the career journey. For us each student is just like a new wave on seashore giving
meaning to sea’s existence Our business verticals are:
UNISOFT offers out of the box solutions customized for various segments.Our
expertise lies in designing, realizing and deploying customized solutions that integrate
multi-vendor Commercial Off The Shelf Solutions, custom device designincluding
software and hardware design.
➢ Design Realization
INTRODUCTION
Creating a word guessing game using HTML, CSS, and JavaScript is a fun way to practice
your web development skills. Here's an introduction to help you get started.
1. Project Overview
The goal of the game is to guess a hidden word by selecting letters. The player has a limited
number of attempts to guess the word. If they guess correctly, the letter appears in the word;
if they guess incorrectly, they lose an attempt. The game ends when the player either guesses
the word or runs out of attempts
Word Categories: Allowing the player to choose from different word categories.
Hint System: Implementing a hint feature that gives the player a clue about the word.
Score Tracking: Keeping track of the player's score across multiple rounds or games.
Local Storage: Saving the game state or score so that it persists across sessions
LIMITATION OF EXISTING SYSTEM:
1. Data redundancy:
It means that same data fields appear in many different files and often in
different formats. In Manual system it poses quite a big problem because the
data has to be maintained in large Volumes, but in our system, this problem can
be overcome by providing the condition that if The data entered is duplicate, it
will not be entered otherwise updating will take place.
The primary objective of the word guessing game is to guess the hidden word by selecting
letters within a limited number of attempts. The player must use logic and deductive
reasoning to uncover the word before running out of guesses.
Detailed Objectives:
This game is designed to be both fun and challenging, encouraging players to think carefully
about each guess while providing a simple and engaging experience.
FEASIBILITY STUDY
INTRODUCTION:
SUMMARY:
1. HARDWARE REQUIREMENT:-
2. SOFTWARE REQUIREMENTS:-
1. INTRODUCTION TO VS CODE :-
The database has logical structures and physical structures. Because the
physical and logical structures are separate, the physical storage of data
can be managed without affecting the access to logical storage structures.
2.INTRODUCTION TO WEB-DEVLOPMENT
Web development is the process of building and maintaining websites or web applications
that run on browsers. It involves a combination of front-end (client-side) and back-end
(server-side) development, each with its own set of technologies and tools. Web
development is a vast field, requiring knowledge of programming, design, databases, and
sometimes even content management.
b. Key Concepts
• HTTP/HTTPS: The protocols used to transfer data over the web. HTTP stands for Hypertext
Transfer Protocol, while HTTPS adds a layer of security with SSL/TLS encryption.
• URL: Uniform Resource Locator, the address used to access resources on the web.
• Client-Server Model: A model in which the client (browser) requests services or resources,
and the server provides them.
2. Front-End Development
Front-end development is focused on the visual and interactive aspects of a web application.
It’s where design meets code.
a. Core Technologies
• HTML (Hypertext Markup Language): The standard language used to create the structure
of web pages. It defines elements like headings, paragraphs, links, images, and more.
• CSS (Cascading Style Sheets): Used to style HTML elements, making the web pages look
attractive. CSS controls layout, colors, fonts, and responsiveness (how a site looks on
different devices).
• JavaScript: A programming language that brings interactivity to the web. JavaScript can be
used to create dynamic content, handle user inputs, and interact with back-end services
without reloading the page.
c. Responsive Design
• Ensures that web pages look and function well on a variety of devices (desktops, tablets,
smartphones). CSS media queries and frameworks like Bootstrap are commonly used to
achieve responsiveness.
3. Back-End Development
Back-end development focuses on the server-side logic, databases, and the core application
functionality.
a. Server-Side Languages
b. Databases
• SQL Databases: Structured databases that use SQL (Structured Query Language) for data
management. Examples include MySQL, PostgreSQL, and Microsoft SQL Server.
• NoSQL Databases: Non-relational databases that store data in formats other than tables.
Examples include MongoDB, Cassandra, and Redis.
• Allow different software systems to communicate with each other. In web development,
RESTful APIs and GraphQL are commonly used to enable front-end and back-end
interactions.
d. Server and Hosting
• Web Servers: Handle client requests and deliver the requested resources. Common web
servers include Apache, Nginx, and IIS.
• Hosting: Web applications need to be hosted on servers to be accessible online. Hosting
providers include AWS, Heroku, DigitalOcean, and others.
4. Full-Stack Development
A full-stack developer works on both the front-end and back-end of a web application. This
requires proficiency in multiple technologies, including front-end frameworks, server-side
languages, databases, and DevOps (deployment and server management).
a. MEAN/MERN Stack
b. LAMP Stack
c. JAMstack
• A modern architecture for building fast and secure websites using JavaScript, APIs, and
Markup.
• Git: A version control system that allows developers to track changes, collaborate, and
manage code across different versions.
b. Code Editors
• Visual Studio Code, Sublime Text, and Atom are popular editors with features like syntax
highlighting, debugging, and extensions.
c. Package Managers
• npm (Node Package Manager) and Yarn: Manage dependencies for JavaScript projects.
6 .Web Development Best Practices
• Ensure that web applications are accessible and functional on all devices and screen sizes.
b. Performance Optimization
• Techniques like lazy loading, code splitting, and image optimization to improve load times
and user experience.
c. Security
• Implementing security measures like HTTPS, input validation, and secure authentication to
protect against common web vulnerabilities like SQL injection and cross-site scripting (XSS).
d. Accessibility
• Ensuring web applications are usable by people with disabilities by adhering to standards
like WCAG (Web Content Accessibility Guidelines).
• Web applications that provide a native app-like experience with features like offline access
and push notifications.
• Applications that load a single HTML page and dynamically update content as the user
interacts with the app, without requiring full page reloads.
c. Serverless Architecture
• Building and running applications without managing servers. Cloud providers handle the
infrastructure, allowing developers to focus solely on code.
d. Artificial Intelligence and Machine Learning
• Integrating AI and ML into web applications for features like chatbots, personalization, and
predictive analytics.
Conclusion
Web development is a dynamic and evolving field that blends creativity with technical skills.
Whether you're interested in crafting beautiful user interfaces or developing robust server-
side logic, web development offers a broad range of opportunities.
TESTING:-
Testing is the process of exercising software with the intent of finding errors and
ultimately correcting them. The following testing techniques have been used to
make this project free of errors.
Content Review
The whole content of the project has been reviewed thoroughly to uncover
typographical errors, grammatical error and ambiguous sentences.
Navigation Errors
Different users were allowed to navigate through the project to uncover the
navigation errors. The views of the user regarding the navigation flexibility and
user friendliness were taken into account and implemented in the project.
Unit Testing
System testing
Regression Testing
Each time a new form is added to the project the whole project is tested
thoroughly to rectify any side effects. That might have occurred due to the
addition of the new form. Thus regression testing has been performed.
White-Box testing
White-box testing (also known as clear box testing, glass box testing, transparent
box testing and structural testing) tests internal structures or workings of a
program, as opposed to the functionality exposed to the end-user. In white-box
testing an internal perspective of the system, as well as programming skills, are
used to design test cases. The tester chooses inputs to exercise paths through the
code and determine the appropriate outputs.
While white-box testing can be applied at the unit, integration and system levels
of the software testing process, it is usually done at the unit level. It can test
paths within a unit, paths between units during integration, and between
subsystems during a system–level test. Though this method of test design can
uncover many errors or problems, it might not detect unimplemented parts of the
specification or missing requirements.
Black-box testing
Beta Testing
Beta testing comes after alpha testing and can be considered a form of external
user acceptance testing. Versions of the software, known as beta versions, are
released to a limited audience outside of the programming team. The software is
released to groups of people so that further testing can ensure the product hasfew
faults or bugs. Sometimes, beta versions are made available to the open public to
increase the feedback field to a maximal number of future users.
IMPLEMENTATION:-
CODE:
▪ HTML CODE
<!DOCTYPE html>
<html>
<head>
<title>Word Guessing Game</title>
<link rel="stylesheet"
href="style.css" />
<script src="./script.js"></script>
</head>
<body>
<div class="card">
<h1>Guess the word</h1>
<p>
<b>Hint:</b> A programming language
</p>
<p id="displayWord"></p>
<p>Guess one letter:
<input type="text"
maxlength="1"
id="letter-input">
</p>
<button onclick="guessLetter()">
Submit
</button>
</div>
</body>
</html>
▪ CSS CODE
h1 {
background-color: rgb(231, 231, 231);
color: green;
font-size: xx-large;
padding: 2%;
/* width: 70vh; */
}
REFERENCES
1. www.javatpoint.com/java
2. www.google.co.in
3. https://chatgpt.com/
4. https://www.w3schools.com/