Scribd
Upload
3 views

JS module

The document contains multiple HTML and JavaScript code snippets for different applications including a Fibonacci series generator, alliteration checker, ugly number checker, door cost calculator, and concert ticket booking system. Each section includes a form for user input and functions to process the input and display results. The code is structured with try/catch blocks for error handling and includes validation for user inputs.

Uploaded by

tg55arun
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

JS module

The document contains multiple HTML and JavaScript code snippets for different applications including a Fibonacci series generator, alliteration checker, ugly number checker, door cost calculator, and concert ticket booking system. Each section includes a form for user input and functions to process the input and display results. The code is structured with try/catch blocks for error handling and includes validation for user inputs.

Uploaded by

tg55arun
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 37

1. print fibonacci..

<!DOCTYPE html>
<html lang="en">
<head>
<title>Fibonacci Series</title>
<script src="script.js"></script>
</head>
<body>
<form onsubmit="getFibonacci();return false;">
<!-- Fill the code -->
Enter the number to get a fibonacci<input type="number" id="fibo" />
<br/>
<input type="submit" id="fibobtn" value="Get Fibonacci numbers"/>
<br/>
<div id="result"></div>
</form>
</body>
</html>
--------------------

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


function getFibonacci(){
var output_result='';
try{
// Get the fibo value using DOM functions
// Calculate the Fibonacci series
// Display the output in div with id "result"
var input_num = parseInt(document.getElementById('fibo').value);
if(input_num==0){
document.getElementById('result').innerHTML=0;
}else if(input_num >0){
for(var i=0; i<=input_num -1; i++){
output_result += fib(i) + ' ';
}
document.getElementById('result').innerHTML=output_result;
}else if(input_num <0){
document.getElementById('result').innerHTML='Please, specify a positive
number.';
}else{
document.getElementById('result').innerHTML='Please, specify a
number.';
}

}
catch(err){
document.getElementById("result").innerHTML=err;
}
}
function fib(inp_num){
if(inp_num == 0 || inp_num == 1){
return inp_num
} else{
return(fib(inp_num - 1)+fib(inp_num - 2))
}
}

---------------
2.ALLITERATION

<html>
<head><script src="script.js"></script></head>
<body>
<form onsubmit="checkAlliteration();return false;">

<!--fill the code-->


<label>Enter the letter</label>
<input type="text" id="char" pattern="[bcdfghjklmnpqrstvwxyz]"
required="required" />
<label>Enter the sentence</label>
<input type="text" id="alliter" required="required" />
<input type="submit" id="alliterbtn" value="Check Alliteration" />

</form>
<div id="result"></div>
</body>
</html>

-------------------
//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'
char = document.getElementById('char').value.toLowerCase();
alliter = document.getElementById('alliter').value.toLowerCase();
count = getCount(alliter);
if(count<3){
document.getElementById('result').innerHTML='Invalid number of words';
}
else if(!validateSentence(alliter)){
document.getElementById('result').innerHTML='Invalid sentence';
}
else{
document.getElementById('result').innerHTML='Your score is'+
getScore(alliter, char);
}

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 arr=str.split(' ');
count=arr.length;
return count;

}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(' ');
vowels = ['a', 'e', 'i', 'o', 'u'];
for(var i=0; i<words.length;i++){
for(var j=0; j<vowels.length;j++){
if(words[i].startsWith(vowels[j])){
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(' ');
count = 0;
if(words[0].startsWith(char) && words[1].startsWith(char) &&
words[2].startsWith(char)){
for(var i=0; i<words.length;i++){
if(words[i].startsWith(char)){
count++;
}
}
score =0;
if(count<2){
score=0
}
else{
score = 2+((count -3)*2);
}
return score;
}else{
return 0;
}

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

3.UGLY NUMBER

<!--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>
<table>
<tr>
<td>Enter the number to check for ugly number</td>
<td><input type='number' id='ugly' name='ugly' /></td>
</tr>
<tr>
<td colspan="2"><input type='submit' id='uglybtn' name='uglybtn'
value='check ugly Number'/></td>
</tr>
</table>
<div id='result'></div>
</body>
</html>
----------------------
//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>0){
if(checkUglyNumber(num)){
alert(num+" is an ugly number");
}else{
alert(num+" is not an ugly number");
}
}
else if(num.length === 0){
alert("Please, specify an input");
}
else if(num<=0){
alert("Invalid Input");
}

}
function checkUglyNumber(num)
{
// Check whether the num value is an ugly number or not. If yes, return
true. Else, return false
while(num!=1){
if(num%2 === 0){
num/=2;
}
else if(num%3 === 0){
num /=3;
}
else if(num%5 == 0){
num /=5;
}else{
return false;
}
}
return true;
}

-------------
4. MAXI INTERIOR MART
<!--Write necessary code wherever needed to complete this code challenge -->
<!DOCTYPE html>
<html>
<head>
<title>Maxi Interior Mart</title>
<style>

input[type="number"],input[type="text"]{
width:98%;
}
select{
width: 99%;
}
*{
font-weight:bold;
}
tr{
background-color: #506B70 ;
}
input:nth-child(even) {
background-color: #dddddd;
}
body{
background-color:#336699;
background-repeat: no-repeat;
background-size: 100%;
margin-top: 7%;
margin-bottom: 7%;
}
div{
margin-left: auto;
margin-right: auto;
text-align: center;
}
h3{
/* Fill the attributes and values */
color:#FFFFFF;
background-color:#242e39;
text-align: center;
width:50%;
margin-left: auto;
margin-right: auto;
font-size: 25px;
padding: 10px;
border-radius:6px;
}
table, td{
margin-left: auto;
margin-right: auto;
font-family: arial;
color:#FFFFFF;
border-collapse: collapse;
width: 50%;
border: 1px solid #242e39;
text-align: left;
padding: 8px;
}
#submit{
text-align: center;
border-radius: 6px;
color: #FFFFFF;
background-color: #042A2C;
width: 50%;
padding: 5px;
}
#result{
/* Fill the attributes and values */
color: #7A000A;
font-size: 20px;
}
</style>
</head>
<body>
<script type="text/javascript" >

function calculate()
{
var material = document.getElementById('material').value;
var height = parseInt(document.getElementById('height').value);
var width = parseInt(document.getElementById('width').value);

var cpsf = 0;
var doorcost = 0;
var totalcost =0;
/* Fill the Javascript code to display the message after
calculating the door cost */
if (material == "Wood"){
cpsf = 200;
}
else{
cpsf = 100;
}

doorcost = (height*width*cpsf);
totalcost = doorcost + (doorcost*7/100);

if(material == "Wood"){
document.getElementById('result').innerHTML = "cost for wood
door is RS. "+totalcost;
}
else{
document.getElementById('result').innerHTML = "cost for PVC
door is RS. "+totalcost;
}
return false;
}

</script>

<div>
<h3>Maxi Interior Mart</h3>
<form onsubmit="return calculate()">

<table>
<tr>
<td>Name</td>
<td><!-- Fill the code for Name -->
<input type="text" required="required" id="name" placeholder="Enter the
name" pattern="[a-zA-Z ]+">
</td>
</tr>
<tr>
<td>Door Material Type</td>
<td><!-- Fill the code for Door Material Type -->
<select name="" id="material">
<option value="Wood">Wood</option>
<option value="PVC">PVC</option>
</select>
</td>
</tr>
<tr>
<td>Door Height (in feet)</td>
<td><!-- Fill the code for Door Height -->
<input type="number" required="required" id="height">
</td>
</tr>
<tr>
<td>Door Width (in feet)</td>
<td><!-- Fill the code for Door Width -->
<input type="number" required="required" id="width">
</td>
</tr>
</table>
<p><input type="submit" id="submit" name="submit" value="SUBMIT"/></p>
<div id="result"> </div>
</form>
</div>
</body>
</html>
-------------------
5. 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><!--fill the code-->
<input type="text" pattern="[a-zA-z ]+" placeholder="Enter your
name" id="name" required="required">
</td>
</tr>
<tr>
<td>Gender</td>
<td><!--fill the code-->
<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>
<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">
</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>

-------------------

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

-----------------------
6.CHALLENGE ACADEMY OF EXCELLENCE

<!--Do not make any change in this code template; add codes in the areas
indicated-->
<!DOCTYPE html>
<html>
<head>
<title>Challenge Academy of Excellence</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body class="demo">
<div id="header" class="page-header"><h1>Challenge Academy of Excellence</h1></div>
<form>
<table>
<tr>
<td colspan="2" class="title">Personal Details</td>
</tr>
<tr>
<td>Name</td>
<td><!-- Fill the code for Name -->
<input type="text" id="name" pattern="[a-zA-Z ]+" required="required"/>
</td>
</tr>
<tr>
<td>Mobile number</td>
<td><!-- Fill the code for Mobile number -->
<input type="text" id="mobilenumber" pattern="[789][0-9]{9}"
required="required">
</td>
</tr>
<tr>
<td>Email Address</td>
<td><!-- Fill the code for Email address -->
<input type="email" id="email" required="required"/>
</td>
</tr>
<tr>
<td>Educational Qualification</td>
<td><select name="" id="education">
<option disabled selected hidden>-Select-</option>
<!-- Fill the code for education qualification options -->
<option value="UG">UG</option>
<option value="PG">PG</option>
<option value="Others">Others</option>
</select>
</td>
</tr>
<tr>
<td>Course Mode</td>
<td><select name="" id='coursemode'>
<option disabled selected hidden>-Select-</option>
<!-- Fill the code for course mode options -->
<option value="Online">Online</option>
<option value="Offline">Offline</option>
</select>
</td>
</tr>
<tr><td class="title">Courses Offered (with duration)</td><td
class="title">Course Fee</td></tr>
<tr><td rowspan="5"><!-- Fill the code for courses -->
<input type="checkbox" name="courses" value="Banking" id="banking">
<label for="banking">Banking</label><br>
<input type="checkbox" name="courses" value="Civil Service" id="civil">
<label for="civil">Civil Services</label><br>
<input type="checkbox" name="courses" value="Railways" id="railways">
<label for="railways">Railways</label><br>
<input type="checkbox" name="courses" value="Police" id="police">
<label for="police">Police</label><br>
<input type="checkbox" name="courses" value="Government Exams"
id="government">
<label for="government">Government Exams</label>

<td>Rs. 12300/- only</td></tr>


<tr><td>Rs. 15000/- only</td></tr>
<tr><td>Rs. 7500/- only</td></tr>
<tr><td>Rs. 8000/- only</td></tr>
<tr><td>Rs. 9100/- only</td></tr>
<tr><td colspan="2" class="title">Contact Us</td></tr>
<tr>
<td><p>Head Office</p><pre>
Challenge Academy of Excellence,
No.162 -A, RamNagar,
Near City Union Bank,
Coimbatore - 641004.
</pre></td>
<td><p>Contact Details</p> <pre>
<strong>Enquiry Number:</strong> +91 98765 43210, 9012345678
<strong>Enquiry Email Id:</strong> [email protected]
<strong>Hostel Enquiry Numbers:</strong>
+91 9994170110 (Ladies Hostel)
+91 9597122579 (Gents Hostel)
</pre></td>
</tr>
<tr>
<td colspan="2" style="color: red;">* Discount of 20% will be applied
on total (inclusive of GST & Study materials) for online course mode!!!</td>
</tr>
</table>
</form><br/>
<input type="submit" id='submit' class="btn btn-success" value="ENROLL"
onclick="return feesCalculation()"><br/><br/>
<!-- Fill the id value as per the description for displaying the result -->
<div id="result"></div>
</body>
</html>
---------------------------

var b, cs, r, p, ge;


function feesCalculation() {
/* Fill the Javascript code to display the message after calculating the
total payable amount */
/* totalFees() is invoked. The valued returned by totalFees() is sent as the
argument to : totalFees_Online(), which is invoked next */
/* selectedCourseName() is invoked next. Output statement is displayed in a
div component with id "result" */
var mode = document.getElementById('coursemode').value;
var coursename = selectedCourseName();
var totalfees = totalFees();
if(mode == 'Online'){
totalfees = totalFees_Online(totalfees);
}
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;

if(totalfees == 0){
document.getElementById('result').innerHTML = "No selection has been
made";
}
else{
document.getElementById('result').innerHTML = "Hi,"+name +"! you are
requested to pay Rs."+ totalfees +" as fees. Details on classes and time slots will
be mailed to "+email+"<br/>Course(s) you've been enrolled in:"+coursename;
}
return false;
}
function selectedCourseName() {
/* Fill the Javascript code - all the selected courses are concatenated
(separated by ;) and returned */
b = document.getElementById('banking');
cs= document.getElementById('civil');
r = document.getElementById('railways');
p = document.getElementById('police');
ge = document.getElementById('government');
var course = "";

if(b.checked){
course = course + "Banking; ";
}
if(cs.checked){
course = course + "Civil Service;";
}
if(r.checked){
course = course + "Railways;";
}
if(p.checked){
course = course + "Police;";
}
if(ge.checked){
course = course + "Government Exams;";
}
return course;
}
function totalFees() {
/* Fill the Javascript code - fees of all the selected courses take part in
calculation and the total fees is returned */
var fee = 0;
b = document.getElementById('banking');
cs = document.getElementById('civil');
r = document.getElementById('railways');
p= document.getElementById('police');
ge= document.getElementById('government');
if(b.checked){
fee += 12300;
}
if(cs.checked){
fee += 15000;
}
if(r.checked){
fee += 7500;
}
if(p.checked){
fee += 8000;
}
if (ge.checked){
fee += 9100;
}
return fee;
}
function totalFees_Online(fees) {
/* Fill the Javascript code - discount of 20% is applied (on the fees
received) and returned */
fee = fees;
return(fee - (fee * 20/100));
}

----------------------------------------
* {
font-weight: bold;
}
body {
background-image: linear-gradient(90deg, rgb(65, 91, 130) 27%, rgb(84, 118,
158) 35%, rgb(70, 134, 174) 46%);
}
#result {
/* Fill the attributes and values */
font-size: 20px;
text-align: center;
color: #ffffff;
}
h1 {
/* Fill the attributes and values */
color: #ffffff;
text-align: center;
}
.title {
/* Fill the attributes and values */
text-align: center;
color:#ffffff;
background-color: #34495E;
font-size: 18px;
font-weight: 500;
}
td {
border-color: #34495E;
background-color: #ffffff;
/* Fill the attributes and values */
padding: 7px;
width: 50%;
border-radius: 5PX;
border-style: solid;
border-width: 2px;
}
table {
/* Fill the attributes and values */
width: 70%;
margin-right: auto;
margin-left: auto;
}
#submit {
margin-left: 45%;
margin-right: auto;
width: 8%;
padding: 5px;
font-size: 18px;
}
input[type="email"], input[type="text"], input[type="number"], select{
width: 75%;
}

----------------------------------
7.ARTICLE (SEMATIC TAGS)

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


<!-- fill your code in the areas indicated -->
<!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>
The concept of traditional education has changed radically within the
last couple of years. Being physically present in a classroom isn't the only
learning option anymore-not
with the rise of the internet and new technologies, at least. Nowadays,
you have access to a quality education whenever and wherever you want, as long as
you have access to a computer.We
are now entering a new era - the revolution of online education.
</p>
<aside id='side'>
Over 30 percent if higher education students in the U.S. are taking
at least one distance course.
</aside>
</article>
<article id = 'art2'>
<h3 id='overview'>Why Online Education</h3>
<p> There's is no need to discount the skepticism surrounding education
through the internet. It's hard to understand the notion of
leaving behind the conventional classroom, especially if it's to face
this vast space called the Internet. However, that's not reason enough
to shy away from this alternative, which has proven to be valid and
useful for many students. According to the most recent survey from
Babson Survey Research Group, over 30 percentage of higher education
students in the United States are taking at least one distance
course. Online education is a sensible choice whether you're a teenager
or an adult. As a student, this can be useful learning
method for sharpening your skills in a different subject, or learning a
new skill. Keep on reading to learn five more reasons why you
should get involved in online education!</p>
</article>
<article id = 'art3'>
<h3 id='reason'>Reasons</h3>
<ol>
<li>It's flexible.</li>
<li>It offers a wide selection of programs.</li>
<li>It's accessible.</li>
<li>It allows for a customized learning experience.</li>
<li>It's more cost-effective than traditional education.</li>
</ol>
</article>
</div>
<footer id='foot'>
<p id='status'>Last Update Apr 4,2019</p>
</footer>
<footer id='foot'>
<p id='status'>Last Update Apr 4,2019</p>
</footer>

</body>
</html>
-----------------------------------------------------------------
8. MARS MOBILES

<!--Do not make any change in this code template; add codes in the areas
indicated-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>Mobile Booking Form </h1><hr/>
<form >
<table>
<!--fill the code-->
<tr>
<td>Name</td>
<td><input id="name" type="text" placeholder="Enter the name"></td>
</tr>
<tr>
<td>Email Id</td>
<td><input id="email" type="email" placeholder="[email protected]"></td>
</tr>
<tr>
<td>Contact Number</td>
<td><input id="contact" type="tel" placeholder="Enter Contact
Number"></td>
</tr>
<tr>
<td>Booking Date</td>
<td><input id="bookingDate" type="date" name="" value=""/></td>
</tr>
<tr>
<td>Mobile Model</td>
<td><select id="mobileType">
<option value="-Select Mobile-z">-Select Mobile-</option>
<option value="Oneplus Nord N10">Oneplus Nord N10</option>
<option value="Iphone 13">Iphone 13</option>
<option value="Samsung Galaxy Z">Samsung Galaxy Z</option>
</select>
</td>
</tr>
<tr>
<td>Expected Delivery Date</td>
<td><input id="deliveryDate" type="date" name="" value=""/></td>
</tr>
<tr>
<td>Address</td>
<td><textarea id="address" cols="25" rows="5" placeholder="Enter the
address" name=""></textarea></td>
</tr>
<tr>
<td><input id="btnSubmit" type="submit" value="Place order" name=""
onClick="return calculateCost();"></td>
<td><input id="btnReset" type="reset" value="Clear"></td>
</tr>
</table>

<div id="result"></div>
</form>
</body>
</html>
---------------------------------
//Don't change or delete the try/catch block
function calculateCost(){
try{
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var contact = document.getElementById("contact").value;
var mobileType = document.getElementById("mobileType").value;
var bookingDate = document.getElementById("bookingDate").value;
var deliveryDate = document.getElementById("deliveryDate").value;
var address = document.getElementById("address").value;
var vd = validateBookingDate(bookingDate);
if(vd === true){
var vdd = validateDeliveryDate(bookingDate,deliveryDate);
if(vdd === false){
alert("Expected delivery date can't be before the booking date !!")
}else{
var ed = expectedDeliveryDateCheck(bookingDate, deliveryDate);
if(ed === false){
alert("Expected delivery date cannot be same as the booking
date / 1 or 2 days from the booking date !!")
}
else{
var cost = getMobileCost(mobileType);
document.getElementById("result").innerHTML = "The order for "+
mobileType +" has been placed. You need to pay Rs."+ cost;
}
}
}
else{
alert("Booking date should be today !!");
}
}catch(err){
document.getElementById("result").innerHTML="Function calculateCost: "+err;
}
return false;
}

function validateBookingDate(bookingDate){
try{

//Validate the bookingDate as per the description


var today = new Date();
var ind = new Date(bookingDate);
if(today.toDateString() == ind.toDateString()) {
return true;
}
else{
return false;
}

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

function validateDeliveryDate(bookingDate,deliveryDate){
try{
var bd = new Date(bookingDate);
var dd = new Date(deliveryDate);
//Validate the deliveryDate as per the description
if(dd.getDate() == bd.getDate() || (dd.getMonth()+1)<(bd.getMonth()+1) ||
dd.getFullYear() < bd.getFullYear()){
return false;
}
else{
return true;
}

}catch(err){
document.getElementById("result").innerHTML="Function validateDeliveryDate:
"+err;
}
}
function expectedDeliveryDateCheck(bookingDate,deliveryDate){
try{
//Validate the deliveryDate as per the description
var bd = new Date(bookingDate);
var dd = new Date(deliveryDate);
if(dd.getDate() == bd.getDate() || (bd.getMonth()+1) < (bd.getMonth()+1) ||
dd.getFullYear() < bd.getFullYear()){
return false;
}
else if((bd.getDate()+1) == dd.getDate() || (bd.getDate()+2) ==
dd.getDate()){
return false;
}
else{
return true;
}
}catch(err){
document.getElementById("result").innerHTML="Function
expectedDeliveryDateCheck: "+err;
}
}

function getMobileCost(mobileType){
try{

//Return the mobile cost based on the mobileType


if(mobileType === "Oneplus Nord N10"){
return 28790;
}
else if(mobileType === "Iphone 13"){
return 89990;
}
else if(mobileType === "Samsung Galaxy Z"){
return 84999;
}
}catch(err){
document.getElementById("result").innerHTML="Function getMobileCost: "+err;
}
}

-------------------------------

/*fill the code*/


h1{
color: #33cccc;
text-align: center;
font-size: xx-large;
}
table{
margin-right: auto;
margin-left: auto;
text-align: left;
margin-top: 20px;
}
body{
font-family: Arial;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: #666699;
}

-----------------------------------------------------------------------------------
-------
9.ZOHAN CAMERA STORE

<!--Write necessary code wherever needed to complete this code challenge -->
<!DOCTYPE html>
<html>
<head>
<title>Zohan Camera Store</title>
<style>

input[type="number"],input[type="text"],input[type="tel"],textarea{
width:98%;
}
select{
width: 99%;
}
body{
background-color:#56A6AF;
background-repeat: no-repeat;
background-size: 100%;
margin-top: 7%;
margin-bottom: 7%;
}
div{
margin-left: auto;
margin-right: auto;
text-align: center;
}
h3{
/* Fill the attributes and values */
color : #FFFFFF;
font-size: 25px;
background-color: #27322B;
margin-left: auto;
margin-right: auto;
width: 50%;
font-weight: bold;
padding: 5px;
}
table,tr{
/* Fill the attributes and values */
width: 50%;
margin-left: auto;
margin-right: auto;
background-color: #C4C3CA;
font-family: Arial;
padding: 10px;
}
td{
border: solid 1px black;
/* Fill the attributes and values */
width: 50%;
text-align: left;
color: #453331;
padding: 5px;
}
#submit{
/* Fill the attributes and values */
color: #FFFFFF;
background-color: #323935;
padding: 5px;
width: 50%;
}
#result{
/* Fill the attributes and values */
color: #8D191B;
font-size: 18px;
font-family: Arial;
font-weight: bold;
padding: 10px;
}
</style>
</head>
<body>
<script >

function display()
{
/* Fill the Javascript code to display the message after calculating the total
order cost */
var model=document.getElementById('cameramodel').value;
var code=document.getElementById('couponcode').value;
var quantity=document.getElementById('quantity').value;
var price=0;
var cameracost;
var disPrice;
var totalCost;

if(model==="Zohan 1500D 24MP")


{
price=34000;
if(code==="ZOHAN25T")
{
cameracost=price*quantity;
disPrice=cameracost*(10/100);
totalCost=cameracost-disPrice;
document.getElementById('result').innerHTML="Your order has been
successfully placed and you need to pay Rs."+totalCost;
}
else
{
cameracost=price*quantity;
disPrice=cameracost*(15/100);
totalCost=cameracost-disPrice;
document.getElementById('result').innerHTML="Your order has been
successfully placed and you need to pay Rs."+totalCost;
}
}
else
{
price = 52100;
if(code==="ZOHAN25T")
{
cameracost=price*quantity;
disPrice=cameracost*(10/100);
totalCost=cameracost-disPrice;
}
else
{
cameracost=price*quantity;
disPrice=cameracost*(15/100);
totalCost=cameracost-disPrice;
}
document.getElementById('result').innerHTML ="Your order has been successfully
placed and you need to pay Rs."+totalCost;
}
return false;
}
</script>
<div>
<h3>Zohan Camera Store</h3>
<form onsubmit="return display()" >
<table>
<tr>
<td>Name</td>
<td><input id="name" type="text" placeholder="Enter the name"
pattern="[a-zA-Z ]+" required="required"></td>
</tr>
<tr>
<td>Phone Number</td>
<td><input id="phonenumber" type="text" placeholder="Enter the phone number"
required="required"></td>
</tr>
<tr>
<td>Address</td>
<td><textarea id="address" placeholder="Enter the address" rows="4"
cols="50" required="required">
</textarea>
</td>
</tr>
<tr>
<td>Camera Model</td>
<td>
<select id="cameramodel">
<option value="Zohan 1500D 24MP">Zohan 1500D 24MP</option>
<option value="Zohan 3000D 26MP">Zohan 3000D 26MP</option>
</select>
</td>
</tr>
<tr>
<td>Quantity</td>
<td><input id="quantity" type="number" placeholder="Enter the quantity"
required="required"></td>
</tr>
<tr>
<td>Coupon Code</td>
<td>
<select id="couponcode">
<option value="ZOHAN25T">ZOHAN25T</option>
<option value="ZOHAN84T">ZOHAN84T</option>
</select>
</td>
</tr>
</table>
<p><input type="submit" id="submit" name="submit" value="CONFIRM ORDER"/></p>
<div id="result"></div>
</form>
</div>
</body>
</html>
-------------------------------------------------

10.PRO TECH SERVICE CENTER

<!--Write necessary code wherever needed to complete this code challenge -->
<!--Specify ids as required - do not inlcude unnecessary space -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ProTech Service Center</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style type="text/css">
.demo {
/* Fill the attributes and values */
color: #900043;
font-weight: bold;
font-family: calibri;
}
body {
background-color:#0ca2b9;
width: 80%;
margin-left: 10%;
}
h2 {
/* Fill the attribute and value */
text-shadow: 2px 2px #900043;
color:#FFFFFF;
}
#submit, #reset {
font-weight: bold;
width: 10em;
height: 35px;
border-radius: 10px;
color:#FFFFFF;
}
table {
/* Fill the attributes and values */
width:60%;
margin-left:auto;
margin-right: auto;
}
input,textarea {
width:30em;
}
td{
padding:3px;
}
#yes, #no, #cleaning, #repair, #gas_refill {
width:10pt;
}
#result {
text-shadow: 2px 2px #900043;
/* Fill the attributes and values */
font-style:italic;
color:#FFFFFF;
font-weight: normal;
font-family: Candara;
font-size: 25px;
}
</style>

<script >
function bookAppointment()
{
/* Fill the Javascript code to display the message after calculating
the cost of service */
/* The page SHOULD NOT get redirected AFTER displaying the output */
var name= document.getElementById('customerName').value;
var acType = document.getElementById('acType').value;
var totalserviceCharge = 0;
if(document.getElementById('cleaning').checked){
totalserviceCharge = totalserviceCharge + 500;
}
if(document.getElementById('repair').checked){
totalserviceCharge = totalserviceCharge + 2000;
}
if(document.getElementById('gas_refill').checked){
totalserviceCharge = totalserviceCharge + 1000;
}
if(document.getElementById('yes').checked){
totalserviceCharge = totalserviceCharge + 1000;
document.getElementById('result').innerHTML = "Hello " + name + "!
The estimated Service charge for " +acType + " AC with yearly maintenance is Rs. "
+ totalserviceCharge;
}
else{
document.getElementById('result').innerHTML = "Hello " + name + "!
The estimated Service charge for " +acType + " AC without yearly maintenance is Rs.
" + totalserviceCharge;
}
}
</script>

</head>

<!-- Give the appropriate class name for body as per the description -->
<body class="demo">
<!-- Give the appropriate bootstrap class for header div: to add spacing around the
heading -->
<div id="header" class="page-header">
<h2>ProTech Service Center</h2>
</div>
<!-- Give an appropriate bootstrap class on submit and reset components within the
form given below, as per the description-->
<form onsubmit='bookAppointment(); return false'><!-- Invoke js funtion from form's
onsubmit preceeding the function name by a return keyword-->
<table>
<tr>
<td>Customer Name</td>
<td><!-- Fill the code for Customer Name -->
<input type="text" id="customerName" placeholder="Enter your name"
required/>
</td>
</tr>
<tr>
<td>Mobile Number</td>
<td><!-- Fill the code for Mobile Number -->
<input id='mobileNumber' type="tel" required />
</td>
</tr>
<tr>
<td>Email ID</td>
<td><!-- Fill the code for Email ID -->
<input type="email" placeholder="Enter your email" id="email"
required='required' />
</td>
</tr>
<tr>
<td>Address</td>
<td><!-- Fill the code for Address -->
<textarea id='address' placeholder="Enter your address" rows='5'
cols='25' required></textarea>
</td>
</tr>
<tr>
<td>AC Type</td>
<td><!-- Fill the code for AC Type -->
<input type="text" id="acType" list="acTypes" />
<datalist id='acTypes'>
<option value='Split'>Split</option>
<option value='Window'>Window</option>
</datalist>
</td>
</tr>
<tr>
<td>Service Type</td>
<td><!-- Fill the code for Service Type -->
<input type="checkbox" name="ServiceType" id="cleaning"
value='Cleaning' />
<label for='cleaning'>Cleaning</label>
<input type="checkbox" name="ServiceType" id="repair" value='Repair'
/>
<label for='repair'>Repair</label>
<input type="checkbox" name="ServiceType" id="gas_refill" value='Gas
Refill' />
<label for='gas_refill'>Gas Refill</label>
</td>
</tr>
<tr>
<td>Yearly Maintenance</td>
<td><!-- Fill the code for Yearly Maintenance -->
<input type="radio" id="yes" value='Yes' name='ymaintenance' required/>
<label for='yes'>Yes</label>
<input type="radio" id="no" value="No" name='ymaintenance' required/>
<label for='no'>No</label>
</td>
</tr>
<tr>
<td>Duration in months from previous service</td>
<td><!-- Fill the code for Duration -->
<input type="range" id="duration" min='0' max='6' step='1' title="0 to
6 Months" />
</td>
</tr>
<tr>
<td></td>
<td>
<!--style the submit button such that it indicates successful
action - using the appropriate bootstrap class-->
<input type="submit" id='submit' value="SUBMIT"
class="btn-success" />
<!--style the reset button such that it indicates caution to be
taken with this action - using the appropriate bootstrap class-->
<input type='reset' id='reset' value="CLEAR" class="btn-warning" />

</td>
</tr>
<tr>
<td colspan="2">
<!-- Fill the id value as per the description for displaying the
result -->
<div id="result"></div>
</td>
</tr>
</table>
</form>
</body>
</html>
---------------------------------------------
11.ESSENTIAL EDITIONS

<!--Write necessary code wherever needed to complete this code challenge -->
<!--Specify ids as required - don not inlcude unnecessary space -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Essential Editions</title>

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="script.js"></script>

<style>
*{
font-weight: bold;
}
body{
/* Fill the attribute and value */
background-color: #C8A869
}
td{
/* Fill the attributes and values */
border:2px solid #34495E;
width: 50%;
padding: 7px;
border-radius: 5px;
color: #ffffff;
background-color: #7a000a;
}
h1, #result{
/* Fill the attributes and values */
text-shadow: 1px 1px #ffffff;
color: #7a000a;
text-align: center;
}
#result{
/* Fill the attribute and value */
font-size: 20px;
}

.title{
background-color: #7a000a;
color:#ffffff;
}
.price{
height : 90px;
}
table{
width: 60%;
margin-left: auto;
margin-right: auto;
}
#submit{
margin-left: 45%;
font-weight:bold;
color:#ffffff;
padding:7px;
border-radius: 5px;
}
input[type="email"],input[type="text"], input[type="tel"]{
width:97%;
}
textarea{
width:98%;
}
</style>
</head>

<body>
<!-- Give the appropriate bootstrap class for header div: to add spacing
around the heading -->
<div id="header" class="page-header"><h1>Essential Editions</h1></div>
<form>
<table>
<tr>
<td colspan="2" id="title1" class="title">Dear customer, welcome to
Essential Editions Family ! Enjoy your first purchase using 250 super coins (SC)
!!</td>
</tr>
<tr>
<td>Name</td>
<td><!-- Fill the code for Name -->
<input type="text" id="name" required="required"/>
</td>
</tr>
<tr>
<td>Phone Number</td>
<td><!-- Fill the code for Phone Number -->
<input type = "tel" id="phno" placeholder="Enter the registered phone
number only" required="required"/>
</td>
</tr>
<tr>
<td>Email</td>
<td><!-- Fill the code for Email ID -->
<input type="email" id="email" required="required"/>
</td>
</tr>
<tr>
<td>Delivery Address</td>
<td><!-- Fill the code for Address -->
<textarea id="Address" rows="3" cols="50"
required="required"></textarea>
</td>
</tr>
<tr>
<td id="title2" class="title">Combo offers on Essential Oils</td>
<td id="title3" class="title">Payable Amount with Super Coin
option</td>
</tr>
<tr>
<td rowspan="3"><!-- Fill the code for Option1 -->
<input type="checkbox" name="essentials" id="option1"
value="option1"> Exotic Aromas Essential Oils - Lavender oil, Lemongrass oil,
Jasmine oil, Mandarin oil, Rose oil (Pack of 5)<br/><br/>
<!-- Fill the code for Option2 -->
<input type="checkbox" name="essentials" id="option2"
value="option2">All Naturals Aromatherapy Brown Bracelet Combo Set of 12 Essential
Oils - 15 ml Each (Pack of 12)<br/><br/>
<!-- Fill the code for Option3 -->
<input type="checkbox" name="essentials" id="option3"
value="option3"> Precious Aromas Essential Oil Lavender, Rose, Tea Tree, Jasmine,
Ylang Ylang, Mandarin, Lemongrass, Peppermint, Citronella, Pure & Natural (Pack of
9)
</td>
<td id="price1" class="price">Rs.530<br/><s>Rs.1995</s> (73% off)</td>
</tr>
<tr>
<td id="price2" class="price">Rs.899<br/><s>Rs.1799</s> (50% off)</td>
</tr>
<tr>
<td id="price3" class="price">Rs.799<br/><s>Rs.4389</s> (82% off)</td>
</tr>
<tr>
<td colspan="2"><!-- Fill the code for Super coin check -->
<input type="checkbox" name="sc" id="sc" value='yes' >Yes, I want to do
my purchase using super coins !</td>
</tr>
</table>

<br/>
<!-- Give an appropriate bootstrap class on submit component -->
<input type="submit" value="PLACE ORDER" id="submit" class="btn-success"
onclick="return purchaseOnSC()">
</form>
<br/><br/>
<!-- Give the appropriate id for this div as per the description -->
<div id="result"></div>
</body>
</html>
--------------------------------------

function purchaseOnSC()
{
/* When super coin based purchase IS checked, invoke calculatePayableAmount()
function */
/* Specify 3 conditions for 3 possible outputs & for each condition, its
corresponding output statement */
var scoin=250;
var sc = document.getElementById('sc');
price = calculatePayableAmount();

if(sc.checked===true)
{
if(price===0)
{
document.getElementById('result').innerHTML="No selection has been made";
}
else if(price>= 1200)
{
document.getElementById('result').innerHTML="Total payable amount is
Rs."+(price-250);
}
else
{
document.getElementById('result').innerHTML="Total payable amount is
Rs."+price;
}
}
else
{
if(price===0)
{
document.getElementById('result').innerHTML="No selected has been made";
}
else
{
document.getElementById('result').innerHTML="Total payable amount is Rs." +
price;
}
}
return false;
}

function calculatePayableAmount()
{
var price=0;
var o1=document.getElementById('option1');
var o2=document.getElementById('option2');
var o3=document.getElementById('option3');
if(o1.checked===true)
{
price=price+430;
}
if(o2.checked===true)
{
price=price+850;
}
if(o3.checked===true)
{
price=price+650;
}
return price;
}

You might also like