I am working on a simple todo list, I have the code posted below so you can run it and see exactly what I'm talking about.
I want to be able to click on the heart icon inside of the h1 and toggle the todo list "text" input.
I am almost positive my code is correct, yet obviously not because, clicking on the heart icon does nothing.
I am using jQuery 3.2.1 through a cdn and font awesome 5.
I tried selecting the fa-heart icon and giving it the argument that when clicked to toggle the fade i/o for text inputs. It didn't work and I am at a loss. Any help would be appreciated.
// Check Off Specific Todos By Clicking
$("ul").on("click", "li", function() {
$(this).toggleClass("completed");
});
//Click on X to delete Todo
$("ul").on("click", "span", function(event) {
$(this).parent().fadeOut(500, function() {
$(this).remove();
});
event.stopPropagation();
});
$("input[type='text']").keypress(function(event) {
if (event.which === 13) {
//grabbing new todo text from input
var todoText = $(this).val();
$(this).val("");
//create a new li and add to ul
$("ul").append("<li><span><i class='fa fa-trash'></i></span> " + todoText + "</li>")
}
});
$(".fa-heart").click(function() {
$("input[type='text']").fadeToggle();
});
#container {
width: 360px;
margin: 100px auto;
background: #d4d1ca;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}
.completed {
color: gray;
text-decoration: line-through;
}
h1 {
background: #abc3a8;
color: white;
margin: 0;
padding: 10px 20px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
body {
font-family: 'Roboto Mono', monospace;
background: #abc3a8/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #c9b7b3, #97a794);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #c9b7b3, #97a794);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
li {
background-color: #c9b7b3;
height: 40px;
line-height: 40px;
color: #666;
}
li:nth-child(2n) {
background-color: #d4d1ca;
}
input {
font-size: 18px;
color: #abc3a8;
background-color: #d4d1ca;
width: 100%;
padding: 13px 13px 13px 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 3px rgba(0, 0, 0, 0);
}
input:focus {
background-color: #d4d1ca;
border: 3px solid #abc3a8;
outline: none;
}
.fa-heart {
float: right;
}
span {
background-color: #e74c3c;
height: 40px;
margin-right: 20px;
text-align: center;
color: white;
width: 0;
display: inline-block;
transition: 0.2s linear;
opacity: 0;
}
li:hover span {
width: 40px;
opacity: 1.0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Honey-do List</title>
<script type="text/javascript" src="assets/js/lib/jquery-3.2.1.min.js">
</script>
<link rel="stylesheet" href="assets/css/honeyDew.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.3/js/all.js"></script>
</head>
<body>
<div id="container">
<h1>Honey-do List <i class="fas fa-heart"></i></h1>
<input type="text" placeholder="New Honey Do!">
<ul>
<li><span><i class="fa fa-trash"></i></span> Go get Milk</li>
<li><span><i class="fa fa-trash"></i></span> Take the dogs out</li>
<li><span><i class="fa fa-trash"></i></span> Buy flowers</li>
</ul>
</div>
<script type="text/javascript" src="assets/js/honeyDew.js"></script>
</body>
</html>
Put div around your icon
Click event will not work with tag
Honey-do List
// Check Off Specific Todos By Clicking
$("ul").on("click", "li", function() {
$(this).toggleClass("completed");
});
//Click on X to delete Todo
$("ul").on("click", "span", function(event) {
$(this).parent().fadeOut(500, function() {
$(this).remove();
});
event.stopPropagation();
});
$("input[type='text']").keypress(function(event) {
if (event.which === 13) {
//grabbing new todo text from input
var todoText = $(this).val();
$(this).val("");
//create a new li and add to ul
$("ul").append("<li><span><i class='fa fa-trash'></i></span> " + todoText + "</li>")
}
});
$(".fa-heart").click(function() {
alert('test');
});
#container {
width: 360px;
margin: 100px auto;
background: #d4d1ca;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}
.completed {
color: gray;
text-decoration: line-through;
}
h1 {
background: #abc3a8;
color: white;
margin: 0;
padding: 10px 20px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
body {
font-family: 'Roboto Mono', monospace;
background: #abc3a8/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #c9b7b3, #97a794);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #c9b7b3, #97a794);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
li {
background-color: #c9b7b3;
height: 40px;
line-height: 40px;
color: #666;
}
li:nth-child(2n) {
background-color: #d4d1ca;
}
input {
font-size: 18px;
color: #abc3a8;
background-color: #d4d1ca;
width: 100%;
padding: 13px 13px 13px 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 3px rgba(0, 0, 0, 0);
}
input:focus {
background-color: #d4d1ca;
border: 3px solid #abc3a8;
outline: none;
}
.fa-heart {
float: right;
}
span {
background-color: #e74c3c;
height: 40px;
margin-right: 20px;
text-align: center;
color: white;
width: 0;
display: inline-block;
transition: 0.2s linear;
opacity: 0;
}
li:hover span {
width: 40px;
opacity: 1.0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Honey-do List</title>
<script type="text/javascript" src="assets/js/lib/jquery-3.2.1.min.js">
</script>
<link rel="stylesheet" href="assets/css/honeyDew.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.3/js/all.js"></script>
</head>
<body>
<div id="container">
<h1>Honey-do List <div class="fa-heart"><i class="fas fa-heart"></i></div></h1>
<input type="text" placeholder="New Honey Do!">
<ul>
<li><span><i class="fa fa-trash"></i></span> Go get Milk</li>
<li><span><i class="fa fa-trash"></i></span> Take the dogs out</li>
<li><span><i class="fa fa-trash"></i></span> Buy flowers</li>
</ul>
</div>
<script type="text/javascript" src="assets/js/honeyDew.js"></script>
</body>
</html>
Related
I'm making a menu but I have a problem with my JavaScript.
I messed up the JavaScript file, but it works in general. The thing is that when you load the page and your with is less than 858px and then you click in one of the items of the menu, if then you make your width larger the menu disappears. So I want to not disappear it.
JavaScript, HTML and CSS:
const mediaQuery = window.matchMedia("(max-width: 858px)");
// Check if the media query is true
if (mediaQuery.matches) {
// function that hides the menu when a "ul li a" is clicked, then, if you click it again, it recovers its form
function hide() {
document.getElementById("hidden").style.display = "none";
// to do an autoclick to class "checkbtn"
document.getElementsByClassName("checkbtn")[0].click();
}
// function that shows the menu when you click the hamburguer (fas fa-bars)
function show() {
document.getElementById("hidden").style.display = "inherit";
}
} else {
function hide() {
document.getElementById("hidden").style.display = "inherit";
document.getElementsByClassName("checkbtn")[0].click();
}
function show() {
document.getElementById("hidden").style.display = "inherit";
}
}
// Initial check
handleTabletChange(mediaQuery);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test</title>
<!-- (fonts.google.com) -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap"
rel="stylesheet"
/>
<script src="./main.js"></script>
<!-- material design icons -->
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<!-- hamburger menu -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<style>
/* menu styling */
nav {
background: linear-gradient(
90deg,
rgba(255, 136, 75, 1) 0%,
rgba(254, 72, 64, 1) 100%
);
height: 55px;
width: 100%;
border-radius: 0;
position: fixed;
z-index: 100;
}
label.logo {
color: white;
font-size: 25px;
line-height: 55px;
padding: 0 100px;
font-weight: bold;
}
label.logo a {
color: white;
}
label.logo a:hover {
box-shadow: none;
background: none;
}
nav ul {
float: right;
margin-right: 20px;
border-radius: 0;
}
nav ul li {
display: inline-block;
line-height: 55px;
margin: 0 5px;
}
nav ul li a {
color: white;
font-size: 14px;
padding: 7px 13px;
}
nav ul li a:hover {
background-color: #2c3e50;
transition: 0.5s;
}
.checkbtn {
font-size: 30px;
color: white;
float: right;
line-height: 55px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check {
display: none;
}
/* menu media queries */
#media (max-width: 952px) {
label.logo {
font-size: 25px;
padding-left: 50px;
}
nav ul li a {
font-size: 16px;
}
}
#media (max-width: 858px) {
.checkbtn {
display: block;
}
ul {
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 55px;
left: -100%;
text-align: center;
transition: all 0.5s;
}
nav ul li {
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a {
font-size: 17px;
}
nav ul li a:hover {
background: linear-gradient(
90deg,
rgba(255, 136, 75, 1) 0%,
rgba(254, 72, 64, 1) 100%
);
box-shadow: inset 0 0 0 25px rgb(254, 72, 64);
}
#check:checked ~ ul {
left: 0;
}
}
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
border-radius: 10px;
transition: all 0.6s;
}
body {
background-color: #2c3e50;
color: white !important;
font-family: "Ubuntu", sans-serif;
}
.cssAnimation:hover {
transform: translateY(10px) !important;
}
</style>
</head>
<body id="body">
<!-- menu -->
<nav>
<input type="checkbox" id="check" />
<label for="check" class="checkbtn"
><i class="fas fa-bars" onclick="show()"></i
></label>
<label class="logo">Name</label>
<ul id="hidden">
<li>
Test
</li>
<li>
Test
</li>
<li>
Test
</li>
<li>
Test
</li>
</ul>
</nav>
</body>
</html>
The function "hide()" makes the navigation disappear. For example, you said in the navigation that if you click on the list element, the navigation should disappear. If you remove the "display: none" everything should work as you wanted it to.
function hide() {
document.getElementById("hidden").style.display = "none";
// to do an autoclick to class "checkbtn"
document.getElementsByClassName("checkbtn")[0].click();
}
Try it this way:
const mediaQuery = window.matchMedia("(max-width: 858px)");
// Check if the media query is true
if (mediaQuery.matches) {
// function that hides the menu when a "ul li a" is clicked, then, if you click it again, it recovers its form
function hide() {
// to do an autoclick to class "checkbtn"
document.getElementsByClassName("checkbtn")[0].click();
}
// function that shows the menu when you click the hamburguer (fas fa-bars)
function show() {
document.getElementById("hidden").style.display = "inherit";
}
} else {
function hide() {
document.getElementById("hidden").style.display = "inherit";
document.getElementsByClassName("checkbtn")[0].click();
}
function show() {
document.getElementById("hidden").style.display = "inherit";
}
}
// Initial check
handleTabletChange(mediaQuery);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test</title>
<!-- (fonts.google.com) -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap"
rel="stylesheet"
/>
<!-- material design icons -->
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<!-- hamburger menu -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<style>
/* menu styling */
nav {
background: linear-gradient(
90deg,
rgba(255, 136, 75, 1) 0%,
rgba(254, 72, 64, 1) 100%
);
height: 55px;
width: 100%;
border-radius: 0;
position: fixed;
z-index: 100;
}
label.logo {
color: white;
font-size: 25px;
line-height: 55px;
padding: 0 100px;
font-weight: bold;
}
label.logo a {
color: white;
}
label.logo a:hover {
box-shadow: none;
background: none;
}
nav ul {
float: right;
margin-right: 20px;
border-radius: 0;
}
nav ul li {
display: inline-block;
line-height: 55px;
margin: 0 5px;
}
nav ul li a {
color: white;
font-size: 14px;
padding: 7px 13px;
}
nav ul li a:hover {
background-color: #2c3e50;
transition: 0.5s;
}
.checkbtn {
font-size: 30px;
color: white;
float: right;
line-height: 55px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check {
display: none;
}
/* menu media queries */
#media (max-width: 952px) {
label.logo {
font-size: 25px;
padding-left: 50px;
}
nav ul li a {
font-size: 16px;
}
}
#media (max-width: 858px) {
.checkbtn {
display: block;
}
ul {
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 55px;
left: -100%;
text-align: center;
transition: all 0.5s;
}
nav ul li {
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a {
font-size: 17px;
}
nav ul li a:hover {
background: linear-gradient(
90deg,
rgba(255, 136, 75, 1) 0%,
rgba(254, 72, 64, 1) 100%
);
box-shadow: inset 0 0 0 25px rgb(254, 72, 64);
}
#check:checked ~ ul {
left: 0;
}
}
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
border-radius: 10px;
transition: all 0.6s;
}
body {
background-color: #2c3e50;
color: white !important;
font-family: "Ubuntu", sans-serif;
}
.cssAnimation:hover {
transform: translateY(10px) !important;
}
</style>
</head>
<body id="body">
<!-- menu -->
<nav>
<input type="checkbox" id="check" />
<label for="check" class="checkbtn"
><i class="fas fa-bars" onclick="show()"></i
></label>
<label class="logo">Name</label>
<ul id="hidden">
<li>
Test
</li>
<li>
Test
</li>
<li>
Test
</li>
<li>
Test
</li>
</ul>
</nav>
</body>
</html>
Happy Coding!
I have problem here;
$("#anan").click(function(){
$("input[type='text']").fadeToggle();
});
I would like my input box to disappear and appear with a fade effect. Currently, it only appears and disappears without a fading effect. Can someone help me as to why it doesn't fade in/out?
Note: In the preview, it doesn't even disappear/appear for some reason but when I actually run the html on Chrome it functions alright, except the fading animation.
$("ul").on("click", "li", function() {
$(this).toggleClass("completed");
});
$("ul").on("click", "span", function(event) {
$(this).parent().fadeOut(500, function() {
$(this).remove();
});
event.stopPropagation();
})
$("input[type ='text']").on("keypress", function(event) {
if (event.which === 13) {
var inputtext = $(this).val();
$(this).val("");
$("ul").append("<li><span><i class='fas fa-trash'></i></span> " + inputtext + "</li>")
}
})
$("#anan").click(function() {
$("input[type='text']").fadeToggle();
});
h1 {
background: #2980b9;
color: white;
margin: 0;
padding: 10px 20px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.fa-plus {
float: right;
}
body {
background: #ff6e7f;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #bfe9ff, #ff6e7f);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #bfe9ff, #ff6e7f);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
font-family: Roboto;
}
li {
background: #fff;
height: 40px;
line-height: 40px;
color: #666;
}
input {
font-size: 18px;
color: #2980b9;
background-color: #f7f7f7;
width: 100%;
box-sizing: border-box;
padding: 13px 13px 13px 20px;
border: 3px solid rgba(0, 0, 0, 0);
}
input:focus {
background: #fff;
border: 3px solid #2980b9;
outline: none;
}
li:nth-child(2n) {
background: #f7f7f7;
}
li span {
background: #e74c3c;
height: 40px;
margin-right: 20px;
text-align: center;
color: white;
width: 0;
display: inline-block;
transition: 0.2s linear;
opacity: 0;
}
li:hover span {
width: 40px;
opacity: 1.0;
}
#container {
width: 360px;
margin: 100px auto;
background: #f7f7f7;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}
.completed {
color: gray;
text-decoration: line-through;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>ToDo List App</title>
<script type="text/javascript" src="assets/js/lib/jquery-3.3.1.min.js">
</script>
<link rel="stylesheet" type="text/css" href="assets/css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
</head>
<body>
<div id="container">
<h1>To-Do List <span id="anan"><i class="fas fa-plus"></i></span></h1>
<input type="text">
<ul>
<li><span><i class="fas fa-trash"></i></span> Go to Potions Class</li>
<li><span><i class="fas fa-trash"></i></span> Buy new robes</li>
<li><span><i class="fas fa-trash"></i></span> Visit anan</li>
</ul>
</div>
<script type="text/javascript" src="assets/js/mycustom.js">
</script>
</body>
</html>
You are missing JQuery script:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$("ul").on("click", "li", function(){
$(this).toggleClass("completed");
}
);
$("ul").on("click", "span", function(event){
$(this).parent().fadeOut(500, function(){
$(this).remove();
});
event.stopPropagation();
}
)
$("input[type ='text']").on("keypress", function(event){
if(event.which === 13) {
var inputtext = $(this).val();
$(this).val("");
$("ul").append("<li><span><i class='fas fa-trash'></i></span> "+ inputtext + "</li>")
}
})
$("#anan").click(function(){
$("input[type='text']").fadeToggle();
});
h1 {
background: #2980b9;
color:white;
margin: 0;
padding: 10px 20px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.fa-plus{
float:right;
}
body {
background: #ff6e7f; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #bfe9ff, #ff6e7f); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #bfe9ff, #ff6e7f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
font-family: Roboto;
}
li {
background: #fff;
height: 40px;
line-height: 40px;
color: #666;
}
input {
font-size: 18px;
color: #2980b9;
background-color: #f7f7f7;
width: 100%;
box-sizing: border-box;
padding: 13px 13px 13px 20px;
border: 3px solid rgba(0,0,0, 0);
}
input:focus{
background: #fff;
border: 3px solid #2980b9;
outline: none;
}
li:nth-child(2n){
background: #f7f7f7;
}
li span {
background: #e74c3c;
height: 40px;
margin-right: 20px;
text-align: center;
color: white;
width: 0;
display: inline-block;
transition: 0.2s linear;
opacity: 0;
}
li:hover span {
width: 40px;
opacity: 1.0;
}
#container {
width: 360px;
margin: 100px auto;
background: #f7f7f7;
box-shadow: 0 0 3px rgba(0,0,0, 0.1);
}
.completed {
color: gray;
text-decoration: line-through;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<div id="container">
<h1>To-Do List <span id="anan"><i class="fas fa-plus"></i></span></h1>
<input type="text">
<ul>
<li><span><i class="fas fa-trash"></i></span> Go to Potions Class</li>
<li><span><i class="fas fa-trash"></i></span> Buy new robes</li>
<li><span><i class="fas fa-trash"></i></span> Visit anan</li>
</ul>
</div>
<script type="text/javascript" src="assets/js/mycustom.js">
</script>
in our codepen you have not included jquery and in your css that text box background is #f5f5f5 which is same as it's background.So you need to change text box's background color to see fade effect . Example you can set red for testing. In JS you are required to mention parameters on fadeToggle
$("input[type='text']").fadeToggle("2000", "linear");
Here, 2000 stands for 2second . You can increase as you wish. For more detail you are required to check document on http://api.jquery.com/fadetoggle/
I have edited on codepen : https://codepen.io/hirakumar/pen/aKpQNN?editors=0001
I have an input box that I'd like to slide up/down so that it looks like it is coming from behind the element above.
My input HTML looks like this:
<input type="text" placeholder="Add New Todo">
The CSS for the input looks like this:
input {
font-size: 18px;
background-color: #f7f7f7;
width: 100%;
padding: 13px 13px 13px 20px;
box-sizing: border-box;
color: #2980b9;
border: 3px solid rgba(0,0,0,0);
}
And my JS looks like this:
$("#dropdown").click(function(){
$("input[type='text']").slideToggle(2000);
})
Currently, the slide gets stuck at the start/finish, as it seems the height cannot be reduced to 0.
Here is a full example of what happens.
How can I make my input box animate smoothly?
I'd wrap the input in a containing element with hidden overflow and animate that one.
$("#dropdown").click(function(){
$(".input_container").toggleClass('hide');
})
#container {
background-color: #f7f7f7;
box-shadow: 0 0 3px rgba(0,0,0,0.1);
margin: 100px auto;
width: 360px;
}
.completed {
color: gray;
text-decoration: line-through;
}
body {
font-family: Roboto;
background: #2BC0E4;
background: -webkit-linear-gradient(to left, #EAECC6, #2BC0E4);
background: linear-gradient(to left, #EAECC6, #2BC0E4);
}
input {
font-size: 18px;
background-color: #f7f7f7;
width: 100%;
padding: 0px;
box-sizing: border-box;
color: #2980b9;
border: 3px solid rgba(0,0,0,0);
}
input:focus {
background-color: #fff;
border: 3px solid #2980b9;
outline: none;
}
::placeholder {
color: #9e9e9e;
opacity: 1;
}
h1 {
background-color: #2980b9;
color: white;
margin: 0;
padding: 10px 20px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
#dropdown {
float: right;
}
.input_container{
height:30px;
transition: height 2s;
overflow:hidden;
}
.input_container.hide{
height:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>ToDo List</title>
</head>
<body>
<div id="container">
<h1>TO-DO LIST <button id = "dropdown">X</button> </h1>
<div class='input_container'>
<input type="text" placeholder="Add New Todo">
</div>
</div>
</body>
</html>
You can add condition
http://jsfiddle.net/pr2szjhu/1/
<input type="text" placeholder="Add New Todo" id="test">
JS
$("#dropdown").click(function(){
if ($('#test').is(':visible')){
$("#test").removeAttr('placeholder');
$("input[type='text']").slideToggle(1800);
}else{
$("input[type='text']").slideToggle(1800,function() {
$("#test").attr('placeholder','Add New Todo');
});
}
})
I have an interesting problem with my JQuery Popup. On the nav, you can click "Login" or "Sign Up" and a popup will appear. On the bottom of each popup is a link to the other process. So on the "Login" popup, on the very bottom it says: "Not a member yet? Sign Up." I click on Sign Up, it closes the login popup and opens the sign up popup. However, for the signup popup this process only happens if the login popup opens first. I don't know why this bug is occurring. Any help would be greatly appreciated?
/* font */
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
/* end of font */
/* clear settings */
a {
text-decoration: none;
}
body {
padding: 0;
margin: 0;
background: white;
}
/* end of clear settings */
/* nav */
#nav {
width: 1600px;
height: 50px;
background: #1F1F1F;
}
/* end of nav */
/* index.php */
#course_MainTitle {
font-family: 'Open Sans', sans-serif;
font-size: 24px;
position: relative;
left: 187px;
top: 20px;
}
#nav_logo {
font-family: 'Open Sans', sans-serif;
color: white;
font-size: 20px;
position: relative;
left: 188px;
top: 9px;
}
/* Search Engine */
#search_engine {
background: white;
color: #353535;
outline: none;
width: 500px;
font-size: 15px;
font-family: 'Open Sans', sans-serif;
padding: 7px 30px 7px 10px;
border: none;
border-radius: 3px;
position: relative;
top: 9px;
left: 210px;
}
#search_engine::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: #353535;
}
#search_engine:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #353535;
opacity: 1;
}
#search_engine::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #353535;
opacity: 1;
}
#search_engine:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #353535;
}
/* End of Search Engine */
/* Login & Sign Up */
#login_nav_div,
#signup_nav_div {
float: right;
font-family: 'Open Sans', sans-serif;
color: #353535;
font-size: 17px;
padding: 7px 30px 7px 10px;
border-radius: 3px;
margin-right: 10px;
position: relative;
left: -66px;
background: white;
top: 6px;
}
#login,
#signup {
position: relative;
top: -1px;
left: 9px;
}
/* End of Login & Sign Up */
/* end of index.php */
<!DOCTYPE html>
<html>
<head>
<title>Hacked Genius</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link rel='stylesheet' href='main.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src='main.js'></script>
<style>
/***********************\
Modal Module - Title CSS FTW
\***********************/
.Modal {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
visibility: hidden;
}
.Modal .content {
position: absolute;
left: 50%;
top: 30%;
width: 390px;
padding: 50px;
border-radius: 3px;
background: #fff;
transform: translate(-50%, -30%) scale(0);
z-index: 50;
}
.Modal .close {
position: absolute;
top: 8px;
right: 8px;
display: block;
width: 18px;
height: 18px;
padding: 2px;
line-height: 18px;
border-radius: 50%;
text-align: center;
cursor: pointer;
background: #C5C5C5;
color: #fff;
}
.Modal .close:before {
content: '\2715';
}
.Modal.is-visible {
visibility: visible;
background: rgba(0, 0, 0, 0.5);
transition: background .35s;
transition-delay: .1s;
z-index: 40;
}
.Modal.is-visible .content {
transform: translate(-50%, -30%) scale(1);
transition: transform .35s;
}
/* Model */
#login_title,
#signup_title {
font-family: 'Open Sans', sans-serif;
font-size: 23px;
letter-spacing: 1px;
position: relative;
top: -20px;
left: 110px;
}
#signup_title {
left: 80px;
}
#login_username,
#login_password,
#signup_username,
#signup_password,
#signup_email {
outline: none;
border: 1px solid #ccc;
color: #353535;
padding: 12px 10px 12px 10px;
border-radius: 3px;
font-size: 16px;
position: relative;
left: -30px;
width: 425px;
font-family: 'Open Sans', sans-serif;
}
#login_username:focus,
#login_password:focus,
#signup_username:focus,
#signup_password:focus,
#signup_email:focus {
border: 1px solid #4096ee;
}
#login_submit,
#signup_submit {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4096ee+0,4096ee+100;Blue+Flat+%232 */
background: #4096ee;
/* Old browsers */
background: -moz-linear-gradient(top, #4096ee 0%, #4096ee 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #4096ee 0%, #4096ee 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #4096ee 0%, #4096ee 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4096ee', endColorstr='#4096ee', GradientType=0);
/* IE6-9 */
color: white;
text-align: center;
padding: 11px 12px 11px 12px;
font-size: 22px;
width: 445px;
font-weight: normal;
position: relative;
top: 5px;
border-radius: 3px;
float: left;
font-family: 'Open Sans', sans-serif;
border: none;
outline: none;
cursor: pointer;
position: relative;
left: -28px;
font-weight: bold;
}
#login_submit:focus,
#login_submit:hover {
background: rgb(37, 141, 200);
}
/* End of Model */
/* Error Messages */
#login_username_error,
#login_password_error,
#login_failed {
font-family: 'Open Sans', sans-serif;
color: #DD4B39;
position: relative;
left: -30px;
top: -8px;
font-weight: bold;
display: none;
}
/* End of Error Messages */
/* $_SESSION["id"] set */
#user_avatar {
float: left;
width: 28px;
height: 28px;
border-radius: 50%;
position: relative;
top: -2px;
left: -10px;
}
#user_username {
color: white;
float: right;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
font-size: 16px;
position: relative;
top: -31px;
left: -220px;
text-transform: capitalize;
padding: 10px;
}
/* Drop Down */
.dropdown_content {
display: none;
position: absolute;
background: white;
color: #555;
border: 1px solid #DEDEDE;
border-top: none;
min-width: 220px;
/* left: 1250px;
top: 47px; */
border-radius: 3px;
z-index: 10;
font-family: 'Open Sans', sans-serif;
font-weight: normal;
top: 44px;
left: -125px;
}
.dropdown_content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
font-size: 16px;
}
.dropdown_content a:hover {
color: #4096EE;
}
.dropdown:hover .dropdown_content {
display: block;
}
#dropdown_caret {
color: white;
position: absolute;
top: -10px;
left: 135px;
}
#login_label {
font-family: 'Open Sans', sans-serif;
cursor: pointer;
padding: 5px 5px 5px 20px;
}
#login_remember,
#login_label {
position: relative;
top: 25px;
left: -30px;
}
#login_label {
left: -52px;
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Chrome/Safari/Opera */
-khtml-user-select: none;
/* Konqueror */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently
not supported by any browser */
}
a #forgot_password {
color: black;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
position: relative;
top: 25px;
left: 120px;
}
a #forgot_password:hover {
text-decoration: underline;
}
#login_line,
#signup_line {
background: #ccc;
height: 1px;
width: 490px;
position: relative;
top: 25px;
left: -50px;
}
#signup_line {
top: 78px;
}
#login_crossSection,
#signup_crossSection {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
color: black;
position: relative;
top: 37px;
left: 90px;
}
#login_crossSection a,
#signup_crossSection a {
color: #4096EE;
cursor: pointer;
}
#login_crossSection a:hover,
#signup_crossSection a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<!-- Login Popup -->
<div id="Popup" class="Modal">
<div class="content">
<span id='login_title'> Welcome Back </span>
<br>
<form action='' method='post'>
<span id='login_failed'></span>
<input id='login_username' placeholder='Username' name='login_username'>
<br>
<br>
<span id='login_username_error'></span>
<input id='login_password' placeholder='Password' name='login_password' type='password'>
<br>
<br>
<span id='login_password_error'></span>
<input type='button' value='Login' id='login_submit' onclick='checkErrors()'>
</form>
<!-- Remember Me -->
<input type='checkbox' name='login_remember' id='login_remember'>
<label for='login_remember' id='login_label'>Remember Me</label>
<!-- End of Remember Me -->
<!-- Forgot Password? -->
<a href='#'> <span id='forgot_password'> Forgot Password? </span>
</a>
<br>
<br>
<!-- End of Forgot Password -->
<!-- Cross Section -->
<div id='login_line'></div>
<span id='login_crossSection'> Not a member yet? <a href='#'> Sign Up </a> </span>
<!-- End of Cross Section -->
<span class="close"></div>
</div>
<!-- End of Login Popup -->
<!-- Sign Up Popup -->
<!-- Sign Up Popup -->
<div id="Popup2" class="Modal">
<div class="content">
<span id='signup_title'> Ready for awesome? </span>
<br>
<form action='' method='post'>
<span id='signup_failed'></span>
<input id='signup_username' placeholder='Username' name='signup_username'>
<br>
<br>
<span id='signup_username_error'></span>
<input id='signup_email' placeholder='Email' name='signup_email'>
<br>
<br>
<span id='signup_email_error'></span>
<input id='signup_password' placeholder='Password' name='signup_password' type='password'>
<br>
<br>
<span id='signup_password_error'></span>
<input type='button' value='Sign Up' id='signup_submit' onclick='checkErrors()'>
</form>
<!-- Cross Section -->
<div id='signup_line'></div>
<span id='signup_crossSection'> Already a member? <a href='#'> Login </a> </span>
<!-- End of Cross Section -->
<span class="close"></div>
</div>
<!-- End of Sign Up Popup -->
<!-- End of Sign Up Popup -->
<!-- nav -->
<div id='nav'>
<a href='index.php'> <span id='nav_logo'> Logo </span>
</a>
<!-- Search Engine -->
<input id='search_engine' placeholder='Search Courses'>
<!-- End of Search Engine -->
<!-- Sign Up -->
<a href='#Popup2' class='button'>
<div id='signup_nav_div'>
<span id='signup'> Sign Up </span>
</div>
</a>
<!-- End of Sign Up -->
<!-- Login -->
<a href='#Popup' class='button'>
<div id='login_nav_div'>
<span id='login'> Login </span>
</div>
</a>
<!-- End of Login -->
} ?>
</div>
<!-- end of nav -->
<script>
$.fn.expose = function(options) {
var $modal = $(this),
$trigger = $('a[href="' + this.selector + '"]');
$modal.on("expose:open", function() {
$modal.addClass("is-visible");
$modal.trigger("expose:opened");
});
$modal.on("expose:close", function() {
$modal.removeClass("is-visible");
$modal.trigger("expose:closed");
});
$trigger.on("click", function(e) {
e.preventDefault();
$modal.trigger("expose:open");
});
$modal.on("click", function(e) {
if ($(e.target).is($modal) || $(e.target).is('.close')) {
e.preventDefault();
$modal.trigger("expose:close");
}
});
return;
}
// Example Cancel Button
$("#login_nav_div").click(function() {
$("#Popup").expose();
});
$("#signup_nav_div").click(function() {
$("#Popup2").expose();
});
$("#login_crossSection a").click(function() {
$("#Popup").trigger('expose:close');
$("#Popup2").trigger('expose:open');
});
$("#signup_crossSection a").click(function() {
$("#Popup2").trigger('expose:close');
$("#Popup").trigger('expose:open');
});
$(".cancel").on("click", function(e) {
console.log('a')
e.preventDefault();
$(this).trigger("expose:close");
});
// Example Callbacks
/*
$("#Popup").on("expose:opened", function() {
alert("Modal Opened!");
});
$("#Popup").on("expose:closed", function() {
alert("Modal Closed!");
});
*/
function checkErrors() {
if ($("#login_remember").is(":checked")) {
var checked = 1;
} else {
checked = 0;
}
var login_username_val = $("#login_username").val().length;
var login_password_val = $("#login_password").val().length;
var login_username = $("#login_username").val();
var login_password = $("#login_password").val();
if (login_username_val < 1) {
$("#login_username_error").show().text("Username Required");
$("#login_failed").hide();
$("#login_username").css("border", "1px solid #DD4B39");
} else {
$("#login_username_error").hide();
$("#login_username").css("border", "");
}
if (login_password_val < 1) {
$("#login_password_error").show().text("Password Required");
$("#login_failed").hide();
$("#login_password").css("border", "1px solid #DD4B39");
} else {
$("#login_password_error").hide();
$("#login_password").css("border", "");
}
if (login_password_val > 0 && login_username_val > 0) {
$.post("check.php?checked=" + checked, {
username: login_username,
password: login_password
}, function(data) {
if (data == "Login Worked") {
location.reload();
}
if (data == "Login Failed") {
$("#login_failed").show().text("Login Failed");
}
});
}
}
</script>
</body>
MMhunter was not far... It's an initialisation thing.
I noticed that the "not appearing popup" was triggered... But didn't have the ".is-visible" class.
I played around a little... And found it:
$("#login_crossSection a").click(function() {
console.log("Clicked signup from login");
$("#Popup2").expose(); // Added
$("#Popup").trigger('expose:close');
$("#Popup2").trigger('expose:open');
});
$("#signup_crossSection a").click(function() {
console.log("Clicked login from signup");
$("#Popup").expose(); // Added
$("#Popup2").trigger('expose:close');
$("#Popup").trigger('expose:open');
});
Added these two lines... And it work.
It seems u need to call make both popups call expose() before trigger events on them.
In ur code ur popup modals are initialised (call expose()) only when user click on 'Login' or 'sign up' buttons.
One simple solution is just do the initialization when document is ready:
Just Change:
$("#login_nav_div").click(function() {
$("#Popup").expose();
});
$("#signup_nav_div").click(function() {
$("#Popup2").expose();
});
to:
$(document).ready(function(){
$("#Popup").expose();
$("#Popup2").expose();
})
I have a Login Popup that has a form in it. The problem is that the form is doing nothing on submit. Why is this? I've tried moving around the form elements, but nothing is working. Am I misunderstanding some part of input? The action is hi on purpose, so I would go to a completely different page. But nothing happens...
/***********************\
Modal Module - Title CSS FTW
\***********************/
body {
padding: 0;
margin: 0;
}
#nav_logo {
font-family: 'Open Sans', sans-serif;
color: white;
font-size: 20px;
position: relative;
left: 188px;
top: 9px;
}
#search_engine {
background: white;
color: #353535;
outline: none;
width: 500px;
font-size: 15px;
font-family: 'Open Sans', sans-serif;
padding: 7px 30px 7px 10px;
border: none;
border-radius: 3px;
position: relative;
top: 9px;
left: 210px;
}
#search_engine::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #353535;
}
#search_engine:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #353535;
opacity: 1;
}
#search_engine::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #353535;
opacity: 1;
}
#search_engine:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #353535;
}
#login_nav_div, #signup_nav_div {
float: right;
font-family: 'Open Sans', sans-serif;
color: #353535;
font-size: 17px;
padding: 7px 30px 7px 10px;
border-radius: 3px;
margin-right: 10px;
position: relative;
left: -66px;
background: white;
top: 6px;
}
#login, #signup {
position: relative;
top: -1px;
left: 9px;
}
#nav {
width: 1600px;
height: 50px;
background: #1F1F1F;
}
.Modal {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
visibility: hidden;
}
.Modal .content {
position: absolute;
left: 50%;
top: 30%;
width: 390px;
padding: 50px;
border-radius: 3px;
background: #fff;
transform: translate(-50%, -30%) scale(0);
z-index: 50;
}
.Modal .close {
position: absolute;
top: 8px;
right: 8px;
display: block;
width: 18px;
height: 18px;
padding: 2px;
line-height: 18px;
border-radius: 50%;
text-align: center;
cursor: pointer;
background: #C5C5C5;
color: #fff;
}
.Modal .close:before {
content: '\2715';
}
.Modal.is-visible {
visibility: visible;
background: rgba(0, 0, 0, 0.5);
transition: background .35s;
transition-delay: .1s;
z-index: 40;
}
.Modal.is-visible .content {
transform: translate(-50%, -30%) scale(1);
transition: transform .35s;
}
/* Model */
#login_title {
font-family: 'Open Sans', sans-serif;
font-size: 23px;
letter-spacing: 1px;
position: relative;
top: -20px;
left: 110px;
}
#login_username, #login_password {
outline: none;
border: 1px solid #ccc;
color: #353535;
padding: 12px 10px 12px 10px;
border-radius: 3px;
font-size: 16px;
position: relative;
left: -30px;
width: 425px;
}
#login_username:focus, #login_password:focus {
border: 1px solid #4096ee;
}
#login_submit {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4096ee+0,4096ee+100;Blue+Flat+%232 */
background: #4096ee; /* Old browsers */
background: -moz-linear-gradient(top, #4096ee 0%, #4096ee 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #4096ee 0%,#4096ee 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #4096ee 0%,#4096ee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4096ee', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
color: white;
text-align: center;
padding: 11px 12px 11px 12px;
font-size: 19px;
width: 445px;
font-weight: normal;
position: relative;
top: 5px;
border-radius: 3px;
float: left;
font-family: 'Open Sans', sans-serif;
border: none;
outline: none;
cursor: pointer;
position: relative;
left: -28px;
font-weight: bold;
}
#login_submit:focus, #login_submit:hover {
background: rgb(37,141,200);
}
/* End of Model */
<!DOCTYPE html>
<html>
<head>
<title> Hacked Genius </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link rel='stylesheet' href='main.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
</head>
<body>
<div id="Popup" class="Modal">
<div class="content">
<span id='login_title'> Welcome Back </span> <br>
<form action='hi' method='post'>
<input id='login_username' placeholder='Username' name='login_username'> <br> <br>
<input id='login_password' placeholder='Password' name='login_password' type='password'> <br> <br>
<input type='submit' value='Login' id='login_submit'>
</form>
<span class="close"></div>
</div>
</div>
<!-- nav -->
<div id='nav'>
<span id='nav_logo'> Logo </span>
<!-- Search Engine -->
<input id='search_engine' placeholder='Search Courses'>
<!-- End of Search Engine -->
<!-- Sign Up -->
<a href='#' class='model_link2'> <div id='signup_nav_div'>
<span id='signup'> Sign Up </span>
</div> </a>
<!-- End of Sign Up -->
<!-- Login -->
<a href="#Popup" class="button"> <div id='login_nav_div'>
<span id='login'> Login </span>
</div> </a>
<!-- End of Login -->
</div>
<!-- end of nav -->
<script>
$.fn.expose = function(options) {
var $modal = $(this),
$trigger = $("a[href=" + this.selector + "]");
$modal.on("expose:open", function() {
$modal.addClass("is-visible");
$modal.trigger("expose:opened");
});
$modal.on("expose:close", function() {
$modal.removeClass("is-visible");
$modal.trigger("expose:closed");
});
$trigger.on("click", function(e) {
e.preventDefault();
$modal.trigger("expose:open");
});
$modal.add($modal.find(".close")).on("click", function(e) {
e.preventDefault();
// if it isn't the background or close button, bail
if (e.target !== this)
return;
$modal.trigger("expose:close");
});
return;
}
$("#Popup").expose();
// Example Cancel Button
$(".cancel").on("click", function(e) {
e.preventDefault();
$(this).trigger("expose:close");
});
// Example Callbacks
/*
$("#Popup").on("expose:opened", function() {
alert("Modal Opened!");
});
$("#Popup").on("expose:closed", function() {
alert("Modal Closed!");
});
*/
</script>
</body>
EDIT #Arun P Johny
This is what my code now looks like:
<script>
$.fn.expose = function(options) {
var $modal = $(this),
$trigger = $('a[href="' + this.selector + '"]');
$modal.on("expose:open", function() {
$modal.addClass("is-visible");
$modal.trigger("expose:opened");
});
$modal.on("expose:close", function() {
$modal.removeClass("is-visible");
$modal.trigger("expose:closed");
});
$modal.on("click", function(e) {
if ($(e.target).is($modal) || $(e.target).is('.close')) {
e.preventDefault();
$modal.trigger("expose:close");
}
});
$modal.add($modal.find(".close")).on("click", function(e) {
e.preventDefault();
// if it isn't the background or close button, bail
if (e.target !== this)
return;
$modal.trigger("expose:close");
});
return;
}
$("#Popup").expose();
// Example Cancel Button
$(".cancel").on("click", function(e) {
e.preventDefault();
$(this).trigger("expose:close");
});
// Example Callbacks
/*
$("#Popup").on("expose:opened", function() {
alert("Modal Opened!");
});
$("#Popup").on("expose:closed", function() {
alert("Modal Closed!");
});
*/
</script>
Is this right?
There are 2 issues in your code
The selector used for $trigger is throwing an error - You have VM736 jquery.js:1502 Uncaught Error: Syntax error, unrecognized expression: a[href=#Popup] in your console
$trigger = $('a[href="' + this.selector + '"]')
Also the click handler for $model and close button is preventing the default action of the submit button click event
$modal.on("click", function(e) { //instead of $modal.add($modal.find(".close")).on("click", function(e) {
if ($(e.target).is($modal) || $(e.target).is('.close')) {
e.preventDefault();
$modal.trigger("expose:close");
}
});
Demo: Fiddle