Simple Passwords

Developer
Thomas Hare
Size
2,582 Kb
Views
10,120
  1. Simple Passwords Previews
  2. Simple Passwords HTML Codes
  3. Simple Passwords CSS Codes
  4. Simple Passwords JS Codes

How do I make an simple passwords?

Places an eye icon after a password field to show/hide the typed password.. What is a simple passwords? How do you make a simple passwords? This script and codes were developed by Thomas Hare on 17 November 2022, Thursday.

Simple Passwords Previews
IQ Test

Simple Passwords - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Passwords</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Simple Passwords</h1>
<form action="" method=""> <input placeholder="Email" type="email"> <input placeholder="Password" type="password"> <button class="show-password" type="button"></button> <button class="register"><i class="glyphicon glyphicon-circle-arrow-right"></i></button>
</form>
<p><a href="https://github.com/thomashare/Simple-Passwords" target="_blank"><i class="fa fa-github"></i>View on GitHub</a> or <a href="https://github.com/thomashare/Simple-Passwords/archive/master.zip"><i class="glyphicon glyphicon-download-alt"></i>Direct Download</a></p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple Passwords - Script Codes CSS Codes

html { background-color: #FFF;
}
body { background: transparent; margin: 0 auto; padding: 10% 0; width: 400px;
}
h1 { color: #889; margin-bottom: 1.5rem; text-align: center;
}
input { background-color: rgba(255,255,255,0.75); border-radius: 3px 3px 3px; border: solid #BBB 1px; color: #888; outline: none; padding: 0.25rem;
}
[class*="glyphicon-eye-"] { background: none; border: none; color: #888; outline: none;
}
.register { background: none; border: none; color: #069; font-size: 2.25rem; outline: none; vertical-align: middle;
}
p { line-height: 4rem; text-align: center;
}
.fa { font-size: 2rem;
}
.fa,.glyphicon { margin-right: 0.5rem; text-decoration: none; vertical-align: middle;
}

Simple Passwords - Script Codes JS Codes

// Simple Passwords [start]
// Places an eye icon after a password field to show/hide the typed password.
/*
Author: Thomas Hare
Date: 09/08/15
Dependencies: Bootstrap Glyphicons, jQuery
*/
// Installation: Place a button after a password field with the class of "show-password" and type="button"
// automatically add glyphicon eye to the show-password button
$('.show-password').addClass('glyphicon glyphicon-eye-close');
$('.show-password').attr('title','Hold to show password');
// show password on mouse down of the eye button
$('.show-password').mousedown( function() { $(':input[type=password]').attr('type', 'text'); $('.show-password').removeClass('glyphicon-eye-close'); $('.show-password').addClass('glyphicon-eye-open');
});
// hide password of mouse up of the eye button
$('.show-password').mouseup( function() { $(':input[type=text]').attr('type', 'password'); $('.show-password').addClass('glyphicon-eye-close'); $('.show-password').removeClass('glyphicon-eye-open');
});
// hide password of mouse out of the eye button
$('.show-password').mouseleave( function() { $(':input[type=text]').attr('type', 'password'); $('.show-password').addClass('glyphicon-eye-close'); $('.show-password').removeClass('glyphicon-eye-open');
});
// Simple Passwords [end]
Simple Passwords - Script Codes
Simple Passwords - Script Codes
Home Page Home
Developer Thomas Hare
Username tommyhare
Uploaded November 17, 2022
Rating 3
Size 2,582 Kb
Views 10,120
Do you need developer help for Simple Passwords?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Thomas Hare (tommyhare) Script Codes
Name
Ashley Fitness
Micropush
Space Ashley
Swipe View
Responsive Sidebar
Table Classes
Bootstrap Form Fun
Random Drawing
The Initiator
Simple Login
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!