Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
There are no files selected for viewing
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
|
|
||
| <title>Featured Playlist</title> | ||
|
|
||
| <link rel="stylesheet" href="style.css"> | ||
| </head> | ||
| <body style="background-color: #c4e1ff;"> | ||
| <header id="featHeader" style="background-color: #c4e1ff; text-align: center;"> | ||
This comment has been minimized.
Sorry, something went wrong. |
||
| <h1 id="featureHead" style="color: white;">Featured Playlist</h1> | ||
| <a class="backToExp" href="index.html" title="Link" style=" | ||
| text-decoration: none; | ||
| margin-bottom: 30px; | ||
| background-image: linear-gradient(45deg, | ||
| #bcd2f6, | ||
| #67a2f5, ); | ||
| -webkit-text-fill-color: white; | ||
| transition: color 0.3s, background 0.3s, background-position 0.5s; | ||
| padding: 5px; | ||
| box-shadow: 2px 2px 5px rgba(0,0,100,0.5); | ||
| border-radius: 3px; | ||
| background-size: 200% auto; | ||
| font-weight: bold;">return to explore</a> | ||
| </header> | ||
| <main style="background: linear-gradient(180deg, #c4e1ff, #22c1ff);; padding-top: 40px;"> | ||
| <div id="ftPlay"> | ||
This comment has been minimized.
Sorry, something went wrong. |
||
|
|
||
| </div> | ||
| </main> | ||
|
|
||
|
|
||
| <footer> | ||
| <p id="blueFoot">Made by Tessa Orozco</p> | ||
| </footer> | ||
| <script src="data/data.js"></script> | ||
| <script src="script.js"></script> | ||
|
|
||
| </body> | ||
| </html> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,178 @@ | ||
| const modal = document.getElementById("cardModal"); | ||
| const closeM = document.getElementById("close"); | ||
| const modalCont = document.getElementById('modal-content'); | ||
| const cards = data.playlists; | ||
| const ftPage = document.getElementById('ftPlay'); | ||
|
|
||
| document.addEventListener('DOMContentLoaded', () => { | ||
| const pathname = document.location.pathname; | ||
| if (pathname === '/Users/tessaoro/Desktop/codepath/site-unit2-project1-music-playlist-explorer-starter/music-playlist-creator/index.html') { | ||
This comment has been minimized.
Sorry, something went wrong. 
tianyiyu99
|
||
| loadPlaylists(); | ||
| closeModal(); | ||
| } else { | ||
| featurePlaylist(); | ||
| } | ||
| }); | ||
|
|
||
|
|
||
| function openModal(card) { | ||
| modalCont.innerHTML = ` | ||
| <img id="playlistImg" src=${card.playlist_art} style="border-radius: 5px;"> | ||
| <div id="playlistInfo"> | ||
| <h1 id="playlistTitle">${card.playlist_name}</h1> | ||
| <p id="creator">Created by ${card.playlist_creator}</p> | ||
| </div> | ||
| <div onclick="shuffle(this.parentNode)" style=" | ||
| cursor: pointer; | ||
| color: white; | ||
| width: 180px; | ||
| text-align: center; | ||
| border-radius: 4px; | ||
| padding: 10px; | ||
| background-color: #ffa42de0; | ||
| ">~shuffle~</div> | ||
| <ul id="songs" style="list-style-type: none;"></ul> | ||
| `; | ||
| const songs = card.songs; | ||
| songs.forEach(song => { | ||
| const songFormat = createSongElement(song); | ||
| modalCont.querySelector("#songs").appendChild(songFormat); | ||
| }) | ||
| modal.style.display = "block"; | ||
| } | ||
|
|
||
| function shuffle(modalPage) { | ||
| const songList = modalPage.querySelector("#songs"); | ||
| for (var i = songList.children.length; i>=0; i--) { | ||
| songList.appendChild(songList.children[Math.random() * i | 0]); | ||
| } | ||
| } | ||
|
|
||
| function createSongElement(song) { | ||
| const songE = document.createElement('li'); | ||
This comment has been minimized.
Sorry, something went wrong. |
||
| // songE.setAttribute('class', 'songElem'); | ||
This comment has been minimized.
Sorry, something went wrong. |
||
| // songE.setAttribute('style', "list-style-type: none;"); | ||
| songE.innerHTML = ` | ||
| <div id="songElem" style="border: 5px rgb(0, 0, 0); margin-bottom: 20px;"> | ||
| <img src=${song.cover_art} style="display: inline-block; width: 100px; height: auto; margin-right: 30px; border-radius: 3px;"> | ||
| <span style="display: inline-block; vertical-align: top; margin-top: 10px;"> | ||
| <p id="songTitle" style="margin-bottom: 10px; margin-top: 0px; font-weight: bold;">${song.title}</p> | ||
| <p id="artist" style="margin: 0px;">by ${song.artist}</p> | ||
| <p id="album" style="margin-top: 10px;">Album: ${song.album}</p> | ||
| </span> | ||
| <span id="duration" style="display: inline-block; float:right; padding-right: 5%; margin-top: 20px;">${song.duration}</span> | ||
| </div> | ||
| `; | ||
| return songE; | ||
| } | ||
|
|
||
| function closeModal() { | ||
| modal.style.display = "none"; | ||
| } | ||
|
|
||
| closeM.addEventListener('click', closeModal); | ||
|
|
||
| window.onclick = function(event) { | ||
| if (event.target == modal) { | ||
| modal.style.display = "none"; | ||
| } | ||
| } | ||
|
|
||
| function loadPlaylists() { | ||
| console.log(cards); | ||
This comment has been minimized.
Sorry, something went wrong.
This comment has been minimized.
Sorry, something went wrong. |
||
| const playlists = document.getElementById('playlist-cards'); | ||
| cards.forEach(card => { | ||
| const cardElement = createCardElement(card); | ||
| cardElement.addEventListener('click', (event) => { | ||
| if (!(event.target.id == 'heart' || event.target.id == 'deleteButton')) { | ||
| openModal(card); | ||
| } | ||
| }); | ||
| playlists.appendChild(cardElement); | ||
| }); | ||
| } | ||
|
|
||
| function createCardElement(card) { | ||
| const article = document.createElement('article'); | ||
| article.setAttribute('class', 'playlistSection'); | ||
| article.setAttribute('id', 'card'); | ||
| /* article.setAttribute('style', "box-shadow: 2px 2px 5px rgba(0,0,100,0.5)"); */ | ||
| article.innerHTML = ` | ||
| <div> | ||
| <img src=${card.playlist_art} style="border-radius: 5px;"> | ||
| <h1 id="playlistTitle" style="font-size: 1.3em;">${card.playlist_name}</h1> | ||
| <p id="creator">Created by ${card.playlist_creator}</p> | ||
| <img id="heart" src="assets/img/empty-heart.png" onclick="like(this.parentNode, card)" style=width:20px; height:20px; > | ||
| <p id="likeCount" style=margin:1px;>${card.likeCount}</p> | ||
| <p id="deleteButton" style="color: rgba(232, 70, 0); float: right; | ||
| padding-top: 0px; margin-top: 0px; font-size: 0.75rem" | ||
| onclick="deletePlaylist(this.parentNode)">delete</p> | ||
| </div> | ||
| <style> | ||
| #deleteButton { | ||
| transition: 0.3s; | ||
| } | ||
| #deleteButton:hover { | ||
| font-weight: bold; | ||
| } | ||
| </style> | ||
| `; | ||
| return article; | ||
| } | ||
|
|
||
| function like(playSection, card) { | ||
| const heart = playSection.querySelector('#heart'); | ||
| const likeCount = playSection.querySelector('#likeCount'); | ||
| console.log("Heart"); | ||
This comment has been minimized.
Sorry, something went wrong. |
||
| if (heart.src.match("assets/img/empty-heart.png")) { | ||
This comment has been minimized.
Sorry, something went wrong. |
||
| heart.src = "assets/img/red-heart.png"; | ||
| likeCount.innerText = String(parseInt(likeCount.innerText) + 1); | ||
| card.likeCount = card.likeCount + 1; | ||
| } else { | ||
| heart.src = "assets/img/empty-heart.png"; | ||
| likeCount.innerText = String(parseInt(likeCount.innerText) - 1); | ||
| card.likeCount -= 1; | ||
| } | ||
| } | ||
|
|
||
| function deletePlaylist(selectedPlaylist) { | ||
| const toDel = selectedPlaylist.parentNode; | ||
| toDel.remove(); | ||
| } | ||
|
|
||
|
|
||
| function featurePlaylist() { | ||
| console.log("genft"); | ||
This comment has been minimized.
Sorry, something went wrong. |
||
| let numPlaylist = cards.length; | ||
| let randIndex = Math.floor(Math.random()*numPlaylist); | ||
| let card = cards[randIndex]; | ||
| ftPage.innerHTML = ` | ||
| <div style="display: inline-block; vertical-align: top; padding-left: 30px"> | ||
| <img src=${card.playlist_art} style="width: 500px; height: auto; object-fit: fill; border-radius: 7px; | ||
| margine-top: 40px;"> | ||
| <h1 id="playlistTitle" style="color: white;">${card.playlist_name}</h1> | ||
| </div> | ||
| <span style="display: inline-block; vertical-align: bottom; padding-left: 40px; width: 45%;"> | ||
| <ul id="songs" style="list-style-type: none; color: white;"></ul> | ||
| </span> | ||
| `; | ||
| const songs = card.songs; | ||
| songs.forEach(song => { | ||
| const songFormat = createSongElement(song); | ||
| ftPage.querySelector("#songs").appendChild(songFormat); | ||
| }) | ||
| } | ||
|
|
||
| function search_playlist() { | ||
| let input = document.getElementById('searchbar').value; | ||
| input = input.toLowerCase(); | ||
| let x = document.getElementsByClassName('playlistSection'); | ||
| console.log(x); | ||
This comment has been minimized.
Sorry, something went wrong. |
||
| for (let i = 0; i < x.length; i++) { | ||
| if (!x[i].innerHTML.toLowerCase().includes(input)) { | ||
| x[i].style.display = "none"; | ||
| } else { | ||
| x[i].style.display = "block"; | ||
| } | ||
| } | ||
| } | ||
Oops, something went wrong.
1 comment
on commit b36b6f1
There was a problem hiding this comment.
Great work! Some minor comments:
- Can we add some comments for each component in html file to briefly explain what the component is used for?
- Usually we need to clean up the loggings before we submit the codes. This will ensure users who see this page won't see the loggings.
- Store file path in const to make the code cleaner
- It's very risky to submit all the changes with one commit. Next time, let's try to breakdown the changes into small commits and make it easier for review. For example, we could break it down by different features we support.
nit: id="featureHeader"