Files added

williamdsw · Dec 12, 2019 · 08cdb9e · 08cdb9e
1 parent 003942d
commit 08cdb9e
Show file tree

Hide file tree

Showing 8 changed files with 337 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -1 +1,3 @@
-# listened-albums
+# listened-albums
+
+Challanged by (MrS4w)[https://mrs4w.github.io/listened-albums/] to do something related to my last "new" listened albums.
diff --git a/css/listened-albums.css b/css/listened-albums.css
@@ -0,0 +1,52 @@
+body {background-color: #1e2c4f; }
+
+/* album */
+.album { color: white; text-shadow: 2px 1px red; }
+.album a { text-shadow: none; }
+.album a.listen { color: yellow; font-weight: bold; }
+
+/* hover */
+.hover-effect 
+{
+  width: 100%;
+  height: 100%;
+  float: left;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  cursor: default;
+}
+
+.hover-effect img
+{
+  display: block;
+  position: relative;
+  -webkit-transition: all .4s linear;
+  transition: all .4s linear;
+}
+
+.hover-effect .overlay
+{
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  -webkit-transition: all .4s ease-in-out;
+  transition: all .4s ease-in-out;
+}
+
+.hover-effect:hover img 
+{
+  -ms-transform: scale(1.2);
+  -webkit-transform: scale(1.2);
+  transform: scale(1.2);
+}
+
+.hover-effect:hover .overlay { opacity: 1; filter: alpha(opacity=100); }
+
+/* bootstrap ... */
+.form-group { margin: auto; }
diff --git a/files/disc-vinyl.png b/files/disc-vinyl.png
diff --git a/index.html b/index.html
@@ -0,0 +1,58 @@
+<! DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
+        <!-- css -->
+        <link rel="stylesheet" href="libs/bootstrap/bootstrap.min.css"/>
+        <link rel="stylesheet" href="css/listened-albums.css"/>
+        <link rel="shortcut icon" href="files/disc-vinyl.png"/>
+
+        <title> "New" Listened Albums ... </title>
+    </head>
+    <body>
+
+        <!-- Navbar -->
+        <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
+            <section class="container">
+
+                <!-- Search -->
+                <div class="form-row col-md-6 m-auto">
+                    <div class="form-group col-md-8">
+                        <input type="search" id="keywords_input" class="form-control" placeholder="Search" aria-label="Search" value=""/>
+                    </div>
+                    <div class="form-group col-md-4">
+                        <select id="property_select" class="form-control mr-sm-2">
+                            <option value="name"> Album </option>
+                            <option value="artist"> Artist </option>
+                            <option value="releaseYear"> Released Year </option>
+                            <option value="genre"> Genre </option>
+                        </select>
+                    </div>
+                </div>
+            </section>
+        </nav>
+
+        <br/>
+
+        <!-- Content -->
+        <div class="container mt-5">
+            <div class="row">
+                <div class="jumbotron m-auto">
+                    <p>
+                        Challanged by <a href="https://mrs4w.github.io/listened-albums/"> MrS4w </a> 
+                        to do something related to my last "new" listened albums.
+                    </p>
+                </div>
+            </div>
+            <div id="albums_container" class="row"></div>
+        </div>
+
+        <!-- js -->
+        <script src="js/album.js"></script>
+        <script src="js/data.js"></script>
+        <script src="js/listened-albums.js"></script>
+    </body>
+</html>
diff --git a/js/album.js b/js/album.js
@@ -0,0 +1,14 @@
+"use strict";
+
+class Album
+{
+    constructor ({ name, artist, releaseYear, genre, cover, spotifyLink })
+    {
+        this.name = name;
+        this.artist = artist;
+        this.releaseYear = releaseYear;
+        this.genre = genre;
+        this.cover = cover;
+        this.spotifyLink = spotifyLink;
+    }
+}
diff --git a/js/data.js b/js/data.js
@@ -0,0 +1,150 @@
+"use strict";
+
+const albums =
+[
+    new Album ({
+        name: "Seventh Star",
+        artist: "Black Sabbath",
+        genre: "Heavy Metal",
+        releaseYear: 1986,
+        cover: "https://upload.wikimedia.org/wikipedia/en/2/25/Black-Sabbath-seventh-star.jpg",
+        spotifyLink: "https://open.spotify.com/album/557z9zU5A2g5jhZBiu8obi",
+    }),
+    new Album ({
+        name: "The Very Best",
+        artist: "INXS",
+        genre: "New Wave",
+        releaseYear: 2011,
+        cover: "https://upload.wikimedia.org/wikipedia/en/2/2b/INXS_-_The_Very_Best.png",
+        spotifyLink: "https://open.spotify.com/album/0ByciEsG5VvGzWOG7o3rAn",
+    }),
+    new Album ({
+        name: "No Easy Way Out",
+        artist: "Robert Tepper",
+        genre: "Rock",
+        releaseYear: 1986,
+        cover: "https://upload.wikimedia.org/wikipedia/en/a/aa/Robert_Tepper_No_Easy_Way_Out_1986_Album_Cover.jpg",
+        spotifyLink: "https://open.spotify.com/album/1hN5Xzuzfhqk2sIBtNZmP1",
+    }),
+    new Album ({
+        name: "Fixed",
+        artist: "Nine Inch Nails",
+        genre: "Industrial Rock",
+        releaseYear: 1992,
+        cover: "https://upload.wikimedia.org/wikipedia/en/f/f0/Nine_Inch_Nails_-_Fixed.png",
+        spotifyLink: "https://open.spotify.com/album/6tmbCwAFWR5Qe9TaXjP8jN",
+    }),
+    new Album ({
+        name: "Don't Stop",
+        artist: "Billy Idol",
+        genre: "Dance-Rock",
+        releaseYear: 1981,
+        cover: "https://upload.wikimedia.org/wikipedia/en/1/1d/BillyIdolDontStop.jpg",
+        spotifyLink: "https://open.spotify.com/album/6UNswjupuKnxiPMnEAa9Hp",
+    }),
+    new Album ({
+        name: "Dreams of Reason Produce Monsters",
+        artist: "Mick Karn",
+        genre: "Experimental Rock",
+        releaseYear: 1986,
+        cover: "https://rovimusic.rovicorp.com/image.jpg?c=TtCUvUxs95KSLNd16Zz-PZhUoDg0hsvx4F4sL4oO-nA=&f=5",
+        spotifyLink: "https://open.spotify.com/album/6dZ3jcyq6IIEdEpOS1rsDM",
+    }),
+    new Album ({
+        name: "Songs for the Deaf",
+        artist: "Queens of the Stone Age",
+        genre: "Stoner Rock",
+        releaseYear: 2002,
+        cover: "https://upload.wikimedia.org/wikipedia/en/0/01/Queens_of_the_Stone_Age_-_Songs_for_the_Deaf.png",
+        spotifyLink: "https://open.spotify.com/album/4w3NeXtywU398NYW4903rY",
+    }),
+    new Album ({
+        name: "Don't Say No",
+        artist: "Billy Squier",
+        genre: "Rock",
+        releaseYear: 1981,
+        cover: "https://upload.wikimedia.org/wikipedia/en/8/83/Billy_Squier_-_Don%27t_Say_No.jpg",
+        spotifyLink: "https://open.spotify.com/album/6TwlLNU5Zd9qGuNgSLeWPt",
+    }),
+    new Album ({
+        name: "16 Strokes: The Best of Billy Squier",
+        artist: "Billy Squier",
+        genre: "Rock",
+        releaseYear: 1995,
+        cover: "https://rovimusic.rovicorp.com/image.jpg?c=0T6qDMFp68tgb6jrEZEzPA4Q1ghY8VaPylnm7PwcKNY=&f=5",
+        spotifyLink: "https://open.spotify.com/album/6YtnoMLw5v2UhFTReAn7z1",
+    }),
+    new Album ({
+        name: "Damn Yankees",
+        artist: "Damn Yankees",
+        genre: "Hard Rock",
+        releaseYear: 1990,
+        cover: "https://upload.wikimedia.org/wikipedia/en/b/b1/DYDY.jpg",
+        spotifyLink: "https://open.spotify.com/album/2GSZ2kruaBmA5hR9xngeBX",
+    }),
+    new Album ({
+        name: "Mr. Big",
+        artist: "Mr. Big",
+        genre: "Hard Rock",
+        releaseYear: 1989,
+        cover: "https://upload.wikimedia.org/wikipedia/en/f/f0/Mr_Big_Self-Titled.jpg",
+        spotifyLink: "https://open.spotify.com/album/18HPDet34B8LwgCfagDeZd",
+    }),
+    new Album ({
+        name: "Lean into It",
+        artist: "Mr. Big",
+        genre: "Hard Rock",
+        releaseYear: 1991,
+        cover: "https://upload.wikimedia.org/wikipedia/commons/2/2c/Mr._Big_-_Lean_Into_It.jpg",
+        spotifyLink: "https://open.spotify.com/album/6CrjpyjlfjK95oHF6dvEnQ",
+    }),
+    new Album ({
+        name: "In Trance",
+        artist: "Scorpions",
+        genre: "Hard Rock",
+        releaseYear: 1975,
+        cover: "https://upload.wikimedia.org/wikipedia/en/f/fc/In_Trance_%28Scorpions_album_-_cover_art%29.jpg",
+        spotifyLink: "https://open.spotify.com/album/1IxCkGzmfbrod37MqDPUHm",
+    }),
+    new Album ({
+        name: "Lest We Forget (The Best Of)",
+        artist: "Marilyn Manson",
+        genre: "Heavy Metal",
+        releaseYear: 2004,
+        cover: "https://upload.wikimedia.org/wikipedia/en/0/06/Marilyn_Manson_-_Lest_We_Forget.png",
+        spotifyLink: "https://open.spotify.com/album/16iYefmYfh5RJg4XEi6rG9",
+    }),
+    new Album ({
+        name: "Further Down the Spiral",
+        artist: "Nine Inch Nails",
+        genre: "Post-industrial",
+        releaseYear: 1995,
+        cover: "https://upload.wikimedia.org/wikipedia/en/1/17/Further_down_the_spiral.jpg",
+        spotifyLink: "https://open.spotify.com/album/6v4pXGNQv0Xc81H3iYdybc",
+    }),
+    new Album ({
+        name: "The Headless Children",
+        artist: "W.A.S.P",
+        genre: "Heavy Metal",
+        releaseYear: 1989,
+        cover: "https://upload.wikimedia.org/wikipedia/en/d/db/The_Headless_Children_%28W.A.S.P._album_-_cover_art%29.jpg",
+        spotifyLink: "https://open.spotify.com/album/73tznjCvNu9tDQW5jcrglq",
+    }),
+    new Album ({
+        name: "The Crimson Idol",
+        artist: "W.A.S.P",
+        genre: "Heavy Metal",
+        releaseYear: 1992,
+        cover: "https://upload.wikimedia.org/wikipedia/en/7/75/Waspcrimsonidol.jpg",
+        spotifyLink: "https://open.spotify.com/album/1qIXNs2KIv1DfO01lwoUfz",
+    }),
+    new Album ({
+        name: "2112",
+        artist: "Rush",
+        genre: "Progressive Rock",
+        releaseYear: 1976,
+        cover: "https://upload.wikimedia.org/wikipedia/en/c/c9/Rush_2112.jpg",
+        spotifyLink: "https://open.spotify.com/album/5g5aKkI0ExfU4kDvADP6JK",
+    }),
+
+];
diff --git a/js/listened-albums.js b/js/listened-albums.js
@@ -0,0 +1,53 @@
+"use strict";
+
+window.addEventListener ("load", function ()
+{
+    const keywordsInput = document.querySelector ("#keywords_input");
+    const propertySelect = document.querySelector ("#property_select");
+
+    keywordsInput.addEventListener ("keyup", function ()
+    {
+        if (this.value != "")
+        {
+            let property = propertySelect[propertySelect.selectedIndex].value;
+            let searchString = this.value;
+            filterList (property, searchString);
+        }
+        else
+        {
+            listAll (albums);
+        }
+    });
+
+    listAll (albums);
+});
+
+function listAll (albums)
+{
+    const container = document.querySelector ('#albums_container');
+    container.innerHTML = "";
+    albums.forEach ((album, index) => 
+    {
+        container.innerHTML +=
+        `<div class="album col-lg-3 col-md-3 col-xs-6 p-2">
+            <div class="hover-effect">
+                <img src="${album.cover}" class="card-img-top"/>
+                <div class="overlay">
+                    <div class="info">
+                        <h3 class="text-center mt-5"> ${album.name} </h3>
+                        <h4 class="text-center"> ${album.artist} </h4>
+                        <h6 class="text-center">Released: ${album.releaseYear} </h6>
+                        <h6 class="text-center"> ${album.genre} </h6>
+                        <a class="listen" href="${album.spotifyLink}" target="_blank">Listen</a>
+                    </div>
+                </div>
+            </div>
+        </div>`;
+    });
+}
+
+function filterList (property, searchString)
+{
+    let filtered = albums.filter (album => album[property].toString ().toLowerCase ().includes (searchString.toLowerCase ()));
+    listAll (filtered);
+}
diff --git a/libs/bootstrap/bootstrap.min.css b/libs/bootstrap/bootstrap.min.css