We Keep Coding

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>

horizontal stepper form breaking

I have a problem in the layout of a horizontal stepper form that I made, basically when I press TAB on any of the steps, the focus ends up going to the next tab that should not be visible and bugs the form, the same happens when I press the down key that would be the equivalent and see the history in an input.
const $ = document.querySelector.bind(document),
$$ = document.querySelectorAll.bind(document)
const tabs = [ ...$$('.tab') ]
$('.total-steps').innerText = tabs.length
let currentTab = 0
showTab(currentTab)
function showTab(n) {
tabs[n].classList.remove('hidden')
tabs[n].classList.add('with-dalay')
/* const currentInput = dec => tabs[n - dec].querySelector('input:not([type=number])')
if (currentInput(0)) {
console.log(currentInput(0))
if (tabs[n - 1] && currentInput(1) && n >= 1) currentInput(1).blur()
currentInput(0).focus()
} */
if (n == 0) {
$('#prevBtn').disabled = true
$('#prevBtn').innerText = ''
}
else {
$('#prevBtn').disabled = false
$('#prevBtn').innerText = 'voltar'
}
if (n == tabs.length - 1) {
$('#nextBtn').innerText = 'concluir'
}
else {
$('#nextBtn').innerText = 'próximo'
}
}
function nextPrev(n, e) {
if (tabs.length - 1 !== n) e.preventDefault()
const currentStep = currentTab + n
if (currentStep <= tabs.length)
$('.current-step').innerText = currentStep + 1
if (n == 1 && validateForm()) return
tabs[currentTab].classList.add('hidden')
tabs[currentTab].classList.remove('with-dalay')
currentTab = currentStep
if (currentTab >= tabs.length) {
$('#regForm').submit()
return false
}
showTab(currentTab)
}
function validateForm() {
const inputs = [ ...tabs[currentTab].querySelectorAll('input') ]
let valid = false
inputs.forEach(input => {
input.classList.remove('invalid')
input.classList.add('valid')
if (!input.value) {
input.classList.add('invalid')
input.classList.remove('valid')
valid = true
}
})
return valid
}
$('#prevBtn').addEventListener('click', e => nextPrev(-1, e))
$('#nextBtn').addEventListener('click', e => nextPrev(1, e))
;[ ...$$('input') ].forEach(input => {
input.addEventListener('change', ({ target }) =>
target.classList.add('valid')
)
})
$('.add').addEventListener('click', () => {
const product = document.createRange().createContextualFragment($('.product').outerHTML)
// const product = new DOMParser().parseFromString($('.product').outerHTML, 'text/html').body.firstChild
$('.loading-wrapper').classList.remove('loading-hide')
$('#nextBtn').disabled = true
setTimeout(() => {
$('.loading-wrapper').classList.add('loading-hide')
$('.products-list').insertBefore(product, $('.products-list').childNodes[2])
$('#nextBtn').disabled = false
}, 3000)
})
function removeItem({ parentNode }) {
const willRemoved = confirm('Tem certeza que deseja remover este item?')
if (willRemoved) $('.products-list').removeChild(parentNode.parentNode)
}
const amount = $('.amount')
function removeAmount({ parentNode }) {
const input = parentNode.children[1]
if (input.value > 1) {
input.value = input.value - 1
}
}
function addAmount({ parentNode }) {
const input = parentNode.children[1]
input.value = parseInt(input.value) + 1
}
* {
box-sizing: border-box;
outline: 0;
}
button:hover,
button:active,
button:focus {
outline: 0;
}
h1 {
margin: 0;
padding: 40px 0 20px;
}
body {
font-family: 'Roboto', sans-serif;
background-color: #5b5b5b;
color: #323232;
margin: 0;
padding: 0;
}
.App {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
height: 100vh;
width: 100vw;
}
.App:before {
content: '';
background-image: url('https://www.jotform.com/uploads/anil/form_files/bryan-minear-315773.901.jpg');
filter: sepia(65%) brightness(.5);
width: 100vw;
height: 100vh;
overflow: hidden;
background-size: cover;
position: fixed;
background-repeat: no-repeat;
background-position: center center;
pointer-events: none;
z-index: 0;
}
#regForm {
width: 57%;
min-width: 250px;
border-radius: 6px;
overflow: hidden;
z-index: 1;
}
.tabs-wrapper {
display: flex;
position: relative;
overflow: hidden;
background-color: #fff;
}
h1 {
text-align: center;
background-color: #fff;
}
input {
padding: 10px;
width: 100%;
font-size: 17px;
background-color: transparent;
border: 1px solid #aaaaaa;
border-radius: 3px;
transition: border .2s linear;
z-index: 1;
}
input:focus,
input:active {
border-color: #4a85ef;
box-shadow: 0 0 0 2px rgba(72, 130, 239, .3);
}
input.valid {
border-color: #00af00;
box-shadow: 0 0 0 2px rgba(0, 175, 0, .3);
}
/* Mark input boxes that gets an error on validation: */
input.invalid {
border-color: #e34343;
box-shadow: 0 0 0 2px rgba(227, 68, 68, .3);
}
/* Hide all steps by default: */
.tab {
display: flex;
flex-direction: column;
padding: 40px 0;
background-color: #fff;
width: 100%;
transition: all 0.6s;
opacity: 1;
}
.tab > * {
padding: 0 40px;
}
.long-tab {
overflow-y: auto;
/* margin-bottom: 25px; */
max-height: 85vh;
}
.tab p {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.tab p input + input {
margin-left: 2%;
}
.hidden {
position: absolute;
transform: translateX(100%);
opacity: 0;
}
.with-dalay {
transition-delay: 0.5s;
}
.buttons-wrapper {
display: flex;
width: 100%;
background-color: #fff;
}
button {
background-color: #ffff00;
color: #000;
border: none;
padding: 15px 40px;
font-size: 1.2em;
font-weight: 400;
letter-spacing: 0.13em;
text-transform: uppercase;
width: 100%;
cursor: pointer;
transition: all .2s linear;
}
button:hover {
background-color: #d9d900;
color: white;
}
button:disabled {
background-color: #dfdf00;
}
#prevBtn {
text-align: left;
}
#nextBtn {
text-align: right;
}
.steps-wrapper {
text-align: center;
color: #d2d2d2;
z-index: 1;
font-size: 16px;
background-color: rgba(0, 0, 0, .35);
padding: 10px;
border-radius: 4px;
min-width: 130px;
letter-spacing: 1px;
}
.steps-wrapper span {
color: #fff;
opacity: 0.7;
}
.steps-wrapper span:first-child {
opacity: 1;
}
.question-wrapper {
margin: 10px 0 0;
}
.question-wrapper .question {
font-size: 15px;
}
.question-wrapper .required {
color: #e34343;
font-size: 1em;
}
.question-description {
font-size: 12px;
color: #7c7c7c;
}
.warning {
font-size: 10pt;
}
.warning p {
line-height: 1.5em;
}
.warning ol {
padding: 0 40px 0 53px;
}
.warning ol li {
text-align: justify;
line-height: 1.5em;
}
.warning ol li:first-child {
margin-bottom: 25px;
}
.warning ol li span {
text-decoration: underline;
}
.flex-container input.short-input {
width: 30%;
}
.add {
font-size: 26px;
width: 35px;
height: 35px;
text-align: center;
border: 1px solid gainsboro;
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
margin-left: 10px;
cursor: pointer;
transition: all .2s ease;
}
.add:hover {
background-color: gainsboro;
}
.place-holder {
position: absolute;
font-size: 14px;
left: 52px;
color: #9f9f9f;
transition: all .5s ease;
top: 14px;
}
input[name=aLink]:focus + span.place-holder {
top: 50px;
font-size: 12px;
}
input[name="aLink"]:not(:placeholder-shown) + span.place-holder {
top: 50px;
font-size: 12px;
}
#cart {
padding: 1.5em 0;
}
div.cart-header {
display: flex;
padding-bottom: 10px;
border-bottom: 2px solid gainsboro;
flex-wrap: wrap;
}
.cart-header span:first-child {
flex: 1 300px;
}
.cart-header span:first-child span {
color: #16b451;
font-size: 1.1em;
}
.cart-header span:last-child {
font-size: small;
text-align: justify;
font-style: italic;
flex: 1 55%;
}
.products-list {
overflow-y: auto;
max-height: 45vh;
border-bottom: 1px solid gainsboro;
}
.product {
width: 100%;
overflow-y: hidden;
padding: 20px 0;
border-bottom: 1px solid #e6e9ed;
display: block;
transition: 0.3s;
}
.product:last-child {
border-bottom: none;
}
.product .product-header {
display: flex;
align-items: center;
justify-content: center;
}
.product .remove {
color: tomato;
cursor: pointer;
font-size: 26px;
margin-left: 10px;
transition: color .2s linear;
}
.product .remove:hover {
color: #ce2000;
}
.products-list .description {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
font-size: 13px;
}
.products-list img {
width: 100px;
}
.products-list .description > div:last-child {
display: flex;
flex-direction: column;
}
.description > div:nth-child(2) {
display: flex;
flex-direction: column;
}
.description .remove:hover {
color: tomato;
}
.products-list .description .dolar-price {
font-weight: bold;
}
.products-list .description .from-amazon {
color: gray;
text-decoration: line-through;
}
.products-list .description .from-glin {
color: #16b451;
font-size: 1.2em;
font-weight: bold;
}
.products-list .description .economy {
color: #16b451;
}
.products-list .description .shippment {
margin-top: 15px;
}
.products-list .description .amount-wrapper {
display: flex;
align-items: center;
margin: 5px 0;
}
.products-list .description .amount-controls {
display: flex;
flex-direction: row;
justify-content: center;
margin-left: 10px;
align-items: center;
border: 1px solid #ccc;
}
.products-list .description .controls {
padding: 0 10px;
cursor: pointer;
}
.products-list .description .amount {
width: 45px;
font-size: 13px;
-moz-appearance: textfield;
border-radius: 0;
text-align: center;
border: none;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 5px 10px;
}
.products-list .description .arrives {
font-weight: bold;
}
.loading {
margin: 30px auto 0;
border: 5px solid #d9d9d9;
border-radius: 50%;
border-top: 5px solid yellow;
width: 100px;
height: 100px;
animation: spin 2s linear infinite;
}
.loading-wrapper p {
color: #959595;
}
.loading-hide {
display: none;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#media (max-width: 575.98px) {
.tab > * {
padding: 0 20px;
}
.place-holder {
top: 10px;
left: 32px;
}
input[name=aLink]:focus + span.place-holder {
top: 45px;
}
input[name=aLink]:not(:placeholder-shown) + span.place-holder {
top: 45px;
}
button {
font-size: 14px;
}
.flex-container input {
font-size: 12px;
}
}
#media (max-width: 855px) {
#regForm {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 100%;
border-radius: 0;
background-color: #fff;
}
.products-list {
max-height: 75vh;
height: 55vh;
}
.steps-wrapper {
width: 100%;
margin-top: 0;
background-color: #5b5b5b;
}
}
#media (max-width: 487px) {
input {
font-size: 12px;
}
}
#media (max-width: 414px) {
#regForm {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 100%;
border-radius: 0;
background-color: #fff;
}
.tab p:not(.flex-container) {
flex-wrap: wrap;
}
.tab p:not(.flex-container) input[name=email] {
margin: 10px 0;
}
.loading-wrapper p {
font-size: 15px
}
.steps-wrapper {
width: 100%;
margin-top: 0;
background-color: #5b5b5b;
}
}
<div class="App">
<form id="regForm">
<div class="tabs-wrapper">
<div class="tab">
<label class="question-wrapper">
<span class="question">Como você gostaria de ser chamado(a)?</span>
<span class="required"> *</span>
</label>
<span class="question-description">Assim fica mais legal conversarmos :)</span>
<p><input placeholder="Seu nome" name="fname"></p>
</div>
<div class="tab hidden with-dalay">
<label class="question-wrapper">
<span class="question">Legal, {fulano}. E qual o seu e-mail para contato?</span>
<span class="required"> *</span>
</label>
<span class="question-description">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus, officia.</span>
<p>
<input placeholder="e-mail" name="email">
<input placeholder="confirmar e-mail" name="email">
</p>
</div>
<div class="tab hidden with-dalay">
<label class="question-wrapper">
<span class="question">Lorem ipsum dolor sit amet.</span>
</label><span class="question-description">
Lorem ipsum dolor sit.
</span>
<p><input placeholder="lorem ipsum" name="cupomCode"></p>
</div>
</div>
<div class="buttons-wrapper">
<button type="button" class="btn" id="prevBtn">voltar</button>
<button type="submit" class="btn" id="nextBtn">próximo</button>
</div>
</form>
</div>

You could add keydown event listener for document and use event.preventDefault() to stop tab event and focus on desired element:
document.addEventListener("keydown", (event) => {
console.log($(":focus"), event.which);
if (event.target.name == "fname" && event.keyCode == 9) {
event.preventDefault();
$("#nextBtn").focus();
}
});
const $ = document.querySelector.bind(document),
$$ = document.querySelectorAll.bind(document);
const tabs = [...$$('.tab')];
//$('.total-steps').innerText = tabs.length;
let currentTab = 0;
document.addEventListener("keydown", (event) => {
console.log($(":focus"), event.which);
if (event.target.name == "fname" && event.keyCode == 9) {
event.preventDefault();
$("#nextBtn").focus();
}
});
showTab(currentTab);
function showTab(n) {
tabs[n].classList.remove('hidden')
tabs[n].classList.add('with-dalay')
/* const currentInput = dec => tabs[n - dec].querySelector('input:not([type=number])')
if (currentInput(0)) {
console.log(currentInput(0))
if (tabs[n - 1] && currentInput(1) && n >= 1) currentInput(1).blur()
currentInput(0).focus()
} */
if (n == 0) {
$('#prevBtn').disabled = true
$('#prevBtn').innerText = ''
} else {
$('#prevBtn').disabled = false
$('#prevBtn').innerText = 'voltar'
}
if (n == tabs.length - 1) {
$('#nextBtn').innerText = 'concluir'
} else {
$('#nextBtn').innerText = 'próximo'
}
}
function nextPrev(n, e) {
if (tabs.length - 1 !== n) e.preventDefault()
const currentStep = currentTab + n
if (currentStep <= tabs.length)
$('.current-step').innerText = currentStep + 1
if (n == 1 && validateForm()) return
tabs[currentTab].classList.add('hidden')
tabs[currentTab].classList.remove('with-dalay')
currentTab = currentStep
if (currentTab >= tabs.length) {
$('#regForm').submit()
return false
}
showTab(currentTab)
}
function validateForm() {
const inputs = [...tabs[currentTab].querySelectorAll('input')]
let valid = false
inputs.forEach(input => {
input.classList.remove('invalid')
input.classList.add('valid')
if (!input.value) {
input.classList.add('invalid')
input.classList.remove('valid')
valid = true
}
})
return valid
}
$('#prevBtn').addEventListener('click', e => nextPrev(-1, e))
$('#nextBtn').addEventListener('click', e => nextPrev(1, e));
[...$$('input')].forEach(input => {
input.addEventListener('change', ({
target
}) =>
target.classList.add('valid')
)
})
/*$('.add').addEventListener('click', () => {
const product = document.createRange().createContextualFragment($('.product').outerHTML)
// const product = new DOMParser().parseFromString($('.product').outerHTML, 'text/html').body.firstChild
$('.loading-wrapper').classList.remove('loading-hide')
$('#nextBtn').disabled = true
setTimeout(() => {
$('.loading-wrapper').classList.add('loading-hide')
$('.products-list').insertBefore(product, $('.products-list').childNodes[2])
$('#nextBtn').disabled = false
}, 3000)
});*/
function removeItem({
parentNode
}) {
const willRemoved = confirm('Tem certeza que deseja remover este item?')
if (willRemoved) $('.products-list').removeChild(parentNode.parentNode)
}
const amount = $('.amount')
function removeAmount({
parentNode
}) {
const input = parentNode.children[1]
if (input.value > 1) {
input.value = input.value - 1
}
}
function addAmount({
parentNode
}) {
const input = parentNode.children[1]
input.value = parseInt(input.value) + 1
}
* {
box-sizing: border-box;
outline: 0;
}
button:hover,
button:active,
button:focus {
outline: 0;
}
h1 {
margin: 0;
padding: 40px 0 20px;
}
body {
font-family: 'Roboto', sans-serif;
background-color: #5b5b5b;
color: #323232;
margin: 0;
padding: 0;
}
.App {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
height: 100vh;
width: 100vw;
}
.App:before {
content: '';
background-image: url('https://www.jotform.com/uploads/anil/form_files/bryan-minear-315773.901.jpg');
filter: sepia(65%) brightness(.5);
width: 100vw;
height: 100vh;
overflow: hidden;
background-size: cover;
position: fixed;
background-repeat: no-repeat;
background-position: center center;
pointer-events: none;
z-index: 0;
}
#regForm {
width: 57%;
min-width: 250px;
border-radius: 6px;
overflow: hidden;
z-index: 1;
}
.tabs-wrapper {
display: flex;
position: relative;
overflow: hidden;
background-color: #fff;
}
h1 {
text-align: center;
background-color: #fff;
}
input {
padding: 10px;
width: 100%;
font-size: 17px;
background-color: transparent;
border: 1px solid #aaaaaa;
border-radius: 3px;
transition: border .2s linear;
z-index: 1;
}
input:focus,
input:active {
border-color: #4a85ef;
box-shadow: 0 0 0 2px rgba(72, 130, 239, .3);
}
input.valid {
border-color: #00af00;
box-shadow: 0 0 0 2px rgba(0, 175, 0, .3);
}
/* Mark input boxes that gets an error on validation: */
input.invalid {
border-color: #e34343;
box-shadow: 0 0 0 2px rgba(227, 68, 68, .3);
}
/* Hide all steps by default: */
.tab {
display: flex;
flex-direction: column;
padding: 40px 0;
background-color: #fff;
width: 100%;
transition: all 0.6s;
opacity: 1;
}
.tab>* {
padding: 0 40px;
}
.long-tab {
overflow-y: auto;
/* margin-bottom: 25px; */
max-height: 85vh;
}
.tab p {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.tab p input+input {
margin-left: 2%;
}
.hidden {
position: absolute;
transform: translateX(100%);
opacity: 0;
}
.with-dalay {
transition-delay: 0.5s;
}
.buttons-wrapper {
display: flex;
width: 100%;
background-color: #fff;
}
button {
background-color: #ffff00;
color: #000;
border: none;
padding: 15px 40px;
font-size: 1.2em;
font-weight: 400;
letter-spacing: 0.13em;
text-transform: uppercase;
width: 100%;
cursor: pointer;
transition: all .2s linear;
}
button:hover {
background-color: #d9d900;
color: white;
}
button:disabled {
background-color: #dfdf00;
}
#prevBtn {
text-align: left;
}
#nextBtn {
text-align: right;
}
.steps-wrapper {
text-align: center;
color: #d2d2d2;
z-index: 1;
font-size: 16px;
background-color: rgba(0, 0, 0, .35);
padding: 10px;
border-radius: 4px;
min-width: 130px;
letter-spacing: 1px;
}
.steps-wrapper span {
color: #fff;
opacity: 0.7;
}
.steps-wrapper span:first-child {
opacity: 1;
}
.question-wrapper {
margin: 10px 0 0;
}
.question-wrapper .question {
font-size: 15px;
}
.question-wrapper .required {
color: #e34343;
font-size: 1em;
}
.question-description {
font-size: 12px;
color: #7c7c7c;
}
.warning {
font-size: 10pt;
}
.warning p {
line-height: 1.5em;
}
.warning ol {
padding: 0 40px 0 53px;
}
.warning ol li {
text-align: justify;
line-height: 1.5em;
}
.warning ol li:first-child {
margin-bottom: 25px;
}
.warning ol li span {
text-decoration: underline;
}
.flex-container input.short-input {
width: 30%;
}
.add {
font-size: 26px;
width: 35px;
height: 35px;
text-align: center;
border: 1px solid gainsboro;
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
margin-left: 10px;
cursor: pointer;
transition: all .2s ease;
}
.add:hover {
background-color: gainsboro;
}
.place-holder {
position: absolute;
font-size: 14px;
left: 52px;
color: #9f9f9f;
transition: all .5s ease;
top: 14px;
}
input[name=aLink]:focus+span.place-holder {
top: 50px;
font-size: 12px;
}
input[name="aLink"]:not(:placeholder-shown)+span.place-holder {
top: 50px;
font-size: 12px;
}
#cart {
padding: 1.5em 0;
}
div.cart-header {
display: flex;
padding-bottom: 10px;
border-bottom: 2px solid gainsboro;
flex-wrap: wrap;
}
.cart-header span:first-child {
flex: 1 300px;
}
.cart-header span:first-child span {
color: #16b451;
font-size: 1.1em;
}
.cart-header span:last-child {
font-size: small;
text-align: justify;
font-style: italic;
flex: 1 55%;
}
.products-list {
overflow-y: auto;
max-height: 45vh;
border-bottom: 1px solid gainsboro;
}
.product {
width: 100%;
overflow-y: hidden;
padding: 20px 0;
border-bottom: 1px solid #e6e9ed;
display: block;
transition: 0.3s;
}
.product:last-child {
border-bottom: none;
}
.product .product-header {
display: flex;
align-items: center;
justify-content: center;
}
.product .remove {
color: tomato;
cursor: pointer;
font-size: 26px;
margin-left: 10px;
transition: color .2s linear;
}
.product .remove:hover {
color: #ce2000;
}
.products-list .description {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
font-size: 13px;
}
.products-list img {
width: 100px;
}
.products-list .description>div:last-child {
display: flex;
flex-direction: column;
}
.description>div:nth-child(2) {
display: flex;
flex-direction: column;
}
.description .remove:hover {
color: tomato;
}
.products-list .description .dolar-price {
font-weight: bold;
}
.products-list .description .from-amazon {
color: gray;
text-decoration: line-through;
}
.products-list .description .from-glin {
color: #16b451;
font-size: 1.2em;
font-weight: bold;
}
.products-list .description .economy {
color: #16b451;
}
.products-list .description .shippment {
margin-top: 15px;
}
.products-list .description .amount-wrapper {
display: flex;
align-items: center;
margin: 5px 0;
}
.products-list .description .amount-controls {
display: flex;
flex-direction: row;
justify-content: center;
margin-left: 10px;
align-items: center;
border: 1px solid #ccc;
}
.products-list .description .controls {
padding: 0 10px;
cursor: pointer;
}
.products-list .description .amount {
width: 45px;
font-size: 13px;
-moz-appearance: textfield;
border-radius: 0;
text-align: center;
border: none;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 5px 10px;
}
.products-list .description .arrives {
font-weight: bold;
}
.loading {
margin: 30px auto 0;
border: 5px solid #d9d9d9;
border-radius: 50%;
border-top: 5px solid yellow;
width: 100px;
height: 100px;
animation: spin 2s linear infinite;
}
.loading-wrapper p {
color: #959595;
}
.loading-hide {
display: none;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#media (max-width: 575.98px) {
.tab>* {
padding: 0 20px;
}
.place-holder {
top: 10px;
left: 32px;
}
input[name=aLink]:focus+span.place-holder {
top: 45px;
}
input[name=aLink]:not(:placeholder-shown)+span.place-holder {
top: 45px;
}
button {
font-size: 14px;
}
.flex-container input {
font-size: 12px;
}
}
#media (max-width: 855px) {
#regForm {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 100%;
border-radius: 0;
background-color: #fff;
}
.products-list {
max-height: 75vh;
height: 55vh;
}
.steps-wrapper {
width: 100%;
margin-top: 0;
background-color: #5b5b5b;
}
}
#media (max-width: 487px) {
input {
font-size: 12px;
}
}
#media (max-width: 414px) {
#regForm {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 100%;
border-radius: 0;
background-color: #fff;
}
.tab p:not(.flex-container) {
flex-wrap: wrap;
}
.tab p:not(.flex-container) input[name=email] {
margin: 10px 0;
}
.loading-wrapper p {
font-size: 15px
}
.steps-wrapper {
width: 100%;
margin-top: 0;
background-color: #5b5b5b;
}
}
<div class="App">
<form id="regForm">
<div class="tabs-wrapper">
<div class="tab">
<label class="question-wrapper">
<span class="question">Como você gostaria de ser chamado(a)?</span>
<span class="required"> *</span>
</label>
<span class="question-description">Assim fica mais legal conversarmos :)</span>
<p><input placeholder="Seu nome" name="fname"></p>
</div>
<div class="tab hidden with-dalay">
<label class="question-wrapper">
<span class="question">Legal, {fulano}. E qual o seu e-mail para contato?</span>
<span class="required"> *</span>
</label>
<span class="question-description">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus, officia.</span>
<p>
<input placeholder="e-mail" name="email">
<input placeholder="confirmar e-mail" name="email">
</p>
</div>
<div class="tab hidden with-dalay">
<label class="question-wrapper">
<span class="question">Lorem ipsum dolor sit amet.</span>
</label><span class="question-description">
Lorem ipsum dolor sit.
</span>
<p><input placeholder="lorem ipsum" name="cupomCode"></p>
</div>
</div>
<div class="buttons-wrapper">
<button type="button" class="btn" id="prevBtn">voltar</button>
<button type="submit" class="btn" id="nextBtn">próximo</button>
</div>
</form>
</div>

How to get the button to toggle between F and C?

I was able to get the temperature to switch between Fahrenheit and Celcius. However, I wasn't able to get the small ball/button to move back and forth between F and C.
$(document).ready(function() {
var mainCities = {
'San Francisco' : {
'region': 'California',
'country': "United States",
'lat': 37.7749300,
'lon': -122.4194200
},
'St. Louis': {
'region': 'Missouri',
'country': "United States",
'lat': 38.6272700,
'lon': -90.1978900
},
'Miami': {
'region': 'Florida',
'country': "United States",
'lat': 25.7742700,
'lon': -80.1936600
},
'Tokyo': {
'region': 'Tokyo',
'country': "Japan",
'lat': 35.689500,
'lon': 139.6917100
}
}
var currentLat;
var currentLong;
function getLocation() {
$.getJSON('http://ip-api.com/json/?callback=?', function(data) {
//var currentRegion = data.regionName;
var currentCity = data.city;
currentLat = data.lat;
currentLong = data.lon;
$("#cityname").text(currentCity);
getWeather();
});
}
function getWeather() {
$.getJSON('http://api.openweathermap.org/data/2.5/weather?lat=' + currentLat + '&lon=' + currentLong + '&units=imperial&APPID=e656b9ee098cf2341fcfdb365b96b4a8', function(json) {
var showfahrenheit = true;
var tempfahrenheit = Math.round(json.main.temp);
var temcelcius = Math.round((tempfahrenheit - 32) * 5/9);
$("#temp").html(tempfahrenheit);
$('#unit-switch').on('click', function() {
if (showfahrenheit === false) {
$("#temp").html(tempfahrenheit);
showfahrenheit = true;
} else {
$("#temp").html(temcelcius);
showfahrenheit = false;
}
$("#unit-toggle").toggleClass("toggle");
//$('#temp').toggleClass('toggle');
});
});
};
$(".cityarea").html(getLocation);
});
#import url('https://fonts.googleapis.com/css?family=Roboto:300,400');
body {
position: relative;
}
html,body{
height:100%;
}
.wrapper {
width: 100%;
height: 100%;
position: relative;
}
.container {
position: relative;
display: block;
margin: 0 auto;
width: 60%;
}
.header h1 {
text-align: center;
font-family: 'Roboto', sans-serif;
font-weight: normal;
}
.weatherbox {
text-align: center;
}
.cityarea h2 {
color: #000000;
}
.dropdown{
position: relative;
display: inline-block;
font-size: 16px;
color: #FFF;
}
input[type=checkbox]{
display: none;
}
label{
box-sizing: border-box;
display: inline-block;
width: 100%;
background-color: #57A0D4;
padding: 10px 20px;
cursor: pointer;
text-align: center;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
border-radius: 5px;
font-size: 20px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
label .fa-globe {
margin-right: 10px;
}
/* The ul will have display:none by default */
ul{
position: absolute;
list-style: none;
text-align: left;
width: 100%;
min-width: 160px;
z-index: 1;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
display: none;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
ul li{
/*padding: 15px;*/
background-color: #fff;
color: #4FB9A7;
margin-bottom: 1px;
cursor: pointer;
}
ul li a {
padding: 8px 20px;
color: inherit;
text-decoration: none;
display: block;
}
ul li a:hover{
background-color: #4FB9A7;
color: #FFF;
}
input[type=checkbox]:checked ~ label {
background-color: #3D88BD;
}
input[type=checkbox]:checked ~ ul {
display: block;
}
ul .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
.temperaturearea span#temp {
position: relative;
color: #000000;
font-size: 80px;
}
.temperaturearea #temp:after {
content: '';
position: absolute;
height: 10px;
width: 10px;
top: 16px;
right: -17px;
border: 3px solid #000000;
border-radius: 50%;
}
.weather > span {
position: relative;
font-size: 1.2rem;
}
.weather > span:before {
content: '';
position: absolute;
left: -10px;
top: 0px;
height: 3px;
width: 3px;
border: 2px solid #000;
border-radius: 50%;
}
.main-toggle span {
margin: 0 0 0 16px;
}
.main-toggle span:last-child {
margin-left: 11px;
}
.weather button {
background: #6bbf6b;
border: none;
border-radius: 30px;
outline: none;
width: 45px;
height: 20px;
margin: 5px 5px 0;
cursor: pointer;
position: relative;
transition: background .2s;
}
.weather button:active {
background: #67b567;
}
.weather #unit-toggle {
position: absolute;
display: inline-block;
left: -8px;
top: 2px;
width: 15px;
height: 15px;
background: #fff;
border-radius: 50%;
transition: left .2s;
}
.toggle {
left: 27px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container">
<div class="header"><h1>Local Weather</h1></div>
<div class="weatherbox">
<div class="cityarea">
<h2 id="cityname"></h2>
</div>
<div class="countryarea">
<h3 id="state"></h3>
<h3 id="country"></h3>
</div>
<!--<div class="dropdownlocation">
<div class="dropdown">
<input type="checkbox" id="checkbox-toggle">
<label for="checkbox-toggle"><i class="fa fa-globe" aria-hidden="true"></i><i class="fa fa-caret-down" aria-hidden="true"></i></label>
<ul>
<li>Current Location</li>
<li class="divider"></li>
<li>Main Cities</li>
</li>
</ul>
</div>
</div>-->
<div class="temperaturearea">
<div>
<span id="wicon"></span>
</div>
<div id="wdescription"></div>
<span id="temp"></span>
<div class="weather main-toggle"> <!-- Begin Unit Switch -->
<span>F</span>
<button id="unit-switch"><span id="unit-toggle"></span></button>
<span>C</span>
</div>
</div>
</div>
</div>
</div>
You can even check out my code at Codepen: http://codepen.io/kikibres/pen/EZMJZw
What did I miss? I'm trying to toggleClass using the class .toggle everytime I use #unit-switch to click on.

Your css selector is not specific enough
.weather #unit-toggle overrides .toggle's left property.
try #unit-toggle.toggle
codepen: http://codepen.io/anon/pen/XpvOvV

Your previous selector is more specific so to balance it you have to use this:
#unit-toggle.toggle {
left: 15px;
}

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

add width to an element with js

I want to add width to some element in my HTML with js but it doesn't work Properly.
I want do that to in responsive design its scrolling.
I try to do that with this code but it doesn't work.
in responsive design every things commix.
<script>
$(document).ready(function (e) {
$('.seat-ready').click(function (e) {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
});
});
setTimeout(function () {
$('.chairs .row').each(function () {
$(this).width(
($(this).children('a').length)
*
(
$(this).children('a').width() +
parseInt($(this).children('a').css("marginRight").replace('px', ''))
+ parseInt($(this).children('a').css("marginLeft").replace('px', ''))
)
+ $(this).attr('class').split('-')[1] * $(this).children('a').width()
);
$(this).width(
($(this).children('span').length)
*
(
$(this).children('span').width() +
parseInt($(this).children('span').css("marginRight").replace('px', ''))
+ parseInt($(this).children('span').css("marginLeft").replace('px', ''))
)
+ $(this).attr('class').split('-')[1] * $(this).children('span').width()
);
});
$('.chairs').each(function () {
var rowLength = $(this).children('.row').length;
for (var i = rowLength; i > rowLength - 12; i--) {
$(this).children('.row').eq(i).addClass('top');
}
});
}, 500);
</script>
.hall-wrap {
max-width: 100%;
width: auto;
}
.container-chairs {
clear: both;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.text-center {
display: block;
margin: 0 auto;
text-align: center;
}
.text-center #halls {
display: none;
}
.header-hall-sections {
font-family: 'Yekan';
line-height: 230%;
height: 220px;
font-size: 14px;
}
.header-hall-sections .header-hall-content {
position: relative;
line-height: 23px;
}
.header-hall-sections h2 {
color: #9f3a67;
margin-bottom: 10px;
}
.header-hall-sections .date, .header-hall-sections .time {
color: #9f3a67;
font-size: 17px;
margin-bottom: 5px;
}
.header-hall-sections .btn.cancel-all {
background: #dc3c3f;
border: none;
color: #fff;
float: left;
font-size: 14px;
height: 33px;
margin-top: 5px;
padding: 9px 25px 0;
transition: all 0.2s ease;
opacity: 0;
visibility: hidden;
}
.header-hall-sections .btn.cancel-all.show {
opacity: 1;
visibility: visible;
}
.header-hall-content .btn, .header-hall-content .btn + .btn {
position: absolute;
bottom: 0;
height: 31px;
padding: 7px 25px 0;
background: #e6e6e6;
}
.header-hall-content .btn + .btn {
margin-right: 103px;
background: #009a35;
border: 1px solid #328e4d;
color: #fff;
}
.thumb-concert {
margin-left: 15px;
float: right;
border: 1px solid #c8c8c6;
padding: 2px;
height: 176px;
width: 176px;
}
.header-hall {
width: 100%;
border-top: 1px solid #e3e3e3;
border-bottom: 1px solid #e3e3e3;
margin-top: 15px;
white-space: nowrap;
}
.header-hall:after {
content: "";
display: table;
clear: both;
}
.header-hall li {
padding: 5px 33px 5px 0;
float: right;
margin-left: 25px;
}
.header-hall li.seat-disabled {
background: url('http://tik8.com/assets/user/img/chairs.png') no-repeat 100% -82px;
}
.header-hall li.seat-reserved {
background: url('http://tik8.com/assets/user/img/chairs.png') no-repeat 100% -20px;
}
.header-hall li.seat-ready {
background: url('http://tik8.com/assets/user/img/chairs.png') no-repeat 100% -51px;
}
.header-hall li.seat-selected {
background: url('http://tik8.com/assets/user/img/chairs.png') no-repeat 100% -113px;
}
.header-hall li.seat-sold {
background: url('http://tik8.com/assets/user/img/chairs.png') no-repeat 100% 11px;
}
.ticket-filed {
line-height: 23px;
color: #333;
}
.ticket-filed label {
color: #111;
}
.chairs {
text-align: center;
padding: 30px 0;
margin: auto;
display: table;
}
.chairs .row {
clear: both;
display: block;
white-space: nowrap;
}
.chairs .row span {
float: right;
display: block;
position: relative;
margin: 4px;
width: 25px;
height: 21px;
color: rgba(0, 0, 0, 0.35);
cursor: default;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
padding: 0;
text-align: center;
}
.chairs .row a {
float: right;
display: block;
position: relative;
margin: 4px;
width: 25px;
height: 21px;
color: rgba(0, 0, 0, 0.35);
cursor: default;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
text-decoration:none;
padding: 0;
text-align: center;
}
.chairs .row a.seat-ready, .chairs .row a.active {
cursor: pointer;
}
.chairs .row span.seat-ready:hover, .chairs .row span.active:hover {
font-weight: bold;
}
.chairs .row span.seat-ready:hover .chairs-tooltip, .chairs .row span.active:hover .chairs-tooltip {
font-weight: normal;
opacity: 1;
visibility: visible;
transition: 0.2s;
}
.chairs .row span.row-number {
color: #444;
}
.row-name {
font-size: 13px !important;
font-weight: bold;
height: 23px;
position: absolute;
right: 10%;
text-align: center;
width: 40px;
}
.chairs .row span input[type="checkbox"] {
position: absolute;
width: 28px;
height: 21px;
left: 0;
top: 0;
opacity: 0;
cursor: pointer;
z-index: -1;
}
.chairs .row-number{
z-index: 10;
}
.chairs .seat-disabled {
background: url('http://tik8.com/assets/user/img/chair5.png') no-repeat 0 0;
color: #e6e6e6;
}
.chairs .seat-reserved {
background: url('http://tik8.com/assets/user/img/chair2.png') no-repeat 0 0;
color: #666666;
}
.chairs .seat-ready {
background: url('http://tik8.com/assets/user/img/chair4.png') no-repeat 0 0;
color: white !important;
}
.chairs .seat-ready.active {
background: url('http://tik8.com/assets/user/img/chair6.png') no-repeat 0 0;
color: white;
}
.chairs .seat-sold {
background: url('http://tik8.com/assets/user/img/chair1.png') no-repeat 0 0;
color: gray;
}
.seat-ready > input[type="text"] {
background-color: #6eab2b;
border: medium none;
color: white;
display: block;
height: 15px !important;
opacity: 1;
padding: 0;
text-align: center;
width: 20px !important;
z-index: 100px;
}
a.seat-ready {
background-color: #6eab2b;
border: medium none;
color: white;
display: block;
height: 15px;
opacity: 1;
padding: 0;
text-align: center;
/*width: 20px !important; */
z-index: 100px;
}
.edit-label{
padding: 0px;
}
.edit-label input[type="text"] {
background-color: white;
border: 1px solid black;
height: 15px !important;
opacity: 1;
padding: 0;
text-align: center;
width: 25px !important;
z-index: 100px;
color: black;
}
.seat-ready.active input[type="text"]{
background-color: transparent;
color: white;
}
a.seat-ready.active {
background-color: transparent;
color: white;
}
.left-1 {
padding-right: 16px;
}
.left-2 {
padding-right: 32px;
}
.left-3 {
padding-right: 48px;
}
.left-4 {
padding-right: 64px;
}
.left-5 {
padding-right: 80px;
}
.left-6 {
padding-right: 96px;
}
.left-7 {
padding-right: 112px;
}
.left-8 {
padding-right: 128px;
}
.left-9 {
padding-right: 144px;
}
.left-10 {
padding-right: 160px;
}
.left-11 {
padding-right: 176px;
}
.left-12 {
padding-right: 192px;
}
.chairs-tooltip {
position: absolute;
top: 135%;
visibility: hidden;
opacity: 0;
width: 190px;
left: -81px;
text-align: right;
text-shadow: none;
z-index: 99;
white-space: pre-line;
}
.top .chairs-tooltip {
top: auto;
bottom: 135%;
}
.top .chairs-tooltip:after, .top .chairs-tooltip:before {
bottom: auto;
top: 100%;
}
.top .chairs-tooltip:after {
border-bottom-color: transparent;
border-top-color: white;
}
.top .chairs-tooltip:before {
border-bottom-color: transparent;
border-top-color: #d9d9d9;
}
/*--------------------------------------------------*\
Nice Tooltip
\*--------------------------------------------------*/
#cvi_tooltip {
display: none;
position: absolute;
border: 1px solid #d9d9d9;
background-color: #fff;
border-radius: 5px;
padding: 5px 8px;
color: #000;
max-width: 300px;
min-width: 30px;
user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
}
#cvi_tooltip:after, #cvi_tooltip:before {
position: absolute;
pointer-events: none;
border: solid transparent;
top: 100%;
content: "";
height: 0;
width: 0;
z-index: 2;
}
#cvi_tooltip:after {
border-top-color: white;
border-width: 8px;
left: 50%;
margin-left: -8px;
}
#cvi_tooltip:before {
border-top-color: #d9d9d9;
border-width: 9px;
left: 50%;
margin-left: -9px;
}
.right-1{
padding-right:16px
}
.right-2{
padding-right:32px
}
.right-3{
padding-right:48px
}
.right-4{
padding-right:64px
}
.right-5{
padding-right:80px
}
.right-6{
padding-right:96px
}
.right-7{
padding-right:112px
}
.right-8{
padding-right:128px
}
.right-9{
padding-right:144px
}
.right-10{
padding-right:160px
}
.right-11{
padding-right:176px
}
.right-12{
padding-right:192px
}
.content {
position: relative;
}
.top {
position: static;
width: 100%;
}
<div class="hall-wrap">
<section class="container-chairs">
<section class="content">
<div class="chairs">
<div class="row right-2">
<span class="row-number">1</span>
1
2
3
4
5
6
7
8
<span class="offset"></span>
<span class="offset"></span>
<span class="row-number">1</span>
</div>
<div class="row right-1">
<span class="row-number">2</span>
1
2
3
4
5
6
7
8
9
<span class="offset"></span>
<span class="row-number">2</span>
</div>
<div class="row right-2">
<span class="row-number">3</span>
1
<span class="seat-sold">2</span>
<span class="seat-sold">3</span>
<span class="seat-sold">4</span>
<span class="seat-sold">5</span>
<span class="seat-sold">6</span>
7
8
<span class="offset"></span>
<span class="offset"></span>
<span class="row-number">3</span>
</div>
<div class="row right-2">
<span class="row-number">4</span>
1
2
3
4
<span class="seat-disabled">5</span>
<span class="seat-disabled">6</span>
<span class="seat-disabled">7</span>
<span class="seat-disabled">8</span>
<span class="seat-disabled">9</span>
<span class="offset"></span>
<span class="row-number">4</span>
</div>
<div class="row right-2">
<span class="row-number">5</span>
1
2
3
<span class="seat-disabled">4</span>
<span class="seat-disabled">5</span>
<span class="seat-disabled">6</span>
<span class="seat-disabled">7</span>
<span class="seat-disabled">8</span>
<span class="offset"></span>
<span class="offset"></span>
<span class="row-number">5</span>
</div>
<div class="row right-1">
<span class="row-number">6</span>
1
2
3
4
5
6
7
8
9
<span class="offset"></span>
<span class="row-number">6</span>
</div>
<div class="row right-2">
<span class="row-number">7</span>
1
2
3
4
5
6
7
8
<span class="offset"></span>
<span class="offset"></span>
<span class="row-number">7</span>
</div>
</section>
</section>
</div>

I think I'll take a guess what you are looking for. Maybe its something like this.
Note: The js is only for generating the html, which is very similar to what you used.
var HALL_DATA = [
/* 0=offset, 1=ready, 2=sold, 3=disabled */
[1,1,1,1,1,1,1,1,0,0], //1
[1,1,1,1,1,1,1,1,1,0], //2
[1,2,2,2,2,2,1,1,0,0], //3
[1,1,1,1,3,3,3,3,3,0], //4
[1,1,1,3,3,3,3,3,0,0], //5
[1,1,1,1,1,1,1,1,1,0], //6
[1,1,1,1,1,1,1,1,0,0] //7
];
var SEAT_CLASSES = ['offset', 'seat-ready', 'seat-sold', 'seat-disabled'];
var seatTemplate = '{SEAT_NR}';
var rowTemplate = '<div id="row-{ROW_NR}" class="row">{ROW_CONTENT}</div>';
function getHallContent() {
var html = '';
for(i=0; i<HALL_DATA.length; i++) {
html += rowTemplate.replace('{ROW_CONTENT}',getRowContent(i)).replace('{ROW_NR}',i+1);
console.log()
}
return html;
}
function getRowContent(theIndex) {
rowHtml = '';
rowData = HALL_DATA[theIndex];
for(j=0; j<rowData.length; j++) {
var seatClass = SEAT_CLASSES[rowData[j]],
seatNr = j+1; //cause j is index
rowHtml += seatTemplate.replace('{SEAT_CLASS}',seatClass).replace('{SEAT_NR}',seatNr);
}
return rowHtml;
}
$(document).ready(function() {
$('.hall-wrap').html(getHallContent());
});
.hall-wrap {
display:table;
width:100%;
max-width:200px;
}
.row {
display:table-row;
}
.row a {
display:table-cell;
color:#333;
text-decoration:none;
width:20px;
height:20px;
font-family:sans-serif;
text-align:center;
line-height:20px;
}
.seat-ready {
background: #89CC45;
}
.seat-sold {
background: #C93E41;
}
.seat-disabled {
background: #C2C5CF;
}
a.offset {
background:transparent;
color:transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hall-wrap"></div>