0% found this document useful (0 votes)
735 views

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
0% found this document useful (0 votes)
735 views

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
You are on page 1/ 24

--->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