Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/j-winston/odin-signup-form

Intermediate level html css projects
https://github.com/j-winston/odin-signup-form

Last synced: 7 days ago
JSON representation

Intermediate level html css projects

Host: GitHub
URL: https://github.com/j-winston/odin-signup-form
Owner: j-winston
Created: 2023-01-03T14:53:29.000Z (about 2 years ago)
Default Branch: main
Last Pushed: 2023-01-19T15:50:36.000Z (about 2 years ago)
Last Synced: 2024-11-14T17:33:46.363Z (2 months ago)
Language: CSS
Size: 987 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Mobile-Responsive Sign Up Form
---

## Table of Contents
---
* Try It Out
* Introduction
* Technologies
* Features
* Inspiration

### Try It Out
---
[A kinder, more loving form](https://j-winston.github.io/odin-signup-form/)

### Introduction
---
Enter your information....now email....now password...now shoot me. And if you're like
most people, you are completely sick of being prompted to type your information
into little rectangles on a lit up screen.

And after using my form, I can say with certainty you won't feel any different.

However, I did my best to mitigate some of the suicidal impact of your average
form. Namely--

* Stop flashing red while I am still typing. It's like you're yelling at me.
* Give me immediate feedback when I'm doing it right. Because instant gratification feels good.
* Don't give me your feedback until I leave the field. I feel rushed.
* And please, please don't tell me my passwords don't match until AFTER I am done.
Because, you guessed it..I am still typing.
* Last, do test your form on small phones. Not all of us want to lug around
a monster geekbox in our pockets.

But seriously, forms are both vital and annoying as hell. As developers, we
can help ease the pain with a little thoughtfullness and common sense.

### Technologies
---
HTML/CSS/Javascript

### Features
---
* Mobile-responsive design
* Gentle validation behaviors: starts in passive mode and persists only after leaving field.

### Inspiration
---
I stumbled across this [Twitter post](https://twitter.com/vponamariov/status/1400388896136040454).
The author points out examples of forms with poor UX and I've seen it everywhere. Also, I needed to complete
this for The Odin Project. Shout out to Odin.

Also big shout out to Rita Łyczywek for [her article](https://bulldogjob.com/readme/how-to-write-a-good-readme-for-your-github-project) on how to write a README.md file for Github. That's the part we all avoid like the plague.