Cognizant Html css js CC

1. ATLAS PACKERS AND MOVERS:----

<!DOCTYPE html>

<html>

<head>

<title>ATLAS PACKERS AND MOVERS</title>

<style>

.left{

left:0; }

.right{

right:0;

background-color:#548AE3;

width:60%;

padding:10px; }

.b{

color:#FFFFFF; }

.c{

color:#C21807;

font-size:15px;

font-family:"Georgia"; }

#image{

width:80%;

height:90%; }

h3{

margin-right:auto;

margin-left:auto;

text-align:center;

width:50%;

font-family:"Georgia";

border-radius:6px; }

table,th,td{

border-spacing:2px;

font-size:15px;

font-family:"Georgia";

border-radius:6px;

padding:3px;

border: 1px solid white; }

td{

color:#FFFFFF;

background-color:#548EA3;

border-spacing:5px; }

#submit{

color:#c21807;

font-weight:bold;

background-color:#ffffff;

font-size:15px;

font-family:"Georgia";

border-radius:6px;

padding:3px; }

#submit:hover{

background-color:#FF0000;

color:#ffffff; }

h3{

color:#c21807;

font-weight:bold;

background-color:#ffffff;

font-size:15px;

font-family:"Georgia";

border-radius:6px;

padding:3px; }

</style>

</head>

<body>

<div>

<table>

<tr>

<td>

<div>

<center><h3>ATLAS PACKERS AND MOVERS</h3></center>

<form>

<table>

<a href="#reloc" id="reloc_info" class="b">Relocation-info</a><br/>

<a href="#personal" id="personal_info" class="b">Personal-info</a><br/>

<a href="#quote" id="quote_info" class="b">Get a quote!</a><br/></td>

</tr>

<tr><td colspan="2"><label id="reloc" class="c">Relocation Information</label></td></tr>

<tr>

<td>

<option value="Select your current city">Select your current city</option>

<option value="Chennai">Chennai</option>

<option value="Bangalore">Bangalore</option>

<option value="Hyderabad">Hyderabad</option>

<option value="Mumbai">Mumbai</option>

</select>

</td>

</tr>

<tr>

<td><label >Select Category</label></td><td>

<input type="radio" name ="category" id="home" required><label for="home">Home

Relocation</label>

<input type="radio" name ="category" id="factory" required><label

for="factory">Factory/Office Relocation</label>

</td>

</tr>

<tr>

<td> <textarea id="faddress" placeholder="From address" rows="4" cols="50"

required></textarea> </td>

<td><textarea id="taddress" placeholder="To address" rows="4" cols="50"

required></textarea></td>

</tr>

<tr>

<td> <label>Distance in km(approx)</label></td>

</tr>

<label id="personal" class="c">Personal Information</label>

</td>

</tr>

<tr>

<td><label >Customer Name</label></td><td> <input type="text" id="cname"

pattern="[A-Za-z\\s]*" placeholder="Enter the customer name" required> </td>

</tr>

<tr>

<td><label >Phone Number</label></td><td> <input type="tel" pattern="[7,8,9]{1}[0-9]{9}"

id="phno" placeholder="Enter the phone number" required> </td>

</tr>

<tr>

<td><label >Email ID</label></td><td> <input type="email" id="email" placeholder="Enter

the email id" required> </td>

</tr>

<tr>

<label id="quote" class="c"> Get a quote:</label>

</td>

</tr>

<tr>

<td><label>Possible charges involved</label></td>

<td>

<input type="checkbox" name="category" id="packing"><label for="packing">Packing

Charges</label>

<input type="checkbox" name="category" id="loading"><label for="loading">Loading

Charges</label>

<input type="checkbox" name="category" id="transportation"><label

for="transportation">Transportation Charges</label>

<input type="checkbox" name="category" id="unloading"><label for="unloadig">Unloading

Charges</label>

<input type="checkbox" name="category" id="unpacking"><label

for="unpacking">Unpacking Charges</label>

<input type="checkbox" name="category" id="escort"><label for="escort">Escort

Charges</label>

<input type="checkbox" name="category" id="octroi"><label for="octroi">Octroi

Charges</label>

</td>

</tr>

<tr>

<td colspan="2"><label>**Quote you recieve will include service tax of 12.3%</label></td>

</tr>

</table>

<button type="submit" id="submit" value="GET A QUOTE">GET A QUOTE</button>

</form>

</div>

</td></tr>

</table>

</div>

</body>

</html>

2.DREAM THEME PARK CODE:---

<!DOCTYPE html>

<html>

<head>

<title>DREAM Theme Park</title>

body {

background-color: #FFAACC;

}

h1 {

color: #770080;

font-family: Courier New;

font-style: italic;

text-align: center;

}

form {

margin: auto;

width: 300px;

}

#result {

color: #770080;

font-weight: bold;

}

</style>

function costcalculation() {

var discount = 0;

var amount = 0;

var totalcost = 0;

var name = document.getElementById("customerName").value;

var adult = document.getElementById("adults").value;

var children = document.getElementById("children").value;

amount = (adult * 1500) + (children * 1200);

var type = document.getElementById("bookingType").value;

if (type == "Normal")

discount = 0;

else if (type == "School")

discount = (0.50 * amount);

else if (type == "Corporate")

discount = (0.25 * amount);

totalcost = (amount - discount);

document.getElementById("result").innerHTML = ("Thank you " + name + ". Total

cost to be paid is " + totalcost);

return false;

}

</script>

</head>

<body>

<h1>Book Your Tickets</h1>

<table>

<tr>

<td>Customer Name</td>

<td><input type="text" name="customerName" id="customerName" required

pattern="[a-zA-Z\s]+" placeholder="Enter your name" /> </td>

</tr>

<tr>

<td>Address</td>

<td><textarea name="address" id="Address" required rows="5"

cols="20"></textarea></td>

</tr>

<tr>

<td>Email ID</td>

</tr>

<tr>

<td>Mobile Number</td>

<td><input type="tel" name="customerMobileNumber" id="customerMobileNumber"

required> </td>

</tr>

<tr>

<td>Park Location</td>

<td><input type="radio" name="location" id="Dlocation" value="Delhi" required>Delhi

<input type="radio" name="location" id="Mlocation" value="Mumbai"

required>Mumbai

</td>

</tr>

<tr>

<td>Date of Visit</td>

</tr>

<tr>

<td>Booking Type</td>

</datalist>

</td>

</tr>

<tr>

<td>Adult</td>

</td>

</tr>

<tr>

<td>Children</td>

</tr>

<tr>

<td>

</td>

<td><button type="reset" id="clear" name="clear">Reset</button></td>

</tr>

</table>

</form>

</body></html>

3. OUTLOOK FAN MARKET:----

<!DOCTYPE html>

<html>

<head>

<!-- Do specify all the component-ids (incl. div ids) correctly for your code to get evaluated

successfully -->

<title>Outlook Fan Market</title>

// Do not use let keyword to initialize a javascript variable. Instead use var.

function billCalculation() {

var us=document.getElementById("usha").value;

var ba=document.getElementById("bajaj").value;

var or=document.getElementById("orient").value;

var ha=document.getElementById("havells").value;

var cr=document.getElementById("crompton").value;

var lu=document.getElementById("luminous").value;

var ma=document.getElementById("maharaja").value;

var res=0;

res=((1999*us)+(1500*ba)+(2100*or)+(1785*ha)+(1960*cr)+(1655*lu)+(2249*ma));

if (res>5500){

res = res-(res*0.15); }

document.getElementById("result").innerHTML="Hi, You have to pay Rs."+res+"Thanks for

selecting us!!!";

return false;

}

function cleardata()

{

document.getElementById("name").innerHTML=" ";

document.getElementById("contactNo").innerHTML=" ";

document.getElementById("email").innerHTML=" ";

document.getElementById("usha").value=" ";

document.getElementById("bajaj").value=" ";

document.getElementById("orient").value=" ";

document.getElementById("havells").value=" ";

document.getElementById("crompton").value=" ";

document.getElementById("luminous").value=" ";

document.getElementById("maharaja").value=" ";

document.getElementById("date").innerHTML=" ";

document.getElementById("address").innerHTML=" ";

}

</script>

::placeholder {

color: #6A5ACD;

opacity: 2;

}

input[type="email"], input[type="tel"], input[type="number"],

input[type="text"],input[type="date"], textarea, select {

width: 85%;

color: #808B96;

font-weight: bold;

border-radius: 6px;

border-style: solid;

border-width: 2px;

border-color: #FFA07A; }

input[type="submit"] {

background-color: #08088A;

}

label span {

color: #F0F8FF;

}

body {

background-color: #2e4053 ;

}

h1 {

color: #ffffff;

font-family: Verdana;

border-style: 1px solid ;

border-radius: 6px;

width: 50%;

margin-right: auto;

margin-left: auto;

background-color: #1a5276;

text-align: center;

}

#result {

font-weight: bold;

font-family: bahnschrift;

font-size: 24px;

margin-right: auto;

margin-left: 18em;

color: #b3b6b7; }

#submit {

font-weight: bold;

font-family: bahnschrift;

color: #ffefd5;

background: transparent;

margin-right: auto;

width: 13em;

height: 35px;

margin-left: 35em;

}

#reset {

font-weight: bold;

font-family: bahnschrift;

color: #ffefd5;

background: transparent;

margin-right: auto;

width: 13em;

height: 35px;

margin-left: 18em;

}

table {

width: 50%;

margin-right: auto;

margin-left: auto;

border-style: 3px groove;

border-spacing: 5px;

border-radius: 6px;

}

#billing td {

border-width:1px;

border-style: solid;

border-color: #F4A460;

padding: 5px;

}

.b {

width: 50%;

margin-right: 14em;

margin-left: auto;

}

#brandName td {

margin-left: auto;

margin-right: auto;

width: 50%;

border-width: 1px;

border-style: solid;

border-spacing: 5px;

border-radius: 6px;

}

#submit:hover, #reset:hover {

background-color: #2E8B57;

color: #FFFFFF;

}

</style>

</head>

<body>

<h1>Outlook Fan Market</h1>

<tr>

</tr>

<tr>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

<label><span><b>Contact No*</b></span></label>

</td>

<td>

</td>

</tr>

<tr>

<td>

<label><span><b>E-mail address</b></span></label>

</td>

<td>

</td>

</tr>

<tr>

<td>

<label><span><b>Brand Name</b></span></label>

</td>

<td>

<tr>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

<label><span><b>Bajaj</b></span></label>

</td>

<td>

</td>

</tr>

<tr>

<td>

<label><span><b>Orient</b></span></label>

</td>

<td>

</td>

</tr>

<tr>

<td>

<label><span><b>Havells</b></span></label>

</td>

<td>

</td>

</tr>

<tr>

<td>

<label><span><b>Crompton</b></span></label>

</td>

<td>

</td>

</tr>

<tr>

<td>

<label><span><b>Luminous</b></span></label>

</td>

<td>

</td>

</tr>

<tr>

<td>

<label><span><b>Maharaja</b></span></label>

</td>

<td>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>

<label><span><b>Date of Booking*</b></span></label>

</td>

<td>

</td>

</tr>

<tr>

<td>

<label><span><b>Address</b></span></label>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

</tr>

</table>

</form>

</body>

</html>

4.DISCOUNT PRICE:------

Line wrap

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

font-style: italic;

font-weight: bold;

text-align: center;

color: #b03060;

}

table {

float: left;

margin-left: 35%;

border-style: solid 5px;

border-spacing: 10px;

border-collapse: collapse;

border-width: 30%;

}

tr,

td {

border-style: solid 5px;

border-width: 30%;

border-collapse: collapse;

padding: 10px;

border: 5px solid black;

}

#submit {

margin-left: 45%;

}

div {

text-align: center;

font-weight: bold;

}

#result {

font-style: italic;

color: #FF0000;

font-size: 40px;

text-align: center;

font-weight: bold;

}

#discount {

font-size: 25px;

text-align: center;

font-weight: bold;

}

</style>

</head>

<h1>DISCOUNT PRICE</h1>

<form>

<table>

<tr>

<td>Product Name</td>

</tr>

<tr>

<td>Product Price</td>

</tr>

<tr>

<td>Season</td>

<option value="summer">SUMMER SALE</option>

<option value="clearance">CLEARANCE SALE</option>

</select></td>

</tr>

</table><br>

<input type="button" name="submit" value="GET DISCOUNT PRICE" id="submit"

onclick="discountamount()">

</form>

function discountamount() {

var p = document.getElementById("price").value;

var newamount;

var d;

var s = document.getElementById("season").value;

if (s == 'summer') {

d = 10;

newamount = p - (p * (0.1));

} else if (s == 'newyear') {

d = 5;

newamount = p - (p * (0.05));

} else {

d = 15;

newamount = p - (p * (0.15));

}

document.getElementById("discount").innerHTML = "The discount is " + d + "%";

document.getElementById("result").innerHTML = "The discount price : Rs " +

newamount;

}

</script>

</body>

</html>

5.HEALTH CARE CENTRE:-----

<!DOCTYPE html>

<html>

<head>

::placeholder {

color: #40E0D0;

opacity: 2;

}

input[type="email"], input[type="tel"], input[type="number"], input[type="text"],

input[type="date"], textarea, select, #services #address {

width: 85%;

color: #40E0D0;

font-weight: bold;

background: transparent;

border-radius: 6px;

border-style: solid;

border-width: 2px;

border-color: #FFA07A;

}

input[type="button"] {

background-color: #08088A;

}

input[type="checkbox"]#terms:checked+a {

color: #FFFF00;

}

body {

/* Fill the attribute and value */

background-color: #191970;

}

h3 {

/* Fill the attributes and values */

color: #FFFFFF;

background-color: #696969;

margin-left: auto;

margin-right: auto;

text-align: center;

width: 40%;

font-family: Verdana;

border-radius: 6px;

border-style: 1px solid;

}

label span{

color: #F0F8FF;

}

table {

/* Fill the attributes and values */

width: 30%;

border-style: 3px groove;

margin-left: auto;

margin-right: auto;

border-radius: 6px;

border-spacing: 5px;

}

#appointment td {

/* Fill the attributes and values */

border-width: 1px;

border-color: #f4a460;

border-style: solid;

font: 15px;

padding: 8px;

}

#terms_ref {

color: #9ACD32;

}

#submit {

/* Fill the attributes and values */

color: #ffefd5;

font-weight: bold;

background: transparent;

border-radius: 6px;

}

#submit:hover {

background-color: #8B4513;

color: #FFFFFF;

}

#services{

border-radius: 25px;

}

#serviceList{

border-radius: 25px;

}

p.b {

width: 50%;

margin-left: auto;

margin-right: 14em;

color: #90EE90;

box-sizing: border box;

}

</style>

</head>

<body>

<h3>Health Care Center</h3>

<tr>

</tr>

<tr>

<td>

</td>

<td>

<input type="text" id="name" placeholder="Enter your name"

name="Name">

</td>

</tr>

<tr>

<td>

<label><span><b>Gender*</b></span>:</label>

</td>

<td>

<input type="radio" id="male" name="gender" value="male"

><label><span><b> Male </b></span></label>

<input type="radio" id="female" name="gender"

value="female" ><label><span><b> Female</b></span></label>

<input type="radio" id="others" name="gender" value="others"

> <label><span><b> Others</b></span></label>

</td>

</tr>

<tr>

<td>

<label><span><b>E-mail address</b></span>:</label>

</td>

<td>

<input type = "text" id="email"

placeholder="example:abc@gmail.com" name="email">

</td>

</tr>

<tr>

<td>

<label><span><b>Mobile No*</b></span>:</label>

</td>

<td>

<input type = "number" id="mobileNo" placeholder="Enter your

mobileNo" name="phone">

</td>

</tr>

<tr>

<td>

<label><span><b>Services*</b></span>:</label>

</td>

<td>

</datalist>

</td>

</tr>

<tr>

<td>

</td>

<td>

<input type="number" id="date" placeholder="mm/dd/yyyy"

name="name">

</td>

</tr>

<tr>

<td>

</td>

<td>

<option value="-Select one-"> - Select one</option>

</select>

</td>

</tr>

<tr>

<td>

<label><span><b>Address</b></span>:</label>

</td>

<td>

<textarea id="address" rows="5" cols="25" placeholder="Enter

your address"></textarea>

</td>

</tr>

</table>

<p class="b"> <label for="checkbox1" class="checkboxes"> <input type="checkbox"

id="terms_ref" name="checked" value="yes" class="checkboxes"><a href="#submit"> I

agree to terms of service and privacy policy. </a></label></p>

</body>

</html>

6.DAC BANK AVAIL LOAN:----

<!DOCTYPE html>

<head>

<title>DAC BANK - AVAIL LOAN</title>

<style>

body {

background-color: #FFAACC;

}

h1 {

color: #770080;

font-family: cursive;

text-align: center;

}

#result {

font-weight: bold;

color: #770080;

}

</style>

function displayMessage() {

var customerName = document.getElementById("customerName").value;

var loanAmount = document.getElementById("loanAmount").value;

document.getElementById("result").innerHTML = "Thank You " + customerName + ".

Your Loan Amount is " + loanAmount;

}

</script>

</head>

<body>

<h1>DAC BANK - AVAIL LOAN</h1>

<table>

<tr>

<td>

Customer Name

</td>

<td>

</td>

</tr>

<tr>

<td>Address</td>

<td><textarea name="customerAddress" id="customerAddress" rows="5"

cols="20"></textarea></td>

</tr>

<tr>

<td>Gender</td>

<td><input type="radio" name="gender" value="male">Male

<input type="radio" name="gender" value="female">Female

</td>

</tr>

<tr>

<td>Email ID</td>

</tr>

<tr>

<td>Mobile Number</td>

<td><input type="text" id="customerMobileNumber"

name="customerMobileNumber" pattern="[7-9]{1}[0-9]{9}"

maxlength="10"></td>

</tr>

<tr>

<td>Date of Birth</td>

</tr>

<tr>

<option value="Vehicle">Vehicle</option>

<option value="Education">Education</option>

</datalist>

</td>

</tr>

<tr>

<td>Loan Amount</td>

<td><input type="text" name="loanAmount" id="loanAmount" placeholder="Enter

the Amount" required>

</td>

</tr>

<tr>

<td>Tenure</td>

<td><input type="number" id="loanTenure" name="loanTenure" min="1"

max="5"></td>

</tr>

<tr>

<td><input type="button" name="submit" value="Avail Loan"

onclick="displayMessage();"></td>

</tr>

</table>

</center>

</body>

</html>

-------------------------SAME PROGRAM WRITTEN BELOW------------------------------------

<html>

<head>

<style>

body {

background-color: #FFAACC;

}

h1 {

color: #770080;

font-family: cursive;

text-align: center;

}

#result {

font-weight: bold;

color: #770080;

}

</style>

function display() {

var name = document.getElementsByName("customerName")[0].value;

var amount = document.getElementsByName("loanAmount")[0].value;

document.getElementById("result").innerHTML = "Thank you " + name + ". Your

Loan Amount is " + amount;

}

</script>

</head>

<body>

<h1>DAC BANK - AVAIL LOAN</h1>

<form>

<table>

<tr>

<td>Customer Name</td>

<td>

</td>

</tr>

<tr>

<td>Address</td>

<td>

</td>

</tr>

<tr>

<td>Gender</td>

<td>

<input type="radio" name="gender" value="male">Male

<input type="radio" name="gender" value="female">Female

</td>

</tr>

<tr>

<td>Email ID</td>

<td>

</td>

</tr>

<tr>

<td>Mobile Number</td>

<td>

<input type="text" name="customerMobileNumber" id="mob"

pattern="[7-9]{1}[0-9]{9}" maxlength="10">

</td>

</tr>

<tr>

<td>Date of Birth</td>

<td>

</td>

</tr>

<tr>

<td>

<option value="Vehicle">Vehicle</option>

<option value="Education">Education</option>

</datalist>

</td>

</tr>

<tr>

<td>Loan Amount</td>

<td>

<input type="text" name="loanAmount" id="loanAmount" placeholder="Enter the

Amount" required>

</td>

</tr>

<tr>

<td>Tenure</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

</tr>

</table>

</center>

</form>

</body></html>

7. PALINDROME CHECK:-----------------------------------------

<html>

<head>

function CheckPalindrome()

{

var str=document.getElementById("Palin").value;

str=str.toLowerCase();

str=str.replace(/\s/g,'');

var rev=str.split('').reverse().join('');

if(str==rev)

alert("The entry is a palindrome.");

else

alert("The entry is not a palindrome.");

}

</script>

</head>

<body>

<form>

<table>

<tr>

<td>Enter word/sentence to check for palindrome:</td>

</tr>

<tr>

<td>

<Input type="button" name="palinbtn" value="CheckPalindrome"

onclick="CheckPalindrome()">

</td>

</tr>

</table>

</form>

</body>

</html>

8.PIGGY BANK:----

Line wrap

<!DOCTYPE html>

<html>

<head>

<title>PIGGY BANK SAVINGS CALCULATOR</title>

body {

background-color: #F0E68C;

}

h1 {

color: #800080;

font-family: cursive;

text-align: center;

}

</style>

function calculateTotalSavings() {

var customerType;

var savingType = document.getElementById("savingType").value;

var amount = parseInt(document.getElementById("amount").value);

var tenure = document.getElementById("tenure").value;

var interest = 0;

var totalSavings = 0;

//taking value from radio button

if (document.getElementById("NC").checked) {

customerType = "Normal Citizen";

} else if (document.getElementById("SC").checked) {

customerType = "Senior Citizen";

}

if (savingType == "FD") {

if (tenure <= 2) {

interest = 7;

} else if (tenure <= 4) {

interest = 7.5;

} else if (tenure <= 5) {

interest = 8;

}

if (savingType == "RD") {

if (tenure <= 2) {

interest = 6.5;

} else if (tenure <= 4) {

interest = 6;

} else if (tenure <= 5) {

interest = 5.5;

}

if (customerType == "Senior Citizen") {

interest = interest + 0.5;

}

alert(customerType + " " + savingType + " " + amount + " " + tenure + " " + interest);

totalSavings = (amount + (amount * tenure * interest) / 100);

alert(totalSavings);

document.getElementById("result").innerHTML = "Total Saving done " + totalSavings;

return false;

}

</script>

</head>

<body>

<h1>PIGGY BANK SAVINGS CALCULATOR</h1>

<table>

<tr>

<td>Customer Name</td>

</tr>

<tr>

<td>Customer Type</td>

<td><input type="radio" name="customerType" id="NC" value="Normal Citizen"

required>Normal Citizen</td>

<td><input type="radio" name="customerType" id="SC" value="Senior Citizen"

required>Senior Citizen</td>

</tr>

<tr>

<td>Address & ID Proof</td>

<td><input type="checkbox" id="addressProof1" name="addressProof" value="Adhar

Card">Adhar Card</td>

<td><input type="checkbox" id="addressProof2" name="addressProof" value="Pan

Card">Pan Card</td>

<td><input type="checkbox" id="addressProof3" name="addressProof"

value="Driving License">Driving License</td>

<td><input type="checkbox" id="addressProof4" name="addressProof"

value="Passport">Passport</td>

<td><input type="checkbox" id="addressProof5" name="addressProof" value="Voter

Id">Voter Id</td>

</tr>

<tr>

<td>Mobile Number</td>

<td><input type="number" name="customerMobileNumber"

id="customerMobileNumber" pattern="[789]{1}[0-9]{9}" required></td>

</tr>

<tr>

<td>Type of Savings</td>

<td><input list="savings" name="savingType" id="savingType" autocomplete="on"

required>

</datalist>

</td>

</tr>

<tr>

<td>Amount</td>

</tr>

<!--- range and we have to display range value using a label with a id and using

method oninput="document.getElementById('tenurerange').innerHTML = this.value" --->

<tr>

<td>Tenure</td>

<td>

<input type="range" name="tenure" id="tenure" min="1" max="5" value="1" required

oninput="document.getElementById('tenurerange').innerHTML = this.value" />

</td>

</tr>

<tr>

<td><input type="submit" id="submit" name="submit" value="Calculate

Savings"></td>

</tr>

</table>

</form>

</body>

</html>

9.FOOTBALL LEAGUE PERFORMANCE:-------------------------------------------

<!DOCTYPE html>

<html>

<head>

<title>Football League Performance</title>

body {

background-color: #FFFFFF;

}

h1 {

color: #FF0000;

font-style: italic;

font-family: Bookman Old Style;

}

#result {

font-style: bold;

color: #0000FF;

}

#playerName {

margin-left: 65px;

}

#teamName {

margin-left: 70px;

}

#clubAddress,

#coachName {

margin-left: 60px;

}

#email {

margin-left: 85px;

}

#mobileNumber {

margin-left: 40px;

}

#leagueName,

#coachRating {

margin-left: 55px;

}

</style>

</head>

<body>

<h1>Football League Performance Rating Form</h1>

</center>

</header>

<label for="playerNameTxt">Player Name</label>

<br />

<br />

<label for="address">Club Address</label>

<textarea id="clubAddress" name="clubAddress" rows="5"

columns="25"></textarea>

<br />

<label

for="genderRadio">Gender</label>        

Male: <input type="radio" id="male" name="Gender" value="Male"

required>   

Female: <input type="radio" id="female" name="Gender" value="Female">

<br />

<label for="emailTxt">Email ID</label>

<input type="text" id="email" name="email"

pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" required />

<br />

<label for="mobiletxt">Mobile Number</label>

<input type="text" id="mobileNumber" name="mobiletxt" required

pattern="[987]{1}[0-9]{9}" />

<br />

<label for="coachNameTxt">Coach Name</label>

<br />

<label for="leagueNameTxt">League Name</label>

<br />

<label for="leagueCompletionDate">League Completion Date</label>

<input type="text" id="leagueCompletionDate" name="leagueCompletionDate"

pattern="(0?[1-9]|1[012])/(0?[1-9]|[12][0-9]|3[01])/\d{4}" required />

<br />

<label for="coach Rating">Coach Rating</label>

<option value="Excellent">Excellent</option>

<option value="Average">Average</option>

<option value="Need improvement">Need improvement</option>

</select>

</form>

function calculatePerformanceRating() {

var name = document.getElementById("playerName").value;

var actualName;

var rating;

if (document.getElementById('male').checked) {

actualName = "Mr." + name;

} else {

actualName = "Mrs." + name;

}

var coachrate = document.getElementById("coachRating").value;

switch (coachrate) {

case "Excellent":

rating = 5;

break;

case "Good":

rating = 4;

break;

case "Average":

rating = 3;

break;

case "Need improvement":

rating = 2;

break;

case "Poor":

rating = 1;

break;

}

document.getElementById("result").innerHTML = "Performance Rating of " +

actualName + " is " + rating + "-" + coachrate;

return false;

}

</script>

</body>

</html>

10.BROADBAND AND PAYMENT PORTAL:-----

<!DOCTYPE html>

<html>

<head>

body{

color: #ff9999;

}

h1{

color:#660066;

font-family: Verdana;

text-align: center;

}

</style>

function costCalculation()

{

var dur=document.getElementById("payment").value;

var contype=document.getElementById("bandType").value;

// alert(contype);

var plan=document.getElementsByName("plan");

var ptype,ans;

for(var i=0;i<plan.length;i++)

{

if(plan[i].checked)

{

ptype=plan[i].value;

break;

}

if(ptype=="Sprint 200 GB" && contype=="Normal")

{

ans= (349/3)*dur+150;

}

else if(ptype=="Bolt 200 GB" && contype=="Normal")

{

ans=(499/3)*dur+150;

}

else if(ptype=="Rush 500 GB" && contype=="Normal")

{

ans=(949/3)*dur+150;

}

else if(ptype=="Speed 500 GB" && contype=="Normal")

{

ans=(1299/3)*dur+150;

}

else if(ptype=="Sprint 200 GB" && contype=="ADSL")

{

ans= (349/3)*dur+200;

}

else if(ptype=="Bolt 200 GB" && contype=="ADSL")

{

ans=(499/3)*dur+200;

}

else if(ptype=="Rush 500 GB" && contype=="ADSL")

{

ans=(949/3)*dur+200;

}

else if(ptype=="Speed 500 GB" && contype=="ADSL")

{

ans=(1299/3)*dur+200;

}

else if(ptype=="Sprint 200 GB" && contype=="DSL")

{

ans= (349/3)*dur+300;

}

else if(ptype=="Bolt 200 GB" && contype=="DSL")

{

ans=(499/3)*dur+300;

}

else if(ptype=="Rush 500 GB" && contype=="DSL")

{

ans=(949/3)*dur+300;

}

else if(ptype=="Speed 500 GB" && contype=="DSL")

{

ans=(1299/3)*dur+300;

}

//alert(ans);

ans=parseInt(ans);

document.getElementById("result").innerHTML="The bill amount is Rs

"+ans.toFixed(2);

return false;

}

</script>

</head>

<body>

<h1> Broadband Payment Portal</h1>

<tr>

<td>Customer Name</td>

<td><input type="text" name="customerName" id="customerName"

pattern="[a-zA-Z ]+" required ></td>

</tr>

<tr>

<td>Subscription Number</td>

<td><input type="number" name="Subscription" id="Subscription" min="0"

required ></td>

</tr>

<tr>

<td>Email ID</td>

</tr>

<tr>

<td>Type of Broadband</td>

<option value="Normal">Normal</option>

</select>

</td>

</tr>

<tr>

<td><input type="radio" name="plan" id="plan1"

value="Sprint 200 GB">Sprint 200 GB</td>

<td><input type="radio" name="plan" id="plan2" value="Bolt 200 GB" >Bolt

200 GB</td>

<td><input type="radio" name="plan" id="plan3" value="Rush 500 GB">Rush

500 GB</td>

<td><input type="radio" name="plan" id="plan4" value="Speed 500

GB">Speed 500 GB</td>

</tr>

<tr>

<td>Payment for</td>

<td><input type="number" name="payment" id="payment" min="3" max="12"

required ></td>

</tr>

<tr>

<td><input type="submit" id="submit" name="submit" value="Calculate Bill

Amount" ></td>

</tr>

</table>

</div>

<caption>Package Chart Table</caption>

<thead>

<tr>

<td>Connection Type</td>

<td>Monthly Rental</td>

</tr>

<tr>

<td>Normal</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</thead>

</table>

</form>

</body>

</html>

11.E-BOOK GRAND SALE:------

Line wrap

<html>

<head>

<style>

body {

background-color: #e6e6fa;

}

#discounttable {

border-style: solid;

float: right;

}

h1 {

color: #800080;

font-family: cursive;

text-align: center;

}

h2 {

text-align: center;

}

</style>

function displayfun() {

var n = document.getElementById("bookval").value;

var bookType = document.getElementsByName("bookCategory");

var d;

var sub;

var amount;

var perbookprice;

for (var i = 0; i < bookType.length; i++) {

if (bookType[i].checked) {

sub = bookType[i].value;

}

if (sub == "Science") {

perbookprice = 400;

if (n <= 250) {

amount = perbookprice * 0.95 * n;

} else if (n > 250) {

amount = perbookprice * 0.93 * n;

}

} else if (sub == "Comics") {

perbookprice = 300;

if (n <= 250) {

amount = perbookprice * 0.97 * n;

} else if (n > 250) {

amount = perbookprice * 0.96 * n;

}

document.getElementById("result").innerHTML = "Total Price is:" + amount;

return false;

}

</script>

<body>

<h1>E-BOOK GRAND SALE</h1>

<table>

<tr>

<td>Customer Name</td>

<td><input type="text" name="customerName" placeholder="Enter the Customer

Name" required pattern="[a-zA-Z\s]+"></td>

</tr>

<!--<tr>

<td>Email ID</td>

</tr>-->

<tr>

<td>Mobile Number</td>

<td><input type="tel" name="customerMobileNumber" placeholder="Enter the Mobile

Number" pattern="[8-9]{1}[0-9]{9}" required></td>

</tr>

<tr>

<td>

Book Category

</td>

<td>

<input type="radio" name="bookCategory" value="Science" id="sci"

required>Science

<input type="radio" name="bookCategory" value="Comics" id="com">Comics

</td>

</tr>

<tr>

<td>

<option value="Weekly">Weekly</option>

<option value="Monthly">Monthly</option>

<option value="Fortnightly">Fortnightly</option>

</datalist>

</td>

</tr>

<tr>

<td>No of Books Required</td>

<td><input type="range" name="bookCount" required id="bookval" min="1"

max="500" value=1 oninput="markOutputId.value=bookval.value">

</td>

</tr>

<tr>

<td><input type="submit" name="submit" value="Calculate Total Price"

onclick="displayfun()"></td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

</form>

<caption>Discount Rate Chart</caption>

<tr>

<th>

per Book Cost

</th>

<th>

Discount Rate(in percentage)

</th>

</tr>

<tr>

<td>Science</td>

<td>5% if total book count <= 250</td>

</tr>

<tr>

<td>Science</td>

<td>7% if total book count > 250</td>

</tr>

<tr>

<td>Comics</td>

<td>3% if total book count <= 250</td>

</tr>

<tr>

<td>Comics</td>

<td>4% if total book count > 250</td>

</tr>

</table>

</body></html>

12.BOOK FORM:------

<!DOCTYPE html>

<html>

<head>

<title>BookForm</title>

</head>

<body>

<legend>Customer Info </legend>

<input type="text" id="cusname" name="cusname" autofocus="on"

placeholder="Enter your name" required="required">

<br><br><label for="Telephone">Telephone:</label>

<input type="tel" id="telephone" name="telephone" placeholder="Pattern:

234-567-8910" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required="required">

<br><br><label for="Email address">Email address:</label>

<input type="email" name="mail" placeholder="Enter your email address"

required="required">

</fieldset>

</form>

<form>

<legend>Books</legend>

<option>HTML5 - Bruce Lawson and Remy Sharp</option>

<option>HTML5 - Up and Running - Mark Pilgrim</option>

<option>Head First HTML5 Programming - Eric Freeman</option>

<option>Mastering HTML, CSS and JavaScript - Laura Lemay</option>

</datalist>

<label for="Quantity">Quantity(Maximum 5):</label>

</fieldset>

</form>

function test() {

alert("You have successfully submitted the Book Form");

return false;

}

</script>

</body></html>

13.BOOK A SHOW-TICKET BOOKING------------

<!Doctype html>

<html>

<head>

<title>Ticket Booking</title>

<style>

table {

font-family: monospace;

font-weight: bold;

}

h1 {

color: #0000FF;

font-family: monospace;

text-align: center;

}

body {

background-color: #00CED1;

color: #0C1584;

}

</style>

function display() {

alert("Booking Successful");

}

</script>

</head>

<body>

<h1>BOOK A SHOW - TICKET BOOKING</h1>

<table>

<tr>

<td>

</td>

<td>

<input type="text" name="name" placeholder="Enter the Name" pattern="[A-Z a-z]+"

required>

</td>

</tr>

<tr>

<td>

<label>Movie Name</label>

</td>

<td>

<input list="movies" name="moviename" placeholder="Movie Name"

autocomplete="on" required>

<option value="Irada">Irada</option>

<option value="Rangoon">Rangoon</option>

<option value="Logan">Logan</option>

<option value="Fist Fight">Fist Fight</option>

</datalist>

</td>

</tr>

<tr>

<td>

<label>Circle</label>

</td>

<td>

<option value="Silver">Silver</option>

<option value="Platinum">Platinum</option>

</datalist>

</td>

</tr>

<tr>

<td>

<label>Phone no</label>

</td>

<td>

<input type="number" name="phone" placeholder="Enter Mobile Number"

pattern="[0-9]{10}" required>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

<label>No of Adults</label>

</td>

<td>

</td>

</tr>

<tr>

<td>

<label>No of Childrens</label>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

</tr>

</table>

</form>

</center>

</body></html>

14.PLATINUM MATERIAL------------------

<!DOCTYPE html>

<html>

<head>

<!-- Do specify ALL the component-ids correctly for your code to get evaluated

successfully -->

<title>Platinum Properties</title>

<style>

input[type="number"] {

width:98%;

}

input[type="text"] {

width:98%;

}

input[type="date"] {

width: 98%;

}

input[type="email"] {

width:98%;

}

input[type="tel"] {

width: 98%;

}

select {

width: 98%;

}

.split {

height: 100%;

width: 50%;

position: fixed;

overflow: scroll;

z-index: 1;

top: 0;

}

.left {

/* Fill the attribute and value */

left: 0;

}

.right {

/* Fill the attribute and value */

right: 0;

background-color: #74B14E;

width: 60%;

padding: 10px;

}

#image{

/* Fill the attribute and value */

width: 170%;

height: 100%;

}

h3{

/* Fill the attribute and value */

text-align: center;

font-size: 20px;

font-family: Georgia;

border-radius: 6px;

padding: 5px;

}

table, h3{

/* Fill the attribute and value */

border: 3px solid #ffffff;

border-spacing: 2px;

width: 97%;

}

td{

/* Fill the attribute and value */

border: 1px solid #ffffff;

color: #6600FF;

background-color: #DFBF9F;

border-spacing: 5px;

}

#submit,h3{

/* Fill the attribute and value */

color: #C21807;

font-weight: bold;

background-color: #FFFFFF;

}

table,td,#submit{

/* Fill the attribute and value */

font-size: 15px;

font-family: Georgia;

border-radius: 6px;

padding: 5px;

}

#submit:hover {

background-color: #C21807;

color:#FFFFFF;

}

#offers:hover {

color: #C21807;

}

.b{

/* Fill the attribute and value */

color: #6600FF;

}

.c{

/* Fill the attribute and value */

color: #C21807;

font-size: 15px;

font-family: Georgia;

font-weight: bold;

}

.d{

border: 0px;;

}

</style>

</head>

<body>

function show_value(x)

{

document.getElementById("demo").innerHTML=x;

}

</script>

<h3>Platinum Properties</h3>

<table>

<td class="d"><a id="property_info" class="b"

href="#property">Property-info</a></td>

<td class="d"><a id="personal_info" class="b"

href="#personal">Personal-info</a></td>

<td class="d"><a id="features_info" class="b" href="#features">Extra

Features</a></td>

</tr>

<tr>

<td colspan="3" class="c" id="property">Property Information</td>

</tr>

<tr>

<td>Select property Type: <br/>

<option value="Select..">Select..</option>

<option value="Apartment">Apartment</option>

<option value="Independent House">Independent House</option>

<option value="Compact Home">Compact Home</option>

</select></td>

<option value="Select..">Select..</option>

</select></td>

<td>Select the possession status <br/>

<option value="Select..">Select..</option>

<option value="Under Construction">Under Construction</option>

<option value="Semi Furnished">Semi Furnished</option>

<option value="Ready To Move">Ready To Move</option>

</select></td>

</tr>

<tr>

<td>Price Range:</td>

<td class="d"><input type="number" id="from" placeholder="From" required><!--

Fill the code for price range from --></td>

<td class="d"><input type="number" id="to" placeholder="To" required><!-- Fill the

code for price range to --></td>

</tr>

<tr>

<td>Location:</td>

<td class="d" colspan="2"><input type="text" id="location" placeholder="Enter the

location" required></td>

</tr>

<tr>

<td colspan="3" class="c" id="personal">Personal Information</td>

</tr>

<tr>

<td>Customer Name</td>

<td colspan="2"><input type="text" id="cname" pattern="[A-Za-z ]{1,100}"

placeholder="Enter the customer name" required><!-- Fill the code for Customer Name

--></td>

</tr>

<tr>

<td>Phone Number</td>

<td colspan="2"><input type="tel" id="phno" pattern="[987]{1}[0-9]{9}"

placeholder="Enter the phone number" required><!-- Fill the code for Phone Number

--></td>

</tr>

<tr>

<td>Email ID</td>

<td colspan="2"><input type="email" id="email" placeholder="Enter the email id"

required></td>

</tr>

<tr>

<td colspan="3" class="c" id="features">Extra Features</td>

</tr>

<td class="d"><input type="checkbox" id="parking" name="optional"><!-- Fill

the code for Parking-->Parking</td>

<td class="d"><input type="checkbox" id="swimming pool"

name="optional">Swimming Pool</td>

<td class="d"><input type="checkbox" id="super market"

name="optional">Super Market</td>

</tr>

<tr>

<td class="d"><input type="checkbox" id="park" name="optional"><!-- Fill the

code for Park-->Park</td>

<td class="d"><input type="checkbox" id="library" name="optional"><!-- Fill

the code for Library-->Library</td>

<td class="d"><input type="checkbox" id="playground" name="optional"><!--

Fill the code for Play Ground-->Play Ground</td>

</tr>

<tr>

<td colspan="3" ><a id="offers" class="b" href="#submit">**Click here to

unlock exclusive offers</a></td>

</tr>

</table>

<br/>

<p><input type="button" id="submit" value="CHECK

AVAILABILITY"></p>

</div>

</body>

</html>

15.ROYAL WEDDING PLANNERS CODE:-------------------

<!DOCTYPE html>

<html>

<head>

<!-- Do specify ALL the component-ids correctly for your code to get evaluated

successfully -->

<title>Royal Wedding Planners</title>

<style>

input[type="number"] {

width:98%;

}

input[type="range"] {

width:95%;

}

input[type="text"] {

width:98%;

}

input[type="date"] {

width: 98%;

}

input[type="email"] {

width:98%;

}

input[type="tel"] {

width: 98%;

}

textarea {

width: 98%;

}

select {

width: 98%;

}

.split {

height: 100%;

width: 50%;

position: fixed;

overflow: scroll;

z-index: 1;

top: 0;

}

.left {

Left:0;

/* Fill the attribute and value */

}

.right {

Right :0;

background-color: #CA9499;

width: 60%;

padding: 10px;

/* Fill the attributes and values */

}

#image{

width: 90%;

height: 90%;

/* Fill the attributes and values */

}

h3{

text-align: center;

font-size:20px;

font-family: Georgia;

border-radius: 6px;

padding: 2px;

/* Fill the attributes and values */

}

table, h3{

/* Fill the attribute and value */

border-spacing: 2px;

width: 97%;

border: 3px solid #FFFFFF;

}

td{

/* Fill the attributes and values */

color:#ffffff;

background-color: #A9A9A9;

border-spacing: 5px;

border: 1px solid #FFFFFF;

}

#submit,h3{

color:#C21807;

background-color: #ffffff;

font-weight:bold;

/* Fill the attributes and values */

}

table,td,#submit{

font-size: 15px;

font-family: Georgia;

border-radius: 6px;

padding: 5px;

/* Fill the attributes and values */

}

#submit:hover {

background-color: #C21807;

color:#FFFFFF;

}

#offers:hover {

color: #C21807;

}

.b{

color: #FFFFFF;

/* Fill the attribute and value */

}

#condition:hover {

color: #C21807;

}

.c{

color: #C21807;

Font-size:15px;

font-family: Georgia;

font-weight: bold;

}

.d{

border: 0px;;

}

</style>

</head>

<body>

function show_value(x)

{

document.getElementById("demo").innerHTML=x;

}

</script>

<h3> ROYAL WEDDING PLANNERS </h3>

<table>

<td class="d"><a href="#wedding" id="wedding_info"

class="b">Wedding-info</a></td>

<td class="d"><a href="#contact" id="contact_info" class="b">Contact-info</a></td>

<td class="d"><a href="#services" id="services_info" class="b">Service

required</a></td>

</tr>

<tr>

<td colspan="3" class="c" id="wedding">Wedding Information</td>

</tr>

<tr>

<td>Select your city : <br/><select id="city" required="required">

<option>Select..</option>

<option>Chennai</option>

<option>Banglore</option>

<option>Hyderabad</option>

<option>Mumbai</option>

</select> </td>

<td>Wedding date : <br/><input type="date" name="date" required="required"

id="date"></td>

<td>No of guests <br/><input type="number" id="guests"

required="required"></td>

</tr>

<tr>

<td>Venue</td>

<td colspan="2"><textarea name="Venue" id="venue" rows="4" cols="50"

placeholder="Wedding Venue" required="required"></textarea></td>

</tr>

<tr>

<td>Budget (approx)</td>

<td>< <input type="range" min="200000" max="5000000" value="0"

id="budget" required="required" onchange="show_value(this.value);">

</tr>

<tr>

<td colspan="3" class="c" id="contact">Contact Information</td>

</tr>

<tr>

<td>Customer Name</td>

<td><input type="text" id="cname" placeholder="Enter the customer name"

required="required" pattern="[A-Z][a-z]"></td>

</tr>

<tr>

<td>Phone Number</td>

<td><input type="tel" id="phno" placeholder="Enter the phone number"

required="required" pattern="[789]{1}[0-9]{9}"></td>

</tr>

<tr>

<td>Email ID</td>

<td><input type="email" id="email" placeholder="Enter the email id"

required="required"></td>

</tr>

<tr>

<td colspan="3" class="c" id="services">Services Required</td>

</tr>

Invitation</td>

Decorators </td>

<td class="d"><input type="checkbox" name="charges"

id="makeupArtists">Makeup artists</td>

</tr>

<tr>

Photographers & Videographers</td>

Live streaming support</td>

Caterers</td>

</tr>

<tr>

Transportation</td>

<td class="d"><input type="checkbox" name="charges" id="accomodation"

>Accomodation</td>

Theme-based</td>

</tr>

<tr>

<td colspan="3" id="condition ">**Quote you receive will include service tax of

5.0%</td>

</tr>

</table>

<br/>

</div>

</body>

</html>

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

16.Agape Food Delivery Service ----

<!DOCTYPE html>

<html>

<head>

<!-- Do specify ALL the component-ids correctly for your code to get evaluated

successfully -->

<title>Agape Food Delivery Service</title>

input[type="file"] {

/* Fill the attributes and values */

/*opacity: 0.0;*/

background: none;

width: 100%;

color: #08088A

}

input[type="text"] {

/*opacity: 0.0;*/

background: none;

width: 100%

/* Fill the attributes and values */

}

input[type="number"] {

/*opacity: 0.0;*/

background: none;

width: 100%

/* Fill the attributes and values */

}

input[type="email"] {

/*opacity: 0.0;*/

background: none;

width: 100%

/* Fill the attributes and values */

}

input[type="tel"] {

/*opacity: 0.0;*/

background: none;

width: 100%

/* Fill the attributes and values */

}

input[type="url"] {

/*opacity: 0.0;*/

background: none;

width: 100%

/* Fill the attributes and values */

}

input[type="checkbox"] {

/*opacity: 0.0*/

background: none;

/* Fill the attribute and value */

}

input[type="button"] {

/*opacity: 0.0*/

background: none;

/* Fill the attribute and value */

}

input[type="checkbox"] /* Fill here */ :checked + a {

color: #00800A

/* Fill the attribute and value */

}

body{

}

h3{

border: 1px solid;

background-color: #08088A;

margin-left: auto;

margin-right: auto;

text-align: center;

width: 60%;

font-family: "Verdana";

border-radius: 6px;

color: #E6ADAD;

/* Fill the attributes and values */

}

table{

border:3px solid;

width: 60%;

margin-left: auto;

margin-right: auto;

border-spacing: 5px;

border-radius: 6px

}

td{

font-size: 15px

}

#submit{

color: #08088A;

font-weight: bold;

/*opacity: 0.0;*/

background: none;

border-radius: 6px

/* Fill the attributes and values */

}

#submit:hover {

color: #FFFFFF;

background-color: #CD5C5C

}

.a{

width: 50%

/* Fill the attribute and value */

}

.b{

width: 60%;

margin-left: auto;

margin-right: auto

/* Fill the attributes and values */

}

::-webkit-input-placeholder {

color: #CD5C5C

/* Fill the attribute and value */

}

</style>

</head>

<body>

<h3>Agape Food Delivery Service - Partner Invite</h3>

<table>

<tr>

<input type="text" id="restaurantName" placeholder="Restaurant name*"

pattern="[a-zA-Z0-9\s]+" required/>

</td>

</tr>

<tr>

<td class=" "><input type="text" id="pin" placeholder="Pin (Primary

Location)*" required /></td>

</tr>

<tr>

<td class=" "><input type="text" id="oname" placeholder="Restaurant owner*"

pattern="[a-zA-Z0-9\s]+" required /></td>

<td><input type="tel" id="phno" placeholder="Phone number*"

pattern="[789][0-9]{9}" required /></td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

<td>

<input type="number" id="noOfOutlets" placeholder="No of outlets*"

min="1" required/>

</td>

<input type="text" id="primaryArea" placeholder="Primary Area of outlet*"

required/>

</td>

</tr>

<tr>

<td>

</td>

<td class=" "><input list = "establishmentType" type="text" id="type"

placeholder="Establishment : Independant/Chain*" />

</datalist></td>

</tr>

<tr>

<td colspan=" " required>Cusine type :

<input type="checkbox" id="indianVeg" name="indianVeg"

value="Indian-veg" /> Indian-veg

<input type="checkbox" id="indianVegNonVeg" name="indianVegNonVeg"

value="Indian-veg & Non-veg" /> Indian-veg & Non-veg

Chinese

<input type="checkbox" id="continental" name="continental"

value="Continental" /> Continental

</td>

</tr>

<tr>

<td><label>License(Jpeg/PDF)*</label>

<input type="file" id="license" name="Choose File" value="Choose File"

accept="application/pdf, image/jpeg" required/>

</td>

<td><label>GSTIN/PAN*</label>

<input type="file" id="pan" name="Choose File" value="Choose File"

accept="application/pdf, image/jpeg" required/>

</td>

</tr>

<tr>

<td><label>FSSAI(Jpeg/PDF)*</label>

<input type="file" id="fssai" name="Choose File" value="Choose File"

accept="application/pdf, image/jpeg" required/>

</td>

<td>

<label>Facade/Kitchen/Dining-Packaging/Locality(Jpeg)*</label>

<input type="file" id="others" name="Choose Files" value="Choose Files"

accept="image/jpeg" multiple required/>

</td>

</tr>

</table>

<p class=" "><input type="checkbox" id="terms" name="terms" value="terms" /><a

href="#submit" id="terms_ref">I agree to terms of services</a></p>

</p>

</body>

</html>

17.Shine Clinic:-----

<!DOCTYPE html>

<html>

<head>

<!-- Do specify all the component-ids correctly for your code to get evaluated

successfully -->

<title>Shine Clinic</title>

<style>

input[type="number"], input[type="text"], input[type="date"],

input[type="email"], input[type="tel"], select {

width:98%;

}

.split {

height: 100%;

width: 50%;

position: fixed;

overflow: scroll;

z-index: 1;

top: 0;

}

.left {

left: 0;

/* Fill the attribute and value */

}

.right {

right: 0;

background-color: #1AA3FF;

width: 60%;

padding: 10px;

/* Fill the attribute and value */

}

#image{

width: 90%;

height: 50%;

margin-top: 25%;

/* Fill the attribute and value */

}

h3{

text-align: center;

font-size: 20px;

font-family: Georgia;

border-radius: 6px;

padding: 5px;

/* Fill the attribute and value */

}

table, h3{

/* Fill the attribute and value */

border: 3px solid #ffffff;

border-spacing: 2px;

width: 97%;

}

td{

/* Fill the attribute and value */

border: 1px solid #ffffff;

border-spacing: 5px;

color: #6600FF;

background-color: #E6E6E6;

}

#submit,h3{

color: #C21807;

font-weight: bold;

background-color: #FFFFFF;

/* Fill the attribute and value */

}

table,td,#submit{

font-family: Georgia;

font-size: 15px;

border-radius: 6px;

padding: 5px;

/* Fill the attribute and value */

}

#submit:hover {

background-color: #C21807;

color:#FFFFFF;

}

.b{

color: #6600FF;

/* Fill the attribute and value */

}

.c{

color: #C21807;

font-size: 15px;

font-family: Georgia;

font-weight: bold;

/* Fill the attribute and value */

}

.d{

border: 0px;;

}

</style>

</head>

<body>

function show_value(x){

document.getElementById("demo").innerHTML=x;

}

function setDisable(){

if(document.getElementById('cash').checked==true){

document.getElementById('cnumber').disabled=true;

document.getElementById('cvvnumber').disabled=true;

}

else if(document.getElementById('card').checked==true){

document.getElementById('cnumber').disabled=false;

document.getElementById('cvvnumber').disabled=false;

}

</script>

<h3>Shine Clinic</h3>

<table>

<td class="d"><a href="#admission" id="admission_info"<!-- Fill the code to

link to admission information --> class="b">Admission-info</a></td>

<td class="d"><a href="#personal" id="personal_info"<!-- Fill the code to

link to personal information --> class="b">Personal-info</a></td>

<td class="d"><a href="#payment" id="payment_info"<!-- Fill the code to link

to payment information --> class="b">Payment-info</a></td>

</tr>

<tr>

<td colspan="3" class="c" id="admission">Admission Information</td>

</tr>

<tr>

<td>Date of Admission: <br/><input type="date" id="dateofadmission"

required="required"></td>

<td>Select the admission type<br/><select id="adtype" required>

<option value="Select..">Select..</option>

<option value="New Admission">New Admission</option>

<option value="Already Have">Already Have</option>

</select><!-- Fill the code for dropdown to select admission type

--></td>

<td>Admission For<br/><select id="adfor" required>

<option value="Select..">Select..</option>

<option value="Throat">Throat</option>

<option value="General Checkup">General Checkup</option>

</select></td>

</tr>

<tr>

<td colspan="3" >**Select if you have any of the following below</td>

</tr>

<tr>

<td class="d"><input type="checkbox" id="cold" name="health"><!--

Fill the code for cold-->Cold</td>

<td class="d"><input type="checkbox" id="fever" name="health"><!--

Fill the code for Fever-->Fever</td>

<td class="d"><input type="checkbox" id="cough" name="health"><!--

Fill the code for Cough-->Cough</td>

</tr>

<tr>

<td class="d"><input type="checkbox" id="diapedesis"

name="health">Diapedesis</td>

<td class="d"><input type="checkbox" id="blood pressure"

name="health">Blood Pressure</td>

<td class="d"><input type="checkbox" id="heavy surgery"

name="health">Heavy Surgery</td>

</tr>

<tr>

<td colspan="3" class="c" id="personal">Personal Information</td>

</tr>

<tr>

<td>Patient Name</td>

<td colspan="2"><input type="text" id="pname" placeholder="Enter the patient

name" pattern="[a-zA-Z\s]" required="required"><!-- Fill the code for Customer Name

--></td>

</tr>

<tr>

<td>Phone Number</td>

<td colspan="2"><input type="text" id="phno" placeholder="Enter the phone

number" pattern="[789]{1}[0-9]{9}" maxlength="10" minlength="10"

required="required"></td>

</tr>

<tr>

<td>Email ID</td>

<td colspan="2"><input type="email" id="email" placeholder="Enter the

email id" required="required"></td>

</tr>

<tr>

<td colspan="2"><input type="number" id="age" placeholder="Enter the

age" required="required"></td>

</tr>

<tr>

<td>Address</td>

<td colspan="2"><textarea id="address" rows="4" cols="80"

placeholder="Enter the age" required="required"></textarea><!-- Fill the code for

Address --></td>

</tr>

<tr>

<td colspan="3" class="c" id="payment">Payment Information</td>

</tr>

<td>Select the payment type:</td>

<td class="d"><input type="radio" id="card" name="ptype" <!-- Fill the

code for Card--> onclick="setDisable()" required/>Card</td>

<td class="d"><input type="radio" id="cash" name="ptype" <!-- Fill the

code for Cash--> onclick="setDisable()" required/>Cash</td>

</tr>

<tr>

<td>Card Number</td>

<td colspan="2"><input type="text" placeholder="Enter the card

number" id="cnumber" minlength="16" maxlength="16" required><!-- Fill the code for

Card Number--></td>

</tr>

<tr>

<td>Cvv Number</td>

<td colspan="2"><input type="text" id="cvvnumber" placeholder="Enter

the cvv number" minlength="3" maxlength="3" required><!-- Fill the code for Cvv

Number--></td>

</tr>

</table>

<br/>

<p><input type="button" value="CONFIRM" id="submit"><!-- Fill the code for Submit

--></p>

</div>

</body>

</html>

18.Mercury Drug Delivery Service--

<!DOCTYPE html>

<html>

<head>

<title>Mercury Drug Delivery Service</title>

</head>

<style>

input[type="file"] {

background: transparent;

width: 100%;

}

input[type="text"] {

background: transparent;

width: 100%;

}

input[type="number"] {

background: transparent;

width: 100%;

}

input[type="email"] {

background: transparent;

width: 100%;

}

input[type="tel"] {

background: transparent;

width: 100%;

}

input[type="url"] {

background: transparent;

width: 100%;

}

input[type="checkbox"] {

background: transparent;

}

input[type="button"] {

background: transparent;

}

input[type="checkbox"] /* Fill here */ :checked + a {

/* Fill the attribute and value */

}

body{

font-weight: bold;

margin-left: auto;

margin-right: auto;

}

h3{

color: #FFFFFF;

background-color: #800000;

margin-left: auto;

margin-right: auto;

text-align: center;

width: 60%;

font-family: Verdana;

padding: 3px;

border-radius: 6px;

}

table{

width: 60%;

border-style:3px solid;

margin-left: auto;

margin-right: auto;

border-spacing: 5px;

border-radius: 6px;

}

td{

font-size: 15px;

}

#submit{

color:#800000;

font-weight: bold;

background: transparent;

border-radius: 6px;

}

#submit:hover {

background-color:#800000 ;

color: #FFFFFF;

}

.a{

width: 50%;

}

.b{

width: 60%;

}

::-webkit-input-placeholder {

color: #dcdcdc;

}

</style>

<body>

<h3> Mercury Drug Delivery Service-Partner Invite </h3>

<tr>

<td colspan="2"><input type="text" required id="pharmacyName"

placeholder="Pharmacy name*"></td>

</tr>

<tr>

<td class="a"><input type="number" id="pin"

placeholder="Pin(PrimaryLocation)*" required></td>

</tr>

<tr>

<td class="a"><input type="text" id="oname" placeholder="Pharmacy owner*"

required</td>

<td><input type="tel" id="phno" placeholder="Phone number*"

pattern="[7-9]{1}[0-9]{9}" required></td>

</tr>

<tr>

</tr>

<tr>

<td colspan="2"><input type="url" id="link" placeholder="Website Link/ online

listing link"></td>

</tr>

<tr>

<td><input type="text" id="noOfOutlets" min="1" placeholder="Number of

outlets*" required></td>

<td class="a"><input type="text" id="primaryArea" placeholder="Primary Area

of outlet*" required></td>

</tr>

<tr>

<td><input type="text" min="200" id="cost" placeholder="Minimum purchase

cost*" required></td>

<td class="a"><input list="establishmentType" id="type"

placeholder="Establishment : Independant/Chain*"

required>

</datalist>

</td>

</tr>

<tr>

<td colspan="2">Medicines available :

<input type="checkbox" id="gsl" name="items">General Sales List

Medicines(GSL)

<input type="checkbox" id="p" name="items">Pharmacy

Medicines(P)<br>

<input type="checkbox" id="pom" name="items">Prescription Only

Medicines (POM)

<input type="checkbox" id="cds" name="items">Controlled Drugs

(CDs)

</td>

</tr>

<tr>

<td>Retail Drug License(Jpeg/PDF)*<br>

<td>GSTIN/PAN*<br>

</tr>

<tr>

<td>FSSAI(Jpeg/PDF)*<br>

<td>Facade/Pharmacy-shelves/Refridgerator(Jpeg)* <br>

</tr>

</table>

<p class="b"><input type="checkbox"><a href="#submit" id="terms_ref"

style="color: blue;"><b>I agree to terms of

services</b></a></p>

</body>

</html>

19.Mahima Cashew Store---

<!DOCTYPE html >

<html>

<head>

function billCalculation ()

{

var name =document.getElementById("customerName").value;

var wholecashews=document.getElementById("wholecashews").value;

var halfcashews=document.getElementById("halfcashews").value;

var brokencashews=document.getElementById("brokencashews").value;

var distance=document.getElementById("distance").value;

var amount =(1100 * wholecashews)+(800 *halfcashews)+(650

*brokencashews)+(distance *22);

document.getElementById("result"). innerHTML = " Hi "+name+" ,you have

to pay "+amount.toFixed(2)+" thank for visting us!!!" ;

return false;

}

</script>

<style>

body{

color:#00FF7F;

}

h1{

color :#FFFFFF;

font:Arial;

font-style :italic;

background-color: #D2691E;

text-align: center;

}

#a{

font-weight: "bold";

font: Arial;

background-color: #D2691E;

width:13em;

height:35px;

}

#result

{

font-weight: bold;

font:Arial;

font-size:24px;

color:#800000;

}

</style>

</head>

<body>

<h1>Mahima Cashew Store</h1>

<table>

<tr>

<td>

customer name <input type ="text" id ="customerName" name

="customerName" placeholder="Enter Your Name" required="required">

</td>

</tr>

<tr>

<td>

Contact No <input type ="tel" id ="contactno" name ="contactno"

pattern="[7-9]{1}[0-9]{9}" placeholder="Enter Your mobile no" required="required">

</td>

</tr>

<tr>

<td>

Date of order received <input type ="date" id ="bookingdate" name

="bookingdate" required="required">

</td>

</tr>

<tr>

<td>

whole cashew (in Kg) <input type ="number" id ="wholecashews" name

="wholecashews" min="0" required="required">

</td>

</tr>

<tr>

<td>

Half cashew (in Kg) <input type ="number" id ="halfcashews" name

="halfcashews" min="0" required="required">

</td>

</tr>

<tr>

<td>

Broken cashew (in Kg) <input type ="number" id ="brokencashews" name

="brokencashews" min="0" required="required">

</td>

</tr>

<tr>

<td>

Address <textarea type="text" id="address" name ="address" rows="5" cols

="25" placeholder="Enter your address" required="required"></textarea>

</td>

</tr>

<tr>

<td>

Distance (in km) <input type ="number" id ="distance" name ="distance"

min="0" required="required">

</td>

</tr>

<tr>

<td>

Expected date of delivery <input type="date" id="deliverydate"

name="deliverydate" required="required">

</td>

</tr>

<td >

<input type="button" id="submit" onclick=" billCalculation ()" value

="submit">

</td>

<td>

</td>

</tr>

</table>

</form>

</div>

</body>

</html>

20.Refrigerator Repair:--------

<!document HTML>

<HTML>

<head>

//apply appropriate style

</style>

function bookAppointment(){

var charge;

var name=document.getElementById("customerName").value;

var brand=document.getElementById("brandName").value;

var type=document.getElementById("refrigeratorType").value;

var mail=document.getElementById("email").value;

if(type=="Single Door"){

charge=2500;

}

else if(type=="Double Door"){

charge=5500;

}

else{

charge=8500;

}

if(document.getElementById("yearlyMaintenance").checked==true){

var s=charge+1000;

document.getElementById("result").innerHTML= "Hello "+ name+ ", the

service appointment copy for "+ brand +" "+ type+" refrigerator with yearly

maintenance will be sent to your email ID "+ mail+ " and the estimated service charge

will be Rs "+ s;

}

else{

document.getElementById("result").innerHTML= "Hello"+ name+", the

service appointment copy for"+ brand+ type+" refrigerator without yearly

maintenance will be sent to your email ID "+ mail+ "and the estimated service charge

will be Rs"+ charge;

}

</script>

</head>

<body>

<h1>REFRIGERATOR REPAIR SERVICE</h1>

<label>Customer Name </label><input type="text" id="customerName"

placeholder="Enter your name" required><br>

<label>Gender </label><input type="radio" name="male"

id="male">Male</label>

<input type="radio" name="female" id="female">Female<br>

<label>Mobile Number </label><input type="text" id="mobilenumber"

placeholder="Enter your mobile number" pattern="[6-10]{3}-[0-9]{3}-[0-9]{4}"

required><br>

<label>Email Id </label><input type="email" id="email" placeholder="Enter

your email Id" required><br>

<label>Address </label><textarea rows="5" cols="25" id="address"

placeholder="Enter your address" required></textarea><br>

<label>Brand Name </label><input list="brandNames" id="brandName"

autocomplete="on" required>

</datalist></select><br>

<label>Refrigerator Type</label><select id="refrigeratorType">

<option value="Single Door" >Single Door</option>

<option value="Double Door">Double Door</option>

<option value="Triple Door">Triple Door</option></select><br>

<label>Date for Appointment</label><input type="date"

id="dateForAppointment" required><br>

<label>Yearly Maintenance </label><input type="checkbox"

id="yearlyMaintenance"><br>

<label>Duration in months from the previous service</label><input type="range"

min="0" max="6" step="1"><br>

<input type="button" id="submit" value="submit"

onclick="bookAppointment()"></button>

<button type="reset" id="reset" value="clear">reset</button><br>

</form>

</div>

</body>

</HTML>

21.Elite Travel Management:-----

<!DOCTYPE html>

<html>

<head>

<!-- Do specify all the component-ids correctly for your code to get evaluated

successfully -->

<title>Elite Travel Management</title>

<style>

input[type="number"] {

width:98%;

}

input[type="text"] {

width:98%;

}

input[type="date"] {

width: 98%;

}

input[type="email"] {

width:98%;

}

input[type="tel"] {

width: 98%;

}

select {

width: 98%;

}

.split {

height: 100%;

width: 50%;

position: fixed;

overflow: scroll;

z-index: 1;

top: 0;

}

.left {

left: 0;

}

.right{

right: 0;

background-color: #74B14E;

width:60%;

padding: 10px;

}

#image{

width: 120%;

height: 90%;

}

h3{

text-align: center;

font-size: 20px;

font-family: Georgia;

border-radius: 6px;

padding: 5px;

}

table, h3{

border: 3px solid #FFFFFF;

border-spacing: 2px;

width:97%;

}

td{

border: 1px solid #FFFFFF;

color:#FFFFFF;

background-color: #6698FF ;

border-spacing : 5px;

}

#submit,h3{

color: #C21807;

font-weight: bold ;

background-color: #FFFFFF ;

}

table,td,#submit{

font-family: Georgia;

font-size: 15px;

border-radius:6px;

padding: 5px ;

}

#submit:hover {

background-color: #C21807;

color:#FFFFFF;

}

#offers:hover {

color: #C21807;

}

.b{

color: #FFFFFF;

}

.c{

color:#C21807;

font-size: 15px;

font-family: Georgia;

font-weight: bold;

}

.d{

border: 0px;;

}

</style>

</head>

<body>

function show_value(x)

{

document.getElementById("demo").innerHTML=x;

}

</script>

<h3> ELITE TRAVEL MANAGEMENT </h3>

<table>

<td class="d"><a href="#travel" id="travel_info"

class="b">Travel-info</a></td>

<td class="d"><a href="#personal" id="personal_info"

class="b">Personal-info</a></td>

<td class="d"><a href="#preferences" id="preferences_info"

class="b">Activities Preferences</a></td>

</tr>

<tr>

<td colspan="3" class="c" id="travel">Travel Information</td>

</tr>

<tr>

<td>Select your travel destination : <br/>

<option value="Select.." required>Select..</option>

<option value="London">London</option>

<option value="Canada">Canada</option>

<option value="Mauritius">Mauritius</option>

<option value="Switzerland">Switzerland</option>

</select>

</td>

<td>Date of departure : <br/>

<input type="date" id="dateofdeparture" placeholder="dd-mm-yyyy"

required>

</td>

<td>Date of arrival : <br/>

<input type="date" id="dateofarrival" placeholder="dd-mm-yyyy"

required>

</td>

</tr>

<tr>

<td><input type="number" id="kids" placeholder="No of kids"

required></td>

<td><input type="number" id="teens" placeholder="No of teens"

required></td>

<td><input type="number" id="adults" placeholder="No of adults"

required></td>

</tr>

<tr>

<td>Visa Assistance</td>

</tr>

<tr>

<td colspan="3" class="c" id="personal">Personal Information</td>

</tr>

<tr>

<td>Customer Name</td>

<td><input type="text" id="cname" placeholder="Enter the customer name"

pattern="^[a-zA-Z\s]+$" required></td>

</tr>

<tr>

<td>Phone Number</td>

<td><input type="tel" id="phno" placeholder="Enter the phone number"

pattern="[7-9]{1}[0-9]{9}" required></td>

</tr>

<tr>

<td>Email ID</td>

<td><input type="email" id="email" placeholder="Enter the email id"

required></td>

</tr>

<tr>

<td colspan="3" class="c" id="preferences">Activities Preferences</td>

</tr>

<td class="d"><input type="checkbox" name="charges"

id="museumsAndHistoricSites">Museums & Historic Sites</td>

<td class="d"><input type="checkbox" name="charges"

id="culture">Culture</td>

<td class="d"><input type="checkbox" name="charges"

id="beaches">Beaches</td>

</tr>

<tr>

<td class="d"><input type="checkbox" name="charges"

id="shopping">Shopping</td>

<td class="d"><input type="checkbox" name="charges"

id="wildlife">Wildlife</td>

<td class="d"><input type="checkbox" name="charges"

id="relaxing">Relaxing</td>

</tr>

<tr>

<td colspan="3" ><a href="#submit" class="b" id="offers">**Click here

to unlock exclusive offers</a></td>

</tr>

</table>

<br>

</div>

</body>

</html>

22.Mercury Drug Delivery Code:------

<!DOCTYPE html>

<html>

<head>

<title>Mercury Drug Delivery Service</title>

</head>

<style>

input[type="file"] {

background: transparent;

width: 100%;

}

input[type="text"] {

background: transparent;

width: 100%;

}

input[type="number"] {

background: transparent;

width: 100%;

}

input[type="email"] {

background: transparent;

width: 100%;

}

input[type="tel"] {

background: transparent;

width: 100%;

}

input[type="url"] {

background: transparent;

width: 100%;

}

input[type="checkbox"] {

background: transparent;

}

input[type="button"] {

background: transparent;

}

input[type="checkbox"] /* Fill here */ :checked + a {

/* Fill the attribute and value */

}

body{

font-weight: bold;

margin-left: auto;

margin-right: auto;

}

h3{

color: #FFFFFF;

background-color: #800000;

margin-left: auto;

margin-right: auto;

text-align: center;

width: 60%;

font-family: Verdana;

padding: 3px;

border-radius: 6px;

}

table{

width: 60%;

border-style:3px solid;

margin-left: auto;

margin-right: auto;

border-spacing: 5px;

border-radius: 6px;

}

td{

font-size: 15px;

}

#submit{

color:#800000;

font-weight: bold;

background: transparent;

border-radius: 6px;

}

#submit:hover {

background-color:#800000 ;

color: #FFFFFF;

}

.a{

width: 50%;

}

.b{

width: 60%;

}

::-webkit-input-placeholder {

color: #dcdcdc;

}

</style>

<body>

<h3> Mercury Drug Delivery Service-Partner Invite </h3>

<tr>

<td colspan="2"><input type="text" required id="pharmacyName"

placeholder="Pharmacy name*"></td>

</tr>

<tr>

<td class="a"><input type="number" id="pin"

placeholder="Pin(PrimaryLocation)*" required></td>

</tr>

<tr>

<td class="a"><input type="text" id="oname" placeholder="Pharmacy owner*"

required</td>

<td><input type="tel" id="phno" placeholder="Phone number*"

pattern="[7-9]{1}[0-9]{9}" required></td>

</tr>

<tr>

</tr>

<tr>

<td colspan="2"><input type="url" id="link" placeholder="Website Link/ online

listing link"></td>

</tr>

<tr>

<td><input type="text" id="noOfOutlets" min="1" placeholder="Number of

outlets*" required></td>

<td class="a"><input type="text" id="primaryArea" placeholder="Primary Area

of outlet*" required></td>

</tr>

<tr>

<td><input type="text" min="200" id="cost" placeholder="Minimum purchase

cost*" required></td>

<td class="a"><input list="establishmentType" id="type"

placeholder="Establishment : Independant/Chain*"

required>

</datalist>

</td>

</tr>

<tr>

<td colspan="2">Medicines available :

<input type="checkbox" id="gsl" name="items">General Sales List

Medicines(GSL)

<input type="checkbox" id="p" name="items">Pharmacy Medicines(P)<br>

<input type="checkbox" id="pom" name="items">Prescription Only

Medicines (POM)

<input type="checkbox" id="cds" name="items">Controlled Drugs (CDs)

</td>

</tr>

<tr>

<td>Retail Drug License(Jpeg/PDF)*<br>

<td>GSTIN/PAN*<br>

</tr>

<tr>

<td>FSSAI(Jpeg/PDF)*<br>

<td>Facade/Pharmacy-shelves/Refridgerator(Jpeg)* <br>

</tr>

</table>

<p class="b"><input type="checkbox"><a href="#submit" id="terms_ref"

style="color: blue;"><b>I agree to terms of

services</b></a></p>

</body>

</html>

23.Xchange - One Stop for Mobile-Accessories:-----

<!DOCTYPE html>

<html>

<head>

<!-- Do specify all the component-ids correctly for your code to get evaluated

successfully -->

<title> Xchange - One Stop for Mobile-Accessories</title>

<style>

background-color: #C2A1A1;

color:#FFFFFF;

font-family: Georgia;

}

input[type="text"] , input[type="number"], input[type="date"], select,

textarea{

width: 98%;

}

input[type="range"] {

width: 60%;

}

::placeholder{

color:#FFFFFF;

}

h3{

border: 2px solid #FFFFFF;

/* Fill the attributes and values */

margin-left: auto;

margin-right: auto;

text-align: center ;

width: 60%;

color: #5D4079;

background-color: #FFFFFF;

border-radius: 6px;

border-spacing: 2px;

font-size: 30px;

}

table{

/* Fill the attributes and values */

width:60%;

margin-right: auto;

margin-left: auto;

}

td{

border: 2px solid #FFFFFF;

color:#FFFFFF;

/* Fill the attributes and values */

color: #FFFFFF;

padding: 5px;

border-radius: 6px;

border-spacing: 5px;

}

#submit {

margin-left:45%;

/* Fill the attributes and values */

color: #FFFFFF;

background-color: #5D4079;

border-radius: 6px;

padding: 3px;

font-weight: bold;

}

#submit:hover {

background-color: #FFFFFF;

color:#5D4079;

}

.d{

color:#000000;

}

.c{

/* Fill the attributes and values */

color: #5D4079;

background-color: #FFFFFF;

font-weight: bold ;

}

</style>

</head>

<body >

function show_value(x)

{

document.getElementById("demo").innerHTML=x;

}

</script>

<h3>Xchange - One Stop for Mobile-Accessories</h3>

<table>

<tr>

<td class="c">Furnish Details</td>

</tr>

<tr>

<td><input type="text" name="mtype" id="mtype" placeholder="Enter

the mobile type*" required/></td>

<td><input type="text" name="atype" id="atype" placeholder="Enter the

accessory type*" required/></td>

</tr>

<tr>

<td>Purchase date :<br/><input type="date" name="pdate" id="pdate"

placeholder="mm/dd/yyyy" required /></td>

<td>Available from :<br/><input type="date" name="availablefrom"

id="availablefrom" placeholder="mm/dd/yyyy" required /></td>

</tr>

<tr>

<td>Location :</td>

<td><input type="text" name="location" id="location"

placeholder="City,State*" required/></td>

</tr>

<tr>

<td colspan="2">Reason for selling : <textarea rows="4" columns="50"

id="reason" required></textarea></td>

</tr>

<tr>

<td>Price Quoted : </td>

<td> <input type="range" name="price" id="price" min="500"

max="20000" required onchange="show_value(this.value);" >

</tr>

<tr>

<td colspan="2">Upload pics (in .png format) : <input type="file"

name="pic" id="pic" value="Choose Files" multiple required></td>

</tr>

<tr>

<td><input type="text" name="name" id="name" placeholder="Enter

your name*" required/></td>

<td><input type="tel" id="phno" placeholder="Contact number*"

max="10" pattern="[789]{1}[0-9]{9}" required ></td>

</tr>

</table>

<br/>

</body>

</html>

24.AirFine Airlines: -----

<!DOCTYPE html>

<html>

<body>

<h3>AirFine AirLines</h3>

<table>

<tr><td>Passenger Name</td><td><input type="text" id="pname"

name="Passenger Name" placeholder="Enter the passenger name"

required=""></td></tr>

<tr><td>Phone Number</td><td><input type="text" id="mobile"

name="mobile" pattern="[789]{1}[0-9]{9}" min="7000000000" max="9999999999"

maxlength="10" placeholder="Enter the phone number" required=""></td></tr>

<tr><td>Ticket Id</td><td><input type="number" id="tid" name="Ticket Id"

placeholder="Enter the ticket id" required=""></td></tr>

<tr><td>Date of Trip</td><td><input type="date" id="tripdate" name="Date

of Trip" required=""></td></tr>

<tr><td>Number of Tickets</td><td><input type="number" id="noOfTickets"

name="Number of Tickets" placeholder="Enter the number of tickets"

required=""></td></tr>

<td>Date of Cancellation</td><td><input type="date" id="cancellationdate"

name="Date of Cancellation" required=""></td></tr>

<option id="eco" value="eco">Economy Class Seats</option>

<option id="prem" value="prem">Premium Class Seats</option>

<option id="bus" value="bus">Business Class Seats</option>

<option id="first" value="first">First Class Seats</option>

</select>

</td></tr>

<tr><td><label>Amount Paid</label></td><td><input type="number"

id="amountPaid" name="Amount Paid" placeholder="Enter the amount paid"

required=""></td></tr>

</table>

</br>

</br></br>

</form>

<style>

body

{

background-size: 60%;

font-weight: bold;

background-position: center;

background-repeat: no-repeat;

background-color: blue;

}

{

color: #FFFFFF;

background-color: #FFCC66;

margin-left: auto;

margin-right: auto;

font-family:verdana;

padding: 5px;

border-radius: 6px;

text-align:center;

width: 50%;

}

table,tr,td

{

width : 50%;

border-style: solid;

border-color: black;

margin-left: auto;

margin-right: auto;

border-spacing: 1px;

border-radius: 6px;

color: #FFFFFF;

background-color: transparent;

padding: 1px;

text-align: center;

}

div

{

font-size: 20px;

color: #FFFFFF;

text-align: center;

margin-left: auto;

margin-right: auto;

}

#submit

{

color: #FFFFFF;

background-color: #FFCC66;

margin-left: 25%;

margin-right: auto;

padding: 5px;

width: 50%;

font-family: verdana;

font-weight: bold;

border-radius: 6px;

}

#result

{

color: #00CC66;

background-color: #FFFFFF;

margin-left: auto;

margin-right: auto;

padding: 5px;

width: 50%;

font-size: 20px;

}

</style>

function display()

{

var conFee,cp,convFee,canChr,refAmt;

var not = document.getElementById("noOfTickets").value;

var sType = document.getElementById("stype");

var st = sType.options[sType.selectedIndex].value;

var amtPaid = document.getElementById("amountPaid").value;

var pName = document.getElementById("pname").value;

if(st =="eco")

{

conFee = 200;

cp = 0.2;

}else if(st == "prem"){

conFee = 400;

cp=0.3;

}else if(st == "bus"){

conFee = 500;

cp=0.3;

}

else

{

conFee = 600;

cp=0.4;

}

convFee = not*conFee;

canChr = amtPaid*cp;

refAmt = amtPaid -convFee-canChr;

document.getElementById('result').innerHTML = "Hi "+pName+", your ticket has

been successfully cancelled and the refund amount is Rs."+refAmt;

return false;

}

</script>

</body>

</html>

25.Beauty Care Center - Appointment

<!DOCTYPE html>

<html>

<head>

<!-- Do specify all the component-ids correctly for your code to get evaluated

successfully -->

<title>Beauty Care Center</title>

<style>

::placeholder {

color: #6A5ACD;

opacity: 2;

}

input[type="email"], input[type="tel"], input[type="number"], input[type="text"],

input[type="date"], textarea, select, #services {

width: 85%;

color: #6A5ACD;

font-weight: bold;

background: transparent;

border-radius: 6px;

border-style: solid;

border-width: 2px;

border-color: #FFA07A;

}

input[type="button"] {

background-color: #08088A;

}

input[type="checkbox"]#terms:checked+a {

color: #40ff00;

}

body {

background-color: #000000;

}

h3 {

color: #FFFFFF;

background-color: #2F4F4F;

margin-right: auto;

margin-left: auto;

text-align: center;

width: 35%;

font-family: Verdana;

border-style: 1px solid;

border-radius: 6px;

}

label span{

color: #F0F8FF;

}

table {

width: 30%;

border-style: 3px groove;

margin-right: auto;

margin-left: auto;

border-spacing: 5px;

border-radius: 6px;

}

#appointment td {

width: 1px;

border-style: solid;

color: #F4A460;

padding: 8px;

}

#terms_ref {

color: #00bfff;

}

#submit {

color: #FFEFD5;

font-weight: bold;

background: transparent;

border-radius: 6px;

}

#submit:hover {

background-color: #2E8B57;

color: #FFFFFF;

}

.b {

width: 50%;

margin-left: auto;

margin-right: 14em;

}

</style>

</head>

<body>

<h3>Beauty Care Center - Appointment</h3>

<tr>

</tr>

<tr>

<td>

</td>

<td>

<input type="text" name="name" placeholder="Enter your name" id="name"

required/>

</td>

</tr>

<tr>

<td>

<label><span><b>Gender*</b></span>:</label>

</td>

<td>

<input type="radio" id="male" name="gender" value="Male"

><label><span><b> Male </b></span></label>

<input type="radio" id="female" name="gender" value="Female"

><label><span><b> Female</b></span></label>

<input type="radio" id="others" name="gender" value="Others"

><label><span><b> Others</b></span></label>

</td>

</tr>

<tr>

<td>

<label><span><b>E-mail address</b></span>:</label>

</td>

<td>

<input type="email" name="email" id="email"

placeholder="Example:abc@gmail.com" required />

</td>

</tr>

<tr>

<td>

<label><span><b>Mobile No*</b></span>:</label>

</td>

<td>

<input type="tel" name="mobileNo" id="mobileNo" maxlength="10"

placeholder="Enter your mobile no" required/>

</td>

</tr>

<tr>

<td>

<label><span><b>Services*</b></span>:</label>

</td>

<td>

<input type="text" list="serviceList" name="services" id="services"

autocomplete required>

</datalist>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

<option id="selectOne" value="-Select one-">-Select one-</option>

</select>

</td>

</tr>

<tr>

<td>

<label><span><b>Address</b></span>:</label>

</td>

<td>

<textarea name="address" placeholder="Enter your address" id="address"

rows="5" cols="25" required></textarea>

</td>

</tr>

</table>

<p class="b"><input type="checkbox" name="checkbox" id="terms" /><a

href="#submit" id="terms_ref">I agree to the terms of service and privacy

policy</a></p>

<p class="b"><input type="button" name="submit" id="submit" value="Submit"

/></p>

</body>

</html>

26.Vision Opticals: ---

<!DOCTYPE html>

<html>

<head>

<title>Vision Opticals</title>

<style>

input[type="number"], input[type="text"], input[type="date"],

input[type="email"], input[type="tel"], select {

width:98%;

}

body{

background-size: 70%;

font-weight: bold;

}

div{

font-size:20px;

color:#FFFFFF;

text-align: center;

margin-left: auto;

margin-right: auto;

}

h3{

font-family: Verdana;

color: #FFFFFF;

background-color: #696969;

margin-left: auto;

margin-right: auto;

text-align: center;

width: 50%;

padding: 5px;

border-radius: 6px;

}

table, td, tr{

border: solid 1px;

width: 50%;

margin-left: auto;

margin-right: auto;

padding: 1px;

border-spacing: 1px;

border-radius: 6px;

color:#696969 ;

background-color: #FFFFFF;

}

::-webkit-input-placeholder {

color: #696969;

font-weight: bold;

}

#submit{

color:#FFFFFF;

background-color:#696969;

font-family: Verdana;

font-weight: bold;

margin-left:auto;

margin-right:auto;

padding: 5px;

width: 50%;

border-radius: 6px;

}

#result1, #result2{

color: #0099FF;

background-color: #FFFFFF;

margin-left:auto;

margin-right:auto;

width:50%;

font-size:20px;

text-align:center;

}

</style>

</head>

<body>

function display()

{

var spectype=document.getElementById("stype").value;

var gcat=document.getElementById("category").value;

var tot=0;

var paytype=document.getElementById("ptype").value;

if(paytype=="Debit card / Credit card")

{

paytype="Card";

}

switch(gcat)

{

case "Classic":tot=599+450;

break;

case "Premium":tot=3000+450;

break;

case "Computer Glass":tot=999+450;

break;

}

document.getElementById("result1").innerHTML = "Purchase of a

"+spectype+" "+gcat+ " has been logged !";

document.getElementById("result2").innerHTML = "An amount of

Rs."+tot+",inclusive of tax has been received by "+paytype;

return false;

}

function disableCardDetailsOnCash()

{

if (document.getElementById("ptype").value == "Cash")

{

document.getElementById("cardno").disabled=true;

document.getElementById("edate").disabled=true;

}

else

{

document.getElementById("cardno").disabled=false;

document.getElementById("edate").disabled=false;

}

</script>

<div>

<h3> Vision Opticals </h3>

<table>

<tr>

<td>Customer Name</td>

<td><input type="text" id="cname" name="cname" placeholder="Enter the

customer name" pattern="[a-zA-Z\s]+" required></td>

</tr>

<tr>

<td>Phone Number</td>

<td><input type="tel" id="phno" name="phno" placeholder="Phone number"

pattern="[789]{1}[0-9]{9}" maxlength="10" required></td>

</tr>

<tr>

<td>Email ID</td>

<td><input type="email" id="email" name="email" placeholder="Enter the email

id" required></td>

</tr>

<tr>

<td>Spectacle Type</td>

<option value="Select Glass">Select Glass</option>

<option value="Eye Glass">Eye Glass</option>

<option value="Sun Glass">Sun Glass</option>

<option value="Blu 0 Computer Glass">Blu 0 Computer Glass</option>

<option value="Reading Glass">Reading Glass</option>

</select>

</td>

</tr>

<tr>

<td>Frame Brand</td>

<option value="Select Brand">Select Brand</option>

<option value="Vincent Chase">Vincent Chase</option>

<option value="John Jacobs">John Jacobs</option>

<option value="Carrera">Carrera</option>

<option value="Oakley">Oakley</option>

<option value="Vogue">Vogue</option>

</select>

</td>

</tr>

<tr>

<td>Frame Type</td>

<option value="Select Frame">Select Frame</option>

<option value="Rectangle Frames">Rectangle Frames</option>

<option value="Wayfarer Frames">Wayfarer Frames</option>

<option value="Round Frames">Round Frames</option>

<option value="Aviator Frames">Aviator Frames</option>

<option value="Cat-Eye Frames">Cat-Eye Frames</option>

<option value="Rimless Frames">Rimless Frames</option>

<option value="Half Rim Frames">Half Rim Frames</option>

</select>

</td>

</tr>

<tr>

<td>Frame Color</td>

<option value="Select Frame Color">Select Frame Color</option>

<option value="Black">Black</option>

<option value="Brown">Brown</option>

<option value="Green">Green</option>

</select>

</td>

</tr>

<tr>

<td>Glass Category</td>

<option value="Select Glass Category">Select Glass Category</option>

<option value="Classic">Classic</option>

<option value="Premium">Premium</option>

<option value="Computer Glass">Computer Glass</option>

</select>

</td>

</tr>

<tr>

<td>Payment Type</td>

<option value="Debit card / Credit card">Debit card / Credit card</option>

</select>

</td>

</tr>

<tr>

<td><input type="text" id="cardno" name="cardno" placeholder="Enter the card

no" pattern="[0-9]{4} {0,1}[0-9]{4} {0,1}[0-9]{4} {0,1}[0-9]{4}" maxlength="19" ></td>

</tr>

<tr>

<td>Expiry Date</td>

</tr>

</table>

<br/>

</form>

</div>

</body>

</html>

27.Discount Price: ----

<!DOCTYPE html>

<html>

<head>

<style>

{

font-style: italic;

font-weight: bold;

text-align: center;

color: #b03060;

}

table{

float: left;

margin-left: 35%;

border-style: solid 5px;

border-spacing: 10px;

border-collapse: collapse;

border-width: 30%;

}

tr,td{

border-style: solid 5px;

border-collapse: collapse;

padding: 10px;

border-style: solid;

border-width: 2px;

border: 5px solid black;

}

#submit{

margin-left: 45%;

}

div{

text-align: center;

font-weight: bold;

}

#result{

font-style: italic;

color: #FF0000;

font-size: 40px;

text-align: center;

font-weight: bold;

}

#discount{

font-size: 25px;

text-align: center;

font-weight: bold;

}

</style>

</head>

<h1>DISCOUNT PRICE</h1>

<form>

<table>

<tr>

<td>Product Name</td>

<td><input type="text" name="name" id="name" pattern="[a-zA-Z0-9 ]+"

required> </td>

</tr>

<tr>

<td>Product Price</td>

<td><input type="number" id="price" name="price" min="15001"

required></td>

</tr>

<tr>

<td>Season</td>

<td>

<option value="summer">SUMMER SALE</option>

<option value="clearance">CLEARANCE SALE</option>

</select>

</td>

</tr>

</table><br>

<input type="button" name="submit" id="submit" value="GET DISCOUNT

PRICE" onclick="discount()">

</form>

function discount(){

var p=document.getElementById("price").value;

var s=document.getElementById("season").value;

var d;

if(s=="summer"){

document.getElementById("discount").innerHTML="The discount is 10%";

d=(p-(p*0.1));

}

else if(s=="newyear"){

document.getElementById("discount").innerHTML="The discount is 5%";

d=(p-(p*0.05));

}

else if(s=="clearance"){

document.getElementById("discount").innerHTML="The discount is 15%";

d=(p-(p*0.15));

}

document.getElementById("result").innerHTML="The discounted price : Rs

"+d;

}

</script>

</body>

</html>

28.BOOKS FORM

<html>

<head>

function test(){

alert("You have successfully submitted the Book Form");

return false;

}

</script>

</head>

<body>

<h1>A Simple Form</h1>

<h2>Form Fundamentals</h2>

<legend>Customer Info</legend>

<input type="text" id="cusname" name="cusname" placeholder="Enter

your name" autofocus required><br><br>

<label for="telephone">Telephone:</label>

<input type="tel" name="telephone" id="telephone"

placeholder="Pattern: 234-567-8910" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>

<label for="mail" >Email address:</label>

<input type="email" id="mail" name="mail" placeholder="Enter your

email address" required>

</fieldset>

<legend>Books</legend>

<label for="quantity">Quantity: {Maximum 5}</label>

<option value="Mastering HTML, CSS and JavaScript - Laura

Lemay">

</datalist>

</fieldset>

</form>

</body>

</form>

</body>

</html>

Outlook inverter

<!DOCTYPE html>

<html>

<head>

<title>Outlook Inverter Palace</title>

function billCalculation() {

/* Fill the Javascript code to calculate the bill amount */

var Luminous = document.getElementById("luminous").value;

var Microtek = document.getElementById("microtek").value;

var Exide = document.getElementById("exide").value;

var Livguard = document.getElementById("livguard").value;

var Vguard = document.getElementById("vguard").value;

var amount =

(Luminous*4740)+(Microtek*4500)+(Exide*5050)+(Livguard*5600)+(Vguard*5400);

if(amount>5500)

{

var discount = (amount*15)/100;

amount=amount-discount;

}

amount=parseFloat(amount);

document.getElementById("result").innerHTML = "Hi, You have to pay

Rs."+amount.toFixed(2)+". Thanks for selecting us!!!";

return false;

}

</script>

<style>

::placeholder {

color:#5D6D7E;

opacity: 2;

}

input[type="email"], input[type="tel"], input[type="number"],

input[type="text"],input[type="date"], textarea, select {

width: 85%;

color: #342E53;

font-weight: bold;

background: transparent;

border-radius: 6px;

border-style: solid;

border-width: 2px;

}

input[type="submit"] {

background-color: #08088A;

}

label span {

color: #2E4053;

}

body {

background-color: #9ACD32;

}

h1 {

color: #FFFFFF;

font-family: Arial;

border-style: 1px solid;

border-radius: 6px;

width: 50%;

margin-right: auto;

margin-left: auto;

background-color:#FF8C00;

text-align: center;

}

#result {

font-family:Calibri;

font-weight: bold;

font-size: 24px;

margin-right: auto;

margin-left: 15em;

color: #800000;

}

#submit {

font-weight: bold;

font-family: Times New Roman;

border-radius: 6px;

background: transparent;

margin-right: auto;

width: 13em;

height: 35px;

margin-left: 28em;

}

#reset {

font-weight: bold;

font-family: Times New Roman;

border-radius: 6px;

background: transparent;

margin-right: auto;

width: 13em;

height: 35px;

margin-left: 18em;

}

table {

width: 50%;

margin-right: auto;

margin-left: auto;

border-style: 3px groove;

border-spacing: 5px;

border-radius: 6px;

}

#billing td {

border-width:2px;

border-style: solid;

border-color: #EC7063;

padding: 5px;

}

.b {

width:50%;

margin-left: auto;

margin-right: 14em;

}

#brandName td {

margin-left: auto;

margin-right: auto;

width: 50%;

border-width: 2px;

border-style: solid;

border-spacing: 5px;

border-radius: 6px;

}

#submit:hover, #reset:hover {

background-color: #2E8B57;

color: #FFFFFF;

}

</style>

</head>

<body>

<h1>Outlook Inverter Palace</h1>

<tr>

</tr>

<tr>

<td><input type="text" name="name" id="name"

placeholder="Enter the name" pattern="[a-zA-z]+" required/></td>

</tr>

<tr>

<td><label><span><b>Contact

No*</b></span></label></td>

<td><input type="text" name="contactNo" id="contactNo"

placeholder="Enter the contact no" pattern="[7-9]{1}[0-9]{9}" required/></td>

</tr>

<tr>

<td><label><span><b>E-mail

address</b></span></label></td>

<td><input type="email" name="Email" id="Email"

placeholder="Example:abc@gmail.com" required/></td>

</tr>

<tr>

<td>

<label><span><b>Brand Name</b></span></label>

</td>

<td>

<tr>

<td><label><span><b>Luminous</b></span></label></td>

<td><input type="number"

name="luminous" id="luminous" min="0" required/></td>

</tr>

<tr>

<td><label><span><b>Microtek</b></span></label></td>

<td><input type="number" name="microtek"

id="microtek" min="0" required/></td>

</tr>

<tr>

<td><label><span><b>Exide</b></span></label></td>

<td><input type="number" name="exide"

id="exide" min="0" required/></td>

</tr>

<tr>

<td><label><span><b>Livguard</b></span></label></td>

<td><input type="number" name="livguard"

id="livguard" min="0" required/></td>

</tr>

<tr>

<td><label><span><b>V-Guard</b></span></label></td>

<td><input type="number" name="vguard"

id="vguard" min="0" required/></td>

</tr>

</table>

</td>

</tr>

<tr>

<td><label><span><b>Date of

Booking*</b></span></label></td>

<td><input required type="date" name="Date" id="Date"

/></td>

</tr>

<tr>

<td><label><span><b>Address</b></span></label></td>

<td><textarea id="address" required rows="5" cols="25"

placeholder="Enter your address"></textarea></td>

</tr>

</table>

<table>

<tr>

</tr>

</table>

</form>

</body>

</html>

Search This Blog

MasterMaterial

Cognizant Html css js CC

Comments

Post a Comment

Popular posts from this blog

Generative AI KBA

Java sba