Develop Reference

How to make multiple divs appear one after the other using javascript?

I'm trying to animate a chat. Every time the user clicks on the input field or "send" icon, I want the chat bubbles to appear one after the other. This is my part of my code so far. Right now, they all have "display: none." The picture below shows them without it.
<div class="messages">
<div class="message" id="msg1" style="display: none;">Hi! I'm looking for an old friend. She attended Martin Grove a few years ago.</div>
<div class="message" id="msg2" style="display: none;">Her name is Sam.<br>
<i>*insert pic of Sam and MC*</i></div>
<div class="message" id="msg3" style="display: none;">Did you know her or her last name by any chance? </div>
<div id="msg4" class="message-teacher" style="display: none;">Hello there!</div>
<div class="message-teacher" id="msg5" style="display: none;">Unfortunately, I did not have the pleasure of teaching Sam. Her last name and whereabouts are a mystery to me as well. </div>
<div class="message-teacher" id="msg6" style="display: none;">However, I do know she was in the photography club. I always saw her carrying a camera, always taking pictures. </div>
<div class="message-teacher" id="msg7" style="display: none;">In fact, I believe she won a contest for one of them. </div>
<div class="message-teacher" id="msg8" style="display: none;">She’s a super talented girl!</div>
<div class="message-teacher" id="msg9" style="display: none;">Best of luck on your search. I hope you two are reunited soon!</div>
</div>
<div class="input">
<div class="plus-icon" style="font-size: 25px; color: #2A84FF; margin: auto;">
<i class="fas fa-plus-circle"></i>
</div>
<div class="subinput" style="font-size: 25px; color: #2A84FF; margin: auto;">
<input type="text" placeholder="|" />
<i class="fas fa-smile"></i>
</div>
<div class="btn" style="font-size: 23px; color: #2A84FF; margin: auto;"><i class="fas fa-paper-plane"></i></div>
</div>

I would query for the required elements, create an array out of it, and shift() (aka remove the first element of the array - or you can use pop() to remove the last element, depending on your needs). When you pop or shift an element from an array, those functions return the removed element and we can remove the CSS class that hides those elements in the DOM.
const myHTMLCollection = document.getElementsByClassName("invisible");
const HTMLElementsArr = [...myHTMLCollection];
function showMessage() {
if (HTMLElementsArr.length > 0) {
HTMLElementsArr.shift().classList.remove('invisible');
}
}
.invisible {
display: none;
}
<p class="invisible">Some text 1 click</p>
<p class="invisible">Some text 2 clicks</p>
<p class="invisible">Some text 3 clicks</p>
<button onClick="showMessage()">Show a message</button>

How to change an a tag at a certain browser width

I've got this block of code that creates a drop-down sign in box:
<li id="login-link">SIGN IN
However, this is being appended to a hamburger menu when the mobile width media query is called, which isn't ideal. My questions is - is there a way to refactor this that changes this drop-down sign in box to simply an a tag () at the mobile width?
Thanks!

I would duplicate the <li id="login-link">...</li> element and create a class to display/hide them based on a media query. Something like this maybe:
#media only screen and (max-width: 599px) {
.mobile-only {
display: inherit;
}
.desktop-only {
display: none;
}
}
#media only screen and (min-width: 600px) {
.mobile-only {
display: none;
}
.desktop-only {
display: inherit;
}
}
<li id="login-link mobile-only">SIGN IN (MOBILE)
<li id="login-link desktop-only">SIGN IN (DESKTOP)
I would consider using Bootstrap for something like this as well.

Maybe it will help. On the same page, a view opens:
<div class="media-left pr-1">
<span class="avatar avatar-md"><img class="media-object rounded-circle" src="../../../app-assets/images/portrait/small/avatar-s-7.png" alt="Generic placeholder image"></span>
</div>
<div class="media-body w-100">
<h6 class="list-group-item-heading">Wayne Burton</h6>
<p class="list-group-item-text">to me <span>Today</span>
<span class="float-right">
<i class="la la-reply mr-1"></i>
<i class="la la-arrow-right mr-1"></i>
<i class="la la-ellipsis-v"></i>
</span>
</p>
</div>
</a>
</div>
<div id="collapse21" role="tabpanel" aria-labelledby="headingCollapse2" class="card-collapse collapse" aria-expanded="false" style="">
<div class="card-content">
<div class="email-app-text card-body">
<div class="email-app-message">
<p>Hi John,</p>
<p>Thanks for your feedback ! Here's a new layout for a new Modern Admin theme.</p>
<p>We will start the new application development soon once this will be completed, I will provide you more
details after this Saturday. Hope that will be fine for you.</p>
<p>Hope your like it, or feel free to comment, feedback or rebound !</p>
<p>Cheers~</p>
</div>
</div>
</div>
</div>

Change the size of header input item on clarity design

I'm using an header bar from the clarity.design examples, I tinkered with it trying to make the search input occupy 100% of the center of the header bar, but I'm unable to do it.
The code:
<clr-header class="header-6">
<div class="branding">
<a [routerLink]="['/']" routerLinkActive="router-link-active" class="nav-link">
<span class="title">Project Clarity</span>
</a>
</div>
<form class="search" (ngSubmit)="onSearchSubmit(f)" #f="ngForm">
<label for="search_input"></label>
<input id="search_input" name="search_input" type="text" placeholder=" Search for keywords or paste link..." ngModel required>
</form>
<div class="header-actions">
<div class="header-nav" [clr-nav-level]="1">
<a class="nav-link nav-text">
My menu
</a>
</div>
<clr-dropdown>
<button class="nav-icon" clrDropdownTrigger>
<clr-icon shape="user"></clr-icon>
<clr-icon shape="caret down"></clr-icon>
</button>
<clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
<a clrDropdownItem>Preferences</a>
<a clrDropdownItem>Log out</a>
</clr-dropdown-menu>
</clr-dropdown>
</div>
</clr-header>
This is how it looks like, I want the header to use all the remaining width.
Thanks.

The header is using flex box for layout.
Here is a POC stackblitz that uses the below css to override the default search styles.
CSS
.search {
border: 1px solid deeppink;
flex: 1 1 auto;
max-width: none;
}
.search > label {
flex: 1 1 auto;
max-width: 90%;
}
.search > label > input {
width: 100%;
}
It should give you a starting point to tweak for your apps visual style. You may also need to address the responsive use case.

The solution of your problem is CSS.
I gave you an example below that shows you where you can start from.
Let me know if this helps you out.
/* First, make your elements float to the left or right */
.header-6 div
, .header-6 form {
float: left;
}
div.header-actions{
float: right;
}
/* Then give them some space */
div.branding
, form.search
, div.header-actions {
padding-left: 20px;
padding-right: 20px;;
}
/* The rest is using FontAwesome and CSS to add the icons and the other stuff */
<clr-header class="header-6">
<div class="branding">
<a [routerLink]="['/']" routerLinkActive="router-link-active" class="nav-link">
<span class="title">Project Clarity</span>
</a>
</div>
<form class="search" (ngSubmit)="onSearchSubmit(f)" #f="ngForm">
<label for="search_input"></label>
<input id="search_input" name="search_input" type="text" placeholder=" Search for keywords or paste link..." ngModel required>
</form>
<div class="header-actions">
<div class="header-nav" [clr-nav-level]="1">
<a class="nav-link nav-text">
My menu
</a>
</div>
<clr-dropdown>
<button class="nav-icon" clrDropdownTrigger>
<clr-icon shape="user"></clr-icon>
<clr-icon shape="caret down"></clr-icon>
</button>
<clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
<a clrDropdownItem>Preferences</a>
<a clrDropdownItem>Log out</a>
</clr-dropdown-menu>
</clr-dropdown>
</div>
</clr-header>

How to lower opacity on everything else on screen except the selected ng-repeat item?

I've looked everywhere on StackOverflow and there doesn't seem to be anyone else solving this issue or I'm just using the wrong wording or keywords which results in me not finding what I want. If that's the case and this is a duplicate, I would be glad if you could link me to a case like this. Thanks.
I have an HTML/CSS, AngularJS, PHP and MySQL project.
POST and GET requests work perfectly.
What I'm trying to do is similar to what is already done on Google Keep.
When the user clicks on the blue pencil, I want the opacity on the selected item to be 100% but all the parents divs and sibling divs at opacity value 0.3 or something.
I would like to try and avoid jQuery if possible.
I believe I read somewhere that it is bad practice to use a whole bunch of frameworks together and that when you use a framework, that you should stick with it.
I have no idea how to approach this problem.
I don't even know where to start.
Could you please also provide me with a working example JSFiddle or Plnkr please?
Any help or suggestion would be greatly appreciated!
Thanks in advance!
What I want
What I have
HTML
<body ng-app="myApp">
<font face="Source Sans Pro">
<div class="left">
<center>
<div ng-controller="insertController">
<h2> What I learned today </h2>
<form>
Date <br>
<input type="text" ng-model="date"><br><br>
Content <br>
<textarea rows="10" cols="50" ng-model="content"></textarea><br><br>
<input type="button" value="Submit" ng-click="insertdata()">
</form>
</div>
</center>
</div>
<div class="right">
<center>
<div ng-controller="fetchController"><br>
<span ng-repeat="item in results">
<div class="card">
<div class="theText">
<span class="bold-underline">{{item.date}}</span><br>
{{item.content}}
</div>
<div ng-controller="deleteController">
<input type="button" class="deleteButton" ng-click="deleteThisItem(item)" value="x">
</div>
<div ng-controller="editController">
<input type="button" class="editButton" ng-click="editThisItem(item)" value="✎">
</div>
</div>
<br><br>
</span>
</div>
</center>
</div>
</font>
</body>
EDIT
I just got it working.
New HTML
<div class="right">
<center>
<div ng-controller="fetchController"><br>
<span ng-repeat="item in results">
<div ng-controller="fadeController">
<div class="card" ng-class="cardFade">
<div class="theText">
<span class="bold-underline">{{item.date}}</span><br>
{{item.content}}
</div><!-- theText -->
<div ng-controller="deleteController">
<input type="button" class="deleteButton" ng-click="deleteThisItem(item)" value="x">
</div><!-- deleteController -->
<div ng-controller="editController">
<input type="button" class="editButton" ng-click="editThisItem(item)" value="✎">
</div><!-- editController -->
</div><!-- card -->
</div><!-- fadeController -->
<br>
</span><!-- ng-repeat -->
<div class="overlay"></div>
</div><!-- fetchController -->
</center>
</div><!-- right -->
New CSS
.someCSS {
background-color: white;
z-index: 200;
opacity: 1;
}
.noCSS {
}
.overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0.6;
z-index: 100;
pointer-events: none; /* required to be able to click buttons under overlay */
}
fadeController.js
app.controller("fadeController", function($scope, $http, resultsService) {
$scope.cardFade = "noCSS";
$scope.editThisItem = function(item) {
if($scope.cardFade === "noCSS") {
$scope.cardFade = "someCSS";
}
else if($scope.cardFade === "someCSS") {
$scope.cardFade = "noCSS";
}
else {
alert("FATAL ERROR!");
}
};
});

you can add a div as overlay
<div class="overlay"></div>
.overlay {
backgound-color: gray;
opacity: 0.5;
z-index: 100; //<= so the overlay with cover the page
}
next you will need to add a css class like this
.someCss {
z-index: 101; // <=so it would be on top on the overlay
}
and it will be added to the ng-repeat element when you click on the blue pencil.
I would even go and make the class as ng-class ng-class
so it would be something like this:
<span ng-repeat="item in results">
<div class="card" ng-class="{someCss : item.selected}">
<div class="theText">
<span class="bold-underline">{{item.date}}</span><br>
{{item.content}}
</div>
<div ng-controller="deleteController">
<input type="button" class="deleteButton" ng-click="deleteThisItem(item)" value="x">
</div>
<div ng-controller="editController">
<input type="button" class="editButton" ng-click="editThisItem(item)" value="✎">
</div>
</div>
<br><br>
</span>
and now on the blue pencil click you can add the property selected or change it

Dynamically set margin to vertical centered content

I've got rather a confusing situation in my layout. As I have attached below, the design shows text which a double lined and single lined. I set a margin to single lined texts so that it gets aligned. When there is a double lined text, I have to manually set the margin. Is it possible to set this without wrting a javascript function? could it be cone using pure CSS without having specific margins for each text type.
My div structure is as following.
<div class="operation text-center">
<i class="icon fw fw-ringing fw-3x"></i>
<span>Ring</span>
</div>

Yes, rather simple too using line-height and height:
.operation .itemText{
line-height: 15px;
height: 30px; /* at least twice the line-height */
}
<div class="operation text-center">
<i class="icon fw fw-ringing fw-3x"></i>
<span class="itemText">Ring</span>
</div>
The trick is defining a space for the text to the height of two lines. The small worded items still take up two lines, but fill only one with text.
Alternatively, you could give the whole .operation a min-height, but I prefer not to, as mobile responsiveness gets trickier the more you define heights.

With CSS Flexbox you don't need any specific height, it will align anyway, using margin: auto 0, and it does not matter how many lines you have.
.wrapper {
display: flex;
}
.operation {
display: flex;
flex-direction: column;
}
.operation .itemText {
margin: auto 0;
}
/* styles added for this demo */
.wrapper { margin-bottom: 20px; }
.operation { padding: 10px; }
<div class="wrapper">
<div class="operation text-center">
<i class="icon fw fw-ringing fw-3x">icon</i>
<span class="itemText">Ring</span>
</div>
<div class="operation text-center">
<i class="icon fw fw-ringing fw-3x">icon</i>
<span class="itemText">Ring<br>2 lines</span>
</div>
</div>
<div class="wrapper">
<div class="operation text-center">
<i class="icon fw fw-ringing fw-3x">icon</i>
<span class="itemText">Ring<br>3<br>lines</span>
</div>
<div class="operation text-center">
<i class="icon fw fw-ringing fw-3x">icon</i>
<span class="itemText">Ring</span>
</div>
</div>