Skip to content

Commit 76fe40e

Browse files
SomilRathore01SomilRathore01
committed
Updated Spotify Clone
1 parent 029f921 commit 76fe40e

3 files changed

Lines changed: 274 additions & 80 deletions

File tree

‎Projects/Spotify Clone/s_index.html‎

Lines changed: 126 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,153 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<link rel="icon" href="logo.png\">
6-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8-
<title>Spotify - Your Web Player</title>
9-
<link rel="stylesheet" href="s_style.css">
10-
</head>
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<link rel="icon" href="logo.png\">
7+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9+
<title>Spotify - Your Web Player</title>
10+
<link rel="stylesheet" href="s_style.css">
11+
</head>
12+
1113
<body>
12-
<nav>
13-
<ul>
14-
<li class="brand"><img src="logo.png" alt="Spotify"> Spotify</li>
15-
<li class="nav_bar">Home</li>
16-
<li class="nav_bar">About</li>
17-
</ul>
18-
</nav>
14+
<div class="top-page">
15+
<nav>
16+
<ul>
17+
<li class="brand"><img src="logo.png" alt="Spotify">Spotify</li>
18+
<li class="nav_bar"><i class="fa fa-home"></i><a href="#">Home</a></li>
19+
<li class="nav_bar"><i class="fa fa-search"></i><a href="#">Search</a></li>
20+
</ul>
1921

20-
<div class="container">
21-
<div class="songList">
22-
<h1>Himanshu's PlayList :</h1>
23-
<div class="songItemContainer">
24-
<div class="songItem">
25-
<img src="covers/1.jpg" alt="1">
26-
<span class="songName">Falling</span>
27-
<span class="songlistplay"><span class="timestamp">05:34 <i id="0" class="far songItemPlay fa-play-circle"></i> </span></span>
28-
</div>
29-
<div class="songItem">
30-
<img src="covers/1.jpg" alt="1">
31-
<span class="songName">Falling</span>
32-
<span class="songlistplay"><span class="timestamp">05:34 <i id="1" class="far songItemPlay fa-play-circle"></i> </span></span>
33-
</div>
34-
<div class="songItem">
35-
<img src="covers/1.jpg" alt="1">
36-
<span class="songName">Falling</span>
37-
<span class="songlistplay"><span class="timestamp">05:34 <i id="2" class="far songItemPlay fa-play-circle"></i> </span></span>
38-
</div>
39-
<div class="songItem">
40-
<img src="covers/1.jpg" alt="1">
41-
<span class="songName">Falling</span>
42-
<span class="songlistplay"><span class="timestamp">05:34 <i id="3" class="far songItemPlay fa-play-circle"></i> </span></span>
43-
</div>
44-
<div class="songItem">
45-
<img src="covers/1.jpg" alt="1">
46-
<span class="songName">Falling</span>
47-
<span class="songlistplay"><span class="timestamp">05:34 <i id="4" class="far songItemPlay fa-play-circle"></i> </span></span>
22+
<div class="yourlib">
23+
<div class="lib-head">
24+
<h3>Your Library</h3>
25+
<div class="add-playlist">
26+
<i class="fa fa-plus"></i>
27+
<i class="fa fa-arrow-right"></i>
28+
</div>
4829
</div>
49-
<div class="songItem">
50-
<img src="covers/1.jpg"alt="1">
51-
<span class="songName">Falling</span>
52-
<span class="songlistplay"><span class="timestamp">05:34 <i id="5" class="far songItemPlay fa-play-circle"></i> </span></span>
30+
<div class="filter-options">
31+
<a href="#">Playlists</a>
32+
<a href="#">Artists</a>
33+
<a href="#">Podcasts & Shows</a>
5334
</div>
54-
<div class="songItem">
55-
<img src="covers/1.jpg" alt="1">
56-
<span class="songName">Falling</span>
57-
<span class="songlistplay"><span class="timestamp">05:34 <i id="6" class="far songItemPlay fa-play-circle"></i> </span></span>
35+
<div class="search">
36+
<i class="fa fa-search"></i>
37+
<select name="Sort by" id="sort">
38+
<option value="Recents">Recents</option>
39+
<option value="Recently added">Recently added</option>
40+
<option value="Alphabetical">Alphabetical</option>
41+
<option value="Creator">Creator</option>
42+
</select>
5843
</div>
59-
<div class="songItem">
60-
<img src="covers/1.jpg" alt="1">
61-
<span class="songName">Falling</span>
62-
<span class="songlistplay"><span class="timestamp">05:34 <i id="7" class="far songItemPlay fa-play-circle"></i> </span></span>
44+
<div class="playlists-container">
45+
<div class="playlists">
46+
<i class="fa fa-heart"></i>
47+
<p>Liked Songs</p>
48+
</div>
49+
<div class="playlists">
50+
<i class="fa fa-bookmark"></i>
51+
<p>Your Episodes</p>
52+
</div>
53+
<div class="playlists">
54+
<i class="fa fa-star"></i>
55+
<p>Favourite Songs</p>
56+
</div>
57+
<div class="playlists">
58+
<i class="fa fa-headset"></i>
59+
<p>My Playlist</p>
60+
</div>
6361
</div>
64-
<div class="songItem">
65-
<img src="covers/1.jpg" alt="1">
66-
<span class="songName">Falling</span>
67-
<span class="songlistplay"><span class="timestamp">05:34 <i id="8" class="far songItemPlay fa-play-circle"></i> </span></span>
68-
</div>
69-
<div class="songItem">
70-
<img src="covers/1.jpg" alt="1">
71-
<span class="songName">Falling</span>
72-
<span class="songlistplay"><span class="timestamp">05:34 <i id="9" class="far songItemPlay fa-play-circle"></i> </span></span>
62+
</div>
63+
</nav>
64+
65+
<div class="container">
66+
<div class="songList">
67+
<h1>Himanshu's PlayList :</h1>
68+
<div class="songItemContainer">
69+
<div class="songItem">
70+
<img src="covers/1.jpg" alt="1">
71+
<span class="songName">Falling</span>
72+
<span class="songlistplay"><span class="timestamp">05:34 <i id="0"
73+
class="far songItemPlay fa-play-circle"></i> </span></span>
74+
</div>
75+
<div class="songItem">
76+
<img src="covers/1.jpg" alt="1">
77+
<span class="songName">Falling</span>
78+
<span class="songlistplay"><span class="timestamp">05:34 <i id="1"
79+
class="far songItemPlay fa-play-circle"></i> </span></span>
80+
</div>
81+
<div class="songItem">
82+
<img src="covers/1.jpg" alt="1">
83+
<span class="songName">Falling</span>
84+
<span class="songlistplay"><span class="timestamp">05:34 <i id="2"
85+
class="far songItemPlay fa-play-circle"></i> </span></span>
86+
</div>
87+
<div class="songItem">
88+
<img src="covers/1.jpg" alt="1">
89+
<span class="songName">Falling</span>
90+
<span class="songlistplay"><span class="timestamp">05:34 <i id="3"
91+
class="far songItemPlay fa-play-circle"></i> </span></span>
92+
</div>
93+
<div class="songItem">
94+
<img src="covers/1.jpg" alt="1">
95+
<span class="songName">Falling</span>
96+
<span class="songlistplay"><span class="timestamp">05:34 <i id="4"
97+
class="far songItemPlay fa-play-circle"></i> </span></span>
98+
</div>
99+
<div class="songItem">
100+
<img src="covers/1.jpg" alt="1">
101+
<span class="songName">Falling</span>
102+
<span class="songlistplay"><span class="timestamp">05:34 <i id="5"
103+
class="far songItemPlay fa-play-circle"></i> </span></span>
104+
</div>
105+
<div class="songItem">
106+
<img src="covers/1.jpg" alt="1">
107+
<span class="songName">Falling</span>
108+
<span class="songlistplay"><span class="timestamp">05:34 <i id="6"
109+
class="far songItemPlay fa-play-circle"></i> </span></span>
110+
</div>
111+
<div class="songItem">
112+
<img src="covers/1.jpg" alt="1">
113+
<span class="songName">Falling</span>
114+
<span class="songlistplay"><span class="timestamp">05:34 <i id="7"
115+
class="far songItemPlay fa-play-circle"></i> </span></span>
116+
</div>
117+
<div class="songItem">
118+
<img src="covers/1.jpg" alt="1">
119+
<span class="songName">Falling</span>
120+
<span class="songlistplay"><span class="timestamp">05:34 <i id="8"
121+
class="far songItemPlay fa-play-circle"></i> </span></span>
122+
</div>
123+
<div class="songItem">
124+
<img src="covers/1.jpg" alt="1">
125+
<span class="songName">Falling</span>
126+
<span class="songlistplay"><span class="timestamp">05:34 <i id="9"
127+
class="far songItemPlay fa-play-circle"></i> </span></span>
128+
</div>
73129
</div>
74130
</div>
131+
<div class="songBanner"></div>
75132
</div>
76-
<div class="songBanner"></div>
77133
</div>
78134

135+
79136
<div class="bottom">
80137
<input type="range" name="range" id="myProgressBar" min="0" value="0" max="100">
81138
<div class="icons">
82139
<!-- fontawesome icons -->
83140
<i class="fas fa-3x fa-step-backward" id="previous"></i>
84141
<i class="far fa-3x fa-play-circle" id="masterPlay"></i>
85-
<i class="fas fa-3x fa-step-forward" id="next"></i>
142+
<i class="fas fa-3x fa-step-forward" id="next"></i>
86143
</div>
87144
<div class="songInfo">
88-
<img src="playing.gif" width="42px" alt="" id="gif"> <span id="masterSongName">Current Playing</span>
145+
<span><img src="playing.gif" width="42px" alt="" id="gif"><span id="masterSongName"></span><i id="likesong"
146+
class="fa fa-heart"></i></span>
89147
</div>
90148
</div>
91149
<script src="s_script.js"></script>
92150
<script src="https://kit.fontawesome.com/26504e4a1f.js" crossorigin="anonymous"></script>
93151
</body>
152+
94153
</html>

‎Projects/Spotify Clone/s_script.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ let gif = document.getElementById('gif');
99
let masterSongName = document.getElementById('masterSongName');
1010
let songItems = Array.from(document.getElementsByClassName('songItem'));
1111
let songItemPlay = document.getElementsByClassName('songItemPlay');
12+
let likesong = document.getElementById('likesong');
1213

1314

1415
let songs = [
@@ -26,9 +27,14 @@ let songs = [
2627

2728
songItems.forEach((element, i)=>{
2829
element.getElementsByTagName("img")[0].src = songs[i].coverPath;
29-
element.getElementsByClassName("songName")[0].innerText = songs[i].songName;
30+
element.getElementsByClassName("songName")[0].innerText = songs[i].songName;
31+
masterSongName.innerHTML = songs[i].songName;
32+
masterSongName.style.marginLeft = "20px"
33+
})
34+
35+
likesong.addEventListener('click', function onclick(event){
36+
likesong.style.color = "rgb(35, 209, 35)";
3037
})
31-
3238

3339
// Handle play/pause click
3440
masterPlay.addEventListener('click', ()=>{

0 commit comments

Comments
 (0)