I\'m on the last step of a JavaScript/jQuery problem and I\'m stuck. I have the
ID: 3709703 • Letter: I
Question
I'm on the last step of a JavaScript/jQuery problem and I'm stuck. I have the prompt method added (I think) but not sure how to go about the if/else statement that must be needed. Here is the step description:
Add jQuery code that responds to the click event of the Add Task button for the first employee. When this button is clicked, use the prompt method to get a description of the task. If a description is entered and the OK button is clicked, add the task to the of the other tasks for the employee. In addition, add code that makes the task you just added draggable.
HTML/jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Task Management</title>
<!-- jQuery UI style sheet reference. Smoothness is the theme used. -->
<link href="css/smoothness/jquery-ui-1.8.23.custom.css" type="text/css" rel="stylesheet">
<!-- Normal style sheet used for layout and general formatting. -->
<link href="styles.css" type="text/css" rel="stylesheet">
<!-- HTML5 shim/shiv for HTML5 section element backward compatibility. -->
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<!-- jQuery library reference. Latest is always referenced from jQuery's CDN. -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<!-- jQuery UI JavaScript library reference. -->
<script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>
<script>
$(document).ready(function() {
$(".ui-state-default").draggable ({
cursor: "move",
grid: [25,34]});
$("#left, #right").droppable();
$("#add1").click (function(){
prompt("Enter A Description")
});
});
</script>
</head>
<body>
<section>
<h2>Task List by Employee</h2>
<div id="left">
<h3>Kelly</h3>
<div id="employee1">
<div class="ui-state-default "><p>Manage office personnel</p></div>
<div class="ui-state-default "><p>Process payables</p></div>
<div class="ui-state-default e"><p>Process payroll</p></div>
</div>
<input type="button" id="add1" value="Add Task">
</div>
<div id="right">
<h3>Estelle</h3>
<div id="employee2" class="connectedSortable">
<div class="ui-state-default"><p>Enter orders</p></div>
<div class="ui-state-default"><p>Process invoices</p></div>
</div>
<input type="button" id="add2" value="Add Task">
</div>
</section>
</body>
</html>
CSS
article, aside, figure, footer, header, nav, section {
display: block;
}
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 87.5%;
width: 550px;
margin: 0 auto;
}
section {
padding: 15px 25px;
}
h2 {
font-size: 125%;
margin-bottom: .5em;
}
h3 {
font-size: 110%;
margin-bottom: .5em;
}
#employee1, #employee2 {
list-style-type: none;
width: 223px;
height: 250px;
border: 1px solid blue;
}
#left {
float: left;
}
#right {
float: right;
}
p {
margin-bottom: 5px;
padding: 5px;
}
.ui-selected {
color: blue;
}
input {
margin-top: 10px;
}
Explanation / Answer
If you have any doubts, please give me comment...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Task Management</title>
<!-- jQuery UI style sheet reference. Smoothness is the theme used. -->
<link href="css/smoothness/jquery-ui-1.8.23.custom.css" type="text/css" rel="stylesheet">
<style type="text/css">
article,
aside,
figure,
footer,
header,
nav,
section {
display: block;
}
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 87.5%;
width: 550px;
margin: 0 auto;
}
section {
padding: 15px 25px;
}
h2 {
font-size: 125%;
margin-bottom: .5em;
}
h3 {
font-size: 110%;
margin-bottom: .5em;
}
#employee1,
#employee2 {
list-style-type: none;
width: 223px;
height: 250px;
border: 1px solid blue;
}
#left {
float: left;
}
#right {
float: right;
}
p {
margin-bottom: 5px;
padding: 5px;
}
.ui-selected {
color: blue;
}
input {
margin-top: 10px;
}
</style>
<!-- Normal style sheet used for layout and general formatting. -->
<link href="styles.css" type="text/css" rel="stylesheet">
<!-- HTML5 shim/shiv for HTML5 section element backward compatibility. -->
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<!-- jQuery library reference. Latest is always referenced from jQuery's CDN. -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<!-- jQuery UI JavaScript library reference. -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script>
$(document).ready(function () {
$(".ui-state-default").draggable({
cursor: "move",
grid: [25, 34]
});
$("#left, #right").droppable();
$("#add1").click(function () {
var desc = prompt("Enter A Description: ");
$("#employee1").append('<div class="ui-state-default ui-draggable"><p>' + desc + '</p>');
});
$("#add2").click(function () {
var desc = prompt("Enter A Description: ");
$("#employee2").append('<div class="ui-state-default ui-draggable"><p>' + desc + '</p>');
});
});
</script>
</head>
<body>
<section>
<h2>Task List by Employee</h2>
<div id="left">
<h3>Kelly</h3>
<div id="employee1">
<div class="ui-state-default ">
<p>Manage office personnel</p>
</div>
<div class="ui-state-default ">
<p>Process payables</p>
</div>
<div class="ui-state-default">
<p>Process payroll</p>
</div>
</div>
<input type="button" id="add1" value="Add Task">
</div>
<div id="right">
<h3>Estelle</h3>
<div id="employee2" class="connectedSortable">
<div class="ui-state-default">
<p>Enter orders</p>
</div>
<div class="ui-state-default">
<p>Process invoices</p>
</div>
</div>
<input type="button" id="add2" value="Add Task">
</div>
</section>
</body>
</html>