In the post I wrote a month ago, Project SIAT – Get Started, I wrote about how I finished designing the webpage. With the design in hand, I moved into the second stage of making the website (in a hurry), front-end coding.

The design I put on the previous post was a high-fidelity interface made with Sketch. It will look exactly the final website I create but it is merely a design, in other words, it is a combination of images, text and shapes, which I put together via dragging and dropping. In order to make it into a real website that visitors can visit with a browser and interact with, I will need to write codes that make up the website and try to make it look exactly like the design as best as I can.

Before I get started with the project, I knew how to write HTML, CSS and can play around with the basics of JavaScript. For the project, my teacher suggested that I should learn React because the JavaScript library is very popular right now. It is for frontend development, allowing websites to update without reloading the page and is fast, scalable and simple. I knew nothing about React so therefore I went through the lessons and tutorials on Codecademy.

The process of making this website has brought me uncountable knowledge and practices, much more than what I have expected. Within these, the most beneficial ones are:

• Learning about the basics of React
• Practicing frontend programming languages like HTML and CSS, making my website with them independently for the first time
• Self help skills, how to solve a problem by getting help from online resources efficiently

Below, I will introduce some of my codes, which is also a reminder for myself in the future.

This is the final file structure of the project:

├── App.js
├── App.scss
├── DropDown.js
├── DropDown.scss
├── Navigation.js
├── Navigation.scss
├── articlePage
│   ├── Article.js
│   ├── Article.scss
│   ├── ArticleBlock.js
│   ├── ArticleBlock.scss
│   └── webCrawler.js
├── assets
│   └── images
│       ├── artwork.png
│       ├── bear-fullwidth.png
│       ├── bear.png
│       ├── bg-dark-green.png
│       ├── elephant-fullwidth.png
│       ├── elephant.png
│       ├── icon.png
│       ├── pangolin-fullwidth.png
│       ├── pangolin.png
│       ├── rhino-fullwidth.png
│       ├── rhino.png
│       ├── thumbnail.png
│       ├── tiger-fullwidth.png
│       └── tiger.png
├── homePage
│   ├── FullWidthSpecies.js
│   ├── FullWidthSpecies.scss
│   ├── Home.js
│   ├── Home.scss
│   ├── Species.js
│   └── Species.scss
├── index.css
├── index.js

Amongst these files, the most amazing and important file in my opinion, is App.js. It is in the root of the project directory and it role in the website is somewhat like the central nervous system in a body, connecting different body parts and pass signals between them. It doesn’t (shouldn’t) include any specific code about the details (like the text or color) on each webpage, but it shows the logic of rendering the pages, e.g.

In React, if two pages, let’s call them A and B, have large amount of codes that are similar, they do not need to be two separated HTML files. Instead, page A and page B can be using the same files and mark the parts where they are different. Therefore, when the user switches from page A to page B, only a small part of the webpage needs to be re-rendered instead of the entire file. For instance, the same navigation bar and footer is used no matter which page it is in the website, therefore App.js is written like so:

<Navigation />
{/* will always run no matter which page it is on */}
<Switch>
{/* the part that changes depending on the url */}
    ...
</Switch>
<footer className="text-light">
{/* like the navigation part, doesn't change */}
    ...
</footer>

Let’s zoom into the <Switch> component. It decides what to render based on the url. For the code below, the second <Route> component says that if the path is equal to “/”, then code inside the component “Home” will be rendered. The first <Route> component is more complicated. It receive props called speciesId from another webpage, and it passes these props as attributes into the “Article” component. After this, the “Article” component will render codes depending on the attributes.

<Switch>
    <Route
        path="/article/:speciesId"
        render={(props) => <Article {...props} />}
    />
    <Route path="/">
        <Home />
    </Route>
</Switch>

I found this very interesting when learning to write it because I have never learned about making dynamic pages before and I thought that when the user enters a url, the file inside the specific folder pointed by the url will be rendered. Now I found out that the position of the file with codes of the webpage isn’t restricted in any specific folder. Instead, it can be anywhere and as long as the Router points to it, it can be rendered (therefore it is possible to have two address in the webpage leading to the same file.

As a component that exist in all pages, the dropdown menu from the navigation bar is a fancy component. As introduced in the last post, it is inspired by the dropdown menu of the National Geographic website. It takes me (a JavaScript noob) three hours to code the dropdown animation and the mouseover effect of the menu.

The menu on the National Geographic website is amazing, it seems like a lot of things are moving in all directions at the same time. I was deeply impressed by the design, but I had no idea how to start coding my own. Therefore I began to do careful observations and inspected the elements on the page one by one.

After a while, I started to get how everything works. Basically, there is a huge layer that covers the whole page — a <div> element called “menu-backdrop” that is placed above the original webpage but beneath the contents shown in the menu. When the user click on the “Menu” text in the navigation bar, menu-backdrop moves down on its own and the animation continues for about 1 second.

All the other contents that are above the backdrop show up one by one, from the top to the bottom at the same time as the backdrop moves down. The way they show up isn’t just in a sudden, or fading in, but they are translating — moving out from a layer where they are hidden beneath into places where users can see them.

Now that I got the general idea of how things are supposed to work, I started my attempts to turn the idea into code with the knowledges that I already know. The embarrassing here that I realized not long after I finished testing and debugging my code was that I was interacting directly with DOM elements in the webpage, which shouldn’t really happen since I am coding in React and not JavaScript. This had made my teacher rather speechless. She thought of rewriting the huge block of JavaScript code into React with me but later told me to keep it as it was — it was just too time-consuming.

activate() {
    document.getElementsByClassName(
      "dropdown-main-container"
    )[0].style.display = "flex";
    var elem = document.getElementById("menu-backdrop");
    // elem is the backdrop
    var label = document.getElementsByClassName("species-label")[0];
    // label is the red text that says "Species--" according to the above video
    var button = document.getElementsByClassName("dropdown-button")[0];
    elem.style.transitionDelay = "0s";
    label.style.transitionDelay = "0s";
    elem.classList.add("active");
    label.classList.add("active");
    button.innerHTML =
      'Close <i class="fa fa-angle-double-up" aria-hidden="true"></i>';
    var num = document.getElementsByClassName("slider").length;
    for (var count = 0; count < num; count++) {
      var classname = "slider-text" + count.toString(10);
      var item = document.getElementsByClassName(classname)[0];
      item.style.marginTop = "5rem";
      item.style.animationName = "slide-up";
      item.style.animationDelay = (count * 120 + 300).toString(10) + "ms";
    }
}

Below is the part that I think is the strangest but at the same time the most amazing. I am not sure if people usually code like this, but I am using a FOR loop to go through “slider-text” elements one by one according to their classes, then adding corresponding and unique styles onto them. “animationDelay” is different for each slider-text element and I am calculating it in the last line of code below.

var num = document.getElementsByClassName("slider").length;
for (var count = 0; count < num; count++) {
      var classname = "slider-text" + count.toString(10);
      var item = document.getElementsByClassName(classname)[0];
      item.style.marginTop = "5rem";
      item.style.animationName = "slide-up";
      item.style.animationDelay = (count * 120 + 300).toString(10) + "ms";
}

I wasn’t able to finish introducing the UI and UX part of the project. I started this post more than 3 months ago and hasn’t found time to finish it up and I am going to take my mocks soon so I gotta start preparing for it. So the above is what I have so far and I am posting it since I probably will not have time to finish it this year. Will finish it once I got time after the mocks!