Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
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.
var myObj, x, haikuPercent;
async function load() {
let url = '';
let myObj = await (await fetch(url)).json();
let x = myObj["items"][0]["description"];
//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;
document.getElementById("xyz").style["width"] = somevalue+"%";
<p><a href="" target="_blank" rel="noreferrer noopener">Order the 100 Haiku ebook</a>. </p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment