WebDev4R: Creating a weather app

WebDev

We create what looks like a weather app with {htmltools}

Author

Albert Rapp

Published

February 18, 2024

In this blog post, I’m using the {htmltools} package to build what looks like a weather app. This will combine a lot of tools we will learn in the WebDev4R series. If you’re reading this, before the series has reached the lesson on {htmltools} and flexboxes, you can think of this as a teaser of what’s to come. So let’s take a look at what we’re going to build.

11:38

Milwaukee, WI

22° Rain 22°/14°

Today

22°/14°

Tomorrow

23°/15°

Monday

23°/15°

We’re going to build this from the ground up. And if you’re a fan of video content, then you can also watch the video version of this blog post on my YouTube channel:

The structure of the app

Let’s start out by dishing out a bunch of div containers that will hold our content. What we will need are designated areas for the

rectangular phone shape that contains everything,
top bar with the time and status icons,
location and location icon,
temperature and forecast,
forecast icon and
container of the next 3 days’ forecast.

div(
  div(
    id = 'top-bar'
  ),
  div(
    id = 'location-container'
  ),
  div(
    id = 'temp-container'
  ),
  div(
    id = 'forecast-icon'
  ),
  div(
    id = 'next-3-days-container'
  ),
  style = htmltools::css(
    width = '375px',
    height = '650px',
    background = '#333333',
  ),
  id = 'phone-container'
) |> 
  div(
    br(),
    style = 'all: initial;'
  )

This is the basic structure of our app. Notice that I have passed the phone container to another div() that adds a line break and sets all styles to initial. This is to ensure that the styles that I set in my Quarto blog interfere as little as possible with the overall look.

Also, the line break is a clumsy way to ensure that there is some space below the rectangle (otherwise the text looks weird). Due to the way Quarto nests the output into containers, I can’t just add a margin to the phone container.

Set up phone container

Now that we have that squared away, let us set up the phone container. Here, we can ensure that we

use a (subtle) gradient background,
add a border,
make the border rounded,
ensure that the content has some padding away from the borders and
set font family and color

div(
  div(
    id = 'top-bar'
  ),
  div(
    id = 'location-container'
  ),
  div(
    id = 'temp-container'
  ),
  div(
    id = 'forecast-icon'
  ),
  div(
    id = 'next-3-days-container'
  ),
  style = htmltools::css(
    width = '375px',
    height = '650px',
    background = 'linear-gradient(45deg, #46afff, #47c8ff)',
    border = '3px solid #333333',
    border_radius = '20px',
    padding = '15px 25px 15px 25px',
    font_family = 'Source Sans Pro',
    color = 'white',
  ),
  id = 'phone-container'
) |> 
  div(
    br(),
    style = 'all: initial;'
  )

Set up top bar

Sweet. Now let’s move on to the top bar. Inside of there we want to display the time and some status icons. We can use the shiny::icon() function to add some icons. All this requires is a name of a suitable Font Awesome icon.

But the more important thing is the layout. The time is all the way to the left (minding the padding) and the icons are all the way to the right. This just screams flexbox with justify-content: space-between.

div(
  div(
    '11:38',
    div(
      shiny::icon(
        'signal',
      ),
      shiny::icon(
        'wifi',
      ),
      shiny::icon(
        'battery-three-quarters',
      )
    ),
    style = htmltools::css(
      display = 'flex',
      justify_content = 'space-between'
    ),
    id = 'top-bar'
  ),
  div(
    id = 'location-container'
  ),
  div(
    id = 'temp-container'
  ),
  div(
    id = 'forecast-icon'
  ),
  div(
    id = 'next-3-days-container'
  ),
  style = htmltools::css(
    width = '375px',
    height = '650px',
    background = 'linear-gradient(45deg, #46afff, #47c8ff)',
    border = '3px solid #333333',
    border_radius = '20px',
    padding = '15px 25px 15px 25px',
    font_family = 'Source Sans Pro',
    color = 'white',
  ),
  id = 'phone-container'
) |> 
  div(
    br(),
    style = 'all: initial;'
  ) |> browsable()

11:38

Nice, this worked pretty smoothly. And due to the fact that icons are inline elements, they are automatically aligned horizontally so that we don’t have to apply any further styling to the container that holds them. But we can modify their spacing and font style a bit.

div(
  div(
    '11:38',
    div(
      shiny::icon(
        'signal',
        style = 'margin-left: 5px'  ### <- Changes here
      ),
      shiny::icon(
        'wifi',
        style = 'margin-left: 5px'  ### <- Changes here
      ),
      shiny::icon(
        'battery-three-quarters',
        style = 'margin-left: 5px'  ### <- Changes here
      )
    ),
    style = htmltools::css(
      display = 'flex',
      justify_content = 'space-between',
      font_size = '20px',          ### <- Changes here
      font_weight = 600,           ### <- Changes here
    ),
    id = 'top-bar'
  ),
  div(
    id = 'location-container',
  ),
  div(
    id = 'temp-container'
  ),
  div(
    id = 'forecast-icon'
  ),
  div(
    id = 'next-3-days-container'
  ),
  style = htmltools::css(
    width = '375px',
    height = '650px',
    background = 'linear-gradient(45deg, #46afff, #47c8ff)',
    border = '3px solid #333333',
    border_radius = '20px',
    padding = '15px 25px 15px 25px',
    font_family = 'Source Sans Pro',
    color = 'white',
  ),
  id = 'phone-container'
) |> 
  div(
    br(),
    style = 'all: initial;'
  ) |> browsable()