Chapter 02

Milky Mood – Part 1

Links + downloads

Chapter resources

Chapter URL

Videos

Lesson 01

Introduction to MilkyMood

Lesson 02

Introduction to Styled Components

Lesson 03

Building the Header component

Lesson 04

Building the Footer component

Lesson 05

Building the Image component

Lesson 06

Using a matrix to slice the image into a puzzle

Lesson 07

Using hooks, event handlers, and maths to calculate the cursor distance

Lesson 08

Setting new positions for the image squares

Lesson 09

Changing the background color and glow animation based off of the image's status

Lesson 10

Adding responsive styles

Welcome to your second homework exercise for Intro to React.js. We're going to be giving the user more power to play around with the background and text colors!

Homework 01

Moodshade

SuperHi FM

Want some ambient music in the background? Play our radio station!

Next: Chapter 03

Milky Mood – Part 2

Back: Chapter 01

Zesty

Feeling stuck?

Don’t worry, we are here to help you with:

Speedy help from one of our team members
Detailed, relevant solutions
Direct access to peer support through Discord!

Remember, there’s no such thing as a silly question, so don’t hesitate to reach out, we love hearing from you!

Email Discord

SuperHi FM

Milky Mood – Part 1

Links + downloads

Videos

Introduction to MilkyMood

Introduction to Styled Components

Building the Header component

Building the Footer component

Building the Image component

Using a matrix to slice the image into a puzzle

Using hooks, event handlers, and maths to calculate the cursor distance

Setting new positions for the image squares

Changing the background color and glow animation based off of the image's status

Adding responsive styles

Moodshade

SuperHi FM

Feeling stuck?

Milky Mood – Part 1

Links + downloads

Videos

Introduction to MilkyMood

Introduction to Styled Components

Building the Header component

Building the Footer component

Building the Image component

Using a matrix to slice the image into a puzzle

Using hooks, event handlers, and maths to calculate the cursor distance

Setting new positions for the image squares

Changing the background color and glow animation based off of the image's status

Adding responsive styles

Moodshade

SuperHi FM

Feeling stuck?

Private notes