In this exercise, you’ll develop the employee list application. The application

ID: 3577739 • Letter: I

Question

In this exercise, you’ll develop the employee list application. The application works like FAQs application in chapter 5. When the user click on an employee name in the list, additional information is displayed for the employee. This application also provides for adding employees to the list.

index.html

============

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
<title>on method</title>
   <link rel="stylesheet" href="main.css">
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="employees.js"></script>
</head>

<body>
   <header><h2>CS175 Corp Employees</h2></header>
   <aside>
       <h2>Add an employee</h2>
       <label for="name">Name:</label>
       <input type="text" id="name" name="name"><br>
       <label for="position">Position:</label>
       <input type="text" id="position" name="position"><br>
       <label for="hireDate">Hire Date:</label>
       <input type="text" id="hireDate" name="hireDate"><br>
       <label for="description">Description:</label>
       <textarea id="description" name="description"></textarea><br>
       <label> </label>
       <input type="button" id="add" name="add" value="Add Employee">
   </aside>
   <main id="accordion">
       <h1>Employee list</h1>
       <h2><a href="#">Wilbur Wilkes</a></h2>
       <div>
    <h3>Founder and CEO</h3>
    <p> While Wilbur is the founder and CEO of CS175 Corp, he is primarily known
        for being the pioneer and world leader of creating Cloud Solutions. Wilbur has
        led the commercialization of Cloud Solutions technology and its success as the
        world's fastest-growing, most advanced technologies in its respective
        industry.</p>
       </div>
       <h2><a href="#">Agnes Agnew</a></h2>
       <div>
    <h3>VP of Accounting</h3>
<p> With over 14 years of public accounting and business advisory service
   experience in the Tongas, Ecuador, Canada, Botswana and the US, Agnes is the
   most seasoned and diversed member of the CS175 Corp. team.</p>
       </div>
       <h2><a href="#">Mike Masters</a></h2>
       <div>
    <h3>VP of Marketing</h3>
    <p> Mike serves as the Vice President of Sales and Marketing for CS175 Corp. In
        this role, Mike oversees CS175 Corp's marketing and corporate communications
        efforts worldwide.</p>
       </div>
   </main>
   <footer>© 2016 CS175 Corp.</footer>
</body>
</html>

employees.js

===========

$(document).ready(function() {
   $("#accordion").on("click", "h2", function() {
       $(this).toggleClass("minus");
       if ($(this).attr("class") != "minus") {
          $(this).next().hide();
      }
      else {
   $(this).next().show();
      }
}); // end click

$("#add").click(function() {
   var html = "";
   html += "<h2><a href="#">" + $("#name").val() + "</a></h2>";
   html += "<div><h3>" + $("#position").val() + "</h3>";
   html += "<p>" + $("#description").val() + "</p></div>";
   $("#accordion").append(html);
   $("#name").val("");
   $("#position").val("");
   $("#description").val("");
}); // end click
}); // end ready

main.css

==========

* {
   margin: 0;
   padding: 0;
}
body {
   font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 87.5%;
   width: 960px;
   margin: 0 auto;
   padding: 15px 0;
   border: 3px solid blue;
}
h1 {
   font-size: 170%;
}
h2 {
   font-size: 140%;
   padding: .25em 0 .25em 0;
}
header h2 {
   text-align: center;
   color: blue;
   padding-bottom: 1em;
   border-bottom: 3px solid blue;
}
aside h2 {
   margin-bottom: .5em;
}
main h2 {
   padding-left: 25px;
   background: url(images/plus.png) no-repeat left center;
}
main h2.minus {
   background: url(images/minus.png) no-repeat left center;
}
h3 {
   font-size: 120%;
   padding-left: 25px;
   padding-bottom: .25em;
}
a {
color: black;
text-decoration: none;
}
a:focus, a:hover {
   color: blue;
}
div {
   display: none;
}
p {
   padding-bottom: .25em;
   padding-left: 25px;
}
aside {
   float: left;
   width: 350px;
   padding: 25px 0 25px 25px;
}
main {
   float: left;
   width: 535px;
   padding: 25px;
}
label {
   float: left;
   width: 6em;
   text-align: right;
}
input, textarea {
   margin-left: 1em;
   margin-bottom: .5em;
}
#name, #hireDate, #position, #description {
       width: 225px;
}
textarea {
   height: 100px;
}
footer {
   clear: both;
   font-size: 80%;
   text-align: right;
   padding-top: 1.5em;
   padding-right: 25px;
   border-top: 3px solid blue;
}

Explanation / Answer

what you want above two condition are working properly.
But i am changing the h2(employee name) store in list li and div was append to accordion id
if you click on list(employee name) the additional information is displayed with in a seperate div
Adding employee to list
I am adding bootstrap cdn links for desiginig

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>on method</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$("#accordion").on("click", ".list-group-item", function () {
if (!$(this).hasClass("minus")) {
$("#accordion .list-group-item").each(function () {
$('main').find('div').each(function () {
$(this).hide();
})
$(this).removeClass("minus");
});
}

$(this).toggleClass("minus");
if (!$(this).hasClass("minus")) {
var curdiv = $(this).attr('data-list').trim();
$('main').find('div').each(function () {
if ($(this).attr('data-list').trim() == curdiv) {
$(this).hide();
}
})
}
else {
var curdiv = $(this).attr('data-list').trim();
$('main').find('div').each(function () {
if ($(this).attr('data-list').trim() == curdiv) {
$(this).removeClass('hide');
$(this).show();
}
})
}
}); // end click

$("#add").click(function () {
var list = "";
var div = "";

list += ' <li class="list-group-item" data-list="list' + (parseInt($('.list-group-item').length)+1) + '">' + $("#name").val() + '</li>';
div += "<div class='hide div3' data-list='list" + (parseInt($('.list-group-item').length)+1) + "'><h3>" + $("#position").val() + "</h3>";
div += "<p>" + $("#description").val() + "</p></div>";
$(".list-group").append(list);
$("#accordion").append(div);
$("#name").val("");
$('#hireDate').val("");
$("#position").val("");
$("#description").val("");
}); // end click
}); // end ready
</script>
<style>
* {
margin: 0;
padding: 0;
}

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
width: 960px;
margin: 0 auto;
padding: 15px 0;
border: 3px solid blue;
}

h1 {
font-size: 170%;
}

h2 {
font-size: 140%;
padding: .25em 0 .25em 0;
}
h3 {
color:lightblue
}
header h2 {
text-align: center;
color: blue;
padding-bottom: 1em;
border-bottom: 3px solid blue;
}

aside h2 {
margin-bottom: .5em;
}

main h2 {
padding-left: 25px;
background: url(images/plus.png) no-repeat left center;
}

main h2.minus {
background: url(images/minus.png) no-repeat left center;
}

h3 {
font-size: 120%;
padding-left: 25px;
padding-bottom: .25em;
}

a {
color: black;
text-decoration: none;
}

a:focus, a:hover {
color: blue;
}

div {
border:1px solid #ccc;
}

p {
padding-bottom: .25em;
padding-left: 25px;
}

aside {
float: left;
width: 350px;
padding: 25px 0 25px 25px;
}

main {
float: left;
width: 535px;
padding: 25px;
}

label {
float: left;
width: 6em;
text-align: right;
}

input, textarea {
margin-left: 1em;
margin-bottom: .5em;
}

#name, #hireDate, #position, #description {
width: 225px;
}

textarea {
height: 100px;
}

footer {
clear: both;
font-size: 80%;
text-align: right;
padding-top: 1.5em;
padding-right: 25px;
border-top: 3px solid blue;
}

.hide {
display: none;
}

.show {
display: block;
}
</style>
</head>
<body>
<header>
<h2>CS175 Corp Employees</h2>
</header>
<aside>
<h2>Add an employee</h2>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="position">Position:</label>
<input type="text" id="position" name="position"><br>
<label for="hireDate">Hire Date:</label>
<input type="text" id="hireDate" name="hireDate"><br>
<label for="description">Description:</label>
<textarea id="description" name="description"></textarea><br>
<label> </label>
<input type="button" id="add" name="add" value="Add Employee">
</aside>
<main id="accordion">
<h1>Employee list</h1>
<ul class="list-group">
<li class="list-group-item" data-list="list1">Wilbur Wilkes</li>
<li class="list-group-item" data-list="list2">Founder and CEO</li>
<li class="list-group-item" data-list="list3">Agnes Agnew</li>
</ul>

<div class="hide div1" data-list="list1">
<h3>Deva</h3>
<p> While Wilbur is the founder and CEO of CS175 Corp, he is primarily known
for being the pioneer and world leader of creating Cloud Solutions. Wilbur has
led the commercialization of Cloud Solutions technology and its success as the
world's fastest-growing, most advanced technologies in its respective
industry.</p>
</div>
<div class="hide div2" data-list="list2">
<h3>VP of Accounting</h3>
<p> With over 14 years of public accounting and business advisory service
experience in the Tongas, Ecuador, Canada, Botswana and the US, Agnes is the
most seasoned and diversed member of the CS175 Corp. team.</p>
</div>
<div class="hide div3" data-list="list3">
<h3>VP of Marketing</h3>
<p> Mike serves as the Vice President of Sales and Marketing for CS175 Corp. In
this role, Mike oversees CS175 Corp's marketing and corporate communications
efforts worldwide.</p>
</div>
</main>
<footer>© 2016 CS175 Corp.</footer>
</body>
</html>

Navigate

In this exercise, you’ll develop an application that displays the first paragrap

In this exercise, you’ll develop the employee list application. The application

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

In this exercise, you’ll develop the employee list application. The application

Question

Explanation / Answer

Related Questions

Navigate