Scribd
Upload
18 views15 pages

PROJECT

The document presents a project on a registration form created using HTML, CSS, and JavaScript by students from Government I.T.I Ambernath for the academic year 2020-2021. It includes a detailed structure of the form, styling elements, and JavaScript functions for validation of user inputs such as username, email, phone number, and password. The project aims to demonstrate practical skills in web development and form handling.

Uploaded by

Swati Deshmukh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
18 views15 pages

PROJECT

The document presents a project on a registration form created using HTML, CSS, and JavaScript by students from Government I.T.I Ambernath for the academic year 2020-2021. It includes a detailed structure of the form, styling elements, and JavaScript functions for validation of user inputs such as username, email, phone number, and password. The project aims to demonstrate practical skills in web development and form handling.

Uploaded by

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

ANNUAL PROJECT

Institute ;- 2020-
:- Government I.T.I
Ambernath 2021
Trade :- COPA
Academic Year :- 2020-
2021
Presented By :- Apurwa
Advilkar
Manisha
Bhoye
Kalyani
Aiwale
Guided By :- Mrs. Swati
Deshmukh
Teacher’s
Signature
PROJECT ON
• Registration Form
{HTML, CSS, JAVASCRIPT}
INDEX
 HTML Program
 CSS
 JAVASCRIPT
 OUTPUT
<!DOCTYPE HTML>
<HTML>
<HEAD>
<META CHARSET="UTF-8">
<META NAME="VIEWPORT" CONTENT="WIDTH=DEVICE-WIDTH,
INITIAL-SCALE=1.0">
<TITLE></TITLE>
<LINK REL="STYLESHEET" HREF="HTTPS://CDNJS.CLOUDFLARE.COM/AJAX/LIBS/FONT-
AWESOME/5.1.0-10/CSS/ALL.CSS" INTEGRITY="SHA512-
DJ9PT3SZROOUTTS9S89YKGZEU1XQGWKG3DVPU5TZALAPSRWDD3TNVJTCLUUVONAHM4O8GGCNJSBHLTKX
RD2OWG==" CROSSORIGIN="ANONYMOUS" REFERRERPOLICY="NO-REFERRER" />
<STYLE>
*{
MARGIN: 0;
PADDING: 0;
BOX-SIZING: BORDER-BOX;
}
:ROOT {
--LG-LIGHTCOLOR: LINEAR-GRADIENT(TO LEFT, RGBA(116, 235, 213,0.6), RGBA(159, 172,
230, 0));
--LG-COLOR: LINEAR-GRADIENT(TO LEFT, #74EBD5, #9FACE6);
}
BODY {
BACKGROUND-IMAGE: URL('HTTPS://MEDIA.ISTOCKPHOTO.COM/PHOTOS/BLUE-SKY-
BACKGROUND-AND-WHITE-CLOUDS-SOFT-FOCUS-AND-COPY-SPACE-PICTURE-ID1128410927?
B=1&K=20&M=1128410927&S=170667A&W=0&H=GBSNCVWTJTIR5QNNFK131B6CP3KGME3P4XP0QGJQ
NIG=');
BACKGROUND-SIZE: 100%;
BACKGROUND-REPEAT: NO-REPEAT;
DISPLAY: FLEX;
ALIGN-ITEMS: CENTER;
JUSTIFY-CONTENT: CENTER;
MIN-HEIGHT: 100VH;
WIDTH: 100VW;
}
.CONTAINER {
BORDER: 2PX;
BACKGROUND-COLOR: #FFF;
BORDER-RADIUS: 5PX;
-WEBKIT-BORDER-RADIUS: 5PX;
BOX-SHADOW: 0 2.8PX 2.2PX RGBA(0, 0, 0, 0.034),0 6.7PX 5.3PX RGBA(0, 0, 0, 0.048),
0.12;
OVERFLOW: HIDDEN;
WIDTH: CALC(100VW - 65VW);
MAX-WIDTH: 100%;
}
.HEADER {
BACKGROUND: VAR(--KG-COLOR);
PADDING: 30PX 0;
}
.HEADER H2 {
COLOR: #222;
FONT-SIZE: 24PX;
TEXT-TRANSFORM: UPPERCASE;
TEXT-ALIGN: CENTER;
}

.FORM{
PADDING: 5PX;

}
.FORM-CONTROL{
MARGIN-BOTTOM: 10PX;
POSITION: RELATIVE;
}

.FORM-CONTROL LABEL{
DISPLAY: INLINE-BLOCK;
MARGIN-BOTTOM: 5PX;

}
.FORM-CONTROL INPUT{
WIDTH: 100%;
BORDER: 2PX SOLID #F0F0F0;
BORDER-RADIUS: 5PX;
DISPLAY: BLOCK;
FONT-SIZE: 14PX;
PADDING: 5PX;
}
.FORM-CONTROL INPUT:FOCUS{
OUTLINE: 0;
BORDER-COLOR: #777;
}
.FORM-CONTROL SUCCESS INPUT{
BORDER-COLOR: #2ECC71;
}
.FORM-CONTROL ERROR INPUT{
BORDER-COLOR: #E74C3C;

}
.FORM-CONTROL I{
POSITION: ABSOLUTE;
RIGHT: 3%;
TOP: 30PX;
VISIBILITY: HIDDEN;
}
.FORM-CONTROL.ERROR SMALL{
VISIBILITY: VISIBLE;
}
.FORM-CONTROL SMALL{
COLOR: #E74C3C;
POSITION: ABSOLUTE;
BOTTOM: 0;
LEFT: 0;
VISIBILITY: HIDDEN;
}
.FORM-CONTROL.SUCCESS I.FA-CHECK-CIRCLE{
COLOR: #2ECC71;
VISIBILITY: VISIBLE;
}
.FORM-CONTROL.ERROR I.FA-EXCLAMATION-CIRCLE{
COLOR: #E74C3C;
VISIBILITY: VISIBLE;
}
.FORM .BTN {
BACKGROUND: VAR(--LG-COLOR);
BORDER-RADIUS: 6PX;
BORDER: NONE;
OUTLINE: NONE;
COLOR: #FFF;
DISPLAY: BLOCK;
FONT-SIZE: 16PX;
PADDING: 15PX 0;
MARGIN-TOP: 20PX;
WIDTH: 100%;
FONT-WEIGHT: BOLD;
TEXT-TRANSFORM: UPPERCASE;
TRANSITION: ALL 1S EASE;
}
.FORM .BTN:HOVER {
BACKGROUND: LINEAR-GRADIENT(TO RIGHT, #74EBD5, #9FACE6);

}
@MEDIA(MAX-WIDTH: 998PX){
.CONTAINER{
WIDTH: CALC(100VW - 35WV);
MAX-WIDTH: 100%;
}
}
</STYLE>
</HEAD>
<BODY>
<DIV CLASS="CONTENER">
<DIV CLASS="HEADER">
<H2>REGISTRATION FORM</H2>
</DIV>
<FORM CLASS="FORM" ID="FORM">
<DIV CLASS="FORM-CONTROL">
<LABEL>USERNAME</LABEL>
<INPUT TYPE="TEXT" NAME="" ID="USERNAME"
PLACEHOLDER="ENTER YOUR FULL NAME" AUTOCOMPLETE="OFF" REQIRED>
<I CLASS="FAS FA-CHECK-CIRCLE"></I>
<I CLASS="FAS FA-EXCLAMATION-CIRCLE"></I>
<SMALL>ERROR MSG</SMALL>
</DIV>
<DIV CLASS="FORM-CONTROL">
<LABEL>EMAIL</LABEL>
<INPUT TYPE="EMAIL" NAME="" ID="EMAIL"
PLACEHOLDER="ENTER YOUR EMAIL" AUTOCOMPLETE="OFF" REQIRED>
<I CLASS="FAS FA-CHECK-CIRCLE"></I>
<I CLASS="FAS FA-EXCLAMATION-CIRCLE"></I>
<SMALL>ERROR MSG</SMALL>
</DIV>
<DIV CLASS="FORM-CONTROL">
<LABEL>PHONE NUMBER</LABEL>
<INPUT TYPE="NUMBER" NAME="" ID="PHONE"
PLACEHOLDER="ENTER YOUR PHONE NUMBER" AUTOCOMPLETE="OFF" REQIRED>
<I CLASS="FAS FA-CHECK-CIRCLE"></I>
<I CLASS="FAS FA-EXCLAMATION-CIRCLE"></I>
<SMALL>ERROR MSG</SMALL>
</DIV>
<DIV CLASS="FORM-CONTROL">
<LABEL>PASSWORD</LABEL>
<INPUT TYPE="PASSWORD" NAME="" ID="PASSWORD"
PLACEHOLDER="ENTER YOUR PASSWORD" AUTOCOMPLETE="OFF" REQIRED>
<I CLASS="FAS FA-CHECK-CIRCLE"></I>
<I CLASS="FAS FA-EXCLAMATION-CIRCLE"></I>
<SMALL>ERROR MSG</SMALL>
</DIV>
<DIV CLASS="FORM-CONTROL">
<LABEL>CONFIRM PASSWORD</LABEL>
<INPUT TYPE="CONFIRM PASSWORD" NAME="" ID="CPASSWORD"
PLACEHOLDER="ENTER YOUR PASSWORD AGAIN" AUTOCOMPLETE="OFF" REQIRED>
<I CLASS="FAS FA-CHECK-CIRCLE"></I>
<I CLASS="FAS FA-EXCLAMATION-CIRCLE"></I>
<SMALL>ERROR MSG</SMALL>
</DIV>
<INPUT TYPE="SUBMIT" VALUE="SUBMIT" CLASS="BTN" NAME=""
FORMACTION="HHH0.HTML">
</DIV>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
CONST FORM = DOCUMENT.GETELEMENTBYID('FORM');
CONST USERNAME = DOCUMENT.GETELEMENTBYID('USERNAME');
CONST EMAIL = DOCUMENT.GETELEMENTBYID('EMAIL');
CONST PHONE = DOCUMENT.GETELEMENTBYID('PHONE');
CONST PASSWORD = DOCUMENT.GETELEMENTBYID('PASSWORD');
CONST CPASSWORD = DOCUMENT.GETELEMENTBYID('CPASSWORD');

//ADD EVENT
FORM.ADDEVENTLISTENER('SUBMIT', (EVENT) => {
EVENT.PREVENTDEFAULT();
VALIDATE();

})
CONST SENDDATA = (COUNT) ==>{
IF(SRATE === COUNT){
ALERT('RESISTRATION SUCCESSFULL');
SWAL("WELCOME! ", " REGISTRATION SUCCESSFUL" , "SUCCESS");
}
}
//FOR FINAL DATA VALIDATION
CONST SUCCESSMSG = () ==>{
LET FORMCON = DOCUMENT.GETELEMENTSBYCLASSNAME('FORM-CONTROL');
VAR COUNT = FORMCON.LENGHT - 1;
FOR(VAR I = 0 ; I<FORMCON.LENGHT; I++ ) {
IF(FORMCON[I].CLASSNAME === "FORM-CONTROL SUCCESS"){
VAR SRATE = 0 + I;
CONSOLE.LOG(SRATE);
SENDDATA(COUNT);
}ELSE{
RETURN FALSE;
}
}
}
// MORE EMAIL VALIDATE
CONST ISEMAIL = (EMAILVAL) => {
VAR ATSYMBOL = EMAILVAL.INDEXOF("@");
IF(ATSYMBOL < 1) RETURN FALSE;
VAR DOT = EMAILVAL.LASTINDEXOF('.');
IF(DOT <= ATSYMBOL + 3) RETURN FALSE;
IF(DOT = EMAILVAL.LENGHT - 1) RETURN FALSE;
RETURN TRUE;
}
//DEFINE THE VALIDATE FUNCTION
CONST VALIDATE = () => {
CONST USERNAMEVAL =USERNAME.VALUE.TRIM();
CONST EMAILVAL = EMAIL.VALUE.TRIM;
CONST PHONEVAL = PHONE.VALUE.TRIM;
CONST PASSWORDVAL = PASSWORD.VALUE.TRIM;
CONST CPASSWORDVAL = CPASSWORD.VALUE.TRIM;
//VALIDATE USERNAME
IF(USERNAMEVAL === "") {
SETERRORMSG(USERNAME, 'USERNAME CANNOT BE BLANK');

} ELSE IF(USERNAMEVAL.LENGHT < 2){


SETERRORMSG(USERNAME, 'USERNAME MIN 3 CHAR');

} ELSE{
//VALIDATE EMAIL
IF(EMAILVAL === "") {
SETERRORMSG(EMAIL, 'EMAIL CANNOT BE BLANK');
} ELSE IF(!ISEMAIL(EMAILVAL)){
SETERRORMSG(EMAIL, 'NOT A VALID EMAIL');

} ELSE{
SETSUCCESSMSG(EMAIL);
}
}
//VALIDATE PHONE
IF(PHONEVAL === "") {
SETERRORMSG(PHONE, 'PHONE CANNOT BE BLANK');

} ELSE IF(PHONEVAL.LENGHT ! = 10){


SETERRORMSG(PHONE, 'NOT A VALID PHONE NUM');

} ELSE{
SETSUCCESSMSG(PHONE);
}

//VALIDATE PASSWORD
IF(PASSWORDVAL === "") {
SETERRORMSG(PASSWORD, 'PASSWORD CANNOT BE BLANK');

} ELSE IF(PASSWORDVAL.LEGHT < = 5){


SETERRORMSG(PASSWORD, 'MINIMUM 6 CHAR');

} ELSE{
SETSUCCESSMSG(PASSWORD);
}
//VALIDATE CPASSWORD
IF(CPASSWORDVAL === "") {
SETERRORMSG(CPASSWORD, 'CONFIRM PASSWORD CANNOT BE
BLANK');
} ELSE IF(PASSWORDVAL ! = CPASSWORDVAL){
SETERRORMSG(CPASSWORD, 'PASSWORD ARE NOT MATCHING');

} ELSE{
SETSUCCESSMSG(CPASSWORD);
}
SUCCESMSG();

FUNCTION SETERRORMSG(INPUT, ERRORMSG) {


CONST FORMCONTROL = INPUT.PARENTELEMENT;
CONST SAMLL = FORMCONTROL.QUERYSELECTOR('SMALL');
FORMCONTROL.CLASSNAME = "FORM-CONTROL ERROR";
SAMLL.INNERHTML = ERRORMSG;
}

FUNCTION SETSUCCESSMSG(INPUT) {
CONST FORMCONTROL = INPUT.PARENTELEMENT;
FORMCONTROL.CLASSNAME= "FORM-CONTROL SUCCESS";

</SCRIPT>

</BODY>
</HTML>
THANK YOU!

You might also like