We Keep Coding

Spin Search icon after submit the search form

My code:
<div class="search-sticky">
<form class="search-box" action="/search" method="GET">
<input type="text" name="q" id="search-query" class="search-input" placeholder="Search ....">
<a class="search-btn" href="#/">
<button type="submit" class="search-button"><img class="search-icon" alt="Search" src="/icons/search.svg" /></button>
</a>
</form>
</div>
My search feature works like this: a user clicks the search icon, input bar rolls out, user type keywords then press enter or click again the search icon to start search. Sometimes results page is opened after few seconds, so I need an indicator for user "to wait". I thought that indicator will be search.svg icon spinning after user type keywords and submit the search.
Can you help with the solution, please?

[HTML, css, JavaScript Part For Spin Search icon]
const submitBtn = document.querySelector('#submit-btn');
const submitText = document.querySelector('#submit-text');
const submitSpinner = document.querySelector('#submit-spinner');
submitBtn.addEventListener('click', () => {
submitText.classList.add('hidden');
submitSpinner.classList.remove('hidden');
// Perform search and display results
});
#submit-btn {
background-color: #4CAF50;
color: white;
border: none;
padding: 12px 24px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
#submit-spinner {
margin-left: 10px;
}
.hidden {
display: none;
}
<form>
<input type="text" id="search-bar" placeholder="Enter your search terms...">
<button type="submit" id="submit-btn">
<span id="submit-text">Search</span>
<span id="submit-spinner" class="hidden">
<i class="fa fa-spinner fa-spin"></i>
</span>
</button>
</form>
This code adds a spinner element to the submit button that is hidden by default. When the user clicks the button, the spinner is displayed and the text is hidden. You can then use JavaScript to perform the search and display the results. Once the results are displayed, you can hide the spinner and display the text again.

How to remove an outline from HTML elements 'button' and 'img' when onload or clicked?

On load my page or click the button, for some reason html applies some border to the button.
<div class="like-dislike">
<button class="button-like-dislike" id="likebtn24">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
</button>
<input class="input-like-dislike" id="likeinput24" value="0" name="">
<button class="button-like-dislike" id="dislikebtn24">
<i class="fa fa-thumbs-down" aria-hidden="true"></i>
</button>
<input class="input-like-dislike" id="dislikeinput24" value="0" name="">
</div>

You should be able to prevent that by setting the outline to 'none' inside the CSS.
OUTLINE
button {
outline: none;
}
Remember to still show the user that the button has successfully been clicked though with :hover or :active😀
HOVER
button:hover {
/*CSS*/
}
ACTIVE
button:active {
/*CSS*/
}

See if removing the outline fixes it. Although, you'll likely want some sort of way to indicate the button is selected/ highlighted for accessibility purposes, such as a slight change in color.
button:focus, button:hover{
outline: none;
}

Try this if its work for you,
.button-like-dislike:hover , .button-like-dislike:focus , .button-like-dislike:active {
outline: none;
}

button button className{
outline: none;
}

Div element is only loading correctly after clicks

I am having a bit of trouble when loading dynamic divs on Angular. I have made a button which adds new divs on each click on a specific area. But the problem happens once I have added them, as they are shown incorrectly:
The editor and the calendar (Both are made by PrimeNG) are not shown after I add such div, as it shows on the picture above. But after I click twice on the text box (marked as red in the picture below), the components load up.
Here is the HTML code I am using to show that.
<div class="ui-g-9" style="border: 2px solid #c8c8c8; border-radius: 5px;">
<section class="card" style="display: flex; overflow-x: auto; overflow-y: unset;">
<div *ngFor="let disparaEmail of disparaEmails" class="ui-g-4" style="margin-right: 10px; border: 1px solid #c8c8c8; border-radius: 5px; min-width: 466.828px;">
<p class="titulo-campo font1 fw700">Assunto:</p>
<textarea pInputTextarea [rows]="2" [(ngModel)]="disparaEmail.assuntoEmail" style="width: 100%; resize:unset; font-size: 18px;"></textarea>
<p class="titulo-campo font1 fw700">Tipo de Aviso:</p>
<p-editor [style]="{'height':'300px'}" [(ngModel)]="disparaEmail.msgEmail"></p-editor>
<p class="titulo-campo font1 fw700">Data:</p>
<p-calendar [(ngModel)]="disparaEmail.dataEmail" dateFormat="dd/mm/yy" showButtonBar="true" [locale]="br" [monthNavigator]="true"
[yearNavigator]="true" yearRange="2018:2050"></p-calendar>
</div>
</section>
</div>
<div style="display: inline-grid;">
<i class="fa fa-plus botoes-chamada" (click)="addAviso()" style="color: #819049; padding:30px; margin-bottom: 10px;" pTooltip="Adicionar um tipo de aviso."></i>
<i class="fa fa-minus botoes-chamada" (click)="deletaAviso()" style="color: #905149; padding:10px;" pTooltip="Remover o último tipo de aviso inserido."></i>
</div>
Here is the TS part:
addAviso(){
this.disparaEmails.push(new EmailDispara());
}
deletaAviso(){
if (this.disparaEmails.length > 1){
this.disparaEmails.splice(this.disparaEmails.length - 1, 1);
}
}
Thanks for the help in advance!

This is probably the common problem of not properly detecting changes. Add ChangeDetectorRef injection into your component:
constructor (..., changeDetector: ChangeDetectorRef)
and invoke detectChanges after adding/removing:
addAviso(){
this.disparaEmails.push(new EmailDispara());
this.changeDetector.detectChanges(); // <- this line here
}

How to add an overlay to body when button clicked, and how to clear purplecoat content on pageload

I have two issues/questions...
Question #1:
I am using a label overlay plugin called purplecoat.js (http://ellekasai.github.io/purplecoat.js/) and I need to find a way to add an overlay backdrop to the entire body when the "toggle hints" button is clicked. Right now, when the toggle hints button is clicked, it displays the labeled overlays over the identified content, but I also want a complete background overlay added to the body to help bring focus to the labeled overlays.
My 2nd issue is, my actual website is a multi-page site and I need to use this purplecoat overlay plugin on each page so users can click to see the labeled hints. My problem is when the user clicks on the Toggle Hints button to view the labeled hints on one page, it will work fine, but when they open a new page of the site and click on the same toggle hints button, it shows the labeled hints from the previous page. If I refresh the page, then it shows the correct updated hints.
I need to find a way to clear the purplecoat.js content when a new page loads, so it does not show the wrong label overlays - or somehow discretely refresh the page when someone opens a new page so it clears the purplecoat.js.
I have a jsfiddle of my login page where the purplecoat.js label overlay is working when clicking on the Toggle Hints link. I just need to add the backdrop overlay, then clear the purplecoat.js when a new page/or modal is loaded. My site has several pages and modals, and the pages and modals are all opened with a button - so if there is a way to clear the purplecoat.js cache when any button is clicked, may work. I am open to suggestions.
JSFiddle link: https://jsfiddle.net/txptbf15/
I am new to learning jQuery/js, so please be kind! :-)
HTML (of my login page):
<div id="hints"><button data-purplecoat-toggle="foo" class="btn-loginHint">Toggle Hints!</button></div>
<div id="Login" class="loginTemplate panel panel-primary">
<div class="panel-heading clearfix">
<h2 class="pull-left">Log On</h2>
<div id="LangWrapper" class="pull-right">
<button id="LangButton" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" data-purplecoat="foo" data-purplecoat-label="Select Language" data-purplecoat-color="rgba(238, 122, 39, 0.9)">
<span id="chooseLanguage">Language</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li onclick="_.utils.ChangeLanguage('en')">(English)</li>
<li onclick="_.utils.ChangeLanguage('jp')">(日本語)</li>
</ul>
</div>
</div>
<div class="panel-body">
<p>Please enter your username and password</p>
<form class="">
<fieldset class="">
<legend>Account Info</legend>
<div class="form-group">
<label for="accountType">Account Type</label>
<select class="form-control" id="accountType" name="accountType" data-purplecoat="foo" data-purplecoat-label="Select Account from menu that you want to access." data-purplecoat-color="rgba(238, 122, 39, 0.9)">
<option value="customer">Option 1</option>
<option value="reseller">Option 2</option>
</select>
</div>
<div class="form-group">
<label for="email">EMail</label>
<input type="text" class="form-control" id="email" name="email" placeholder="Email" data-purplecoat="foo" data-purplecoat-label="Input email address you used when registering." data-purplecoat-color="rgba(238, 122, 39, 0.9)">
</div>
<div class="form-group">
<label for="email">Password</label>
<input type="password" class="form-control" id="pwd" name="pwd" placeholder="Password" data-purplecoat="foo" data-purplecoat-label="Input password you used when registering." data-purplecoat-color="rgba(238, 122, 39, 0.9)">
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" class="checkbox" name="RememberMe" value="1" /> Keem me logged in
</label>
</div>
</div>
<p class="actions">
<button type="button" id="btnSubmit" class="btn btn-primary" data-purplecoat="foo" data-purplecoat-label="Select button to Login" data-purplecoat-color="rgba(238, 122, 39, 0.9)"><i class="fa fa-sign-in"></i> Log In</button>
<i class="fa fa-puzzle-piece"></i> Forgot Password
<a id="loginRegister" href="#"
class="pull-right" data-purplecoat="foo" data-purplecoat-label="Select to Register" data-purplecoat-color="rgba(238, 122, 39, 0.9)"><i class="fa fa-key"></i> Register</a>
</p>
</fieldset>
</form>
</div>
</div>
CSS:
.purplecoat { display: none; position: absolute; padding: 5px; box-sizing: border-box; background-color: rgba(142, 68, 173, 0.9); color: #FFF; text-align: center; font-weight: bold; overflow: hidden; z-index: 9999; } .purplecoat-inner { display: table; width: 100%; height: 100%; } .purplecoat-inner-text { display: table-cell; vertical-align: middle;}
.purplecoat {
padding: 0 !important;
font-size: 12px !important;
line-height: 1.2em !important;
}
.btn-loginHint {
background-color: transparent;
color: #fff;
border: none;
float: left;
padding-top: 5px;
}

Regarding Problem 1: the issue seems to be with z-index on all the purplecoat divs; it's set to 9999. As a result what you need is an overlay div with a higher z-index. See my sample below. I've also added a div with the id of overlay. Here is my working fiddle.
#overlay {
display:none;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
width:100%
height:100%;
background-color:white;
z-index:10000;
}
Regarding Problem 2: I'm not sure how you're loading the pages, but this worked in my fiddle.
$('[data-purplecoat-for]').hide();
After looking at the source code it seems all those overlays have the same property data-purplecoat-for, simply calling hide on them will work. Again if this doesn't work for you I need a little more info. By the way, the github project says it's no longer being maintained.

Changing the source of an image with a JavaScript function in HTML

I'm currently working on a project where I'm writing a webpage that gives basic diagrams about human anatomy. What I'm currently testing is the ability to switch dynamically between different images at the press of a button using a Javascript function, so that the user will eventually be able to switch between different views of the human body.
This is the code that I have so far.
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function skin()
{
document.getElementById("image").src="humanoutline.jpg";
}
function muscle()
{
document.getElementById("image").src="humanoutline2.jpg";
}
function organs()
{
document.getElementById("image").src="humanoutline3.jpg";
}
function skeleton()
{
document.getElementById("image").src="humanoutline4.jpg";
}
</script>
</head>
<body>
<style>
.button
{
background-color: green;
border-radius: 4px;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
#image
{
position:absolute;
width:500px;
height:700px;
z-index: 0;
top: 30%;
left: 45%;
padding:50px;
margin: -100px 0 0 -200px;
text-align:center;
align-content:center;
outline-style:solid;
outline-width:1px;
outline-color:black;
}
#rightside
{
text-align:center;
width:400px;
height:1000px;
padding: 30px;
line-height: 100px;
float:right;
outline-style:solid;
outline-width:1px;
outline-color:black;
}
</style>
<div id="rightside">
<p>Select Layer</p>
<form>
<button class="button" onclick="skin()">Skin</button><br>
<button class="button" onclick="muscle()">Muscle</button><br>
<button class="button" onclick="organs()">Organs</button><br>
<button class="button" onclick="skeleton()">Skeleton</button><br>
</form>
</div>
<div>
<img id="image" src="humanoutline.jpg" alt="Body" style="width:464px;height:700px; ">
</div>
</body>
</html>
While this should work in theory, the problem is that whenever each of the buttons is pressed, the page only partially loads the new image and then switches back to the default image, which is humanoutline.jpg.
For reference, here are the four images that I'm currently using.
humanoutline.jpg:
humanoutline2.jpg:
humanoutline3.jpg:
humanoutline4.jpg:

The issue is that the button is "submitting" the form, which causes the page to reload.
The simple solution is to modify your functions as follows:
function skin() {
document.getElementById("image").src="humanoutline.jpg";
// the "return false" will cause the button to NOT submit the form
return false;
}
however your code as written so far is going to get large quickly, and be difficult to maintain, so I'd like to suggest / offer an alternative method of doing this.
You can change your buttons to call the same function, but pass in the parameter that is relevant. Additionally, they should return, see below:
<form>
<button class="button" onclick="return changeImage('humanoutline.jpg')">Skin</button><br>
<button class="button" onclick="return changeImage('humanoutline2.jpg')">Muscle</button><br>
<button class="button" onclick="return changeImage('humanoutline3.jpg')">Organs</button><br>
<button class="button" onclick="return changeImage('humanoutline4.jpg')">Skeleton</button><br>
</form>
And also change your script to accept a parameter, and use that in the image:
function changeImage(img) {
document.getElementById("image").src=img;
return false;
}

You just need to add type="button" to the <button> tags, like this:
<form>
<button type="button" class="button" onclick="skin()">Skin</button><br>
<button type="button" class="button" onclick="muscle()">Muscle</button><br>
<button type="button" class="button" onclick="organs()">Organs</button><br>
<button type="button" class="button" onclick="skeleton()">Skeleton</button><br>
</form>
And here's a codepen with the change that's working (though the image URLs are hotlinked from the uploads in this SO question, so I'm not sure if they'll keep working): http://codepen.io/anon/pen/GZZJVv