From the course: Controlling CSS with JavaScript

Unlock this course with a free trial

Join today to access over 24,000 courses taught by industry experts.

Challenge: Stylesheet switcher

Challenge: Stylesheet switcher

From the course: Controlling CSS with JavaScript

Start my 1-month free trial Buy for my team

Challenge: Stylesheet switcher

“

(uplifting offbeat music) - [Instructor] To help you solidify what you've learned right away, I've created several challenges and placed them throughout the course. This is the first challenge. It's a style sheet switcher. This is what I want you to end up with. The page that we've been working with so far now has two buttons at the top list view, and grid view. And when you click on grid view, we changed a view from lists to grid. And then back again. To make this work, you need to enable or disable a separate style sheet that has that grid layout. Here's what I want you to do. First off disabled, a grid style sheet on load. It's sitting in the document and I want you to disable it so that it's not loaded into the browser. Second, add button functionality to toggle the grid when selected, and finally highlight the current layout button so the user always knows whether they are on the list layout or on the grid…

Contents