diff --git a/index.html b/index.html index e69de29b..3855e401 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,34 @@ + + + + + + + + + Projekt zaliczeniowy Html, CSS i JavaScript + + + +
+
+

Business Contact List

+
+
+
+ +
+
+
+ + +
+ + diff --git a/main.js b/main.js index e69de29b..1131e25b 100644 --- a/main.js +++ b/main.js @@ -0,0 +1,41 @@ +const contactList = document.querySelector('.contact-list'); +const searchBar = document.querySelector('.search-bar'); +let contactArray = []; + +searchBar.addEventListener('keyup', (e) => { + const searchInput = e.target.value.toLowerCase(); + const filteredContact = contactArray.filter(user => { + return user.first_name.toLowerCase().includes(searchInput) + + }); + displayContact(filteredContact); +}); + +fetch("https://reqres.in/api/users/") + .then(response => response.json()) + .then(json => { + contactArray = json.data; + console.log(contactArray); + displayContact(contactArray); + }); + + const displayContact = (contacts) => { + const html = contacts.map(user => { + return ` +
+ +
+ account_circle + ${user.first_name} + ${user.last_name} +
+

+ mail + +

+
+ `; + }); + contactList.innerHTML = html.join(''); +}; + diff --git a/style.css b/style.css index e69de29b..9981a5ae 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,102 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + body { + font-family: Arial; + } + + .main-container { + max-width: 80%; + margin: 20px auto; + } + + .main-title { + display: flex; + justify-content: center; + } + + .search-wrapper { + display: flex; + justify-content: center; + } + + .search-bar { + width: 100%; + height: 40px; + padding: 10px; + margin-top: 20px; + border: 2px solid #087f23 ; + border-radius: 5px; + + } + + .contact-list { + display: flex; + flex-wrap: wrap; + justify-content: center; + } + + .contact { + margin: 50px; + padding: 10px; + width: 250px; + text-align: center; + border-radius: 5px; + box-shadow: 0px 10px 10px 3px #42445a; + background: #087f23; + color: #fff; + } + + .image { + margin-top: 15px; + border-radius: 50%; + box-shadow: 0px 0px 6px 2px #000; +} + + .first-last-container { + margin-top: 15px; + display: flex; + justify-content:flex-start; + align-items: center; + } + + .first-name { + margin-left: 10px; + } + + .last-name { + margin-left: 5px; + } + + .email-container { + display: flex; + justify-content:flex-start; + align-items: center; + } + + .email { + margin-left: 10px; + } + + .icons-color { + color: #000000; + } + + .footer-desc { + display: flex; + justify-content: center; + } + + @media screen and (max-width: 900px) { + .main-container { + max-width: 100%; + } + } + + + + +