Lab 2: Coronavirus Dashboard

Overview

Today, this is one of the most popular websites on the internet, as the first google result for "coronavirus statistics": https://www.worldometers.info/coronavirus/.

The version we're building will be "static"; that means the numbers won't update. Making this site show updates in real-time would require a server and backend, which is something you'll learn much later in the course.

We also won't be able to have some behaviors on the page (like dynamically sorting results by column) because that would require JavaScript for behavior. Today our page will be fully static; it can only use HTML and CSS.

Don't worry, it's still pretty cool to feel that you can rebuild most of a real website used by millions of people a day.

How to do this lab

As with all labs, we'll ask you to work in groups on the project and report your progress back to the class in Discord.

---

Milestone 1: Create a new project on repl.it with your partner(s)

1. Visit https://repl.it, start a new repl by clicking on
   , choose HTML/CSS/JS.
2. Enable "multiplayer" mode by clicking the "invite" button at the top center of your screen.

You'll receive a link, and share that with your partner(s). Now all of you can be working off the same document, similar to Google Docs.

Milestone 2: Create the headers

The next three thing sto create are the headers for:

• Coronavirus Cases
• Deaths
• Recovered

Create h1 and h2 tags for each element:

<h1> Coronavirus Cases </h1>
<h2> 3,075,538 </h2>

<h1> Deaths </h1>
<h2> 211,788 </h2>

<h1> Recovered </h1>
<h2> 925,123 </h2>

Now comes the tricky part, we'll want to format the text to look more like the page on the site. Two things are different - the font, and the colors. Let's start with the <h1> tags first.

We'll use the inspector to find out more about the formatting of the <h1> tags. Right click on the heading, and select "inspect" in Google Chrome.

Inspector should reveal the styles of the element under the cursor, which is our h1 tag:

Great! Now we know what CSS files to apply. Switch over to style.css in your repl, and add the same styles to h1:

(There's actually a bug in the code of the webpage we're inspecting - it's not correctly showing Roboto Condensed. We won't talk about fonts for today. But the programmers of worldometers.info need to take CoderSchool!)

Now, we need to change the h2s. Let's ignore the color for now, and get the text formatting correct.

Use our right-click inspect to uncover the styles:

.

These styles are more complex; they're coming from two places. We can just merge them into our h2 declaration.

Now we have to add the colors. The easiest way to do this is to simply add a certain class to each h2, and define custom colors for the h2 in our styles.css.

Go back to index.html and add classes to each h2 element:

    <h1> Coronavirus Cases </h1>
    <h2 class="cases-count"> 3,075,538 </h2>

    <h1> Deaths </h1>
    <h2 class="deaths-count"> 211,788 </h2>

    <h1> Recovered </h1>
    <h2 class="recovered-count"> 925,123 </h2>

And now add new classes in your style.css. (Where did I get the colors from? By inspecting the counts using the inspector.)

Note that we also added a text-align: center back to our h1 style; turns out we missed that earlier. There are a few other tweaks to make (with margin) to make it look just perfect; spend some time to make it look more like the real thing.

Solution for Milestone 2

https://repl.it/@CharlesLee1/CoroNews-Milestone-2

Milestone 3: Bar and Links

Now it's time to tackle the other accoutrements of this page:

After this, we'll be in tuxedo winnie the pooh land:

For this section, we'll just stack three divs on top of each other. For convenience, we'll put them inside a div called top-section.

<div class="top-section">
    <div class="header-bar"> Covid-19 Coronavirus Pandemic </div>
    <div class="last-updated"> Last updated: April 28, 2020, 09:21 GMT </div>
    <div class="links"> Graphs - Countries - Death Rate - Symptoms - INcubation - Transmission - News </div>
</div>

Create a .top-section rule in your style.css, and give it one property: text-align: center. That means everything inside top-section will be centere by default. You should then see something like:

Now getting a bit closer. Let's add the gray bar next. Simply inspect the original page for a bit of hint on what to do:

You can do the same for the last updated section. After adding the appropriate styles, go through and add <a> tags for each of the links. For now, you can set the tags to be like <a href=#>Graphs</a>. The # just means we haven't supplied an actual link; we want it to look like a link but clicking it doesn't go anywhere (because we're just building the visual elements of the page right now).

Careful inspection of the link should reveal that the color is #699a21. At the end of this Milestone, you should see something like:

Solution for Milestone 3

https://repl.it/@CharlesLee1/CoroNews-Milestone-3

Bonus Milestone 4: Boxes of Doom

This one is quite challenging; in real life this site is using a code library called Bootstrap. This is yet another thing you'll learn in the full course, but for today, we'll just build a simple version with plain CSS.

Try your best; there's a lot of concepts here we haven't learned yet but see how close you can do this. If you're on this step, you're beyond where you need to be at this point anyhow. :)

Partial Solution

https://repl.it/@CharlesLee1/CoroNews-Milestone-4