Skip to content

Instantly share code, notes, and snippets.

@ekotha
Created June 29, 2022 02:03
Show Gist options
  • Save ekotha/a8c5e3e291a0d618c226af4f264de30c to your computer and use it in GitHub Desktop.
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.
// 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