DEV Community

loading...
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>
<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>

Enter fullscreen mode Exit fullscreen mode

Also, don't forget to subscribe to my YouTube channel for new videos every week!
https://www.youtube.com/channel/UCFzeA3xC-_i4ZT-XwcwsJxQ/videos

Discussion (0)

pic
Editor guide