Tuesday, December 9th

Class Hours: 10:05 – 2:40
Mr. Bohmann | wbohmann@ewsd.org

10:05 Today’s Notes & Attendance

Two Weeks!
Lion – Graphic Literacy Testing Today – room e109. Beginning at 10:15am
CCV Lunch Order – go get it
FireDrill tomorrow
PreTech Visitors tomorrow – 4 students (5 rotations 5 minutes each)
Cookie Share SignUp

10:10 Purinton Tree Farm – Team Project

10:50 Morning Break (10 minutes)

11:00 JS Swapping StyleSheets

We are going to create a web page and add some custom styles. Check out what I mean when you look at CSS Zen Garden.

We can do a version of this too while learning some important JS concepts. We’ll use an event in JS There are lots of events in JavaScript. We’ll choose an event listener that will listen for a click. When we click, we’ll execute a function (which will change CSS stylesheets).

To get started, it’s important to create a JS folder and put a script in there. Then link to it just like we would for a css file.

We’ll need a few things to get going.

A stylesheet with new styles we’ll click to (use my default styles for your first sheet)
A js folder
A js file
A js file linked from html page
A button with an event handler
An id for the link element (yes! you can put an id in the head tag)

<body>
<header>
    <button id="default_style">Default</button>
    <button id="style1">One</button>
    <button id="style2">Two</button>
    <button id="style3">Three</button>
</header>
<main>
    <figure class="card">
  <img src="https://robohash.org/vawd2345" alt="robot">
  <div class="container">
    <h4><b>Yan Block</b></h4>
    <p>Architect & Engineer</p>
  </div>
</figure>

<figure class="card">
  <img src="https://robohash.org/gawd2345" alt="robot">
  <div class="container">
    <h4><b>Maurice Metts</b></h4>
    <p>Human Resources Dept</p>
  </div>
</figure>

<figure class="card">
  <img src="https://robohash.org/green12" alt="robot">
  <div class="container">
    <h4><b>Paul Ribbets</b></h4>
    <p>Sanitation Supply Line</p>
  </div>
</figure>
</main>
</body>

function swapStyles(newstyle){
    document.getElementById('pagestyle').setAttribute('href', newstyle);
}

Above is a function set on a button. When user click the button, it will execute the code inside the curly brackets.

The code to execute says:
Look through the document and find the element with an id of “pagestyle”. Then add an href attribute to an element or in this case – to a set of parameters(arguments).

We’ll add the ID “pagestyle” to the <link> element in the head tag!

Data Attribute – what the heck is this?
data- prefix: All valid custom data attributes in HTML5 must start with the prefix data-. This signals to the browser and other web development tools that the attribute is not a standard, built-in HTML attribute (like class, id, or src).

Purpose: Data attributes are used to store custom data private to the page or application. This data is usually intended to be used by JavaScript to modify the behavior or appearance of the element without needing to use non-standard attributes or relying on class names for data storage.

Attribute Name: data-stylesheet is the name of the custom attribute.

Value: “css/default.css” is the value associated with this attribute.

How it’s used: A JavaScript script would read this value and perform some action based on it. For example, a script might: dynamically load some css: Example: If a user clicks a button, the script could read css/default.css from this attribute and dynamically load that stylesheet onto the page to change the element’s appearance (e.g., changing a theme).

Key Takeaway: This attribute does nothing on its own in HTML; the browser ignores it for rendering. It is a storage mechanism for a piece of information (“css/default.css”) that is meant to be accessed and acted upon later by JavaScript.

11:55 Lunch

*Creative Commons Attribution 4.0* – Animal Style Burgers from In-n-Out

12:25 Winter Changeover Event

Tutorials

1:10 Afternoon Break

1:25 Speed Design

1:45 Independent Production & Guided Support

Hard Surface Modeling – SciFi or Classic shipping container – Due Today, December 9th
Famous Photographer Project – Due Tomorrow, December 10th – Practice, Practice, Practice!
Decorative Silhouette in Photoshop – Due Thursday, December 11th
Purinton Tree Farm – new website – Due Wednesday, December 17th

2:10 Dailies

2:15 Independent Reading