Long time no see…
In the past few weeks I set myself a task to develop a random quotes generator. I haven’t been keeping up with ‘web stuff’ recently so thought this would be a great way to resharpen my skills and explore some new ones.
I ended up building this. One of the first things I needed to consider was how I would store the quotes. I could use a database or just use simple JSON. I ended up going with a simple JSON format as it was simple and easy to get going with. Obviously with a larger data set, that would probably become unsustainable.
The hardest parts of the project were actually the smaller things. For example, I wanted to have a twitter button that could share the quote. I wrote some code (shown below) that would check the length of the quote and then update the tweet depending on whether it was too long or not.
function setTweetButton(){
//get length of quote
let quoteLength = rawQuote.length;
//check quote length and change text based on that
if (quoteLength > 100) {
let twitterText = "For some wise words, go to:";
document.getElementById("tweetBtn").setAttribute("data-text", twitterText);
}else {
let twitterText = rawQuote;
document.getElementById("tweetBtn").setAttribute("data-text", twitterText);
}
}Whilst this worked and I was pleased with it, there is a flaw in my plan. The Twitter button is generated on page load by Twitter. This means it only actually works when the page first loads. There were some workarounds, but decided against it as I didn’t want to clutter the application (Also, it leaves a puzzle for me to fix in the future!).
Finally, I decided to add some accessibility options. The moving background could be a bit much. So if you have reduce motion turned off on your device it will be static. I have also added support for dark mode, which may or may not have coincided with the launch of iOS 13.
Next side project – weather.
