This project is for the MLH LHD DAY-7 challenge
<html>
<head>
<title>Spotify Mix | Discover New Playlists on Spotify</title>
<link href="style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" integrity="sha512-xA6Hp6oezhjd6LiLZynuukm80f8BoZ3OpcEYaqKoCV3HKQDrYjDE1Gu8ocxgxoXmwmSzM4iqPvCsOkQNiu41GA==" crossorigin="anonymous" />
</head>
<body>
<div class="wrapper">
<h1 class="header">PLAYLIST GENERATOR</h1>
<div class="randomize-container">
<a class="randomize-button" href="#">New Playlist <i class="fas fa-random"></i></a>
</div>
<div class="box">
<div id="spotify"></div>
</div>
<div class="copyright">
<span id="year"></span> Spotify Mix by Aviral Srivastava </a>
</div>
</div>
<script>
const loadPlayer = playlistId => {
const player = document.createElement('iframe');
player.setAttribute('id', 'spotifyFrame')
player.setAttribute('src', `https://open.spotify.com/embed/playlist/${playlistId}`);
player.setAttribute('width', 375);
player.setAttribute('height', 500);
return player;
};
document.addEventListener('DOMContentLoaded', () => {
const iframe = loadPlayer('4iD8Xo3P2E0DifKiyhKwL0');
const spotify = document.getElementById('spotify');
spotify.appendChild(iframe);
document.getElementById('year').innerHTML = new Date().getFullYear();
});
</script>
Log in or sign up for Devpost to join the conversation.