Principle of Web Development

Principle of Web Development
Jury Assignment
Subject: Principle of web development

Faculty: Mr Aman Kumar
Submitted by:
Jyoti Rawal
ACKNOWLEDGEMENT
In preparation for this assignment, I had to take the help and guidance of some respected
persons, who deserve my deepest gratitude. As the completion of this assignment gave
me much pleasure, I would like to show my gratitude, Mr. Aman Kumar, Principle of Web
Development Faculty, of NIFT, Kangra, for giving me a good guideline for assignment
throughout numerous consultations. I would also like to expand my gratitude to all those
who have directly and indirectly guided me in making this assignment.
I also thank NIFT, Kangra for giving me such an opportunity to explore more with constant
learning. My thanks and appreciations also go to my classmates in developing the
assignment and people who have willingly helped me out with their abilities.
INTRODUCTION
My dynamic website is about the registration form of a

tuition institute where students can fill the form and the data
can be saved on the server.
ABOUT THE WEBSITE
I have developed the website from the previous assignment

which was made through PHP codes. The developed
website has Javascript validation and I've made a condition
where error will be shown if the input text has less than 3
alphabets.
We can insert, update and delete the data.
I've used CRUD function and different languages like CSS,
html and JavaScript.
SCREENSHOT OF THE WEBSITE'S HOMEPAGE
SCREENSHOT OF THE WEBSITE'S HOMEPAGE
Codes:
<html>
<head>
<style type="text/CSS">
body{
background-color:skyblue;/This is to set background color of the body/
}
#image{
background-image:url('https://mk0digitallearn7ttjx.kinstacdn.com/wp-
content/uploads/2019/02/Education-Budget-2019.jpg');/*This is an attached image to the
header section*/
}
h1{
color:blue;
text-align:center;
font-size:400%;
text-shadow:2px 1px white;
}
#class{
float:left;
background-color:green;
font-size:150%;
color:white;
width:250px;
height: 50%;
}/This is side panel that a small description in an unordered list/
#list{
color:White;
line-height:150%;
}
#form{
float:right;
width:60%;
}
table{
line-height:200%;
}
h2{
font-size:150%;
}
.check{
background-color:lightgreen;
border:1px solid black ;
box-shadow:2px 2px cyan ;
cursor:grab;
}/This is submit button by CSS to work on client side technology/
#hello{
clear:left;
}
.class{
font-size:120%;
color:blue;
}
#panel{
width:100%;
height:50px;
}
#one,#two/Box formation in the upper panel of website/
{
border-radius:20px;
border:2px solid black;
text-decoration:none;
color:white;
background-color:red;
font-size:200%;
}
h5{
font-size:150%;
}
#ContantUs{
font-size:120%;
}
</style>
<script>
function second()
{
var p=document.getElementById("first").value;
var rel =/^[a-zA-Z\s\'\-]{3,15}$/;//this will take input of 3 alphabets.
if(rel.test(p))
{document.getElementById('message1').style.color="green";
document.getElementById("message1").innerHTML= " <em>Input Accepted</em>";
return true;
}
else{
document.getElementById('message1').style.color="red";
document.getElementById("message1").innerHTML= " Enter atleast three alphabets";
return false;
}
}
function last()
{
var p=document.getElementById("Lname").value;
var rel =/^[a-zA-Z\s\'\-]{3,15}$/;
if(rel.test(p))
{
document.getElementById('message2').style.color="green";
document.getElementById("message2").innerHTML= " <em>Input Accepted</em>";
return true;
}
else{
document.getElementById('message2').style.color="red";
document.getElementById("message2").innerHTML= " Enter atleast three alphabets";
return false;
}
}
function contact()
{
var p=document.getElementById("mobile").value;
var rel =/^\d{3}-\d{3}-\d{4}$/;//This will take input as XXX-XXX-XXXX.
if(rel.test(p))
{
document.getElementById("message3").style.color="green";
document.getElementById("message3").innerHTML= "<em> Input Accepted</em>";
return true;
}
else{
document.getElementById("message3").style.color="red";
document.getElementById("message3").innerHTML= "<b> Invalid! Enter as xxx-xxx-xxxx</b>";
return false;
}
}
function just()
{
var Fname = document.getElementById("first").value;
var lname = document.getElementById("Lname").value;
var DOB = document.getElementById("dateB").value;
var mobile=document.getElementById("mobile").value;
var mail=document.getElementById("ail").value;
var rad = document.querySelector("input[name=radio]:checked").value;//This will accept inputs
from the radio buttons.
document.getElementById("hello").innerHTML="<h4>"+Fname.toUpperCase()+"
"+lname.toUpperCase() +"</h4><br><p> DATE OF BIRTH = "+DOB+"<BR> MOBILE
NUMBER : " + mobile+"<br> E-MAIL ID : "+mail+ "<BR>"+rad+"<br><b>Thanks! for showing
interest! <br> We will reach to you seen</b></p>";
}
</script>
<title>Being's Classes
</title>
</head>
<body onload="alert('Welcome')">
<div Id="image">
<h1>BEING'S CLASSES</h1>
<hr></hr>
</div>
<div Id="panel">
<a href="#para" Id="one">&nbsp About us &nbsp</a>
<a href="#ContactUs" Id="two">&nbsp Contact Us &nbsp</a>
</div>
<div Id="class">
<b>We provide tution for:</b>
<ul Id="list">
<em><li>Class 10th</li>
<li>Class 9th</li>
<li>Class 8th</li>
<li>Class 7th</li>
<li>Class 6th</li></em>
</ul>
</div>
<div Id="form" >
<h2>Registration Form:</h2>
<table >
<form action="#">
<tr>
<td>First Name</td>
<td><input type="text" Id="first" onblur="second()" required placeholder="Enter First Name">
</td>
<td><span Id="message1"></span></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" Id="Lname" onblur="last()" placeholder="Enter Last Name" ></td>
</tr>
<tr>
<td>Date of Birth</td>
<td><input type="date" Id="dateB" ></td>
</tr>
<tr>
<td>Contact No.</td>
<td><input type="text" placeholder="xxx-xxx-xxxx" Id="mobile" onblur="contact()" ></td>
</tr>
<tr>
<td>Email ID</td>
<td><input type="email" placeholder="example@gmail.com" Id="ail"></td>
</tr>
<tr>
<td style="vertical-align:text-top;">Adress</td>
<td><textarea style="height:50px;"></textarea></td>
</tr>
<tr>
<td>Select Your Classs</td>
<td >
<input type="radio" name="radio" value="Class 10th" Id="radio">10th
</td>
</tr>
<tr>
<td style="vertical-align:text-top;">Select Subjects </td>
<td >
<input type="checkbox" name="select" Id="select" value="Mathematics">Mathematics<br>
<input type="checkbox" name="select" Id="select" value="Science">Science<br>
<input type="checkbox" name="select" Id="select" value="English">English<br>
<input type="checkbox" name="select" Id="select" value="Hindi">Hindi<br>
</td>
</tr>
<tr>
<td class="Button" Id="Button" align="center" colspan="3"><a href="#para" style="text-
decoration:none;"><span class="check" onclick="just()">&nbsp Submit &nbsp </span></a>
</td>
</tr>
</form>
</table>
</div>
<hr style="clear:left; clear:right;"></hr>
<p Id="hello"></p>
<hr></hr>
<h2><em>About Us:</em></h2>
<P class="para" Id="para">We provide excellent Education for the mention class via online
mode. If you are interested then fill up the regstration form. Our faculties are well trained.<br>
• Achieving 100 % admission in top most design institutions<br>
• Having experienced and trained faculty from top colleges<br>
• Having the best academic programs and course material<br>
• Building self-confidence and bringing out the creativity of students
Mission</p>
<h5><em>Contact Us:</em></h5>
<p Id="ContactUs"> Call or Whatsapp at : 8596542XXX <br> Email us :
beingclasses@gmail.com</p>
</body>
</html>

Principle of Web Development

Uploaded by

Document Information

Original Description:

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

Principle of Web Development

Uploaded by

Copyright:

Available Formats

Principle of Web Development

Subject: Principle of web development

My dynamic website is about the registration form of a

ABOUT THE WEBSITE

I have developed the website from the previous assignment

You might also like