Technigo · Anna2024WebDev · Oct 10, 2024 · Oct 10, 2024 · Oct 10, 2024 · Oct 10, 2024
diff --git a/README.md b/README.md
@@ -1,37 +1,13 @@
-<h1 align="center">
-  <a href="">
-    <img src="/src/assets/music-releases.svg" alt="Project Banner Image">
-  </a>
-</h1>
-
 # 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.
-
-## 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
-```
+This week we started learning about React. Our first project in React was to build a Spotify mockup page. 
 
 ### The Problem
+I started by sketching out on paper how I wanted the structure of the components to be, I changed the structure a couple of times. I wanted it to be as simple as possible so It was easy to follow and understand. I finally choose to divide the components based on the different objects and different features that we should cover and items that belonged to each component. Like for example the icons and hoover effects I imported and added to the the CoverImage files since the icons would show on the images when hoovered. 
 
-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?
+Then I moved on to importing and exporting components and after that moved on to the styling. It was tricky with the styling of each component but also very easy to follow in the end. I looked at my older projects a lot and of course googled and asked chatGPT. At first I forgot to import the CSS files and could not understand why none of the changes I made was reflected in the browser. 
 
-### View it live
+If I had more time I would go for the stretch goals and add more hoover effects.
 
-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.
-
-## Instructions
+### View it live
+https://myspotifymockup.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>SoundScape- My Spotify Mockup</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,29 @@
 import data from "./data.json";
+import { Album } from "./components/Album.jsx";
+import { Header } from "./components/Header.jsx";
+import { Footer } from "./components/Footer.jsx";
 
-console.log(data);
 
 export const App = () => {
-  return <div>Find me in src/app.jsx!</div>;
+  const { albums } = data;
+  const renderAlbums = albums.items.map(
+    ({ id, name, external_urls, artists, images }) => (
+      <Album
+        key={id}
+        name={name}
+        albumUrl={external_urls.spotify}
+        artists={artists}
+        image={images[1].url}
+      />
+    )
+  );
+  return (
+    <>
+      <Header />
+      <div className="albumSection">{renderAlbums}</div>
+      <Footer />
+    </>
+  );
 };
+
+
diff --git a/src/assets/icons/dots.svg b/src/assets/icons/dots.svg
diff --git a/src/assets/icons/heart.svg b/src/assets/icons/heart.svg
diff --git a/src/assets/icons/play.svg b/src/assets/icons/play.svg
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/assets/music-releases.svg b/src/assets/music-releases.svg
diff --git a/src/components/Album.css b/src/components/Album.css
@@ -0,0 +1,31 @@
+.album {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 15px;
+  position: relative;
+}
+
+.albumSection {
+  display: grid;
+  gap: 10px;
+  grid-template-columns: repeat(4, 1fr);
+}
+
+
+/* ------------------------------------Media Queries--------------------------------------- */
+
+/* Media query for tablets (2 albums per row) */
+@media (max-width: 1024px) {
+  .albumSection {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+
+/* Media query for mobile (1 album per row) */
+@media (max-width: 480px) {
+  .albumSection {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/src/components/Album.jsx b/src/components/Album.jsx
@@ -0,0 +1,15 @@
+/* eslint-disable react/prop-types */
+import "./Album.css"
+import { CoverImage } from "./CoverImage.jsx"
+import { AlbumName } from "./AlbumName.jsx"
+import { ArtistName } from "./ArtistName.jsx"
+
+export const Album = ({ name, albumUrl, artists, image }) => {
+  return (
+    <div className="album">
+      <CoverImage image={image} />
+      <AlbumName name={name} albumUrl={albumUrl} />
+      <ArtistName artists={artists} />
+    </div>
+  );
+}
diff --git a/src/components/AlbumName.css b/src/components/AlbumName.css
@@ -0,0 +1,19 @@
+.albumName {
+  font-size: 14px;
+  font-weight: bolder;
+  font-family: Helvetica;
+  color: #ffffff;
+  margin: 10px 0px 5px;
+}
+
+.albumName a {
+  text-decoration: none;
+  color: #ffffff;
+  transition: color 0.3s ease;
+  text-align: left;
+}
+
+.albumName a:hover {
+  color: #ffffff;
+  text-decoration: underline;
+}
diff --git a/src/components/AlbumName.jsx b/src/components/AlbumName.jsx
@@ -0,0 +1,12 @@
+/* eslint-disable react/prop-types */
+
+import "./AlbumName.css"
+
+export const AlbumName = ({ name, albumUrl }) => {
+  return (
+    <p className="albumName">
+      <span></span>
+      <a href={albumUrl}>{name}</a>
+    </p>
+  );
+};
diff --git a/src/components/ArtistName.css b/src/components/ArtistName.css
@@ -0,0 +1,19 @@
+.artistName span {
+  font-size: 14px;
+  font-family: Helvetica;
+  color: #a0a0a0;
+}
+
+.artistName a {
+  text-decoration: none;
+  color: #a0a0a0;
+  transition: color 0.3s ease;
+  display: inline;
+  text-align: left;
+  /* Ensures artist names are on the same line */
+}
+
+.artistName a:hover {
+  color: #fff;
+  text-decoration: underline;
+}
diff --git a/src/components/ArtistName.jsx b/src/components/ArtistName.jsx
@@ -0,0 +1,18 @@
+/* eslint-disable react/prop-types */
+
+import "./ArtistName.css";
+
+export const ArtistName = ({ artists }) => {
+  return (
+    <div className="artistName">
+      {artists.map(({ id, name, external_urls }, index) => (
+        <span key={id}>
+          <a href={external_urls.spotify}>
+            {name}
+          </a>
+          {index < artists.length - 1 && ", "} {/* Add comma if not last artist */}
+        </span>
+      ))}
+    </div>
+  );
+};
diff --git a/src/components/CoverImage.css b/src/components/CoverImage.css
@@ -0,0 +1,55 @@
+.coverImage {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+.albumCoverImage {
+  width: 100%;
+  height: auto;
+  display: block;
+  transition: filter 0.3s ease;
+}
+
+.coverImage:hover .albumCoverImage {
+  filter: brightness(50%);
+  /* makes the album cover image darker when you hover over it.  */
+}
+
+.icons {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 15px;
+  opacity: 0;
+  /*Opacity 0, Icons not showing at all  */
+  transition: opacity 0.3s ease;
+  fill: #ffffff;
+}
+
+.coverImage:hover .icons {
+  opacity: 1;
+  /*Opacity 1, Icons showing on hoover. */
+}
+
+.icon {
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
+  transition: transform 0.3s ease;
+}
+
+.play.icon:hover {
+  transform: scale(1.2);
+  /* Makes play icon grow on hoover */
+}
+
+.play.icon {
+  width: 60px;
+  height: 60px;
+}
diff --git a/src/components/CoverImage.jsx b/src/components/CoverImage.jsx
@@ -0,0 +1,22 @@
+/* eslint-disable react/prop-types */
+import "./CoverImage.css"
+
+import dots from "../assets/icons/dots.svg"
+import heart from "../assets/icons/heart.svg"
+import playIcon from "../assets/icons/play.svg"
+
+export const CoverImage = ({ image }) => {
+
+  return (
+    <div className="coverImage">
+      <img src={image} alt="Album cover image" className="albumCoverImage" />
+      <div className="icons">
+        <img src={heart} alt="Heart" className="heart icon" />
+        <img src={playIcon} alt="Play" className="play icon" />
+        <img src={dots} alt="dots" className="dots icon" />
+      </div>
+    </div>
+
+  )
+
+}
diff --git a/src/components/Footer.css b/src/components/Footer.css
@@ -0,0 +1,16 @@
+.Footer {
+  top: 0;
+  left: 0;
+  width: 100%;
+  color: #a0a0a0;
+  font-weight: 300;
+  text-align: center;
+  box-sizing: border-box;
+  /* Include padding in the element's total width */
+}
+
+footer p {
+  font-size: 15px;
+  font-weight: 400;
+  margin: 30px 0px 30px;
+}
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -0,0 +1,11 @@
+import "./Footer.css"
+
+export const Footer = () => {
+  return (
+    <>
+      < footer className="Footer">
+        <p>Created by Anna Hansen, Technigo 2024</p>
+      </footer >
+    </>
+  );
+};
diff --git a/src/components/Header.css b/src/components/Header.css
@@ -0,0 +1,27 @@
+.Header {
+  top: 0;
+  left: 0;
+  width: 100%;
+  color: #ffffff;
+  text-align: center;
+  box-sizing: border-box;
+  /* Include padding in the element's total width */
+}
+
+img.logo {
+  width: 100px;
+  height: auto;
+  display: block;
+  margin: 15px auto;
+}
+
+h1 {
+  font-size: 35px;
+  margin: 10px 0px;
+}
+
+header p {
+  font-size: 20px;
+  margin: 10px 0px;
+  padding-bottom: 15px;
+}
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -0,0 +1,16 @@
+import "./Header.css"
+import logo from "../assets/logo.png"
+
+export const Header = () => {
+  return (
+    <>
+      < header className="Header">
+        <h1><img src={logo} alt="logo" className="SoundScape logo" />SoundScape</h1>
+        <p>Explore trending artists and albums</p>
+      </header >
+    </>
+  );
+};
+
+
+