We Keep Coding

2 Newline Characters if There is an Empty Line in Textarea

I'm trying to get the number of lines that a textarea has for a line counter (for a text editor), but if there is an emtpy line in the textarea, there are two new lines added. Here is the output:
["// Hello World!","","","The line above was empty","","","Same here!","The line on the bottom of this one is empty!","",""]
My code:
function getLines() {
var textValue = document.querySelector('#editor').value;
var lines = textValue.split("\n");
console.log(lines);
}
At someone's request, here is the HTML:
<div id="visible" contenteditable="true"
onkeyup="updateLineCount()">// Hello World!</div>
<textarea id="code-editor">
Basically I plan on adding syntax highlighting, so the div is content editable, and the JS sends the stuff in the div to the textarea, just to calculate the lines of code. Here is the JS that does this:
textarea.value = document.querySelector("#code-editor").innerText;

The issue you are running into has to do with pulling the innerText value of your contenteditable div and placing it into a <textarea>. This is where the extra newline characters \n are coming from.
Unless you are required to use the <textarea> I would just get the line count from the contenteditable div directly. The only weird quirk here is that there is an extra newline character \n added to the very end of the innerText, but this can just be removed using .split(0, -1).
const updateLineCount = () => {
document.querySelector(".lines").innerHTML = [...Array(document.querySelector("#code-editor").innerText.slice(0, -1).split("\n").length).keys()].map(v => v+1).join("<br>")
}
document.querySelector("#code-editor").addEventListener("keyup", updateLineCount)
.code {
padding: .2em .4em;
border: 1px solid #CCC;
box-sizing: border-box;
display: inline-block;
}
.lines {
color: #555;
font-family: monospace;
width: 2em;
vertical-align: top;
border-right: 1px solid #CCC;
display: inline-block;
}
#code-editor {
font-family: monospace;
width: 40em;
vertical-align: top;
display: inline-block;
}
#code-editor:focus { outline: none; }
<div class="code">
<div class="lines">1</div>
<div id="code-editor" contenteditable="true">// Hello World!</div>
</div>

How to stop spinner after operation is finished

I am building my first web app using Flask. I'm new to html/ JavaScript/ CSS - please bear with me.
The app does the following: The user uploads an Excel file as follows:
<form method="POST" enctype="multipart/form-data">
<input type="file" name="file" id="file" />
Then they select certain parameters using dropdown lists. When the user clicks "Submit", the data is manipulated using pandas and a new file is exported in Excel.
I managed to add a spinner to the "submit" button using html and CSS. I added an event listener to my JavaScript so the spinner is activated when the button is clicked. At the moment, the spinner runs indefinitely, however I would like the spinner to stop and the button text to revert to "submit" once the operation is finished, i.e. the export is complete. Does anybody know how I can accomplish this?
Here is my html:
<button type="submit" id="submit" class="button">
<span class="button__text">Submit</span>
</button>
Here is my CSS:
<style>
.button {
position: relative;
padding: 8px 16px;
background: #009579;
border: none;
outline: none;
border-radius: 2px;
cursor: pointer;
}
.button:active {
background: #007a63;
}
.button__text {
font: bold 20px "Quicksand", san-serif;
color: #ffffff;
transition: all 0.2s;
}
.button--loading .button__text {
visibility: hidden;
opacity: 0;
}
.button--loading::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border: 4px solid transparent;
border-top-color: #ffffff;
border-radius: 50%;
animation: button-loading-spinner 1s ease infinite;
}
/*animate spinner - spin from 0 to 1 turn*/
#keyframes button-loading-spinner {
from {
transform: rotate(0turn);
}
to {
transform: rotate(1turn);
}
</style>
Here is my JavaScript:
<script type="text/javascript">
(() => {
const elem = document.getElementById('submit');
elem.disabled = false;
elem.addEventListener('click', e=> {
elem.classList.add('button--loading');
});
})();
</script>

Basically, your frontend (the HTML/Javascript) needs some way of knowing when "the export is complete". Depending on your definition of "export" and "complete".
At the most rudimentary level, you could have the frontend poll the server every second after the upload starts, and have the server return some kind of status as to what the state of the process is. This could be as simple as:
GET /status/1234
> {"status": "IN_PROGRESS"}
which, when the "export is complete" switches to:
> {"status": "COMPLETE"}
And when the frontend receives the COMPLETE status, it removes the spinner. Notice the 1234. You will need some way of identifying the upload in progress. One way to do this would be to assign it a random id when you first accept the form, so the initial POST /upload returns > {'id': 1234} which the client can then use for the subsequent polling.
If "export is complete" actually only means that the file is finished uploading, you could still use a polling method, but a much slicker way is to use the client (web browser) method of determining how many bytes have been sent (see this SO answer).

How to use Placeholder value as a title of the text box when user clicks on it?

I want to use the placeholder value as the title when user click on the text box.
For example in this image Image One the placeholder value is "Email or phone" when user clicks on it it becomes the title of this text box as shown in second image here Image Two . If you didn't understand correctly then please go to gmail.com (New Look Of Sign In) when you click on the text box the placeholder value goes top and when you click outside, that value becomes the placeholder. I want exactly that functionality but I'm unable to do it.
Help me.

You can check this
HTML Code
<div>
<input type="text" class="inputText" />
<span class="floating-label">Email or phone</span>
</div>
CSS Code
input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label{
top: 8px;
bottom: 10px;
left: 20px;
font-size: 11px;
opacity: 1;
}
.inputText {
font-size: 14px;
width: 200px;
height: 35px;
}
.floating-label {
position: absolute;
pointer-events: none;
left: 20px;
top: 18px;
transition: 0.2s ease all;
}
Check this fiddle https://jsfiddle.net/60Lfj34s/

I tried for a long time to come up with a pure CSS solution to this, but there is a real issue in that the <input> element will not take a ::before pseudo-element, so you cannot use (for example):
input:focus::before {
content: attr(placeholder);
}
So here is a javascript solution instead:
var myInput = document.getElementsByTagName('input')[0];
var myPlaceHolder = myInput.getAttribute('placeholder');
function addInputLabel() {
if (document.getElementsByClassName('my-label').length < 1) {
var myLabel = document.createElement('div');
myLabel.textContent = myPlaceHolder;
myLabel.classList.add('my-label');
document.body.insertBefore(myLabel, myInput);
}
}
myInput.addEventListener('keypress', addInputLabel, false);
.my-label {
height: 16px;
line-height: 16px;
font-size: 11px;
color: rgb(255, 0, 0);
}
<input placeholder="Placeholder Text" />

jQuery to check for multiple strings with HTML textarea

Im working on a 'what you see is what you get' application. You code in one box and the output is displayed in another. I need to check if a user has typed specific text within an HTML textarea, and if it's correct is will make a button visible.
So far, when the user types text-align:center; the button is made visible. I can't work out so the user HAS to type 2 sets of text.
So far i have this:
$(document).ready(function(){$(".textArea").keyup(function() { // directed at the textArea div tag
if ($(this).val().indexOf('text-decoration:underline;' && 'text-align:center;') != -1) { // if the text matches those 2 strings
$(".continue").css("visibility", "visible"); // make button visible
}
else {
$(".continue").css("visibility", "hidden"); // keep it hidden if strings haven't been produced
$(".correct").css("display", "block");
}
});
});
.continue{
background-color: #ef6d3b;
width: 6em;
text-align: center;
font-size: 15px;
border: none;
height: 25px;
color: #000000;
outline: none;
cursor: pointer;
border-radius: 5px;
text-transform: uppercase;
position: relative;
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="codeArea">
<div class="correct">
<textarea class="textArea">
<html>
<body>
</body>
</html>
</textarea>
</div>
</div>
<button class="continue" type="button">Continue</button>

You are using wrong expression for your if statement..
if ($(this).val().indexOf('text-decoration:underline;' &&
'text-align:center;') != -1)
which is evaluated same as
$(this).val().indexOf('text-align:center;') != -1
what you should really do is
$(this).val().indexOf('text-decoration:underline;')!=-1 &&
$(this).val().indexOf('text-align:center;')!=-1

Text input placeholders are broken in latest version of Chrome?

Sorry I can't provide anymore information on the issue other than a screenshot, I've currently got no way to test on Windows with Chrome.
This is what the placeholders look like on Win7 Chrome:
Some relevant styles:
.field input, .field textarea {
width: 100%;
}
input, textarea {
background: #fbfbfb;
padding: 15px;
}
input {
line-height: normal;
}
button, input, optgroup, select, textarea {
color: inherit;
font: inherit;
margin: 0;
border: none;
}
label, input {
display: block;
}
HTML:
<div class="field">
<input id="cf-name" type="text" name="name" value="" placeholder="Name" autocomplete="off">
</div>
The page is here:
http://dev.metertech.co.uk/contact-us
Anyone faced this issue and know what's going on?

You have set the line-height for the inputs to be normal, but if you look at your placeholder pseudo-classes, you set them to be line-height: 2. So your placeholder text is trying to occupy more height than the actual height of your inputs, hence the "chopped off" placeholder text.
To fix it, remove the line-height property from the placeholders.
You probably also don't need line-height:normal - it is the default.

Here is your fix
input {
line-height: 28px;
}