Maharashtra State Board of Technical Education, Mumbai

CLIENT-SIDE SCRIPTING LANGUAGE

MICRO PROJECT
Topic – DEVELOP A WORD GUESSING
GAME
Submitted by
Harsh Manohar Yeram - 2001170279
Sahil Vishnu Shetye - 2001170282
Pooja Ganesh Narkar - 2001170286

Submitted At
Department of Computer Engineering
Government Polytechnic, Malvan
A/P-Kumbharmath, Tal-Malvan, Dist-Sindhudurg
416606
(Academic Year :-2022-2023)
 INTRODUCTION
The word guessing game is a task that which the player has to find all letters of
a random word in the given tries. The game will also give you hints to make your guess
easy.

My word guessing game is the same as I said above. You can also see it in the
preview image. If you want to see a demo of how this game works or how I created it
using HTML CSS & JavaScript, you can watch the given YouTube video.

WHAT IS A WEB-BASED
SYSTEM?
A web-based system is an application that is accessed via HTTP. The term web-
based is usually used to describe applications that run in a web browser. It can, though,
also be used to describe applications that have a very small component of the solution
loaded on the client’s PC. The host server for a web-based system could be a local
server, or it could be accessed via the internet.
 THE BENEFITS OF WEB-
BASED SYSTEMS
Web-based applications used to be very limited in functionality. However, advances
in technology, security, and internet speeds have greatly increased the potential
scope of web-based systems. Today, we have web-based business accounting
systems, web-based CRM systems, a web-based Microsoft Office, and more. Web-
based applications offer some significant advantages over native, client-based
software. Here are just some of the benefits of web-based apps for business.

GREATER AVAILABILITY OF
INFORMATION
Web-based systems make it easier to provide access to real-time information. The paper
reports that might take days to prepare and distribute can be replaced with online reports
and digital dashboards. That can improve the quality and the speed of decision-making,
right across an organization.
Web-based custom software development can provide businesses with significant cost
savings and productivity improvements. Now that internet access is almost universally
available and internet speeds have significantly improved, applications that previously
had to be client-based can now be deployed on the web.
Although this is the case in developed Western countries, it is not the case worldwide.
In some countries, internet access is unreliable. So, major deployment of web-based
applications may still not be possible. International organizations with overseas offices
may not yet be able to take full advantage of web-based solutions.
For domestic organizations, though, web-based systems have a promising future. From
web-based office applications, like content management systems and productivity
applications, to custom web-based software developed specifically for your
organization, the foundation of many future software solutions is likely to be web-
based.
 INFORMATION ABOUT
LANGUAGES
HTML
The HyperText Markup Language or HTML is the standard markup
language for documents designed to be displayed in a web browser. It can be assisted
by technologies such as Cascading Style Sheets (CSS) and scripting languages such
as JavaScript.
Web browsers receive HTML documents from a web server or from local
storage and render the documents into multimedia web pages. HTML describes the
structure of a web page semantically and originally included cues for the appearance of
the document.

JAVASCRIPT
JavaScript (/ˈdʒɑːvəskrɪpt/), often abbreviated as JS, is a programming
language that is one of the core technologies of the World Wide Web,
alongside HTML and CSS. As of 2022, 98% of websites use JavaScript on
the client side for webpage behavior, often incorporating third-party libraries. All
major web browsers have a dedicated JavaScript engine to execute the code on users'
devices.
JavaScript is a high-level, often just-in-time compiled language that conforms to
the ECMAScript standard. It has dynamic typing, prototype-based object-orientation,
and first-class functions. It is multi-paradigm, supporting event-driven, functional,
and imperative programming styles. It has application programming interfaces (APIs)
for working with text, dates, regular expressions, standard data structures, and
the Document Object Model (DOM).
The ECMAScript standard does not include any input/output (I/O), such
as networking, storage, or graphics facilities. In practice, the web browser or
other runtime system provides JavaScript APIs for I/O.
JavaScript engines were originally used only in web browsers, but are now core
components of some servers and a variety of applications. The most popular runtime
system for this usage is Node.js.
Although Java and JavaScript are similar in name, syntax, and
respective standard libraries, the two languages are distinct and differ greatly in design.

CSS
 Cascading Style Sheets (CSS) is a style sheet language used for describing
the presentation of a document written in a markup language such
as HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS
is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
CSS is designed to enable the separation of content and presentation,
including layout, colors, and fonts. This separation can improve content accessibility;
provide more flexibility and control in the specification of presentation characteristics;
enable multiple web pages to share formatting by specifying the relevant CSS in a
separate .css file, which reduces complexity and repetition in the structural content; and
enable the .css file to be cached to improve the page load speed between the pages that
share the file and its formatting.
Separation of formatting and content also makes it feasible to present the same
markup page in different styles for different rendering methods, such as on-screen, in
print, by voice (via speech-based browser or screen reader), and on Braille-based tactile
devices. CSS also has rules for alternate formatting if the content is accessed on
a mobile device.
The name cascading comes from the specified priority scheme to determine
which style rule applies if more than one rule matches a particular element. This
cascading priority scheme is predictable.
The CSS specifications are maintained by the World Wide Web
Consortium (W3C). Internet media type (MIME type) text/css is registered for use
with CSS by RFC 2318 (March 1998). The W3C operates a free CSS validation
service for CSS documents.
In addition to HTML, other markup languages support the use of CSS
including XHTML, plain XML, SVG, and XUL.
 SOURCE CODE
 Index.html
</body> <!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>SHP | Guess a Word Game</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
<h1>Guess the Word</h1>
<div class="content">
<input type="text" class="typing-input" maxlength="1">
<div class="inputs"></div>
<div class="details">
<p class="hint">Hint: <span></span></p>
<p class="guess-left">Remaining guesses: <span></span></p>
<p class="wrong-letter">Wrong letters: <span></span></p>
</div>
<button class="reset-btn">Reset Game</button>
</div>
</div>

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

</body>
</html>

 Styke.css
/* Import Google font - Poppins */
@import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
padding: 0 10px;
min-height: 100vh;
align-items: center;
justify-content: center;
background: #1BB295;
}
.wrapper{
width: 430px;
background: #fff;
border-radius: 10px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.wrapper h1{
font-size: 25px;
font-weight: 500;
padding: 20px 25px;
border-bottom: 1px solid #ccc;
}
.wrapper .content{
margin: 25px 25px 35px;
}
.content .inputs{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.inputs input{
height: 57px;
width: 56px;
 margin: 4px;
font-size: 24px;
font-weight: 500;
color: #1ba98c;
text-align: center;
border-radius: 5px;
background: none;
pointer-events: none;
text-transform: uppercase;
border: 1px solid #B5B5B5;
}
.typing-input {
opacity: 0;
z-index: -999;
position: absolute;
pointer-events: none;
}
.inputs input:first-child{
margin-left: 0px;
}
.content .details{
margin: 20px 0 25px;
}
.details p{
font-size: 19px;
margin-bottom: 10px;
}
.content .reset-btn{
width: 100%;
border: none;
cursor: pointer;
color: #fff;
 outline: none;
padding: 15px 0;
font-size: 17px;
border-radius: 5px;
background: #1BB295;
transition: all 0.3s ease;
}
.content .reset-btn:hover{
background: #18a589;
}

@media screen and (max-width: 460px) {

.wrapper {
width: 100%;
}
.wrapper h1{
font-size: 22px;
padding: 16px 20px;
}
.wrapper .content{
margin: 25px 20px 35px;
}
.inputs input{
height: 51px;
width: 50px;
margin: 3px;
font-size: 22px;
}
.details p{
font-size: 17px;
}
.content .reset-btn{
 padding: 14px 0;
font-size: 16px;
}
}

 Word.js
let wordList = [
{
word: "python",
hint: "programming language"
},
{
word: "guitar",
hint: "a musical instrument"
},
{
word: "aim",
hint: "a purpose or intention"
},
{
word: "venus",
hint: "planet of our solar system"
},
{
word: "gold",
hint: "a yellow precious metal"
},
{
word: "ebay",
hint: "online shopping site"
},
{
word: "golang",
hint: "programming language"
},
{
word: "coding",
hint: "related to programming"
},
{
 word: "matrix",
hint: "science fiction movie"
},
{
word: "bugs",
hint: "related to programming"
},
{
word: "avatar",
hint: "epic science fiction film"
},
{
word: "gif",
hint: "a file format for image"
},
{
word: "mental",
hint: "related to the mind"
},
{
word: "map",
hint: "diagram represent of an area"
},
{
word: "island",
hint: "land surrounded by water"
},
{
word: "hockey",
hint: "a famous outdoor game"
},
{
word: "chess",
hint: "related to a indoor game"
},
{
word: "viber",
hint: "a social media app"
},
{
word: "github",
hint: "code hosting platform"
},
{
word: "png",
hint: "a image file format"
},
{
word: "silver",
hint: "precious greyish-white metal"
},
{
word: "mobile",
hint: "an electronic device"
},
{
word: "gpu",
hint: "computer component"
},
{
word: "java",
hint: "programming language"
},
{
word: "google",
hint: "famous search engine"
},
{
word: "venice",
hint: "famous city of waters"
},
{
word: "excel",
hint: "microsoft product for windows"
},
{
word: "mysql",
hint: "a relational database system"
},
{
word: "nepal",
hint: "developing country name"
},
{
word: "flute",
hint: "a musical instrument"
},
{
word: "crypto",
hint: "related to cryptocurrency"
},
{
word: "tesla",
hint: "unit of magnetic flux density"
},
{
word: "mars",
hint: "planet of our solar system"
},
{
word: "proxy",
hint: "related to server application"
},
{
word: "email",
hint: "related to exchanging message"
},
{
word: "html",
hint: "markup language for the web"
},
{
word: "air",
hint: "related to a gas"
},
{
word: "idea",
hint: "a thought or suggestion"
},
{
word: "server",
hint: "related to computer or system"
},
{
word: "svg",
hint: "a vector image format"
},
{
word: "jpeg",
 hint: "a image file format"
},
{
word: "search",
hint: "act to find something"
},
{
word: "key",
hint: "small piece of metal"
},
{
word: "egypt",
hint: "a country name"
},
{
word: "joker",
hint: "psychological thriller film"
},
{
word: "dubai",
hint: "developed country name"
},
{
word: "photo",
hint: "representation of person or scene"
},
{
word: "nile",
hint: "largest river in the world"
},
{
word: "rain",
hint: "related to a water"
},
]

 Script.js
const inputs = document.querySelector(".inputs"),
hintTag = document.querySelector(".hint span"),
guessLeft = document.querySelector(".guess-left span"),
wrongLetter = document.querySelector(".wrong-letter span"),
resetBtn = document.querySelector(".reset-btn"),
typingInput = document.querySelector(".typing-input");

let word, maxGuesses, incorrectLetters = [], correctLetters = [];

function randomWord() {
let ranItem = wordList[Math.floor(Math.random() * wordList.length)];
word = ranItem.word;
maxGuesses = word.length >= 5 ? 8 : 6;
correctLetters = []; incorrectLetters = [];
hintTag.innerText = ranItem.hint;
guessLeft.innerText = maxGuesses;
wrongLetter.innerText = incorrectLetters;

let html = "";

for (let i = 0; i < word.length; i++) {
html += `<input type="text" disabled>`;
inputs.innerHTML = html;
}
}
randomWord();

function initGame(e) {
let key = e.target.value.toLowerCase();
if(key.match(/^[A-Za-z]+$/) && !incorrectLetters.includes(` ${key}`) &&
!correctLetters.includes(key)) {
if(word.includes(key)) {
for (let i = 0; i < word.length; i++) {
if(word[i] == key) {
correctLetters += key;
inputs.querySelectorAll("input")[i].value = key;
}
}
} else {
maxGuesses--;
incorrectLetters.push(` ${key}`);
}
guessLeft.innerText = maxGuesses;
wrongLetter.innerText = incorrectLetters;
}
typingInput.value = "";
 setTimeout(() => {
if(correctLetters.length === word.length) {
alert(`Congrats! You found the word ${word.toUpperCase()}`);
return randomWord();
} else if(maxGuesses < 1) {
alert("Game over! You don't have remaining guesses");
for(let i = 0; i < word.length; i++) {
inputs.querySelectorAll("input")[i].value = word[i];
}
}
}, 100);
}

resetBtn.addEventListener("click", randomWord);
typingInput.addEventListener("input", initGame);
inputs.addEventListener("click", () => typingInput.focus());
document.addEventListener("keydown", () => typingInput.focus());
 OUTPUT
 Program start :

 After entering correct letters :

 After entering wrong letters :
 LITERATURE REVIEW
To create this Word Guessing Game in JavaScript. First, you
need to create four Files: HTML, CSS & JavaScript Files. After
creating these files just paste the given codes into your file. You
can also download the source code files of this Word Guessing
from the below download button.

First, create an HTML file with the name index.html and paste
the given codes into your HTML file. Remember, you’ve to
create a file with a .html extension.

Second, create a CSS file with the name style.css and paste the
given codes into your CSS file. Remember, you’ve to create a
file with a .css extension.
Third, create a JavaScript file with the name words.js and paste
the given codes into your JavaScript file. Remember, you’ve to
create a file with a .js extension and it should be inside the js
folder. We’ll store random word details as an object in this file.
Last, create a JavaScript file with the name script.js and paste
the given codes into your JavaScript file. Remember, you’ve
to create a file with a .js extension and it should be inside the
js folder.