Skip to content

Instantly share code, notes, and snippets.

@AsthaSharma1
Created March 15, 2021 02:04
Show Gist options
  • Save AsthaSharma1/ef083aed4df33d856ed175080c500b36 to your computer and use it in GitHub Desktop.
Save AsthaSharma1/ef083aed4df33d856ed175080c500b36 to your computer and use it in GitHub Desktop.
Full About Me code for my personal website, www.heyastha.com for the dynamic text tutorial
<!DOCTYPE html>
<html>
<head>
<title> About Me </title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@500&display=swap');
body{
background-color: whitesmoke;
}
#about{
font-family: Comfortaa;
text-align: center;
padding: 100px 50px 50px 50px;
}
#display{
font-family: Comfortaa;
text-align: center;
border-radius: 10px;
background-color: #A9C9FF;
background-image: linear-gradient(66deg, #A9C9FF 0%, #FFBBEC 100%);
padding: 20px;
height: 50%;
margin: 0 30px 0 30px;
}
.elemsRow{
text-align: center;
}
#allElems{
display: none;
}
#errorMessage{
display:none;
}
.Week{
display:inline-block;
text-align: center;
padding-right:5px;
}
.Show{
display:inline-block;
text-align: center;
padding-right: 5px;
}
.Music{
display:inline-block;
text-align: center;
padding-right:5px;
}
.Language{
display:inline-block;
text-align: center;
}
.Quote{
display:block;
text-align: center;
}
</style>
</head>
<body>
<div id="about">
<h1> Get to know me </h1>
<p> Hi, I'm Astha (it rhymes with pasta). I majored in Human-Computer Interaction and had minors in Computer Science and Business from NJIT. </p>
<p> I love to hike, practice photography, design websites, and make new foods. </p>
</div>
<div id="display">
<h3> Weekly Life Update </h3>
<div id="allElems">
</div>
<div id="errorMessage">
<p> I've been watching Bojack Horseman (again), listening to The Weeknd, and practicing up on Javascript! </p>
</div>
</div>
<script>
let allElemsElm = document.getElementById("allElems")
let errorMessageElm = document.getElementById("errorMessage")
function setErrorDisplay(){
allElemsElm.style.display ="none"
errorMessageElm.style.display = "block"
}
fetch("https://api.apispreadsheets.com/data/9396/").then(res=>{
if (res.status === 200){
res.json().then(data=>{
const yourData = data["data"]
let rowInfo = yourData[0]
let rowInfoDiv = document.createElement("div")
rowInfoDiv.classList.add("elemsRow")
let rowWeek = document.createElement("p")
let rowWeekNode = document.createTextNode("The week of " + rowInfo["Week"])
rowWeek.appendChild(rowWeekNode)
rowWeek.classList.add("Week")
let rowShow = document.createElement("p")
let rowShowNode = document.createTextNode("I have been binging " + rowInfo["Show"] + ",")
rowShow.appendChild(rowShowNode)
rowShow.classList.add("Show")
let rowMusic = document.createElement("p")
let rowMusicNode = document.createTextNode("listening to " + rowInfo["Music"] + ",")
rowMusic.appendChild(rowMusicNode)
rowMusic.classList.add("Music")
let rowLanguage = document.createElement("p")
let rowLanguageNode = document.createTextNode(" and practicing up on " + rowInfo["Language"] + "! ")
rowLanguage.appendChild(rowLanguageNode)
rowLanguage.classList.add("Language")
let rowQuote = document.createElement("p")
let rowQuoteNode = document.createTextNode("A quote that got to me: ")
rowQuote.appendChild(rowQuoteNode)
let rowQuoteItalics = document.createElement("i")
let rowQuoteItalicsNode = document.createTextNode(rowInfo["Quote"])
rowQuoteItalics.appendChild(rowQuoteItalicsNode)
rowQuote.classList.add("Quote")
rowQuoteItalics.classList.add("Quote")
rowInfoDiv.appendChild(rowWeek)
rowInfoDiv.appendChild(rowShow)
rowInfoDiv.appendChild(rowMusic)
rowInfoDiv.appendChild(rowLanguage)
rowInfoDiv.appendChild(rowQuote)
rowInfoDiv.appendChild(rowQuoteItalics)
allElemsElm.appendChild(rowInfoDiv)
allElemsElm.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