Why is a jQuery subtraction outputting NaN?

Why is a jQuery subtraction outputting NaN? - javascript

I'm having an issue with this piece of jquery code white trying to conduct a subtraction. What is it that I am missing/over-looking? When I add an item to the list then want to remove it, the Estimated Total on the top right does not reflect the deletion of the item. It then spits out an NaN error.
In the js section look for the code inside the comment with the *****.
I tried the variables 'currTotal' and 'deleted' with and without parseFloat and also with parseInt... still get the NaN error.
Thanks,
Sergio
P.S. Here is a jsfiddle demonstrating the code below
$(document).ready(function(){
$('.alert').hide();
// Check to see if input field is empty THEN if not empty add items, qty and price to list
$('#add').on('click', function() {
if ( !$('#list').val() ) {
$('.alert').show();
}
else {
// Adds typed items, qty and price to the list
// Adds Item and QTY to List
var item = $('#list').val();
var qty = $('#qty').val();
$('#list-a').append('<li><div class="done"></div><div class="delete"></div><input type="text" disabled="disabled" name="listItem[]" class="listItemInput" value="' + qty + " - " + item + '"</li>');
// Multiply QTY and Price. Ie: 2-bananas * $3 = $6.00
// Adds Product to List
var price = $('#price').val();
var itemTotal = qty * price;
$('#list-b').append('<li><span>$</span><input type="text" disabled="disabled" name="listPrice[]" class="listPriceInput" value="' + itemTotal + '"</li>');
// Resets input field to empty and focus
$('#list').val('').focus();
$('#qty, #price').val('');
$('.alert').hide();
}
});
// Fires Add to List button when enter is clicked
$('#list, #qty, #price').keyup(function(event){
if(event.keyCode === 13){
$('#add').click();
}
});
// Calculates and automatically updates Estimated Total
$('#add').click( function() {
var sumAdd = 0;
$('input.listPriceInput').each(function() {
sumAdd = sumAdd + parseFloat($(this).val());
});
$('#total-items').val('$' + sumAdd);
});
// Marks as done by adding class strike by clicking the check mark
$('#list-a').on('click', '.done', function () {
var listItem = $(this).closest('li'),
index = listItem.index();
listItem.parent().next('ul').find('li:eq(' + index + ')').add(listItem)
.toggleClass('strike');
});
//******//
// Deletes/fades out 'li' when X is clicked + Updates Estimated Total
//******//
$('#list-a').on('click', '.delete', function () {
var listItem = $(this).closest('li'),
index = listItem.index(),
currTotal = parseFloat($('#total-items').val()),
deleted = parseFloat(listItem.parent().next('ul').find('li:eq(' + index + ')').val()),
newTotal = currTotal - deleted;
$('#total-items').val('$' + newTotal);
listItem.parent().next('ul').find('li:eq(' + index + ')').add(listItem).slideUp(300, function () {
$(this).remove();
});
});
//******//
//******//
// Clear all items on the list and focus back on new shopping item
$('#clear').on('click', function() {
var li = $('li');
li.slideUp(500, function() {
$(li).remove('li');
});
$('#total-items').val('');
$('#list').val('').focus();
$('.alert').hide();
});
});
#charset "UTF-8";
#content .est-total {
*zoom: 1;
}
#content .est-total:before, #content .est-total:after {
content: " ";
display: table;
}
#content .est-total:after {
clear: both;
}
* {
padding: 0;
margin: 0;
font-family: "Open Sans";
box-sizing: border-box;
}
html, body {
display: table;
height: 100%;
width: 100%;
}
a {
text-decoration: none;
color: white;
}
#header {
text-align: center;
width: 100%;
height: 330px;
padding: 0;
background: #222;
border-bottom: 10px solid #1480ff;
margin: -15px auto 0;
}
#header .logo {
margin-top: 15px;
}
#header .logo h1 {
font-size: 70px;
font-family: "Pacifico", cursive;
letter-spacing: 1px;
font-weight: 400;
color: #20e010;
display: inline-block;
}
#header .logo i {
font-size: 50px;
color: #20e010;
padding: 15px;
border: 5px solid #fff;
border-radius: 45px;
}
#content {
width: 100%;
max-width: 650px;
background-color: #fff;
margin: -120px auto 50px;
border: 10px solid #e2e2e2;
padding: 20px;
border-radius: 20px;
position: relative;
}
#content .ribbon {
width: 75px;
height: 75px;
font-size: 22px;
font-weight: 700;
color: #fff;
line-height: 25px;
text-transform: uppercase;
text-align: center;
background: #db0b0b;
padding: 10px 0 0 5px;
margin: -35px 0 0;
display: inline-block;
float: left;
border-radius: 10px;
}
#content .est-total {
text-align: right;
padding: 0;
margin-top: 0;
}
#content .est-total h2 {
font-size: 15px;
line-height: 30px;
font-style: italic;
font-weight: 400;
}
#content h1 {
margin: -10px 0 20px;
}
#content h5 {
font-size: 22px;
letter-spacing: -0.5px;
text-transform: uppercase;
color: #1480ff;
padding: 5px 3px 0;
}
#content #list-a {
width: 78%;
list-style: none;
margin: 0 10px 30px 0;
padding: 10px;
float: left;
}
#content #list-a li {
height: 43px;
padding: 10px 10px;
border-bottom: 1px solid #e2e2e2;
text-transform: capitalize;
}
#content #list-b {
width: 19%;
list-style: none;
margin: 0 0 30px 0;
padding: 10px;
float: left;
}
#content #list-b li {
padding: 10px 10px;
border-bottom: 1px solid #e2e2e2;
text-transform: capitalize;
}
#content input {
font-size: 15px;
width: 68%;
margin: 5px 0;
padding: 10px;
border-radius: 5px;
border: 1px solid rgba(0, 0, 0, 0.3);
}
#content input:focus {
outline: none;
}
#content input#qty {
width: 10%;
}
#content input#price {
width: 20%;
}
#content input#total-items {
font-size: 18px;
color: red;
font-weight: 700;
width: 17%;
display: inline-block;
float: right;
padding: 7px 9px;
margin: -6px 0 0 10px;
}
#content button {
width: 16%;
font-size: 13px;
border: none;
padding: 10px 8px;
margin: 10px 5px 0 0;
border-radius: 5px;
box-shadow: none;
cursor: pointer;
display: inline-block;
}
#content #add {
color: #444;
background: #20e010;
}
#content #add:focus {
outline: none;
}
#content #print {
color: #fff;
text-transform: uppercase;
background: #1480ff;
}
#content #print:focus {
outline: none;
}
#content #clear {
color: #fff;
text-transform: uppercase;
background: red;
float: right;
}
#content #clear:focus {
outline: none;
}
.delete:before {
font-family: "FontAwesome";
content: "";
font-size: 15px;
display: inline-block;
font-weight: 700;
color: #fff;
text-align: center;
background-color: red;
margin: -2px 15px 0 0;
border-radius: 5px;
padding: 3px 4px 5px 5px;
cursor: pointer;
float: left;
}
.done:before {
font-family: "FontAwesome";
content: "";
font-size: 15px;
display: inline-block;
font-weight: 700;
color: #fff;
text-align: center;
background-color: #20e010;
margin: -2px 5px 0 0;
border-radius: 5px;
padding: 3px 3px 5px 4px;
cursor: pointer;
float: left;
}
.strike {
text-decoration: line-through;
color: #1ccb0d;
background-color: #e8f9e6;
}
.strike input {
text-decoration: line-through;
color: #1ccb0d;
}
.alert {
font-size: 13px;
color: #aaa;
position: absolute;
bottom: 115px;
padding: 5px 8px;
}
.alert strong {
color: red;
}
.alert:before {
font-family: "FontAwesome";
content: "";
color: red;
font-size: 12px;
}
.footer {
width: 100%;
height: 100px;
background: #e2e2e2;
border-top: 10px solid #1480ff;
display: table-row;
}
.footer .disc {
height: 100px;
font-size: 14px;
padding: 35px 0;
text-align: center;
border-top: 10px solid #1480ff;
position: relative;
}
.footer a {
color: red;
font-weight: 700;
}
.footer a:hover {
color: #e30000;
text-decoration: underline;
}
.footer a:hover:before {
height: 42px;
padding: 5px 10px;
opacity: 1;
}
.footer a:before {
content: attr(data-sim);
width: 105px;
height: 0;
color: #fff;
font-weight: 300;
font-size: 13px;
background-color: #444;
padding: 0 10px;
border-radius: 5px;
position: absolute;
overflow: hidden;
bottom: 55px;
margin-left: -33px;
opacity: 0;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
}
input.listItemInput, input.listPriceInput {
border: 0 transparent none !important;
background-color: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
<!DOCTYPE html>
<html>
<head>
<title>My List brought to by: mylist.shop</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="fonts/css/font-awesome.min.css">
</head>
<body>
<div id="header">
<div class="logo">
<h1>SomeList</h1>
</div>
</div>
<div id="content">
<div class="ribbon">New List</div>
<div class="est-total">
<h2>Estimated Total:
<input id="total-items" type="text" name="total price" placeholder="$0" readonly>
</h2>
</div>
<ul id="list-a"></ul>
<ul id="list-b"></ul>
<div class="alert"> <strong>ALERT - </strong> Please enter a new List Item Below.</div>
<input id="list" type="text" name="list" placeholder="New List Item" autofocus required>
<input id="qty" type="number" name="quantity" placeholder="Qty.">
<input id="price" type="number" name="price" placeholder="Est. Price">
<button id="add" type="button" value="Print List">ADD</button>
<button id="print" type="button" onClick="window.print()" value="Print List">Print</button>
<button id="clear">Clear</button>
</div>
<div class="footer">
<div class="disc">© Copyright 2016 SomeList.</div>
</div>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/min/main-min.js"></script>
</body>
</html>

This is happening because your Estimated Total has a dollar sign before the value. When you call parseFloat() on that, you get NaN.
Rather than subtracting from the total when something is removed, why not just recalculate the total? You already have the functionality for that:
$(document).ready(function() {
$('.alert').hide();
// Check to see if input field is empty THEN if not empty add items, qty and price to list
$('#add').on('click', function() {
if (!$('#list').val()) {
$('.alert').show();
} else {
// Adds typed items, qty and price to the list
// Adds Item and QTY to List
var item = $('#list').val();
var qty = $('#qty').val();
$('#list-a').append('<li><div class="done"></div><div class="delete"></div><input type="text" disabled="disabled" name="listItem[]" class="listItemInput" value="' + qty + " - " + item + '"</li>');
// Multiply QTY and Price. Ie: 2-bananas * $3 = $6.00
// Adds Product to List
var price = $('#price').val();
var itemTotal = qty * price;
$('#list-b').append('<li><span>$</span><input type="text" disabled="disabled" name="listPrice[]" class="listPriceInput" value="' + itemTotal + '"</li>');
// Resets input field to empty and focus
$('#list').val('').focus();
$('#qty, #price').val('');
$('.alert').hide();
calcTotal();
}
});
// Fires Add to List button when enter is clicked
$('#list, #qty, #price').keyup(function(event) {
if (event.keyCode === 13) {
$('#add').click();
}
});
// Calculates and automatically updates Estimated Total
function calcTotal() {
var sumAdd = 0;
$('input.listPriceInput').each(function() {
sumAdd = sumAdd + parseFloat($(this).val());
});
$('#total-items').val('$' + sumAdd);
}
// Marks as done by adding class strike by clicking the check mark
$('#list-a').on('click', '.done', function() {
var listItem = $(this).closest('li'),
index = listItem.index();
listItem.parent().next('ul').find('li:eq(' + index + ')').add(listItem)
.toggleClass('strike');
});
//******//
// Deletes/fades out 'li' when X is clicked + Updates Estimated Total
//******//
$('#list-a').on('click', '.delete', function() {
var listItem = $(this).closest('li'),
index = listItem.index();
listItem.parent().next('ul').find('li:eq(' + index + ')').add(listItem).slideUp(300, function() {
$(this).remove();
calcTotal();
});
});
//******//
//******//
// Clear all items on the list and focus back on new shopping item
$('#clear').on('click', function() {
var li = $('li');
li.slideUp(500, function() {
$(li).remove('li');
});
$('#total-items').val('');
$('#list').val('').focus();
$('.alert').hide();
});
});
#charset "UTF-8";
#content .est-total {
*zoom: 1;
}
#content .est-total:before, #content .est-total:after {
content: " ";
display: table;
}
#content .est-total:after {
clear: both;
}
* {
padding: 0;
margin: 0;
font-family: "Open Sans";
box-sizing: border-box;
}
html, body {
display: table;
height: 100%;
width: 100%;
}
a {
text-decoration: none;
color: white;
}
#header {
text-align: center;
width: 100%;
height: 330px;
padding: 0;
background: #222;
border-bottom: 10px solid #1480ff;
margin: -15px auto 0;
}
#header .logo {
margin-top: 15px;
}
#header .logo h1 {
font-size: 70px;
font-family: "Pacifico", cursive;
letter-spacing: 1px;
font-weight: 400;
color: #20e010;
display: inline-block;
}
#header .logo i {
font-size: 50px;
color: #20e010;
padding: 15px;
border: 5px solid #fff;
border-radius: 45px;
}
#content {
width: 100%;
max-width: 650px;
background-color: #fff;
margin: -120px auto 50px;
border: 10px solid #e2e2e2;
padding: 20px;
border-radius: 20px;
position: relative;
}
#content .ribbon {
width: 75px;
height: 75px;
font-size: 22px;
font-weight: 700;
color: #fff;
line-height: 25px;
text-transform: uppercase;
text-align: center;
background: #db0b0b;
padding: 10px 0 0 5px;
margin: -35px 0 0;
display: inline-block;
float: left;
border-radius: 10px;
}
#content .est-total {
text-align: right;
padding: 0;
margin-top: 0;
}
#content .est-total h2 {
font-size: 15px;
line-height: 30px;
font-style: italic;
font-weight: 400;
}
#content h1 {
margin: -10px 0 20px;
}
#content h5 {
font-size: 22px;
letter-spacing: -0.5px;
text-transform: uppercase;
color: #1480ff;
padding: 5px 3px 0;
}
#content #list-a {
width: 78%;
list-style: none;
margin: 0 10px 30px 0;
padding: 10px;
float: left;
}
#content #list-a li {
height: 43px;
padding: 10px 10px;
border-bottom: 1px solid #e2e2e2;
text-transform: capitalize;
}
#content #list-b {
width: 19%;
list-style: none;
margin: 0 0 30px 0;
padding: 10px;
float: left;
}
#content #list-b li {
padding: 10px 10px;
border-bottom: 1px solid #e2e2e2;
text-transform: capitalize;
}
#content input {
font-size: 15px;
width: 68%;
margin: 5px 0;
padding: 10px;
border-radius: 5px;
border: 1px solid rgba(0, 0, 0, 0.3);
}
#content input:focus {
outline: none;
}
#content input#qty {
width: 10%;
}
#content input#price {
width: 20%;
}
#content input#total-items {
font-size: 18px;
color: red;
font-weight: 700;
width: 17%;
display: inline-block;
float: right;
padding: 7px 9px;
margin: -6px 0 0 10px;
}
#content button {
width: 16%;
font-size: 13px;
border: none;
padding: 10px 8px;
margin: 10px 5px 0 0;
border-radius: 5px;
box-shadow: none;
cursor: pointer;
display: inline-block;
}
#content #add {
color: #444;
background: #20e010;
}
#content #add:focus {
outline: none;
}
#content #print {
color: #fff;
text-transform: uppercase;
background: #1480ff;
}
#content #print:focus {
outline: none;
}
#content #clear {
color: #fff;
text-transform: uppercase;
background: red;
float: right;
}
#content #clear:focus {
outline: none;
}
.delete:before {
font-family: "FontAwesome";
content: "";
font-size: 15px;
display: inline-block;
font-weight: 700;
color: #fff;
text-align: center;
background-color: red;
margin: -2px 15px 0 0;
border-radius: 5px;
padding: 3px 4px 5px 5px;
cursor: pointer;
float: left;
}
.done:before {
font-family: "FontAwesome";
content: "";
font-size: 15px;
display: inline-block;
font-weight: 700;
color: #fff;
text-align: center;
background-color: #20e010;
margin: -2px 5px 0 0;
border-radius: 5px;
padding: 3px 3px 5px 4px;
cursor: pointer;
float: left;
}
.strike {
text-decoration: line-through;
color: #1ccb0d;
background-color: #e8f9e6;
}
.strike input {
text-decoration: line-through;
color: #1ccb0d;
}
.alert {
font-size: 13px;
color: #aaa;
position: absolute;
bottom: 115px;
padding: 5px 8px;
}
.alert strong {
color: red;
}
.alert:before {
font-family: "FontAwesome";
content: "";
color: red;
font-size: 12px;
}
.footer {
width: 100%;
height: 100px;
background: #e2e2e2;
border-top: 10px solid #1480ff;
display: table-row;
}
.footer .disc {
height: 100px;
font-size: 14px;
padding: 35px 0;
text-align: center;
border-top: 10px solid #1480ff;
position: relative;
}
.footer a {
color: red;
font-weight: 700;
}
.footer a:hover {
color: #e30000;
text-decoration: underline;
}
.footer a:hover:before {
height: 42px;
padding: 5px 10px;
opacity: 1;
}
.footer a:before {
content: attr(data-sim);
width: 105px;
height: 0;
color: #fff;
font-weight: 300;
font-size: 13px;
background-color: #444;
padding: 0 10px;
border-radius: 5px;
position: absolute;
overflow: hidden;
bottom: 55px;
margin-left: -33px;
opacity: 0;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
}
input.listItemInput, input.listPriceInput {
border: 0 transparent none !important;
background-color: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
<!DOCTYPE html>
<html>
<head>
<title>My List brought to by: mylist.shop</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="fonts/css/font-awesome.min.css">
</head>
<body>
<div id="header">
<div class="logo">
<h1>SomeList</h1>
</div>
</div>
<div id="content">
<div class="ribbon">New List</div>
<div class="est-total">
<h2>Estimated Total:
<input id="total-items" type="text" name="total price" placeholder="$0" readonly>
</h2>
</div>
<ul id="list-a"></ul>
<ul id="list-b"></ul>
<div class="alert"> <strong>ALERT - </strong> Please enter a new List Item Below.</div>
<input id="list" type="text" name="list" placeholder="New List Item" autofocus required>
<input id="qty" type="number" name="quantity" placeholder="Qty.">
<input id="price" type="number" name="price" placeholder="Est. Price">
<button id="add" type="button" value="Print List">ADD</button>
<button id="print" type="button" onClick="window.print()" value="Print List">Print</button>
<button id="clear">Clear</button>
</div>
<div class="footer">
<div class="disc">© Copyright 2016 SomeList.</div>
</div>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/min/main-min.js"></script>
</body>
</html>

i want to add that.
Note: Only the first number in the string is returned!
Note: Leading and trailing spaces are allowed.
Note: If the first character cannot be converted to a number, parseFloat() returns NaN.
you can use such like this.
$('#total-items').val().replace('$','')

Related

I'm trying to do a Todo List App and when i pressed the add task its not adding below

I created a createElement for the todo List and the appendchild but it's not adding to my website this is the code below
window.addEventListener('DOMContentLoaded', () => {
const form = document.querySelector("#add-todo-form");
const input = document.querySelector("#new-todo-input");
const listTask = document.querySelector('#todo-list');
form.addEventListener('submit', (e) => {
e.preventDefault();
const task = input.value;
const todoList = document.createElement('div');
todoList.classList.add('todo-item');
const label = document.createElement('label');
const input = document.createElement('input');
const span = document.createElement('span');
label.appendChild(input);
label.appendChild(span);
const todoContent = document.createElement('div');
todoContent.classList.add('todo-content');
todoList.appendChild(todoContent);
const todoInput = document.createElement('input');
todoInput.classList.add('text');
todoInput.type = 'text'
todoInput.value = task;
todoInput.setAttribute('readonly', 'readonly');
todoContent.appendChild(todoInput);
const todoAction = document.createElement('div');
todoAction.classList.add('action');
const todoEdit = document.createElement('i');
todoEdit.classList.add('bi-pencil-square');
const todoDelete = document.createElement('i');
todoDelete.classList.add('bi-trash3-fill');
todoAction.appendChild(todoEdit);
todoAction.appendChild(todoDelete);
todoList.appendChild(todoAction);
listTask.appendChild(todoList);
input.value = '';
todoEdit.addEventListener('click', (e) => {
if (todoEdit.innerText.toLowerCase() == 'bi-pencil-square') {
todoInput.removeAttribute("readonly");
todoInput.focus();
} else {
todoEdit.innerText = "bi-pencil-square";
todoInput.setAttribute("readonly", "readonly");
}
});
todoDelete.addEventListener('click', (e) => {
listTask.removeChild(todoList)
});
});
});
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#100;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: 0;
transition: all 0.5s ease;
}
:root {
--Button: #432C7A;
--Background: #FCE2DB;
--font-color: #000;
--alternative-font-color: #fff;
--opacty: #998484;
--error: #F83434;
--check: #888;
--margin: 0 1.8125rem;
}
body {
font-family: 'Poppins', sans-serif;
}
input[type=checkbox] {
display: none;
}
.bubble {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 999px;
border: 2px solid var(--Button);
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.bubble::after {
content: '';
display: block;
opacity: 0;
width: 0px;
height: 0px;
background-color: var(--Button);
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
border-radius: 999px;
transition: 0.2s ease-in-out;
}
input:checked~.bubble::after {
width: 10px;
height: 10px;
opacity: 1;
}
#name-greet:not([type="radio"]):not([type="checkbox"]),
button {
appearance: none;
border: none;
outline: none;
background: none;
cursor: initial;
}
.container,
.app {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, #4EB4FF 0%, rgba(24, 38, 48, 0) 100%);
}
.name {
width: 265px;
height: 262px;
background-color: var(--Background);
border-radius: 40px;
}
.box {
width: 100%;
height: 100%;
max-width: 278px;
max-height: 455px;
background-color: var(--Background);
border-radius: 40px;
}
.name h1 {
font-size: 22px;
font-weight: 700;
color: var(--font-color);
text-align: center;
margin-top: 72px;
}
#name {
margin-top: 26px;
width: 223px;
height: 31px;
border-radius: 10px;
margin-left: 20px;
background: transparent;
}
input[type=text] {
padding-left: 7px;
}
::placeholder {
font-size: 12px;
color: var(--opacty);
opacity: 80%;
}
input:focus::placeholder {
color: transparent;
}
.name h2 {
text-align: center;
font-size: 12px;
}
.greeting .title {
display: flex;
}
.greeting .title input {
margin-left: 0.5rem;
flex: 1 1 0%;
min-width: 0;
margin-right: 1rem;
}
.greeting .title,
.greeting .title input {
color: var(--font-color);
font-size: 1.5rem;
font-weight: bold;
}
#name-greet::placeholder {
font-size: 20px;
color: var(--opacty);
opacity: 80%;
}
.greeting h1 {
margin-left: 29px;
margin-top: 20px;
}
.create-list h3 {
margin-left: 1.8125rem;
margin-bottom: 1.6rem;
font-weight: 100;
font-size: 15px;
line-height: 18px;
text-align: left;
text-transform: uppercase;
}
.create-list h4 {
margin: var(--margin);
font-size: 12px;
color: var(--opacty);
}
.create-list input[type=text] {
display: flex;
align-items: center;
width: 100%;
max-width: 218px;
font-size: 1.125rem;
padding: 0.8rem;
color: var(--font-color);
background-color: transparent;
margin-bottom: 1.1rem;
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
;
border: 1px solid #847171;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
border-radius: 10px;
font-weight: 600;
font-size: 12px;
line-height: 18px;
margin: 0 1.8125rem 1rem;
}
.create-list input[type=submit] {
margin: 0 1.8125rem 1rem;
width: 100%;
max-width: 218px;
font-size: 1.125rem;
padding: 0.5rem 1rem;
color: var(--alternative-font-color);
background-color: var(--Button);
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
;
border: none;
border-radius: 10px;
transition: 0.2s ease-out;
}
.create-list input[type=submit]:hover {
background-color: transparent;
border: 1px solid var(--Button);
color: var(--font-color);
cursor: pointer;
}
.todo-list h3 {
margin-left: 1.8125rem;
margin-bottom: 1rem;
font-weight: 100;
font-size: 15px;
line-height: 18px;
text-transform: uppercase;
}
.todo-list .list {
margin: 1rem 0;
}
.todo-list .todo-item {
display: flex;
align-items: center;
background-color: var(--alternative-font-color);
padding: 0.8rem;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
margin: var(--margin);
max-width: 234px;
}
.todo-item label {
display: block;
margin-right: 1rem;
cursor: pointer;
}
.todo-item .todo-content {
flex: 1 1 0%;
}
.todo-item .todo-content input {
color: var(--font-color);
font-size: 12px;
margin: 0 5px 10px -15px;
border: none;
}
.todo-item .action {
display: flex;
align-items: center;
}
.todo-item .action i {
display: block;
padding: 0.4rem;
cursor: pointer;
transition: 0.2s ease-in-out;
position: relative;
right: 25px;
}
.todo-item .action .bi-pencil-square {
color: var(--Button);
}
.todo-item .action .bi-trash3-fill {
color: var(--error);
}
.todo-item.done .todo-content input {
text-decoration: line-through;
color: var(--grey);
}
#media only screen and (min-width: 768px) {
.name {
width: 543px;
height: 376px;
}
.name h1 {
font-size: 40px;
}
#name {
width: 418px;
height: 54px;
margin-left: 63px;
}
::placeholder {
font-size: 15px;
}
.name #loading {
font-size: 15px;
}
.box {
max-width: 543px;
max-height: 600px;
}
.greeting .title,
.greeting .title input {
font-size: 2rem;
}
#name-greet::placeholder {
font-size: 25px;
color: var(--opacty);
opacity: 80%;
}
.create-list h3 {
font-size: 1rem;
}
.create-list h4 {
font-size: 1rem;
}
.create-list input[type=text] {
max-width: 468px;
font-size: 18px;
}
.create-list input[type=submit] {
max-width: 468px;
font-size: 18px;
}
.todo-list h3 {
font-size: 1.1rem;
}
.todo-list .todo-item {
max-width: 468px;
}
.todo-item .action .bi-pencil-square {
font-size: 28px;
}
.todo-item .action .bi-trash3-fill {
font-size: 28px;
}
.todo-item .todo-content input {
font-size: 18px;
margin: 10px 5px 10px -15px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-------Links------->
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css'>
<link rel="stylesheet" href="styles.css">
<!--JS Import-->
<title>Todo-List App</title>
</head>
<body>
<!--App Container-->
<main class="app">
<!--Box for the List-->
<div class="box">
<!--Header of the App-->
<section class="greeting">
<h1 class="title" id="greet">Hello! <input type="text" id="name-greet" placeholder="Name here" />
</h1>
</section>
<!--Add task-->
<section class="create-list">
<h3>Create a Todo</h3>
<form id="add-todo-form">
<h4>What's on your todo?</h4>
<input type="text" name="new-todo-input" id="new-todo-input" placeholder="e.g Practice Coding">
<input type="submit" id="task-submit" value="Add Todo">
</form>
</section>
<!--Todo List-->
<section class="todo-list">
<h3>Todo List</h3>
<div class="list" id="todo-list">
<!--<div class="todo-item">
<label>
<input type="checkbox">
<span class="bubble"></span>
</label>
<div class="todo-content">
<input
type="text"
class="text"
value="A new task"
readonly>
</div>
<div class="action">
<i class="bi bi-pencil-square"></i>
<i class="bi bi-trash3-fill"></i>
</div>-->
</div>
</section>
</div>
</main>
</body>
</html>
I've tried using the appendchild for a simple button and then a word will appear but when I applied the code to the todo list the task I input its not adding the list and I'm achieving this type of todo list in the youtube: https://www.youtube.com/watch?v=MkESyVB4oUw&t=6s

just change your form event listener two lines as i marked
// changed below two lines
const textbox = document.querySelector("#new-todo-input");
const task = textbox.value;
window.addEventListener('DOMContentLoaded', () => {
const form = document.querySelector("#add-todo-form");
const input = document.querySelector("#new-todo-input");
const listTask = document.querySelector('#todo-list');
form.addEventListener('submit', (e) => {
e.preventDefault();
// changed below two lines
const textbox = document.querySelector("#new-todo-input");
const task = textbox.value;
const todoList = document.createElement('div');
todoList.classList.add('todo-item');
const label = document.createElement('label');
const input = document.createElement('input');
const span = document.createElement('span');
label.appendChild(input);
label.appendChild(span);
const todoContent = document.createElement('div');
todoContent.classList.add('todo-content');
todoList.appendChild(todoContent);
const todoInput = document.createElement('input');
todoInput.classList.add('text');
todoInput.type = 'text'
todoInput.value = task;
todoInput.setAttribute('readonly', 'readonly');
todoContent.appendChild(todoInput);
const todoAction = document.createElement('div');
todoAction.classList.add('action');
const todoEdit = document.createElement('i');
todoEdit.classList.add('bi-pencil-square');
const todoDelete = document.createElement('i');
todoDelete.classList.add('bi-trash3-fill');
todoAction.appendChild(todoEdit);
todoAction.appendChild(todoDelete);
todoList.appendChild(todoAction);
listTask.appendChild(todoList);
input.value = '';
todoEdit.addEventListener('click', (e) => {
if (todoEdit.innerText.toLowerCase() == 'bi-pencil-square') {
todoInput.removeAttribute("readonly");
todoInput.focus();
} else {
todoEdit.innerText = "bi-pencil-square";
todoInput.setAttribute("readonly", "readonly");
}
});
todoDelete.addEventListener('click', (e) => {
listTask.removeChild(todoList)
});
});
});
<!-- begin snippet: js hide: false console: true babel: null -->
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#100;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: 0;
transition: all 0.5s ease;
}
:root {
--Button: #432C7A;
--Background: #FCE2DB;
--font-color: #000;
--alternative-font-color: #fff;
--opacty: #998484;
--error: #F83434;
--check: #888;
--margin: 0 1.8125rem;
}
body {
font-family: 'Poppins', sans-serif;
}
input[type=checkbox] {
display: none;
}
.bubble {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 999px;
border: 2px solid var(--Button);
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.bubble::after {
content: '';
display: block;
opacity: 0;
width: 0px;
height: 0px;
background-color: var(--Button);
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
border-radius: 999px;
transition: 0.2s ease-in-out;
}
input:checked~.bubble::after {
width: 10px;
height: 10px;
opacity: 1;
}
#name-greet:not([type="radio"]):not([type="checkbox"]),
button {
appearance: none;
border: none;
outline: none;
background: none;
cursor: initial;
}
.container,
.app {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, #4EB4FF 0%, rgba(24, 38, 48, 0) 100%);
}
.name {
width: 265px;
height: 262px;
background-color: var(--Background);
border-radius: 40px;
}
.box {
width: 100%;
height: 100%;
max-width: 278px;
max-height: 455px;
background-color: var(--Background);
border-radius: 40px;
}
.name h1 {
font-size: 22px;
font-weight: 700;
color: var(--font-color);
text-align: center;
margin-top: 72px;
}
#name {
margin-top: 26px;
width: 223px;
height: 31px;
border-radius: 10px;
margin-left: 20px;
background: transparent;
}
input[type=text] {
padding-left: 7px;
}
::placeholder {
font-size: 12px;
color: var(--opacty);
opacity: 80%;
}
input:focus::placeholder {
color: transparent;
}
.name h2 {
text-align: center;
font-size: 12px;
}
.greeting .title {
display: flex;
}
.greeting .title input {
margin-left: 0.5rem;
flex: 1 1 0%;
min-width: 0;
margin-right: 1rem;
}
.greeting .title,
.greeting .title input {
color: var(--font-color);
font-size: 1.5rem;
font-weight: bold;
}
#name-greet::placeholder {
font-size: 20px;
color: var(--opacty);
opacity: 80%;
}
.greeting h1 {
margin-left: 29px;
margin-top: 20px;
}
.create-list h3 {
margin-left: 1.8125rem;
margin-bottom: 1.6rem;
font-weight: 100;
font-size: 15px;
line-height: 18px;
text-align: left;
text-transform: uppercase;
}
.create-list h4 {
margin: var(--margin);
font-size: 12px;
color: var(--opacty);
}
.create-list input[type=text] {
display: flex;
align-items: center;
width: 100%;
max-width: 218px;
font-size: 1.125rem;
padding: 0.8rem;
color: var(--font-color);
background-color: transparent;
margin-bottom: 1.1rem;
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
;
border: 1px solid #847171;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
border-radius: 10px;
font-weight: 600;
font-size: 12px;
line-height: 18px;
margin: 0 1.8125rem 1rem;
}
.create-list input[type=submit] {
margin: 0 1.8125rem 1rem;
width: 100%;
max-width: 218px;
font-size: 1.125rem;
padding: 0.5rem 1rem;
color: var(--alternative-font-color);
background-color: var(--Button);
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
;
border: none;
border-radius: 10px;
transition: 0.2s ease-out;
}
.create-list input[type=submit]:hover {
background-color: transparent;
border: 1px solid var(--Button);
color: var(--font-color);
cursor: pointer;
}
.todo-list h3 {
margin-left: 1.8125rem;
margin-bottom: 1rem;
font-weight: 100;
font-size: 15px;
line-height: 18px;
text-transform: uppercase;
}
.todo-list .list {
margin: 1rem 0;
}
.todo-list .todo-item {
display: flex;
align-items: center;
background-color: var(--alternative-font-color);
padding: 0.8rem;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
margin: var(--margin);
max-width: 234px;
}
.todo-item label {
display: block;
margin-right: 1rem;
cursor: pointer;
}
.todo-item .todo-content {
flex: 1 1 0%;
}
.todo-item .todo-content input {
color: var(--font-color);
font-size: 12px;
margin: 0 5px 10px -15px;
border: none;
}
.todo-item .action {
display: flex;
align-items: center;
}
.todo-item .action i {
display: block;
padding: 0.4rem;
cursor: pointer;
transition: 0.2s ease-in-out;
position: relative;
right: 25px;
}
.todo-item .action .bi-pencil-square {
color: var(--Button);
}
.todo-item .action .bi-trash3-fill {
color: var(--error);
}
.todo-item.done .todo-content input {
text-decoration: line-through;
color: var(--grey);
}
#media only screen and (min-width: 768px) {
.name {
width: 543px;
height: 376px;
}
.name h1 {
font-size: 40px;
}
#name {
width: 418px;
height: 54px;
margin-left: 63px;
}
::placeholder {
font-size: 15px;
}
.name #loading {
font-size: 15px;
}
.box {
max-width: 543px;
max-height: 600px;
}
.greeting .title,
.greeting .title input {
font-size: 2rem;
}
#name-greet::placeholder {
font-size: 25px;
color: var(--opacty);
opacity: 80%;
}
.create-list h3 {
font-size: 1rem;
}
.create-list h4 {
font-size: 1rem;
}
.create-list input[type=text] {
max-width: 468px;
font-size: 18px;
}
.create-list input[type=submit] {
max-width: 468px;
font-size: 18px;
}
.todo-list h3 {
font-size: 1.1rem;
}
.todo-list .todo-item {
max-width: 468px;
}
.todo-item .action .bi-pencil-square {
font-size: 28px;
}
.todo-item .action .bi-trash3-fill {
font-size: 28px;
}
.todo-item .todo-content input {
font-size: 18px;
margin: 10px 5px 10px -15px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-------Links------->
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css'>
<link rel="stylesheet" href="styles.css">
<!--JS Import-->
<title>Todo-List App</title>
</head>
<body>
<!--App Container-->
<main class="app">
<!--Box for the List-->
<div class="box">
<!--Header of the App-->
<section class="greeting">
<h1 class="title" id="greet">Hello! <input type="text" id="name-greet" placeholder="Name here" />
</h1>
</section>
<!--Add task-->
<section class="create-list">
<h3>Create a Todo</h3>
<form id="add-todo-form">
<h4>What's on your todo?</h4>
<input type="text" name="new-todo-input" id="new-todo-input" placeholder="e.g Practice Coding">
<input type="submit" id="task-submit" value="Add Todo">
</form>
</section>
<!--Todo List-->
<section class="todo-list">
<h3>Todo List</h3>
<div class="list" id="todo-list">
<!--<div class="todo-item">
<label>
<input type="checkbox">
<span class="bubble"></span>
</label>
<div class="todo-content">
<input
type="text"
class="text"
value="A new task"
readonly>
</div>
<div class="action">
<i class="bi bi-pencil-square"></i>
<i class="bi bi-trash3-fill"></i>
</div>-->
</div>
</section>
</div>
</main>
</body>
</html>

How to reset a placeholder whenever you exit a search box event?

I've got an overlay search box (check code). The search box got a placeholder "Sök", let's say the user writes something in the textbox but then exits (presses the x in the right upper corner). Then I want the text that the user wrote to be removed and the placeholder reset, so whenever the user enters the search box again the text is removed and the placeholder is back. How do I create this event?
Code:
body{
background: white;
font-family: 'Montserrat', sans-serif;
padding-bottom: -1px;
}
span{
display: inline-block;
}
.backgroundlogo{
margin-top:-1400px;
z-index: -1;
position: relative;
width: 100%;
}
.container{
width: 80%;
margin: 0 auto;
}
header{
background: none;
}
* {
margin:0;
padding:0;
}
header ::after {
content: "";
display: table;
clear: both;
}
nav{
float: right;
padding-right: 230px;
}
nav li{
display: inline-block;
padding-left: 45px;
padding-top: 20px;
padding-bottom: 20px;
}
nav ul{
list-style: none;
display: inline-block;
padding-top: 25px;
}
nav a {
font-size: 12px;
color: black;
font-weight: 600;
text-decoration: none;
text-align: center;
text-transform: uppercase;
}
nav a:hover{
color: red;
}
nav li:hover{
}
.fa-bars{
color: black;
font-size: 14px;
padding-left: 15px;
}
.fa-bars:hover{
color: red;
cursor: pointer;
}
.wrapper{
position: relative;
height: 100%;
width: 100%;
}
.backgroundlogo{
}
.bild1{
height: 350px;
width: 600px;
margin-top: 100px;
margin-left: 80px;
position: absolute;
z-index: 4;
background-image: url('Img/KBA.jpg');
background-position: 10% 30% ;
background-size: 180%;
}
.bild2{
height: 350px;
width: 600px;
margin-top: 140px;
margin-left: 120px;
z-index: 3;
position:absolute;
background-color: #3D6BB8;
}
.entrytext{
float: right;
margin-right: 90px;
margin-top: 175px;
clear: both;
}
.entrytext>h1{
font-weight: 800;
font-style: normal;
font-size: 54px;
}
.entrytext>button{
border: none;
display: inline-block;
background-color: #38b272;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
box-shadow: 20px 15px black;
}
.entrytext>button:hover{
border: none;
display: inline-block;
background-color: #c12147;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
}
button:focus {outline:0;}
.fa-angle-right{
font-size: 20px;
padding-left: 30px;
}
.entrytext>h2{
font-size: 14px;
font-weight: 600;
margin-top: 20px;
}
.citygalleria{
color: #CC2244;
}
.brand{
height: 110px;
width: 750px;
margin: 600px auto;
background-color: #CFCFCF;
clear: both;
z-index: 11;
}
.openBtn {
background: #f1f1f1;
border: none;
padding: 10px 15px;
font-size: 20px;
cursor: pointer;
}
.openBtn:hover {
background: #bbb;
}
.overlay {
height: 100%;
width: 100%;
display: none;
position: fixed;
z-index: 10;
top: 0;
left: 0;
background-color: white;
background-color: rgba(255,255,255, 0.8);
}
.overlay-content {
position: relative;
top: 20%;
width: 80%;
text-align: center;
margin-top: 30px;
margin: auto;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
cursor: pointer;
color: black;
}
.overlay .closebtn:hover {
color: #ccc;
}
.overlay input[type=text] {
padding: 15px;
font-size: 50px;
font-weight: bold;
border: none;
background:none;
margin: 0 auto;
text-decoration: none;
border-bottom: 6px solid black;
border-bottom-left-radius: 5px;
color:black;
text-align:center;
width: 100%;
}
input::placeholder {
color: black;
}
.overlay input[type=text]:hover {
background: none;
}
.overlay button {
float: left;
width: 20%;
padding: 15px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
input:focus {outline:0;}
.overlay button:hover {
background: #bbb;
}
.type1{
width: 1700px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<meta charset="utf-8">
<script src="https://kit.fontawesome.com/908c2e5c96.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<title>Kungsmässan — Måste upplevas!</title>
</head>
<body>
<header>
<div class="container">
<nav>
<ul>
<li>Butiker</li>
<li>Resturang & Café</li>
<li>Utbyggnad</li>
<li>Öppetider</li>
<div id="myOverlay" class="overlay">
<span class="closebtn" onclick="closeSearch()" title="Close Overlay">×</span>
<div class="overlay-content">
<form action="/action_page.php">
<input class="type1" id="type2" onblur="this.placeholder = 'Sök'" onfocus="this.placeholder = ''" type="text" placeholder="Sök" name="search">
</form>
</div>
</div>
<i onclick="openSearch()" id="openBtn" class="fas fa-search"></i>
<script>
function openSearch() {
document.getElementById("myOverlay").style.display = "block";
}
document.addEventListener('keydown',function(){document.getElementById('type2').focus();});
function closeSearch() {
document.getElementById("myOverlay").style.display = "none";
}
</script>
<i class="fas fa-bars"></i>
</ul>
</nav>
</div>
</header>
<div class="bild1">
</div>
<div class="bild2">
</div>
<div class="entrytext">
<h1>Sveriges bästa <br/> <span class="citygalleria">citygalleria.</span> Mitt <br/> i Kungsbacka.</h1>
<h2>35 000 KVADRATMETER OCH ÖVER 100 AFFÄRER!</h2>
<button type="LÄS MER" name="button ">LÄS MER<i class="fas fa-angle-right"></i></button>
</div>
<div class="brand">
</div>
<span>
<img class="backgroundlogo" src="Img/bg.png" alt="">
</span>
</body>
</html>

If you set the value of the input back to nothing when the closing button is clicked, the placeholder should appear again:
const button = document.querySelector( 'button' );
const input = document.querySelector( 'input' );
button.addEventListener( 'click', event => {
input.value = '';
});
<input type="text" placeholder="Sok">
<button>Close</button>

Try with setValue('') method to reset any element value.

Need to set validation only 6 levels can be added of sub nodes in tree

I would like to restrict the user, so they can only add maximum 6 levels of sub-nodes. Currently they can add however many they want.
// Add Child
function AddChild(element) {
var ul = element.parentNode.nextElementSibling;
var li = document.createElement("li");
domString = '<div class="textbox_cls"> \n\
<span class="caret"></span>\n\
<span class="remove_user" parent_id="1">-</span>\n\
<input type="text" name="username" placeholder="Element">\n\
<span class="add_user" parent_id="1" onclick="AddChild(this);">+</span>\n\
<span class="drag_user">::</span>\n\
</div><ul></ul>';
li.innerHTML = domString;
ul.appendChild(li);
}
input[type='text'] {
padding: 8px 10px;
border: 1px solid #e5e5e5;
color: gray;
border-radius: 4px;
font-size: 16px;
}
.add_user {
background: green;
color: #fff;
margin: 4px 0px 4px 5px;
}
.remove_user {
background: red;
color: #fff;
line-height: 20px !important;
margin: 4px 5px 4px 0px;
}
.add_user,
.remove_user {
width: 25px;
height: 25px;
display: inline-block;
text-align: center;
line-height: 25px;
border-radius: 50%;
}
.drag_user {
color: lightgrey;
line-height: 30px;
font-weight: bold;
font-size: 30px;
letter-spacing: -2px;
margin: 0px 5px;
}
.add_user,
.remove_user {
font-size: 25px;
font-weight: bold;
}
.User_listing ul {
margin-bottom: 15px;
list-style-type: none;
}
.User_listing ul .textbox_cls {
margin-bottom: 10px;
display: inline-flex;
position: relative;
}
.add_user,
.remove_user,
.drag_user {
cursor: move;
}
.User_listing>ul ul {
margin-left: 10px;
}
.User_listing>ul li {
margin: 0;
padding: 0 0px;
line-height: 20px;
color: #369;
font-weight: bold;
border-left: 2px dashed rgb(0, 0, 0);
}
.User_listing>ul li:last-child {
border-left: none;
}
.User_listing>ul li:before {
position: relative;
top: -20px;
height: 30px;
width: 33px;
color: white;
border-bottom: 2px dashed rgb(0, 0, 0);
content: "";
display: inline-block;
left: 0px;
}
.User_listing>ul li:last-child:before {
border-left: 2px dashed rgb(0, 0, 0);
}
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<div class="User_listing">
<ul>
<li>
<div class="textbox_cls" total_ul="1">
<span class="caret"></span>
<span class="remove_user" parent_id="1">-</span>
<input type="text" name="username" placeholder="Element" />
<span class="add_user" parent_id="1" onclick="AddChild(this);">+</span>
<span class="drag_user">::</span>
</div>
<ul> </ul>
</li>
</ul>
</div>
</body>
</html>

In the span that defines your + I added a custom attribute - level and first set it to 1. Then, in AddChild I'm getting this attribute using getAttribute, parsing it to int and increment it. Then pass the same attribute again in domString.
Each time the user is trying to add a child, I'm checking if the nesting level is max 6.
// Add Child
function AddChild(element) {
var ul = element.parentNode.nextElementSibling;
var li = document.createElement("li");
var level = parseInt(element.getAttribute("level")) + 1;
if (level <= 6) {
domString = '<div class="textbox_cls"> \n\
<span class="caret"></span>\n\
<span class="remove_user" parent_id="1">-</span>\n\
<input type="text" name="username" placeholder="Element">\n\
<span class="add_user" level=' + level + ' parent_id="1" onclick="AddChild(this);">+</span>\n\
<span class="drag_user">::</span>\n\
</div><ul></ul>';
li.innerHTML = domString;
ul.appendChild(li);
}
}
input[type='text'] {
padding: 8px 10px;
border: 1px solid #e5e5e5;
color: gray;
border-radius: 4px;
font-size: 16px;
}
.add_user {
background: green;
color: #fff;
margin: 4px 0px 4px 5px;
}
.remove_user {
background: red;
color: #fff;
line-height: 20px !important;
margin: 4px 5px 4px 0px;
}
.add_user,
.remove_user {
width: 25px;
height: 25px;
display: inline-block;
text-align: center;
line-height: 25px;
border-radius: 50%;
}
.drag_user {
color: lightgrey;
line-height: 30px;
font-weight: bold;
font-size: 30px;
letter-spacing: -2px;
margin: 0px 5px;
}
.add_user,
.remove_user {
font-size: 25px;
font-weight: bold;
}
.User_listing ul {
margin-bottom: 15px;
list-style-type: none;
}
.User_listing ul .textbox_cls {
margin-bottom: 10px;
display: inline-flex;
position: relative;
}
.add_user,
.remove_user,
.drag_user {
cursor: move;
}
.User_listing>ul ul {
margin-left: 10px;
}
.User_listing>ul li {
margin: 0;
padding: 0 0px;
line-height: 20px;
color: #369;
font-weight: bold;
border-left: 2px dashed rgb(0, 0, 0);
}
.User_listing>ul li:last-child {
border-left: none;
}
.User_listing>ul li:before {
position: relative;
top: -20px;
height: 30px;
width: 33px;
color: white;
border-bottom: 2px dashed rgb(0, 0, 0);
content: "";
display: inline-block;
left: 0px;
}
.User_listing>ul li:last-child:before {
border-left: 2px dashed rgb(0, 0, 0);
}
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<div class="User_listing">
<ul>
<li>
<div class="textbox_cls" total_ul="1">
<span class="caret"></span>
<span class="remove_user" parent_id="1">-</span>
<input type="text" name="username" placeholder="Element" />
<span class="add_user" level=1 parent_id="1" onclick="AddChild(this);">+</span>
<span class="drag_user">::</span>
</div>
<ul> </ul>
</li>
</ul>
</div>
</body>
</html>

Why won't these boxes appear in alignment?

I want all the boxes to be made with perfect alignemnt, but for some reason, from the second row onwards, they start to lean to the left.
$(document).ready(function() {
number = 0;
document.getElementById("create").onclick = function () {
var ok = true;
boxHTML = document.getElementsByClassName("box")[number].innerHTML;
if (ok === true) {
var obj = document.createElement('div');
obj.className = 'box';
obj.innerHTML = boxHTML;
$(this).before(obj);
}
number++;
};});
//Colours
$Background:#EAEAEA;
//Body
body{
}
//Menu
#menu {
margin-left: 5%;
margin-top: 5.25rem;
position:absolute;
ul{
list-style-type: none;
}
li{
a{
padding: 10px 15px;
text-decoration: none;
display: block;
color: black;
font-family: "roboto", sans-serif;
&:hover {
text-transform: uppercase;
}
}
}
}
//Dashboard
#dashboard{
display: inline-block;
border-radius:5px;
border: 0.5px solid black;
width: 73%;
height: 35rem;
margin-left: 17%;
margin-right: 20%;
margin-top: 6.8rem;
position: absolute;
-webkit-box-shadow:0 0 10px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 10px rgba(0,0,0,0.8);
box-shadow:0 0 10px rgba(0,0,0,0.8);
}
//Boxes
#import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
html, * {
box-sizing: border-box;
}
body {
background: #e4e9f0;
padding: 40px;
}
.box {
float: left;
position: relative;
display: inline-block;
width: 45%;
background: white;
padding: 30px;
margin-right: 2%;
margin-left: 4%;
margin-top: 3%;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
border-radius: 2px;
overflow: hidden;
+ .box {
margin: 0px;
margin-top: 3%;
}
&:after {
padding-top: 30%;
display: block;
content: '';
}
> div {
float: left;
width: 100%;
height: 150px;
color: #fff;
}
header {
background: #533687;
display: block;
margin: -30px -30px 30px -30px;
padding: 10px 10px;
h2 {
line-height: 1;
padding: 0;
margin: 0;
font-family: "roboto", sans-serif;
font-weight: 600;
font-size: 20px;
color: white;
-webkit-font-smoothing: antialiased;
}
}
}
#create {
user-select:none;
padding:20px;
border-radius:20px;
text-align:center;
border:15px solid rgba(0,0,0,0.1);
cursor:pointer;
color:rgba(0,0,0,0.1);
font:220px "Helvetica", sans-serif;
line-height:185px;
float:left;
padding:25px 25px 40px;
margin:0 20px 20px 0;
width:250px;
height:250px;
margin-top: 3%;
}
#create:hover { border-color:rgba(0,0,0,0.2); color:rgba(0,0,0,0.2); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dashboard">
<a href="#" class="box">
<header><h2>Responsive C3</h2></header>
<div id="chartA">
</div>
</a>
<div id="create">+</div>
</div>
JSFiddle

It didn't work for you because the newly added boxes have different margin properties. I've just statically set margin properties for the first box.
https://jsfiddle.net/oh0hjavL/2/

How to set multicolumn dropdown as such each drop down will use the same drop down frame?

I was required to program the following header ( the borders I've added
to know if it renders as I need to ):
"Select Project", "Select Item" and "Select Content" are dropdown elements.
Each one take 2 grids. I need that when clicking on the dropdown element, no matter which one, the drop down menu will take a width of 6 grids as shown above
in the blue frame.
( In other words, the drop down menu will be the same for all dropdown elements
but the content is different ).
In addition, when resizing to smaller screen, the media query doesn't work at all:
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) and (max-width : 1370px) {
.dropdown-menu.multi-column {
width: 765px !important;
}
}
What am I doing wrong here ?
HTML:
<!-- Layout Container-->
<div id="main-wrapper">
<!--Header - Top Bar Navigation-->
<header class="margin-left-right-20">
<div class="row top-bar">
<!-- Logo Image -->
<div class="col-md-1 col-lg-1 top-bar-margin-top border-div">
<img src="images/logo.png" id="logo" alt="logo" />
</div>
<!-- Application Indicator -->
<div class="col-md-1 col-lg-1 top-bar-margin-top border-div">
<a href="#">
<div>
<span class="top-bar-small-title">App</span>
<br />
<span class="top-bar-app-links" id="current-app-selected">App1</span>
</div>
</a>
</div>
<!-- Module (a.k.a Project) Selector -->
<div class="col-md-2 col-lg-2 top-bar-margin-top border-div">
<div class="dropdown">
<a id="dLabel" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="top-bar-small-title make-it-regular">Project</span>
<br />
<span class="top-bar-app-links make-it-regular">Select Project</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu multi-column" aria-labelledby="dLabel">
<div class="dropdown-menu multi-column">
<div class="container-fluid">
<div class="row-fluid">
<div class="span6">
<ul class="dropdown-menu">
<li>Col 1 - Opt 1</li>
<li>Col 1 - Opt 2</li>
</ul>
</div>
<div class="span6">
<ul class="dropdown-menu">
<li>Col 2 - Opt 1</li>
<li>Col 2 - Opt 2</li>
</ul>
</div>
</div>
</div>
</div>
<!--<li>
<div class="row" style="width: 760px;">
<ul class="list-unstyled col-md-4">
<li>test1-1</li>
<li>test1-2</li>
<li>test1-3</li>
</ul>
<ul class="list-unstyled col-md-4">
<li>test2-1</li>
<li>test2-2</li>
<li>test2-3</li>
</ul>
<ul class="list-unstyled col-md-4">
<li>test3-1</li>
<li>test3-2</li>
<li>test3-3</li>
</ul>
</div>
</li>-->
<!--<li>Item 1</li>
<li>Item 2</li>-->
</ul>
</div>
</div>
<!-- Module (a.k.a Project) Selector -->
<!--<div class="col-md-2 col-lg-2 top-bar-margin-top border-div">
<span class="top-bar-small-title make-it-regular">Module</span><br />
<span class="top-bar-app-links make-it-regular">Select Module</span>
</div>-->
<!-- Item Selector -->
<div class="col-md-2 col-lg-2 top-bar-margin-top border-div">
<span class="top-bar-small-title make-it-regular">Item</span>
<br />
<span class="top-bar-app-links make-it-regular">Select Item</span>
</div>
<!-- Block Selector -->
<div class="col-md-2 col-lg-2 top-bar-margin-top border-div">
<span class="top-bar-small-title make-it-regular">Content</span>
<br />
<span class="top-bar-app-links make-it-regular">Select Content</span>
</div>
<!-- Search Bar -->
<div class="col-md-2 col-lg-offset-1 col-lg-2 top-bar-margin-top border-div" id="div-search-bar">
<div class="input-group input-search col-md-12 col-lg-12 form-group">
<input type="text" class="form-control" name="q" id="search-bar" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default btn-search-custom" type="submit">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
<!-- Avatar user -->
<div class="col-md-1 col-lg-1 top-bar-margin-top border-div" id="div-avatar-circle">
<div class="avatar-circle col-lg-1">
</div>
<div class="show-user col-lg-8" style="display:inline-block">
<span class="show-user-name">Lionel Messi</span>
<span class="show-user-permission">Programmer</span>
</div>
</div>
</div>
<!-- End <div class="row top-bar">-->
</header>
</div>
CSS:
* {
padding: 0;
margin: 0;
/* height:100%;*/
}
.margin-left-right-20 {
margin-left: 20px;
margin-right: 20px;
}
.border-div {
border: solid 1px black;
}
.container {
margin-left: 20px;
margin-right: 20px;
width: 100%;
position: relative;
}
#logo {
width: 79px;
height: 42px;
margin-left: 26px;
}
.top-bar {}
.top-bar-margin-top {
margin-top: 43px;
/*padding: 0;*/
}
.top-bar-margin-top a:hover {
text-decoration: none;
}
.top-bar-small-title {
font-family: 'Lato', sans-serif;
font-size: 10px;
color: #2baab1;
}
.top-bar-app-links {
font-family: 'Lato', sans-serif;
font-size: 14px;
color: #2baab1;
}
#current-app-selected {
font-weight: bold;
}
#search-bar {
/*width: 325px;*/
width: 100%;
height: 29px;
}
/*#media only screen and (min-width: 1200px) and (max-width: 1368px) {
#search-bar{
width: 200px;
height: 29px;
}
}*/
/*#avatar-and-search-in-new-line {
display:none;
}*/
.make-it-regular {
color: #373d42;
}
input.search-query {
padding-left: 26px;
}
.input-group-btn:last-child {
border-radius: 500px;
}
.input-search .input-group-btn {
color: #ccc;
}
.input-group-icon .input-group-btn,
.input-search .input-group-btn {
border-radius: 500px;
width: 0;
left: -13%;
z-index: 1000;
}
.input-group-btn {
position: relative;
font-size: 0;
white-space: nowrap;
}
.input-group-addon,
.input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle;
}
.input-group-addon,
.input-group-btn,
.input-group .form-control {
display: table-cell;
}
input-group-rounded input.form-control:first-child,
.input-group-rounded input.form-control:last-child,
.input-search input.form-control:first-child,
.input-search input.form-control:last-child {
border-radius: 500px;
}
.input-group-icon input.form-control:first-child,
.input-group-icon input.form-control:last-child,
.input-search input.form-control:first-child,
.input-search input.form-control:last-child {
border-radius: 25px;
}
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group-rounded input.form-control,
.input-search input.form-control {
-webkit-border-radius: 500px;
border-radius: 500px;
}
.input-group-icon input.form-control,
.input-search input.form-control {
font-size: 12px;
font-size: 1.2rem;
padding-right: 36px;
}
.input-group-addon,
.input-group-btn,
.input-group .form-control {
display: table-cell;
}
.input-group .form-control {
position: relative;
z-index: 2;
float: left;
width: 100%;
margin-bottom: 0;
}
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
textarea {
-webkit-appearance: none;
}
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.input-group-btn:first-child,
.input-search .input-group-btn:last-child {
border-radius: 500px;
}
.input-search .input-group-btn {
color: #ccc;
}
.input-group-icon .input-group-btn,
.input-search .input-group-btn {
border-radius: 500px;
width: 0;
}
.input-group-btn {
position: relative;
font-size: 0;
white-space: nowrap;
}
.input-group-addon,
.input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle;
}
.input-group-addon,
.input-group-btn,
.input-group .form-control {
display: table-cell;
}
.btn-search-custom {
border: 0px solid transparent;
padding: 0;
}
.input-group-btn:last-child>.btn,
.input-group-btn:last-child>.btn-group {
z-index: 2;
margin-left: 13px;
}
#div-avatar-circle {
padding: 0;
}
.avatar-circle {
background-color: #5c6770;
border-color: #5c6770;
border-radius: 50%;
border-style: solid;
border-width: 1px;
height: 40px;
width: 40px;
display: inline-block;
vertical-align: top;
}
.show-user {
display: inline-block;
/* width: 98px; */
margin-top: 3px;
/* margin-left: 10px; */
/* margin: 0; */
/* padding: 0px; */
padding-left: 3px;
}
.nav-tabs-colors {
background-color: #ececef;
}
.edit-app-tabs {
background-color: #ececef;
}
#edit-app-tab {
background-color: #ececef;
}
#edit-app-content-title {
margin-left: 35px;
}
.app-name-title {
position: absolute;
top: 193px;
}
.app-name-title div h3 {
margin: 0;
padding: 0;
}
.privacy-statement-text-area {
position: absolute;
top: 241px;
}
#privacy-statement-data {
background-color: white;
resize: none;
overflow-y: auto;
/*width:460px;*/
height: 224px;
max-height: 224px;
}
.panel {
background: transparent;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
}
.panel {
margin-bottom: 20px;
background-color: #fff;
border: 1px solid transparent;
/* border-radius: 4px;*/
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
/* overflow-y: auto;*/
/*width:431px;*/
/*width:402px;*/
}
.panel-margin-settings {
margin-left: 20px;
margin-bottom: 15px;
}
#first-component {
margin-top: 33px;
}
.component-heading {
background: #2baab1;
height: 47px;
}
.component-heading-title {
margin-top: 11px;
margin-left: 15px;
margin-bottom: 0;
font-size: 22px;
color: white;
font-family: 'Lato', sans-serif;
display: inline-block;
}
.panel-heading {
background: #fdfdfd;
/* border-radius: 5px 5px 0 0;*/
/* border-bottom: 1px solid #DADADA;*/
/* padding: 18px;*/
position: relative;
}
/*
.panel-title {
color: #33353F;
font-size: 20px;
font-weight: 400;
line-height: 20px;
padding: 0;
text-transform: none;
}
*/
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 22px;
color: #2baab1;
font-family: 'Lato', sans-serif;
display: inline-block;
}
.panel-heading + .panel-body {
/* border-radius: 0 0 5px 5px;*/
}
.panel-body {
background: #fdfdfd;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
/* border-radius: 5px;*/
}
.panel-body {
padding: 15px;
}
.checkbox-custom {
position: relative;
padding: 0 0 0 25px;
margin-bottom: 7px;
margin-top: 0;
}
.checkbox-custom input[type="checkbox"] {
opacity: 0;
position: absolute;
top: 50%;
left: 3px;
margin: -6px 0 0 0;
z-index: 2;
cursor: pointer;
}
.checkbox-custom label {
cursor: pointer;
margin-bottom: 0;
text-align: left;
line-height: 1.2;
}
.checkbox-custom label:before {
content: '';
position: absolute;
top: 50%;
left: 0;
margin-top: -9px;
width: 19px;
height: 18px;
display: inline-block;
border-radius: 2px;
border: 1px solid #bbb;
background: #fff;
}
.checkbox-custom input[type="checkbox"]:checked + label:after {
position: absolute;
display: inline-block;
font-family: 'FontAwesome';
content: '\F00C';
top: 50%;
left: 4px;
margin-top: -5px;
font-size: 11px;
line-height: 1;
width: 16px;
height: 16px;
color: #2baab1;
}
.checkbox-inline {
position: relative;
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
vertical-align: middle;
cursor: pointer;
}
/*
.checkbox-inline input[type="checkbox"] {
position: absolute;
margin-left: -20px;
}
*/
.new-category {
float: right;
margin-top: 5px;
text-decoration: none;
}
.new-category:link,
.new-category:visited,
.new-category:hover {
text-decoration: none;
cursor: pointer;
}
.dd {
position: relative;
display: block;
margin: 0;
padding: 0;
/* list-style: none;*/
font-size: 13px;
line-height: 20px;
}
.dd-list {
display: block;
position: relative;
margin: 0;
padding: 0;
list-style-type: decimal;
/* list-style: none;*/
}
.dd-item,
.dd-empty,
.dd-placeholder {
display: block;
position: relative;
margin: 0;
padding: 0;
min-height: 20px;
font-size: 13px;
line-height: 20px;
display: list-item;
}
.dd-item-reset {
font-size: 0;
}
.dd-handle {
display: block;
height: 34px;
margin: 5px 0;
padding: 6px 10px;
color: #333;
text-decoration: none;
font-weight: 600;
border: 1px solid #CCC;
background: white;
/* background: #F6F6F6;*/
-webkit-border-radius: 3px;
border-radius: 3px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.dd-list-ul {
list-style-type: none;
}
.dd-handle-assoc-file {
display: inline-block;
/*width:280px;*/
width: 277px;
height: 31px;
vertical-align: middle;
border-radius: 0;
font-size: 14px;
}
.btn-associated-file-item {
background-color: #dcdcdc;
border-bottom-left-radius: 5px;
border-color: #5c6770;
border-style: solid;
border-top-left-radius: 5px;
border-width: 1px;
height: 31px;
width: 93px;
display: inline-block;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
/* border-right:1px solid blc;*/
}
.close-assoc-file {
line-height: inherit;
}
#glossary-file-select,
#definition-file-select,
#design-file-select {
visibility: hidden;
z-index: -1000;
height: 0;
width: 0;
}
#modules-list-table-padding {
padding-left: 65px;
padding-right: 65px;
}
#modules-list-table-title {
margin-top: 33px;
margin-left: 15px;
display: block;
}
#create-module {
font-size: 12px;
color: #2baab1;
font-family: 'Lato', sans-serif;
font-weight: bold;
float: right;
text-decoration: none;
display: inherit;
margin-top: -5px;
margin-right: 10px;
}
#table-underline {
border: 1px solid #2baab1;
margin-top: 12px;
}
.modules-table > tbody > tr > th,
.modules-table > tbody > tr > td {
border-color: #ececef;
}
.modules-table tr > *:nth-child(1) {
padding-left: 15px;
}
.modules-table tr > *:nth-child(2) {
padding-left: 67px;
width: 336px;
max-width: 336px;
}
.modules-table tr > *:nth-child(3) {
padding-left: 103px;
padding-right: 30px;
}
.modules-table tr > *:nth-child(4) {
padding-right: 11px;
}
.modules-table > tbody > tr > td:last-child {
text-align: center;
}
/*.modules-table tr > th:last-child {
padding-right: initial;
float:right;
}*/
/*.modules-table tr > *:last-child {
padding-left: 10px;
}*/
/*.modules-table > tbody > tr > td:nth-child(2) {
width:336px;
}*/
/*div[class^="col-lg-1"]:first-child {
margin-left: 20px;
}*/
/*div[class^="col-lg-1"]:last-child {
margin-right: 20px;
}
div[class^="col-lg-3"]:first-child {
margin-left: 20px;
}
div[class^="col-lg-3"]:last-child {
margin-right: 20px;
}*/
.tools-option-link {
font-size: 14px;
font-family: 'Lato', sans-serif;
color: #373d42;
vertical-align: middle;
margin-left: 5px;
}
.tools-option-container {
padding-top: 15px;
padding-bottom: 15px;
border-bottom: solid 1px black;
}
.reset-padding-top {
padding-top: 0;
}
#tools-block a:hover {
text-decoration: none;
}
#ChartistExtremeResponsiveConfiguration {}
.module-name {
display: inline-block;
width: 150px;
}
.circular-bar.circular-bar-xs {
width: 50px;
}
.circular-bar {
margin: 25px 0;
}
.circular-bar {
margin-bottom: 25px;
}
.mr-md {
margin-right: 15px !important;
}
.mt-xs {
margin-top: 5px !important;
}
.m-none {
margin: 0 !important;
}
.circular-bar-container {
position: relative;
top: 5px;
}
.circular-bar-percentage-text {
position: absolute;
top: 29%;
left: 21%;
}
table {
border-collapse: collapse;
}
td {
padding-top: 10px;
padding-bottom: 10px;
}
#module-of-the-day-id {
font-size: 14px;
font-family: 'Lato', sans-serif;
color: #2baab1;
}
#module-of-the-day-name {
font-size: 14px;
font-family: 'Lato', sans-serif;
color: #373d42;
}
.stars-styling {
font-size: 18px;
color: #ffbb00;
}
#module-of-the-day-review-paragraph {
/*width:343px;*/
font-size: 14px;
margin-top: 15px;
}
#item-reviewer {
float: right;
font-size: 14px;
/*font-family: 'Lato', sans-serif;*/
font-weight: bold;
color: #373d42;
}
#module-of-the-day-item-reviewer {
margin-bottom: 15px;
}
#module-usage-stats {
clear: both;
}
#module-usage-description {
position: relative;
margin-bottom: 15px;
border-bottom: solid 1px black;
}
#module-usage-text-container {
position: absolute;
top: 13%;
}
#module-usage-title {
font-size: 14px;
margin-bottom: 5px !important;
}
#module-usage-status {
font-size: 14px;
}
/* */
#published-items-description {
position: relative;
margin-bottom: 15px;
border-bottom: solid 1px black;
}
#published-items-text-container {
position: absolute;
top: 13%;
}
#published-items-title {
font-size: 14px;
margin-bottom: 5px !important;
}
#published-items-status {
font-size: 14px;
}
#published-items-percentage-text {
top: 33%;
left: 31%;
}
/* */
#device-description {
position: relative;
margin-bottom: 15px;
border-bottom: solid 1px black;
}
#device-text-container {
position: absolute;
top: 3%;
}
#device-title {
font-size: 14px;
margin-bottom: 5px !important;
}
#device-status {
font-size: 14px;
}
#view-all-statistics {
margin-top: 15px;
}
#view-all-statistics a:link {
text-decoration: underline;
}
.stats-paragraph-styling {
font-size: 14px;
font-weight: bold;
margin: 0;
}
.mb-none {
margin-bottom: 0 !important;
}
.text-weight-bold {
font-weight: 700;
}
h4,
.h4 {
font-size: 18px;
font-size: 1.8rem;
}
.text-xs {
font-size: 10px;
font-size: 1rem;
}
.text-muted {
color: #777;
}
/* */
.general-data-num-styling {
font-family: 'Lato', sans-serif;
font-size: 40px;
color: #2baab1;
}
.general-data-text-styling {
font-family: 'Lato', sans-serif;
font-size: 12px;
color: #373d42;
}
#items-num-inner-container {
/*margin-left: 15px;
margin-right: 15px;*/
border-left: solid 1px;
border-right: solid 1px;
}
/* */
.widget-summary {
display: table;
width: 100%;
}
.widget-summary .widget-summary-col.widget-summary-col-icon {
width: 1%;
}
.widget-summary .widget-summary-col {
display: table-cell;
vertical-align: top;
width: 100%;
}
.widget-summary .summary-icon {
margin-right: 15px;
font-size: 42px;
/*font-size: 4.2rem;*/
width: 90px;
height: 90px;
line-height: 90px;
text-align: center;
color: #fff;
-webkit-border-radius: 55px;
border-radius: 55px;
}
.bg-primary {
background: #0088cc;
}
.bg-secondary {
background: #E36159;
color: #FFF;
}
.bg-tertiary {
background: #2BAAB1;
color: #FFF;
}
.bg-quartenary {
background: #734BA9;
color: #FFF;
}
.widget-summary .summary {
min-height: 65px;
word-break: break-all;
}
.widget-summary .summary .title {
margin: 0;
font-size: 16px;
/*font-size: 1.6rem;*/
line-height: 22px;
/*line-height: 2.2rem;*/
color: #333;
font-weight: 500;
}
.widget-summary .summary .info {
font-size: 14px;
/*font-size: 1.4rem;*/
line-height: 30px;
/*line-height: 3rem;*/
}
.widget-summary .summary .amount {
margin-right: .2em;
font-size: 24px;
/*font-size: 2.4rem;*/
font-weight: 600;
color: #333;
vertical-align: middle;
}
.widget-summary .summary .info span {
vertical-align: middle;
}
.text-primary {
color: #0088cc !important;
}
.widget-summary .summary-footer {
padding: 5px 0 0;
border-top: 1px dotted #ddd;
text-align: right;
}
.text-uppercase {
text-transform: uppercase;
}
/*.panel-featured-tertiary {
border-color: #2BAAB1;
}
.panel-featured-quartenary {
border-color: #734BA9;
}*/
/*.panel-featured-left {
border-left: 3px solid #33353F;
}*/
.module-subscriptions {
display: block;
margin-top: 10px;
margin-left: 15px;
margin-right: 9px;
padding-bottom: 10px;
border-bottom: solid 3px;
}
.dropdown-menu.multi-column {
width: 1036px;
}
.dropdown-menu.multi-column .dropdown-menu {
display: block !important;
position: static !important;
margin: 0 !important;
border: none !important;
box-shadow: none !important;
min-width: 100px;
}
JSFiddle link: https://jsfiddle.net/jaeedxpw/2/
Thanks in advance,
Eli Van Rock

We Keep Coding

JavaScript is the programming language of the Web.

Why is a jQuery subtraction outputting NaN? - javascript

i want to add that. Note: Only the first number in the string is returned! Note: Leading and trailing spaces are allowed. Note: If the first character cannot be converted to a number, parseFloat() returns NaN. you can use such like this. $('#total-items').val().replace('$','')

Related

I'm trying to do a Todo List App and when i pressed the add task its not adding below

How to reset a placeholder whenever you exit a search box event?

Need to set validation only 6 levels can be added of sub nodes in tree

Why won't these boxes appear in alignment?

How to set multicolumn dropdown as such each drop down will use the same drop down frame?

Categories

Resources