From 512631061504780bc46090a6724ecbc00cdab9e5 Mon Sep 17 00:00:00 2001 From: ErikaOlsson Date: Wed, 9 Oct 2024 11:42:16 +0200 Subject: [PATCH 01/11] update --- index.html | 27 +++++++++++++++++++++++++++ src/index.css | 41 +++++++++++++++++++++++++++++++++++++++++ src/main.jsx | 2 ++ 3 files changed, 70 insertions(+) diff --git a/index.html b/index.html index 3e0bcb75..3a41ec02 100644 --- a/index.html +++ b/index.html @@ -3,11 +3,38 @@ + Music Releases
+ + +
+ +
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
13
+
14
+
15
+
16
+
17
+
18
+
19
+
20
+
+ diff --git a/src/index.css b/src/index.css index 4558f538..7488e4e2 100644 --- a/src/index.css +++ b/src/index.css @@ -11,3 +11,44 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } + + + + +/* Basic styling for the album container */ +.music-container { + display: grid; + gap: 20px; /* Space between the grid items */ + padding: 20px; +} + +/* Styling for the individual albums */ +.music-box { + background-color: #4CAF50; + color: white; + text-align: center; + padding: 40px 0; + font-size: 20px; + border-radius: 8px; +} + +/* Desktop layout: 4 boxes per row */ +@media (min-width: 892px) { + .music-container { + grid-template-columns: repeat(4, 1fr); + } +} + +/* Tablet layout: 2 boxes per row */ +@media (min-width: 500px) and (max-width: 891px) { + .music-container { + grid-template-columns: repeat(2, 1fr); + } +} + +/* Mobile layout: 1 box per row */ +@media (max-width: 499px) { + .music-container { + grid-template-columns: 1fr; + } +} diff --git a/src/main.jsx b/src/main.jsx index 51294f39..d5d3e05c 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -8,3 +8,5 @@ ReactDOM.createRoot(document.getElementById("root")).render( ); + +function MusicGallery \ No newline at end of file From 53edf9d4b75c478893c6f44ab413a4ad51fc6448 Mon Sep 17 00:00:00 2001 From: ErikaOlsson Date: Thu, 10 Oct 2024 09:41:22 +0200 Subject: [PATCH 02/11] update: js, css, data not working --- index.html | 25 ------------------- instructions.md | 4 --- src/App.jsx | 9 ++++++- src/components/Header.jsx | 12 +++++++++ src/components/MusicGallery.css | 44 +++++++++++++++++++++++++++++++++ src/components/MusicGallery.jsx | 27 ++++++++++++++++++++ src/main.jsx | 4 +-- 7 files changed, 92 insertions(+), 33 deletions(-) create mode 100644 src/components/Header.jsx create mode 100644 src/components/MusicGallery.css create mode 100644 src/components/MusicGallery.jsx diff --git a/index.html b/index.html index 3a41ec02..d823b856 100644 --- a/index.html +++ b/index.html @@ -10,31 +10,6 @@
- -
- -
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
- diff --git a/instructions.md b/instructions.md index 909b32a8..c352f459 100644 --- a/instructions.md +++ b/instructions.md @@ -35,10 +35,6 @@ This is just a suggestion - how you decide to structure your components is compl ### Your page should be responsive: -- showing 4 albums per row on desktop -- 2 per row on tablet -- 1 per row on mobile. - ## Design 🎶 You should follow the design screenshots as closely as possible. We've provided icons for the play, heart and more info icons when hovering on an album. Use the following for fonts: diff --git a/src/App.jsx b/src/App.jsx index a13f8faf..2efea866 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,7 +1,14 @@ import data from "./data.json"; +import Header from "./components/Header.jsx"; +import MusicGallery from "./components/MusicGallery.jsx"; console.log(data); export const App = () => { - return
Find me in src/app.jsx!
; + return ( + <> +
+ + + ); }; diff --git a/src/components/Header.jsx b/src/components/Header.jsx new file mode 100644 index 00000000..a60ab082 --- /dev/null +++ b/src/components/Header.jsx @@ -0,0 +1,12 @@ +import React from "react"; + + +const Header = () => { + return ( +
+

Header

+
+ ); +}; + +export default Header \ No newline at end of file diff --git a/src/components/MusicGallery.css b/src/components/MusicGallery.css new file mode 100644 index 00000000..15062e61 --- /dev/null +++ b/src/components/MusicGallery.css @@ -0,0 +1,44 @@ + +/* Container for the album grid */ +.album-grid-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 20px; /* Space between grid items */ + padding: 20px; + background-color: #333; +} + +/* Individual album card styling */ +.album-card { + background-color: #f0f0f0; + border-radius: 8px; + overflow: hidden; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + text-align: center; + transition: transform 0.3s; +} + +.album-card:hover { + transform: scale(1.05); /* Slight zoom on hover */ +} + +/* Styling for the album image */ +.album-image { + width: 100%; + height: 200px; + object-fit: cover; +} + +/* Album name styling */ +.album-name { + font-size: 1.2rem; + margin: 10px 0; + color: #333; +} + +/* Album artist styling */ +.album-artist { + font-size: 1rem; + color: #666; + margin-bottom: 15px; +} diff --git a/src/components/MusicGallery.jsx b/src/components/MusicGallery.jsx new file mode 100644 index 00000000..b2f3a625 --- /dev/null +++ b/src/components/MusicGallery.jsx @@ -0,0 +1,27 @@ +import React, { useEffect, useState } from 'react'; +import data from '../data.json'; +import './MusicGallery.css'; + + +const MusicGallery = () => { + const [albums, setAlbums] = useState([]); + + // Load the data directly from the imported JSON file + useEffect(() => { + setAlbums(albumData); // Directly use the imported data + }, []); + + return ( +
+ {albums.map((album, index) => ( +
+ {album.name} +

{album.name}

+

{album.artist}

+
+ ))} +
+ ); +}; + +export default MusicGallery \ No newline at end of file diff --git a/src/main.jsx b/src/main.jsx index d5d3e05c..a2fb6f6a 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -7,6 +7,4 @@ ReactDOM.createRoot(document.getElementById("root")).render( -); - -function MusicGallery \ No newline at end of file +); \ No newline at end of file From 72625213aecfcdaf513ba410bdea80e059a2153c Mon Sep 17 00:00:00 2001 From: ErikaOlsson Date: Fri, 11 Oct 2024 09:40:29 +0200 Subject: [PATCH 03/11] update: got gallery to show - but no images or text --- src/components/MusicGallery.css | 4 ++-- src/components/MusicGallery.jsx | 31 ++++++++++++++++++++++++------- 2 files changed, 26 insertions(+), 9 deletions(-) diff --git a/src/components/MusicGallery.css b/src/components/MusicGallery.css index 15062e61..5f8342d6 100644 --- a/src/components/MusicGallery.css +++ b/src/components/MusicGallery.css @@ -33,12 +33,12 @@ .album-name { font-size: 1.2rem; margin: 10px 0; - color: #333; + color: #fff; } /* Album artist styling */ .album-artist { font-size: 1rem; - color: #666; + color: #fff; margin-bottom: 15px; } diff --git a/src/components/MusicGallery.jsx b/src/components/MusicGallery.jsx index b2f3a625..8418630b 100644 --- a/src/components/MusicGallery.jsx +++ b/src/components/MusicGallery.jsx @@ -3,24 +3,41 @@ import data from '../data.json'; import './MusicGallery.css'; + +console.log(data); + const MusicGallery = () => { - const [albums, setAlbums] = useState([]); + + /* const [albums, setAlbums] = useState([]); // Load the data directly from the imported JSON file useEffect(() => { - setAlbums(albumData); // Directly use the imported data + setAlbums(data); // Directly use the imported data }, []); - + */ return ( + <> +
+ {data.albums.items.map((album) => ( +
+ {album.name} +

{data.albums.name}

+

{data.albums.artist}

+
+ ))} +
+ + + /* return (
{albums.map((album, index) => (
- {album.name} -

{album.name}

-

{album.artist}

+ {album.name} +

{data.albums.name}

+

{data.albums.artist}

))} -
+ */ ); }; From 206289cf736fb27c56525b1e30607933ca386c01 Mon Sep 17 00:00:00 2001 From: ErikaOlsson Date: Fri, 11 Oct 2024 14:17:22 +0200 Subject: [PATCH 04/11] Update: grid is working, img and album name --- src/components/Header.css | 3 +++ src/components/Header.jsx | 1 + src/components/MusicGallery.css | 38 ++++++++++++++++++++++++++++----- src/components/MusicGallery.jsx | 23 ++++++++++++++------ src/index.css | 1 + 5 files changed, 54 insertions(+), 12 deletions(-) create mode 100644 src/components/Header.css diff --git a/src/components/Header.css b/src/components/Header.css new file mode 100644 index 00000000..927076cb --- /dev/null +++ b/src/components/Header.css @@ -0,0 +1,3 @@ +.header-music { + color: #fff; +} \ No newline at end of file diff --git a/src/components/Header.jsx b/src/components/Header.jsx index a60ab082..5312f29d 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -1,4 +1,5 @@ import React from "react"; +import "./Header.css" const Header = () => { diff --git a/src/components/MusicGallery.css b/src/components/MusicGallery.css index 5f8342d6..c6ab89ec 100644 --- a/src/components/MusicGallery.css +++ b/src/components/MusicGallery.css @@ -2,20 +2,20 @@ /* Container for the album grid */ .album-grid-container { display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; /* Space between grid items */ padding: 20px; background-color: #333; } /* Individual album card styling */ -.album-card { - background-color: #f0f0f0; +.album-card { border-radius: 8px; overflow: hidden; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - text-align: center; transition: transform 0.3s; + + position: relative; } .album-card:hover { @@ -25,8 +25,13 @@ /* Styling for the album image */ .album-image { width: 100%; - height: 200px; + height: 350px; object-fit: cover; + transition: filter 0.3s ease; /* Smooth transition effect for the image darkening */ +} + +.album-cover-hover:hover .album-image { + filter: brightness(50%); /* Darkens the image when hovered */ } /* Album name styling */ @@ -35,6 +40,9 @@ margin: 10px 0; color: #fff; } +.album-name:hover { + color: #9b9b9b; +} /* Album artist styling */ .album-artist { @@ -42,3 +50,23 @@ color: #fff; margin-bottom: 15px; } +.album-cover-icons { + position: absolute; + top: 40%; /* Adjust this value to control how far from the top the icons are */ + left: 50%; + transform: translate(-50%, -50%); + display: flex; + gap: 10px; /* Adjust the space between the icons */ + justify-content: space-around; + align-items: center; + opacity: 0; /* Hide the icons by default */ + transition: opacity 0.3s ease; /* Smooth transition when showing/hiding */ +} + +.album-cover-hover:hover .album-cover-icons { + opacity: 1; /* Show the icons when hovering over the image */ +} +.album-cover-icons img { + cursor: pointer; + filter: invert(1); + } \ No newline at end of file diff --git a/src/components/MusicGallery.jsx b/src/components/MusicGallery.jsx index 8418630b..410f6694 100644 --- a/src/components/MusicGallery.jsx +++ b/src/components/MusicGallery.jsx @@ -1,28 +1,37 @@ import React, { useEffect, useState } from 'react'; import data from '../data.json'; import './MusicGallery.css'; - +import dotsIcon from '../assets/icons/dots.svg' +import heartIcon from '../assets/icons/heart.svg' +import playIcon from '../assets/icons/play.svg' console.log(data); const MusicGallery = () => { - /* const [albums, setAlbums] = useState([]); + /* const [albums, setAlbums] = useState([]); // Load the data directly from the imported JSON file useEffect(() => { setAlbums(data); // Directly use the imported data - }, []); - */ + }, []); */ + return ( <>
{data.albums.items.map((album) => (
- {album.name} -

{data.albums.name}

-

{data.albums.artist}

+
+ {album.name} +
+ Icon - Like album + Icon - Play album + Icon - Other +
+
+

{album.name}

+

{album.artists?.[0]}

))}
diff --git a/src/index.css b/src/index.css index 7488e4e2..58d7edd6 100644 --- a/src/index.css +++ b/src/index.css @@ -5,6 +5,7 @@ sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + background-color: #000; } code { From e07a22499ee9326ebbd3ecd5207082b7b41e2c71 Mon Sep 17 00:00:00 2001 From: ErikaOlsson Date: Fri, 11 Oct 2024 14:41:23 +0200 Subject: [PATCH 05/11] Update: artists --- src/components/MusicGallery.jsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/MusicGallery.jsx b/src/components/MusicGallery.jsx index 410f6694..3573e2d5 100644 --- a/src/components/MusicGallery.jsx +++ b/src/components/MusicGallery.jsx @@ -31,7 +31,13 @@ const MusicGallery = () => {

{album.name}

-

{album.artists?.[0]}

+
+

{album.artists.map((artist) => + {artist.name} + )} +

+
+ {/*

{album.artists?.[0]}

*/} ))} From a9c33497814beb0a4ed02dd1b7edf2abb09794c2 Mon Sep 17 00:00:00 2001 From: ErikaOlsson Date: Sat, 12 Oct 2024 10:16:25 +0200 Subject: [PATCH 06/11] Update: links to artists, hover effects --- src/components/MusicGallery.css | 29 ++++++++++++++++++++++++----- src/components/MusicGallery.jsx | 9 +++++---- 2 files changed, 29 insertions(+), 9 deletions(-) diff --git a/src/components/MusicGallery.css b/src/components/MusicGallery.css index c6ab89ec..3b860773 100644 --- a/src/components/MusicGallery.css +++ b/src/components/MusicGallery.css @@ -36,19 +36,33 @@ /* Album name styling */ .album-name { - font-size: 1.2rem; - margin: 10px 0; + font-size: 14px; + margin: 10px 0 3px; color: #fff; + text-transform: capitalize; + font-family: Arial, Helvetica, sans-serif; + cursor: pointer; } .album-name:hover { - color: #9b9b9b; + display: inline-block; + border-bottom: 1px solid #fff; } /* Album artist styling */ .album-artist { - font-size: 1rem; + font-size: 14px; + color: #a0a0a0; + margin: 0 0 15px 0; + padding: 0; + font-family: Arial, Helvetica, sans-serif; +} +.album-artist a { + text-decoration: none; + color: #a0a0a0; +} +.album-artist a:hover { color: #fff; - margin-bottom: 15px; + border-bottom: 1px solid #fff; } .album-cover-icons { position: absolute; @@ -69,4 +83,9 @@ .album-cover-icons img { cursor: pointer; filter: invert(1); + } + + .play-icon:hover { + width: 80px; + height: auto; } \ No newline at end of file diff --git a/src/components/MusicGallery.jsx b/src/components/MusicGallery.jsx index 3573e2d5..94f09999 100644 --- a/src/components/MusicGallery.jsx +++ b/src/components/MusicGallery.jsx @@ -26,18 +26,19 @@ const MusicGallery = () => { {album.name}
Icon - Like album - Icon - Play album + Icon - Play album Icon - Other
-

{album.name}

+

+ {album.name} +

{album.artists.map((artist) => - {artist.name} + {artist.name} )}

- {/*

{album.artists?.[0]}

*/} ))} From ca740acf6876af47c7ee869d2671099ae4d572dd Mon Sep 17 00:00:00 2001 From: ErikaOlsson Date: Sat, 12 Oct 2024 10:29:28 +0200 Subject: [PATCH 07/11] Update: footer --- src/components/Footer.css | 0 src/components/Footer.jsx | 0 src/components/MusicGallery.jsx | 19 +++++-------------- 3 files changed, 5 insertions(+), 14 deletions(-) create mode 100644 src/components/Footer.css create mode 100644 src/components/Footer.jsx diff --git a/src/components/Footer.css b/src/components/Footer.css new file mode 100644 index 00000000..e69de29b diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx new file mode 100644 index 00000000..e69de29b diff --git a/src/components/MusicGallery.jsx b/src/components/MusicGallery.jsx index 94f09999..e38d6c70 100644 --- a/src/components/MusicGallery.jsx +++ b/src/components/MusicGallery.jsx @@ -30,9 +30,11 @@ const MusicGallery = () => { Icon - Other -

- {album.name} -

+ +

+ {album.name} +

+

{album.artists.map((artist) => {artist.name} @@ -43,17 +45,6 @@ const MusicGallery = () => { ))}

- - /* return ( -
- {albums.map((album, index) => ( -
- {album.name} -

{data.albums.name}

-

{data.albums.artist}

-
- ))} -
*/ ); }; From 0842fd7ba543e03ed4fc4ecd0f0ba6d21eeb2840 Mon Sep 17 00:00:00 2001 From: ErikaOlsson Date: Sat, 12 Oct 2024 16:40:01 +0200 Subject: [PATCH 08/11] update: header, footer, styling --- src/App.jsx | 2 ++ src/components/Footer.css | 6 ++++++ src/components/Footer.jsx | 13 ++++++++++++ src/components/Header.css | 23 +++++++++++++++++--- src/components/Header.jsx | 6 ++++-- src/components/MusicGallery.css | 20 +++++++++++------- src/components/MusicGallery.jsx | 10 ++++----- src/index.css | 37 --------------------------------- 8 files changed, 61 insertions(+), 56 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 2efea866..723cfefb 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,6 +1,7 @@ import data from "./data.json"; import Header from "./components/Header.jsx"; import MusicGallery from "./components/MusicGallery.jsx"; +import Footer from "./components/Footer.jsx" console.log(data); @@ -9,6 +10,7 @@ export const App = () => { <>
+