Technigo · Jonash189 · Oct 9, 2024 · Oct 10, 2024 · Oct 10, 2024 · Oct 10, 2024
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -16,5 +16,6 @@ module.exports = {
       'warn',
       { allowConstantExport: true },
     ],
+    'react/prop-types': 'off'
   },
-}
+}
diff --git a/README.md b/README.md
@@ -6,32 +6,19 @@
 
 # Music Releases
 
-Replace this readme with your own information about your project.
+This task involved building a React app that displays music releases using data from a Spotify API response. The app features album covers, artist names, and various hover effects, such as showing icons (play, heart, dots) when hovering over an album cover.
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
-
-## Getting Started with the Project
-
-### 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.
-
-The command below is a combination of installing dependencies, opening up the project on VS Code and it will run a development server on your terminal.
-
-```bash
-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 encountered several challenges during the project, including:
 
-### View it live
+Positioning icons correctly: Initially, the icons were hidden behind the overlay. I resolved this by adjusting the z-index so that the icons appear above the overlay on hover.
+Handling commas between artist names: I needed to dynamically add commas between artist names. I solved this by using conditional logic in the ArtistName component.
+Styling issues: I encountered problems with unwanted spaces and default underlines on links. I fixed these by adjusting margins and using text-decoration: none for the default state and underline for the hover state.
+These changes allowed the app to function as expected and match the project requirements.
 
-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.
+### View it live
 
-## Instructions
+https://jonas-music-releases.netlify.app/
 
-<a href="instructions.md">
-   See instructions of this project
-  </a>
diff --git a/index.html b/index.html
@@ -1,13 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <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>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Jonas Music Releases</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,7 +1,17 @@
-import data from "./data.json";
-
-console.log(data);
+import React from 'react';
+import data from './data.json';
+import { Header } from './components/Header';
+import { Album } from './components/Album';
 
 export const App = () => {
-  return <div>Find me in src/app.jsx!</div>;
+  return (
+    <div>
+      <Header />
+      <div className="App">
+        {data.albums.items.map((album) => (
+          <Album key={album.id} album={album} />
+        ))}
+      </div>
+    </div>
+  );
 };
diff --git a/src/components/Album.jsx b/src/components/Album.jsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { ArtistName } from "./ArtistName";
+import { AlbumName } from "./AlbumName";
+import { AlbumCover } from "./AlbumCover";
+import './App.css';
+
+export const Album = ({ album }) => {
+  const totalArtists = album.artists.length;
+
+  return (
+    <div className="album">
+      <AlbumCover imageUrl={album.images[0].url} alt={album.name} />
+      <AlbumName name={album.name} url={album.external_urls.spotify} />
+      <div className="artists">
+        {album.artists.map((artist, index) => (
+          <ArtistName
+            key={artist.id}
+            artist={artist}
+            index={index}
+            totalArtists={totalArtists}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/AlbumCover.css b/src/components/AlbumCover.css
@@ -0,0 +1,84 @@
+.cover-container {
+    position: relative;
+    width: 100%;
+}
+
+.album-cover {
+    width: 100%;
+    height: auto;
+    border-radius: 8px;
+    z-index: 1;
+
+}
+
+.icons {
+    display: flex;
+    justify-content: center;
+    color: white;
+    align-items: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+
+    transition: opacity 0.3s ease;
+    z-index: 4;
+
+}
+
+.cover-container:hover .icons {
+    opacity: 1;
+
+}
+
+.icon-small {
+    width: 35px;
+    height: 35px;
+    align-self: center;
+    filter: brightness(0) invert(1);
+
+    padding: 10px;
+    opacity: 50%;
+}
+
+.icon-big {
+    width: 60px;
+    height: 60px;
+    align-self: center;
+    padding: 10px;
+    transition: transform 0.3s ease;
+    filter: brightness(0) invert(1);
+
+    opacity: 50%;
+}
+
+.icon-big:hover {
+    transform: scale(1.2);
+    opacity: 100%;
+
+}
+
+.icon-small:hover {
+    opacity: 100%;
+
+}
+
+.overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0);
+    z-index: 2;
+    transition: background-color 0.3s ease;
+
+}
+
+.cover-container:hover .overlay {
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 3;
+
+}
diff --git a/src/components/AlbumCover.jsx b/src/components/AlbumCover.jsx
@@ -0,0 +1,20 @@
+import React from "react";
+import './AlbumCover.css';
+import dotsIcon from "../assets/icons/dots.svg";
+import heartIcon from "../assets/icons/heart.svg";
+import playIcon from "../assets/icons/play.svg";
+
+
+export const AlbumCover = ({ imageUrl, alt }) => {
+    return (
+        <div className="cover-container ">
+            <img className="album-cover" src={imageUrl} alt={alt} />
+            <div className="overlay"></div>
+            <div className="icons">
+                <img className="icon-small" src={heartIcon} alt="heart-icon" />
+                <img className="icon-big" src={playIcon} alt="play-icon" />
+                <img className="icon-small" src={dotsIcon} alt="dots-icon" />
+            </div>
+        </div>
+    );
+};
diff --git a/src/components/AlbumName.css b/src/components/AlbumName.css
@@ -0,0 +1,13 @@
+.album-name {
+    font-family: Helvetica, sans-serif;
+    color: white;
+    font-size: 14px;
+    text-decoration: none;
+
+
+}
+
+.album-name:hover {
+    text-decoration: underline;
+
+}
diff --git a/src/components/AlbumName.jsx b/src/components/AlbumName.jsx
@@ -0,0 +1,10 @@
+import React from "react";
+import './AlbumName.css';
+
+export const AlbumName = ({ name, url }) => {
+    return (
+        <a href={url} target="_blank" rel="noopener noreferrer" className="album-name">
+            {name}
+        </a>
+    );
+};
diff --git a/src/components/App.css b/src/components/App.css
@@ -0,0 +1,30 @@
+.App {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 20px;
+    background-color: #000000;
+    color: white;
+    padding: 15px;
+    text-align: left;
+
+
+}
+
+
+/* Mobile */
+
+@media (max-width: 768px) {
+    .App {
+        grid-template-columns: repeat(1, 1fr);
+
+    }
+}
+
+/* Ipads */
+
+@media (max-width: 1024px) and (min-width: 767px) {
+    .App {
+        grid-template-columns: repeat(2, 1fr);
+
+    }
+}
diff --git a/src/components/ArtistName.css b/src/components/ArtistName.css
@@ -0,0 +1,13 @@
+.artist-name {
+    font-family: Helvetica, sans-serif;
+    color: #a0a0a0;
+    font-size: 14px;
+    text-decoration: none;
+
+
+}
+
+.artist-name:hover {
+    text-decoration: underline;
+
+}
diff --git a/src/components/ArtistName.jsx b/src/components/ArtistName.jsx
@@ -0,0 +1,20 @@
+import React from "react";
+import './ArtistName.css';
+
+export const ArtistName = ({ artist, index, totalArtists }) => {
+    let separator = "";
+
+
+    if (index < totalArtists - 1) {
+        separator = " & ";
+    }
+
+    return (
+        <span>
+            <a href={artist.external_urls.spotify} target="_blank" rel="noopener noreferrer" className="artist-name">
+                {artist.name}
+            </a>
+            {separator}
+        </span>
+    );
+};
diff --git a/src/components/Header.css b/src/components/Header.css
@@ -0,0 +1,13 @@
+.header {
+    background-color: rgb(0, 0, 0);
+
+
+
+}
+
+h1 {
+    margin: 0;
+    padding: 20px;
+    text-align: center;
+    color: white;
+}
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -0,0 +1,12 @@
+import React from "react";
+import './Header.css';
+
+export const Header = () => {
+    return (
+        <div className="header">
+            <h1>Music releases</h1>
+        </div>
+    );
+
+}
+
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,5 +16,6 @@ module.exports = { @@
           'warn',
           { allowConstantExport: true },
         ],
+        'react/prop-types': 'off'
       },
-    }
+    }