Web Technologies - Practice Questions

To paste it you need to install this extension click here to download extension

Python Practice: Click Here

SQL Practice: Click Here

Java Practice: Click Here

AWS Practice: Click Here

Article(semantic tags)

<!DOCTYPE html>
<html lang="en"><head>
<title>Article</title>
<style>
body {
    font-family: Verdana,sans-serif;
    font-size: 0.9em;
}
aside {
  width: 30%;
  padding-left: 15px;
  margin-left: auto;
  margin-right:auto;
  font-style: italic;
  background-color: #ccccff;
}
header,footer {
	text-align:center;
    padding: 10px;
    color: white;
    background-color: #669999;
}
h2{
	text-align:center;
}
#content {
    margin: 5px;
    padding: 10px;
    background-color: #ccccff;
}

article {
    margin: 5px;
    padding: 10px;
    background-color: #e6fff2;
}

</style>
</head>
<body>
    <!--fill the code-->
    <header id="head">
        <h1 id="heading1">Online Education</h1>
    </header>
    <div id="content">
        <h2 id="heading2">Future of Education</h2>
        <article id="art1">
            <h3 id="intro">Introduction</h3>
            <p>This is an introduction text provide overview of topic.</p>
            <aside id="side">
                <p>This is an additional information relavent to the introduction</p>
            </aside>
        </article>
        <article id="art2">
            <h3 id="overview">Why Online Education</h3>
            <p>This paragraph explains importans and benefits of online eduction.</p>
        </article>
        <article id="art3">
            <h3 id="reason">Reasons</h3>
            <p>This paragraph lists various reasons why online Education is valuable option.</p>
            
        </article>
    </div>
    <footer id="foot">
        <p id="status">Last update Apr 4,2019.</p>
    </footer>

</body></html>

Table of Contents - TOC

<!DOCTYPE html>
<html><head>
<title>Table of Contents</title>
    
<style>
*{
font-weight:bold;   
}
h2{
text-align:center;
color:#000000;
}
.split {
height: 100%;
width: 50%;
position: fixed;
overflow: scroll;
z-index: 1;
top: 0;
}
.left {	
left: 0;
background-color: #000000;
}
.right {
right: 0;
background-color: #808080;
color:#000000;
width: 70%;
}
a{
text-decoration:none;
color:#808080;
}
</style>

</head>
<body>
    <div class="split left">
        <!--fill the code-->
        <ul id="links" style="list-style-type: none;">
            <li><a href="#overview" id="link1">HTML5 OVERVIEW</a></li>
            <li><a href="#syntax" id="link2">HTML5 SYNTAX</a></li>
            <li><a href="#attributes" id="link3">HTML5 ATTRIBUTES</a></li>
            <li><a href="#events" id="link4">HTML5 EVENTS</a></li>
            <li><a href="#forms" id="link5">HTML5 WEB FORMS 2.0</a></li>
            <li><a href="#advd" id="link6">HTML5 AUDIO & VIDEO</a></li>
        </ul>
    </div>
    <div class="split right">
        <!--fill the code-->
        <header>
            <h2>Table of Contents</h2>
        </header>
        <ol>
            <li>
                <p id="overview">HTML5 OVERVIEW</p>
                <ul>
                    <li><p>Introduction to html5</p></li>
                    <li><p>Key features</p></li>
                </ul>
            </li>
            <li>
                <p id="syntax">html5 syntax</p>
                <ul>
                    <li><p>Basic syntax</p></li>
                    <li><p>elements and tags</p></li>
                </ul>
            </li>
            <li>
                <p id="attributes">HTML5 ATTRIBUTES</p>
                <ul>
                    <li><p>Standard attribute</p></li>
                    <li><p>Custom attributes</p></li>
                </ul>
            </li>
            <li>
                <p id="events">HTML5 EVENTS</p>
                <ul>
                    <li><p>Event handling</p></li>
                    <li><p>Common events</p></li>
                </ul>
            </li>
            <li>
                <p id="forms">HTML5 WEB FORMS 2.0</p>
                <ul>
                    <li><p>New input type</p></li>
                    <li><p>Form validation</p></li>
                </ul>
            </li>
            <li>
                <p id="advd">HTML5 AUDIO & VIDEO</p>
                <ul>
                    <li><p>Audio Element</p></li>
                    <li><p>Video element</p></li>
                </ul>
            </li>
        </ol>
        
    </div>

</body></html>

Chess Board Designing

<!DOCTYPE html>
<html><head>
<title>Chess Board Designing</title>
<style>
		
table,.black_square,.white_square {
	display:block;
	padding:0px;
	margin:0px;
}

table {
	width:400px;
	height:400px;
	margin-left: auto;
	margin-right: auto;
	margin-top : 150px;
	margin-bottom: 200px;
}

.black_square, .white_square {
	width:48px;
	height:48px;
	float:left;
}

.black_square {
	background-color:#000000;
}

.white_square {
	background-color:#FFFFFF;
}

body{
	background-color:#606060;
}

caption{
        font-family: Georgia;
        text-align: center;
		font-size:20px;
		border-radius: 6px;
		padding:5px;
		background-color:#ffffff;
		border: 3px solid #606060;
}

input[type="button"]{
		width:96px;
		height:40px;
		float:left;
		border-radius: 6px;
		padding:5px;
}

</style>
</head>

<body>
	<!--fill code here-->
	<table>
	    <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" title=""></td>
	           <td id="QN6" class="black_square" title=""></td>
	           <td id="QB6" class="white_square" title=""></td>
	           <td id="Q6" class="black_square" title=""></td>
	           <td id="K6" class="white_square" title=""></td>
	           <td id="KB6" class="black_square" title=""></td>
	           <td id="KN6" class="white_square" title=""></td>
	           <td id="KR6" class="black_square" title=""></td>
	       </tr>
	       
	       <tr>
	           <td id="QR5" class="black_square" title=""></td>
	           <td id="QN5" class="white_square" title=""></td>
	           <td id="QB5" class="black_square" title=""></td>
	           <td id="Q5" class="white_square" title=""></td>
	           <td id="K5" class="black_square" title=""></td>
	           <td id="KB5" class="white_square" title=""></td>
	           <td id="KN5" class="black_square" title=""></td>
	           <td id="KR5" class="white_square" title=""></td>
	       </tr>
	       
	        <tr>
	           <td id="QR4" class="white_square" title=""></td>
	           <td id="QN4" class="black_square" title=""></td>
	           <td id="QB4" class="white_square" title=""></td>
	           <td id="Q4" class="black_square" title=""></td>
	           <td id="K4" class="white_square" title=""></td>
	           <td id="KB4" class="black_square" title=""></td>
	           <td id="KN4" class="white_square" title=""></td>
	           <td id="KR4" class="black_square" title=""></td>
	       </tr>
	       
	       <tr>
	           <td id="QR3" class="black_square" title=""></td>
	           <td id="QN3" class="white_square" title=""></td>
	           <td id="QB3" class="black_square" title=""></td>
	           <td id="Q3" class="white_square" title=""></td>
	           <td id="K3" class="black_square" title=""></td>
	           <td id="KB3" class="white_square" title=""></td>
	           <td id="KN3" class="black_square" title=""></td>
	           <td id="KR3" class="white_square" title=""></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 id="setup" type="button" value="SetUpBoard">
	              <input id="online" type="button" value="PlayOnline">
	              <input id="computer" type="button" value="PlayComputer">
	              <input id="withdraw" type="button" value="Withdraw">
	          </td>
	      </tr>
	  </tfoot>
	</table>

</body></html>

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>
    <!--Fill the code here-->
    <fieldset id="personal">
        <legend id="personallegend">Personal Information</legend>
        <table>
            
            <tbody><tr>
                <td><label for="employeename">Employee Name:</label></td>
                <td>
                    <input type="text" id="employeename" placeholder="Enter the employee name" required="">
                </td>
            </tr>
            
             <tr>
                <td><label for="employeeid">Employee Id:</label></td>
                <td>
                    <input type="text" id="employeeid" placeholder="Enter the employee id" required="">
                </td>
            </tr>
            
             <tr>
                <td><label for="aadharnumber">Aadhar Number:</label></td>
                <td>
                    <input type="text" id="aadharnumber" placeholder="Enter the aadhar number" required="" pattern="\d{4}-\d{4}-\d{4}">
                </td>
            </tr>
            
             <tr>
                <td><label for="email">Enter Email:</label></td>
                <td>
                    <input type="text" id="email" placeholder="Enter the email" required="">
                </td>
            </tr>
            
        </tbody></table>
    </fieldset>
    
    <fieldset id="current">
        <legend id="currentlegend">Current Position</legend>
        <table>
            
            <tbody><tr>
                <td><label for="department">Department:</label></td>
                <td>
                    <input type="text" id="department" placeholder="Enter the department name" required="">
                </td>
            </tr>
            
             <tr>
                <td><label for="designation">Designation:</label></td>
                <td>
                    <input type="text" id="designation" placeholder="Enter the designation" required="">
                </td>
            </tr>
            
             <tr>
                <td><label for="location">Location:</label></td>
                <td>
                    <input type="text" id="location" placeholder="Enter the location" required="" pattern="\d{4}-\d{4}-\d{4}">
                </td>
            </tr>
            
            
        </tbody></table>
    </fieldset>
    
    <fieldset id="previous">
        <legend id="previouslegend">Previous Employment</legend>
        <table>
            
            <tbody><tr>
                <td><label for="employer">Employer:</label></td>
                <td>
                    <input type="text" id="employer" placeholder="Enter the name of the employer" required="">
                </td>
            </tr>
            
             <tr>
                <td><label for="employerdesignation">Employer Designation:</label></td>
                <td>
                    <input type="text" id="employerdesignation" placeholder="Enter the employer designation" required="">
                </td>
            </tr>
        </tbody></table>
    </fieldset>
    <br>
    <input id="submit" type="submit" value="Save & continue" style="background-color:purple; color:white">
    </form>


</body></html>

Forever Event Management

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

<caption id="table_caption">
Vendor Registeration Form
</caption>
<tbody><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>
<td><label for="link">Website Address</label></td>    
<td><input type="url" id="link" name="website_address" required=""></td>
</tr>
<tr>
    <td><label for="tin">TIN No:</label></td>
    <td><input type="number" id="tin" placeholder="Enter the TIN No" required=""></td>
</tr>
<tr>
    <td><label for="expiry">TIN No Expiry Date:</label></td>
    <td><input type="date" id="expiry" required=""></td>
</tr>
<tr>
    <td><label for="cost">Average Project Cost</label></td>
    <td><input type="range" id="cost" name="average_project_cost" min="25000" max="500000" step="1000" onchange="show_value(this.value);" required=""> 
    </td>
</tr>
<tr>
    <td><label for="profile">Upload Images of License,PAN & Facade</label></td>
    <td><input type="file" id="profile" name="image_upload" accept="image/+" multiple="" required=""></td>
</tr>
</tbody></table><br>
<div id="foot">
    <input type="submit" id="submit" value="REGISTER">
    <input type="reset" id="reset" value="CLEAR">
</div>
</form>

</body></html>

News 4

<!DOCTYPE html>
<html><head>
    <title>NEWS 4</title>
    <link rel="stylesheet" href="style.css">
</head>
    <body>
	    <ul>
            <li><a id="top" 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 href="#technology">Technology</a></li>
            <li><a href="#entertainment">Entertainment</a></li>
            <li><a href="#sports">Sports</a></li>
            <li><a href="#health">Health</a></li>
        </ul>
        <div> 
            <header><h1 id="main">NEWS 4</h1></header> 
            <h2>HEADLINES</h2>
            <section class="intro" id="india"> 
                <table>
                    <tbody><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  alt="India"> -->
                            <img id="img1" class="image" src="India.jpg" alt="India">
                         </td>
                    </tr>
                </tbody></table>   
            </section>
        </div>
        <div></div>
        <footer>Copyright © NEWS TODAY 2000</footer>
    
</body></html>

Welcome Message

//Don't change or delete the try/catch block
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;
    }
}

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 fn = document.getElementById("name").value
        
        var one = document.getElementById("1-4pm")
        var two = document.getElementById("4-7pm")
        var three = document.getElementById("7-10pm")
        var res = fn+" your table has been booked between "
        if(one.checked){
            res+=one.value
        }
        else if(two.checked){
            res+=two.value
        }
        else if(three.checked){
            res+=three.value
        }
        
        document.getElementById("result").innerHTML="Hi "+res
        
    } catch(err) {
        document.getElementById("result").innerHTML=err;
    }
}

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
        var message = "Hi "+name+" Thank you for your valuable feedback. "
        if(rating>=1 && rating<=5)
            message+="Sorry for the inconvenience. You will be contacted by our customer care officer soon"
        else if(rating>5 && rating<=8)
            message+="You can post your complaints on customercare@gmail.com"
        else if(rating>8)
            message+="Happy customers are our only asset"
        
        document.getElementById("result").innerHTML=message
            
            
    } catch(err) {
        document.getElementById("result").innerHTML=err;
    }return false;
}

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 fn = document.getElementById("name").value
        var run = document.getElementById("runs").value
        var ball = document.getElementById("balls").value
        
        var strikeRate = (run/ball)*100
        strikeRate = strikeRate.toFixed(2)
        
        var mess = "Name : "+fn+"<br>Runs Scored : "+run+"<br>Balls Faced : "+ball+"<br>Strike Rate : "+strikeRate
        
        document.getElementById("result").innerHTML=mess
        
    } catch(err) {
        document.getElementById("result").innerHTML=err;
    }
}

BigStorm Sign In

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

function signIn(){
    try{
       //Get the values of elements using DOM 
       //Invoke the passwordValidate() method
       //Display the result as per the requirement in the description
       var fn = document.getElementById("name").value
       var pass = document.getElementById("password").value
       
       var valid = passwordValidate(pass)
       var mess = ""
       if(valid)
           mess = "Sign In successful!!! Welcome "+fn+" Learn More with BigStorm"
       else
           mess = "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)"
       
       document.getElementById("demo").innerHTML=mess
    }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 l = password.length
    if(l<8)
        return false
        
    var lo = false
    var up = false
    var digit = false
    var sp = false
    
    for(var i=0; i<l; i++){
        if(password[i]>="a" && password[i]<="z")
            lo = true
        else if(password[i]>="A" && password[i]<="Z")
            up = true
        else if(password[i]>=0 && password[i]<=9)
            digit = true
        else
            sp = true
            
    }
    
    if(lo && up && digit && sp)
        return true
    return false
    
    }catch(err){
        document.getElementById("demo").innerHTML="Function passwordValidate: "+err;
    }
}

Ugly Number - HTML

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

</body></html>

Ugly Number - js

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

function display()
{
   
        
    // Get the value of ugly component 
    // Check if it's a valid input or not. 
    // IF valid, invoke checkUglyNumber() function and display the output statement using alert()
    // IF invalid, display the corresponding output statement using alert()
   var num = document.getElementById("ugly").value
   if(num === ""){
       alert("Please, specify an input")
       return;
   }
   if(num<=0){
       alert("Invalid Input")
       return;
   }
   
   var isUgly = checkUglyNumber(num)
   
   if(isUgly)
       alert(num+" is an ugly number")
   else 
       alert(num+" is not an ugly number")
   
}
function checkUglyNumber(num)
{
       // Check whether the num value is an ugly number or not. If yes, return true. Else, return false
    if(num==1)
        return true
    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
}

Alliteration-HTML

<!DOCTYPE html>
<html><head><script src="script.js"></script></head>
    <body>
        <form onsubmit="checkAlliteration();return false;">
           
           <!--fill the code-->
            <label for="char">Enter the letter</label>
            <input type="text" id="char" name="char" maxlength="1" pattern="[bcdfghjklmnpqrstvwxyzBCDFGHJKLMNPQRSTVWXYZ]" required="">
            <label for="alliter">Enter the sentence</label>
            <input type="text" id="alliter" name="alliter" required="">
            
            <input type="submit" id="alliterbtn" value="Check Alliteration">
            
            
            
        </form>
        <div id="result"></div>
    
</body></html>

Alliteration-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
    var alli = document.getElementById("alliter").value 
    alli = alli.toLowerCase()
    char = char.toLowerCase()
    
    var res = document.getElementById("result")
    if(getCount(alli)<3){
        res.innerHTML="Invalid number of words"
        return
    }
    if(!validateSentence(alli)){
        res.innerHTML="Invalid sentence"
        return
    }
    var no = getScore(alli, char)
    res.innerHTML="Your score is "+no
        
    
    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 l = str.trim().split(/\s+/).filter(Boolean)
    return l.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 l = str.trim().split(/\s+/).filter(Boolean)
    var vow = "aeiou"
    for(let i=0; i<l.length; i++){
        if(vow.includes(l[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 keyChar = char.toLowerCase()
    
    var words = str.trim().split(/\s+/)
    var correctCnt = 0
    var score = 0
    
    for(let i=0; i<words.length; i++){
        var fl = words[i][0].toLowerCase()
        
        if(fl === keyChar){
            correctCnt++
            if(correctCnt<=3){
                score=2
            }
            else{
                score+=2
            }
        }
        else{
            return 0
        }
    }
    return score
    }catch(err){
        document.getElementById("result").innerHTML="Function getScore: "+err;
    }
}

Concert Ticket Booking (HTML)

<!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">
            	<tbody><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" id="name" placeholder="Enter your name" pattern="[A-Za-z\s]+" required="">
            	    </td>
            	</tr>
            	<tr> 
            	    <td>Gender</td> 
            	    <td>
            	        <input type="radio" name="gender" id="male" value="male" required="">
            	        <label for="male">Male</label>
            	        <input type="radio" name="gender" id="female" value="female" required="">
            	        <label for="female">Female</label>
            	    </td>
            	</tr>
            	<tr> 
            	    <td>Address</td> 
            	    <td>
            	        <textarea id="address" rows="4" cols="50" placeholder="Enter your address" required=""></textarea>
            	    </td></tr>
                <tr>
                    <td>Phone Number</td>
                    <td>
                        <input type="tel" id="phoneNumber" pattern="[789][0-9]{9}" placeholder="Enter your phone number" required="">
                    </td>
                </tr>
                
            	<tr><td colspan="2" class="title">Ticket Details</td></tr>
            	<tr>
                    <td>No Of Tickets</td>
                    <td>
                        <input onchange="show_value(value)" type="range" min="5" max="40" step="1" id="noOfTickets" required="">
                        <span id="demo"></span>
                    </td>
                </tr>
                <tr>
                    <td>Ticket Type</td>
                    <td>
                        <select id="ticketType">
                            <option value="Floor">Floor</option>
                            <option value="Balcony">Balcony</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Add Ons</td>
                    <td>
                        <input type="checkbox" name="addOns" id="couponCode" value="CouponCode">
                        <label for="couponCode">CouponCode</label>
                        <input type="checkbox" name="addOns" id="refreshment" value="Refreshment">
                        <label for="refreshment">Refreshment</label>
                    </td>
                </tr>
                <tr>
                    <td>Coupon Code</td>
                    <td>
                        <input id="cc" type="text" list="couponCodes" required="">
                        <datalist id="couponCodes">
                            <option value="ELEKTRA20">
                            </option><option value="SIMBA20">
                        </option></datalist>
                    </td>
                </tr>
            </tbody></table>
            <br><br>
            
            <div id="buttons">
                <input type="submit" id="submit" value="CONFIRM BOOKING" onclick="costCalculation()">
                <input type="reset" id="clear" value="CLEAR">
            </div>
            <br>
            <div id="result"> </div>
            <br><br>
            
            <table id="costchart">
                <caption>Ticket Cost Chart</caption>
                <tbody><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>
            	</tbody><tfoot>
                	<tr>
                        <td colspan="4">* You must pay Rs.100 extra on choosing Refreshment!</td>
                    </tr>
            	</tfoot>
            </table>
        </form>
    
</body></html>

Concert Ticket Booking-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 noTicket = document.getElementById("noOfTickets").value
    var typeTicket = document.getElementById("ticketType").value
    var couponCode = document.getElementById("couponCode")
    var ref = document.getElementById("refreshment")
    var res = document.getElementById("result")
    
    var ccCheck = false
    if(couponCode.checked){
        ccCheck = true
    }
    var refCheck = false
    if(ref.checked){
        refCheck = true
    }
    
    var price = 0
    if(typeTicket == "Floor")
        price = 400
    else if(typeTicket == "Balcony")
        price = 500


    var costOfTicket = noTicket * price 
    var discountPer = 0
    var total = 0
    if(noTicket>20)
        discountPer = 10
        
    if(ccCheck)
        discountPer+=2
        
    // if(refCheck)
    //     total+=100
    
    if(discountPer>0){
      costOfTicket = costOfTicket - (costOfTicket * (discountPer/100))
    }
    if(refCheck){
        costOfTicket+=100
    }
    
    costOfTicket = Math.round(costOfTicket)
    
    result.innerHTML="Your ticket charge is Rs."+costOfTicket
        
    
        
    return false;
}

Aqua Fish Stall -HTML

<!DOCTYPE html>
<html><head>
    <title>Aqua Fish Stall</title>
    <script src="script.js"></script>
    <style>
        body {
            background-color:  blanchedalmond;
        }
        h1 {
            color: #FFFFFF;
            width: 70%;
            font-size:25px;
            margin-left: auto;
            margin-right: auto;
            background-color:  darkblue;
            text-align: center;
        }
        hr {
            width: 70%;
        }
        th{
            width: 30%;
        	font-weight: bold;
    	    border-radius: 6px;
    	    border-style: solid;
        	border-width: 2px;
        }
        td {
	        border-width: 1px;
	        font-weight: bold;
	        border-style: solid;
    	    border:0px;
	        width: 30%;
	        margin-right: auto;
	        margin-left: auto;
        }
        #fishType, #customerDetails {
            width: 40%;
            margin-top: 5%;
	        margin-right: auto;
        	margin-left: auto;
        }
        #submit {
            font-weight: bold;
            margin-right: auto;
            margin-top: 2%;
        	margin-left: 45%;
            background-color:  darkblue;
            color: #FFFFFF;
            width: 11em;
            height: 35px;
        }
        #result {
            font-family: Bahnschrift;
	        color:#000000;
	        text-align: center;
    	    font-weight:bold;
	        font-size:18px;
	        padding:10px;
        }
    </style>
</head>
<body>
<h1>Aqua Fish Stall</h1>
<form onsubmit="return getDisplay()" id="mainForm">
<table id="customerDetails">
    <tbody><tr>
        <td>Customer Name</td>
        <td><input type="text" id="name" placeholder="Enter your name"></td>
    </tr>
    <tr>
        <td>Phone Number</td>
        <td><input type="tel" id="phonenumber" placeholder="Enter your phone number"></td>
    </tr>
</tbody></table><hr>

<table id="fishType">
    <tbody><tr>
        <td>Anchovy</td>
        <td><input type="number" id="anchovy" min="0" step="0.5"> in Kg</td>
    </tr>
    <tr>
        <td>Barracuda</td>
        <td><input type="number" id="barracuda" min="0" step="0.5"> in Kg</td>
    </tr>
    <tr>
        <td>Crab</td>
        <td><input type="number" id="crab" min="0" step="0.5"> in Kg</td>
    </tr>
    <tr>
        <td>King Mackerel</td>
        <td><input type="number" id="kingmackerel" min="0" step="0.5"> in Kg</td>
    </tr>
    <tr>
        <td>Pomfret</td>
        <td><input type="number" id="pomfret" min="0" step="0.5"> in Kg</td>
    </tr>
    <tr>
        <td>Prawn</td>
        <td><input type="number" id="prawn" min="0" step="0.5"> in Kg</td>
    </tr>
    <tr>
        <td>Salmon</td>
        <td><input type="number" id="salmon" min="0" step="0.5"> in Kg</td>
    </tr>
    <tr>
        <td>Sardine</td>
        <td><input type="number" id="sardine" min="0" step="0.5"> in Kg</td>
    </tr>
    <tr>
        <td>Shark</td>
        <td><input type="number" id="shark" min="0" step="0.5"> in Kg</td>
    </tr>
    <tr>
        <td>Tilapia</td>
        <td><input type="number" id="tilapia" min="0" step="0.5"> in Kg</td>
    </tr>
</tbody></table>
<input type="submit" value="Submit" id="submit">
<div id="result"></div>
</form>

</body></html>

Aqua Fish Stall - Js

//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;
    }
}

Factorial Number - HTML

<!DOCTYPE html>
<html lang="en"><head>
<title>Factorial Number</title>
<style>
	body {
		margin-left: 150px;
		margin-top: 50px;
		background-color: lightcyan;
	}
</style>
<script src="script.js"></script>
</head>
<body>
<form onsubmit="return getFunction()">
<table>
	<tbody><tr>
		<td>Enter the number to get its factorial number</td>
		<td><input type="number" id="fact" name="fact" min="1" required=""></td>
	</tr>
	<tr>
		<td colspan="2"><input type="submit" id="factbtn" name="factbtn" value="Get Factorial Numbers"></td>
	</tr>
</tbody></table>
<div id="result"></div>
</form>

</body></html>

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

Welcome Message-JQuery

//Write Your jQuery Code Here
    $("#btnId").click(function(){
        var name = $("#txt").val();
        $("#address").text('"Welcome '+name+'!"')
    })

Select the Boxes

//WRITE YOUR jQUERY CODE HERE


$('#form input[type="checkbox"]').click(function(){
   var cnt = $('#form input[type="checkbox"]:checked').length
    if(cnt>1)
        $('#result').text(cnt+" boxes are checked")
    else if(cnt==1)
        $('#result').text(cnt+" box is checked")
    else
        $('#result').text("0 boxes are checked")
})

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').focusin(function(){
        $(this).css("background-color","green")
    })
     $('input').focusout(function(){
        $(this).css("background-color","grey")
    })

Employee Salary Calculation - Traversing

$("button").click(function() {
    var sum=0
    $('tbody tr').each(function(){
        // var t = $(this).find('td:last').html()
        // console.log(t)
        // t = parseInt(t)
        // sum+=t
        sum+=parseInt($(this).find('td:last').html())
    })
    
    $('#para1').text('Total Salary Paid: Rs. '+sum)
    
    
    
});

Customer Data - Events

//WRITE YOUR jQUERY CODE HERE

$('.add-row').click(function(){
    var name = $('#name').val()
    
    $('tbody').append('<tr><td><input type="checkbox" name="record"></td><td>'+name+'</td></tr>')
    
    
})

$('.delete-row').click(function(){
    $('tbody').find('input:checked').each(function(){
        $(this).closest('tr').remove()
    })
    
})

JQuery Events Log - Code Debugging

//Debug and obtain the result as given in the description

$('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()
    console.log(myStr)
    var len = myStr.length;
    $("#msg").append("The length of the given text is : "+len+"<br>");
}

JQuery Events in Sign In Page - Code Debugging

//Debug and obtain the result as given in the description
    $("#uname").change(function() {
	    $("form").append("<p>You have changed the Username</p>");
	
    });
    $("#pwd").change(function() {
  	    $("form").append("<p>You have changed the Password</p>");
    });
    
    $("#login").dblclick(function() {
  	    $("form").append("<p>You have double clicked on Sign In</p>");
    });
    
    $(':input[type="text"], :input[type="password"]').focusin(function(){
        $(this).attr('class', 'focusedin');
    });
    $(':input[type="text"], :input[type="password"]').focusout(function(){
        $(this).attr('class', 'focusedout');
    });
    
    // $(':input[type="password"]').focusin(function(){
    //     $(this).attr('class', 'focusedin');
    // }); 
    // $(':input[type="password"]').focusout(function(){
    //     $(this).attr('class', 'focusedout');
    // });

Web Technologies - Practice Questions

0 Comments

Menu Footer Widget

Web Technologies - Practice Questions

You may like these posts

0 Comments

Follow Us

Menu Footer Widget