CLIENT SIDE SCRIPTING LAB
Name – Mehak Sharma
Id- 1913986014
Lab Q1. Create HTML document using given code. Write jQuery code to collect text enclosed within
all div tags (3 div tags with text and one empty div tag) and then set the collected text data into
empty div tag having id = "demo" without using any variable. The above said action should be
performed when user clicked Button on the document. After setting text to empty div tag change
its style just like other div tags and in addition to that add color which should be red.
<div style="border:1px solid; width:20%">This is first div tag </div>
<div style="border:1px solid; width:20%">This is second div tag </div>
<div style="border:1px solid; width:20%">This is third div tag </div>
<div id="demo"></div>
<button id="action">Click here to Add One More Div Tag</button>
Solution
<html>
<head>
<script src="C:\Users\MEHAK\Downloads\-[Link]"></script>
<script>
$(document).ready(function () {
$("#action").click(function () {
$("#demo")
.text($("div").text())
.css({ color: "red", border: "1px solid black",width: "20%" });
});
});
</script>
</head>
<body>
<div style="border: 1px solid; width: 20%">This is first div tag</div>
<div style="border: 1px solid; width: 20%">This is second div tag</div>
<div style="border: 1px solid; width: 20%">This is third div tag</div>
<div id="demo"></div>
<button id="action">Click here to add one more Div tag</button>
</body>
</html>
Lab Q2. Create HTML document using given code. Create an empty text-area along with a button.
The user can click on the button after writing something into text-area. When the event fires it
will add dynamically created div tag into body of document. The text written in text-area should
appear into div tag. The user is supposed to ensure that user clicks after writing something into
text-area otherwise show the error message.
<textarea id="newText"></textarea>
<button id="action">Click to Add Div Tag</button>
Solution
<html>
<head>
<script src="C:\Users\MEHAK\Downloads\-[Link]"></script>
</head>
<body>
<textarea></textarea>
<DIV></DIV>
<button>click to add div tag</button>
<script>
$(function() {
$("button").click(function() {
var x=$("textarea").val();
if(x=="")
{
alert("Put text in text area");
else
$("div").text(x);
});
});
</script>
</body>
</html>
Lab Q3. Create HTML document using given code. Find all those span tags using jQuery that are
enclosed within div tag and change their text as well as set their text color to red. Finally enclose
all those span tags into div tag programmatically which are not already enclosed into div tag and
are direct child of body element and also set their border to green.
<div><span>first paragraph</span></div>
<span>second paragraph</span>
<div><span>third paragraph</span></div>
<button id='action'>Click to Perform Action</button>
Solution
<html>
<head>
<style>
.main * {
display: block;
border: 2px solid lightgrey;
padding: 5px;
margin: 15px;
.green {
border: 2px dashed green;
</style>
<script src="C:\Users\MEHAK\Downloads\-[Link]"></script>
<script>
$(document).ready(function () {
$("#btn").click(function () {
$("div").find("span).text("Hello World").css({ color: "red" });
$("body")
.children("span")
.wrap("<dic></div>")
.css({ .css({ border: "2px dashed green" });
});
});
</script>
</head>
<body class="main">
<div><span>first para</span></div>
<span>second para</span>
<div><span>third para</span></div>
<button id="btn">Click to perform action</button>
</body>
</html>
Lab Q 4. Create Html document using given code, create three empty hyperlinks with no hypertext and then set their href property through
jQuery iteration on wrapper text. The above action is valid when DOM is ready
Solution
<html>
<head>
<script src="C:\Users\MEHAK\Downloads\-[Link]"></script>
</head>
<body>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<script>
$(document).ready(function()
$('a').each(function (index,value)
var pagenum=parseInt(index+1);
var link="page"+pagenum+".html";
$(this).text("page"+pagenum).attr("href".link);
}};
}};
</script>
</body>
</html>
Lab Q 5: Create html document as mentioned below and find selected item from both radio groups on click event .
Solution
<html>
<head>
<script src="C:\Users\MEHAK\Downloads\-[Link]"></script>
</head>
<body>
<form id='form1'>
<div style-"bordere:1px solid blue">
Teacher<input type='radio' name-'group-1' value-'Teacher'/>
Business<input type='radio' name-'group-1' value-'Business'/>
Sports<input type='radio' name-'group-1' value-'Sports'/>
</div>
<div style-"border:1px solid blue">
Start Sports<input type='radio' name='group-2' value='Star Sports'/>
Discovery<input type='radio' name='group-2' value='Discovery'/>
National Geographic<input type='radio' name='group-2' value='National Geographic'/>
</div>
<button id='action'>Find selected</button>
</form>
<script> (function ($)
$("action").click(function()
alert($("input (name-'group-1':checked").val());
alert($("input (name-'group-2':checked").val());
}};
}} (jQuery);
</script>
</script>
</body>
</html>
Lab Q [Link] HTML document as mentioned below and then find even li elements from each ordered list and wrap them into <h2> .finally
apply css on these elements. Apply same technique to odd li but this time css should be different .perform desired operation when the user click
the button. ………………………………………….and disable itself.
Solution
<html>
<head>performing the action</head>
<body>
<ol style="border: 1px solid black; width:25%">
<li>Apples <li>Oranges <li>Banana <li>Peach
</ol>
<ol style="border: 1px solid black; width:25%">
<li>Mango <li>Guava <li>Lemon <li>kiwi
</ol>
<button id='action'> click to perform action</button>
<input type="reset" id='action2' disabled='disabled' value="Restore to default">
<script src="C:\Users\MEHAK\Downloads\-[Link]"></script>
<script>
$(document).ready(function()
var default1=$("ol:first").html();
var default2=$("ol:last").html();
$("#action").click(function()
$("#action2").prop("disabled",false);
$("#action").prop("disabled",true);
$("li").filter(":even").wrap("<h2>").css("color","red");
$("li").filter(":odd").css("color","green");
}};
$("action2").click(function()
$("#action2").prop("disabled",true);
$("#action").prop("disabled",false);
$("ol:first").html(default1);
$("ol:last").html(default2);
}};
</script>
</body>
</html>
Lab Q 7: Create HTML document as mentioned below and generate the table that shows the total number of div tags ,total number of hidden
div tags .use native JavaScript array and looping wherever [Link] desired action should be performed when user click the button
Solution
<html>
<head>
<title> jQuery Traversing children</title>
<script src="C:\Users\MEHAK\Downloads\-[Link]"></script>
<script>
$(document).ready(function()
$("button").click(function()
var x=$("div").length;
var y=$("div:hidden").length;
var z=$("div:visible").length;
$("table").removeAttr("style");
$("#row1 td:first").text("Total");
$("#row1 td:last").text(x);
$("#row2 td:first").text("visible");
$("#row2 td:last").text(y);
$("#row3 td:first").text("hidden");
$("#row3 td:last").text(z);
});
});
</script>
</head>
<body>
<div id="div1" style="display: none; border: 1px solid black">
<div id="inner_div">This is nested div tag, My parent div is hidden</div>
</div>
<div id="div2" style="border: 1px solid black">I am second div</div>
<div id="div3" style="border: 1px solid black">
I am third div and i am parent
<div id="div4" style="display: none; border: 1px solid black">
I am nested in second div
</div>
</div>
<table
border="1"
style="display: none; background-color: #917213"
id="summary"
>
<tr id="row1">
<td></td>
<td></td>
</tr>
<tr id="row2">
<td></td>
<td></td>
</tr>
<tr id="row3">
<td></td>
<td></td>
</tr>
</table>
<button id="action">Summary of Document</button>
</body>
</html>
Lab Q 8. Create a HTML document as mentioned below and write jQuery to implement Delegation model if the user click on the list of item
then show an alert window that the user clicked the list item if user click the item than show the alert window indicating that user just click the
along the value of href attribute.
Solution
<html>
<head>
<script src="C:\Users\MEHAK\Downloads\-[Link]"></script>
</head>
<body>
<ul>
<li> id=''L1'>This is first item. <a href='[Link] Go to yahoo</a>
<li> id=''L2'>This is second item. <a href='[Link] Go to flipkart</a>
<li> id=''L3'>This is third item. <a href='[Link] Go to amazon</a>
</ul>
<script>
(function ($)
$("li").each(function(i)
$(this).click(function (event)
alert("user just clicked on the list item"+(i+1));
}};
}};
}}(jQuery);</script>
</body>
</html>
Lab Q9 : create HTML document as mentioned below and switch css class applied div tag whenever user on the button.
Solution:
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> Experiment 5</title>
<style>
.oldclass {
background-color: burlywood;
border: 4px dotted red:
.newClass {
background-color: cadetblue;
border: 4px dashed chartreuse;
padding: 20px;
}
</style>
<script src="C:\Users\MEHAK\Downloads\-[Link]"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("#myDiv").toggleClass("newClass");
});
});
</script>
</head>
<body>
<div id="myDiv" class="oldClass">
life is full of happiness when we accept the things happens to us .
</div>
<button>Click here to switch class</button>
</body>
</html>
Lab Q 10Make a accordin in jquery for sports news section .it will open the news when click on the section and display the complete news.
Solution:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Accordion - Default functionality</title>
<link rel="stylesheet" href="//[Link]/ui/1.12.1/themes/base/[Link]">
<link rel="stylesheet" href="/resources/demos/[Link]">
<script src="[Link]
<script src="[Link]
<script>
$( function() {
$( "#accordion" ).accordion();
} );
</script>
</head>
<body>
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>
IPL 2021: Suspended tournament to be finished in United Arab Emirates<br>
The Board of Control for Cricket in India (BCCI) on Saturday announced to complete the remaining matches
of VIVO Indian Premier League 2021 season in the United Arab Emirates (U.A.E) considering the monsoon season in India in the months of
September-October this year,' said a statement from the BCCI
</p>
</div>
<h3>Section 2</h3>
<div>
<p>
Australia are yet to find a wicketkeeper-batsman for T20 World Cup later this year, said former skipper Ricky Ponting
who also added that his personal preference for the role is not among 23 players picked for white-ball series in the West Indies.
"The keeper-batsman is probably the slot they'd be losing the most sleep over right now," Ponting was quoted as saying by [Link] on
Saturday.
"They've still got some questions to answer as far as what their overall squad looks like and
I think the biggest one is 'Who is going to be standing behind the stumps with the gloves on?',"
added Ponting, who himself has been part of the Australia's coaching staff for T20 cricket and was the assistant in 2019 World Cup.
</p>
</div>
<h3>Section 3</h3>
<div>
<p>
From being labelled as “bad champions” at one point to crossing the top-four finish line in front of 10,000
returning fans at Anfield, the 2020/21 Premier League season has been eventful for Liverpool to say the least.
To finish third with a limping, burnt-out squad is a testament to Jurgen Klopp’s mental and tactical fortitude.
“If someone would have told me weeks ago – five, six, eight, ten weeks ago – that we can finish the season in third,
that was absolutely out of reach and felt impossible,” the 53-year-old German said. “Even the good things when they happened this year
didn’t feel too good because too many bad things happened. The injuries were a subject that followed us through the whole year and that was
really tough to take.”
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3>Section 4</h3>
<div>
<p>
Former captain Ricky Ponting feels Australia lacks a ‘finisher’ in the mould of former India
skipper Mahendra Singh Dhoni or all-rounder Hardik Pandya despite the abundance
of experienced players ahead of the upcoming T20 World Cup.
Ponting also feels that unearthing a reliable middle or lower-order batsman who can keep wickets could kill two birds with one stone.
</p>
</div>
</div>
</body>
</html>
Lab Q 11: write a jQuery code to design tic tac toe game and it should be a two player game .which should have a restart or reset button in it.
Solution:
<html>
<head>
<title>Tic Tak Toe</title>
</head>
<body style="text-align: center;">
<h1 id = "header">Player <label id = 'Player_number'>0</label> Turn</h1>
<br> <br> <br> <br>
<table align="center">
<tr id = "row1">
<td><button id = "11" onclick="clicked('11')" style="height: 10vh; width: 5vw;"></button></td>
<td><button id = "12" onclick="clicked('12')" style="height: 10vh; width: 5vw;"></button></td>
<td><button id = "13" onclick="clicked('13')" style="height: 10vh; width: 5vw;"></button></td>
</tr>
<tr id = "row2">
<td><button id = "21" onclick="clicked('21')" style="height: 10vh; width: 5vw;"></button></td>
<td><button id = "22" onclick="clicked('22')" style="height: 10vh; width: 5vw;"></button></td>
<td><button id = "23" onclick="clicked('23')" style="height: 10vh; width: 5vw;"></button></td>
</tr>
<tr id = "row3">
<td><button id = "31" onclick="clicked('31')" style="height: 10vh; width: 5vw;"></button></td>
<td><button id = "32" onclick="clicked('32')" style="height: 10vh; width: 5vw;"></button></td>
<td><button id = "33" onclick="clicked('33')" style="height: 10vh; width: 5vw;"></button></td>
</tr>
</table>
<br> <br> <br>
<h2 id = "Error" style="color:red"></h2>
<br>
<button onclick="reset()">Reset/Restart</button>
<script>
function clicked(id) {
[Link]("Error").innerHTML = ""
var current_player = [Link]("Player_number").innerHTML
if([Link](id).innerHTML){
[Link]("Error").innerHTML = "Wrong Move"
return
else {
[Link](id).innerHTML= current_player
var win = checkwin()
if(win == "1") {
[Link]("header").innerHTML = "Palyer " + current_player + " Won"
return
else if (win == "2") {
[Link]("header").innerHTML = "Game Draw"
return
if(current_player == "0") {
[Link]("Player_number").innerHTML = "X"
else {
[Link]("Player_number").innerHTML = "0"
function checkwin() {
var _11 = [Link]("11").innerHTML
var _12 = [Link]("12").innerHTML
var _13 = [Link]("13").innerHTML
var _21 = [Link]("21").innerHTML
var _22 = [Link]("22").innerHTML
var _23 = [Link]("23").innerHTML
var _31 = [Link]("31").innerHTML
var _32 = [Link]("32").innerHTML
var _33 = [Link]("33").innerHTML
if((_11 && _11 == _12 && _12 == _13) || (_21 && _21 == _22 && _22 == _23) || (_31 && _31 == _32 && _32 == _33)
|| (_11 && _11 == _21 && _21 == _31) || (_12 && _12 == _22 && _22 == _32) || (_13 && _13 == _23 && _21 == _33)
|| (_11 && _11 == _22 && _22 == _33) || (_31 && _31 == _22 && _22 == _13)
){
return "1"
else if(_11 && _12 && _13 && _21 && _22 && _23 && _31 && _32 && _33 ) {
return "2"
function reset() {
[Link]("header").innerHTML="Player <label id = 'Player_number'>0</label> Turn"
[Link]("11").innerHTML = null
[Link]("12").innerHTML = null
[Link]("13").innerHTML = null
[Link]("21").innerHTML = null
[Link]("22").innerHTML = null
[Link]("23").innerHTML = null
[Link]("31").innerHTML = null
[Link]("32").innerHTML = null
[Link]("33").innerHTML = null
[Link]("Error").innerHTML = ""
</script>
</body>
</html>
Lab Q 12: : write a jQuery code to implement delegation model on the web [Link] you opened a web pag with multiple div and p
elements. the challenge is to write a single event handler that is capable of identifying which element is just clicked and prompt appropriate
message.
Solution :
<html lang="en">
<head>
<script src="[Link]
<script src="[Link]
<script>
$( function() {
$( "#accordion" ).accordion();
} );
</script>
</head>
<body>
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>
find better world for dogs
</p>
</div>
<h3>Section 2</h3>
<div>
<p>
Animals are far better then us
</p>
</div>
<h3>Section 3</h3>
<div>
<p>
Lets get better world for them
</p>
</div>
<h3>Section 4</h3>
<div>
<p>
they deserve peace
</p>
<p>
they deserve to be loved
</p>
</div>
</div>
</body>
</html>
Lab [Link] a Jquery code to and generate a list and choose from them .also include a button in it .
Solution :
<html>
<head>
<html>
<head>
<script src="C:\Users\MEHAK\Downloads\-[Link]"></script>
</head>
<body>
<h3> welcome </h3>
<h4>hey ,choose any of the number</h4>
<input type = "checkbox">rice
<input type = "checkbox">wheat
<input type = "checkbox">pulses
<input type = "checkbox">oil
<input type = "checkbox">sugar
<input type = "checkbox">gram floor
<p> thanks for choosing. </p>
<button> Click me </button>
<script>
$(document).ready(function(){
$("button").click(function() {
$("input").odd().attr("checked", true);
});
});
</script>
</body>
</html>
Lab 14:write a Code to generate multiple div tags included in the body tag displaying the paragraph element . and include a button at the end
saying “click me ” and display the same.
Solution:
<html>
<head>
<style>
.main *{
border: 2px solid black;
padding:10px;
margin: 15px;
</style><script src="C:\Users\MEHAK\Downloads\-[Link]"></script>
<script>
function fun (){
$(document).ready(function(){
$("p").parentsUntil("#div1", "div, ul").css({ "border": "3px dashed blue"});
});
</script>
</head>
<body class = "main"> body
<div id = "div1"> div1
<ul> ul<div id = "div2"> div2
<h4> Heading h4
<div id ="div3"> div3
<p> Paragraph element </p>
</div>
</ul>
</div>
<button onclick ="fun()"> click me </button>
</body>
</html>
Lab 15: write an html code including a unordered list of items and implement using a jquery function ,include a button at the end .
Solution :
<html>
<head>
<script src="C:\Users\MEHAK\Downloads\-[Link]"></script>
</head>
<body>
<h3> welcome </h3>
<h4> see the following list </h4>
<ul>
<li> Munch </li>
<li> Kit Kat </li>
<li> Daiiry milk </li>
<li> Milky bar </li>
<li> Dark chocolate </li>
<li> choco pie </li>
</ul>
<p> the list </p>
<button> Click me </button>
<script>
$(document).ready(function(){
$("button").click(function() {
$("li").odd().css("background-color", "yellow");
});
});
</script>
</body>
</html>
Lab 16: Zoom-In and Zoom-Out features are very common in many of the application software’s. In this task, the challenge is to implement the same zoom-
in and zoom-out feature in jQuery. You are supposed to display an image with a DIV tag along with two buttons namely “Zoom In” and “Zoom Out”. The
default dimensions of the image should be 150 X 150 pixels. Whenever the user clicks on “zoom in” button, the image should get enlarged side. Implement its
opposite for “zoom out” button. Always keep track of the current dimensions of the image and enlarge and reduce image by 20 pixels from the current
dimensions.
Solution:
<html>
<head>
<title>ZOOM Image</title>
<script src="C:\Users\MEHAK\Downloads\-[Link]"></script>
</head>
<body>
<center>
<h3>ZOOM BUTTON</h3>
<button id="in">+</button>
<button id="out">-</button>
<br><br>
<img src="F:\my photos\[Link]" width="150px" height="150px">
</center>
<script>
$(document).ready(function(){
$("#in").click(function(){
$("img").width($("img").width()+100);
$("img").height($("img").height()+100);
});
$("#out").click(function(){
$("img").width($("img").width()-100);
$("img").height($("img").height()-100);
});
});
</script>
</body>
</html>
Lab Q 17: Design and Implement an Image Slider along with two buttons namely “Prev” and “Next”. All supporting images should be either in .jpeg/.jpg
or .png format and must be kept in a folder. By default, first image should be displayed on the image slider when the webpage first gets opened in a web
browser. Thereafter, the next image should appear on clicking the next button and previous image should display on clicking the prev button. Imagine you
are on the first image, now clicking on the previous b
Imagine you are on the first image, now clicking on the previous button should prompt an alert message that “You are on the first image, cannot go
previous”. Likewise, Imagine you are on the last image, now clicking on the next button should prompt an alert message “You are on the last image, cannot
go next”.
<!DOCTYPE html>
<html>
<head>
<title>prev-next</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-compatible" content="ie=edge">
<link rel="stylesheet" href="[Link] integrity="sha384-
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="[Link]
<style>
.tabcontent { display: none;}
.tabcontent .active{display: block; display: show ;}
</style>
</head>
<body>
<div class="container text-center">
<h1>next and previous</h1>
<button class="float-left btn bg-primary" onclick="prev()">Previous </button>
<button class="btn btn-primary float-right" onclick="next()">Next</button>
<nav class="multiTabs">
<a class="btn btn-danger mr-2" href="javascript:void(0)" data-trigger='content1'>Tab1</a>
<a class="btn btn-danger mr-2" href="javascript:void(0)" data-trigger='content2'>Tab2</a>
<a class="btn btn-danger mr-2" href="javascript:void(0)" data-trigger='content3'>Tab3</a>
<a class="btn btn-danger mr-2" href="javascript:void(0)" data-trigger='content4'>Tab4</a>
<a class="btn btn-danger mr-2" href="javascript:void(0)" data-trigger='content5'>Tab5</a>
</nav>
<!-- content -->
<div class="tabcontent active bg-light" id="content1">
<h1>Tab1</h1>
<p>This is some text about tab1</p>
</div>
<div class="tabcontent bg-light" id="content2">
<h1>Tab2</h1>
<p>This is some text about tab2</p>
</div>
<div class="tabcontent bg-light" id="content3">
<h1>Tab3</h1>
<p>This is some text about tab3</p>
</div>
<div class="tabcontent bg-light" id="content4">
<h1>Tab4</h1>
<p>This is some text about tab4</p>
</div>
<div class="tabcontent bg-light" id="content5">
<h1>Tab5</h1>
<p>This is some text about tab5</p>
</div>
</div>
<script>
var currentTab = 1;
$("#contetn1").show();
$(document).on('click', '[Link]>a',
function(){
var TabId = $(this).attr('data-trigger');
$('div#'+TabId+' ').show();
[Link]("Current Tab: " + TabId);
currentTab = parseInt([Link]("content", ""));
$('.tabcontent:not(#'+TabId+')').hide()
});
function next(){
if(currentTab < 5){
$(".tabcontent").hide();
currentTab++;
$("#content"+(currentTab)).show();
function prev(){
if(currentTab > 1){
$(".tabcontent").hide();
currentTab--;
$("#content" + (currentTab)).show();
</script>
</body>
</html>
Lab Q 18: create a minesweeper game using html of size %5*5 and make it responsize for one player.
Solution
[Link]
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Minesweeper</title>
<link rel="stylesheet" href="[Link]"></link>
<script src="[Link]" charset="utf-8"></script>
<link href="[Link] rel="stylesheet">
</head>
<body>
<div class="container">
<div class="grid"></div>
<div>Flags left: <span id='flags-left'></span></div>
<div id="result"></div>
</div>
</body>
</html>
[Link]
.container {
width: 500px;
align-content: center;
.grid {
height: 200px;
width: 200px;
display: flex;
flex-wrap: wrap;
background-color: #dcd6bc;
margin-left: 50px;
margin-top: 20px;
border: 10px solid #dcd6bc;
margin-bottom: 10px;
div {
font-size: 25px;
text-align: center;
font-family: 'Roboto Mono', monospace;
.valid {
height: 40px;
width: 40px;
border: 5px solid;
border-color: #f5f3eb #bab7a9 #bab7a9 #fff9db;
box-sizing: border-box;
.checked {
height: 40px;
width: 40px;
border: 2px solid;
background-color: #cecab7;
border-color: #9c998d;
box-sizing: border-box;
.bomb {
height: 40px;
width: 40px;
border: 5px solid;
border-color: #f5f3eb #bab7a9 #bab7a9 #fff9db;
box-sizing: border-box;
}
.one {
color: #e76346;
.two {
color: #4199d3;
.three {
color: #57da59;
.four{
color: #bb41d3;
#result {
margin-top: 5px;
color: #e76346;
}
[Link]
[Link]('DOMContentLoaded', () => {
const grid = [Link]('.grid')
const flagsLeft = [Link]('#flags-left')
const result = [Link]('#result')
let width = 5
let bombAmount = 5
let flags = 0
let squares = []
let isGameOver = false
function createBoard() {
[Link] = bombAmount
//get shuffled game array with random bombs
const bombsArray = Array(bombAmount).fill('bomb')
const emptyArray = Array(width*width - bombAmount).fill('valid')
const gameArray = [Link](bombsArray)
const shuffledArray = [Link](() => [Link]() -0.5)
for(let i = 0; i < width*width; i++) {
const square = [Link]('div')
[Link]('id', i)
[Link](shuffledArray[i])
[Link](square)
[Link](square)
//normal click
[Link]('click', function(e) {
click(square)
})
//cntrl and left click
[Link] = function(e) {
[Link]()
addFlag(square)
}
//add numbers
for (let i = 0; i < [Link]; i++) {
let total = 0
const isLeftEdge = (i % width === 0)
const isRightEdge = (i % width === width -1)
if (squares[i].[Link]('valid')) {
if (i > 1 && !isLeftEdge && squares[i -1].[Link]('bomb')) total ++
if (i > 5 && !isRightEdge && squares[i +1 -width].[Link]('bomb')) total ++
if (i > 6 && squares[i -width].[Link]('bomb')) total ++
if (i > 7 && !isLeftEdge && squares[i -1 -width].[Link]('bomb')) total ++
if (i < 24 && !isRightEdge && squares[i +1].[Link]('bomb')) total ++
if (i < 21 && !isLeftEdge && squares[i -1 +width].[Link]('bomb')) total ++
if (i < 19 && !isRightEdge && squares[i +1 +width].[Link]('bomb')) total ++
if (i < 20 && squares[i +width].[Link]('bomb')) total ++
squares[i].setAttribute('data', total)
createBoard()
//add Flag with right click
function addFlag(square) {
if (isGameOver) return
if ( && (flags < bombAmount)) {
if () {
[Link]('flag')
[Link] = ' 🚩'
flags ++
[Link] = bombAmount- flags
checkForWin()
} else {
[Link]('flag')
[Link] = ''
flags --
[Link] = bombAmount- flags
}
//click on square actions
function click(square) {
let currentId = [Link]
if (isGameOver) return
if ([Link]('checked') || [Link]('flag')) return
if ([Link]('bomb')) {
gameOver(square)
} else {
let total = [Link]('data')
if (total !=0) {
[Link]('checked')
if (total == 1) [Link]('one')
if (total == 2) [Link]('two')
if (total == 3) [Link]('three')
if (total == 4) [Link]('four')
[Link] = total
return
checkSquare(square, currentId)
}
[Link]('checked')
//check neighboring squares once square is clicked
function checkSquare(square, currentId) {
const isLeftEdge = (currentId % width === 0)
const isRightEdge = (currentId % width === width -1)
setTimeout(() => {
if (currentId > 1 && !isLeftEdge) {
const newId = squares[parseInt(currentId) -1].id
//const newId = parseInt(currentId) - 1 ....refactor
const newSquare = [Link](newId)
click(newSquare)
if (currentId > 5 && !isRightEdge) {
const newId = squares[parseInt(currentId) +1 -width].id
//const newId = parseInt(currentId) +1 -width ....refactor
const newSquare = [Link](newId)
click(newSquare)
if (currentId > 6) {
const newId = squares[parseInt(currentId -width)].id
//const newId = parseInt(currentId) -width ....refactor
const newSquare = [Link](newId)
click(newSquare)
if (currentId > 7 && !isLeftEdge) {
const newId = squares[parseInt(currentId) -1 -width].id
//const newId = parseInt(currentId) -1 -width ....refactor
const newSquare = [Link](newId)
click(newSquare)
if (currentId < 24 && !isRightEdge) {
const newId = squares[parseInt(currentId) +1].id
//const newId = parseInt(currentId) +1 ....refactor
const newSquare = [Link](newId)
click(newSquare)
}
if (currentId < 21 && !isLeftEdge) {
const newId = squares[parseInt(currentId) -1 +width].id
//const newId = parseInt(currentId) -1 +width ....refactor
const newSquare = [Link](newId)
click(newSquare)
if (currentId < 19 && !isRightEdge) {
const newId = squares[parseInt(currentId) +1 +width].id
//const newId = parseInt(currentId) +1 +width ....refactor
const newSquare = [Link](newId)
click(newSquare)
if (currentId < 20) {
const newId = squares[parseInt(currentId) +width].id
//const newId = parseInt(currentId) +width ....refactor
const newSquare = [Link](newId)
click(newSquare)
}, 10)
}
//game over
function gameOver(square) {
[Link] = 'BOOM! Game Over!'
isGameOver = true
//show ALL the bombs
[Link](square => {
if ([Link]('bomb')) {
[Link] = '💣'
[Link]('bomb')
[Link]('checked')
})
//check for win
function checkForWin() {
///simplified win argument
let matches = 0
for (let i = 0; i < [Link]; i++) {
if (squares[i].[Link]('flag') && squares[i].[Link]('bomb')) {
matches ++
if (matches === bombAmount) {
[Link] = 'YOU WIN!'
isGameOver = true
})