CodeNewbie Community

Vanza Setia
Vanza Setia

Posted on

Random Quote Generator

In this blog post, I'm going to share how I did the project and share the resources that helped me finish this project. Let's get into it!

πŸ“Ž Links

If you have not seen the project, well you can see the live review. This is for the source code.

Now, you have a general idea of this project. Let's see what I did and where I could find the inspiration.

πŸ™Œ Inspiration

The inspiration (including the design) is coming from 100+ JavaScript Projects for Beginners. If you want to do the #100DaysOfCode challenge or just want to create a simple project, then that's a great website to look into.

Anyway, let's continue the story. After that, I decided to choose the random quotes generator project. I chose that, because I just wanted something that simple to work with, since I'm still a beginner on JavaScript.

Almost forget, this is the original version of this project.

✏️ Preparation

It's actually simple, I could just have this working directory, like this:

myapp/
  index.html
  style.css
  app.js
  left-quote.svg
Enter fullscreen mode Exit fullscreen mode

But I didn't want this to looked flat and boring. So, I added some additional things, like a good README.md, favicons, even a little bit Search Engine Optimization(SEO), like sitemap.xml and robots.txt files. If you don't understand those files, don't worry, you don't have to. It's just me that wanted the app showing up on Google 😁.

So, go back to the story, first I searched the left quote icon on Icomoon and then I chose the Font Awesome icon sets. After that, I optimized the SVG file using SVGOMG.

At this point, I started planning the HTML markup and the JavaScript code. This was an important step that often overlooked by a lot of beginner developers. Writing a pseudocode really helped me write a better code. By writing a pseudocode, I didn't need to care about the syntax (at least not yet).

After the planning was done, it's time to convert those pseudocode into real code, which brings us to the next step, development process.

πŸ”¨ Development

This was when the fun began. Open my favorite code editor and start coding. After sometimes, I realized that, the design was not as good as I wanted, also I wanted to add footer. So, I ended up designing on the browser.

I changed the color, to make sure that it had a good color contrast. I used this tool named "Colorable" to check how good the color contrast that I used.

After the mobile layout had done! It's time to make it responsive! I was only adding max-width to the parent elements to make sure that they didn't become too large. That's it!

It's time for the JavaScript. First, I searched the motivation quotes and created a variable called data. Here's the code:

const data = [
  {
    author: "Thomas Fuller",
    quote: "All things are difficult, before they are easy."
  },
  {
    author: "Zig Ziglar",
    quote: "You don't have to be great to start, but you need to start to be great!"
  },
  {
    author: "Anonymous",
    quote: "Don't let someone who does not know your value tell you how much you're worth!"
  },
  {
    author: "Helen Hayes",
    quote: "The expert at anything was once a beginner."
  },
  {
    author: "Stephen McCranie",
    quote: "The master has failed more times than the beginner has even tried."
  },
  {
    author: "John C. Maxwell",
    quote: "If we’re growing, we’re always going to be out of our comfort zone."
  }
]
Enter fullscreen mode Exit fullscreen mode

As you might notice, it contained six motivational qoutes for beginners. I hoped that you feel motivated now 😁. Anyway, let's continue, so after I had the data, then I grabbed all the DOM elements that I needed.

After that I added a click event on the "Generate Quote" button and call the generateRandomQuote function. Here's the code for the function.

function generateRandomQuote () {
  // Generate random numbers between 0 - 5
  const randomNumber = Math.floor(Math.random() * data.length)
  // Change the author name based on the current index
  authorEl.textContent = data[randomNumber].author
  // Change the quote based on the current index
  quoteEl.textContent = data[randomNumber].quote
}
Enter fullscreen mode Exit fullscreen mode

And that's it! I finished the app 😁.

πŸ“ Recaps

So, this is what I learned from building this app:

  • Math.random()
  • use strict;
  • Color contrast
  • Using array and object
  • Using textContent

Thanks for reading it till the end! I really appreciate that!πŸ‘

Also, any suggestions and comments would be appreciated!

Discussion (0)