Skip to content

Quote generator – Female Voices

Quote generator image

Quote generator is my first step at getting back into full on JavaScript study. I had been slightly derailed with my freelancing business, which meant I needed to learn way more things WordPress, which left me with little time on improving the skills that I actually needed more than any time before. But I finally normalised my routine, and decided to keep on going with my studies. Which after a lot of work with NodeJS came back to practicing JavaScript by doing 20 Projects, based on ZTM tutorial.

This project took me two days (with sick toddler in tow), and was 80% coded on my own by first of all listening what was expected/planned and then setting out to do everything on my own. I have no issues with HTML/CSS part because that’s pretty much my bread and butter even in the WordPress+Elementor platform. You can never have too much of customisation. So even though I don’t consider myself a pro at HTML/CSS, I feel at ease with starting a project, linking everything together, styling it to my liking while using SASS, and prepping the overall project for adding scripts. Also I created a GitHub repositories, as this is one of the others skills I have greatly improved during the past year, but I wanted to keep on practicing, and also follow my progress over upcoming days of coding. Maybe it will turn into 100 days of code started on the 1st of August.

I took extra time to study Fetch function as this is on of those functions always needed when it comes to APIs. Also, there are a couple of ways to produce the same result, so I took the time exploring them, and reminding myself of async and await. Overall, I felt really proud that even after the break I could explain to myself what was going on in the fetch function, and placing it all together with DOM, so I can produce the final result on page.

I ran in some issues when pushing the code to GitHub Pages, as they had a trailing slash, which interfered with the file routes but in the end I decided to update my links to the full github repository links before pushing it on GitHub, and reverting it back while working on the local version. It’s a bit of a pain but I only needed to do it a couple of times, as I was not bothering with it while doing multiple commits, just on the ones that actually determined if GitHub could see the full project completely.

One more thing to mention is that I was looking through different APIs for generating the quotes but most of them were paid. For a test product it’s not something I am willing to invest my money, as this will probably be covered in dust after a couple of months. So I used a free version recommended by FreeCodeCamp. Though in the end I wanted something more from my project, as I thought it would be cool to have only female quote authors produced, that’s what I based my design on too. I even looked into possibility of a filtering code just to get female named authors out, though in the end to make it quicker I uploaded the json file and removed all male authors from the file, also added some more female author quotes (as unfortunately only around fourth of those quotes came from female authors). But the final result was more than pleasing.

Overall it was a fun experience. More than anything it proved to me once again how much I enjoy working with JavaScript and creating these projects. I can’t wait for my next project.

In the meantime check out what I came up with and get some female voice inspiration for your daily life. Don’t forget to share it too.

Female Voice

Spread the love