Untitled

mail@pastecode.io avatar
unknown
plain_text
2 years ago
11 kB
9
Indexable
Never
////////////////////////////
// DO NOT EDIT THIS ARRAY //
////////////////////////////
/*
 The contacts array contain the list of contacts for the contact book.
*/
window.contacts = [
  {
    id: 1,
    name: "Leanne Graham",
    username: "Bret",
    email: "Sincere@april.biz",
    picture: "https://via.placeholder.com/150/008600/FFFFFF?text=LG",
    address: {
      street: "Kulas Light",
      suite: "Apt. 556",
      city: "Green Vale",
      zipcode: "92998-3874",
      geo: {
        lat: "-37.3159",
        lng: "81.1496",
      },
    },
    phone: "1-770-736-8031 x56442",
    website: "hildegard.org",
    company: {
      name: "Romaguera-Crona",
      catchPhrase: "Multi-layered client-server neural-net",
      bs: "harness real-time e-markets",
    },
  },
  {
    id: 2,
    name: "Ervin Howell",
    email: "Shanna@melissa.tv",
    picture: "https://via.placeholder.com/150/0000FF/FFFFFF?text=EH",
    address: {
      street: "Victor Plains",
      suite: "Suite 879",
      city: "Blue Vale",
      zipcode: "90566-7771",
      geo: {
        lat: "-43.9509",
        lng: "-34.4618",
      },
    },
    phone: "010-692-6593 x09125",
    website: "anastasia.net",
    company: {
      name: "Deckow-Crist",
      catchPhrase: "Proactive didactic contingency",
      bs: "synergize scalable supply-chains",
    },
  },
  {
    id: 3,
    name: "Clementine Bauch",
    email: "Nathan@yesenia.net",
    picture: "https://via.placeholder.com/150/34F500/FFFFFF?text=CB",
    address: {
      street: "Douglas Extension",
      suite: "Suite 847",
      city: "Green Vale",
      zipcode: "59590-4157",
      geo: {
        lat: "-68.6102",
        lng: "-47.0653",
      },
    },
    phone: "1-463-123-4447",
    website: "ramiro.info",
    company: {
      name: "Romaguera-Jacobson",
      catchPhrase: "Face to face bifurcated interface",
      bs: "e-enable strategic applications",
    },
  },
  {
    id: 4,
    name: "Patricia Lebsack",
    email: "Julianne.OConner@kory.org",
    picture: "https://via.placeholder.com/150/008600/FFFFFF?text=PL",
    address: {
      street: "Hoeger Mall",
      suite: "Apt. 692",
      city: "South Vale",
      zipcode: "53919-4257",
      geo: {
        lat: "29.4572",
        lng: "-164.2990",
      },
    },
    phone: "493-170-9623 x156",
    website: "kale.biz",
    company: {
      name: "Robel-Corkery",
      catchPhrase: "Multi-tiered zero tolerance productivity",
      bs: "transition cutting-edge web services",
    },
  },
  {
    id: 5,
    name: "Chelsey Dietrich",
    email: "Lucio_Hettinger@annie.ca",
    picture: "https://via.placeholder.com/150/FF00FF/FFFFFF?text=CD",
    address: {
      street: "Skiles Walks",
      suite: "Suite 351",
      city: "North Vale",
      zipcode: "33263",
      geo: {
        lat: "-31.8129",
        lng: "62.5342",
      },
    },
    phone: "(254)954-1289",
    website: "demarco.info",
    company: {
      name: "Keebler LLC",
      catchPhrase: "User-centric fault-tolerant solution",
      bs: "revolutionize end-to-end systems",
    },
  },
  {
    id: 6,
    name: "Mrs. Dennis Schulist",
    email: "Karley_Dach@jasper.info",
    picture: "https://via.placeholder.com/150/000086/FFFFFF?text=DS",
    address: {
      street: "Norberto Crossing",
      suite: "Apt. 950",
      city: "South Vale",
      zipcode: "23505-1337",
      geo: {
        lat: "-71.4197",
        lng: "71.7478",
      },
    },
    phone: "1-477-935-8478 x6430",
    website: "ola.org",
    company: {
      name: "Considine-Lockman",
      catchPhrase: "Synchronised bottom-line interface",
      bs: "e-enable innovative applications",
    },
  },
  {
    id: 7,
    name: "Kurtis Weissnat",
    email: "Telly.Hoeger@billy.biz",
    picture: "https://via.placeholder.com/150/860000/FFFFFF?text=KW",
    address: {
      street: "Rex Trail",
      suite: "Suite 280",
      city: "Blue Vale",
      zipcode: "58804-1099",
      geo: {
        lat: "24.8918",
        lng: "21.8984",
      },
    },
    phone: "210.067.6132",
    website: "elvis.io",
    company: {
      name: "Johns Group",
      catchPhrase: "Configurable multimedia task-force",
      bs: "generate enterprise e-tailers",
    },
  },
  {
    id: 8,
    name: "Nicholas Runolfsdottir V",
    email: "Sherwood@rosamond.me",
    picture: "https://via.placeholder.com/150/FF0000/FFFFFF?text=NR",
    address: {
      street: "Ellsworth Summit",
      suite: "Suite 729",
      city: "Green Vale",
      zipcode: "45169",
      geo: {
        lat: "-14.3990",
        lng: "-120.7677",
      },
    },
    phone: "586.493.6943 x140",
    website: "jacynthe.com",
    company: {
      name: "Abernathy Group",
      catchPhrase: "Implemented secondary concept",
      bs: "e-enable extensible e-tailers",
    },
  },
  {
    id: 9,
    name: "Glenna Reichert",
    email: "Chaim_McDermott@dana.io",
    picture: "https://via.placeholder.com/150/226688/FFFFFF?text=GR",
    address: {
      street: "Dayna Park",
      suite: "Suite 449",
      city: "White Vale",
      zipcode: "76495-3109",
      geo: {
        lat: "24.6463",
        lng: "-168.8889",
      },
    },
    phone: "(775)976-6794 x41206",
    website: "conrad.com",
    company: {
      name: "Yost and Sons",
      catchPhrase: "Switchable contextually-based project",
      bs: "aggregate real-time technologies",
    },
  },
  {
    id: 10,
    name: "Clementina DuBuque",
    email: "Rey.Padberg@karina.biz",
    picture: "https://via.placeholder.com/150/000000/FFFFFF?text=CD",
    address: {
      street: "Kattie Turnpike",
      suite: "Suite 198",
      city: "Blue Vale",
      zipcode: "31428-2261",
      geo: {
        lat: "-38.2386",
        lng: "57.2232",
      },
    },
    phone: "024-648-3804",
    website: "ambrose.net",
    company: {
      name: "Hoeger LLC",
      catchPhrase: "Centralized empowering task-force",
      bs: "target end-to-end models",
    },
  },
];

///////////////////////////////////
// WRITE YOUR SOLUTION CODE HERE //
///////////////////////////////////

/*
 Create and return the HTML to render a single contact card.
 The `contact` parameter is an object representing a single contact. 
*/
function renderContact(contact) {
  const {id, name, email, picture, address, phone, website, company} = contact;
  let content = `
  <div class="card" data-id="${id}">
  <button class="deleteBtn" title="Delete this contact">X</button>
  <div class="avatar">
    <div class="circle"></div>
    <div class="circle"></div>
    <img src="${picture}" />
  </div>
  <div class="info">
    <span class="name big">${name}</span>
    <span class="email small">${email}</span>
  </div>
  <div class="details">
    <div class="phone">${phone}</div>
    <div class="website">${website}</div>
  </div>

  <div class="additional">
    <div class="address">
      <div class="suite">${address.suite}</div>
      <div class="street">${address.street}</div>
      <div class="city">${address.city}, ${address.zipcode}</div>
    </div>
    <div class="company">
      <div class="label">Works at</div>
      <div class="company-name">${company.name}</div>
    </div>
  </div>
</div>
  `;
  return content;
}

/*
  Render the array of contacts and insert them on the DOM.
  The contacts should be rendered in the `section` with id "contacts".
*/
function render(contacts) {
  const contactSection = document.querySelector("#contacts");
  if (contacts.length !=0){
    contactSection.innerHTML = contacts.map(renderContact).join("");
  }else {
    contactSection.innerHTML = "No contacts to display";
  };
  loadCities(contacts);
}

/*
  Filter by city. Filter the  array of contacts by the given city.
  Return a new array containing the filtered list. 
  Do NOT modify the original array.
*/
function filterByCity(city) {
  return window.contacts.filter(contact => contact.address.city === city);
}

/*
  Add an `change` event listener to the `filterOptions` select element.
  On `change` get the value selected by the user. 
  If the value is "0" call `render()` with the complete contacts list.
  If the value is not "0" call `filterByCity()` passing the value selected by
  the user. Then call `render()` with the filtered list.
*/
function filterHandler() {
  const filterSelect = document.querySelector("#filterOptions");
  filterSelect.addEventListener("change", e => {
    const value = e.target.value;
    if(value === "0"){
      render(window.contacts);
    }else{
      render(filterByCity(value));
    }
  });
}

/*
  Accepts an array of contacts.
  Populate the select with id `filterOptions` with the list of cities.
  Create a list of cities from the contacts array with no duplicates then
  add an `<option>` element for each city to the select.
*/
function loadCities(contacts) {
  const filterOptions = document.querySelector("#filterOptions");
  filterOptions.innerHTML =  `<option value="0">-- Select a city --</option>`;
  const citiesArray = contacts.map(contact => contact.address.city);
  const citySet = new Set(citiesArray);
  citySet.forEach(city =>{
    const newOption = document.createElement("option");
    newOption.value = city;
    newOption.innerHTML = city;
    filterOptions.appendChild(newOption);
  });
}

/*
  Remove the contact from the contact list with the given id.
*/
function deleteContact(id) {
  const deleteIndex = window.contacts.findIndex(contact => contact.id == id);
  if (deleteIndex >= 0){
    window.contacts.splice(deleteIndex, 1);
  }
}

/*
  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.
*/
function deleteButtonHandler(e) {
  if (e.target && e.target.nodeName == "BUTTON"){
    const id = e.target.parentNode.getAttribute("data-id");
    deleteContact(id);
    render(window.contacts);
  }
}

/*
  Perform all startup tasks here. Use this function to attach the 
  required event listeners, call loadCities() then call render().
*/
function main() {
  const mn = document.querySelector('main');
  mn.addEventListener("click", deleteButtonHandler);
  loadCities(window.contacts);
  render(window.contacts);
}

window.addEventListener("DOMContentLoaded", main);

//////////////////////////////////////////
// DO NOT EDIT ANYTHING BELOW THIS LINE //
//////////////////////////////////////////
window.contacts = contacts;
window.renderContact = renderContact;
window.render = render;
window.filterByCity = filterByCity;
window.filterHandler = filterHandler;
window.loadCities = loadCities;
window.deleteContact = deleteContact;
window.deleteButtonHandler = deleteButtonHandler;
window.main = main;