DEV Community

Cover image for Simple LocalStorage Project!

Simple LocalStorage Project!

cristoferk profile image CristoferK ・2 min read

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>
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-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;
} {
    left: 24px;
    background: #fff;
body.night {
    background: #000;
    transition: 0.5s;
.container.night {
    background: black;
<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>

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 =

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() {

Enter fullscreen mode Exit fullscreen mode

Also, don't forget to subscribe to my YouTube channel for new videos every week!

Discussion (0)

Editor guide