» CS 347: Lab 10 – Media Queries Continued

CS 347: Lab 10 – Media Queries Continued

September 28, 2021 by Chris Johnson. Filed under
Deprecated: Creation of dynamic property WP_Term::$cat_ID is deprecated in /var/www/twodee/blog/wp-includes/category.php on line 378

Deprecated: Creation of dynamic property WP_Term::$category_count is deprecated in /var/www/twodee/blog/wp-includes/category.php on line 379

Deprecated: Creation of dynamic property WP_Term::$category_description is deprecated in /var/www/twodee/blog/wp-includes/category.php on line 380

Deprecated: Creation of dynamic property WP_Term::$cat_name is deprecated in /var/www/twodee/blog/wp-includes/category.php on line 381

Deprecated: Creation of dynamic property WP_Term::$category_nicename is deprecated in /var/www/twodee/blog/wp-includes/category.php on line 382

Deprecated: Creation of dynamic property WP_Term::$category_parent is deprecated in /var/www/twodee/blog/wp-includes/category.php on line 383

Deprecated: Creation of dynamic property WP_Term::$cat_ID is deprecated in /var/www/twodee/blog/wp-includes/category.php on line 378

Deprecated: Creation of dynamic property WP_Term::$category_count is deprecated in /var/www/twodee/blog/wp-includes/category.php on line 379

Deprecated: Creation of dynamic property WP_Term::$category_description is deprecated in /var/www/twodee/blog/wp-includes/category.php on line 380

Deprecated: Creation of dynamic property WP_Term::$cat_name is deprecated in /var/www/twodee/blog/wp-includes/category.php on line 381

Deprecated: Creation of dynamic property WP_Term::$category_nicename is deprecated in /var/www/twodee/blog/wp-includes/category.php on line 382

Deprecated: Creation of dynamic property WP_Term::$category_parent is deprecated in /var/www/twodee/blog/wp-includes/category.php on line 383

Deprecated: Creation of dynamic property WP_Term::$cat_ID is deprecated in /var/www/twodee/blog/wp-includes/category.php on line 378

Deprecated: Creation of dynamic property WP_Term::$category_count is deprecated in /var/www/twodee/blog/wp-includes/category.php on line 379

Deprecated: Creation of dynamic property WP_Term::$category_description is deprecated in /var/www/twodee/blog/wp-includes/category.php on line 380

Deprecated: Creation of dynamic property WP_Term::$cat_name is deprecated in /var/www/twodee/blog/wp-includes/category.php on line 381

Deprecated: Creation of dynamic property WP_Term::$category_nicename is deprecated in /var/www/twodee/blog/wp-includes/category.php on line 382

Deprecated: Creation of dynamic property WP_Term::$category_parent is deprecated in /var/www/twodee/blog/wp-includes/category.php on line 383
fall-2021, labs, webdev.

Dear students:

Welcome to lab. Now’s your chance to apply the ideas you read about. Find a partner and complete as much of the task below as you can. At the end of our time together, paste your HTML files into Crowdsource in order to receive credit.

Dark Mode

In addition to querying for details about the visitor’s viewport, there are many other media features for which your site can query. One particularly popular media feature facilitates the implementation of a dark mode appearance.

In implementing a dark mode appearance, it’s likely that you might like to change several style rules. “Recently” (~7 years?) there’s a feature of CSS that can be particularly useful in implementing large style changes like alternative color schemes.

CSS Custom Properties (CSS Variables)

Custom Properties provide a way to declare a label for a value that can then be referenced in other places in the CSS. A common use is to define several custom properties with some values for light mode and then other values for dark mode.

Task 1

Create a simple JMU CS-themed search interface that implements both a light and dark mode. Consider using these colors (🙌 Paige Normand):

JMU Slate Gray: #333333
Ice Blue: #8EE4D7
JMU Purple: #450084
Teal: #009698
JMU Light Gold: #F4EFE1

Try to recreate it as it appears in this video. Notice the ease of testing dark/light mode with the toggle in the Firefox DevTools. Note the border, and outline colors on the input box.

Note how the colors smoothly transition between their contrasting values. You can make this happen automatically:

#element1, #element2, ... {
  transition-property: background-color, color, border-color, ...;
  transition-duration: 1s;
  transition-timing-function: ease;
}

Task 2

Let’s get ready for Halloween in here 🎃. What’s scarier than than an evil clown 🤡?

Recreate the page as shown in the video below.

TODO

The next step of your learning is to complete the following tasks:

Read the chapter Client-side Scripting in All Over the Web.
Continue working on the first project.
Don’t write a blog entry this week.

See you next time.

Sincerely,