Heads up! To embark on an Adventure or participate further, sign in with your Treehouse account or enroll in your free, 7-day trial.

Treehouse Code Adventures > Settings Panel

Settings Panel

Settings Panel

A settings panel that allows users to manage various account preferences including synchronization, online visibility, privacy controls, and the option to delete their account.

Desktop icon
Start Adventure

Created: 11/06/2023 by Dustin Usey

Skill level: beginner

Topics used: HTML CSS JavaScript

Estimated completion time: 1 Hour

    A settings panel that allows users to manage various account preferences including synchronization, online visibility, privacy controls, and the option to delete their account.

Code adventure mockup image

CSS Flexbox Layout

Flexbox is a set of CSS properties that give you a flexible way to lay out content.

Code adventure mockup image

CSS Grid Layout

CSS Grid Layout provides a built-in, more efficient way of designing grid-based layouts in the browser.
Code adventure mockup image

JavaScript Basics

In this course, you'll learn the fundamental programming concepts and syntax of the JavaScript programming language.
Code adventure mockup image

Interacting with the DOM

Along with selecting DOM elements in JavaScript we can also write code that gives elements behavior. In this course we will first explore how to watch for interaction and respond using the method addEventListener.
Code adventure mockup image

Using Local Storage With JavaScript

Local Storage is part of the Web Storage API, and allows you, as a developer, to store data in a user's browser.

  1. 0

    To begin, click "Start Adventure" at the top of the page and then download your starter files.

  2. 1

    Use CSS Flexbox or Grid to layout the elements on the page.

  3. 2

    Use JavaScript to add event listeners to the toggle switches and delete button.

  4. 3

    Use localStorage to save and load the state of the toggle switches.

  5. 4

    If "delete" is clicked, clear localStorage and set all toggle switches to the off position.

  6. 5

    Extra Challenge: Add another setting to toggle a dark mode and create the styles to go with it.

  7. 6

    Extra Challenge: If "delete" is clicked, have the user double down and confirm they truly want to delete their account. This could be a modal popup or it could be an input field that requires them to type in delete to confirm. Then a success message pops up and the settings menu is cleared.

  8. 7

    Extra Challenge: Have a 'create an account' view show in the menu if account was deleted.