Technigo · erikamolsson · Oct 9, 2024 · Oct 10, 2024 · Oct 11, 2024 · Oct 11, 2024
diff --git a/README.md b/README.md
@@ -6,12 +6,12 @@
 
 # Music Releases
 
-Replace this readme with your own information about your project.
-
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+50 new album releases that we are displaying on an landing page with a local json-file(API).
 
 ## Getting Started with the Project
 
+Got a good start and thought i understood it pretty well, but had difficultis displaying the API data and it took a long time before i got it to work. Which was my main problem and got me real stuck! But managed to solve it.
+
 ### Dependency Installation & Startup Development Server
 
 Once cloned, navigate to the project's root directory and this project uses npm (Node Package Manager) to manage its dependencies.
@@ -24,11 +24,11 @@ npm i && code . && npm run dev
 
 ### The Problem
 
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+I understood the principle of React pretty fast, how to work with components. But thought it was difficult to know how to divid everything up and how many components it should be. But it gets clearer! Have to few components in this project - but realised that to late and let it be, but next time i will divide it into more smaller components.
 
 ### View it live
 
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
+Music releases: https://boisterous-croissant-2d81bc.netlify.app/ 
 
 ## Instructions
 

diff --git a/index.html b/index.html
@@ -3,11 +3,13 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="stylesheet" href="/src/index.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Music Releases</title>
   </head>
   <body>
     <div id="root"></div>
+
     <script type="module" src="/src/main.jsx"></script>
   </body>
 </html>
diff --git 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
@@ -1,7 +1,16 @@
 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);
 
 export const App = () => {
-  return <div>Find me in src/app.jsx!</div>;
+  return (
+    <>
+      <Header />
+      <MusicGallery />
+      <Footer />
+    </>
+  );
 };
diff --git a/src/components/Footer.css b/src/components/Footer.css
@@ -0,0 +1,6 @@
+.footer-music {
+    color: #fff;
+    font-size: 16px;
+    font-family: Arial, Helvetica, sans-serif;
+    padding: 40px 30px;
+}
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -0,0 +1,13 @@
+import "./Footer.css"
+
+
+const Footer = () => {
+    return (
+        <div className="footer-music">
+            <p>Made by: Erika Olsson</p>
+            <p>Technigo / Web Development Boot Camp</p>
+        </div>
+    );
+};
+
+export default Footer
diff --git a/src/components/Header.css b/src/components/Header.css
@@ -0,0 +1,20 @@
+.header-container {
+    border-radius: 8px; /* Rounded corners */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.header {
+    color: #FFFFFF; /* White text */
+    text-transform: uppercase;
+    font-size: 4rem; 
+    font-weight: 700;
+    width: 300px;
+    height: auto;
+    border-bottom: #FFF solid 3px;
+    border-top: #FFF solid 3px;
+    padding: 20px 35px; /* Padding around the text */
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); /* Shadow effect */
+    margin: 40px 10px;
+}
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -0,0 +1,15 @@
+import React from "react";
+import "./Header.css"
+
+
+const Header = () => {
+    return (
+        <header class="header-container">
+            <div class="header">
+                New Music Releases
+            </div>
+        </header>
+    );
+};
+
+export default Header
diff --git a/src/components/MusicGallery.css b/src/components/MusicGallery.css
@@ -0,0 +1,95 @@
+
+/* Container for the album grid */
+.album-grid-container {
+    display: grid;
+    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 { 
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s;
+    position: relative;
+}
+
+/* .album-card:hover {
+    transform: scale(1.05); 
+} */
+
+/* Styling for the album image */
+.album-image {
+    width: 100%;
+    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 */
+  cursor: pointer;
+}
+
+/* Album name styling */
+.album-name {
+    font-size: 14px;
+    font-weight: 600;
+    margin: 7px 0 3px;
+    color: #fff;
+    text-transform: capitalize;
+    font-family: Arial, Helvetica, sans-serif;
+    cursor: pointer;
+    text-decoration: none;
+}
+.album-name:hover {
+    border-bottom: 2px solid #fff;
+}
+
+/* Album artist styling */
+.album-name-container {
+    margin: 5px 0 3px;
+}
+.album-artist {
+    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;
+    border-bottom: 2px solid #fff;
+}
+.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);
+  }
+
+  .play-icon:hover {
+    width: 80px;
+    height: auto;
+  }
diff --git a/src/components/MusicGallery.jsx b/src/components/MusicGallery.jsx
@@ -0,0 +1,49 @@
+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([]);
+
+    // Load the data directly from the imported JSON file
+    useEffect(() => {
+        setAlbums(data); // Directly use the imported data
+    }, []); */
+
+    return (
+        <>
+        <div className="album-grid-container">
+          { data.albums.items.map((album) => (
+            <div key={album} className="album-card">
+                <div className="album-cover-hover">
+                    <img src={album.images?.[0]?.url} alt={album.name} className="album-image" />
+                    <div className="album-cover-icons">
+                        <img src={heartIcon} width="30" alt="Icon - Like album" />
+                        <img src={playIcon} className="play-icon" width="60" alt="Icon - Play album" />
+                        <img src={dotsIcon} width="30" alt="Icon - Other" />
+                    </div>
+                </div>
+                <p className="album-name-container">
+                    <a className="album-name" href={album.external_urls.spotify} target='_blank'>{album.name}</a>
+                </p>
+                <div>
+                    <p className="album-artist">{album.artists.map((artist) => 
+                        <a href={artist.external_urls.spotify} target='_blank'>{artist.name}</a>
+                        )}
+                    </p>
+                </div>
+            </div>
+          ))}
+        </div>
+        </>
+    );
+};
+
+export default MusicGallery
diff --git a/src/index.css b/src/index.css
@@ -5,9 +5,14 @@
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: #000;
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+
+
+
diff --git a/src/main.jsx b/src/main.jsx
@@ -7,4 +7,4 @@ ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
-);
+);
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,4 +7,4 @@ ReactDOM.createRoot(document.getElementById("root")).render( @@
       <React.StrictMode>
         <App />
       </React.StrictMode>
-    );
+    );