Dark mode Toggle

This project is a simple implementation of a dark mode toggle switch for a webpage. When the switch is toggled on, the background color of the webpage changes to a dark theme, and the switch circle changes color as well. The implementation is done using HTML, CSS, and JavaScript. The HTML contains the switch input element and label, while the CSS is used to style the switch elements and animate the switch circle. The JavaScript code handles the functionality of the switch, updating the webpage's background color and storing the user's preference using local storage. The result is a basic but effective way to add a dark mode toggle feature to a webpage.

Demo

You can try out the application by visiting this link.

Technologies Used

• HTML
• CSS
• JavaScript

Getting Started

To get started with this project, clone the repository and open the index.html file in your preferred web browser.

New Things I Learned

1. I learned about localStorage, which is a built-in web API that allows web developers to store data on a user's local machine. It provides a simple way to save data locally and retrieve it later.
2. JSON.stringify(): I also learned about the JSON.stringify() method, which is a built-in JavaScript method that is used to convert a JavaScript object into a JSON string. JSON stands for JavaScript Object Notation and is a lightweight format for storing and transporting data.
3. localStorage.setItem(): Another thing I learned was the localStorage.setItem() method, which is used to store a key-value pair in the browser's local storage. The setItem() method takes two arguments: the name of the key and the value you want to store.
4. localStorage.getItem(): I learned about the localStorage.getItem() method, which is used to retrieve a value stored in the browser's local storage. The getItem() method takes the name of the key as an argument and returns the corresponding value.
5. JSON.parse(): I also learned about the JSON.parse() method, which is a built-in JavaScript method that is used to convert a JSON string back into a JavaScript object. This method is the opposite of JSON.stringify().

Overall, I learned about how to use localStorage to store and retrieve data on a user's local machine, as well as how to use JSON.stringify() and JSON.parse() to convert data between a JavaScript object and a JSON string. These skills can be useful for building web applications that need to store and retrieve user preferences or other data on the user's device.

Challenges I faced

I've had some difficulty understanding some of the JavaScript methods used in the code of this project. Specifically, I had trouble understanding localStorage.setItem(), localStorage.getItem(), and JSON.parse(), and how to use them in the context of the project.