https://github.com/thinkful-ed/jsdom-assignment-solution
https://github.com/thinkful-ed/jsdom-assignment-solution
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/thinkful-ed/jsdom-assignment-solution
- Owner: Thinkful-Ed
- Created: 2021-04-01T15:55:15.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-04-05T19:34:41.000Z (about 5 years ago)
- Last Synced: 2023-05-09T21:10:35.539Z (about 3 years ago)
- Language: JavaScript
- Size: 15.6 KB
- Stars: 1
- Watchers: 9
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
---
# JSDOM: Assignment
You are building a contact book. The list of contacts and relevant details are stored in an array named `contacts`. You wish to create a few helper functions to display the contacts, filter by city and make a few modifications.
## Existing Files
| file path | description |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `index.html` | It contains placeholder elements for the list of contacts to be rendered. It also contains a form for filtering the list of contacts. _You should not edit the HTML file in any way_. |
| `index.css` | A few basic styles. This challenge does not focus on style. You may ignore this file. |
| `index.js` | You need to write your JavaScript code in this file. This is the only file that you need to edit. You will find the `contacts` array declared in this file. |
| `test/solution.test.js` | The tests your code will run against. You do not need to edit this file. |
## Tasks
The contacts array contain contacts in the following format:
```javascript
{
id: 39,
name: "Arwen Undómiel",
email: "arwen@imladris.com",
picture: "https://via.placeholder.com/150/FE0F0B/FFFFFF?Text=AU",
address: {
street: "Main Street",
suite: "Suite 17",
city: "Imladris",
zipcode: "90566-7771",
geo: {
lat: "-43.9509",
lng: "-34.4618",
},
},
phone: "010-692-6593 x09125",
website: "arwen.com",
company: {
name: "Eriador Services",
catchPhrase: "Proactive didactic contingency",
bs: "synergize scalable supply-chains",
},
},
```
Write the following functions in the `index.js` file.
#### `renderContact()`
This function accepts a contact object in the format described above.
Create and return the HTML to render a single contact. The HTML for a single contact should look like this:
```html
X
Arwen Undómiel
arwen@imladris.com
010-692-6593 x09125
arwen.com
Suite 17
Main Street
Imladris, 90566-7771
Works at
Eriador Services
```
_The tests are looking for these specific elements and class names to be used. Be sure to check your spelling properly._
#### `loadCities()`
Accepts an array of contacts.
The load cities function finds all unique cities in the contact list and inserts a set of options in the select element with the id `filterOptions`. The default option should remain in place.
After populating the `filterOptions` select it should look like this:
```html
-- Select a city --
New York
Kinsasha
```
#### `render()`
This method accepts an array of contacts.
Render the array of contacts and insert them into the DOM.
Additionally, call the `loadCities()` function to ensure that the list of cities in the filter is updated.
The contacts should be rendered in the `section` with id "contacts". If there are no contacts in the list simply leave the section empty.
#### `filterByCity()`
Accepts a string representing the name of a city. Filter the list of contacts by contacts that live in the given city. Create a new array for the filtered contact. DO NOT MODIFY THE ORIGINAL CONTACTS ARRAY. Return the filtered contacts.
#### `filterHandler()`
This function attaches a change event listener to the `filterOptions` select. On change get the value of the select that was selected. If the value is "0" then call `render()` with the full list of contacts. Otherwise, call `filterByCity()` with the city that the user selected, then call render with the filtered list produced.
#### `deleteContact()`
Accepts an id representing the id of a contact in the contact list. Remove the contact from the contact list with the given id. If the id does not exist then no contacts are deleted.
#### `deleteButtonHandler()`
Add a `click` event handler to the `deleteBtn` elements.
When clicked, get the id of the card that was clicked from the
corresponding `data-id` then call `deleteContact()` and re-render
the list.
#### `main()`
This is the starting point of the code. Call the necessary functions to add event listeners then render the contacts.