Tovin Sannes-Venhuizen
8 min readApr 16, 2022

--

Create A New Repository
Create two new files, index.html and style.css
The readme.md file is displayed under your home page.
Create a new Google Sheet
<!DOCTYPE html>
<html>
<head>
<title> Static Database Demo </title>
<link rel="stylesheet" href="style.css"> </head>
<body>
<div id="hero">
<h1>Restaurant Reviews</h1>
<h3>Leave a review on a restaurant you recently visited!</h3>
</div>
<div id="display">
<div id="loader">
<h4> Loading</h4>
</div>
<div id="allNames">
</div>
<div id="errorMessage">
<h2> Failed to get data. Please refresh </h2> </div>
</body>
</html>
<script>
let allNamesElm = document.getElementById("allNames")
let loaderElm = document.getElementById("loader")
let errorMessageElm = document.getElementById("errorMessage")
fuction setErrorDisplay(){
loaderElm.style.display = "none"
allNamesElm.style.display = "none"
errorMessageElm.style.display = "block"
}
fetch("YOUR API URL").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("name-row")

let rowName = document.createElement("h4")
let rowNameNode = document.createTextNode(rowInfo["name"])
rowName.appendChild(rowNameNode)
rowName.classList.add("name")
rowInfo.Div.appendChild(rowName) allNamesElm.appendChild(rowInfoDiv) }

loaderElm.style.display = "none"
allNamesElm.style.display = "block"
errorMessageElm.style.display = "none"
}).catch(err => {
setErrorDisplay()
})
}
else{
setErrorDisplay()
}
}).catch(err =>{
setErrorDisplay()
})
</script>
let rowRestaurant = document.createElement("h4")
let rowRestaurantNode = document.createTextNode(rowInfo("restaurant"])
row.Restaurant.appendChild(rowRestaurantNode)
rowRestaurant.classList.add("restaurant")
let rowReview = document.createElement("h4")
let rowReviewNode = document.createTextNode(rowInfo("review"])
row.Review.appendChild(rowReviewNode)
rowReview.classList.add("review")
rowInfoDiv.appendChild(rowRestaurant)
rowInfoDiv.appendChild(rowReview)
To make yours look like this format, simply add the code at the bottom of the page to style.css
You’ll want the key at the end of the endpoint link
<div>
<h3>Leave A Review!</h3>
<form action="YOUR LINK HERE" method="POST">
<label>Your name:
<input type="text" name="name">
</label>
<label>Restaurant Name:
<input type="text" name="restaurant">
</label>
<label>Restaurant Review:
<textarea name="review"></textarea>
</label>
<button type="submit">Submit Review</button>
</form>
</div>
About to leave a review…
Yay! It worked!!
index.html code
style.css code

--

--

Tovin Sannes-Venhuizen
0 Followers

Pilot and Tech Nerd