100% found this document useful (1 vote)
9K views24 pages

Webtechcodes

Uploaded by

aisha.singh69696
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
100% found this document useful (1 vote)
9K views24 pages

Webtechcodes

Uploaded by

aisha.singh69696
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

--->Chess Board Designing

Practice program: Chess Board Designing


</head>
<body>
<table>
<!--fill code here-->
<caption id="table_caption">CHESS-MASTER</caption>
<tbody id="table_body">

<tr>
<td id="QR8" class="white_square" title="Black Rook"></td>
<td id="QN8" class="black_square" title="Black Knight"></td>
<td id="QB8" class="white_square" title="Black Bishop"></td>
<td id="Q8" class="black_square" title="Black Queen"></td>
<td id="K8" class="white_square" title="Black King"></td>
<td id="KB8" class="black_square" title="Black Bishop"></td>
<td id="KN8" class="white_square" title="Black Knight"></td>
<td id="KR8" class="black_square" title="Black Rook"></td>
</tr>
<tr>
<td id="QR7" class="black_square" title="Black Pawn"></td>
<td id="QN7" class="white_square" title="Black Pawn"></td>
<td id="QB7" class="black_square" title="Black Pawn"></td>
<td id="Q7" class="white_square" title="Black Pawn"></td>
<td id="K7" class="black_square" title="Black Pawn"></td>
<td id="KB7" class="white_square" title="Black Pawn"></td>
<td id="KN7" class="black_square" title="Black Pawn"></td>
<td id="KR7" class="white_square" title="Black Pawn"></td>
</tr>
<tr>
<td id="QR6" class="white_square"></td>
<td id="QN6" class="black_square"></td>
<td id="QB6" class="white_square"></td>
<td id="Q6" class="black_square"></td>
<td id="K6" class="white_square"></td>
<td id="KB6" class="black_square"></td>
<td id="KN6" class="white_square"></td>
<td id="KR6" class="black_square"></td>
</tr>
<tr>
<td id="QR5" class="black_square"></td>
<td id="QN5" class="white_square"></td>
<td id="QB5" class="black_square"></td>
<td id="Q5" class="white_square"></td>
<td id="K5" class="black_square"></td>
<td id="KB5" class="white_square"></td>
<td id="KN5" class="black_square"></td>
<td id="KR5" class="white_square"></td>
</tr>
<tr>
<td id="QR4" class="white_square"></td>
<td id="QN4" class="black_square"></td>
<td id="QB4" class="white_square"></td>
<td id="Q4" class="black_square"></td>
<td id="K4" class="white_square"></td>
<td id="KB4" class="black_square"></td>
<td id="KN4" class="white_square"></td>
<td id="KR4" class="black_square"></td>
</tr>
<tr>
<td id="QR3" class="black_square"></td>
<td id="QN3" class="white_square"></td>
<td id="QB3" class="black_square"></td>
<td id="Q3" class="white_square"></td>
<td id="K3" class="black_square"></td>
<td id="KB3" class="white_square"></td>
<td id="KN3" class="black_square"></td>
<td id="KR3" class="white_square"></td>
</tr>
<tr>
<td id="QR2" class="white_square" title="White Pawn"></td>
<td id="QN2" class="black_square" title="White Pawn"></td>
<td id="QB2" class="white_square" title="White Pawn"></td>
<td id="Q2" class="black_square" title="White Pawn"></td>
<td id="K2" class="white_square" title="White Pawn"></td>
<td id="KB2" class="black_square" title="White Pawn"></td>
<td id="KN2" class="white_square" title="White Pawn"></td>
<td id="KR2" class="black_square" title="White Pawn"></td>
</tr>

<tr>
<td id="QR1" class="black_square" title="White Rook"></td>
<td id="QN1" class="white_square" title="White Knight"></td>
<td id="QB1" class="black_square" title="White Bishop"><td>
<td id="Q1" class="white_square" title="White Queen"></td>
<td id="K1" class="black_square" title="White King"></td>
<td id="KB1" class="white_square" title="White Bishop"></td>
<td id="KN1" class="black_square" title="White Knight"></td>
<td id="KR1" class="white_square" title="White Rook"></td>
</tr>
</tbody>
<tfoot id="table_footer">
<tr>
<td>
<input type="button" id="setup" value="SetUpBoard">
<input type="button" id="online" value="PlayOnline">
<input type="button" id="computer" value="PlayComputer">
<input type="button" id="Withdraw" value="Withdraw">
</td>
</tr>
</tfoot>
</table>
</body>

--> Employee Basic Information

<!DOCTYPE html>
<html>
<head>
<title>Employee Basic Information</title>
<style>
input{
width:200px;
}
body{
background-color:#F0E68C;
}
#personal{
background-color:#F5F5F5;
font-weight:bold;
font-style:italic;
}
#current{
background-color:#FFF5EE;
font-weight:bold;
font-style:italic;
}
#previous{
background-color:#F8F8FF;
font-weight:bold;
font-style:italic;
}
h1{
Text-align:left;
text-decoration: underline;
color:#4B0082;
}
#submit{
color: #FFFFFF;
background-color: #4B0082;
}
</style>
</head>
<body>

<h1>Employee Basic Information</h1>


<form>
<fieldset id="personal">
<legend id="personallegend">Personal Information</legend>
<table>

<tr>
<td><label for="employeename">Employee Name</label> </td>
<td><input type="text" id="employeename" name="employeename" placeholder="Enter the employee
name" required></td>
</tr>
<tr>
<td><label for="employeeid">Employee Id</label> </td>
<td><input type="text" id="employeeid" name="employeeid" placeholder="Enter the employee id"
required></td>
</tr>
<tr>
<td><label for="aadharnumber">Aadhar Number</label></td>
<td><input type="text" id="aadharnumber" name="aadharnumber" placeholder="Enter the aadhar
number" required pattern="\d{4}-\d{4}-\d{4}" title="Pattern: 3214-5167-1892"></td>
</tr>
<tr>
<td><label for="email">Enter Email</label> </td>
<td><input type="text" id="email" name="email" placeholder="Enter the email" required></td>
</tr>
</table>
</fieldset>
<fieldset id="current">
<legend id="currentlegend">Current position</legend>
<table>

<tr>
<td><label for="department">Department</label></td>
<td><input type="text" id="department" name="department" required></td>
</tr>
<tr>
<td><label for="designation">Designation</label></td>
<td><input type="text" id="designation" name="designation" required></td>
</tr>
<tr>
<td><label for="location">Location</label></td>
<td><input type="text" id="location" name="location" required></td>
</tr>
</table>
</fieldset>
<fieldset id="previous">
<legend id="previouslegend">Previous Employment</legend>
<table>
<tr>
<td><label for="employer">Employer</label></td>
<td><input type="text" id="employer" name="employer" required></td>
</tr>
<tr>
<td><label for="employerdesignation">Employer Designation</label></td>
<td><input type="text" id="employerdesignation" name="employerdesignation" required></td>
</tr>
</table>
</fieldset><br />
--->Forever Event Management

<!-- do not make any changes in the template -->


<!-- fill your code in the areas indicated -->
<!DOCTYPE html>
<html>
<head>
<title>Forever Event Management</title>
<style>
*{
font-weight: bold;
}
body{
background-image:url("foreverbg.jpg");
background-size:cover;
}
table{
width:55%;
height:70%;
margin-left: auto;
margin-right: auto;
border-spacing: 5px;
}
#foot{
margin-left: 600px;
border-spacing: 5px;
}
#submit,#reset{
padding:7px;
font-size:15px;
color: #ffffff;
background-color: #192841;
}
img{
margin-left: 500px;
margin-top : 6px;
margin-bottom: 1px;
}
td{
background-color: #ffffff;
}
caption, table, td{
border:1px solid #000000;
}
caption{
font-size:20px;
font-weight:bold;
color: white;
background-color: #192841;
padding:5px;
}
input[type="tel"],input[type="email"],input[type="text"],
select,textarea, input[type="number"], input[type="url"],
input[type="date"]{
width:100%;
}
input[type="range"]{
width:80%;
}
</style>
</head>
<body>
<script>
function show_value(x)
{
document.getElementById("demo").innerHTML="Rs."+x;
}
</script>
<form>
<figure id="forever_image">
<img id="image1" src="forever.jpg" height="80" width="200" alt="bg_image">an Event
Management company
</figure>
<table>
<!--fill code here-->

<caption id="table_caption">
Vendor Registeration Form
</caption>
<tr>
<td><label for="cname">Company name</label></td>
<td><input type="text" name="company_name" id="cname" required/></td>
</tr>
<tr>
<td><label>Type</label> </td>
<td>
<input type="radio" name="ctype" id="corporation"/>Corporation
<input type="radio" name="ctype" id="partnership"/>Partnership
<input type="radio" name="ctype" id="individual"/>Individual
<input type="radio" name="ctype" id="others"/>Others
</td>
</tr>
<tr>
<td><label for="phno">Phone Number</label></td>
<td><input type="tel" name="phone_number" id="phno" pattern="[789]\d{9}" required/></td>
</tr>
<tr>
<td><label for="email">Email ID</label></td>
<td><input type="email" name="email_id" id="email" required/></td>
</tr>
<tr>
<td><label for="address">Location</label></td>
<td><textarea name="location" id="address" rows="4" cols="50" required></textarea></td>
</tr>
<tr>

---> Practice program: library books

<!--Please, DO NOT modify this template. Debug the code within body, wherever necessary-->
<!DOCTYPE html>
<html>
<body>
<h1>A Simple Form</h1>
<p><em>Form Fundamentals</em></p>
<form autocomplete="on">
<fieldset>
<legend>Customer Info</legend>
<p>Name: <input type="text" name="cusname" placeholder="Enter your name" autofocus
required></p>
<p>Telephone: <input type="tel" name="telephone" placeholder="Pattern: 234-567-8910"
pattern="[0-9]{3}[-][0-9]{3}[-][0-9]{4}" required></p>
<p>Email address: <input type="email" name="mail" placeholder="Enter your email address"
multiple required></p>
</fieldset>
<fieldset>
<legend>Books</legend>
<p>
<input type="text" name="book" list="books">
<datalist id="books">
<option value="HTML5 - Bruce Lawson and Remy Sharp"></option>
<option value="HTML5 : Up and Running - Mark Pilgrim"></option>
<option value="Head First HTML5 Programming - Eric Freeman"></option>
<option value="Mastering HTML,CSS and JavaScript - Laura Lemay"></option>
</datalist>
Quantity (Maximum 5): <input type="number" name="quantity" min="1" max="5">
</p>
</fieldset>
<input type="submit" value="Submit" name="submit">
</form>
</body>
</html>

---> Practice program: NEWS4

<!DOCTYPE html>
<html>
<head>
<title>NEWS 4</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li><a id="top" class="active" href="#top">Home</a></li>
<li><a id="link1" href="#india">India</a></li>
<li><a id="link2" href="#world">World</a></li>
<li><a id="link3" href="#business">Business</a></li>
<li><a id="link4" href="#technology">Technology</a></li>
<li><a id="link5" href="#entertainment">Entertainment</a></li>
<li><a id="link6" href="#sports">Sports</a></li>
<li><a id="link7" href="#health">Health</a></li>
</ul>
<div>
<header><h1 id="main">NEWS 4</h1></header>
<h2>HEADLINES</h2>
<section class="intro" id="india">
<table>
<tr>
<td id="cs1" colspan="2"><h3>India</h3></td>
</tr>
<tr>
<td id="indiatext">
<p>CBSE December session result to be released today</p><br>
<p>World Bank warns a global recession looks inevitable as food and energy prices
spiral</p><br>
<p>Assam CM Sarma invites suggestions for change of names of cities ‘contrary to our
culture’</p>
</td>
<td id="pic1" class="right" >
<img id="img1" class="image" src="India.jpg" alt="India">
</td>
</tr>
</table>
</section>
</div>
<div></div>
<footer>Copyright &copy; NEWS TODAY 2000</footer>
</body>
</html>

---> Practice program: Welcome Message

function displayWelcomeMessage() {
try {
//Get the first name and last name using DOM functions
//Display the output in div with id "result"
var firstName= document.getElementById('fname').value;
var lastName= document.getElementById('lname').value;
document.getElementById('result').innerHTML="Welcome "+firstName+" "+lastName;
} catch(err) {
document.getElementById("result").innerHTML=err;
}
}

--->Practice program: Table Booking

//Don't change or delete the try/catch block


function displayConfirmationMessage() {
try {
//Get the customer name and timing using DOM functions
//Display the output in div with id "result"

var name=document.getElementById('name').value;
var timings=document.getElementsByName('timing');
var selectedTiming="";
for(var i=0;i<timings.length;i++){
if(timings[i].checked){
selectedTiming=timings[i].value;
break;
}
}
document.getElementById('result').innerHTML= "Hi "+name+" your table has been booked between
"+ selectedTiming;

} catch(err) {
document.getElementById("result").innerHTML=err;
}
}

--->Practice program: Zogy online food delivery Feedback

function show_value(x){
document.getElementById("demo").innerHTML=x;
}
function displayFeedbackMessage()
{
try {
//Get the name and feedback range value using DOM functions
//Display the output based on feedback range in div with id "result"
var Name=document.getElementById('cname').value;
var Rating= document.getElementById('rate').value;
if(Rating<=5){
document.getElementById('result').innerHTML="Hi "+Name+" Thank you for your valuable
feedback. Sorry for the inconvenience. You will be contacted by our customer care officer soon"
} else if(Rating>5 && Rating<=8){
document.getElementById('result').innerHTML="Hi "+Name+" Thank you for your valuable
feedback. You can post your complaints on [email protected]"
} else{
document.getElementById('result').innerHTML="Hi "+Name+" Thank you for your valuable
feedback. Happy customers are our only asset"
}
} catch(err) {
document.getElementById("result").innerHTML=err;
}return false;
}

--->Practice program: Strike Rate Finder

//Don't change or delete the try/catch block


function displayStrikeRate() {
try {
// Get the name, runs and balls using DOM functions
// Calculate the strike rate ends with 2 decimal digits
// Display the message as per the description in div tag with id "result"

var Name = document.getElementById('name').value;


var Runs = document.getElementById('runs').value;
var Balls = document.getElementById('balls').value;
var SR = (Runs/Balls)*100;
var message = "Name: "+Name+ "<br>Runs Scored: "+Runs+ "<br>Balls Faced : "+Balls+"<br>Strike
Rate: "+ SR.toFixed(2);
document.getElementById('result').innerHTML = message;

} catch(err) {
document.getElementById("result").innerHTML=err;
}
}

--->Practice program: BigStorm Sign In

//Don't change or delete the try/catch block


function signIn(){

try{
//Get the values of elements using DON
//Invoke the passwordvalidate() method
//Display the result as per the requirement in the description
var name = document.getElementById("name").value;
var password=document.getElementById("password").value;
var isValidPassword=passwordValidate(password);
var resultDiv=document.getElementById("demo");
if (isValidPassword) {
resultDiv.innerHTML="Sign In successful!!! Welcome "+name+" Learn More with BigStorm";
} else {
resultDiv.innerHTML="Please enter a valid password (password should be of minimum 8 characters
having at least 1 small letter (a-z),1 capital letter (A-Z), 1 digit(0-9), 1 special character)";
}
}catch(err) {
document.getElementById("demo").innerHTML="Function signin: "+err;
}
return false;
}
function passwordValidate(password){
try{
//Validate the password (password should be of minimum 8 characters having atleast 1 small letter (a-z),
1 capital letter (A-Z), 1 digit(0-9), 1 special character) //return true or false based on validation
var regex=/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()-_+=])[A-Za-z\d!@#$%^&*()-_+=]{8,}$/;
return regex.test(password);
}catch(err) {
document.getElementById("demo").innerHTML-"Function passwordValidate: "+err;
}
}

--->Practice program: Ugly Number

1.index.html

<!--Do not make any change in this code template -->


<!DOCTYPE html>
<html lang="en">
<head>
<title>Ugly Number</title>
<script src="script.js"></script>
</head>
<body>
<form onsubmit="display();return false;">
<label for="ugly">Enter the number to check:</label>
<input type="number" id="ugly" name="ugly" required>
<br>
<button type="submit" id="uglybtn" value="Check Ugly Number">Check Ugly Number</button>
</form>
<div id="result"></div>
</body>
</html>

2.script.js

function display() {
try {
var inputNumber = document.getElementById('ugly').value;
var resultDiv = document.getElementById('result');
if (inputNumber !== "") {
var num = parseInt(inputNumber);
if (!isNaN(num)) {
if (num > 0) {
var isUgly = checkUglyNumber(num);
if (isUgly) {
alert(num + " is an ugly number");
} else {
alert(num + " is not an ugly number");
}
} else {
alert("Invalid Input");
}
} else {
alert("Please, specify a valid number input");
}
} else {
alert("Please, specify an input");
}
} catch (err) {
alert("Error in display: " + err);
}
}

function checkUglyNumber(num) {
try {
if (num <= 0) {
return false;
}
while (num % 2 === 0) {
num /= 2;
}
while (num % 3 === 0) {
num /= 3;
}
while (num % 5 === 0) {
num /= 5;
}
return num === 1;
} catch (err) {
alert("Error in checkUglyNumber: " + err);
return false;
}
}

--> Practice program: Alliteration

<html>
<head><script src="script.js"></script></head>
<body>
<form onsubmit="checkAlliteration();return false;">
<table>
<tr>
<td><label for="char">Enter the letter</label></td>
<td><input type="text" id="char" pattern="[b-df-hj-np-tv-zB-DF-HJ-NP-TV-Z]" ></td>
</tr>
<tr>
<td><label for="alliter">Enter the sentence</label></td>
<td><input type="text" id="alliter" required></td>
</tr>
<tr>
<td><input type="submit" id="alliterbtn" value="Check Alliteration"></td>
</tr>
</table>
</form>
<div id="result"></div>
</body>
</html>

2.script.js

//Dont change or delete the try/catch block


function checkAlliteration(){
try{

// Get the value of char & alliter components


// Invoke getCount() method - will return the number of words.
// IF the number of words in the sentence is <3, display the corresponding output statement in div with
id 'result'

// ELSE, invoke validateSentence() method - will return true / false.


// IF false, display the corresponding output statement in div with id 'result'

// ELSE, Invoke getScore() - will return the calculated score.


// Display the corresponding output statement in div with id 'result'

var char = document.getElementById('char').value.toLowerCase();


var sentence = document.getElementById('alliter').value.toLowerCase();
var wordCount = getCount(sentence);
if (wordCount < 3) {
document.getElementById("result").innerHTML = "Invalid number of words";
return false;
}
var isValidSentence = validateSentence(sentence);
if (!isValidSentence) {
document.getElementById("result").innerHTML = "Invalid sentence";
return false;
}
var Score = getScore(sentence, char);
document.getElementById("result").innerHTML = "Your score is "+Score;
return false;
}catch(err) {
document.getElementById("result").innerHTML="Function checkAlliteration: "+err;
}
}
function getCount(str){
try{
// Calculates the number of words in str returns the count
var words = str.split(" ");
return words.length;
}catch(err){
document.getElementById("result").innerHTML="Function getCount: "+err;
}
}
function validateSentence(str){
try{
// When any word of str starts with a vowel, return false; else, return true

var words = str.split(" ");


var validCharCount = 0;
for (var j=1; j< words.length; j++) {
if (words[j][0].toLowerCase() === char){
validCharCount++;
}
}
if (words.length < 3 && words[0][0].toLowerCase() !== char) {
return false;
}
for (var i = 0; i < words.length; i++) {
if (/^[aeiouAEIOU]/.test(words[i][0])) {
return false;
}
}
return true;
}catch(err){
document.getElementById("result").innerHTML="Function validateSentence: "+err;
}

}
function getScore(str,char){
try{

// Compare the first letter of every word from str with char, calculate and return the score

var words= str.split(" ");


var score = 0;
if(words[0][0].toLowerCase() !== char){
score = 0;
return score;
}
// Compare the first letter of every word from str with char
for (var i = 1; i < words.length; i++) {
if (i < 3 && words[i][0].toLowerCase() === char) {
score += 1;
} else if (i >= 3 && words[i][0].toLowerCase() === char) {
// For each correct word after the first 3, a score of 2 is given
score += 2;
}
}
return score;

}catch(err){
document.getElementById("result").innerHTML="Function getScore: "+err;
}
}

Practice program-->Concert Ticket Booking

<!--Do not make any change in this code template; add codes in the areas indicated-->
<!DOCTYPE html>
<html>
<head>
<title>Elektra Waves Concert Ticket Booking</title>
<style>
body{
background-image:url("concert.jpg");
opacity: 0.9;
font-weight: bold;
}
h3, #result, caption{
color: #FFFFFF;
font-family: Verdana;
text-align: center;
}
.title{
color: #000000;
}
#tickettable{
margin-left: auto;
margin-right: auto;
width: 50%;
}
#costchart{
margin-left: auto;
margin-right: 0;
}
td, th{
background-color: #ffffff;
color: #000000;
padding:7px;
border:2px solid #000000;
}
input[type="tel"],select,textarea,input[type="text"]{
width:97%;
}
input[type="range"]{
width:94%;
}
input::placeholder {
color:black;
}
#submit,#clear{
color: #000000;
padding:7px;
border-radius: 5px;
font-weight: bold;
}
#buttons{
margin-left: 40%;
}
</style>
<script src="script.js"> </script>
</head>
<body>
<form onsubmit="return costCalculation();">
<h3>Elektra Waves Concert Ticket Booking</h3><br/>
<table id="tickettable" >
<tr><td colspan="2"><a href="#costchart" id="costchart_ref">View ticket cost
chart</a></td></tr>

<tr><td colspan="2" class="title">Personal Details</td></tr>


<tr>
<td>Name</td>
<td><input type="text" pattern="[a-zA-z ]+" placeholder="Enter your name" id="name"
required></td>
</tr>
<tr>
<td>Gender</td>
<td><input type="radio" id="male" value="male" name="gender"
required="required">
<label for="male">male</label><br>
<input type="radio" id="female" value="Female" name="gender"
required="required">
<label for="female">Female</label>
</td>
</tr>
<tr>
<td>Address</td>
<td>><textarea id="address" rows="4" cols="50" name="address"
placeholder="Enter your address" required="required"></textarea></td></tr>
<tr>
<td>Phone Number</td>
<td>><input id="phoneNumber" type="tel"
pattern="[7-9]{1}[0-9]{9}" placeholder="Enter your Phone Number"
required="required"></td>
</tr>

<tr><td colspan="2" class="title">Ticket Details</td></tr>


<tr>
<td>No Of Tickets</td>
<td><input id="noOfTickets" type="range" min="5" max="40"
step="1" required="required"><span id="demo"></span></td>
</tr>
<tr>
<td>Ticket Type</td>
<td><select name="" id="ticketType" required="required">
<option value = "Floor">Floor</option>
<option value="Balcony">Balcony</option>
</select></td>
</tr>
<tr>
<td>Add Ons</td>
<td><input type="checkbox" id="couponCode" name="addOns"
value="couponCode">
<label for = "couponCode">couponCode</label>
<input type= "checkbox" id="refreshment" name="addOns"
value="Refreshment">
<label for="refreshment">Refreshment</label></td>
</tr>
<tr>
<td>Coupon Code</td>
<td><input type="text" id="cc" required="required"
list="couponCodes">
<datalist id="couponCodes">
<option value="ELEKTRA20">
<option value="SIMBA20">
</datalist></td>
</tr>
</table>
<br/>

<div id="buttons">
<input type="submit" value="CONFIRM BOOKING" id="submit">
<input type="reset" value="CLEAR" id="clear">

</div>
<br/>
<div id="result"> </div>
<br/><br/>

<table id="costchart">
<caption>Ticket Cost Chart</caption>
<tr>
<th>Ticket Type</th>
<th>Base Price</th>
<th>On Booking more than 20 tickets</th>
<th>On applying coupon code</th>
</tr>
<tr>
<td>Floor</td>
<td>400</td>
<td>10% discount</td>
<td>2% discount</td>
</tr>
<tr>
<td>Balcony</td>
<td>500</td>
<td>10% discount</td>
<td>2% discount</td>
</tr>
<tfoot>
<tr>
<td colspan=4>* You must pay Rs.100 extra on choosing Refreshment!</td>
</tr>
</tfoot>
</table>
</form>
</body>
</html>

3. script.js

function show_value(x){
document.getElementById("demo").innerHTML=x;
}
function costCalculation(){
// fill javascript code here - do not use let keyword for variable intialization; instead use var.
var nooftickets = parseInt(document.getElementById("nooftickets").value);
var tickettype = document.getElementById("ticketType").value;
var coupon = document.getElementById("couponCode");
var refreshment = document.getElementById("refreshment");
var basePrice = 0;
var Total=0;

if(tickettype == "Floor")
{
basePrice = 400;
}
else {
basePrice = 500;
}
var discount = 0;
var refresh = 0;

if(nooftickets>20)
{
discount = 10 + discount;
}
if(coupon.checked === true)
{
discount = 2+discount;
}
if(refreshment.checked === true){
refresh = 100;
}
Total =
Math.round((nooftickets*basePrice)-((basePrice*nooftickets*discount)/100)+refresh);
document.getElementById('result').innerHTML = "your ticket charge is Rs."
+Total;

return false;
}

--->Practice program: Aqua Fish Stall - Js Debug

//Don't change or delete the try/catch block


function getDisplay()
{
try
{
//Debug and display the message as per the description in div tag with id "result"
var name = document.getElementById("name").value;
var phonenumber = document.getElementById("phonenumber").value;
var total = getTotalAmount();
document.getElementById("result").innerHTML="Please pay $"+total;
}
catch(err) {
document.getElementById("result").innerHTML=err;
}
return false;
}
function getTotalAmount()
{
// Debug this Javascript code to calculate the cost of fish and return the total amount
var sum = 0;
try
{
if(document.getElementById("anchovy").value) {
sum += document.getElementById("anchovy").value * 2;
}
if(document.getElementById("barracuda").value) {
sum += document.getElementById("barracuda").value * 5;
}
if(document.getElementById("crab").value) {
sum += document.getElementById("crab").value * 3;
}
if(document.getElementById("kingmackerel").value) {
sum += document.getElementById("kingmackerel").value * 10;
}
if(document.getElementById("pomfret").value) {
sum += document.getElementById("pomfret").value * 9;
}
if(document.getElementById("prawn").value) {
sum += document.getElementById("prawn").value * 3;
}
if(document.getElementById("salmon").value) {
sum += document.getElementById("salmon").value * 6;
}
if(document.getElementById("sardine").value) {
sum += document.getElementById("sardine").value * 2;
}
if(document.getElementById("shark").value) {
sum += document.getElementById("shark").value * 5;
}
if(document.getElementById("tilapia").value) {
sum += document.getElementById("tilapia").value * 4;
}
return sum;
}
catch(err) {
document.getElementById("result").innerHTML=err;
}
}

--->Practice program: Factorial Number - Js

//Don't change or delete the try/catch block


function getFunction()
{
//Do not make any change in this method
try
{
var a = document.getElementById("fact").value;
document.getElementById("result").innerHTML="Factorial of "+a+" is "+findFactorial(a);
}
catch(err){
document.getElementById("result").innerHTML=err;
}
return false;
}
function findFactorial(number) {

try
{
// Debug the logic to find the Factorial of the given number
var fact = 1;
for (var i = 1; i <= number; i++)
{
fact = fact*i;
}
return fact;
}
catch(err) {
document.getElementById("result").innerHTML=err;
}
}

---> DashboardPractice program: Welcome Message

//Write Your jQuery Code Here


$(document).ready(function() {

var okButton = $('#btnId');


okButton.click(function() {
var userName = $('#txt').val();
$('#address').text('"Welcome '+ userName + '!"');
});
});

--->Practice program: Select the Boxes

//WRITE YOUR jQUERY CODE HERE


$(document).ready(function() {

$('input[type="checkbox"]').change(function() {

var checkedCount = $('input[type="checkbox"]:checked').length;


var resultText = checkedCount === 1
? '1 box is checked'
: checkedCount > 1
? checkedCount + ' boxes are checked'
:'0 boxes are checked';
$('#result').text(resultText);
});
});

--->Practice program: Change the Background - DOM Manipuation

//WRITE YOUR jQUERY CODE HERE


$('#fname').change(function() {
$('#demo_form').append('<p>You have changed the First name</p>');
});
$('#lname').change(function() {
$('#demo_form').append('<p>You have changed the Last name</p>');
});
$(':input[type="text"]').focusin(function() {
$(this).css('background-color', 'green');
});
$(':input[type="text"]').focusout(function() {
$(this).css('background-color', 'grey');
});

--->Practice program: Employee Salary Calculation - Traversing

$("button").click(function() {
function calculateTotalSalary() {
var totalSalary = 0;
// Traverse the 'Salary' column in the table and calculate the total
$('#example tbody tr').each(function() {
var salary = parseFloat($(this).find('td:nth-child(6)').text());
totalSalary += isNaN(salary)? 0 : salary;
});
// Display the total salary in the 'paral' paragraph
$('#para1').text('Total Salary Paid: RS.' + totalSalary)
}
// Call the function to calculate and display the total salary
calculateTotalSalary();
});

--->Practice program: Customer Data - Events

//WRITE YOUR jQUERY CODE HERE


function addCustomerDetails() {
var customerName = $('#name').val();
// Check if the input is not empty
if (customerName.trim() !== '') {
// Append a new row to the table with the entered name and a checkbox
$('tbody').append('<tr><td><input type="checkbox" name="record"></td><td>' + customerName +
'</td></tr>');
// Clear the input after adding
$('#name').val('');
}
}
// Function to delete selected customer details from the table
function deleteCustomerDetails() {
// Find all checked checkboxes in the table
var checkedCheckboxes = $('tbody input:checked');
// Remove the corresponding rows from the table
checkedCheckboxes.closest('tr').remove();
}
// Attach click event handlers to the buttons
$('.add-row').click(function() {
addCustomerDetails();
});
$('.delete-row').click(function() {
deleteCustomerDetails();
});

--->Practice program: JQuery Events Log - Code Debugging

$(document).ready(function (){
$('.center img').on("click",{ text:'Image of Spinach' } ,handleEvent1);
$('h1').on("mouseover",{ text:'Spinach' } ,handleEvent1);
$('.description').on("mouseenter",{ text:'Health Benefits' } ,handleEvent2);
});
function handleEvent1(event) {
$("#log").append( event.type +":"+event.data.text +"<br>");
}
function handleEvent2(event) {
$("#log").append( event.type +":"+event.data.text +"<br>");

var myStr=$(".description").text();
var len = myStr.length;
$("#msg").html("The length of the given text is : "+len);
}

--->Practice program: JQuery Events in Sign In Page - Code Debugging

$("#uname").change(function () {
$("<p>You have changed the Username</p>").appendTo("form");
});
// Append a <p> element when the Password field is changed
$("#pwd").change(function () {
$("<p>You have changed the Password</p>").appendTo("form");
});
// Append a <p> element when the Sign In button is double-clicked
$("#login").dblclick(function () {
$("<p>You have double clicked on Sign In</p>").appendTo("form");
});
// Set background color on focus and focusout for the Username input field
$("#uname").focusin(function () {
$(this).css('background-color', 'green');
});
$("#uname").focusout(function () {
$(this).css('background-color', 'grey');
});
// Set background color on focus and focusout for the Password input field
$("#pwd").focusin(function () {
$(this).css('background-color', 'green');
});
$("#pwd").focusout(function () {
$(this).css('background-color', 'grey');
});

You might also like