0% found this document useful (0 votes)
87 views36 pages

Pulkit

nothing
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
87 views36 pages

Pulkit

nothing
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 36

In

Industrial Training Report on

Full-stack WEB DEVELOPMENT

At
Promodaddy Digital LLP

Submitted in partial fulfillment of the requirements for the award of the degree of

Bachelor of Technology

in

Computer Engineering

(Session 2024-2025)

Submitted to - Submitted by-


Dr. Amit Pandey Rohit Kumawat

Assistant Professor PCE23CS145

(Faculty Coordinator- Industrial Training)

DEPARTMENT OF COMPUTER ENGINEERING


POORNIMA COLLEGE OF ENGINEERING,
JAIPUR RAJASTHAN TECHNICAL UNIVERSITY,
KOTA AUGUST 2024

1
DECLARATION

I now declare that the work being presented in the Industrial Training report titled Web
Development (Front-end) in partial fulfillment for the award of the Degree of Bachelor of
Technology in Computer Engineering and submitted to the Department of Advance
Computing, Poornima College of Engineering, Jaipur, is an authentic record of my work
carried out at Promodaddy Digital LLP during the session 2024-25.
I have not submitted the matter presented in this report anywhere for the award of any other Degree.

Signature of the Student:

Name: Rohit Kumawat


Reg. No.: PCE23CS145
Place: Jaipur

2
TRAINING CERTIFICATE FROM COMPANY

3
DEPARTMENT OF COMPUTER ENGINEERING

Date: 24/07/2023

CERTIFICATE

This is to certify that the Industrial Training report titled Web Development (Front-end) has
been submitted by Pulkit Barola, PCE23CS131 in partial fulfillment for the award of the
Degree of Bachelor of Technology in Computer Engineering in the Department of Advance
Computing during the session 2023-24, Even Semester. The industrial training work is found
satisfactory and approved for submission.

Dr. Amit Pandey Dr. Nikita Jain

Assistant Professor HOD

Faculty Coordinator- Industrial Training Department of Advance

Computing, PCE

4
ACKNOWLEDGEMENT

I would like to convey my profound sense of reverence and admiration to my supervisor Mr.
Rohit kumawat, Founding CEO Of Promodaddy Digital LLP for his intense concern,
attention, priceless direction, guidance, and encouragement throughout this internship.

I extend my heartiest gratitude to Ms. Amit Pandey, Assistant Professor, Coordinator-


Industrial Training, who extended their cooperation to steer the topic toward its successful
completion.
My special heartfelt gratitude goes to Dr. Nikita Jain Professor and Head, Department of
Advance Computing, Poornima College of Engineering, for unvarying support, guidance, and
motivation during this research.

I am grateful to Dr. Mahesh Bundele, Director, Poornima College of Engineering for his
helping attitude with a keen interest in completing this training work on time.

I would like to express my deep sense of gratitude towards the management of Poornima
College of Engineering including Dr. S. M. Seth, Chairman Emeritus, Poornima Group and
former Director NIH, Roorkee, Shri Shashikant Singhi, Chairman, Poornima Group, Mr.
M. K. M. Shah, Director Admin & Finance, Poornima Group and Ar. Rahul Singhi,
Director Poornima Group for establishment of institute and providing facilities my studies.

I am deeply thankful to my parents and all other family members for their blessings and
inspiration. Last, but not least, I would like to give special thanks to God who enabled me to
complete my training on time.

Rohit Kumawat

PCE23CS145
TABLE OF CONTENTS

CHAPT PARTICULARS PAGE NO.


ER NO.

Title Page i

Candidate’s Declaration ii

Certificate (s) of all Trainings undergone iii

Certificate by the Department iv

Acknowledgment v

Table of Contents vi

List of Tables vii

List of Figures viii

Abstract 1

Training Platforms and Trainer description 2

1 Web development 3

1.1 Introduction 4
1.2 Several aspects of web development
1.3 Process 5

2 Hardware and software requirement 67

1.1 Hardware required 8


1.2 Software required

3 Tools 9
3.1 Introduction 10
3.2 Features 11
4 HTML 12
4.1 Introduction 13
4.2 What is web? 14
4.3 Versions of HTML 15
5 CSS 16
5.1 What is CSS? 17
5.2 CSS Syntax 18
5.2.1 Id Selector 19
5.2.2 Class selector 20
5.3 CSS Comments 22
5.4 CSS Styles 23
6 JavaScript 24
6.1 Introduction 25
6.2 How to change the content of HTML 26
using JavaScript 27
6.3 Comments 28
6.4 JavaScript Variable 29
6.5 JavaScript from validation 30
6.6 JavaScript Functions 31
6.7 JavaScript control statements 32

7 7.1 Password Generator 33


7.2 Simple Calculator 33
8 8.1 Conclusion 34
8.2 Future Scope 34
9 References 35
LIST OF TABLES

TABLE TITLE PAGE


NO. NO.
1 Hardware required 4

2 Software required 4

FIGURE TITLE PAGE NO.


NO.
1 Poornima College of Engineering

2 Web Developing Process

3 Digital marketing company’s website

4 Registration Form Using Bootstrap

5 Website

LIST OF FIGURES
ABSTRACT

This report introduces an in-depth overview of experiences and insights gained during the front-
end web development internship. This has practically focused on practical applications of
theoretical knowledge, hence helping the intern improve their technical skills on HTML, CSS, and
JavaScript with regards to real-world projects.

Interns actively participated in team-based projects emphasizing good team performance and
effective communication in a data-rich environment. These experiences helped improve individual
skills and bring valuable lessons in professional collaboration and successful project management.

'Web development' is the process of website creation and maintenance for the Internet or a private
network. Web development can include the simplest static pages to the most complex web-based
applications, electronic businesses, or social network services. Important activities in the web
development spectrum maintain the status of web engineering, design, content creation, client-
side/server-side scripting, server, and e-commerce configurations.

Web development primarily focuses on the technology that is behind the functioning of the
website, covering coding and markup languages. The increased use of a content management
system (CMS) together with improving the technical threshold makes updating and maintaining
websites functionally simple enough, even with minimum technical knowledge.

Web development teams of big organizations can have as many as a hundred members, mostly
working with Agile frameworks. Small companies may hire just one, or even the post is shared
with other jobs such as graphic designers or IT staff. In any case, cross-functional teams are not
new. Developers also specialize as front-end, back-end, or full-stack developers. The former
comprises what a user interacts with, and the latter manages the server side of things. The business
in which web development is associated has been surging rapidly since the World Wide Web was
created and grown fast to be one of the most used technologies in the world today.
TRAINING PLATFORMS

Introduction

Promodaddy Digital LLP, a dynamic company dedicated to empowering individuals through


education and innovation. Our goal is to equip learners with the skills they need to thrive in
today's world. With a range of courses, workshops, and training programs, we provide
transformative learning experiences tailored to individual needs. We believe in the power of
hands-on learning, practical application, and staying ahead of industry trends. Inclusivity and
collaboration are at the heart of our teaching philosophy. Our experienced instructors and
thought leaders ensure the highest quality education for our learners. We offer comprehensive
career services to support professional growth. Join us and embark on a journey of learning,
building, and embracing innovation. Together, we can empower individuals and shape a
brighter future.

1.1 Full name of the Internship: F u l l - s t a c k Web Development

1.2 Training Platform: Offline

1.3 Training Starting Date: 11 July 2024

1.4 Training Ending Date: 26 July 2024

1.5 Total Training Duration: approx. 30 hours

1.6 Date of Certification: 26 July 2024


TRAINER DESCRIPTION

1.1 Introduction
Choosing Promodaddy Digital LLP for my training needs is a well-informed decision driven by
our unwavering commitment to excellence and innovation. Our technical training platform
stands out in the crowded landscape for several compelling reasons. First and foremost,
Promodaddy Digital LLP is at the forefront of transformative technologies such as Robotics,
Artificial Intelligence, and Machine Learning, ensuring that our training programs are not only
comprehensive but also aligned with the latest industry trends.

What Promodaddy Digital LLP is apart of is our industry-focused approach, backed by a team of
seasoned experts who bring real-world experience to the training room. Unlike generic training
providers, Learn and Build specializes in tailoring programs to address specific industry needs,
ensuring that our clients gain practical insights that are directly applicable to their professional
endeavors.

Furthermore, Promodaddy Digital LLP takes pride in its commitment to service quality and
operational excellence. Our training platform is not just about acquiring theoretical knowledge; it's
about developing practical skills that empower individuals and organizations to thrive in the
dynamic tech landscape. When you choose Learn and Build, you choose a training experience that
goes beyond the ordinary, offering a transformative journey toward mastering the technologies that
will shape the future.
1.2 Reason for Selecting this Platform

When it comes to Web Development (front-end), selecting the Learn and Build platform offers
multiple compelling reasons. In today's digital era, where data is abundant and technology is
pervasive, the significance of Web Development (front-end) is undeniable. Learn and Build
provides a comprehensive training program that equips individuals with the skills to navigate this
data-driven world.
As we are surrounded by vast amounts of data, ranging from social media information to business-
generated data, acts as a powerful tool to transform this data into meaningful user experiences. By
leveraging the knowledge gained from Learn and Build, organizations of all sizes, be they large
corporations, hospitals, or small businesses, can tap into the potential insights hidden within this
sea of information.
By selecting the Promodaddy Digital LLP platform, individuals gain the necessary expertise to
excel in Front Web Development (front-end). They learn how to harness the power of data
responsibly, creating engaging and user-friendly websites that enhance the overall user experience.
With Promodaddy Digital LLP, individuals can become proficient in Web Development (front-
end), leverage data-driven insights, and contribute to the digital landscape.
1.3 Profile of the Company

Promodaddy Digital LLP is a leading company committed to empowering individuals


through transformative education and fostering innovation. With our diverse range of
courses, workshops, and training programs, we equip learners with the skills they need to
thrive in today's dynamic world. Our experienced instructors and industry experts deliver
high-quality education tailored to individual needs.

Promodaddy Digital LLP prioritizes practical application and staying ahead of industry
trends. Our hands-on learning approach ensures that learners acquire real-world skills that
are directly applicable to their professional endeavors. We promote diversity, inclusivity,
and collaboration to create a supportive learning community.

In addition to our comprehensive educational offerings, we provide career services to


support learners in their professional journeys. Our commitment to service quality and
operational excellence sets us apart. We believe in going beyond traditional education to
empower individuals and organizations to shape a brighter future. Join us at Promodaddy
Digital LLP and embark on a transformative journey of learning and innovation.
1.4 Technical Profile of the Instructor
Mr. Vidhan Solanki, who was my instructor during the internship period, is a very competent
professional working as an Associate Data Scientist at Celebal Technologies. He has a very strong
technological background and holds some very impressive certifications, like being Microsoft
Certified 4 times and 1-time Databricks certified. Vikram has an understanding of all the
technologies and tools that power today's data science landscape.

His vast technical expertise includes Vision, MLOps, Azure, Python, ML, VCS, and Linux. This
breadth of skill indicates his breadth of competency, from basic to advanced, in data science ᅳ ranging
from data exploration to deployment.

In this profile of an Associate Data Scientist, Celebal Technologies are worked upon by offering and
marshaling data with focused intelligence and patterns that empower its clients to make smarter
decisions. He is an integral part of providing solutions at the forefront of creation in Robotics, Artificial
Intelligence, and Machine Learning, both by theoretical explanations and practical implications. His
contributions are the epitome of top-flight training and mentorship at Cerebral Technologies in the
dynamic and changing space of data science.

1.5 Conclusion

Cerebral Technologies is one of the greatest training platforms in front-end web


development for some very convincing reasons. At the very forefront in the
development of emerging technologies concerning responsive design, user experience,
and performance optimization, the company ensures that its training programs are quite
complete and truly at par with current trends in this particular industry.

I chose Celebal for my front-end development training because this area of today's
digital landscape plays a very critical role. With increasing banking on engaging, user-
friendly websites to help them connect with their customers, businesses put front-end
development at the top in driving user interaction and satisfaction. At a time when
frameworks like React and Angular are changing the way we build interfaces,
mastering these skills is crucial for any aspiring web developer.

It further consolidates the role of Celebal as an ideal training partner due to its
commitment to ethical coding practices and promotion of inclusive design principles.
This focuses on equipping trainees with technical skills, paired with a strong base in
user-centered design, thereby enabling future developers working and studying at
Celebal to work toward the creation of impactful, accessible web experiences with a
view to growth and innovation within India's technology sector.
CHAPTER-1 WEB DEVELOPMENT
1.1 Introduction

A website is a group of pages of related information, often including multimedia content, usually under an common
domain name, and published on at least one web server. This private local area network (LAN) or public Internet
Protocol (IP) network, such as the Internet, is accessed through mention of a uniform resource locator (URL) that
identifies the site.

A website can be used for many functions and in many fashions. For instance, it may be a personal website,
commercial website of a company, a governmental website, or probably the website of a non-governmental
organization. Normally, websites are focused on only one topic or purpose, for example, entertainment, social
networking, news, or education. The World Wide Web consists of all the publicly available websites, while private
ones, such as a company's website, are usually part of an intranet.

Web development would be the broad term for the work involved in developing a website for the Internet ᅳ World
Wide Web-or an intranet, which is a private network. It ranges from developing the simplest static single page of
plain text up to the most complex web-based Internet applications, electronic businesses, and social network
services. A more comprehensive list of activities to which web development commonly refers can also include web
engineering, web design, web content development, client liaison, client-side/server-side scripting, web Server and
network security configuration, and e-commerce development. Among web professionals, the term "web
development" usually refers to the major non-design aspects of building websites: writing markup and coding.

Several Aspects of Web Development

Before developing a website once should keep several aspects in mind:

⮚ What to put on the website?


⮚ Who will host it?
⮚ How to make it interactive?
⮚ How to secure the source code frequently?
⮚ Will the website design display well in different browsers?
⮚ Will the navigation menus be easy to use?
⮚ Will the website load quickly?
⮚ How easily will the site pages print?
1.2 Process

These are the steps considered while developing a webpage:

Decide purpose

Planning

Designing

Gather Content

Building

Testing

Upload to server

Marketing and
maintenance
Fig 2-Web Developing Process
CHAPTER-2
HARDWARE AND SOFTWARE REQUIREMENTS

2.1 Hardware Required:

TABLE 1-HARDWARE REQUIRED

Number Description

1. Window XP/Window 10
2. Min 8 GB RAM

2.2 Software Required:

TABLE 2-SOFTWARES REQUIRED

Number Description

1. Windows XP,10
2. visual studio code
3. Notepad
4. HTML/CSS/JavaScript/Django
CHAPTER 3 TOOLS

3.1 Introduction

Two parts of the Translate and Edit application had been planned: front-end and back-end development. The front
end is referred to as that part of the web which you can see and interact with; for example, client-side
programming. While the frontend code is interacting with the user in real-time, the backend interacts with a server
to return results ready for the user. Frontend is a combination of HTML CSS and JavaScript coding. It means that, by
applying JavaScript, changes in the design of a webpage can be made on the spot; however, these changes are only
temporary and visible to the user.

This would normally fall outside the scope of user rights to dynamically change web content on the server side.
Logically, administrators deal with back-end modifying databases, for example, as often they contain sensitive data
that should not be in the public domain perusing or altering. Languages representing front-end and back-end tools
include but are not limited to HTML, CSS, JavaScript PHP, and MYSQL, among others. We will review all these
languages briefly in this section as given below.

3.2 Features
Web Page Assets, Resources, and Network Information

Profiting and Auditing


CHAPTER-4 HTML

4.1 Introduction

HTML is an acronym for Hyper Text Mark-Up Language, a "mark-up language" whose purpose is to prepare written
documents with formatting tags. The tags show how the document will appear and how it will connect to other
documents.

The World Wide Web, or simply, the Web, denotes the worldwide network formed by all the documents—in short,
"web pages"—which connect to one another through hyperlinks.

Web pages are typically built off one central page that acts as an entry point to the other pages via hyperlinks. This
collection of web pages interlinked via hyperlinks and centered on a central page is known as a website.

The Web is a large dynamic archive comprised of innumerable websites which enable access to the web pages most
likely containing formatted text, images, sounds, video, etc.

4.2 What is the Web?

The Web is composed of web pages stored on web servers, which are machines that are

constantly connected to the Internet and which provide the pages that users request. Every web

page, and more generally any online resource, such as images, video, music, and animation, is

associated with a unique address called a URL. The key element for viewing web pages is the

browser, a software program that sends requests to web servers, then processes the resulting

data and displays the information as intended, based on instructions in the HTML page.

The most commonly used browsers on the Internet include:

⮚ Mozilla Firefox,
⮚ Microsoft Internet Explorer,
⮚ Netscape Navigator,
⮚ Safari,
⮚ opera
4.3 Versions of HTML

HTML was designed by Tim Berners-Lee, at the time a researcher at CERN (Chinese Ecosystem Research
Network), beginning in 1989. He officially announced the creation of the Web on Usenet in August 1991.
However, it wasn't until 1993 that HTML was considered advanced enough to call it a language (HTML was
then symbolically christened HTML 1.0).

RFC 1866, dated November 1995, represented the first official version of HTML, called HTML 2.0. After the brief
appearance of HTML 3.0, which was never officially released, HTML 3.2 became the official standard on January
14, 1997. The most significant changes to HTML 3.2 were the standardization of tables, as well as many features
relating to the presentation of web pages.

On December 18, 1997, HTML 4.0 was released. Version 4.0 of HTML was notable for
standardizing style sheets and frames. HTML version 4.01, which came out on December 24,
1999, made several minor modifications to HTML 4.0.

Example-

<HTML>

<HEAD>

</HEAD>

<BODY>

<H5>THIS IS AN EXAMPLE</H5>

</BODY>

</HTML>
CHAPTER-5 CSS

5.1 What is CSS?


⮚ CSS stands for Cascading Style Sheets.
⮚ CSS describes how HTML elements are to be displayed on screen, paper, or in other
media.

⮚ CSS saves a lot of work. It can control the layout of multiple web pages all at once
⮚ External stylesheets are stored in CSS files.
⮚ CSS describes how HTML elements should be displayed.
⮚ CSS Saves a Lot of Work! The style definitions are normally saved in external .css files
⮚ With an external stylesheet file, we can change the look of an entire website by changing
just one file!

⮚ CSS can be either external or internal.

5.2 CSS Syntax:


A CSS rule-set consists of a selector and a declaration block:

CSS selector: The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by

curly braces.

The External CSS can be declared in the required HTML page as:

<link re1="stylesheet" href="CSS_ file name ".css">

The External CSS file is saved by using the .css extension, whereas the internal CSS is saved

in corresponding HTML file using the <style> tag. Using External CSS is much better than

using Internal. Here are a few reasons this is better.

⮚ Easier Maintenance
⮚ Reduced File Size
⮚ Reduced Bandwidth
⮚ Improved Flexibility

The selectors that can be used to select the HTML part are-
⮚ Id selector
⮚ Class selector

5.2.1 : Id Selector

The id selector uses the id attribute of an HTML element to select a specific element. The id of
an element should be unique within a page, so the id selector is used to select one unique
element with a specific id, write a hash (#) character, followed by the id of the element. The
style rule below will be applied to the HTML element with id=” para1”:
Example
Suppose the HTML content is as follow,
<hl
id="para1">content</hl>
Then Id will be declared as
#para1 {
text-align:
center;
color:blue;
font-family:jokerman;
}

5.2.2 The class Selector:


The class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period () character, followed by the name of the
class.
Example-
.para1
{
text-align:center;
color:blue;
font-family: jokerman;
}

5.3 CSS Comments:


Comments are used to explain the code and may help when you edit the source code at a later
date. Comments are ignored by browsers. A CSS comment starts with /* and ends with */.
Comments can also span multiple lines.
Example-
.para1
{
text-align:
center;
color:blue;
font-family:Jokerman; /*this is the single line comment */
}
In the example above, all HTML elements with class=paral" will be blue and center-aligned.
5.4 CSS Styles:
⮚ Background properties
⮚ Border properties
⮚ Padding
⮚ Margin
⮚ Color
⮚ Font properties
⮚ Text properties Link properties / Navigation bar properties.
CHAPTER-6 JAVASCRIPT
6.1 What is JavaScript?
JavaScript is an object-based scripting language that is lightweight and cross-platform.
JavaScript is not compiled but translated. The JavaScript Translator (embedded in browser) is
responsible to translate the JavaScript code.

It is mainly used for:

⮚ Client-side validation
⮚ Dynamic drop-down menus.
⮚ Displaying data and time.
Displaying popup windows and dialog boxes (like alert dialog box, confirm dialog box
and prompt dialog box).
⮚ Displaying clocks etc.
Example of JavaScript

h2>Welcome to JavaScript</h2>
<Script>
document.write("Hello JavaScript by JavaScript");
</script>
Here, <script> tag is used to initialize the script and document. write 0 is a function used to
write. Like CSS, JavaScript also can be can be placed in:
1. Between the body tag of html
2. In .js file (external javaScript)
3. Between the head tag of html

6.1.1 JavaScript Example: code between the body tag-

In the given example, we have displayed the dynamic content using JavaScript. Let's see the

simple example of JavaScript that displays alert dialog box.

<script

type="text/javascript'>

alert("Hello Javatpoint"):

</script>
6.1.2 JavaScript Example: code in JS file -

⮚ message.js file
function msg()

alert("Hello Javatpoint");

⮚ index.html
<head>

<script type="text/javascript" src="message.js"></script>

</head>

<body>

<p>Welcome to JavaScript</p>

<form>

<input type="button" value="click" onclick="msgO"/>

</form>

</body>

We can create external JavaScript file and embed it in many html page.
It provides code re usability because single JavaScript file can be used in several html
pages. An external JavaScript file must be saved by js extension. It is recommended to embed
all JavaScript files into a single file. It increases the speed of the webpage.
6.1.3 Between the head tag of html

In the example given below, we are having a function msg0 which is called. To create a function,
we use function name with keyword function. For function call, we need to have an
event.

Example-
<head>
<script
type="textjavascript'>
function msg()
{
alert("Hello Javatpoint");
}
</script>
</head>
<body>
<p>Welcome to JavaScript</p>
<form>
<input type="button" value="click" onclick="msg()"/>
</form>
</body>

6.2 How to Change Content of HTML using a JavaScript?

One of many JavaScript HTML methods is getElementById().


This example uses the method to "find" an HTML element (with id="demo") and changes the
element content (innerHTML) to "Hello JavaScript":
Example -
document.getElementById("demo").innerHTML = "Hello JavaScript";
document getElement ById("'demo'").style.fontSize = "25px";
<html>

<head>

<Script>
function myFunction()
{
document.getElementByld("demo"). InnerHTML= "Paragraph changed.";
}
</script>
</head>
<body>
<h1>My Web Page<h1>
<p id="demo"'>A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
6.3 Comments in JavaScript:
The JavaScript comments are meaningful way to deliver message. It is used to add information
about the code, warnings or suggestions so that end user can easily interpret the code. The
JavaScript comment is ignored by the JavaScript engine i.e., embedded in the browser

6.3.1 Advantages of JavaScript comments:


There are mainly two advantages of JavaScript comments.

⮚ To make code easy to understand: It can be used to elaborate the code so that end user
can easily understand the code.

⮚ To avoid the unnecessary code: It can also be used to avoid the code being executed.
Sometimes, we add the code to perform some action. But after sometime, there may
be need to disable the code. In such case, it is better to use comments.

Example
<script
type=”text/javascript”>
function msg()
{
alert ("Hello Javatpoint"); */this is a comment*/
}
</script>
6.4 JavaScript Variable:

A JavaScript variable is simply a name of storage location. There are two types of variables in
JavaScript: local variable and global variable. There are some rules while declaring a
JavaScript variable (also known as identifiers).

⮚ Name must start with a letter (a to z or A to Z), underscore (-), or dollar(S) sign.
⮚ After first letter we can use digits (0 to 9), for example value l

6.5 JavaScript Form Validation:

It is important to validate the form submitted by the user because it can have inappropriate
values. So, validation is must.

The JavaScript provides you the facility the validate the form on the client side so processing
will be fast than server-side validation. So, most of the web developers prefer JavaScript form
validation.

Through JavaScript, we can validate name, password, email, date, mobile number etc. fields.
Example

<script>

function validateform()
{
var name=document.myform.name.value;

var

password=document.myform.password.value; if

(name==null || name==")

alert("Name can't be blank");

return false;
}

else if(password. length<6)


{
alert("Password must be at least 6 characters long.");
return false;
}
}

</script>

</body>
form name="myform" method="post" action="abc.jsp" onsubmit="return validatefor
m()">

Name: <input type="text" name="name"><br/>

Password: <input type="password" name="password"><br/>

<input type="submit" value="register">

</form>

</body>

In this example, we are going to validate the name and password. The name can't be empty and
password can't be less than 6 characters long. Here, we are validating the form on form submit.
The user will not be forwarded to the next page until given values are correct.
6.6 JavaScript Functions:

JavaScript functions are used to perform operations. We can call JavaScript function many
times to reuse the code.

6.6.1 Advantage of JavaScript function

There are mainly two advantages of JavaScript functions.


⮚ Code reusability
⮚ Less coding

6.5.2 JavaScript Function Syntax

The syntax of declaring function is given below.

function functionName([arg 1, arg2,..argN])

//code to be executed

JavaScript Functions can have 0 or more arguments.

6.7 JavaScript Control Statements:

6.7.1 If-else:

It evaluates the content whether condition is true or false. The syntax of JavaScript if-else
statement is given below.

If(expression)

//content to be evaluated if condition is true

}
else

{
//content to be evaluated if condition is true

6.7.2 JavaScript Switch:

The JavaScript switch statement is used to execute one code from multiple expressions. It is
just like else if statement that we have learned in previous page. But it is convenient than if.
else. if because it can be used with numbers, characters etc. The signature of JavaScript switch
statement is given below.

switch(expression)

case value1:

code to be executed;

break;

case value2:
code to be executed;

break;

default: code to be executed if above values are not matched;

}
CHAPTER: 8 CONCLUSION AND FUTURE SCOPE

8.1 CONCLUSION

The purpose and objective of Webeye project is achieved by providing extremely rich
graphical user interface web page designing 1s easy and in an aesthetic form Flexibility in
designing makes user explore their imagination and thus, even a novice user can dream and
accomplish their wish of web page designing. A bad design will lead to the loss of visitors and
that can lead to a loss of business. In general, a good page layout has to satisfy the basic
elements of a good page design. This includes colour contrast, text organization, font selection,
style of a page, page size, graphics used, and consistency. In order to create a well-designed
page for a specific audience. The developer needs to organized and analyse the users' statistics
and the background of the users. Although it can be hard to come up with a design that is well
suited to all of the users, there will be a design that is appropriate for most of the audience.
8.2 FUTURE SCOPE
● Debugger
When a coder who has HTML knowledge designs a webpage, then sometimes t's
easier for him to make changes in the code view and apply them rather than in design
view. But in such cases, it's difficult to detect errors and debug them. So, a debugger
will be helpful to easily design error free webpage even from the code view.

● Syntax highlighting

Syntax highlighting is a feature that displays text in code view in different colors.

● Memory and traffic management

Giving facilities to the user to manage webspace as per the built website
Managing the visitors of the website and traffic log Real-time visitor analytics PageRank
tracking, and more-all in one place.

● Spell check
Spell checking flags words in the document that may not be spelled correctly.
This feature can help user avoid spelling mistakes in the content written and thus
make a webpage containing correct content. A comprehensive spell checker enables
website owners to spell check their website content during webpage creation much
before they decide to publish it to their live website.

● User 's site management


This includes allowing user to view complete website from single editor. Thus
User has better control over the website and addition, deletion and interlinking of
pages. Moreover, it gives user a better View n perspective of space required for
the website

● Facility to design dynamic web pages


Sometimes some dynamism in the webpage makes it more interactive. It includes
support for ASP and Java Scripting which may be integrated in the webpage, making
it dynamic. Some features like Custom URL, Dynamic style sheets, Widgets,
conditional visibility may also be added.
CHAPTER-9 REFERENCES

✔ Bootstrap Documentation: getbootstrap.com


✔ Font Awesome: fontawesome.com
✔ Django-documentation: https://docs.djangoproject.com/en/5.1/

You might also like