Wednesday, November 16th

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

Week Twelve

Today’s Notes

Today is an EHS A Day and Wacky Wednesday
BFA not on early release
CCV Drawing – Permission Slips due tomorrow
Callbacks: none so far

9:40 Attendance

9:45 Custom Fonts and Font Awesome

What’s Awesome – Font Awesome!

Font Awesome is an icon library which provides 1500+ free scalable vector icons. This library is completely free for both personal and commercial use. Originally designed for Bootstrap, these icons can be customized easily. (Bootstrap is a front end framework – well learn about that later)

To add the Font Awesome library to your website/project you need to link to it using a CDN in the head tag of your website.

<!doctype html>
<html>
  <head>
    <!-- Place your kit's code here -->
    <script src="https://kit.fontawesome.com/ef8625f426.js" crossorigin="anonymous"></script>
  </head>

  <body>
    <!-- Ready to use Font Awesome. Activate interlock. Dynotherms - connected. Infracells - up. Icons are go! -->
    <i class="fas fa-thumbs-up fa-5x"></i>
  </body>
</html>

CDN stands for Content Delivery Network. Code libraries like Bootstrap, JQuery and Font Awesome (and many others) are accessed through a CDN. The benefit to linking to a library vs. installing one is SPEED!

Let’s go to Font Awesome and make some accounts. Then will make a Kit. A kit is like a backpack. It carries your favorites and caches them for supreme speed. Speed matters when it comes to graphics.

Let’s play with some of the icons – Fork my CodePen

Awesome Project:

Find a Quote that moves you. Add font Awesomeness to it. When you are done, FTP it to the server. You can also create your own quote – if you happen to be so clever.

This project will help you:

build a proper head tag with meta data!
link a stylesheet
link to and use font-awesome
practice your html and css
add custom fonts
use the validator
file transfer via FTP
code practice

Start with a folder on your desktop. Call it Awesome. Inside, organize the necessary items. This project is due today at 11:30 for viewing.

10:35 Break

10:45 Font Awesome Project work / Parallax Project Work

11:30 JavaScript – Working with Variables

Let’s continue to build on the basics from last week. You remember we created:

an alert on page load
an alert when we clicked a button
a mouseover effect where we changed the contents of our html with new html.

For our JS demo, we’ll continue to explore Event Driven Programming and manipulate the DOM

Event-driven programming is a programming concept in which the flow of the program is determined by events initiated by user actions (mouse clicks, key presses, hover, page loads, scrolling, form submissions)

The DOM is the Document Object Model – or basically the organization of our HTML in our document.

The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. In the example below we are looking for an h1. We could also use querySelector() to find the first id or class too.

document.querySelector("h1")

// conditional for changing the h1 with our button
function hello(){
    if (document.querySelector("h1").innerHTML === "Hello"){
        document.querySelector("h1").innerHTML="Goodbye";
    }
else{
    document.querySelector("h1").innerHTML = "Hello";
}
}

// loop for counting the button
let counter = 0;
function count(){
   
    counter ++;
    alert(counter);

}

JavaScript Variables

var: used to define a variable globally

let: used to define a variable that is limited in scope to the current block of code such as a function or loop
let counter = 1;

const: used to define a value that will not change (a constant)
const PI = 3.14;;

12:15 Lunch

12:45 Field Trip – Library Tour

Today we are going to meet the head librarian – Liz Von Nagy. She is going to give us a tour of what we can find in the library and perhaps you will find your next friend (book – books are friends!).

You’ve never asked about the book covers on the walls. To prepare you for what’s beyond high school, I’ve found improving literacy, vocabulary, comprehension and stamina all comes from reading.

Focus on Literacy Reading Rubric

1:10 Break

1:20 20% Production Time & Guided Support

Parallax Website – How To
Font Awesome Webpage
20% Project