Skip to content

Commit

Permalink
new changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@Gokul-sami
Gokul-sami committed Sep 2, 2024
1 parent 1bffd89 commit 119da3e
Show file tree
Hide file tree
Showing 4 changed files with 94 additions and 156 deletions.
14 changes: 13 additions & 1 deletion Exercise 2/ex2.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,4 +30,16 @@ body{
.cover:hover {
transform: translateY(-5px);
transition: transform 80ms;
}
}
.song-details-container {
position: fixed;
right: 0;
top: 0;
width: 30%;
height: 100%;
background-color: rgb(192, 141, 255);
box-shadow: -5px 0 10px rgba(0, 0, 0, 0.2);
display: none; /* Hidden by default */
padding: 20px;
overflow-y: auto;
}
111 changes: 81 additions & 30 deletions Exercise 2/ex2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
<body>
<div class="body">
<!-- header -->
<div class="header">
<div class="header">
<h1 style="color: rgb(124, 18, 255);">Groovy</h1>
</div>
<br>
Expand All @@ -35,116 +35,167 @@ <h2>Popular Songs</h2>
<div class="popular-songs">
<!-- 1 -->
<div class="popular">
<a href="song.html#Electric_Love!Borns!./images/electric love.jpg">
<a href="javascript:void(0)" onclick="showSongDetails('Electric Love', 'Borns', './images/electric love.jpg')">
<img class="cover" src="./images/electric love.jpg" alt="Electric Love">
</a>
<a class="popular-song-name-link" href="song.html#Electric_Love!Borns!./images/electric love.jpg">
<a class="popular-song-name-link" href="javascript:void(0)" onclick="showSongDetails('Electric Love', 'Borns', './images/electric love.jpg')">
<h3 class="popular-song-name">Electric Love</h3>
</a>
<h4 class="popular-singer-name">Borns</h4>
</div>
<!-- 2 -->
<div class="popular">
<a href="song.html#FEIN!Travis_Scott_Playboi_Carti!./images/fein.jpg">
<a href="javascript:void(0)" onclick="showSongDetails('FEIN', 'Travis Scott, Playboi Carti', './images/fein.jpg')">
<img class="cover" src="./images/fein.jpg" alt="FEIN">
</a>
<a class="popular-song-name-link" href="song.html#FEIN!Travis_Scott_Playboi_Carti!./images/fein.jpg">
<a class="popular-song-name-link" href="javascript:void(0)" onclick="showSongDetails('FEIN', 'Travis Scott, Playboi Carti', './images/fein.jpg')">
<h3 class="popular-song-name">FEIN</h3>
</a>
<h4 class="popular-singer-name">Travis Scott, Playboi Carti</h4>
</div>

<!-- 3 -->
<div class="popular">
<a href="song.html#Do_I_Wanna_Know!Arctic_Monkeys!./images/do i wanna know.jpg">
<a href="javascript:void(0)" onclick="showSongDetails('Do I Wanna Know', 'Arctic Monkeys', './images/do i wanna know.jpg')">
<img class="cover" src="./images/do i wanna know.jpg" alt="Do I Wanna Know">
</a>
<a class="popular-song-name-link" href="song.html#Do_I_Wanna_Know!Arctic_Monkeys!./images/do i wanna know.jpg">
<a class="popular-song-name-link" href="javascript:void(0)" onclick="showSongDetails('Do I Wanna Know', 'Arctic Monkeys', './images/do i wanna know.jpg')">
<h3 class="popular-song-name">Do I Wanna Know</h3>
</a>
<h4 class="popular-singer-name">Arctic Monkeys</h4>
</div>

<!-- 4 -->
<div class="popular">
<a href="song.html#Here!Alessia_Shah!./images/here.jpg">
<a href="javascript:void(0)" onclick="showSongDetails('Here', 'Alessia Shah', './images/here.jpg')">
<img class="cover" src="./images/here.jpg" alt="Here">
</a>
<a class="popular-song-name-link" href="song.html#Here!Alessia_Shah!./images/here.jpg">
<a class="popular-song-name-link" href="javascript:void(0)" onclick="showSongDetails('Here', 'Alessia Shah', './images/here.jpg')">
<h3 class="popular-song-name">Here</h3>
</a>
<h4 class="popular-singer-name">Alessia Shah</h4>
</div>

<!-- 5 -->
<div class="popular">
<a href="song.html#Jericho!Iniko!./images/jericho.jpg">
<a href="javascript:void(0)" onclick="showSongDetails('Jericho', 'Iniko', './images/jericho.jpg')">
<img class="cover" src="./images/jericho.jpg" alt="Jericho">
</a>
<a class="popular-song-name-link" href="song.html#Jericho!Iniko!./images/jericho.jpg">
<a class="popular-song-name-link" href="javascript:void(0)" onclick="showSongDetails('Jericho', 'Iniko', './images/jericho.jpg')">
<h3 class="popular-song-name">Jericho</h3>
</a>
<h4 class="popular-singer-name">Iniko</h4>
</div>

<!-- 6 -->
<div class="popular">
<a href="song.html#Astronaut_In_The_Ocean!Masked_Wolf!./images/astronaut in the ocean.jpg">
<a href="javascript:void(0)" onclick="showSongDetails('Astronaut In The Ocean', 'Masked Wolf', './images/astronaut in the ocean.jpg')">
<img class="cover" src="./images/astronaut in the ocean.jpg" alt="Astronaut In The Ocean">
</a>
<a class="popular-song-name-link" href="song.html#Astronaut_In_The_Ocean!Masked_Wolf!./images/astronaut in the ocean.jpg">
<a class="popular-song-name-link" href="javascript:void(0)" onclick="showSongDetails('Astronaut In The Ocean', 'Masked Wolf', './images/astronaut in the ocean.jpg')">
<h3 class="popular-song-name">Astronaut In The Ocean</h3>
</a>
<h4 class="popular-singer-name">Masked Wolf</h4>
</div>

<!-- 7 -->
<div class="popular">
<a href="song.html#Promiscuous!Nelly_Furtado_Timbaland!./images/promiscuous.jpg">
<a href="javascript:void(0)" onclick="showSongDetails('Promiscuous', 'Nelly Furtado, Timbaland', './images/promiscuous.jpg')">
<img class="cover" src="./images/promiscuous.jpg" alt="Promiscuous">
</a>
<a class="popular-song-name-link" href="song.html#Promiscuous!Nelly_Furtado_Timbaland!./images/promiscuous.jpg">
<a class="popular-song-name-link" href="javascript:void(0)" onclick="showSongDetails('Promiscuous', 'Nelly Furtado, Timbaland', './images/promiscuous.jpg')">
<h3 class="popular-song-name">Promiscuous</h3>
</a>
<h4 class="popular-singer-name">Nelly Furtado, Timbaland</h4>
</div>

<!-- 8 -->
<div class="popular">
<a href="song.html#Swim!Chase_Atlantic!./images/swim.jpg">
<a href="javascript:void(0)" onclick="showSongDetails('Swim', 'Chase Atlantic', './images/swim.jpg')">
<img class="cover" src="./images/swim.jpg" alt="Swim">
</a>
<a class="popular-song-name-link" href="song.html#Swim!Chase_Atlantic!./images/swim.jpg">
<a class="popular-song-name-link" href="javascript:void(0)" onclick="showSongDetails('Swim', 'Chase Atlantic', './images/swim.jpg')">
<h3 class="popular-song-name">Swim</h3>
</a>
<h4 class="popular-singer-name">Chase Atlantic</h4>
</div>

<!-- 9 -->
<div class="popular">
<a href="song.html#Gurenge!Akano!./images/gurenge.jpg">
<a href="javascript:void(0)" onclick="showSongDetails('Gurenge', 'Akano', './images/gurenge.jpg')">
<img class="cover" src="./images/gurenge.jpg" alt="Gurenge">
</a>
<a class="popular-song-name-link" href="song.html#Gurenge!Akano!./images/gurenge.jpg">
<a class="popular-song-name-link" href="javascript:void(0)" onclick="showSongDetails('Gurenge', 'Akano', './images/gurenge.jpg')">
<h3 class="popular-song-name">Gurenge</h3>
</a>
<h4 class="popular-singer-name">Akano</h4>
</div>

<!-- 10 -->
<div class="popular">
<a href="song.html#Cold!Maroon_5_Future!./images/cold.jpg">
<a href="javascript:void(0)" onclick="showSongDetails('Cold', 'Maroon 5, Future', './images/cold.jpg')">
<img class="cover" src="./images/cold.jpg" alt="Cold">
</a>
<a class="popular-song-name-link" href="song.html#Cold!Maroon_5_Future!./images/cold.jpg">
<a class="popular-song-name-link" href="javascript:void(0)" onclick="showSongDetails('Cold', 'Maroon 5, Future', './images/cold.jpg')">
<h3 class="popular-song-name">Cold</h3>
</a>
<h4 class="popular-singer-name">Maroon 5, Future</h4>
</div>
</div>
</div>

<!-- songs -->
<div class="songs-recomm">
<div class="srecomm1">

</div>
<div class="srecomm2">

</div>
</div>

<!-- Right-side Song Details Container -->
<div id="song-details-container" class="song-details-container">
<span class="close-button" onclick="closeSongDetails()" style="padding: 5px;">X</span>
<div class="song-image">
<img id="song-cover" src="" alt="Song Cover" style="width: 100%;">
</div>
<div class="song-details">
<h1 id="song-title">Song Title</h1>
<h3 id="song-artist">Artist Name</h3>
</div>
<div class="song-lyrics">
<h2>Lyrics</h2>
<audio controls id="song-audio"></audio>
<p id="song-lyrics">
Lyrics will appear here.
</p>
</div>
</div>


<script>
function showSongDetails(title, artist, image) {
// Update song details
document.getElementById('song-title').textContent = title.replace(/_/g, ' ');
document.getElementById('song-artist').textContent = artist.replace(/_/g, ' ');
document.getElementById('song-cover').src = image;
document.getElementById('song-audio').src = "https://pagalnew.com.se/files/download/id/2016"; // Update with actual audio URL if available
document.getElementById('song-lyrics').textContent = "Lyrics for " + title + " go here..."; // Update lyrics dynamically

// Show the song details container
document.getElementById('song-details-container').style.display = 'block';

// Adjust the margin of the body
const bodyElement = document.querySelector('.body');
if (bodyElement) {
bodyElement.style.marginRight = '30%';
}
}

function closeSongDetails() {
// Hide the song details container
document.getElementById('song-details-container').style.display = 'none';

// Reset the margin of the body
const bodyElement = document.querySelector('.body');
if (bodyElement) {
bodyElement.style.marginRight = '0';
}
}
</script>

</body>
</html>
</html>
79 changes: 0 additions & 79 deletions Exercise 2/song.css
View file

This file was deleted.

46 changes: 0 additions & 46 deletions Exercise 2/song.html
View file

This file was deleted.

0 comments on commit 119da3e

Please sign in to comment.