From 2133f502fb5b2f75e15cdc2b85a3b4a81b86b85c Mon Sep 17 00:00:00 2001 From: zwi3rzak Date: Tue, 24 May 2022 20:41:11 +0200 Subject: [PATCH 1/8] Initial commit PO2455 --- index.html | 39 +++++++++++++++++++++++++++++++++++++++ main.js | 2 ++ style.css | 9 +++++++++ 3 files changed, 50 insertions(+) diff --git a/index.html b/index.html index e69de29b..9295ecfe 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,39 @@ + + + + + + + + Projekt zaliczeniowy Html, CSS i JavaScript + + + +
+
+
+

Html, CSS i JavaScript

+
+ +
+
+
+

Title - Lorem ipsum

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, magnam deserunt. + Totam eos illum quasi tempora rem quod vitae neque eius debitis similique, assumenda + ipsam tempore itaque. Ducimus, eligendi harum. +

+
+
+
+
Footer - Projekt zaliczeniowy Html, CSS i JavaScript
+
+
+ + + diff --git a/main.js b/main.js index e69de29b..c0ce8b95 100644 --- a/main.js +++ b/main.js @@ -0,0 +1,2 @@ +var test = "main.js OK"; +console.log(test); \ No newline at end of file diff --git a/style.css b/style.css index e69de29b..70461fda 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,9 @@ +* { + box-sizing: border-box; + } + + body { + background-color: blueviolet; + font-family: Arial; + margin: 0; + } \ No newline at end of file From 9477f8dfbe79f7bd7addb43082ff6e47eb307d7d Mon Sep 17 00:00:00 2001 From: zwi3rzak Date: Tue, 24 May 2022 22:06:31 +0200 Subject: [PATCH 2/8] fetch - console.log - reqres.in --- index.html | 22 +++++----------------- main.js | 7 +++++-- style.css | 3 ++- 3 files changed, 12 insertions(+), 20 deletions(-) diff --git a/index.html b/index.html index 9295ecfe..8071914d 100644 --- a/index.html +++ b/index.html @@ -11,27 +11,15 @@
-
-

Html, CSS i JavaScript

-
- +

Business Contact List

-
-

Title - Lorem ipsum

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, magnam deserunt. - Totam eos illum quasi tempora rem quod vitae neque eius debitis similique, assumenda - ipsam tempore itaque. Ducimus, eligendi harum. -

-
+
    + +
-
Footer - Projekt zaliczeniowy Html, CSS i JavaScript
+
Projekt zaliczeniowy Html, CSS i JavaScript
diff --git a/main.js b/main.js index c0ce8b95..757a272b 100644 --- a/main.js +++ b/main.js @@ -1,2 +1,5 @@ -var test = "main.js OK"; -console.log(test); \ No newline at end of file +fetch("https://reqres.in/api/users/") + .then((response) => response.json()) + .then((json) => { + console.log(json); + }); diff --git a/style.css b/style.css index 70461fda..e61f283a 100644 --- a/style.css +++ b/style.css @@ -1,9 +1,10 @@ * { + margin: 0; + padding: 0; box-sizing: border-box; } body { background-color: blueviolet; font-family: Arial; - margin: 0; } \ No newline at end of file From beb84b1d89822079c6b9cabd078ae09c205fb6bd Mon Sep 17 00:00:00 2001 From: zwi3rzak Date: Wed, 25 May 2022 00:32:58 +0200 Subject: [PATCH 3/8] fetch - Contact List Flex Wrap - reqres.in --- index.html | 10 +++------- main.js | 16 +++++++++++++++- style.css | 38 +++++++++++++++++++++++++++++++++++--- 3 files changed, 53 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 8071914d..90f65f99 100644 --- a/index.html +++ b/index.html @@ -9,19 +9,15 @@ -
+

Business Contact List

-
-
    - -
-
+
Projekt zaliczeniowy Html, CSS i JavaScript
-
+
diff --git a/main.js b/main.js index 757a272b..c17ea2a4 100644 --- a/main.js +++ b/main.js @@ -1,5 +1,19 @@ fetch("https://reqres.in/api/users/") .then((response) => response.json()) .then((json) => { - console.log(json); + console.log(json.data); + const html = json.data.map((user) => { + return ` +
+ +
+ ${user.id} + ${user.first_name} + ${user.last_name} +
+ +
+ `; + }); + document.querySelector('.list').innerHTML = html.join(''); }); diff --git a/style.css b/style.css index e61f283a..5e383e18 100644 --- a/style.css +++ b/style.css @@ -3,8 +3,40 @@ padding: 0; box-sizing: border-box; } - + body { - background-color: blueviolet; font-family: Arial; - } \ No newline at end of file + } + + .container { + max-width: 80%; + margin: 20px auto; + } + + .list { + display: flex; + flex-wrap: wrap; + } + + .contact { + margin: 70px; + padding: 10px; + width: 250px; + text-align: center; + border-radius: 5px; + box-shadow: 0px 10px 10px 3px rgba(66, 68, 90, 1); + background: #087f23; + color: white; + } + + .name { + margin: 10px; + } + + .image { + border: 1px solid black; + border-radius: 50%; + } + + + From 3bc4a66cedaa5168a8c57d19e59370bd83fed83d Mon Sep 17 00:00:00 2001 From: zwi3rzak Date: Wed, 25 May 2022 20:00:58 +0200 Subject: [PATCH 4/8] fetch - CSS flex and colors mod - reqres.in --- index.html | 7 ++++--- main.js | 2 +- style.css | 31 +++++++++++++++++++++++++------ 3 files changed, 30 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 90f65f99..c2e6c55b 100644 --- a/index.html +++ b/index.html @@ -10,11 +10,12 @@
-
+

Business Contact List

-
-
+
+
+
Projekt zaliczeniowy Html, CSS i JavaScript
diff --git a/main.js b/main.js index c17ea2a4..e00a3e5b 100644 --- a/main.js +++ b/main.js @@ -15,5 +15,5 @@ fetch("https://reqres.in/api/users/")
`; }); - document.querySelector('.list').innerHTML = html.join(''); + document.querySelector('.contact-list').innerHTML = html.join(''); }); diff --git a/style.css b/style.css index 5e383e18..aca215a4 100644 --- a/style.css +++ b/style.css @@ -13,9 +13,20 @@ margin: 20px auto; } - .list { + .main-title { + display: flex; + justify-content: center; + border-radius: 5px; + box-shadow: 0px 4px 8px 1px #83069c; + background: #000; + color: #fff; + + } + + .contact-list { display: flex; flex-wrap: wrap; + justify-content: center; } .contact { @@ -24,19 +35,27 @@ width: 250px; text-align: center; border-radius: 5px; - box-shadow: 0px 10px 10px 3px rgba(66, 68, 90, 1); + box-shadow: 0px 10px 10px 3px #42445a; background: #087f23; - color: white; + color: #fff; } + .image { + border-radius: 50%; + box-shadow: 0px 0px 6px 2px #000; +} + .name { margin: 10px; } - .image { - border: 1px solid black; - border-radius: 50%; + .footer-desc { + display: flex; + justify-content: center; } + + + From 6ad643241134da77b7d13aee04c9c8827636585e Mon Sep 17 00:00:00 2001 From: zwi3rzak Date: Wed, 25 May 2022 21:31:52 +0200 Subject: [PATCH 5/8] fetch - CSS @media - google icons - and more - reqres.in --- index.html | 3 ++- main.js | 15 +++++++++------ style.css | 40 ++++++++++++++++++++++++++++++++++++---- 3 files changed, 47 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index c2e6c55b..997727f8 100644 --- a/index.html +++ b/index.html @@ -5,11 +5,12 @@ + Projekt zaliczeniowy Html, CSS i JavaScript -
+

Business Contact List

diff --git a/main.js b/main.js index e00a3e5b..e714438f 100644 --- a/main.js +++ b/main.js @@ -6,12 +6,15 @@ fetch("https://reqres.in/api/users/") return `
-
- ${user.id} - ${user.first_name} - ${user.last_name} -
- +
+ account_circle + ${user.first_name} + ${user.last_name} +
+
`; }); diff --git a/style.css b/style.css index aca215a4..5a395427 100644 --- a/style.css +++ b/style.css @@ -8,7 +8,7 @@ font-family: Arial; } - .container { + .main-container { max-width: 80%; margin: 20px auto; } @@ -30,7 +30,7 @@ } .contact { - margin: 70px; + margin: 50px; padding: 10px; width: 250px; text-align: center; @@ -45,8 +45,33 @@ box-shadow: 0px 0px 6px 2px #000; } - .name { - margin: 10px; + .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 { @@ -54,6 +79,13 @@ justify-content: center; } + @media screen and (max-width: 900px) { + + .main-container { + max-width: 100%; + } + + } From 7cc4f2d21db8c5808dc84c410a8479314d9d6b80 Mon Sep 17 00:00:00 2001 From: zwi3rzak Date: Wed, 25 May 2022 21:40:25 +0200 Subject: [PATCH 6/8] fetch - more mods CSS - reqres.in --- style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/style.css b/style.css index 5a395427..6ac16bac 100644 --- a/style.css +++ b/style.css @@ -41,6 +41,7 @@ } .image { + margin-top: 15px; border-radius: 50%; box-shadow: 0px 0px 6px 2px #000; } From f44d4fdfbac4dcd45cfb27905e6fc5cb6a656f5f Mon Sep 17 00:00:00 2001 From: zwi3rzak Date: Wed, 25 May 2022 21:50:52 +0200 Subject: [PATCH 7/8] fetch - footer and CSS mods - reqres.in --- index.html | 2 +- main.js | 6 +++--- style.css | 3 --- 3 files changed, 4 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 997727f8..1497af6f 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,7 @@

Business Contact List

-
Projekt zaliczeniowy Html, CSS i JavaScript
+
Html - CSS - JavaScript + Fetch API
diff --git a/main.js b/main.js index e714438f..a13eb997 100644 --- a/main.js +++ b/main.js @@ -1,8 +1,8 @@ fetch("https://reqres.in/api/users/") - .then((response) => response.json()) - .then((json) => { + .then(response => response.json()) + .then(json => { console.log(json.data); - const html = json.data.map((user) => { + const html = json.data.map(user => { return `
diff --git a/style.css b/style.css index 6ac16bac..1fd1a0c9 100644 --- a/style.css +++ b/style.css @@ -20,7 +20,6 @@ box-shadow: 0px 4px 8px 1px #83069c; background: #000; color: #fff; - } .contact-list { @@ -81,11 +80,9 @@ } @media screen and (max-width: 900px) { - .main-container { max-width: 100%; } - } From e8d31d0e641ae77df314f43b6be43946db019658 Mon Sep 17 00:00:00 2001 From: zwi3rzak Date: Mon, 30 May 2022 21:37:36 +0200 Subject: [PATCH 8/8] fetch - add search bar - search by contact name - reqres.in --- index.html | 11 ++++++++++- main.js | 55 ++++++++++++++++++++++++++++++++++++------------------ style.css | 17 ++++++++++++++--- 3 files changed, 61 insertions(+), 22 deletions(-) diff --git a/index.html b/index.html index 1497af6f..3855e401 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,16 @@

Business Contact List

-
+
+
+ +
+