Skip to content

PO2455 #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

PO2455 #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2133f50
Initial commit PO2455
zwi3rzak May 24, 2022
9477f8d
fetch - console.log - reqres.in
zwi3rzak May 24, 2022
beb84b1
fetch - Contact List Flex Wrap - reqres.in
zwi3rzak May 24, 2022
3bc4a66
fetch - CSS flex and colors mod - reqres.in
zwi3rzak May 25, 2022
6ad6432
fetch - CSS @media - google icons - and more - reqres.in
zwi3rzak May 25, 2022
7cc4f2d
fetch - more mods CSS - reqres.in
zwi3rzak May 25, 2022
f44d4fd
fetch - footer and CSS mods - reqres.in
zwi3rzak May 25, 2022
e8d31d0
fetch - add search bar - search by contact name - reqres.in
zwi3rzak May 30, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
<title>Projekt zaliczeniowy Html, CSS i JavaScript</title>
<meta name="description" content="Lorem ipsum dolor sit amet consectetur adipisicing elit.">
</head>
<body>
<div class="main-container">
<header class="main-title">
<h1>Business Contact List</h1>
</header>
<main>
<div class="search-wrapper">
<input
type="text"
name="searchBar"
class="search-bar"
placeholder="search for a contact by name"
/>
</div>
<div class="contact-list"></div>
</main>
<footer class="footer-desc">
<h5>Html - CSS - JavaScript + Fetch API</h5>
</footer>
<script src="main.js"></script>
</div>
</body>
</html>
41 changes: 41 additions & 0 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 `
<div class="contact">
<img class="image" src="${user.avatar}">
<div class="first-last-container">
<span class="material-symbols-outlined icons-color">account_circle</span>
<span class="first-name">${user.first_name}</span>
<span class="last-name">${user.last_name}</span>
</div>
<p class="email-container">
<span class="material-symbols-outlined icons-color">mail</span>
<span class="email">${user.email}</span>
</p>
</div>
`;
});
contactList.innerHTML = html.join('');
};

102 changes: 102 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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%;
}
}