Skip to content

Commit 6e1490b

Browse files
Mu-WahajMu-Wahaj
committed
final commit
1 parent 7fc0102 commit 6e1490b

File tree

3 files changed

+136
-92
lines changed

3 files changed

+136
-92
lines changed

‎app.css

+21-1
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,11 @@ a {
164164
font-size: 2rem;
165165
}
166166

167+
.name-time {
168+
display: flex;
169+
align-items: center;
170+
margin-top: 10px;
171+
}
167172

168173
@media screen and (max-width:900px) {
169174
.songInfo {
@@ -190,7 +195,7 @@ a {
190195
}
191196

192197
.songs-left-items {
193-
font-size: 0.7rem;
198+
font-size: 0.8rem;
194199
}
195200
}
196201

@@ -238,5 +243,20 @@ a {
238243
.name-time {
239244
display: flex;
240245
flex-direction: column;
246+
align-items: center;
247+
}
248+
249+
.timestamp {
250+
margin-top: 5px;
251+
}
252+
253+
.timestamp i {
254+
margin-left: 10px;
255+
}
256+
}
257+
258+
@media screen and (max-width:768px) {
259+
.songs-left-items {
260+
font-size: 0.6rem;
241261
}
242262
}

‎index.html

+107-83
Original file line numberDiff line numberDiff line change
@@ -33,122 +33,146 @@ <h1>Best OF Month August - Copyright sounds</h1>
3333
<div class="songs-left-items">
3434
<div class="songItem">
3535
<img alt="cover" />
36-
<span class="songName">song name from js</span>
37-
<span class="songlistplay"
38-
><span class="timestamp"
39-
>05:34
40-
<i id="0" class="far songItemPlay fa-play-circle"></i> </span
41-
></span>
36+
<div class="name-time">
37+
<span class="songName">song name from js</span>
38+
<span class="songlistplay"
39+
><span class="timestamp"
40+
>05:34
41+
<i id="0" class="far songItemPlay fa-play-circle"></i> </span
42+
></span>
43+
</div>
4244
</div>
4345
<div class="songItem">
4446
<img alt="cover" />
45-
<span class="songName">song name from js</span>
46-
<span class="songlistplay"
47-
><span class="timestamp"
48-
>05:34
49-
<i id="1" class="far songItemPlay fa-play-circle"></i> </span
50-
></span>
47+
<div class="name-time">
48+
<span class="songName">song name from js</span>
49+
<span class="songlistplay"
50+
><span class="timestamp"
51+
>05:34
52+
<i id="1" class="far songItemPlay fa-play-circle"></i> </span
53+
></span>
54+
</div>
5155
</div>
5256
<div class="songItem">
5357
<img alt="cover" />
54-
<span class="songName">song name from js</span>
55-
<span class="songlistplay"
56-
><span class="timestamp"
57-
>05:34
58-
<i id="2" class="far songItemPlay fa-play-circle"></i> </span
59-
></span>
58+
<div class="name-time">
59+
<span class="songName">song name from js</span>
60+
<span class="songlistplay"
61+
><span class="timestamp"
62+
>05:34
63+
<i id="2" class="far songItemPlay fa-play-circle"></i> </span
64+
></span>
65+
</div>
6066
</div>
6167
<div class="songItem">
6268
<img alt="cover" />
63-
<span class="songName">song name from js</span>
64-
<span class="songlistplay"
65-
><span class="timestamp"
66-
>05:34
67-
<i id="3" class="far songItemPlay fa-play-circle"></i> </span
68-
></span>
69+
<div class="name-time">
70+
<span class="songName">song name from js</span>
71+
<span class="songlistplay"
72+
><span class="timestamp"
73+
>05:34
74+
<i id="3" class="far songItemPlay fa-play-circle"></i> </span
75+
></span>
76+
</div>
6977
</div>
7078
<div class="songItem">
7179
<img alt="cover" />
72-
<span class="songName">song name from js</span>
73-
<span class="songlistplay"
74-
><span class="timestamp"
75-
>05:34
76-
<i id="4" class="far songItemPlay fa-play-circle"></i> </span
77-
></span>
80+
<div class="name-time">
81+
<span class="songName">song name from js</span>
82+
<span class="songlistplay"
83+
><span class="timestamp"
84+
>05:34
85+
<i id="4" class="far songItemPlay fa-play-circle"></i> </span
86+
></span>
87+
</div>
7888
</div>
7989
<div class="songItem">
8090
<img alt="cover" />
81-
<span class="songName">song name from js</span>
82-
<span class="songlistplay"
83-
><span class="timestamp"
84-
>05:34
85-
<i id="5" class="far songItemPlay fa-play-circle"></i> </span
86-
></span>
91+
<div class="name-time">
92+
<span class="songName">song name from js</span>
93+
<span class="songlistplay"
94+
><span class="timestamp"
95+
>05:34
96+
<i id="5" class="far songItemPlay fa-play-circle"></i> </span
97+
></span>
98+
</div>
8799
</div>
88100
<div class="songItem">
89101
<img alt="cover" />
90-
<span class="songName">song name from js</span>
91-
<span class="songlistplay"
92-
><span class="timestamp"
93-
>05:34
94-
<i id="6" class="far songItemPlay fa-play-circle"></i> </span
95-
></span>
102+
<div class="name-time">
103+
<span class="songName">song name from js</span>
104+
<span class="songlistplay"
105+
><span class="timestamp"
106+
>05:34
107+
<i id="6" class="far songItemPlay fa-play-circle"></i> </span
108+
></span>
109+
</div>
96110
</div>
97111
<div class="songItem">
98112
<img alt="cover" />
99-
<span class="songName">song name from js</span>
100-
<span class="songlistplay"
101-
><span class="timestamp"
102-
>05:34
103-
<i id="7" class="far songItemPlay fa-play-circle"></i> </span
104-
></span>
113+
<div class="name-time">
114+
<span class="songName">song name from js</span>
115+
<span class="songlistplay"
116+
><span class="timestamp"
117+
>05:34
118+
<i id="7" class="far songItemPlay fa-play-circle"></i> </span
119+
></span>
120+
</div>
105121
</div>
106122
<div class="songItem">
107123
<img alt="cover" />
108-
<span class="songName">song name from js</span>
109-
<span class="songlistplay"
110-
><span class="timestamp"
111-
>05:34
112-
<i id="8" class="far songItemPlay fa-play-circle"></i> </span
113-
></span>
124+
<div class="name-time">
125+
<span class="songName">song name from js</span>
126+
<span class="songlistplay"
127+
><span class="timestamp"
128+
>05:34
129+
<i id="8" class="far songItemPlay fa-play-circle"></i> </span
130+
></span>
131+
</div>
114132
</div>
115133
<div class="songItem">
116134
<img alt="cover" />
117-
<span class="songName">song name from js</span>
118-
<span class="songlistplay"
119-
><span class="timestamp"
120-
>05:34
121-
<i id="9" class="far songItemPlay fa-play-circle"></i> </span
122-
></span>
135+
<div class="name-time">
136+
<span class="songName">song name from js</span>
137+
<span class="songlistplay"
138+
><span class="timestamp"
139+
>05:34
140+
<i id="9" class="far songItemPlay fa-play-circle"></i> </span
141+
></span>
142+
</div>
123143
</div>
124144
<div class="songItem">
125145
<img alt="cover" />
126-
<span class="songName">song name from js</span>
127-
<span class="songlistplay"
128-
><span class="timestamp"
129-
>05:34
130-
<i id="10" class="far songItemPlay fa-play-circle"></i> </span
131-
></span>
146+
<div class="name-time">
147+
<span class="songName">song name from js</span>
148+
<span class="songlistplay"
149+
><span class="timestamp"
150+
>05:34
151+
<i id="10" class="far songItemPlay fa-play-circle"></i> </span
152+
></span>
153+
</div>
132154
</div>
133155
<div class="songItem">
134156
<img alt="cover" />
135-
<span class="songName">song name from js</span>
136-
<span class="songlistplay"
137-
><span class="timestamp"
138-
>05:34
139-
<i id="11" class="far songItemPlay fa-play-circle"></i> </span
140-
></span>
157+
<div class="name-time">
158+
<span class="songName">song name from js</span>
159+
<span class="songlistplay"
160+
><span class="timestamp"
161+
>05:34
162+
<i id="11" class="far songItemPlay fa-play-circle"></i> </span
163+
></span>
164+
</div>
141165
</div>
142166
<div class="songItem">
143167
<img alt="cover" />
144-
<div class="name-time">
145-
<span class="songName">song name from js</span>
146-
<span class="songlistplay"
147-
><span class="timestamp"
148-
>05:34
149-
<i id="12" class="far songItemPlay fa-play-circle"></i> </span
150-
></span>
151-
</div>
168+
<div class="name-time">
169+
<span class="songName">song name from js</span>
170+
<span class="songlistplay"
171+
><span class="timestamp"
172+
>05:34
173+
<i id="12" class="far songItemPlay fa-play-circle"></i> </span
174+
></span>
175+
</div>
152176
</div>
153177
</div>
154178
</div>
@@ -165,9 +189,9 @@ <h1>Best OF Month August - Copyright sounds</h1>
165189
/>
166190
<div class="icons">
167191
<!-- fontawsome icons -->
168-
<i class="fa-solid fa-backward-step" id="previous"></i>
169-
<i class="far fa-play-circle" id="masterPlay"></i>
170-
<i class="fa-solid fa-forward-step" id="next"></i>
192+
<i class="fa-solid fa-backward-step" id="previous"></i>
193+
<i class="far fa-play-circle" id="masterPlay"></i>
194+
<i class="fa-solid fa-forward-step" id="next"></i>
171195
</div>
172196
<div class="songInfo">
173197
<img src="assets/playing.gif" width="42px" alt="cover" id="gif" />

‎index.js

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
console.log("welcome to Spotify");
22
let songsIndex = 0;
33
let audioElement = new Audio("songs/1.mp3");
4-
let mastePlay = document.getElementById("masterPlay");
4+
let masterPlay = document.getElementById("masterPlay");
55
let myProgressBar = document.getElementById("myProgressbar");
66
let songItems = Array.from(document.getElementsByClassName("songItem"));
77

@@ -83,19 +83,18 @@ songItems.forEach((element, i) => {
8383
masterPlay.addEventListener("click", () => {
8484
if (audioElement.paused || audioElement.currentTime <= 0) {
8585
audioElement.play();
86-
mastePlay.classList.remove("fa-play-circle");
87-
mastePlay.classList.add("fa-pause-circle");
86+
masterPlay.classList.remove("fa-play-circle");
87+
masterPlay.classList.add("fa-pause-circle");
8888
gif.style.opacity = 1;
8989
} else {
9090
audioElement.pause();
91-
mastePlay.classList.remove("fa-pause-circle");
92-
mastePlay.classList.add("fa-play-circle");
91+
masterPlay.classList.remove("fa-pause-circle");
92+
masterPlay.classList.add("fa-play-circle");
9393
gif.style.opacity = 0;
9494
}
9595
});
9696

9797
audioElement.addEventListener("timeupdate", () => {
98-
console.log("timeupdate");
9998
//update seeekbar
10099
let progress = parseInt(
101100
(audioElement.currentTime / audioElement.duration) * 100
@@ -149,11 +148,12 @@ document.getElementById("next").addEventListener("click", () => {
149148
masterPlay.classList.add("fa-pause-circle");
150149
});
151150
document.getElementById("previous").addEventListener("click", () => {
152-
if (songsIndex <= 12) {
153-
songsIndex = 0;
151+
if (songsIndex <= 0) {
152+
songsIndex = 12;
154153
} else {
155154
songsIndex -= 1;
156155
}
156+
console.log("working");
157157
audioElement.src = `songs/${songsIndex + 1}.mp3`;
158158
masterSongName.innerText = songs[songsIndex].songName;
159159
audioElement.currentTime = 0;

0 commit comments

Comments
 (0)