Description
CSE3002
Lab Assignment 2
ISHAAN OHRI
18BCE0265
Question:
Design the webpage with the types of Cascading style sheets (CSS) – internal, external and inline styles. Using CSS and HTML create a webpage that has two columns. Each column should use half of the width of the page. The left half should have a light gray background and the right half should have a light green background.The webpage right column should show the recipe for grilled cheese sandwiches with bacon and tomato. The ingredients should be displayed in left column as an unordered list, with no bullets. meat ingredients should have a light red background color, vegetables should have a light green background, and dairy products should have a light yellow. The title should be in a sans serif font of your choice, and the instructions should have a heading “Instructions” and the font for the instructions should be italic.
Procedure:
<!DOCTYPE html>: Tells browser that it is an HTML document
<head>: Container for header elements
<title>: Name for toolbar
<body>: Body element for document
<style>: Styles for the different elements
<h2>: Heading of level 2
align: alignment on the HTML document
<p>: Defines a paragraph
<frameset>: Used to divide the document into multiple sections where different documents can be loaded in each section. <link>: Link external plugins or scripts
rel: defines the relationship between the current document and the linked document type: specifies the type of linked document href: the link to the document <ul>: Defines unordered list style: Defines the style of the unordered list.
<li>: Defines individual list item
background-color: Defines the background colour of the element font-size: Defines the font size of the enclosed font text-align: Defines the alignment of the text font-family: Defines the font of the text font-style: Defines the style of font like bold, italic etc.
padding-left: Defines the left padding padding-right: Defines the right padding
Code: index.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>ISHAAN OHRI 18BCE0265</title>
<frameset cols=”50%,50%”>
<frame src=”ingredients.html”>
<frame src=”recipe.html”>
</frameset>
</head>
<body>
</body>
</html>
ingredients.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Recipe</title>
<style> body{
background-color: lightgrey; font-size: 20px;
}
</style>
<link rel=”stylesheet” type=”text/css” href=”./style.css”>
</head>
<body>
<h2 style=”text-align: center; font-family: sans-serif; font-size: 40px;” >Ingredients</h2>
<ul style=”list-style: none; line-height: 40px; font-family: sans-serif;”>
<li class=”veg”>4-5 slice of tomatoes</li>
<li class=”veg”>4-5 slice of cucumbers</li>
<li class=”dairy”>50g of cheese</li>
<li class=”meat”>3-4 slice of bacon</li>
<li class=”dairy”>2 slice of bread</li>
<li class=”dairy”>Butter</li>
</ul>
</body>
</html>
recipe.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Recipe</title>
<style> body{ background-color: lightgreen; font-size: 20px;
}
</style>
<link rel=”stylesheet” type=”text/css” href=”./style.css”>
</head>
<body>
<h2 style=”font-style: italic; text-align: center; font-family: sans-serif; font-size: 40px;” >Instructions</h2>
<p>
Cut about 4-5 slices of tomatoes and cucumbers. Put some butter on both slices of bread. Place the tomatoes, cucumbers and some grated cheese on top. Put the bacon slices on top of the cheese and put the second slice of bread on top. Grill the sandwich for about 2-3 minutes. Voilà, your sandwich is ready!
</p>
</body>
</html>
style.css
p{ font-family: sans-serif; line-height: 40px; text-align: center;
} .veg{
background-color: lightgreen; padding-left: 10px; padding-right: 10px;
} .meat{
background-color: tomato; padding-left: 10px; padding-right: 10px;
} .dairy{
background-color: yellow; padding-left: 10px; padding-right: 10px;
}
Output:
Question:
Write a javascript program to validate HTML form fields in a webpage.
Design a Registration Webpage for an insurance company.
The form must contain a minimum of 10 fields.
Implement Java Script with regular expression to validate the following
For Last Name field – the last name should be dot(.) followed by single letter combination(Note:.K or .N.L is allowed.kumar or Nakul is not allowed ).
For E-Mail ID accept only the gmail ID.
With the Data of Birth input,calculate the age of the person and populate it in the textbox automatically.
Validate the form for empty field submissions.
Procedure:
<!DOCTYPE html>: Tells browser that it is an HTML document
<head>: Container for header elements
<title>: Name for toolbar
<body>: Body element for document
<style>: Styles for the different elements
<h1>: Heading of level 1
align: alignment on the HTML document <form>: Creates an HTML form for user input action: backend script to process data
method: API request method
<table>: Defines a table cellpadding: Space to left on all 4 sides inside the cell
<tr>: Defines a new table row
<td>: Defines a cell
<input>: Declare input controls that allow users to input data. type: Defines the type of input text/radio/checkbox name: Defines the name of the <input> element id: Unique id to identify
pattern: Defines pattern of input data
required: Compulsory to enter value: Defines the value of the option in radio/checkbox
<label>: Represents a caption for an item in a user interface
For:
<textarea>: Multi-line text input control
rows: Min no of rows cols: Min no of cols.
background-color: Defines the background colour of the element font-size: Defines the font size of the enclosed font text-align: Defines the alignment of the text font-family: Defines the font of the text font-style: Defines the style of font like bold, italic etc.
padding-left: Defines the left padding padding-right: Defines the right padding
Code: index.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>18BCE0265 IWP Lab DA – 4</title>
<link rel=”stylesheet” href=”style.css”>
<script src=”script.js”></script>
</head>
<body>
<h1 align=”center”>Insurance Details</h1>
<div>
<form id=”insurance-form” onsubmit=”submitForm()” action=”submit” method=”POST”>
First Name:
<input type=”text” id=”first-name” required>
<br><br> Last Name:
<input type=”text” id=”last-name” required>
<br><br>
<br><br>
Age:
<input type=”number” id=”age”> <br><br>
Gender:
<input type=”radio” name=”gender” value=”male” checked>Male
<input type=”radio” name=”gender” value=”female”>Female
<input type=”radio” name=”gender” value=”other”>Other
<br><br>
Email ID:
<input type=”email” id=”email” required style=”text-transform:
lowercase;”>
<br><br>
Mobile Number:
<input type=”text” id=”mobile” required>
<br><br> Address:
<textarea id=”address” rows=”5″ cols=”30″ required></textarea>
<br><br> Pincode:
<input type=”text” id=”pincode” required>
<br><br>
Do you have any Health Problems ?
<input type=”radio” name =”health” value=”yes”>Yes
<input type=”radio” name =”health” value=”no” checked>No<br><br>
List health problems if any :
<textarea id=”health-problems” rows=”5″ cols=”30″ ></textarea> <br><br>
<input type=”submit” value=”Validate”/> <br>
</form>
</div>
</body>
</html>
style.css
body{
background-color: rgb(20,20,20); font-family: Verdana, Geneva, Tahoma, sans-serif; color: rgb(16, 229, 125);
} form{ text-align: center; font-size: 1em; font-weight: 700;
font-family: Verdana, Geneva, Tahoma, sans-serif;
} input{
height: auto; width: auto; padding: 5px 10px 5px 10px; text-transform: capitalize; background-color: rgb(20,20,20); border: 2px solid rgb(156,156,156); border-radius: 5px; color: white; font-size: 1em;
font-family: Verdana, Geneva, Tahoma, sans-serif;
} textarea{
padding: 5px 10px 5px 10px; text-transform: capitalize; background-color: rgb(20,20,20); border: 2px solid rgb(156,156,156); border-radius: 5px; color: white; font-size: 1em;
font-family: Verdana, Geneva, Tahoma, sans-serif; }
script.js
function calculateAge(){
var age = current.getFullYear() – year; if(
current.getMonth() < month ||
){
age = age – 1;
}
currentAge = document.getElementById(“age”);
currentAge.value= age;
}
function submitForm() {
var pattern = /^([.][A-Z])*$/;
var text = document.getElementById(“last-name”); if(!pattern.test(text.value)){ alert(“Enter Correct Last Name”); text.focus();
}
var pattern = /^[a-z0-9._-]+@[gmail]+.[com]{2,5}$/i; var text = document.getElementById(“email”); if(!pattern.test(text.value)){ alert(“Enter Correct Email”); text.focus();
}
}
Output:
Reviews
There are no reviews yet.