AsthaSharma1 · May 28, 2021 13:06
diff --git a/display.html b/display.html
 <!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>
	<!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>