Day 15: Completing the site basics
Tags: 100daysofcode, javascript, beginners, react
Published: 2022-04-20 14:48:40

*This is a continuation of the previous post. Here is my journey completing the Random Quote Machine.*

## Passing the test 🗒

FreeCodeCamp projects usually include a JS script that can be used to test our website.
```html
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
```
This will render a special UI for testing on top of the site itself.
![Special UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2xt5tiq83b58rldg4lb6.png)
The first thing that I like to do is to complete all tests that looks for HTML elements with certain tags. I started `Five Server` extension on VSCode, and started working.
![Minimal HTML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/az53vbt5p7nbl3p0p6u9.png)
This gives me an idea what is the final structure of the website.

After that, I included the necessary libraries: React, React DOM, and jQuery. Then I started `dart-sass` and `babel` with watch option.

It's time for React code!

## The bare minimum

The next thing that I do was writing a `div` with `id="wrapper"`. This will be the root of our React stuff. After an hour I have this:
![Main parent](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3x2mldljcd1ejlfo6665.png)
"What?! You took an hour doing this?". Sadly, yes. I stumbled upon an error that complains about the usage of `ReactDOM` instead of 'ReactDOM/client'. It's a black hole of energy and time 😵‍💫.

It turns out that React is planning to separate its server-side rendering script with the client-side. This felt weird cause there is no CDN links for client-side one. Only a general `ReactDOM` CDN link. I don't know how to deal with this yet, but the code still works anyway 🧐.

I then proceeded to wrote the rest of components, and put them inside the parent component.

The FreeCodeCamp's test confirmed that I have a correct HTML structure. It's time for the logic!

## Playing with APIs

As the project's name suggests, I need to show a random quote each time a user presses a button.

Because I'm not too wise to make hundreds of reliable quotes, I had to find APIs that serve them. A few Google searches later, I found what I need.
{% embed https://github.com/lukePeavey/quotable %}
The code for fetching the API is very simple:
![Fetch API](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9erd4rr4xv5w3v1donjz.png)

Now, let's work on the UI!

## Fancy effects 💫

FreeCodeCamp gave an example for each project. This is the example for this one:
{% codepen https://codepen.io/freeCodeCamp/pen/qRZeGZ %}
I want to try and replicate what has been done here. So after two hours, I finally got a simple result!
![Color change result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wxovqc3jffceubii7m3f.gif)
Notice that I didn't randomize the colors yet.
Here's the code if you're curious:
```js
handleNewQuote() {
    const this_func = this;
    document.documentElement.style.setProperty("--color", "white");

    async function getApi() {
        return fetch("https://api.quotable.io/random?tags=famous-quotes")
            .then(Response => Response.json())
            .then(data => ({
                quote: data.content,
                author: data.author
            }));
    };

    async function updateQuote() {
        let responseData = await getApi();

        setTimeout(() => {
            this_func.setState(() => ({
                quote: responseData.quote,
                author: responseData.author,
            }));

            document.documentElement.style.setProperty("--color", "red");
        }, 1000);

    };

updateQuote();
}
```
This function is called each time the button is pressed. It also need a CSS variable `--color`, used as the color for text. Place the variable in the `<HTML>` tag.

## Afterwords

Personally, this is a big jump in React stuff. Notice that I didn't use Redux. This is because the state is simple enough that I don't want to be burdened with more unnecessary library. I felt that I like my website light, rather than bloated with features.

Anyway, hope everyone else is doing good with their challenge 😁

Follow me on [Github](https://github.com/Kemystra)!
Also on [Twitter](https://twitter.com/kemystra)!