Created
June 29, 2022 02:03
-
-
Save ekotha/a8c5e3e291a0d618c226af4f264de30c to your computer and use it in GitHub Desktop.
The wonderfully roundabout method I used to get my dynamic haiku progress bar on my personal website.
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
// used jquery, bootstrap | |
// What follows below is the exact script for how I got my progress bar to work. I'm very amused by this and I figured I'd keep it saved somewhere in the event I change my site in the future. | |
<script> | |
var myObj, x, haikuPercent; | |
async function load() { | |
let url = 'https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fmedium.com%2Ffeed%2F%40eashanreddykotha'; | |
let myObj = await (await fetch(url)).json(); | |
console.log(myObj); | |
let x = myObj["items"][0]["description"]; | |
console.log(x); | |
//converts item taken from object into string | |
const myObjTwoA = x.toString(); | |
//truncates unecessary "out of 1,000" to work with number values later | |
const myObjTwo = myObjTwoA.replace("out of 1,000", ''); | |
//removes html tag elements | |
const capLok = myObjTwo.replace( /(<([^>]+)>)/ig, ''); | |
//quick check: should have removed all non-relevant tags | |
// window.alert(capLok); | |
//pulls out only the numbers from the string | |
const alkali = capLok.match(/\d+/g); | |
//ensures my value is stored as integer | |
const alkaline = parseInt(alkali); | |
//percentage of 1,000 haikus bc /1000 * 100 | |
let haikuPercent = (alkaline/10); | |
// result | |
// document.getElementById("finalResult").innerHTML = haikuPercent; | |
// test to see that my string converted to int | |
var addAlk = alkaline + 1; | |
// window.alert(addAlk); | |
// window.alert(haikuPercent); | |
var addAlk = alkaline + 1; | |
// window.alert(addAlk); | |
// window.alert(haikuPercent); | |
var somevalue = haikuPercent; | |
$("#SecondDiv").text(somevalue+"%"); | |
document.getElementById("xyz").style["width"] = somevalue+"%"; | |
} | |
load(); | |
</script> | |
<p><a href="https://eashanreddykotha.com/asp-products/100haiku-preorder/" target="_blank" rel="noreferrer noopener">Order the 100 Haiku ebook</a>. </p> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment