Webtechcodes
Webtechcodes
<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>
<!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>
<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
<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>
<!--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>
<!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 © NEWS TODAY 2000</footer>
</body>
</html>
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;
}
}
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;
}
}
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;
}
} catch(err) {
document.getElementById("result").innerHTML=err;
}
}
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;
}
}
1.index.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;
}
}
<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
}
function getScore(str,char){
try{
// Compare the first letter of every word from str with char, calculate and return the score
}catch(err){
document.getElementById("result").innerHTML="Function getScore: "+err;
}
}
<!--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>
<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;
}
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;
}
}
$('input[type="checkbox"]').change(function() {
$("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();
});
$(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);
}
$("#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');
});