Thursday, April 28th

Class Hours: 9:40 – 2:05
Mr. Cronin

Notes

Thursday! There is literal snow at my house this morning.

9:40 Attendance and Article

9:45 Nineteen Eighty-Four

10:05 Photoshop

Cropping a portion of an image for a thumbnail using fixed size

10:15 Web Design

CSS background images
JS background images
Background image size adjustments
VH and VW
Perfectly centered design elements
transform: rotate(0deg)
flex-wrap:wrap – doing this makes sure the widths of your child elements are listened to. If not, they may get scaled down.
overflow: hidden;
border-radius:20px;
cursor:pointer;

10:35 Morning Break (10 minutes)

10 Minutes break – you have to exit the room.
When the door near the TV is open, you are welcome to come back in.

10:45 English

11:35 CAWD / Web Dev Project: Spinning Background Selector

This week’s assignment is as much as a logic puzzle as it is a programming challenge. Most programming is like this. Even if you know the language, figuring out how to DO what you want to do – even when you have no errors – can be an interesting part of the job.

Your task:

Create a 2×2 rotating design element in the center of your screen – 400 pixels wide. This design element should have rounded edges. Do NOT use tables for this.
This 4 images should be a portion of the full size image (from landscape art you have have created), not just a squished version. Each should be 200 pixels x 200 pixels.
When I hover my mouse over one of the 4 images it should fade in and my mouse pointer should change to a cursor.
When I click on that specific image I want the background of my website to change, and I only want to see a single copy of my background image – no evidence of the background repeating.
Valid HTML
No JS errors

Create a folder called “spinning” inside of your “week_32” folder, with your “index.html” as well as all other required elements.

You will have now, and Friday AM around English to complete this. I am NOT telling you how to do it, this will involve some research on your end. Use developer resources such as:

Without giving two many hints:

I used HTML, JS, and CSS (I know, I know)
I used variables
I used event listeners
I used timed based functions
I used click based functions
I used a switch statement
I used “this” in JS
I wrote JS that (connecting through the DOM) altered CSS properties. Tying it all together.

Extra Credit opportunity: figure out how to fade the backgrounds in and out, instead of just appear / disappear.