This content originally appeared on DEV Community and was authored by CristoferK
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
This content originally appeared on DEV Community and was authored by CristoferK
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
CristoferK | Sciencx (2021-04-08T16:30:14+00:00) Simple LocalStorage Project!. Retrieved from https://www.scien.cx/2021/04/08/simple-localstorage-project/
" » Simple LocalStorage Project!." CristoferK | Sciencx - Thursday April 8, 2021, https://www.scien.cx/2021/04/08/simple-localstorage-project/
HARVARDCristoferK | Sciencx Thursday April 8, 2021 » Simple LocalStorage Project!., viewed ,<https://www.scien.cx/2021/04/08/simple-localstorage-project/>
VANCOUVERCristoferK | Sciencx - » Simple LocalStorage Project!. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/08/simple-localstorage-project/
CHICAGO" » Simple LocalStorage Project!." CristoferK | Sciencx - Accessed . https://www.scien.cx/2021/04/08/simple-localstorage-project/
IEEE" » Simple LocalStorage Project!." CristoferK | Sciencx [Online]. Available: https://www.scien.cx/2021/04/08/simple-localstorage-project/. [Accessed: ]
rf:citation » Simple LocalStorage Project! | CristoferK | Sciencx | https://www.scien.cx/2021/04/08/simple-localstorage-project/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.