Lab 12 - Them Problem

Learning Objectives

By the end of this lab, you should be able to:

1. call functions that return promises
2. test functions that return promises
3. recognize that not every problem is yours, but that some problems are “theirs”, “them problem"s if you will.

Goal

Provided with the starting code from the template here or from your instructor (check with them), create something similar to this demo available for mobile and desktop.

There are several “Them Problems” described by a pair of discordant emotional states in which “you” have a positive affect, but “they"have a negative affect, e.g.

1. you

   poppin'

   they

   stoppin'

2. you

   packin'

   they

   lackin'

Currently

In the provided starter code, the list of possible states “you” might be in comes from a call to a synchronous function (getYous) that immediately returns a short array of strings. Once one of these is selected, the starting code retrieves the corresponding state that “they” might be in when it’s a “them problem” through a call to a synchronous function (getThey). This function also immediately returns, but only 1 string.

Your task

1. replace the call to getYous with a call to getOptions which returns a promise that resolves to the array of strings.
2. replace the call to getThey with a call to getThemProblem which returns a promise that resolves to the string.

Stretch Goals

JS

1. invoke toggleLoader when appropriate to show the loading animation to give the visitor feedback that something is happening “in the background”.
   • note: this js function is already in the code and the necessary CSS is already in the provided CSS file.
2. inspect and critique the JS code.
   1. did you see anything new (to you)?
   2. is it DRY?
   3. is it organized?
   4. is it performant?
   5. what would you change?

Content

Add to the collection of “them problems”

1. how many can you come up with?
2. do they rhyme?
3. what’s your fav?
4. did you add them successfully to your demo?

HTML

Inspect and critique the HTML structure

1. did you see anything new (to you)?
2. is the provided HTML semantic?
3. is it accessible?
4. is it responsive?
5. is it performant?
6. what would you change?

CSS

1. Inspect and critique the aesthetic and user experience. try the site in:
   1. dark vs. light mode
   2. narrow vs. wide viewports
   3. on faster and slower(throttled) network connections
2. Inspect and critique the CSS code.
   1. did you see anything new (to you)?
   2. is it DRY?
   3. is it organized?
   4. is it performant?
   5. what would you change?