Develop Reference

Comments disappear after refreshing site

I'm trying to make a simple comment system. It display comments, but when I refresh the page , all comments disappear, only to re-appear again when I add a new comment. I would like to see the comments even after refreshing the page. And preferably with time stamp and in reverse order: so latest on top.
const field = document.querySelector('textarea');
const comments = document.getElementById('comment-box');
// array to store the comments
var comments_arr = [];
if(!localStorage.commentData){localStorage.commentData = [];}
else{
comments_arr = JSON.parse(localStorage.commentData);
}
// to generate html list based on comments array
const display_comments = () => {
let list = '<ul>';
comments_arr.forEach(comment => {
list += `<li>${comment}</li>`;
})
list += '</ul>';
comments.innerHTML = list;
}
submit.onclick = function(event){
event.preventDefault();
const content = field.value;
if(content.length > 0){ // if there is content
// add the comment to the array
comments_arr.push(content);
localStorage.commentData = JSON.stringify(comments_arr);
// re-genrate the comment html list
display_comments();
// reset the textArea content
field.value = '';
}
}
html {
font-size: 14px;
font-family: "Open Sans", sans-serif;
background-color: rgb(239, 239, 238);
}
/*Comment section*/
textarea {
margin: 40px 0px 10px 0px;
background-color: rgb(255, 255, 255);
width: 800px;
padding: 10px;
line-height: 1.5;
border-radius: 5px;
border: 1px solid #7097d1;
box-shadow: 1px 1px 1px #999;
}
#submit {
border-radius: 5px;
border: 1px solid #7097d1;
background-color: #e2e9ea;
}
#submit:hover {
background-color: #7097d1;
}
li {
list-style-type: none;
width: 770px;
margin: 10px 0px 10px -20px;
padding: 5px;
border-radius: 5px;
border: 1px solid #7097d1;
box-shadow: 1px 1px 1px #999;
background-color: #e2e9ea;
}
<link href="comment.css" rel="stylesheet">
<form>
<textarea id="comment" placeholder="Your response pls." value=""></textarea>
</form>
<input id="submit" type="submit" value="add">
<h4>Responses</h4>
<div id="comment-box"></div>
<script src="comment.js"></script>

Adding window.addEventListener('load', display_comments) will fix
This will run the display_comments function on every refresh

You call display_comments after submitting a comment, but you don't call it anywhere else - it needs to be called when the page loads as well.

upload button multiple - file lists in new line (break line) :)

What's Up :)
I styled custom upload file button, it looks like i want, but i don't know how to make it in .js that - each file name will be shown in new line not like right now after "," - i saw in .js code - line: .join(", ") but i don't know how to replace it with code which will make those files names into new lines :(
Here's my code:
HTML:
<div>
<input class="file-upload__input" type="file" name="myFile[]" id="myFile" multiple>
<button class="file-upload__button" type="button">Choose File(s)</button>
<span class="file-upload__label"></span>
</div>
</div>
CSS:
display: inline-flex;
align-items: center;
font-size: 15px;
}
.file-upload__input {
display: none;
}
.file-upload__button {
-webkit-appearance: none;
background: #009879;
border: 2px solid #00745d;
border-radius: 4px;
outline: none;
padding: 0.5em 0.8em;
margin-right: 15px;
color: #ffffff;
font-size: 1em;
font-family: "Quicksand", sans-serif;
font-weight: bold;
cursor: pointer;
}
.file-upload__button:active {
background: #00745d;
}
.file-upload__label {
max-width: 250px;
font-size: 0.95em;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-family: "Quicksand", sans-serif;
display: block;
margin-top: 15px;
}
.JS
document.querySelectorAll(".file-upload__button"),
function(button) {
const hiddenInput = button.parentElement.querySelector(
".file-upload__input"
);
const label = button.parentElement.querySelector(".file-upload__label");
const defaultLabelText = "No file(s) selected";
// Set default text for label
label.textContent = defaultLabelText;
label.title = defaultLabelText;
button.addEventListener("click", function() {
hiddenInput.click();
});
hiddenInput.addEventListener("change", function() {
const filenameList = Array.prototype.map.call(hiddenInput.files, function(
file
) {
return file.name;
});
label.textContent = filenameList.join(", ") || defaultLabelText;
label.title = label.textContent;
});
}
);
Thanks everyone who will help <3

I'm adding this as an answer instead of a comment so there is an official answer to this question.
Simply swap this
label.textContent = filenameList.join(", ") || defaultLabelText;
with this instead
label.innerHTML = filenameList.join("<br>") || defaultLabelText;

remove blur from textarea on file upload html | css | javascript

I have a html page where I want the text to be appear clear not blur
when I upload file the text is read from file and displayed on TextArea but the text appears to be blur
The concept I am using is when I type some specific keyword if that specific keyword matches when a type in the textarea then it appears in a different color like keyword "connected" if I type this in textarea then apperas green this is how my function is defined
Issue : when I take the text from file, the text is displayed on my textarea but appears blur how to fix that blur
work with this file and see gives blur content
could you please upload this text file and see (sample text file) link : sendspace.com/file/67ge9n you may get to see blur content as shown in image sendspace.com/file/r25qme
const color = {
"connected successfully": "green",
"connected": "green",
"connection failure": "red"
};
let textArea = document.getElementById("myTextArea");
let colorsArea = document.querySelector(".colors");
let backdrop = document.querySelector(".backdrop");
// Event listeners.
textArea.addEventListener("input", function() {
colorsArea.innerHTML = applyColors(textArea.value);
});
textArea.addEventListener("scroll", function() {
backdrop.scrollTop = textArea.scrollTop;
});
function applyColors(text) {
let re = new RegExp(Object.keys(color).join("|"), "gi");
return text.replace(re, function(m) {
let c = color[m.toLowerCase()];
return `<spam style="color:${c}">${m}</spam>`;
});
}
function rdata() {
var file = document.getElementById("myFile").files[0];
var reader = new FileReader();
reader.onload = function(e) {
var textArea = document.getElementById("myTextArea");
textArea.value = e.target.result;
};
reader.readAsText(file);
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 50%;
}
td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
input[type=text],
select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.container,
.backdrop,
#myTextArea {
font: 12px 'Open Sans', sans-serif;
letter-spacing: 1px;
width: 48%;
height: 250px;
}
#myTextArea {
margin: 0;
position: absolute;
border-radius: 0;
background-color: transparent;
z-index: 2;
color: black;
/* i change it to red , u can change to any color u want */
resize: none;
}
.backdrop {
position: absolute;
z-index: 1;
border: 2px solid transparent;
overflow: auto;
pointer-events: none;
}
.colors {
white-space: pre-wrap;
word-wrap: break-word;
}
<tr>
<td><input id="myFile" type="file" /></td>
</tr>
<tr>
<td colspan="2">
<div class="container">
<div class="backdrop">
<div class="colors">
</div>
</div>
<textarea id="myTextArea" onclick="rdata();"></textarea>
</div>
</td>
</tr>

its not blur ? ur code is correct

CSS Doesn't Work For Submitted Input

I've decided to try and make a Notes program as a learning experience. The point was to problem-solve on my own, but I'm pretty clueless as to why this won't work.
When I Shift + Double Click a note to rename it the note changes from a <div> to <input>, but the CSS stays the same. When I press enter (which submits the input) the changes back to <div>, and the CSS is there, but it is very small and doesn't take the shape of the text. Any idea why? Thanks!
Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button class="newList" onclick="newNote()">Create a new note</button>
<br></br>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
function clickNote(){
if(event.shiftKey){
$( "div" ).click(function() {
$( this ).replaceWith( "<tr><td><form'><input class='rename' placeholder='Type here' onkeydown='enter(event)' id='newListName' autofocus>" + "</input></form></td></tr>" );
});
} else {
location.href='list.html';
}
}
function enter(event){
var enter = event.which;
if (enter == 13){
var input = document.getElementById("newListName");
$( "input" ).keyup(function() {
$( this ).replaceWith( "<tr><td><div class='list' id='list' onclick='clickNote()'>" + input.value + "</div></td></tr>" );
});
}
}
function newNote(){
var newNt = document.createElement("DIV");
var text = "Rename with Shift + Double Click"
newNt.textContent = text;
newNt.setAttribute('class', 'list');
newNt.setAttribute('id', 'list');
newNt.setAttribute("onclick", "clickNote()");
document.body.appendChild(newNt);
}
</script>
</body>
</html>
CSS:
:root {
--main-color: #FFE033;
--secondary-color: #FEC82A;
}
.newList {
height: inherit;
width: 10%;
padding: .4%;
position: relative;
border-bottom: 4px solid var(--secondary-color);
background: var(--main-color);
}
.list {
height: inherit;
width: 10%;
padding: .4%;
position: relative;
border-bottom: 4px solid var(--secondary-color);
background: var(--main-color);
}
.rename {
height: 2.5em;
width: 116%;
padding: .4%;
position: relative;
border-bottom: 4px solid var(--secondary-color);
background: var(--main-color);
}
#list {
cursor: pointer;
}

Am not sure why you are doing this, but you are adding td tr around the div which make it insde a table and create this issue as the width is defined with 10%. Remove it and it should work fine. You need also to correct the input tag.
function clickNote() {
if (event.shiftKey) {
$("div").click(function() {
$(this).replaceWith("<input class='rename' placeholder='Type here' onkeydown='enter(event)' id='newListName' autofocus>");
});
} else {
location.href = 'list.html';
}
}
function enter(event) {
var enter = event.which;
if (enter == 13) {
var input = document.getElementById("newListName");
$("input").keyup(function() {
$(this).replaceWith("<div class='list' id='list' onclick='clickNote()'>" + input.value + "</div>");
});
}
}
function newNote() {
var newNt = document.createElement("DIV");
var text = "Rename with Shift + Double Click"
newNt.textContent = text;
newNt.setAttribute('class', 'list');
newNt.setAttribute('id', 'list');
newNt.setAttribute("onclick", "clickNote()");
document.body.appendChild(newNt);
}
:root {
--main-color: #FFE033;
--secondary-color: #FEC82A;
}
.newList {
height: inherit;
width: 10%;
padding: .4%;
position: relative;
border-bottom: 4px solid var(--secondary-color);
background: var(--main-color);
}
.list {
height: inherit;
width: 10%;
padding: .4%;
position: relative;
border-bottom: 4px solid var(--secondary-color);
background: var(--main-color);
}
.rename {
height: 2.5em;
width: 100%;
padding: .4%;
position: relative;
border-bottom: 4px solid var(--secondary-color);
background: var(--main-color);
}
#list {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="newList" onclick="newNote()">Create a new note</button>

removing the input text in the text field that matches the removed tab

In this example I made, since it uses keyup event, each input text (separated by comma) entered is converted into a tab. I want the input text to be deleted from the text field according to the tab I remove; for example, I enter "Item 1" but I suddenly change my mind and decide to remove the "Item 1" tab, the input text in the text field that has a string that matches the textContent of the removed tab should be automatically deleted from the text field.
var query = document.querySelector.bind(document);
query('#textfield').addEventListener('keyup', addTag);
function addTag(e) {
var evt = e.target;
if(evt.value) {
var items = evt.value.split(',');
if(items.length <= 10) {
evt.nextElementSibling.innerHTML = null;
for(var i = 0; i < items.length; i++) {
if(items[i].length > 0) {
var label = document.createElement('label'),
span = document.createElement('span');
label.className = 'tag';
label.textContent = items[i];
span.className = 'remove';
span.title = 'Remove';
span.textContent = 'x';
label.insertAdjacentElement('beforeend', span);
evt.nextElementSibling.appendChild(label);
span.addEventListener('click', function() {
var currentElement = this;
currentElement.parentNode.parentNode.removeChild(currentElement.parentNode);
})
}
}
}
} else {
evt.nextElementSibling.innerHTML = null;
}
}
section {
width: 100%;
height: 100vh;
background: orange;
display: flex;
align-items: center;
justify-content: center;
}
.container {
width: 50%;
}
input[name] {
width: 100%;
border: none;
border-radius: 1rem 1rem 0 0;
font: 1rem 'Arial', sans-serif;
padding: 1rem;
background: #272727;
color: orange;
box-shadow: inset 0 0 5px 0 orange;
}
input[name]::placeholder {
font: 0.9rem 'Arial', sans-serif;
opacity: 0.9;
}
.tags {
width: 100%;
height: 250px;
padding: 1rem;
background: #dfdfdf;
border-radius: 0 0 1rem 1rem;
box-shadow: 0 5px 25px 0px rgba(0,0,0,0.4);
position: relative;
}
.tags > label {
width: auto;
display: inline-block;
background: #272727;
color: orange;
font: 1.1rem 'Arial', sans-serif;
padding: 0.4rem 0.6rem;
border-radius: .2rem;
margin: 5px;
}
.tags > label > span {
font-size: 0.7rem;
margin-left: 10px;
position: relative;
bottom: 2px;
color: #ff4d4d;
cursor: pointer;
}
<section id="tags-input">
<div class="container">
<input type="text" name="items" id="textfield" placeholder="Enter any item, separated by comma(','). Maximum of 10" autofocus>
<div class="tags"></div>
</div>
</section>
How can I make that feature possible?

Replace the 'x' button listener with this one:
span.addEventListener('click', function () {
var text_field = document.getElementById("textfield");
var evt = this.parentNode;
var tags = text_field.value;
this.parentNode.removeChild(this); // remove the 'x' span so you can get the pure tag text with .innerHTML
var evname = evt.innerHTML;
var tags_array = tags.split(",");
var tag_position = tags_array.indexOf(evname);
if(tag_position > -1)
tags_array.splice(tag_position,1);
text_field.value = tags_array.join(',');
evt.parentNode.removeChild(evt);
})
// Coding this complexity in pure javascript when there is jQuery is ... like eating soup with a fork. You will get the job done, but it is dammn hard!