Last active
May 28, 2021 13:06
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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