Skip to content

Latest commit

 

History

History
30 lines (23 loc) · 1.53 KB

README.md

File metadata and controls

30 lines (23 loc) · 1.53 KB
Raw

City Filter for Contacts | Vanilla JavaScript DOM Manipulation

Live Site

This is an assignment for Thinkful's Software Engineering bootcamp (starter project).

What it Does

  • Filter By City list is dynamically generated from the given contacts list
  • Selecting " -- Select a city --" will render all contact cards to the DOM
  • Selecting any other city will filter the contact cards
  • Deleting a contact card will delete that contact from contacts and remove the card from the DOM (you can reset by reloading the page).

Additional Features

I added the following features and improvements after the assignment was submitted and accepted (test/solution.test.js may no longer show all passing tests because of these updates).

  • handled edge case of capitalization errors in a contact's listed city
    • ("South Vale" and "South vale" assumed to be same city - now merged in Filter By City dropdown)
  • filtered view now persists after a contact is deleted instead of refreshing to all contacts.
  • "0 results" feedback when the last contact of a selected city is deleted
  • Cities that have zero contacts to display can still be selected, "0 results" will display.
  • Added a custom favicon

Skills Used

The focus of the assignment was DOM manipulation done purely through vanilla js - no jquery or other additional libraries.

  • selecting elements
  • updating the DOM
  • event listeners
  • form submissions
  • render pattern