Skip to content

Instantly share code, notes, and snippets.

@AsthaSharma1
Last active May 28, 2021 13:06
Show Gist options
  • Save AsthaSharma1/3b4ebf1d4844cb650119c1bb3c5a7cfc to your computer and use it in GitHub Desktop.
Save AsthaSharma1/3b4ebf1d4844cb650119c1bb3c5a7cfc to your computer and use it in GitHub Desktop.
HTML code for displaying data from a form, powered by www.apispreadsheets.com
<!DOCTYPE html>
<html>
<head>
<title> Music Queue </title>
</head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body{
background-color: purple;
height: 100%;
font-family: 'Roboto', sans-serif;
}
.song-row{
background-color: white;
border-radius: 10px;
padding: 10px;
margin: 20px;
width: 75%;
}
#allNames{
display: none;
}
#errorMessage{
display: none;
color: red;
}
#loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 2s linear infinite;
margin: auto;
margin-top: 40px;
}
.Song{
display: inline-block;
padding-right: 10px;
}
.Artist{
display: inline-block;
padding-right: 10px;
}
#hero{
color:white;
}
footer{
color:white;
}
</style>
<body>
<div id="hero">
<h1>DJ Song Queue</h1>
</div>
<div id="display">
<div id="loader">
<h4> Loading</h4>
</div>
<div id="allSongs">
</div>
<div id="errorMessage">
<h2> Failed to get data. Please refresh </h2>
</div>
</div>
<a href="form.html" target="_blank" style="text-decoration: none; color:white;"> Fill out another song request </a>
<footer>
<h4> Powered by <a href="https://www.apispreadsheets.com" target="_blank" style="text-decoration: none; color:white; text-align: center;"> API Spreadsheets </a> </h4>
</footer>
<script>
let allSongsElm = document.getElementById("allSongs")
let loaderElm = document.getElementById("loader")
let errorMessageElm = document.getElementById("errorMessage")
function setErrorDisplay(){
loaderElm.style.display = "none"
allSongsElm.style.display = "none"
errorMessageElm.style.display = "block"
}
fetch("https://api.apispreadsheets.com/data/12633/").then(res=>{
if (res.status === 200){
res.json().then(data=>{
const yourData = data["data"]
for(let i = 0; i < yourData.length; i++){
let rowInfo = yourData[i]
let rowInfoDiv = document.createElement("div")
rowInfoDiv.classList.add("song-row")
let rowSong = document.createElement("h2")
let rowSongNode = document.createTextNode(rowInfo["Song"])
rowSong.appendChild(rowSongNode)
rowSong.classList.add("Song")
let rowArtist = document.createElement("h4")
let rowArtistNode = document.createTextNode(rowInfo["Artist"])
rowArtist.appendChild(rowArtistNode)
rowArtist.classList.add("Artist")
let rowLink = document.createElement("a")
rowLink.setAttribute("href", rowInfo["Link"])
rowLink.setAttribute("target","_blank")
let rowLinkNode = document.createTextNode(rowInfo["Link"])
rowLink.appendChild(rowLinkNode)
rowLink.classList.add("Link")
rowInfoDiv.appendChild(rowSong)
rowInfoDiv.appendChild(rowArtist)
rowInfoDiv.appendChild(rowLink)
allSongsElm.appendChild(rowInfoDiv)
}
loaderElm.style.display = "none"
allSongsElm.style.display = "block"
errorMessageElm.style.display = "none"
}).catch(err => {
setErrorDisplay()
})
}
else{
setErrorDisplay()
}
}).catch(err =>{
setErrorDisplay()
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment