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.
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.
CSS Flexbox Layout
Flexbox is a set of CSS properties that give you a flexible way to lay out content.
CSS Grid Layout
CSS Grid Layout provides a built-in, more efficient way of designing grid-based layouts in the browser.
JavaScript Basics
In this course, you'll learn the fundamental programming concepts and syntax of the JavaScript programming language.
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.
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.
-
0
To begin, click "Start Adventure" at the top of the page and then download your starter files.
-
1
Use CSS Flexbox or Grid to layout the elements on the page.
-
2
Use JavaScript to add event listeners to the toggle switches and delete button.
-
3
Use localStorage to save and load the state of the toggle switches.
-
4
If "delete" is clicked, clear localStorage and set all toggle switches to the off position.
-
5
Extra Challenge: Add another setting to toggle a dark mode and create the styles to go with it.
-
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.
-
7
Extra Challenge: Have a 'create an account' view show in the menu if account was deleted.