Wednesday, December 21st

Class hours: 9:40 – 2:05
Mr. Bohmann
wbohmann@ewsd.org

Week Sixteen

Today’s Notes

Today is an EHS A Day
Today is the first official day of Winter!
Today is the daylight will be the shortest of the year. 8 Hours 49 minutes and 44 seconds
Early Release and Wacky Wednesday
Game Day food sign up: Bring Something to share
Cameras – I have: Eric, Tom, Ryan, Lance, Kaden, Matt – If you have your camera please turn in today
Tomorrow – Viewing of Wireframes and Pin Design narrowing

9:40 Attendance

9:45 First Day of Winter – Activity – Decorations

Project Snowflake

10:05 Skills USA Work Session

Pin or Job Skill Demo

Pins – 4 pack to 2 pack

If you have not done a 4 pack, you now only get to do a two pack

We are going to vote on the design you should commit to digital with some crowdsourcing tomorrow morning.

If you are a job skill demo – begin by organizing your demo notes, equipment needs and respond to email that was sent to you by Ms. Knight.

10:35 Break

10:45 Light and Dark Modes – Web Trends

We looked researched a few web trends yesterday. A popular one is switching the modes of your webpage between light and dark. The interaction is satisfying and you can have some fun with this one.

Maybe on your fun facts page you can toggle and change all of the Fun Facts!

The light / dark mode is definitely one of those features I have seen around for awhile. Google even went to dark mode this past year.

Let’s tackle a pretty easy interaction with JavaScript and change a web page Dark Mode with a simple button. Let’s build a version in Codepen to see how it works.

What’s going on:

The Element.classList is a read-only property that returns a collection of the class attributes of the element.

function darkFunction(){
  var element = document.body; //Get the <body> element and toggle between the .dark-mode class:
  element.classList.toggle("dark-mode");
}

// Every element in the DOM has a class list property.  There is an 
// element.classList.add() for adding a CSS class
// element.classList.remove()
// element.classList.toggle() looks to see if it is there.  If it is then do it

The :before pseudo-element can be used to insert some content before the content of an element.

The :after pseudo-element can be used to insert some content after the content of an element.

/* these are pseudo classes that will append the text */
.dark-mode button:before{
  content:'Dark ';
}

button:before{
  content:'Light ';
}

When we add these pseudo classes we can add the words Light or Dark to the Button before the word “Theme”

If we have some time I’ll also show you how to do something similar but with multiple stylesheets. Now that would have been handy with the Waterfront Driving project.

11:30 Work Session

This is a 45 minute sprint. Do you have incomplete work? Need help. Here is your time.

12:15 Lunch

12:45 Literacy in Practice

1:10 Break

1:20 20% Production Time & Guided Support

Wireframe due for Thursday morning: About Me (landing page only)
SKills USA Pin – Two Pack – Thursday
Incomplete Work
JS help