https://github.com/antonharbers/demo-signup-form
Sign-up Form - The Odin Project: https://www.theodinproject.com/lessons/node-path-intermediate-html-and-css-sign-up-form
https://github.com/antonharbers/demo-signup-form
css html javascript layout validation
Last synced: 3 months ago
JSON representation
Sign-up Form - The Odin Project: https://www.theodinproject.com/lessons/node-path-intermediate-html-and-css-sign-up-form
- Host: GitHub
- URL: https://github.com/antonharbers/demo-signup-form
- Owner: AntonHarbers
- Created: 2023-06-26T21:40:23.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-14T16:01:21.000Z (over 1 year ago)
- Last Synced: 2025-01-19T18:09:30.343Z (5 months ago)
- Topics: css, html, javascript, layout, validation
- Language: HTML
- Homepage: https://antonharbers.github.io/Demo-Signup-Form/
- Size: 3.26 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# The Odin Project - Sign-up Form
A Sign up form made using html, css and javascript for the odin project.
[Live Link](https://antonharbers.github.io/Demo-Signup-Form/)
## Folder Structure
```
/.git -> This git repository
/assets -> Contains the favicon, the repo Image, logo and background pictures.
index.html -> Contains all the HTML for this project
README.md -> This Readme file
script.js -> Contains all the functionality
style.css -> Contains all the project styles for all screen sizes
```
## Key Concepts
### The HTML element
This was a great project to get familiar with the element. I was able to make use of the min, max, required and placeholder attributes to create a form with multiple user inputs as shown below:
HTML:
```
Lets do this!
First Name
Last Name
EMAIL
Phone Number
Password
Confirm Password
Create Account
*Please make sure your password and confirmed passwords match!
```
### The submit event
When adding a button of type "submit" into the you are able to access the "submit" form event whenever this button is clicked. Below is an example based on my implementation in this project:
HTML:
```
Create Account
```
JS:
```
document.querySelector('form').addEventListener('submit', function (event) {
event.preventDefault(); // Prevent form submission
HandleFormSubmit();
event.target.submit();
});
```
In the HTML we define the button with type of "submit" and then in our Javascript we add some functionality to the 'submit' event on the form object.
### Form Validation
It was Interesting to learn and apply the different form validation concepts.
I have two different validation implementations in this project (shown below), however there are so many different ways and levels to form validation its hard to apply all of them to a single project:
HTML:
```
```
In the above snippit I make use of the inbuilt HTML validators like min and max to constrict what the user is able to enter into the individual form fields.
JS:
```
function HandleFormSubmit() {
var password = passwordInput.value;
var confirmPassword = confirmPasswordInput.value;
if (password !== confirmPassword) {
errorText.classList.remove('hidden');
return;
} else {
errorText.classList.add('hidden');
}
}
```
In the above snippit I check for equality amongst the provided passwords directly in my Javascript code on the submit event of the form. If the passwords do not match then an errortext will appear and the submit event will return null. Javascript can and should be used to validate users inputs after these have already been added to the input fields (HTML inbuilt validation is a good protective measure to be applied before the submit event is fired).
### Custom Cursor Implementation
I tried to challange myself in this project by adding a custom cursor image that would replace the default cursor when visiting this page. I accomplished this in 3 basic steps:
#### 1 - Remove default Cursor
CSS:
```
* {
cursor: none;
}
```
#### 2 - Find and hook up cursor image with ![]()
HTML:
```
SVG Content Here
```
CSS:
```
.cursor {
position: absolute;
z-index: 10;
pointer-events: none;
}
```
Important to make the cursor absolute and position it infront of all other elements with the z-index.
#### 3 - Make cursor Interactive using Javascript
JS:
```
// Get the cursor element from our DOM
const foxCursor = document.querySelector('.cursor');
// Event Listeners for moving and clicking the mouse
document.addEventListener('mousemove', (e) => {
UpdateCursorPosition(e.pageY, e.pageX);
});
document.addEventListener('mousedown', () => {
// here we simply add the animated expand class
foxCursor.classList.add('expand');
});
document.addEventListener('mouseup', () => {
// here we remove the animated expand class
foxCursor.classList.remove('expand');
});
// This function sets the cursor position to the mouse posiiton, and hides the cursor when user leaves page with their mouse
function UpdateCursorPosition(pageY, pageX) {
foxCursor.setAttribute(
'style',
'top: ' + (pageY - 10) + 'px; left: ' + (pageX - 10) + 'px;'
);
pageX < 10 || pageY < 10
? foxCursor.classList.add('hidden')
: foxCursor.classList.remove('hidden');
}
```
## Final Notes
Although this was a relatively simple task it was fun to come up with a creative design an then implement some of the key concepts learned in the odin project thus far. As far as Form validation goes, this project really helped illustrate the workflow and implementation of validation without too much other information around so one could focus just on this key peace.