Skip to content

Commit 830183e

Browse files
SGcpuSGcpu
committed
Updated the entire structure and made a menu bar
1 parent 11ddbd0 commit 830183e

3 files changed

Lines changed: 115 additions & 5 deletions

File tree

‎music/index.html‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,29 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0">
67
<title>Music Player</title>
78
<link rel="stylesheet" href="style.css">
89
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
910
</head>
11+
1012
<body>
1113
<div class="container">
1214
<div class="controls">
1315
<i class="fa-solid fa-chevron-left"></i>
1416
<i class="fa-solid fa-bars" id="menu"></i>
1517
</div>
16-
18+
<div class="playlist-container" id="playlist">
19+
<div class="playlist-header">
20+
<h3>Queue</h3>
21+
<i class="fa-solid fa-xmark" id="close-playlist"></i>
22+
</div>
23+
<ul id="playlist-songs">
24+
</ul>
25+
</div>
26+
1727
<div class="avatar-contents">
1828
<img id="cover-image" src="" alt="Album Art">
1929
<h2 id="song-title">Loading...</h2>
@@ -33,4 +43,5 @@ <h3 id="artist-name" style="font-size: 0.9rem; color: white; opacity: 0.8; margi
3343

3444
<script src="script.js"></script>
3545
</body>
46+
3647
</html>

‎music/script.js‎

Lines changed: 38 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,22 @@ const prevbtn = document.getElementById('prev-btn')
77
const nextbtn = document.getElementById('next-btn')
88
const playbtn = document.getElementById('play-btn')
99
const menu = document.getElementById('menu')
10+
const playlistContainer = document.getElementById('playlist');
11+
const openPlaylistBtn = document.querySelector('.fa-bars'); // The Hamburger icon
12+
const closePlaylistBtn = document.getElementById('close-playlist'); // The 'X' icon
13+
const playlistList = document.getElementById('playlist-songs');
1014

1115

1216
let songs = []
1317
let songIndex = 0;
14-
let isPlaying = false
18+
let isPlaying = false;
19+
let isList = false;
1520
let audio = new Audio();
1621

1722

1823
async function fetchsongs() {
1924
try{
20-
const response = await fetch('https://itunes.apple.com/search?term=lofi&media=music&limit=10')
25+
const response = await fetch('https://itunes.apple.com/search?term=lofi&media=music&limit=300')
2126
const data = await response.json();
2227
songs = data.results.map(track =>({
2328
title: track.trackName,
@@ -26,12 +31,35 @@ async function fetchsongs() {
2631
src: track.previewUrl
2732
}))
2833
loadSong(songs[songIndex])
34+
playlistdisplay()
2935
}catch(error){
3036
console.error("Error fecthing music", error)
3137
titleEl.innertext = "Error Loading Music";
3238
}
3339
}
3440

41+
42+
function playlistdisplay() {
43+
playlistList.innerHTML = '';
44+
45+
songs.forEach((song, index) => {
46+
const item = document.createElement('li');
47+
48+
item.innerText = song.title;
49+
item.classList.add('song-item');
50+
51+
item.addEventListener('click', () => {
52+
songIndex = index;
53+
loadSong(songs[songIndex]);
54+
playSong();
55+
playlistContainer.classList.remove('active');
56+
});
57+
58+
playlistList.append(item);
59+
});
60+
}
61+
62+
3563
function loadSong(song){
3664
titleEl.innerText = song.title;
3765
artistEl.innerText = song.artist;
@@ -96,13 +124,20 @@ function setProgress(e) {
96124
audio.currentTime = (clickX/width) * duration;
97125
}
98126

127+
99128
playbtn.addEventListener('click', toggle)
100129
prevbtn.addEventListener('click', prevSong)
101130
nextbtn.addEventListener('click', nextSong)
102131
audio.addEventListener('timeupdate', updateProgress)
103132
audio.addEventListener('ended', nextSong)
104133
timeline.addEventListener('click', setProgress)
105134
menu.addEventListener('click', (e)=>{
106-
alert("Feature coming soon!")
135+
menu()
107136
})
137+
openPlaylistBtn.addEventListener('click', () => {
138+
playlistContainer.classList.add('active');
139+
});
140+
closePlaylistBtn.addEventListener('click', () => {
141+
playlistContainer.classList.remove('active');
142+
});
108143
fetchsongs()

‎music/style.css‎

Lines changed: 65 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@ body{
1818
width: 35rem;
1919
background: #ef85fb;
2020
border: 2px dashed black;
21-
21+
position: relative;
22+
overflow: hidden;
2223
}
2324
.controls {
2425
height: 10%;
@@ -138,4 +139,67 @@ body{
138139
@keyframes spin {
139140
from { transform: rotate(0deg); }
140141
to { transform: rotate(360deg); }
142+
}
143+
144+
145+
/* Playlist Overlay */
146+
.playlist-container {
147+
position: absolute;
148+
top: 100%; /* Initially hidden below the card */
149+
left: 0;
150+
width: 100%;
151+
height: 80%; /* Covers the middle section */
152+
background-color: rgba(255, 255, 255, 0.95);
153+
border-top-left-radius: 20px;
154+
border-top-right-radius: 20px;
155+
transition: top 0.4s ease; /* Smooth slide up effect */
156+
z-index: 10;
157+
display: flex;
158+
flex-direction: column;
159+
padding: 1rem;
160+
}
161+
162+
/* Class to activate the menu */
163+
.playlist-container.active {
164+
top: 20%; /* Slides up to cover everything below controls */
165+
}
166+
167+
.playlist-header {
168+
display: flex;
169+
justify-content: space-between;
170+
align-items: center;
171+
margin-bottom: 1rem;
172+
color: #8d53bd;
173+
}
174+
175+
.playlist-header i {
176+
cursor: pointer;
177+
font-size: 1.5rem;
178+
}
179+
180+
#playlist-songs {
181+
list-style: none;
182+
overflow-y: auto; /* Allow scrolling if list is long */
183+
height: 100%;
184+
}
185+
186+
.song-item {
187+
display: flex;
188+
justify-content: space-between;
189+
padding: 10px;
190+
border-bottom: 1px solid #eee;
191+
cursor: pointer;
192+
color: #333;
193+
transition: background 0.2s;
194+
}
195+
196+
.song-item:hover {
197+
background-color: #ef85fb;
198+
color: white;
199+
}
200+
201+
/* Highlight the currently playing song */
202+
.song-item.active-song {
203+
color: #8d53bd;
204+
font-weight: bold;
141205
}

0 commit comments

Comments
 (0)