I have an online diary application. Everytime a user enters a block of text, it gets saved as an entry below. I can successfully add those entries into local storage and access it to display it when the screen is refreshed, but I want to add CSS to those retrieved items, to make them look the same as when they are first added to the list. I've tried multiple approaches, but nothing seems to work.
//Online journal functionality
function _(id) {
return document.getElementById(id)
}
function getRs() {
let text = _('text').value
const d = new Date()
_('rs').innerHTML += `<div class="card"><p>${text}</p>
<small>${d.toLocaleTimeString()}, ${d.toLocaleDateString()}</small></div>`
}
//Local storage
const input = document.querySelector('.text');
const entry = document.querySelector('.entry')
const saveButton = document.querySelector('.save-btn');
const clearButton = document.querySelector('.clear-btn');
const storedInput = localStorage.getItem('textinput');
if (input) {
entry.textContent = storedInput
}
const saveToLocalStorage = () => {
localStorage.setItem('textinput', entry.textContent)
};
function clearStorage() {
localStorage.clear();
};
saveButton.addEventListener('click', saveToLocalStorage);
clearButton.addEventListener('click', clearStorage);<header class="diary-title">
<h2>My online diary</h2>
</header>
<div class="wrapper" style="margin-left: 440px;">
<textarea class="text" id="text" rows="3" placeholder="How are you feeling today?" style="width: 600px; height: 150px; text-align: center;"></textarea>
</div>
<div class="diary-btn" id="diary-btn">
<button onclick="getRs()" style="background-color: #55725d; color: #e8e6ea; padding: 5px; text-align: center; border-color: transparent; margin-left: 690px; margin-top: 7px;">Create entry</button>
</div>
<div class="localstore">
<button class="save-btn" id="save-btn">Save</button>
<button class="clear-btn" id="clear-btn">Clear</button>
</div>
<div id="rs" class="entry" style="max-width: 1000px; align-content: center; margin-left: 180px;"></div>I want to add this CSS to the retrieved items displayed (so the storedInput variable):
padding: 0.5rem 1rem;
border: 1px solid #55725d;
padding-bottom: 5px;
border-radius: 3px;
margin: 0.5rem 0;
Just store your css in a class and after retrieving the items from localStroge.
use
document.getElementById("myDIV").element.classList.add("classname");
Make sure you have linked your css correctly in your html file.