Description
CSE3002
Lab Assignment 5
ISHAAN OHRI
18BCE0265
Question:
Write a program to demonstrate the concept of JQuery.
i. Create three buttons with labels red, green, blue, when the mouse is moved over it, the background color has to be changed respectively.
ii. Create a HTML page holding a list of items and an [Extract Text] button. Implement the extractText function which will be called when the button’s onClick event is fired.
iii. Create a HTML page that holds a list of towns, a search box and a [Search] button. Implement the search function to bold the items from the list which include the text from the search box. iv. Disable/enable the form submit button. Disable the submit button until the visitor has clicked a check box.
v. Distinguish between left and right mouse click.
vi. Remove style added with .css() function.
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>Lab Assignment 18BCE0265</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
<link rel=”stylesheet” type=”text/css”
href=”https://stackpath.bootstrapcdn.com/ bootstrap/4.5.2/css/bootstrap.min.css”> <script src=”https://code.jquery.com/jquery-3.5.1.js” integrity=”sha256-
QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=” crossorigin=”anonymous”></script>
</head>
<body>
<div class=”container-button”>
<button id=”red-button”>RED</button>
<button id=”green-button”>GREEN</button>
<button id=”blue-button”>BLUE</button>
</div>
<div class=”container-extract-text”>
<p id=”extract”>This text will be extracted in the text field!</p>
<br>
<button id=”extract-text”>Extract Text</button>
<br>
<p id=”text”>Click the button to extract text from list</p> </div>
<div class=”container-search”>
<ul id=”cities”>
<li>Delhi</li>
<li>Mumbai</li>
<li>Chennai</li>
<li>Bangalore</li>
<li>Hyderabad</li>
<li>Kolkata</li>
</ul>
<br>
<input type=”text” id=”search-field” placeholder=”Search” required>
<button id=”search-button”>Search</button>
<br>
</div>
<div class=”container-submit”>
<input type=”checkbox” id=”check”>
<button id=”submit-button”>Submit</button>
</div>
<div class=”container-mouse”>
<p>Use this area to detect mouse click</p>
</div>
<div class=”container-css”>
<p id=”css-text”>I am ISHAAN OHRI. My Reg. No. 18BCE0265<p> <div class=”but”>
<button id=”add-css” >Add</button>
<button id=”remove-css” >Remove</button>
</div>
</div>
</body>
<script src=”app.js”></script>
</html>
style.css
#red-button{
background-color: white; color: red; font-size: x-large; padding-right: 30px; padding-left: 30px; padding-top: 10px; padding-bottom: 10px; border-style: solid; border-width: 2px; border-color: black; border-radius: 5px;
} #green-button{ background-color: white;
color: green; font-size: x-large; padding-right: 30px; padding-left: 30px; padding-top: 10px; padding-bottom: 10px; border-style: solid; border-width: 2px; border-color: black; border-radius: 5px; } #blue-button{ background-color: white; color: blue; font-size: x-large; padding-right: 30px; padding-left: 30px; padding-top: 10px; padding-bottom: 10px; border-style: solid; border-width: 2px; border-color: black; border-radius: 5px; } #extract-text{ background-color: white; color: deepskyblue; font-size: x-large; padding-right: 30px; padding-left: 30px; padding-top: 10px; padding-bottom: 10px; border-style: solid; border-width: 2px; border-color: white;
border-radius: 5px; } #search-button{ height: 50px; width: 150px; color: mediumvioletred; background-color: white; font-size: x-large;
padding-right: 30px; padding-left: 30px; padding-top: 10px; padding-bottom: 10px; border-style: solid;
border-width: 2px; border-color: white; border-radius: 5px;
}
#submit-button{ height: 50px; width: 150px;
background-color: white; font-size: x-large; padding-right: 30px; padding-left: 30px; padding-top: 10px; padding-bottom: 10px; border-style: solid; border-width: 2px; border-color: white; border-radius: 5px;
}
.container-extract-text{ height: 500px; width: 100%; background-color: deepskyblue; display: flex; justify-content: center; justify-content: space-around; align-items: center;
}
.container-button{ height: 500px; width: 100%; display: flex; justify-content: center; justify-content: space-around; align-items: center;
}
.container-search{ height: 500px; width: 100%;
background-color: mediumvioletred; display: flex; justify-content: center; justify-content: space-around; align-items: center; }
.container-submit{ height: 500px; width: 100%; background-color: violet; display: flex; justify-content: center; justify-content: space-around;
align-items: center; } .container-mouse{
height: 500px; width: 100%; background-color: coral; display: flex; justify-content: center; justify-content: space-around; align-items: center;
}
.container-css{ height: 500px; width: 100%;
background-color: limegreen; display: flex; justify-content: center; justify-content: space-around; align-items: center;
} #cities{
font-size: xx-large;
font-family: Verdana, Geneva, Tahoma, sans-serif; list-style: none; color:white;
} p{
font-size: x-large;
font-family: Verdana, Geneva, Tahoma, sans-serif; list-style: none; color:white;
} #check{
height: 150px; width: 150px;
}
#add-css,
#remove-css{
height: 50px; width: 150px; background-color: white; color: limegreen; font-size: x-large; padding-right: 30px; padding-left: 30px; padding-top: 10px; padding-bottom: 10px; border-style: solid; border-width: 2px; border-color: white; border-radius: 5px;
} .test{ font-size:50px;
color: darkmagenta; font-weight: bolder;
}
#search-field{ height: auto; width: auto; font-size: x-large; padding-right: 30px; padding-left: 30px; padding-top: 10px; padding-bottom: 10px; border-style: solid; border-width: 2px; border-color: white; border-radius: 5px;
}
script.js
$(document).ready(function(){
$(‘#red-button’)
.mouseover(function(){
$(‘.container-button’).css(‘background-color’,’red’)
})
.mouseout(function(){
$(‘.container-button’).css(‘background-color’, ‘white’)
})
$(‘#blue-button’)
.mouseover(function(){
$(‘.container-button’).css(‘background-color’,’blue’)
})
.mouseout(function(){
$(‘.container-button’).css(‘background-color’, ‘white’)
})
$(‘#green-button’)
.mouseover(function(){
$(‘.container-button’).css(‘background-color’,’green’)
})
.mouseout(function(){
$(‘.container-button’).css(‘background-color’, ‘white’) })
$(‘#extract-text’).click(function(){
$(‘#text’).text($(‘#extract’).text())
})
$(‘#check’).click(function(){ if($(‘#check’)[0].checked){
$(‘#submit-button’).prop(‘disabled’, false); }else{
$(‘#submit-button’).prop(‘disabled’, true);
}
})
$(‘.container-mouse’).click(function(event){ if(event.button == 0){ alert(‘Left Click’)
}
else if(event.button == 2){ alert(‘Right Click’)
}
})
$(‘#add-css’).click(function(){
$(‘#css-text’).addClass(“test”)
})
$(‘#remove-css’).click(function(){
$(‘#css-text’).removeClass(“test”)
})
$(‘#search-button’).click(function(){ $(‘#cities li’).each(function(i, li){ const city = $(li);
city.css(‘font-weight’, ‘lighter’)
})
const search = $(‘#search-field’).val() if(search.length == 0){ alert(‘Empty text field’)
}else{
$(‘#cities li’).each(function(i, li){ const city = $(li);
if(city[0].innerText.includes(search)){ city.css(‘font-weight’, ‘bolder’) }
})
}
})
})
Output:
Reviews
There are no reviews yet.