Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<h1>UX trick for email inputs</h1>
<h2>Awesome for mobile sign ups</h2>
<label>Email</label>
<input type="email" class="email" required>
<ul class="autosuffix"></ul>
<a class="follow" href="https://twitter.com/mildrenben" target="_blank"><i class="fa fa-twitter"></i>Follow Me</a>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,500,300,700' rel='stylesheet' type='text/css'>
var email = document.querySelector('.email'),
auto = document.querySelector('.autosuffix');
var popularEmails = ['gmail.com', 'googlemail.com', 'hotmail.com', 'yahoo.com', 'msn.com', 'aol.com'];
email.addEventListener('keyup', function() {
auto.innerHTML = '';
if(email.value.match('@')) {
var afterAt = email.value.substring(email.value.indexOf('@') + 1, email.value.length);
var popularEmailsSub = [];
for(var l = 0; l < popularEmails.length; l++) {
popularEmailsSub.push(popularEmails[l].substring(0, afterAt.length))
}
if(afterAt == '') {
for(var i = 0; i < popularEmails.length; i++) {
auto.innerHTML += '<li>' + email.value + popularEmails[i] + '</li>';
}
}
else if(!(afterAt == '')) {
var matchedEmails = [];
for(var k = 0; k < popularEmails.length; k++) {
if(popularEmailsSub[k].match(afterAt)) {
matchedEmails.push(popularEmails[k]);
}
}
for(var i = 0; i < matchedEmails.length; i++) {
auto.innerHTML += '<li>' + email.value.substring(0, email.value.indexOf('@')) + '@' + matchedEmails[i] + '</li>';
}
}
var autoItems = document.querySelectorAll('.autosuffix li');
for(var j = 0; j < autoItems.length; j++) {
autoItems[j].addEventListener('click', function() {
email.value = this.textContent;
auto.innerHTML = '';
});
}
}
});
$emerald: #2ecc71;
$asphalt: #34495e;
$grey: #9e9e9e;
$shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 8px 0 rgba(0, 0, 0, 0.12);
$cubic: cubic-bezier(.64,.09,.08,1);
html, body {
width: 100%;
font-family: Roboto, sans-serif;
}
h1 {
font-size: 26px;
background: $emerald;
color: white;
padding: 40px 0 40px 20%;
margin-bottom: 50px;
}
h2 {
margin-left: 20%;
font-size: 22px;
color: $asphalt;
}
label {
margin-left: 20%;
margin-top: 100px;
display: block;
font-size: 14px;
}
.email {
width: 260px;
margin-left: 20%;
display: block;
font-size: 16px;
padding: 10px 0;
border: none;
border-bottom: solid 1px darken($grey, 40%);
color: darken($grey, 40%);
background-image: linear-gradient(to bottom, rgba(0,0,0,0) 98%, darken($grey, 35%) 98%);
background-repeat: no-repeat;
background-size: 260px 100%;
background-position: -260px 0;
transition: background-position 0.2s $cubic;
&:focus, &:valid {
background-position: 0 0;
outline: none;
}
}
.autosuffix {
margin-left: 20%;
margin-top: 10px;
box-shadow: $shadow;
display: inline-block;
border-radius: 3px;
position: absolute;
li {
padding: 14px;
padding-right: 20px;
cursor: pointer;
color: darken($grey, 40%);
&:first-of-type {
border-radius: 3px 3px 0 0;
}
&:last-of-type {
border-radius: 0 0 3px 3px;
}
&:hover {
background: lighten($grey, 30%);
}
}
}
//---------------------------------------------
.follow {
overflow: hidden;
width: 42px;
height: 42px;
border-radius: 50px;
background: #03A9F4;
display: block;
margin: 300px auto 0;
white-space: nowrap;
padding: 13px;
box-sizing: border-box;
color: white;
transition: all 0.2s ease;
font-family: Roboto, sans-serif;
text-decoration: none;
box-shadow: 0 5px 6px 0 rgba(0,0,0,0.2);
i {
margin-right: 20px;
transition: margin-right 0.2s ease;
}
&:hover {
width: 134px;
i {
margin-right: 10px;
}
}
}
@media screen and (max-width: 800px) {
.follow {
margin: 400px auto 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment