WP Assignment

200210107046
WP Assignment
1) Explain box model with example.
Ans.: The CSS box model is a container that contains multiple properties including
borders, margin, padding, and the content itself. It is used to create the design and
layout of web pages. It can be used as a toolkit for customizing the layout of different
elements. The web browser renders every element as a rectangular box according to the
CSS box model.
Box-Model has multiple properties in CSS. Some of them are given below:
 content: This contains the actual data in the form of text, images, or other media
forms and it can be sized using the width & height property.
 padding: This property is used to create space around the element, inside any
defined border.
 border: This property is used to cover the content & any padding, & also allows
to set the style, colour, and width of the border.
 margin: This property is used to create space around the element i.e., around the
border area.
The following figure illustrates the Box model in CSS.
 Content Area: This area consists of content like text, images, or other media
content. It is bounded by the content edge and its dimensions are given by content-
box width and height.
 Padding Area: It includes the element’s padding. This area is actually the space
around the content area and within the border-box. Its dimensions are given by the
width of the padding-box and the height of the padding-box.
 Border Area: It is the area between the box’s padding and margin. Its dimensions
are given by the width and height of the border.
 Margin Area: This area consists of space between the border and the margin. The
dimensions of the Margin area are the margin-box width and the margin-box
height. It is useful to separate the element from its neighbours.
pg. 1
200210107046
CSS Box Model Working
For setting the width & height property of an element (for properly rendering the content in
the browser), we need to understand the working of the CSS Box model.
While setting the width and height properties of an element with CSS, we have only set the
width and height of the content area. We need to add padding, borders, and margins in order
to calculate the full size of an element. Consider the below example.
p{
width: 80px;
height: 70px;
margin: 0;
border: 2px solid black;
padding: 5px;
}
The total width for the element can be calculated as:
Total element width = width + left padding + right padding + left border + right border +
left margin + right margin
The <p> element can have a total width of 94px.
Total width = 80px (width) + 10px (left padding + right padding) + 4px (left border + right
border) + 0px (left margin + right margin) = 94px.
The total height for the element can be calculated as:
Total element height = height + top padding + bottom padding + top border + bottom border
+ top margin + bottom margin
The <p> element can have a total height of 84px.
Total height = 70px (height) + 10px (top padding + bottom padding) + 4px (top border +
bottom border) + 0px (top margin + bottom margin) = 84px.
Now, We have learned the working of the CSS Box Model in-depth and now we will see
Box Model examples so that we can properly understand it.
Example: This example illustrates the Box Model by implementing the various properties.
 HTML
<!DOCTYPE html>
<head>
<style>
. main {
font-size: 32px;
pg. 2
200210107046
font-weight: bold;
text-align: center;
}
#box {
padding-top: 40px;
width: 400px;
height: 100px;
border: 50px solid green;
margin: 50px;
text-align: center;
font-size: 32px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="main">CSS Box-Model Property</div>
<div id="box">Manthan</div>
</body>
</html>
Output:
Supported Browser:
 Google Chrome
 Internet Explorer
 Microsoft Edge
 Firefox
 Opera
 Safari

pg. 3
200210107046
2) Explain animations.
Ans.:
CSS Animation: CSS Animations is a technique to change the appearance and behavior of
various elements in web pages. It is used to control the elements by changing their motions
or display. It has two parts, one which contains the CSS properties which describe the
animation of the elements and the other contains certain keyframes which indicate the
animation properties of the element and the specific time intervals at which those have to
occur.
The @keyframes rule: Keyframes are the foundations with the help of which CSS
Animations works. They define the display of the animation at the respective stages of its
whole duration. For example: In the following code, the paragraph changes its color with
time. At 0% completion, it is red, at 50% completion it is of orange color and at full
completion i.e. at 100%, it is brown.
Animation Properties: There are certain animation properties given below:

animation-name: It is used to specify the name of the @keyframes describing the
animation.
animation-name: animation_name;
animation-duration: It is used to specify the time duration it takes animation to complete
one cycle.
animation-timing-function: Specifies how the animation makes transitions through
keyframes.
 ease: The animation starts slowly, then fast, and then finally ends slowly (this is
the default)
 linear: The animation plays with the same speed from start to end
 ease-in: The animation plays with a slow start
 ease-out: The animation plays with a slow end
 ease-in-out: The animation starts and ends slowly.
animation-delay: It is used to specify the delay when the animation starts.

animation-iteration-count: It is used to specify the number of times the animation will
repeat. It can specify as infinite to repeat the animation indefinitely.
animation-direction: Specifies the direction of the animation. It can have the following
values:
 normal: The animation is played forward. This is the default value.
 reverse: The animation is played in the reverse direction i.e. backward.
 alternate: The animation is played forwards first, and then backward.
 alternate-reverse: The animation is played backward first, and then forwards.
pg. 4
200210107046
animation-fill-mode: Specifies what values are applied by the animation before and after it
is executed.
 none: Animation will not apply any properties to the element before or after it is
executed. This is the default value.
 forwards: The element will retain the same animation properties of the last
keyframe after the animation completes.
 backwards: The element will get the properties of the first keyframe before the
start of the animation.
 both: The animation will follow the rules for both forwards and backward i.e. it
will get the properties defined for the initial keyframe before the start and will
retain the value of the last keyframe after the completion of the animation.
 animation-play-state: This allows you to play/pause the animation.
 Animation Shorthand Property: It is a shorthand way of implying the animation
properties for a quicker code. The properties should be in the following order:
animation: [animation-name] [animation-duration] [animation-timing-function] [animation-
delay]
[animation-iteration-count] [animation-direction] [animation-fill-mode]
[animation-play-state];
Supported Browsers:
 Google Chrome 43.0
 Microsoft Edge 12.0
 Firefox 16.0
 Safari 9.0
 Opera 30.0
3) Explain types of selectors in css with examples.

Ans.:
A CSS selector selects the HTML element(s) for styling purpose. CSS selectors select
HTML elements according to its id, class, type, attribute etc.
There are many basic different types of selectors.
 Element Selector
 Id Selector
 Class Selector
 Universal Selector
 Group Selector
 Attribute Selector
 Pseudo-Class Selector
 Pseudo-Element Selector
1. Element selector: The element selector selects HTML elements based on the element
name (or tag) for example p, h1, div, span, etc.
pg. 5
200210107046
2. Id selector: The id selector uses the id attribute of an HTML element to select a specific
element.
Note: An id of element is unique on a page to use id selector.
3. Class-selector: The class selector selects HTML elements with a specific class attribute.
4. Universal-selector: The Universal selector (*) in CSS is used to select all the elements in
a HTML document. It also includes other elements which are inside under another element.
5. Group-selector: This selector is used to style all comma separated elements with the same
style.
6. Attribute Selector : The attribute selector [attribute] is used to select the elements with a
specified attribute or attribute value.
7.Pseudo-Class Selector : It is used to style a special type of state of any element. For
example- It is used to style an element when a mouse cursor hovers over it.
Note: We use a single colon(:) in the case of Pseudo-Class Selector.
Syntax:
Selector: Pseudo- Class {
Property: Value;
}
8.Pseudo-Element Selector: It is used to style any specific part of the element. For
Example- It is used to style the first letter or the first line of any element.
Note: We use a double colon (::) in the case of Pseudo-Element Selector.
Syntax:
Selector: Pseudo- Element{
Property: Value;
}
4) Explain DOM model in js.
Ans.:
The Document Object Model (DOM) is a programming interface for HTML (HyperText
Markup Language) and XML (Extensible markup language) documents. It defines
the logical structure of documents and the way a document is accessed and manipulated.
Note: It is called a Logical structure because DOM doesn’t specify any relationship between
objects.
DOM is a way to represent the webpage in a structured hierarchical way so that it will
become easier for programmers and users to glide through the document. With DOM, we
can easily access and manipulate tags, IDs, classes, Attributes, or Elements of HTML using
commands or methods provided by the Document object. Using DOM, the JavaScript gets
access to HTML as well as CSS of the web page and can also add behavior to the HTML
elements. so basically Document Object Model is an API that represents and interacts
with HTML or XML documents.
Why DOM is required?
HTML is used to structure the web pages and Javascript is used to add behavior to our web
pages. When an HTML file is loaded into the browser, the javascript can not understand the
HTML document directly. So, a corresponding document is created(DOM). DOM is
pg. 6
200210107046
basically the representation of the same HTML document but in a different format with
the use of objects. Javascript interprets DOM easily i.e. javascript can not understand the
tags(<h1>H</h1>) in HTML document but can understand object h1 in DOM. Now,
Javascript can access each of the objects (h1, p, etc) by using different functions.
Structure of DOM: DOM can be thought of as a Tree or Forest (more than one tree). The
term structure model is sometimes used to describe the tree-like representation of a
document. Each branch of the tree ends in a node, and each node contains objects Event
listeners can be added to nodes and triggered on an occurrence of a given event. One
important property of DOM structure models is structural isomorphism: if any two DOM
implementations are used to create a representation of the same document, they will create
the same structure model, with precisely the same objects and relationships.
Documents are modeled using objects, and the model includes not only the structure of a
document but also the behavior of a document and the objects of which it is composed like
tag elements with attributes in HTML.
Properties of DOM: Let’s see the properties of the document object that can be accessed
and modified by the document object.
Representation of the DOM
 Window Object: Window Object is object of the browser which is always at top
of the hierarchy. It is like an API that is used to set and access all the properties
and methods of the browser. It is automatically created by the browser.
 Document object: When an HTML document is loaded into a window, it becomes
a document object. The ‘document’ object has various properties that refer to other
objects which allow access to and modification of the content of the web page. If
pg. 7
200210107046
there is a need to access any element in an HTML page, we always start with
accessing the ‘document’ object. Document object is property of window object.
 Form Object: It is represented by form tags.
 Link Object: It is represented by link tags.
 Anchor Object: It is represented by a href tags.
 Form Control Elements:: Form can have many control elements such as text
fields, buttons, radio buttons, checkboxes, etc.
Methods of Document Object:
 write(“string”): Writes the given string on the document.
 getElementById(): returns the element having the given id value.
 getElementsByName(): returns all the elements having the given name value.
 getElementsByTagName(): returns all the elements having the given tag name.
 getElementsByClassName(): returns all the elements having the given class
name.
Levels of DOM:
 Level 0: Provides a low-level set of interfaces.
 Level 1: DOM level 1 can be described in two parts: CORE and HTML.
 CORE provides low-level interfaces that can be used to represent any
structured document.
 HTML provides high-level interfaces that can be used to represent
HTML documents.
 Level 2: consists of six
specifications: CORE2, VIEWS, EVENTS, STYLE, TRAVERSAL,
and RANGE.
 CORE2: extends the functionality of CORE specified by DOM level 1.
 VIEWS: views allows programs to dynamically access and manipulate
the content of the document.
 EVENTS: Events are scripts that are either executed by the browser
when the user reacts to the web page.
 STYLE: allows programs to dynamically access and manipulate the
content of style sheets.
 TRAVERSAL: This allows programs to dynamically traverse the
document.
 RANGE: This allows programs to dynamically identify a range of
content in the document.
 Level 3: consists of five different specifications: CORE3, LOAD and
SAVE, VALIDATION, EVENTS, and XPATH.
 CORE3: extends the functionality of CORE specified by DOM level 2.
 LOAD and SAVE: This allows the program to dynamically load the
content of the XML document into the DOM document and save the
DOM Document into an XML document by serialization.
 VALIDATION: This allows the program to dynamically update the
content and structure of the document while ensuring the document
remains valid.
pg. 8
200210107046
 EVENTS: extends the functionality of Events specified by DOM Level

2.
 XPATH: XPATH is a path language that can be used to access the DOM
tree.
5) Explain regular expression for email verification.

Ans.:
Given an email id and the task is to validate the email id is valid or not. The validation of
email is done with the help of Regular Expressions.
Approach 1:
 RegExp – It checks for the valid characters in the Email-Id (like, numbers,
alphabets, few special characters.)
 It is allowing every special symbol in the email-id (like, !, #, $, %, ^, &, *)
symbols in the Email-Id but not allowing the second @ symbol in ID.
Example: This example implements the above approach.
<!DOCTYPE html>
<html>
<head>
<title>
How to validate email address
using RegExp in JavaScript ?
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;">
Manthan Parmar
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<button onclick = "GFG_Fun()">
click here
</button>
pg. 9
200210107046
<p id = "GFG_DOWN" style =

"font-size: 24px; font-weight: bold; color: green;">
</p>
<script>
var up = document.getElementById('GFG_UP');
var down = document.getElementById('GFG_DOWN');
var email = 'parmarmathan2003@gmail.com';
up.innerHTML = "Click on the button to check the "
+ "validity of Email Id.<br>" + email;
function isEmail(email) {
// Regular Expression (Not accepts second @ symbol
// before the @gmail.com and accepts everything else)
var regexp =
/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-
9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
// Converting the email to lowercase
return regexp.test(String(email).toLowerCase());
}
function GFG_Fun() {
down.innerHTML = isEmail(email);
}
</script>
</body>
</html>
OUTPUT:
Before clicking on the button:
pg. 10
200210107046
After clicking on the button:
Approach 2:
 RegExp – It checks for the pattern like anything@anything.anything
 Not like the previous example, RegExp is accepting every character along with
special character multiple times.
Example 2: This example implements the above approach.
<!DOCTYPE HTML>
<html>
<head>
<title>
How to validate email address
using RegExp in JavaScript ?
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;">
pg. 11
200210107046
Manthan Parmar
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<button onclick = "GFG_Fun()">
click here
</button
<p id = "GFG_DOWN" style =
"font-size: 24px; font-weight: bold; color: green;">
</p>
<script>
var up = document.getElementById('GFG_UP');
var down = document.getElementById('GFG_DOWN');
var email = 'parmar%manthan^%2003@gmail.com';
up.innerHTML = "Click on the button to check the "
+ "validity of Email Id.<br>" + email;
function isEmail(email) {
// Regular Expression (Accepts every special
// character along with @ symbol)
var regexp = /\S+@\S+\.\S+/;
// Converting the email to lowercase
return regexp.test(String(email).toLowerCase());
}
function GFG_Fun() {
down.innerHTML = isEmail(email);
pg. 12
200210107046
}
</script>
</body>
</html>
OUTPUT:
Before clicking on the button:
After clicking on the button:
6) Explain event handling in js.

Ans.:
pg. 13
200210107046
When an event occurs, you can create an event handler which is a piece of code that will execute to
respond to that event. An event handler is also known as an event listener. It listens to the event and
responds accordingly to the event fires.
An event listener is a function with an explicit name if it is reusable or an anonymous function in

case it is used one time.
An event can be handled by one or multiple event handlers. If an event has multiple event handlers,
all the event handlers will be executed when the event is fired.
There are three ways to assign event handlers.
1) HTML event handler attributes
Event handlers typically have names that begin with on, for example, the event handler for
the click event is onclick.
To assign an event handler to an event associated with an HTML element, you can use an HTML
attribute with the name of the event handler. For example, to execute some code when a button is
clicked, you use the following:
<input type="button" value="Save" onclick="alert('Clicked!')">

Code language: HTML, XML (xml)
In this case, when the button is clicked, the alert box is shown.
When you assign JavaScript code as the value of the onclick attribute, you need to escape the HTML
characters such as ampersand (&), double quotes ("), less than (<), etc., or you will get a syntax error.
An event handler defined in the HTML can call a function defined in a script. For example:
<script>
function showAlert() {
alert('Clicked!');
</script>
<input type="button" value="Save" onclick="showAlert()">
In this example, the button calls the showAlert() function when it is clicked.
pg. 14
200210107046
The showAlert() is a function defined in a separate <script> element, and could be placed in an external
JavaScript file.
Important notes
The following are some important points when you use the event handlers as attributes of the HTML
element:
First, the code in the event handler can access the event object without explicitly defining it:
<input type="button" value="Save" onclick="alert(event.type)">
Second, the this value inside the event handler is equivalent to the event’s target element:
<input type="button" value="Save" onclick="alert(this.value)">
Third, the event handler can access the element’s properties, for example:
<input type="button" value="Save" onclick="alert(value)">
Disadvantages of using HTML event handler attributes
Assigning event handlers using HTML event handler attributes are considered as bad practices and
should be avoided as much as possible because of the following reasons:
First, the event handler code is mixed with the HTML code, which will make the code more difficult
to maintain and extend.
Second, it is a timing issue. If the element is loaded fully before the JavaScript code, users can start
interacting with the element on the webpage which will cause an error.
For example, suppose that the following showAlert() function is defined in an external JavaScript file:
<input type="button" value="Save" onclick="showAlert()">
And when the page is loaded fully and the JavaScript has not been loaded, the showAlert() function is
undefined. If users click the button at this moment, an error will occur.
pg. 15
200210107046
2) DOM Level 0 event handlers
Each element has event handler properties such as onclick. To assign an event handler, you set the
property to a function as shown in the example:
let btn = document.querySelector('#btn');
btn.onclick = function() {
alert('Clicked!');
};
Code language: JavaScript (javascript)
In this case, the anonymous function becomes the method of the button element. Therefore,
the this value is equivalent to the element. And you can access the element’s properties inside the
event handler:
btn.onclick = function() {
alert(this.id);
};
Output:
btn
By using the this value inside the event handler, you can access the element’s properties and
methods.
To remove the event handler, you set the value of the event handler property to null:
btn.onclick = null;
The DOM Level 0 event handlers are still being used widely because of its simplicity and cross-
browser support.
pg. 16
200210107046
3) DOM Level 2 event handlers
DOM Level 2 Event Handlers provide two main methods for dealing with the
registering/deregistering event listeners:
 addEventListener() – register an event handler

 removeEventListener() – remove an event handler
These methods are available in all DOM nodes.
The addEventListener() method
The addEventListener() method accepts three arguments: an event name, an event handler function, and
a Boolean value that instructs the method to call the event handler during the capture phase (true) or
during the bubble phase (false). For example:
btn.addEventListener('click',function(event) {
alert(event.type); // click
});
It is possible to add multiple event handlers to handle a single event, like this:
alert(event.type); // click
});
alert('Clicked!');
});

The removeEventListener() method
The removeEventListener() removes an event listener that was added via the addEventListener(). However,
you need to pass the same arguments as were passed to the addEventListener(). For example:
pg. 17
200210107046
// add the event listener
let showAlert = function() {
alert('Clicked!');
};
btn.addEventListener('click', showAlert);
// remove the event listener
btn.removeEventListener('click', showAlert);
Using an anonymous event listener as the following will not work:
btn.addEventListener('click',function() {
alert('Clicked!');
});
// won't work
btn.removeEventListener('click', function() {
alert('Clicked!');
});

Summary
 There are three ways to assign an event handler: HTML event handler attribute, element’s event
handler property, and addEventListener().
 Assign an event handler via the HTML event handler attribute should be avoided.
pg. 18

WP Assignment

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WP Assignment

Uploaded by

Copyright:

Available Formats

200210107046

CSS Box Model Working

Animation Properties: There are certain animation properties given below:

animation-delay: It is used to specify the delay when the animation starts.

3) Explain types of selectors in css with examples.

Representation of the DOM

 EVENTS: extends the functionality of Events specified by DOM Level

5) Explain regular expression for email verification.

<p id = "GFG_DOWN" style =

After clicking on the button:

After clicking on the button:

6) Explain event handling in js.

An event listener is a function with an explicit name if it is reusable or an anonymous function in

There are three ways to assign event handlers.

1) HTML event handler attributes

<input type="button" value="Save" onclick="alert('Clicked!')">

<input type="button" value="Save" onclick="showAlert()">

Code language: HTML, XML (xml)

<input type="button" value="Save" onclick="alert(event.type)">

Code language: HTML, XML (xml)

<input type="button" value="Save" onclick="alert(this.value)">

Code language: HTML, XML (xml)

<input type="button" value="Save" onclick="alert(value)">

Code language: HTML, XML (xml)

Disadvantages of using HTML event handler attributes

<input type="button" value="Save" onclick="showAlert()">

Code language: HTML, XML (xml)

2) DOM Level 0 event handlers

let btn = document.querySelector('#btn');

Code language: JavaScript (javascript)

let btn = document.querySelector('#btn');

Code language: JavaScript (javascript)

Code language: JavaScript (javascript)

3) DOM Level 2 event handlers

 addEventListener() – register an event handler

These methods are available in all DOM nodes.

The addEventListener() method

let btn = document.querySelector('#btn');

Code language: JavaScript (javascript)

let btn = document.querySelector('#btn');

Code language: JavaScript (javascript)

let btn = document.querySelector('#btn');

// add the event listener

let showAlert = function() {

// remove the event listener

Code language: JavaScript (javascript)

Using an anonymous event listener as the following will not work:

let btn = document.querySelector('#btn');

Code language: JavaScript (javascript)

You might also like