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)