Mohammad Halawi Mohammad Halawi - 4 months ago 18
Javascript Question

JQuery to do list project

This is a To Do List Project using html css and jquery

Every time i add something the list moves down , i don't know if it is because of css or jquery, you can see the code down below to check it, please help!!
It's always trying to be at the same level as the new list that is being added via JQuery.

Also when i did some validation so that when the user enters nothing it doesn't add it to the list, this worked for monday but all other days it didn't work even though i used the tag in script.js

http://mohammadhalawi.6te.net/To%20Do%20List/Index.html

I uploaded it online if you want to check it out

First

Second

Third

HTML

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>JQuery MealPlaner</title>
<link rel="stylesheet" type="text/css" href="Normalize.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="jquery-ui-1.11.4/jquery-ui.min.css" rel="stylesheet">

</head>

<body>
<div class="container" id="todoListWrapper">
<h1>The JQuery To Do List</h1>

<div id="todoList" class="clearfix">
<ul>
<li class="listTitle">Monday</li>
<li class="addItem">
<input type="text" class="inputItem" placeholder="add new item...">
</li>
</ul>
<ul >
<li class="listTitle">Tuesday</li>
<li class="addItem">
<input type="text" class="inputItem" placeholder="add new item...">
</li>
</ul>
<ul >
<li class="listTitle">Wednesday</li>
<li class="addItem">
<input type="text" class="inputItem" placeholder="add new item...">
</li>
</ul>
<ul >
<li class="listTitle">Thursday</li>
<li class="addItem">
<input type="text" class="inputItem" placeholder="add new item...">
</li>
</ul>
<ul>
<li class="listTitle">Friday</li>
<li class="addItem">
<input type="text" class="inputItem" placeholder="add new item...">
</li>
</ul>
<ul>
<li class="listTitle">Saturday</li>
<li class="addItem">
<input type="text" class="inputItem" placeholder="add new item...">
</li>
</ul>
<ul >
<li class="listTitle" >Sunday</li>
<li class="addItem">
<input type="text" placeholder="add new item...">
</li>
</ul>
</div>
</div>

<div id="trash">
Drop Here!
</div>

<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script>
window.jQuery || document.write('<script src="JQuery.js"><\/script>');
</script>
<script src="jquery-ui-1.11.4/jquery-ui.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</body>

</html>


CSS

body
{
background-color: darkgray;
}


#todoListWrapper
{
width: 960px;
text-align: center;
margin: 0 auto;
padding: 20px 10px 30px;
background: white;
}

.clearfix:after
{
content: "";
display: table;
clear: both;

}

#todoList ul
{
width: 133px;
margin: 0;
padding:0;
position: relative;
display: inline-block;
list-style: none;


}

#todoList li
{
background: none;
padding: 5px;
border: none;
margin: 0;
text-align: left;
font-size: 12px;
}

#todoList li:hover
{
background: #eee;
}

#todoList li.listTitle
{
background: #444;
color: white;
padding: 10px;
text-align: center;
font-size: 14px;



}

#todoList li.listTitle:hover,
#todoList li.listTitle:active
{
cursor: default;
transform: none;
}

#todoList .emptySpace
{
background: #fc3;
border: dashed 1px #777;
height: 10px;
width: 120px;
}

#todoList li.addItem
{
display: none;
position: absolute;
top: 0;
background: none;
padding: 0;
width: 111px;
margin: 5px 4px;



}

#todoList ul:hover li.addItem
{
display: block;
}

#todoList li.addItem input
{
width: 100%;
padding: 4px;


}

#todoList li.addItem :active
{
transform: none;

}

#trash
{
background: rgba(178,73,38,0.7);
height: 300px;
width: 400px;
position: relative;
top: 90px;
left: 35%;
line-height: 300px;
color: white;
font-weight: bold;
font-size: 18px;
text-align: center;
padding: 0;


}


SCRIPT

$(function()
{
$('#todoList ul').sortable({
items: "li:not('.listTitle, .addItem')",
connectWith:"ul",
dropOnEmpty:true,
placeholder: "emptySpace"
});
$('input').keydown(function(e){

if(e.keyCode == 13 && $('input').val()!="")
{
var item = $(this).val();
$(this).parent().parent().append('<li style="font-size:13px;cursor:pointer;display:block;">'+ item + '</li>');
$(this).val("");


}



});

$('#trash').droppable({
drop: function(event, ui)
{
ui.draggable.remove();
}

});
});

Answer

Do the following: remove display inline-block , alter the margin and add float:left;

#todoList ul {
 //display: inline-block;
 float:left;
 margin: 0 2px;
}

for the second question do the following:

if(e.keyCode == 13 && $(this).val()!="")
Comments