diff --git a/LoginPageTask/index.html b/LoginPageTask/index.html index 99031f8..71c7561 100644 --- a/LoginPageTask/index.html +++ b/LoginPageTask/index.html @@ -3,33 +3,47 @@ - - - - Login - - - - - - - -
-

Enter your details

-
- - - - - -

Age

- - - - - -
-
- - - \ No newline at end of file + + + + Login + + + + + + + +
+

Enter your details

+
+ + + + + +

Age

+ + + + + +
+
+ + + diff --git a/LoginPageTask/main.css b/LoginPageTask/main.css index 5991bf3..42db402 100644 --- a/LoginPageTask/main.css +++ b/LoginPageTask/main.css @@ -5,7 +5,7 @@ body { font-family: "open sans", helvetica, arial, sans; } -.logo{ +.logo { width: 100px; } .log-form { @@ -28,9 +28,9 @@ h2 { } .log-form { padding: 2em; - -webkit-box-shadow: 4px -1px 53px -7px rgba(138, 138, 138, 0.30); - -moz-box-shadow: 4px -1px 53px -7px rgba(138, 138, 138, 0.30); - box-shadow: 4px -1px 53px -7px rgba(138, 138, 138, 0.30); + -webkit-box-shadow: 4px -1px 53px -7px rgba(138, 138, 138, 0.3); + -moz-box-shadow: 4px -1px 53px -7px rgba(138, 138, 138, 0.3); + box-shadow: 4px -1px 53px -7px rgba(138, 138, 138, 0.3); } form { @@ -38,4 +38,4 @@ form { text-align: center; width: 100%; } -/* ========================WRITE YOUR CSS FROM HERE======================== */ \ No newline at end of file +/* ========================WRITE YOUR CSS FROM HERE======================== */ diff --git a/README.md b/README.md index be9642f..b5f1549 100644 --- a/README.md +++ b/README.md @@ -1,35 +1,42 @@ # Frontend Intern Task - Summer 2020 ## Submission Procedure -Read the following steps and guidelines properly for proper submission of your Task. Missing out any step or performing it wrongly can lead to unsuccessful submission. + +Read the following steps and guidelines properly for proper submission of your Task. Missing out any step or performing it wrongly can lead to unsuccessful submission. ## TASK + **The task for the applicants is to stylize and modify the Login Form present in the folder in the master branch of the repository by the name of - LoginPageTask.** Each applicant is supposed to complete the following tasks, your assessment will be done on the basis of completion of each task. -+ Beautify the Login Form (use of Bootstrap 4 will be preffered, for styling the page). -+ Check the validations in the form (eg. the type of field should be set to email for Email field). -+ Add a Phone Number field in the form with proper validations. -+ Applicants are expected to show their skills with design and animation, as well they can form multiple iterations of the form. -+ The page should be **responsive to all screen size** (failing to which you will not be considered for the profile). -+ **Any form of plagarism in the code will lead to disqualification straightaway.** -+ Proper commenting is expected from the applicants. -+ You have to use the Boilerplate code provided with the task folder. + +- Beautify the Login Form (use of Bootstrap 4 will be preffered, for styling the page). +- Check the validations in the form (eg. the type of field should be set to email for Email field). +- Add a Phone Number field in the form with proper validations. +- Applicants are expected to show their skills with design and animation, as well they can form multiple iterations of the form. +- The page should be **responsive to all screen size** (failing to which you will not be considered for the profile). +- **Any form of plagarism in the code will lead to disqualification straightaway.** +- Proper commenting is expected from the applicants. +- You have to use the Boilerplate code provided with the task folder. ### Step 1 + #### Fork this repository ### Step 2 + #### Create a New Folder within the forked repository, with the 'folder name' being your 'Fullname'. ## Contents of the folder -+ The project directory. -+ The entire Login Page with all its dependent files should be present. -+ A text file that contains proper documentation. The documentation should contain: - - Your Full Name. - - Your College, stream of study and year of study. - - Your Current Location (City of residence). + +- The project directory. +- The entire Login Page with all its dependent files should be present. +- A text file that contains proper documentation. The documentation should contain: + - Your Full Name. + - Your College, stream of study and year of study. + - Your Current Location (City of residence). ### Step 3 + Create a Pull Request only after you have completed the entire project and do not wish to make any further changes. We will not be accepting more than one Pull Request from any student. \ \ You can complete your work on the local machine and then upload your project folder in the forked repository and proceed to create a Pull Request. diff --git a/azharKhalid/LoginForm Iteration-1/img/bg-main.jpg b/azharKhalid/LoginForm Iteration-1/img/bg-main.jpg new file mode 100644 index 0000000..8bdb91f Binary files /dev/null and b/azharKhalid/LoginForm Iteration-1/img/bg-main.jpg differ diff --git a/azharKhalid/LoginForm Iteration-1/img/mainImage.png b/azharKhalid/LoginForm Iteration-1/img/mainImage.png new file mode 100644 index 0000000..ab8edf9 Binary files /dev/null and b/azharKhalid/LoginForm Iteration-1/img/mainImage.png differ diff --git a/azharKhalid/LoginForm Iteration-1/index.html b/azharKhalid/LoginForm Iteration-1/index.html new file mode 100644 index 0000000..0fcc0f3 --- /dev/null +++ b/azharKhalid/LoginForm Iteration-1/index.html @@ -0,0 +1,143 @@ + + + + + + + + + Login + + + + + + +
+
+
+ +
+ +
+ +
+ + Please enter an valid email. +
+ +
+ + Enter only numeric value. +
+ Mobile no needs to be atleast 10 digits long. +
+ +
+ +
+ +
+ + Both Passwords should match. + Passwords can't be left empty. +
+ +
+ +
+ +
+ +
+ + +
+
+ + +
+
+ + +
+
+
+
+
+ + + + + + + + diff --git a/azharKhalid/LoginForm Iteration-1/main.css b/azharKhalid/LoginForm Iteration-1/main.css new file mode 100644 index 0000000..be47d39 --- /dev/null +++ b/azharKhalid/LoginForm Iteration-1/main.css @@ -0,0 +1,131 @@ +* { + box-sizing: border-box; +} + +body { + font-family: "open sans", helvetica, arial, sans; +} +.logo { + width: 100px; +} +.log-form { + background: url("img/bg-main.jpg") no-repeat fixed center; + background-size: cover; + height: 100vh; + width: 100vh; + display: flex; + align-items: center; + justify-content: center; +} + +.form-div { + border-radius: 15px; +} + +.form input { + width: 60%; + margin: 0 auto; +} + +.form textarea { + margin: 0 auto; +} + +@media only screen and (max-width: 600px) { + .row { + width: 100%; + } + .form input { + width: 70%; + } +} + +input[type="number"]::-webkit-outer-spin-button, +input[type="number"]::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} +input[type="number"] { + -moz-appearance: textfield; +} +small { + color: red; + display: none; +} +/* Small devices (portrait tablets and large phones, 600px and up) */ +@media only screen and (min-width: 600px) { + .row { + width: 100%; + } + .form input { + width: 60%; + } +} + +/* Medium devices (landscape tablets, 768px and up) */ +@media only screen and (min-width: 768px) { + .row { + width: 70%; + } + .form input { + width: 60%; + } +} + +/* Large devices (laptops/desktops, 992px and up) */ +@media only screen and (min-width: 992px) { + .row { + width: 60%; + } + .form input { + width: 60%; + } +} + +/* Extra large devices (large laptops and desktops, 1200px and up) */ +@media only screen and (min-width: 1200px) { + .row { + width: 50%; + } + .form input { + width: 60%; + } +} + +/*Animation for background*/ +.log-form { + animation-name: bgSlide; + animation-duration: 1s; + animation-timing-function: linear; +} +@keyframes bgSlide { + 0% { + transform: translateX(-100%); + -moz-transform: translateX(-100%); + opacity: 0; + } + 100% { + transform: translateX(0%); + -moz-transform: translateX(0%); + opacity: 1; + } +} +/* Animation for form-div*/ +.form-div { + animation-name: formDivSlide; + animation-duration: 1s; + animation-timing-function: ease-in; +} + +@keyframes formDivSlide { + 0% { + transform: translateX(200%); + -moz-transform: translateX(200%); + opacity: 0; + } + 100% { + transform: translateX(0%); + -moz-transform: translateX(0%); + opacity: 1; + } +} diff --git a/azharKhalid/LoginForm Iteration-1/main.js b/azharKhalid/LoginForm Iteration-1/main.js new file mode 100644 index 0000000..6e1e73c --- /dev/null +++ b/azharKhalid/LoginForm Iteration-1/main.js @@ -0,0 +1,67 @@ +/* ========================WRITE YOUR JS FROM HERE======================== */ + +document.getElementById("submit").addEventListener("click", event => { + event.preventDefault(); + //Capturing all the input value entered by user + let email = document.getElementById("email").value; + let mobileNo = document.getElementById("mobileNo").value; + let password1 = document.getElementById("password1").value; + let password2 = document.getElementById("password2").value; + //Function for validating email + validateEmail(email); + //Function for validating mobile Number + validateMobileNumber(mobileNo); + //Function for validating Password + validatePassword(password1, password2); + //Condition for redirecting the page after successfull entering of all the inputs + if ( + validateEmail(email) && + validateMobileNumber(mobileNo) && + validatePassword(password1, password2) + ) { + window.location.href = "successPage.html"; + } else { + return; + } +}); + +//Function for validating mobile Number +function validateMobileNumber(mobileNo) { + if (mobileNo.length < 10) { + let mobileSmall = document.getElementById("mobileSmall"); + mobileSmall.style.display = "block"; + return false; + } else { + return true; + } +} + +//Function for validating Password +function validatePassword(password1, password2) { + if (password1 == "" || password2 == "") { + let passwordSmall = document.getElementById("passwordSmall2"); + passwordSmall.style.display = "block"; + return false; + } else { + if (password1 !== password2) { + let passwordSmall = document.getElementById("passwordSmall1"); + passwordSmall.style.display = "block"; + return false; + } else { + return true; + } + } +} + +//Function for validating email +function validateEmail(email) { + var re = /^(([^<>()\[\]\\.,;:\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,}))$/; + let inputEmail = re.test(String(email).toLowerCase()); + if (inputEmail) { + return true; + } else { + let emailSmall = document.getElementById("emailSmall"); + emailSmall.style.display = "block"; + return false; + } +} diff --git a/azharKhalid/LoginForm Iteration-1/successPage.css b/azharKhalid/LoginForm Iteration-1/successPage.css new file mode 100644 index 0000000..e69de29 diff --git a/azharKhalid/LoginForm Iteration-1/successPage.html b/azharKhalid/LoginForm Iteration-1/successPage.html new file mode 100644 index 0000000..1067f5e --- /dev/null +++ b/azharKhalid/LoginForm Iteration-1/successPage.html @@ -0,0 +1,62 @@ + + + + + + + + + + + Registration Successfull + + + + +
+
+
+

Registration completed successfully

+
    +
  • + Thank you for registering. Your information has been saved in our + database +
    • +
+
+
+
+ + + + + + + + diff --git a/azharKhalid/LoginForm Iteration-2/img/mainImage.png b/azharKhalid/LoginForm Iteration-2/img/mainImage.png new file mode 100644 index 0000000..ab8edf9 Binary files /dev/null and b/azharKhalid/LoginForm Iteration-2/img/mainImage.png differ diff --git a/azharKhalid/LoginForm Iteration-2/img/mainVector.png b/azharKhalid/LoginForm Iteration-2/img/mainVector.png new file mode 100644 index 0000000..2b28a45 Binary files /dev/null and b/azharKhalid/LoginForm Iteration-2/img/mainVector.png differ diff --git a/azharKhalid/LoginForm Iteration-2/index.html b/azharKhalid/LoginForm Iteration-2/index.html new file mode 100644 index 0000000..283fc75 --- /dev/null +++ b/azharKhalid/LoginForm Iteration-2/index.html @@ -0,0 +1,153 @@ + + + + + + + + + + + + Login + + +
+
+
+ +
+ +
+ + Please enter an valid email. +
+ +
+ + Enter only numeric value. +
+ Mobile no needs to be atleast 10 digits long. +
+ +
+ +
+ +
+ + Both Passwords should match. + Passwords can't be left empty. +
+ +
+ +
+ +
+ +
+ + +
+
+ + +
+
+ + +
+
+
+ +
+
+
+ + + + + + + + diff --git a/azharKhalid/LoginForm Iteration-2/main.css b/azharKhalid/LoginForm Iteration-2/main.css new file mode 100644 index 0000000..79733d0 --- /dev/null +++ b/azharKhalid/LoginForm Iteration-2/main.css @@ -0,0 +1,73 @@ +body { + background-color: #f8f8f8; +} + +.container { + width: 50vw; + border-radius: 10px; + box-shadow: 5px 10px 8px #f0f0f0; +} +form { + display: flex; + flex-direction: column; +} + +small { + display: none; + color: red; +} + +input[type="number"]::-webkit-outer-spin-button, +input[type="number"]::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} +input[type="number"] { + -moz-appearance: textfield; +} + +.form-control { + border-right: 0; + border-left: 0; + border-top: 0; + border-bottom: 2px solid black; +} +#vectorImage { + width: 100%; + margin-top: 10px; + padding-bottom: 10px; +} + +/* Small devices (portrait tablets and large phones, 600px and up) */ +@media only screen and (min-width: 600px) { +} + +/* Medium devices (landscape tablets, 768px and up) */ +@media only screen and (max-width: 768px) { + .imageCol { + display: none; + } +} + +@media only screen and (min-width: 768px) { + .imageCol { + width: 100%; + margin: 60px; + } +} + +/* Large devices (laptops/desktops, 992px and up) */ +@media only screen and (max-width: 992px) { + #vectorImage { + width: 100%; + margin-top: 70px; + } +} + +/* Extra large devices (large laptops and desktops, 1200px and up) */ +@media only screen and (min-width: 1200px) { + #vectorImage { + width: 100%; + margin-top: 20px; + } +} diff --git a/azharKhalid/LoginForm Iteration-2/main.js b/azharKhalid/LoginForm Iteration-2/main.js new file mode 100644 index 0000000..1c61180 --- /dev/null +++ b/azharKhalid/LoginForm Iteration-2/main.js @@ -0,0 +1,67 @@ +/* ========================WRITE YOUR JS FROM HERE======================== */ + +document.getElementById("submit").addEventListener("click", event => { + event.preventDefault(); + //Capturing all the input value entered by user + let email = document.getElementById("email").value; + let mobileNo = document.getElementById("mobileNo").value; + let password1 = document.getElementById("password1").value; + let password2 = document.getElementById("password2").value; + + //Function for validating email + validateEmail(email); + //Function for validating mobile Number + validateMobileNumber(mobileNo); + //Function for validating Password + validatePassword(password1, password2); + //Condition for redirecting the page after successfull entering of all the inputs + if ( + validateEmail(email) && + validateMobileNumber(mobileNo) && + validatePassword(password1, password2) + ) { + window.location.href = "successPage.html"; + } else { + } +}); + +//Function for validating mobile Number +function validateMobileNumber(mobileNo) { + if (mobileNo.length < 10) { + let mobileSmall = document.getElementById("mobileSmall"); + mobileSmall.style.display = "block"; + return false; + } else { + return true; + } +} + +//Function for validating Password +function validatePassword(password1, password2) { + if (password1 == "" || password2 == "") { + let passwordSmall = document.getElementById("passwordSmall2"); + passwordSmall.style.display = "block"; + return false; + } else { + if (password1 !== password2) { + let passwordSmall = document.getElementById("passwordSmall1"); + passwordSmall.style.display = "block"; + return false; + } else { + return true; + } + } +} + +//Function for validating email +function validateEmail(email) { + var re = /^(([^<>()\[\]\\.,;:\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,}))$/; + let inputEmail = re.test(String(email).toLowerCase()); + if (inputEmail) { + return true; + } else { + let emailSmall = document.getElementById("emailSmall"); + emailSmall.style.display = "block"; + return false; + } +} diff --git a/azharKhalid/LoginForm Iteration-2/successPage.css b/azharKhalid/LoginForm Iteration-2/successPage.css new file mode 100644 index 0000000..e69de29 diff --git a/azharKhalid/LoginForm Iteration-2/successPage.html b/azharKhalid/LoginForm Iteration-2/successPage.html new file mode 100644 index 0000000..1067f5e --- /dev/null +++ b/azharKhalid/LoginForm Iteration-2/successPage.html @@ -0,0 +1,62 @@ + + + + + + + + + + + Registration Successfull + + + + +
+
+
+

Registration completed successfully

+
    +
  • + Thank you for registering. Your information has been saved in our + database +
    • +
+
+
+
+ + + + + + + + diff --git a/azharKhalid/info.txt b/azharKhalid/info.txt new file mode 100644 index 0000000..374b9e7 --- /dev/null +++ b/azharKhalid/info.txt @@ -0,0 +1,5 @@ +Full name - Azhar Kahlid +College - Modern Vidya Niketan University, Plawal +Branch - Mechanical Engineering +Year of study - 2013-2017 +Current city of Residence - New Delhi. \ No newline at end of file