The wonderfully roundabout method I used to get my dynamic haiku progress bar on my personal website.

janky-js-dynamic-progress-bar.txt

// 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>