1. In the of index.html add the style rules contained in Annex 2 of this document. 2. In the of index.html add the content from Annex 3 of this document below the paragraph element from PART 1. 3. Replace the items in the unordered list with at least 50 items of your choice 4. Add functionality to the Javascript script to ensure that the list of items is not visible when the page is loaded 5. Add functionality to the Javascript script to ensure that the list of items is not visible when no text is present in the search bar Annex 2: * { box-sizing: border-box; } #myInput { background-image: url('/css/searchicon.png'); background-position: 10px 12px; background-repeat: no-repeat; width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; } #myUL { list-style-type: none; padding: 0; margin: 0; } #myUL li a { border: 1px solid #ddd; margin-top: -1px; /* Prevent double borders */ background-color: #f6f6f6; padding: 12px; text-decoration: none; font-size: 18px; color: black; display: block } #myUL li a:hover:not(.header) { background-color: #eee; } Annex 3: My Phonebook Adele Agnes Billy Bob Calvin Christina Cindy
1. In the <head> of index.html add the style rules contained in Annex 2 of this document.
2. In the <body> of index.html add the content from Annex 3 of this document below the paragraph element
from PART 1.
3. Replace the items in the unordered list with at least 50 items of your choice
4. Add functionality to the Javascript script to ensure that the list of items is not visible when the page is
loaded
5. Add functionality to the Javascript script to ensure that the list of items is not visible when no text is
present in the search bar
Annex 2:
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
Annex 3:
<h2>My Phonebook</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a
name">
<ul id="myUL">
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>
<li><a href="#">Calvin</a></li>
<li><a href="#">Christina</a></li>
<li><a href="#">Cindy</a></li>
</ul>
<script>
function myFunction() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
Step by step
Solved in 2 steps with 2 images
