100 Days of Code: Day 86

Home / Technology / Web Development / 100 Days of Code: Day 86
I started on the first front-end libraries project. It's a simple quote generator that allows you to press a "new quote" button to display a new quote.

Front-End Libraries Project #1: Quote Generator

I started on the first front-end libraries project today. It is a simple quote generator that allows you to press a “new quote” button to display a new quote. It also allows you to tweet the current quote, and I may add another button for quickly copying the text.

So far, I have set up my HTML elements and added a bit of CSS so I’m not looking at an ugly screen while I code this thing out. Everyone should always have their priorities straight when it comes to web design. 😂

Afterwards, I started coding some of my JavaScript. It’s not much yet, but I did manage to create a quote array to hold a handful of quotes that I can pull from later for the actual ‘quote generator’ functionality.

I did some research on adding a quote API but decided against it. I’m not quite there yet. So, I am starting with a simple JavaScript array of quote objects containing the text and author. This is more than enough to start with. I already have 7 quotes added, but I may add more later. I don’t need to go too crazy.

As long it does what it’s supposed to do and meets all the requirements, I am happy. For now, anyway. I would love to expand on it later, though.

Moving Forward With This Project

I am trying to stick to my plan of not getting burnt out. That means it’s time to call it quits for the day. I’ve been doing this for the last 3 hours, so I’d say that’s good.

Tomorrow, I’m going to start setting up my React components and see how far I can get with handling these buttons and displaying the quotes on the page.

If you want to see an example of what the finished quote generator is supposed to do, go take a peek at the FCC : Random Quote Machine on CodePen.

Let's chat!

%d bloggers like this: