Chapter 02

Milky Mood – Part 1

In this project, we're going to build some fun cursor interactions to transform an image into a 4x6 puzzle. We're also going to be adding in some animation and transition effects to make our website even more visually appealing!

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

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!

Private notes

A place for you to post notes about anything on this page. Only you can view your notes.

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