I made a simple Simple LocalStorage Project! This is the first time when I used localStorage! I learned this from a beginner tutorial what was very easy to follow.
Here is the code:
<!DOCTYPE html> <html> <head> <title>LocalStorage</title> </head> <style> body { font-family: sans-serif; margin: 0; padding: 0; color: grey; } .container { position: absolute; top: 10%; right: 50%; transform: translate(50%, 0%); background: white; width: 400px; height: 500px; box-shadow: 0px 0px 20px blue; padding: 10px; border-radius: 20px; } .storage { border:0; border-bottom: 1px solid #ccc; width: 100%; margin-top: 20px; font-size: 20px; outline: none; } .text { border-radius: 10px; padding: 10px; box-shadow: 0px 0px 10px blue; margin-top: 20px; } .button { width: 80%; box-shadow: 0px 0px 20px blue; outline: none; border: none; background: white; padding: 10px; border-radius: 20px; bottom: 20px; position: absolute; left: 40px; cursor: pointer; transition: 0.4s; } .button:hover { box-shadow: 0px 0px 40px blue; transition: 0.4s; } label { position: absolute; width: 45px; height: 22px; right: 20px; top: 20px; border: 2px solid; border-radius: 20px; } label:before { position: absolute; content: ""; width: 20px; height: 20px; left: 1px; top: 1px; border-radius: 50%; cursor: pointer; background: #000; transition: 0.4s; } label.active:before { left: 24px; background: #fff; } body.night { background: #000; transition: 0.5s; } .container.night { background: black; } </style> <body> <label id="dark-change"></label> <div class="container"> <input type="text" class="storage" placeholder="Write something..."> <p class="text">Text</p> <button class="button">Save</button> </div> <script> const storageInput = document.querySelector('.storage'); const text = document.querySelector('.text'); const button = document.querySelector('.button'); const storedInput = localStorage.getItem('textinput') if(storageInput) { text.textContent = storedInput } storageInput.addEventListener('input', letter => { text.textContent = letter.target.value }) const saveToLocalStorage = () => { localStorage.setItem('textinput', text.textContent) } button.addEventListener('click', saveToLocalStorage) var content = document.getElementsByTagName('body', 'container')[0]; var darkMode = document.getElementById('dark-change'); darkMode.addEventListener('click', function() { darkMode.classList.toggle('active'); content.classList.toggle('night'); }) </script> </body> </html> Also, don't forget to subscribe to my YouTube channel for new videos every week!
https://www.youtube.com/channel/UCFzeA3xC-_i4ZT-XwcwsJxQ/videos
Top comments (0)