From 9daa8d760d886d9d028c117dc6a1e9a0007f48b5 Mon Sep 17 00:00:00 2001 From: Dragonsa15 <45118162+Dragonsa15@users.noreply.github.com> Date: Wed, 25 Mar 2020 22:37:17 +1200 Subject: [PATCH 1/3] Final changes made --- Saksham-Agarwal/About Me.txt | 3 + Saksham-Agarwal/LoginPageTask/index.html | 151 +++++++++++++++++++++++ Saksham-Agarwal/LoginPageTask/main.css | 93 ++++++++++++++ Saksham-Agarwal/LoginPageTask/main.js | 31 +++++ 4 files changed, 278 insertions(+) create mode 100644 Saksham-Agarwal/About Me.txt create mode 100644 Saksham-Agarwal/LoginPageTask/index.html create mode 100644 Saksham-Agarwal/LoginPageTask/main.css create mode 100644 Saksham-Agarwal/LoginPageTask/main.js diff --git a/Saksham-Agarwal/About Me.txt b/Saksham-Agarwal/About Me.txt new file mode 100644 index 0000000..7cc9b37 --- /dev/null +++ b/Saksham-Agarwal/About Me.txt @@ -0,0 +1,3 @@ +Name: Saksham Agarwal +College: International Institute of Information Technology Bangalore +Current Location: Delhi(Due to corona virus lockdown),Bangalore(College) \ No newline at end of file diff --git a/Saksham-Agarwal/LoginPageTask/index.html b/Saksham-Agarwal/LoginPageTask/index.html new file mode 100644 index 0000000..b8d2bfb --- /dev/null +++ b/Saksham-Agarwal/LoginPageTask/index.html @@ -0,0 +1,151 @@ + + + + + + + + + Login + + + + + + + + + + + +
+

Enter your details

+ + + +
+
+ + +
+
+ + + +
+
+ + + +
+ Invalid Username! +
+
+ + +
+
+
+ + +
+ Invalid Email ! +
+
+
+ + + + +
+
+ + +
+ Invalid PhoneNumber ! +
+
+
+ + + +
+
+
+ + +
+ Empty Password! +
+
+
+
+ + + +
+
+
+ + +
+ Passwords do not match! +
+
+
+
+ + + +
+
+ +
+
+ + + +
+
+
+
+ Age: +
+
+ + +
+
+ + +
+
+
+
+ + + +
+
+
+ +
+
+
+
+
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/Saksham-Agarwal/LoginPageTask/main.css b/Saksham-Agarwal/LoginPageTask/main.css new file mode 100644 index 0000000..de604c7 --- /dev/null +++ b/Saksham-Agarwal/LoginPageTask/main.css @@ -0,0 +1,93 @@ +* { + box-sizing: border-box; +} + +body { + font-family: "open sans", helvetica, arial, sans; +} +.logo{ + width: 100px; +} +.log-form { + width: 50%; + min-width: 320px; + max-width: 475px; + background: #fff; + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + -moz-transform: translate(-50%, -50%); + -o-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} + +h2 { + text-align: center; +} +.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, 1); +} + +form { + display: block; + text-align: bottom; + width: 100%; +} +/* ========================WRITE YOUR CSS FROM HERE======================== */ + +/*The background span of top User Icon below Enter Your Details:*/ +.top-form { + position: absolute; + top: -3rem; + left: 12rem; + width: 60px; + height: 60px; + background: transparent; +} + +/*The top User Icon below Enter Your Details:*/ +.top-form .fa{ + color: black; +} + +/*The Background for different icons like UserName,Email,Password etc. */ +.form-span { + position: absolute; + left:7px; + height: 38px; + width:40px; + background: linear-gradient(to right,#4CAF50,#00bcd4); +} + +/*The icons like UserName,Email,Password etc. */ +.form-span .fa{ + padding: 10px; + color: white; +} + +/*All the fields of the form are shifted to right by 10px to accomodate icons*/ +.username-row { + margin-left: 10px; +} + +/* + +Here This field makes it responsive for all devices as +1. Our form is of fixed length which is 800 px So we can specify it here only +2. The only thing before is a header which shows the company icon so we can add some + space for header and render it after the Header + We could also have just put top: 490 px to directly make our form go below + the Company icon or the Header + +*/ + +.log-form { + width: 50vw; + height: 800px; + top: calc(190px + 50vh); +} diff --git a/Saksham-Agarwal/LoginPageTask/main.js b/Saksham-Agarwal/LoginPageTask/main.js new file mode 100644 index 0000000..3976f28 --- /dev/null +++ b/Saksham-Agarwal/LoginPageTask/main.js @@ -0,0 +1,31 @@ +/* ========================WRITE YOUR JS FROM HERE======================== */ + +/*Gets an array of form objects that need validation*/ +var form = document.querySelector('.needs-validation'); + +/*Gets the input fields of password and cnfpassword*/ +var password = document.getElementById("txtPassword"); +var confirmPassword = document.getElementById("txtConfirmPassword"); + +/*Event for onClick of submit button*/ +form.addEventListener('submit', function(event){ + /*Check Validity of the form on basis of Specified Parameters*/ + if(form.checkValidity() === false) + { + event.preventDefault(); + event.stopPropagation(); + } + /*After validation check add was-validated to form to tell Html to show the details*/ + form.classList.add('was-validated'); + + /*Special Validation Check for Password and confirm Password*/ + if (password.value != confirmPassword.value) { + confirmPassword.setCustomValidity('Password Do Not Match'); + } + else + { + confirmPassword.setCustomValidity(''); + } + +}) + From 67ea598db3ab3302766d14e86b39bd12a6aef154 Mon Sep 17 00:00:00 2001 From: Saksham agarwal <45118162+Dragonsa15@users.noreply.github.com> Date: Tue, 14 Apr 2020 19:51:50 +1200 Subject: [PATCH 2/3] Update README.md --- README.md | 38 -------------------------------------- 1 file changed, 38 deletions(-) diff --git a/README.md b/README.md index be9642f..8b13789 100644 --- a/README.md +++ b/README.md @@ -1,39 +1 @@ -# 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. - -## 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. - -### 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). - -### 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. - -# Deadline - -All the pull requests generated post **25th March 2020**, will not be considered for the profile. From 8df8847c249743a15b9c9d61ced4799d46863bcc Mon Sep 17 00:00:00 2001 From: Dragonsa15 <45118162+Dragonsa15@users.noreply.github.com> Date: Sun, 26 Apr 2020 08:00:02 +0000 Subject: [PATCH 3/3] Remove this repo REMOVE IT --- LoginPageTask/index.html | 35 ------ LoginPageTask/main.css | 41 ------ LoginPageTask/main.js | 1 - README.md | 1 - Saksham-Agarwal/About Me.txt | 3 - Saksham-Agarwal/LoginPageTask/index.html | 151 ----------------------- Saksham-Agarwal/LoginPageTask/main.css | 93 -------------- Saksham-Agarwal/LoginPageTask/main.js | 31 ----- desktop.ini | 5 - 9 files changed, 361 deletions(-) delete mode 100644 LoginPageTask/index.html delete mode 100644 LoginPageTask/main.css delete mode 100644 LoginPageTask/main.js delete mode 100644 README.md delete mode 100644 Saksham-Agarwal/About Me.txt delete mode 100644 Saksham-Agarwal/LoginPageTask/index.html delete mode 100644 Saksham-Agarwal/LoginPageTask/main.css delete mode 100644 Saksham-Agarwal/LoginPageTask/main.js delete mode 100644 desktop.ini diff --git a/LoginPageTask/index.html b/LoginPageTask/index.html deleted file mode 100644 index 99031f8..0000000 --- a/LoginPageTask/index.html +++ /dev/null @@ -1,35 +0,0 @@ - - - - - - - - - Login - - - - - - - -
-

Enter your details

-
- - - - - -

Age

- - - - - -
-
- - - \ No newline at end of file diff --git a/LoginPageTask/main.css b/LoginPageTask/main.css deleted file mode 100644 index 5991bf3..0000000 --- a/LoginPageTask/main.css +++ /dev/null @@ -1,41 +0,0 @@ -* { - box-sizing: border-box; -} - -body { - font-family: "open sans", helvetica, arial, sans; -} -.logo{ - width: 100px; -} -.log-form { - width: 100%; - min-width: 320px; - max-width: 475px; - background: #fff; - position: absolute; - top: 50%; - left: 50%; - -webkit-transform: translate(-50%, -50%); - -moz-transform: translate(-50%, -50%); - -o-transform: translate(-50%, -50%); - -ms-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); -} - -h2 { - text-align: center; -} -.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); -} - -form { - display: block; - text-align: center; - width: 100%; -} -/* ========================WRITE YOUR CSS FROM HERE======================== */ \ No newline at end of file diff --git a/LoginPageTask/main.js b/LoginPageTask/main.js deleted file mode 100644 index 05d42f4..0000000 --- a/LoginPageTask/main.js +++ /dev/null @@ -1 +0,0 @@ -/* ========================WRITE YOUR JS FROM HERE======================== */ diff --git a/README.md b/README.md deleted file mode 100644 index 8b13789..0000000 --- a/README.md +++ /dev/null @@ -1 +0,0 @@ - diff --git a/Saksham-Agarwal/About Me.txt b/Saksham-Agarwal/About Me.txt deleted file mode 100644 index 7cc9b37..0000000 --- a/Saksham-Agarwal/About Me.txt +++ /dev/null @@ -1,3 +0,0 @@ -Name: Saksham Agarwal -College: International Institute of Information Technology Bangalore -Current Location: Delhi(Due to corona virus lockdown),Bangalore(College) \ No newline at end of file diff --git a/Saksham-Agarwal/LoginPageTask/index.html b/Saksham-Agarwal/LoginPageTask/index.html deleted file mode 100644 index b8d2bfb..0000000 --- a/Saksham-Agarwal/LoginPageTask/index.html +++ /dev/null @@ -1,151 +0,0 @@ - - - - - - - - - Login - - - - - - - - - - - -
-

Enter your details

- - - -
-
- - -
-
- - - -
-
- - - -
- Invalid Username! -
-
- - -
-
-
- - -
- Invalid Email ! -
-
-
- - - - -
-
- - -
- Invalid PhoneNumber ! -
-
-
- - - -
-
-
- - -
- Empty Password! -
-
-
-
- - - -
-
-
- - -
- Passwords do not match! -
-
-
-
- - - -
-
- -
-
- - - -
-
-
-
- Age: -
-
- - -
-
- - -
-
-
-
- - - -
-
-
- -
-
-
-
-
- - - - - - - - - - - - - \ No newline at end of file diff --git a/Saksham-Agarwal/LoginPageTask/main.css b/Saksham-Agarwal/LoginPageTask/main.css deleted file mode 100644 index de604c7..0000000 --- a/Saksham-Agarwal/LoginPageTask/main.css +++ /dev/null @@ -1,93 +0,0 @@ -* { - box-sizing: border-box; -} - -body { - font-family: "open sans", helvetica, arial, sans; -} -.logo{ - width: 100px; -} -.log-form { - width: 50%; - min-width: 320px; - max-width: 475px; - background: #fff; - position: absolute; - top: 50%; - left: 50%; - -webkit-transform: translate(-50%, -50%); - -moz-transform: translate(-50%, -50%); - -o-transform: translate(-50%, -50%); - -ms-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); -} - -h2 { - text-align: center; -} -.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, 1); -} - -form { - display: block; - text-align: bottom; - width: 100%; -} -/* ========================WRITE YOUR CSS FROM HERE======================== */ - -/*The background span of top User Icon below Enter Your Details:*/ -.top-form { - position: absolute; - top: -3rem; - left: 12rem; - width: 60px; - height: 60px; - background: transparent; -} - -/*The top User Icon below Enter Your Details:*/ -.top-form .fa{ - color: black; -} - -/*The Background for different icons like UserName,Email,Password etc. */ -.form-span { - position: absolute; - left:7px; - height: 38px; - width:40px; - background: linear-gradient(to right,#4CAF50,#00bcd4); -} - -/*The icons like UserName,Email,Password etc. */ -.form-span .fa{ - padding: 10px; - color: white; -} - -/*All the fields of the form are shifted to right by 10px to accomodate icons*/ -.username-row { - margin-left: 10px; -} - -/* - -Here This field makes it responsive for all devices as -1. Our form is of fixed length which is 800 px So we can specify it here only -2. The only thing before is a header which shows the company icon so we can add some - space for header and render it after the Header - We could also have just put top: 490 px to directly make our form go below - the Company icon or the Header - -*/ - -.log-form { - width: 50vw; - height: 800px; - top: calc(190px + 50vh); -} diff --git a/Saksham-Agarwal/LoginPageTask/main.js b/Saksham-Agarwal/LoginPageTask/main.js deleted file mode 100644 index 3976f28..0000000 --- a/Saksham-Agarwal/LoginPageTask/main.js +++ /dev/null @@ -1,31 +0,0 @@ -/* ========================WRITE YOUR JS FROM HERE======================== */ - -/*Gets an array of form objects that need validation*/ -var form = document.querySelector('.needs-validation'); - -/*Gets the input fields of password and cnfpassword*/ -var password = document.getElementById("txtPassword"); -var confirmPassword = document.getElementById("txtConfirmPassword"); - -/*Event for onClick of submit button*/ -form.addEventListener('submit', function(event){ - /*Check Validity of the form on basis of Specified Parameters*/ - if(form.checkValidity() === false) - { - event.preventDefault(); - event.stopPropagation(); - } - /*After validation check add was-validated to form to tell Html to show the details*/ - form.classList.add('was-validated'); - - /*Special Validation Check for Password and confirm Password*/ - if (password.value != confirmPassword.value) { - confirmPassword.setCustomValidity('Password Do Not Match'); - } - else - { - confirmPassword.setCustomValidity(''); - } - -}) - diff --git a/desktop.ini b/desktop.ini deleted file mode 100644 index 6cd66b3..0000000 --- a/desktop.ini +++ /dev/null @@ -1,5 +0,0 @@ -[.ShellClassInfo] -InfoTip=This folder is shared online. -IconFile=C:\PROGRA~1\Google\Drive\GOOGLE~1.EXE -IconIndex=16 - \ No newline at end of file