You are given a stub code including HTML (with the 4 added buttons for Clear, Sort, Save, and Load), CSS (same as before

Post by **answerhappygod** » Mon May 09, 2022 6:06 am

You are given a stub code including HTML (with the 4 added
buttons for Clear, Sort, Save, and Load), CSS (same as before), and
JavaScript to create the following Address Book web application
that allows a user to additionally:
Clear the Address Books contact list
Sort the Address Books contact list by name in descending
alphabetical order, namely in the order of "z", "y", "x", ...
"a".
Save the Address Book's contact list to HTML Web Storage
(localStorage).
Load the Address Book's contact list from localStorage to the table
display area.
DESCRIPTION
You are given the following HTML and CSS to start. Please
DO NOT modify HTML & CSS file.
HTML
<!DOCTYPE html>
<body>
<form action="#" onsubmit="return
formSubmitted();">
<fieldset>

<legend>Personal Info</legend>

<label>

Name :

<input type="text" id="name"
required>

</label>

<label>

Email :

<input type="email" id="email"
required>

</label>

<br>

<button>Add new Contact</button>
</fieldset>
</form>
<h2>List of contacts</h2>
<div id="contacts"></div>
<p><button
onclick="emptyList();">Empty</button>
</p>
</body>
</html>
CSS
table {
margin-top: 20px;
}
table, tr, td {
border: 1px solid;
}
fieldset {
padding:10px;
border-radius:10px;
}
label {
display:inline-block;
margin-bottom:10px;
}
input {
float:right;
margin-right:70px;
width:150px;
}
input:invalid {
background-color:pink;
}
input:valid {
background-color:lightgreen;
}
-Feature #1
Add New Contact
The ability to add both entered Name and Email to a contact list
programmatically, and display them in the List of Contacts on
page.
When either Name or Email is invalid (including being empty) in the
form, the Add New Contact feature cannot proceed.
When both Name and Email are present and valid in the form, the Add
New Contact feature inserts and displays the contact info in the
table below.
-Feature #2
Empty Contact
This removes any existing contacts from the contact list and
display "No contacts to display" message in the table display
area.
-Feature #3
Sort Contacts
This is done by the "Sort" button.
The ability to sort the contact list by name in its descending
alphabetical order and displays the result in the table display
area.
-Feature #4
Save Contacts
This is done by the "Save" button.
The ability to persist the entire contact list in Address Book
Manager to HTML5's Web Storage (localStorage) in your browser.
This storage takes a String object.
-Feature #5
Load Contacts
This is done by the "Load" button.
The ability to retrieve the entire contact list from the HTML's Web
Storage (localStorage) and display the retrieved list in the table
display area.
Any unsaved list will be replaced by the newly retrieved
list.
If there is no content to retrieve from the localStorage, this
feature will not refresh the table display area including the "No
contacts to display!" message.
Your JavaScript stub code is as follows. You will fill in the
indicated "YOUR CODE HERE" implementations that work the attached
HTML and CSS to produce outcomes
Javascript
window.onload = init;
// The contact manager as a global variable
let abm;
/**
* Function Name: init()
* This method creates and intializes a new instance of
AddressBookManager
*/
function init() {
// create an instance of the contact manager
abm = new AddressBookManager();
}
/**
* Class Name: Contact
* This class takes both name and email to instantiate
itself
*/
class Contact {
constructor(name, email) {
this.name = name;
this.email = email;
}
}
//
====================================================================

// !!! DO NOT MODIFY ABOVE
THIS LINE!!!
//
====================================================================
/**
* Function Name: formSubmitted()
* This function takes both name and email from the HTML to
create
* an instance of Contact object for storage in the
AddressBookManager
* referenced by the global variable, abm.
* This function returns a boolean to avoid form submission
via HTTP
*/
function formSubmitted() {
// YOUR CODE HERE
}
/**
* Function Name: emptyList()
* This function empties the contact list in
AddressBookManager
* and displays the default "No contacts to display!"
message.
*/
function emptyList() {
// YOUR CODE HERE
}
/**
* Function Name: sortList()
* This function sorts the contact list by name in
descending
* alphabetical order, by invoking AddressBookManager's sort()
and
* displaying the result in the table display area.
*/
function sortList() {
// YOUR CODE HERE
}
/**
* Function Name: saveList()
* This function saves the contact list in HTML Web
Storage's
* localStorage. You will invoke AddressBookManager's save()
to
* accomplish this.
*/
function saveList() {
// YOUR CODE HERE
}
/**
* Function Name: loadList()
* This function loads the contact list from HTML Web
Storage's
* localStorage. You will invoke AddressBookManager's load()
and
* display the loaded list into the table display area.
*/
function loadList() {
// YOUR CODE HERE
}
/**
* Class Name: AddressBookManager
* This class initializes an empty contact list. This class
has
* THREE (3) methods:
* 1. empty(): empty contact list.
* 2. add(contact): add a named contact to
list.
* 3. displayContactTable(htmlId): displays the
contact list in a
* table format; if there is no contact
in the list, print
* "No contacts to display!" in
HTML.
*/
class AddressBookManager {
constructor() {
this.listOfContacts = [];
}
/**
* Method Name: empty()
* This method empties the contact list.
*/
empty() {
// YOUR CODE HERE
}
/**
* Method Name: add(contact)
* This method adds the named contact to the contact
list.
*/
add(contact) {
// YOUR CODE HERE
}
/**
* Method Name: displayContactTable(htmlId)
* This method clears the prior table content and
displays
* the new table content from the non-empty contact
list in
* a correctly formatted HTML table. If the contact
list is
* empty, this method prints a "No contacts to
display!"
* message in HTML as depicted in the demo.
*/
displayContactTable(htmlId) {
// YOUR CODE HERE
}
/**
* Method name: sort()
* This method sorts the contact list elements by
descending alphabetical
* order. For example:
* Original list: "Joe", "Kay", "Zoe"
* Sorted list in descending order: "Zoe", "Kay",
"Joe"
* You may want to check:
https://www.w3schools.com/jsref/jsref_sort.asp
*/
sort() {
// YOUR CODE HERE
}
/**
* Method name: load()
* This method loads the contact list string from HTML
Web Storage's
* localStorge back.
*/
load() {
// YOUR CODE HERE
}
/**
* Method name: save()
* This method saves the contact list into a JSON
string in
* HTML Web Storage's localStorage.
*/
save() {
// YOUR CODE HERE
}
}