Created
March 15, 2021 02:04
-
-
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
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> 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