horizontal stepper form breaking - javascript

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>

Related

Why are my results displaying the way they are after I delete my typed input

I am trying to figure out why my list of results is looking the way it does after I clear my input field, It seems an extra list item with a comma as its value is being to my list of search results. When I clear my input field, I would like My search results to display the way they do when the user first opens the modal
let results = document.querySelector(".result-list")
let listItems = results.getElementsByTagName('li')
$('button').click(function() {
$('#school-popup-modal').attr('style', 'display:flex')
$('#select-buttons').attr('style', 'display:none')
})
$('#cancel-btn').click(function(e) {
$('#school-popup-modal').attr('style', 'display:none')
$('#select-buttons').attr('style', 'display:flex')
$('li').attr('style', 'display:flex')
$("#search-input").val("")
$("#undo").attr('style', 'display:none')
})
let dummyData = [{
name: 'gables',
id: 111
}, {
name: 'palmetto',
id: 222
}, {
name: 'southwest',
id: 333
}, {
name: 'killian',
id: 444
}]
dummyData.forEach((school) => {
let schoolName = school.name
$('.result-list').append(`
<ul><li id="list-item">${schoolName}</li><ul>
`)
})
$('li').click(function(e) {
let elem = e.target
$("#undo").attr('style', 'display:inline')
$("#search-input").val($(elem).text())
$('li').attr('style', 'display:none')
$('#school-popup-content').attr('style', 'padding-bottom:20px')
})
// $('#search-input').keyup(function(){
// let schoolsArr = []
// const searchString = $("#search-input").val().toLowerCase()
// dummyData.forEach((school)=>{
// schoolsArr.push(school.name)
// })
// for(let school of schoolsArr){
// if(school.includes(searchString)){
// results.innerHTML = `<ul><li>${school}</li></ul>`
// }
// else if(searchString === "") {
// console.log('empty')
// }
// }
// })
document.querySelector("#search-input").addEventListener("keyup", (e) => {
const searchString = e.target.value.toLowerCase()
const filteredSchools = dummyData.filter((school) => {
return school.name.toLowerCase().includes(searchString)
})
console.log(filteredSchools)
let filtered = filteredSchools.map((school) => {
return `
<ul>
<li>${school.name}</li>
</ul>
`
})
results.innerHTML = filtered
})
body {
margin: 0;
padding: 0;
font-family: 'itc-avant-garde-gothic-pro', sans-serif;
}
p {
font-size: 15px;
margin-right: 230px;
margin-top: 20px;
margin-bottom: 0px;
}
button {
text-align: center;
margin-bottom: 30px;
padding: 30px;
display: flex;
text-transform: uppercase;
letter-spacing: 4px;
padding: 16px 50px 14px;
border-radius: 2px;
min-width: 297px;
font-size: 14px;
text-align: center;
background: #000;
color: #fff;
line-height: normal;
border: 1px solid #000;
transition: all ease-in-out .3s;
-webkit-transition: all ease-in-out .3s;
-ms-transition: all ease-in-out .3s;
-o-transition: all ease-in-out .qs;
}
#popup-buttons {
margin-top: 70px;
margin-right: 30px;
display: flex;
padding-bottom: 5px;
}
#cancel-btn {
min-width: 217px;
font-size: 10px;
background-color: #ffffff;
color: #000000;
border: red;
}
a {
text-decoration: none;
color: #000000;
}
#cancel-btn: hover {
color: #000;
}
#popup-btn {
font-size: 10px;
min-width: 67px;
padding-top: 5px;
width: 180px;
}
#popup-btn a {
display: flex;
justify-content: space-between;
color: white;
}
button:hover {
color: #000;
background: transparent;
}
#school-popup-modal {
position: fixed;
z-index: 100000;
top: 0;
display: none;
justify-content: center;
background-color: rgba(0, 0, 0, 0.4);
width: 100vw;
height: 100vh;
}
#school-popup-content {
background-color: #ffffff;
border: 1px solid black;
border-radius: 16px;
display: flex;
flex-direction: column;
align-items: center;
max-width: 440px;
height: 400px;
padding: 14px;
width: 400px;
margin-top: 30px;
margin-bottom: 10px;
padding-bottom: 80px;
}
input {
width: 250px;
padding: 10px;
margin-top: 4px;
margin-left: 5px;
margin-bottom: 0px;
}
ul {
margin-left: 0px;
display: flex;
padding-left: 0px;
flex-direction: column;
justify-content: flex-start;
padding-right: 50px;
}
li {
display: flex;
justify-content: flex-start;
align-items: left;
margin-right: 20px;
font-size: 10px;
margin-top: 0px;
padding-top: 15px;
border-bottom: 1px solid #e8e8e8;
padding-right: 10px;
width: 253px;
padding-left: 10px;
padding-bottom: 10px;
}
li:hover {
background-color: #e8e8e8;
}
#search-results {
border: 1px solid #e1e1e1;
border-radius: 4px;
position: relative;
width: 272px;
margin-left: 5px;
}
input span {}
input[value=undo] {
color: grey;
text-align: right;
}
#undo {
position: absolute;
display: none;
top: 10;
color: grey;
font-size: 12px;
margin-top: 18px;
right: 25px;
}
.fas fa-check {
height: 5%;
}
#undo:hover {
color: black;
border-bottom: 1px solid black;
transition: .2s
}
#span-container {
position: relative;
overflow: hidden;
display: inline-block;
}
.popup-header {
font-family: 'itc-avant-garde-gothic-pro', sans-serif;
font-style: normal;
font-weight: bold;
font-size: 20px;
line-height: 28px;
align-items: left;
color: #000000;
margin-right: 120px;
}
#select-buttons {
display: flex;
flex-direction: column;
width: 5%;
}
#select-buttons button {}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="school-popup-modal">
<div id="school-popup-content">
<div class="popup-header">
<span>Find your School</span>
</div>
<p>School</p>
<form>
<div id="span-container">
<input autocomplete="off" id="search-input" placeholder='Start typing...' type="text">
<span id="undo">undo
<span style="font-size: 10px; color: green;">
<i class="fas fa-check"></i>
</span>
</span>
</div>
<div id="#search-results">
<div class="result-list">
</div>
</div>
</form>
<div id="popup-buttons">
<button id="cancel-btn">Cancel</button>
<button id="popup-btn">Start Testing</button>
</div>
</div>
</div>
<div id="select-buttons">
<button>Test for School</button>
<button>Test for work</button>
</div>
Your are putting an array in your HTML.
Try delete the line results.innerHTML = filtered from your JavaScript, and add:
// clear the results
results.innerHTML = '';
// insert the filtered results
filtered.forEach((filteredSchool) => {
results.innerHTML += filteredSchool;
});

HTML Template not rendering on screen

I'm currently building a Twitter clone for my portfolio using Web Component's template feature. However, my template isn't rendering on screen when the tweet button is clicked. I'm currently getting an error 'Uncaught TypeError: Cannot set property 'innerHTML' of null at HTMLButtonElement.postTweetButton.onclick'.
I have attempted moving the 'tweetText.innerHTML = tweetBoxInput;' line around to no avail. My tweetText variable's value is correct so I'm not sure why the property cannot set. I suspect it's to do with the template not importing correctly.
JS FIDDLE: https://jsfiddle.net/manoj1234/mty68qng/13/
Help greatly appreciated. Thanks.
JS:
window.onload = () => {
const createTweetContainer = document.getElementById("createTweetContainer");
const createTweetButton = document.getElementById("createTweetButton");
const backArrow = document.getElementById("backArrow");
const tweetBox = document.getElementById("tweetBox");
let tweetBoxInput;
const pinnedTweet = document.getElementById("pinnedTweet");
const tweetContainer = document.getElementById("tweetContainer");
const tweetSentContainer = document.getElementById("tweetSentContainer");
createTweetButton.onclick = () => {
createTweetContainer.style.display = "block";
tweetBox.value = "";
}
backArrow.onclick = () => {
createTweetContainer.style.display = "none";
}
postTweetButton.onclick = () => {
var tweetText = document.getElementById("tweetText");
console.log(tweetBox.value);
tweetBoxInput = tweetBox.value;
if (tweetBoxInput == "") {
console.log("please write tweet");
} else {
createTweetContainer.style.display = "none";
tweetSentContainer.style.display = "flex";
var tweetTemplate = document.getElementById("tweet-template");
var tweetInstance = document.importNode(tweetTemplate.content, true);
tweetText.innerHTML = tweetBoxInput;
pinnedTweet.after(tweetInstance);
/* Show Tweet Sent container*/
setTimeout(() => {
tweetSentContainer.style.height = "30px";
}, 1000);
setTimeout(() => {
tweetSentContainer.style.opacity = "1";
}, 1300);
/* End of Show Tweet Sent container */
/* Hide Tweet Sent container */
setTimeout(() => {
tweetSentContainer.style.opacity = "0";
}, 5000);
setTimeout(() => {
tweetSentContainer.style.height = "0";
tweetSentContainer.style.marginBottom = "0";
}, 5300);
setTimeout(() => {
tweetSentContainer.style.display = "none";
tweetSentContainer.style.marginBottom = "12px";
}, 8000);
/*End of Hide Tweet Sent container */
}
}
}
CSS:
* {
margin: 0;
padding: 0;
transition: ease 0.2s;
box-sizing: border-box;
-webkit-user-drag: none;
appearance: none;
outline: none;
font-family: 'Roboto';
}
body {
display: flex;
justify-content: center;
align-items: center;
}
body main {
width: 480px;
/*background-color: $blueBackground;
*/
}
.globalWrap {
padding-left: 25px;
padding-right: 25px;
}
.greyText {
color: #8997a2;
font-weight: normal;
}
.bodyText {
font-size: 15px;
}
#bottomFixed {
width: 100%;
position: fixed;
bottom: 0;
z-index: 4;
display: flex;
align-items: flex-end;
flex-direction: column;
}
#bottomFixed #createTweetButton {
width: 65px;
height: 65px;
font-size: 1.2em;
display: flex;
justify-content: center;
align-items: center;
color: white;
border-radius: 360px;
background-color: #1da1f2;
margin-bottom: 12px;
margin-right: 10px;
}
#bottomFixed #navBar {
height: 50px;
width: 100%;
background-color: #15202b;
border-top: solid 1px #38444d;
}
#bottomFixed #tweetSentContainer {
height: 30px;
height: 0px;
bottom: 20;
z-index: 6;
background-color: #1da1f2;
width: 80%;
display: flex;
align-self: center;
display: none;
opacity: 0;
justify-content: space-between;
align-items: center;
padding-left: 25px;
padding-right: 25px;
margin-bottom: 12px;
border-radius: 5px;
transition: ease-in-out 0.3s;
}
#coverImgContainer {
height: 125px;
width: 100%;
}
#coverImgContainer img {
height: 100%;
width: 100%;
position: relative;
object-fit: cover;
}
#userProfile {
width: 100%;
background-color: #15202b;
color: white;
}
#userProfile #userImgContainer {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
#userProfile #userImgContainer button {
margin-top: 12px;
background-color: transparent;
border: solid 1px #1da1f2;
padding-left: 12px;
padding-right: 12px;
padding-top: 6px;
padding-bottom: 6px;
border-radius: 25px;
color: #1da1f2;
font-size: 0.8em;
}
#userProfile #userImgContainer h2 {
font-size: 1em;
}
#userProfile #userImgContainer #profileImgName {
position: relative;
bottom: 25;
}
#userProfile #profilePicContainer {
height: 80px;
width: 80px;
}
#userProfile #profilePicContainer img {
width: 100%;
border-radius: 100%;
border: solid 4px #15202b;
}
#userProfile #profileNav {
display: flex;
justify-content: space-between;
margin-top: 16px;
}
#userProfile #profileNav h4 {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 12px;
font-size: 16px;
color: #8997a2;
}
#userProfile #profileNav h4:nth-child(1) {
color: #1da1f2;
border-bottom: solid 2px #1da1f2;
padding-left: 25px;
padding-right: 25px;
}
#userProfile #profileNav h4:nth-child(4) {
padding-right: 25px;
}
#userProfile #userInfo p:nth-child(1) {
position: relative;
bottom: 12.5;
}
#userProfile #userInfo p:nth-child(2) {
position: relative;
bottom: 6.25;
display: flex;
}
#userProfile #userInfo p:nth-child(3) {
font-weight: bold;
margin-top: 4px;
font-size: 14px;
}
#userProfile #userInfo span {
font-weight: normal;
}
#userProfile #userInfo span:nth-child(1) {
margin-right: 6px;
}
#userProfile #userInfo svg {
width: 5%;
color: #8997a2;
fill: #8997a2;
margin-right: 5px;
display: none;
}
#timelineContainer {
background-color: #12161e;
height: 100vh;
width: 100%;
}
.tweetContainer {
display: flex;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 25px;
padding-right: 25px;
width: 100%;
background-color: #15202b;
border-top: solid 1px #38444d;
transition: ease-in-out 0.3s;
}
.tweetContainer .tweetName {
color: white;
}
.tweetContainer .tweetText {
color: white;
margin-bottom: 12px;
}
.tweetContainer #tweetText {
color: white;
margin-bottom: 12px;
}
.tweetContainer .tweetImgContainer {
width: 100%;
height: 200px;
display: flex;
border-radius: 12px;
overflow: hidden;
/*Add this to main container so the Border-Radius also rounds child elements*/
border: solid 1px #38444d;
}
.tweetContainer .tweetImgContainer #col-1ImgContainer {
width: 100%;
overflow: hidden;
}
.tweetContainer .tweetImgContainer #col-1ImgContainer img {
height: 100%;
width: 100%;
object-fit: cover;
border-right: solid 5px #12161e;
}
.tweetContainer .tweetImgContainer .col-2ImgContainer {
height: 50%;
overflow: hidden;
}
.tweetContainer .tweetImgContainer .col-2ImgContainer:nth-child(1) {
border-bottom: solid 5px #12161e;
}
.tweetContainer .tweetImgContainer .col-2ImgContainer img {
transform: scale(1.5, 1.5);
height: 100%;
width: 100%;
object-fit: cover;
}
.tweetProfileImgContainer {
min-width: 55px;
min-height: 55px;
max-width: 55px;
max-height: 55px;
padding-right: 12px;
}
.tweetProfileImgContainer .tweetProfileImg {
width: 100%;
border-radius: 100%;
}
/* Create Tweet Page */
#createTweetContainer {
height: 100vh;
width: 100%;
background-color: #15202b;
position: fixed;
z-index: 5;
display: none;
}
#createTweetContainer img {
margin-right: 12px;
margin-left: 25px;
}
#createTweetContainer #createTweetHeader {
height: 45px;
border-bottom: solid 1px #38444d;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 25px;
padding-right: 25px;
}
#createTweetContainer #createTweetHeader i {
color: #1da1f2;
}
#createTweetContainer #createTweetHeader button {
background-color: #1da1f2;
border: solid 1px #1da1f2;
padding-left: 24px;
padding-right: 24px;
padding-top: 6px;
padding-bottom: 6px;
border-radius: 25px;
color: white;
font-size: 0.8em;
font-weight: bold;
opacity: 0.5;
}
#profileTweetBoxContainer {
display: flex;
justify-content: space-between;
padding-top: 12px;
}
textarea {
margin-left: 25px;
width: 100%;
resize: none;
background-color: #15202b;
border: 0;
color: white;
outline: none;
padding-right: 25px;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
position: relative;
top: 10;
caret-color: #1da1f2;
}
HTML:
<script src="https://kit.fontawesome.com/cd801faa65.js" crossorigin="anonymous"></script>
<div id="bottomFixed">
<div id="createTweetButton">
<i class="fas fa-feather"></i>
</div>
<div id="tweetSentContainer">
<p><i class="fas fa-check-circle"></i>Your Tweet was sent.</p>
<p>View</p>
</div>
<div id="navBar">
</div>
</div>
<section id="createTweetContainer">
<div id="createTweetHeader">
<i id="backArrow" class="fas fa-arrow-left"></i>
<button id="postTweetButton">Tweet</button>
</div>
<div id="profileTweetBoxContainer">
<figure class="tweetProfileImgContainer">
<img class="tweetProfileImg" src="https://cdn.pixabay.com/photo/2016/11/08/15/21/user-1808597_1280.png">
</figure>
<textarea id="tweetBox" cols="500" rows="10" placeholder="What's Happening?"></textarea>
</div>
</section>
<section id="timelineContainer">
<div id="pinnedTweet" class="tweetContainer">
<figure class="tweetProfileImgContainer">
<img class="tweetProfileImg" src="https://cdn.pixabay.com/photo/2016/11/08/15/21/user-1808597_1280.png">
</figure>
<div>
<h4 class="tweetName bodyText">Name <span class="greyText">#username</span></h4>
<p class="tweetText bodyText">Tweet Text Here</p>
<div class="tweetImgContainer">
<div id="col-1ImgContainer">
<img src="https://cdn.getyourguide.com/img/tour/5ac513c518061.jpeg/146.jpg">
</div>
</div>
</div>
</div>
<template id="tweet-template">
<div id="tweetContainer" class="tweetContainer">
<figure class="tweetProfileImgContainer">
<img class="tweetProfileImg" src="images/profilepicture.jpg">
</figure>
<div>
<h4 class="tweetName">Emmanuel</h4>
<p id="tweetText"></p>
</div>
</div>
</template>
</section>
I realised I was attempting to change the original template's p tag rather than the imported node. I added tweetInstance.querySelectorAll(‘p’)[0].innerHTML = tweetBoxInput; which changes the text of the new node.

Give user ablity to click on images and upload their own picture

I have a profile page consisting of two people. I want users to be able to click on one of two images and upload their own image to one of the image frames
textarea {
border: none;
overflow: auto;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
:root {
font-size: 10px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
sans-serif;
min-height: 100vh;
background-color: #fafafa;
color: #262626;
padding-bottom: 3rem;
}
img {
display: block;
}
.container {
width: 400px;
margin-left: auto;
margin-right: auto;
max-width: 93.5rem;
margin: 0 auto;
padding: 0 2rem;
}
.btn {
display: inline-block;
font: inherit;
background: none;
border: none;
color: inherit;
padding: 0;
cursor: pointer;
}
.btn:focus {
outline: 0.5rem auto #4d90fe;
}
.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
/* Profile Section */
.profile {
padding: 5rem 0;
}
.profile::after {
content: "";
display: block;
clear: both;
}
.profile-user-settings,
.profile-stats,
.profile-bio {
float: left;
width: calc(66.666% - 2rem);
}
.profile-user-settings {
margin-top: 1.1rem;
}
.profile-user-name {
display: inline-block;
font-size: 3.2rem;
font-weight: 300;
}
.profile-edit-btn {
font-size: 1.4rem;
line-height: 1.8;
border: 0.1rem solid #dbdbdb;
border-radius: 0.3rem;
padding: 0 2.4rem;
margin-left: 2rem;
}
.profile-stats li {
display: inline-block;
font-size: 1.6rem;
line-height: 1.5;
margin-right: 4rem;
cursor: pointer;
}
.profile-stats li:last-of-type {
margin-right: 0;
}
.profile-real-name,
.profile-stat-count,
.profile-edit-btn {
font-weight: 600;
}
/* Gallery Section */
.gallery {
display: flex;
flex-wrap: wrap;
margin: -1rem -1rem;
padding-bottom: 3rem;
}
.gallery-item {
position: relative;
flex: 1 0 22rem;
margin: 1rem;
color: #fff;
cursor: pointer;
}
.gallery-item:hover .gallery-item-info,
.gallery-item:focus .gallery-item-info {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.gallery-item-info {
display: none;
}
.gallery-item-info li {
display: inline-block;
font-size: 1.7rem;
font-weight: 600;
}
.gallery-item-likes {
margin-right: 2.2rem;
}
.gallery-item-type {
position: absolute;
top: 1rem;
right: 1rem;
font-size: 2.5rem;
text-shadow: 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.1);
}
.fa-clone,
.fa-comment {
transform: rotateY(180deg);
}
.gallery-image {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Media Query */
#media screen and (max-width: 40rem) {
.profile {
display: flex;
flex-wrap: wrap;
padding: 4rem 0;
}
.profile::after {
display: none;
}
.profile-image,
.profile-user-settings,
.profile-bio,
.profile-stats {
float: none;
width: auto;
}
.profile-user-settings {
flex-basis: calc(100% - 10.7rem);
display: flex;
flex-wrap: wrap;
margin-top: 1rem;
}
.profile-user-name {
font-size: 2.2rem;
}
.profile-edit-btn {
order: 1;
padding: 0;
text-align: center;
margin-top: 1rem;
}
.profile-edit-btn {
margin-left: 0;
}
.profile-bio {
font-size: 1.4rem;
margin-top: 1.5rem;
}
.profile-edit-btn,
.profile-bio,
.profile-stats {
flex-basis: 100%;
}
.profile-stats {
order: 1;
margin-top: 1.5rem;
}
.profile-stats ul {
display: flex;
text-align: center;
padding: 1.2rem 0;
border-top: 0.1rem solid #dadada;
border-bottom: 0.1rem solid #dadada;
}
.profile-stats li {
font-size: 1.4rem;
flex: 1;
margin: 0;
}
.profile-stat-count {
display: block;
}
}
/* Spinner Animation */
#keyframes loader {
to {
transform: rotate(360deg);
}
}
/*
#supports (display: grid) {
.profile {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: repeat(3, auto);
grid-column-gap: 3rem;
align-items: center;
}
.profile-image {
grid-row: 1 / -1;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
grid-gap: 2rem;
}
.profile-image,
.profile-user-settings,
.profile-stats,
.profile-bio,
.gallery-item,
.gallery {
width: auto;
margin: 0;
}
#media (max-width: 40rem) {
.profile {
grid-template-columns: auto 1fr;
grid-row-gap: 1.5rem;
}
.profile-image {
grid-row: 1 / 2;
}
.profile-user-settings {
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 1rem;
}
.profile-edit-btn,
.profile-stats,
.profile-bio {
grid-column: 1 / -1;
}
.profile-user-settings,
.profile-edit-btn,
.profile-settings-btn,
.profile-bio,
.profile-stats {
margin: 0;
}
}
}
#import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,800);
#import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
figure.snip0056 {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
overflow: hidden;
margin: 10px;
min-width: 380px;
max-width: 480px;
width: 100%;
background: #ffffff;
color: #000000;
}
figure.snip0056 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
figure.snip0056 > img {
width: 50%;
border-radius: 50%;
border: 4px solid #ffffff;
-webkit-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
-webkit-transform: scale(1.6);
transform: scale(1.6);
position: relative;
float: right;
right: -15%;
z-index: 1;
}
figure.snip0056 figcaption {
padding: 20px 30px 20px 20px;
position: absolute;
left: 0;
width: 50%;
}
figure.snip0056 figcaption h2,
figure.snip0056 figcaption p {
margin: 0;
text-align: left;
padding: 10px 0;
width: 100%;
}
figure.snip0056 figcaption h2 {
font-size: 1.3em;
font-weight: 300;
text-transform: uppercase;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
figure.snip0056 figcaption h2 span {
font-weight: 800;
}
figure.snip0056 figcaption p {
font-size: 0.9em;
opacity: 0.8;
}
figure.snip0056 figcaption .icons {
width: 100%;
text-align: left;
}
figure.snip0056 figcaption .icons i {
font-size: 26px;
padding: 5px;
top: 50%;
color: #000000;
}
figure.snip0056 figcaption a {
opacity: 0.3;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.snip0056 figcaption a:hover {
opacity: 0.8;
}
figure.snip0056 .position {
width: 100%;
text-align: left;
padding: 15px 30px;
font-size: 0.9em;
opacity: 1;
font-style: italic;
color: #ffffff;
background: #000000;
clear: both;
}
figure.snip0056.blue .position {
background: #20638f;
}
figure.snip0056.red .position {
background: #962d22;
}
figure.snip0056.yellow .position {
background: #bf6516;
}
figure.snip0056:hover > img,
figure.snip0056.hover > img {
right: -12%;
}
#import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
#social {
position: absolute;
right: 0;
bottom: 0;
margin: 20px 10px;
text-align: center;
}
.smGlobalBtn { /* global button class */
display: inline-block;
position: relative;
cursor: pointer;
width: 50px;
height: 50px;
border:2px solid #ddd; /* add border to the buttons */
box-shadow: 0 3px 3px #999;
padding: 0px;
text-decoration: none;
text-align: center;
color: #fff;
font-size: 25px;
font-weight: normal;
line-height: 2em;
border-radius: 27px;
-moz-border-radius:27px;
-webkit-border-radius:27px;
}
/* facebook button class*/
.facebookBtn{
background: #4060A5;
}
.facebookBtn:before{ /* use :before to add the relevant icons */
font-family: "FontAwesome";
content: "\f09a"; /* add facebook icon */
}
.facebookBtn:hover{
color: #4060A5;
background: #fff;
border-color: #4060A5; /* change the border color on mouse hover */
}
/* twitter button class*/
.twitterBtn{
background: #00ABE3;
}
.twitterBtn:before{
font-family: "FontAwesome";
content: "\f099"; /* add twitter icon */
}
.twitterBtn:hover{
color: #00ABE3;
background: #fff;
border-color: #00ABE3;
}
/* instagram button class*/
.instagramBtn{
background: #4169E1;
}
.instagramBtn:before{
font-family: "FontAwesome";
content: "\f16d"; /* add instagram icon */
}
.instagramBtn:hover{
color: #00FFFF;
background: #fff;
border-color: #4169E1;
}
<div class="container">
<div class="profile">
<form action="testing.php" method="post">
<textarea name="text2" rows="2" cols=0> Family Name</textarea><br>
</form>
<button class="btn profile-edit-btn">Edit Profile</button>
</div>
<!-- End of profile section -->
</div>
<!-- End of container -->
</header>
<main>
<div class="container">
<figure class="snip0056">
<figcaption>
<textarea name="text2" rows="2" cols=0>Name(john Doe)</textarea>
<textarea name="text3" rows="8" cols=20>Bio,Social media, Favorite Quote,A letter to your partner.</textarea>
</p>
</figcaption> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample8.jpg" alt="profilepic1" id="imgClickAndChange" onclick="changeImage()" />
<div class="position">
<textarea name="text4" rows="1" cols=9>Proffession</textarea>
</div>
</h3>
</figure>
<figure class="snip0056 yellow">
<figcaption>
<textarea name="text5" rows="2" cols=0>Name(jane Doe)</textarea>
<textarea name="text6" rows="8" cols=20>Bio,Social media, Favorite Quote,A letter to your partner.</textarea>
</figcaption><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample9.jpg" alt="sample9" />
<div class="position">
<textarea name="text4" rows="1" cols=9>Title</textarea>
</figure>
<div id="social">
<a class="facebookBtn smGlobalBtn" href="https://facebook.com/ngurah.dimas.94"></a>
<a class="twitterBtn smGlobalBtn" href="https://twitter.com/ngurahdimas"></a>
<a class="instagramBtn smGlobalBtn" href="http://instagram.com/ngurahdimas_"></a>
</div>
</main>
Use label and hide the upload button
<form id='form' method='post' action='/'>
<label for='img1'>
<input id='img1' type='file' style='display: none;' />
<img id='img1_preview' src='' />
</label>
<input type='submit' value='Update' />
</form>
When you click the img, which also click on the label it will automatically trigger the input file which will pop up the upload image window, click on the submit to submit the form. It is better to use JS to capture the image and upload it using ajax though, will be more responsive.
use this code to choose a image and onclick submit button you need to process it with your baground
<form >
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile"><br><br>
<input type="submit">
</form>

save user input to database using contenteditable

I have a profile page consisting of two people. I want users to be able to edit the name section, job title, and description and store the data into a database, but im running into issues doing that with "contenteditable" tag.
Also I would like for users to be able to click the pictures and have the ability to change the image and save to database.
:root {
font-size: 10px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
sans-serif;
min-height: 100vh;
background-color: #fafafa;
color: #262626;
padding-bottom: 3rem;
}
img {
display: block;
}
.container {
width: 400px;
margin-left: auto;
margin-right: auto;
max-width: 93.5rem;
margin: 0 auto;
padding: 0 2rem;
}
.btn {
display: inline-block;
font: inherit;
background: none;
border: none;
color: inherit;
padding: 0;
cursor: pointer;
}
.btn:focus {
outline: 0.5rem auto #4d90fe;
}
.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
/* Profile Section */
.profile {
padding: 5rem 0;
}
.profile::after {
content: "";
display: block;
clear: both;
}
.profile-user-settings,
.profile-stats,
.profile-bio {
float: left;
width: calc(66.666% - 2rem);
}
.profile-user-settings {
margin-top: 1.1rem;
}
.profile-user-name {
display: inline-block;
font-size: 3.2rem;
font-weight: 300;
}
.profile-edit-btn {
font-size: 1.4rem;
line-height: 1.8;
border: 0.1rem solid #dbdbdb;
border-radius: 0.3rem;
padding: 0 2.4rem;
margin-left: 2rem;
}
.profile-stats li {
display: inline-block;
font-size: 1.6rem;
line-height: 1.5;
margin-right: 4rem;
cursor: pointer;
}
.profile-stats li:last-of-type {
margin-right: 0;
}
.profile-real-name,
.profile-stat-count,
.profile-edit-btn {
font-weight: 600;
}
/* Gallery Section */
.gallery {
display: flex;
flex-wrap: wrap;
margin: -1rem -1rem;
padding-bottom: 3rem;
}
.gallery-item {
position: relative;
flex: 1 0 22rem;
margin: 1rem;
color: #fff;
cursor: pointer;
}
.gallery-item:hover .gallery-item-info,
.gallery-item:focus .gallery-item-info {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.gallery-item-info {
display: none;
}
.gallery-item-info li {
display: inline-block;
font-size: 1.7rem;
font-weight: 600;
}
.gallery-item-likes {
margin-right: 2.2rem;
}
.gallery-item-type {
position: absolute;
top: 1rem;
right: 1rem;
font-size: 2.5rem;
text-shadow: 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.1);
}
.fa-clone,
.fa-comment {
transform: rotateY(180deg);
}
.gallery-image {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Media Query */
#media screen and (max-width: 40rem) {
.profile {
display: flex;
flex-wrap: wrap;
padding: 4rem 0;
}
.profile::after {
display: none;
}
.profile-image,
.profile-user-settings,
.profile-bio,
.profile-stats {
float: none;
width: auto;
}
.profile-user-settings {
flex-basis: calc(100% - 10.7rem);
display: flex;
flex-wrap: wrap;
margin-top: 1rem;
}
.profile-user-name {
font-size: 2.2rem;
}
.profile-edit-btn {
order: 1;
padding: 0;
text-align: center;
margin-top: 1rem;
}
.profile-edit-btn {
margin-left: 0;
}
.profile-bio {
font-size: 1.4rem;
margin-top: 1.5rem;
}
.profile-edit-btn,
.profile-bio,
.profile-stats {
flex-basis: 100%;
}
.profile-stats {
order: 1;
margin-top: 1.5rem;
}
.profile-stats ul {
display: flex;
text-align: center;
padding: 1.2rem 0;
border-top: 0.1rem solid #dadada;
border-bottom: 0.1rem solid #dadada;
}
.profile-stats li {
font-size: 1.4rem;
flex: 1;
margin: 0;
}
.profile-stat-count {
display: block;
}
}
/* Spinner Animation */
#keyframes loader {
to {
transform: rotate(360deg);
}
}
/*
The following code will only run if your browser supports CSS grid.
Remove or comment-out the code block below to see how the browser will fall-back to flexbox & floated styling.
*/
#supports (display: grid) {
.profile {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: repeat(3, auto);
grid-column-gap: 3rem;
align-items: center;
}
.profile-image {
grid-row: 1 / -1;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
grid-gap: 2rem;
}
.profile-image,
.profile-user-settings,
.profile-stats,
.profile-bio,
.gallery-item,
.gallery {
width: auto;
margin: 0;
}
#media (max-width: 40rem) {
.profile {
grid-template-columns: auto 1fr;
grid-row-gap: 1.5rem;
}
.profile-image {
grid-row: 1 / 2;
}
.profile-user-settings {
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 1rem;
}
.profile-edit-btn,
.profile-stats,
.profile-bio {
grid-column: 1 / -1;
}
.profile-user-settings,
.profile-edit-btn,
.profile-settings-btn,
.profile-bio,
.profile-stats {
margin: 0;
}
}
}
#import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,800);
#import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
figure.snip0056 {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
overflow: hidden;
margin: 10px;
min-width: 380px;
max-width: 480px;
width: 100%;
background: #ffffff;
color: #000000;
}
figure.snip0056 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
figure.snip0056 > img {
width: 50%;
border-radius: 50%;
border: 4px solid #ffffff;
-webkit-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
-webkit-transform: scale(1.6);
transform: scale(1.6);
position: relative;
float: right;
right: -15%;
z-index: 1;
}
figure.snip0056 figcaption {
padding: 20px 30px 20px 20px;
position: absolute;
left: 0;
width: 50%;
}
figure.snip0056 figcaption h2,
figure.snip0056 figcaption p {
margin: 0;
text-align: left;
padding: 10px 0;
width: 100%;
}
figure.snip0056 figcaption h2 {
font-size: 1.3em;
font-weight: 300;
text-transform: uppercase;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
figure.snip0056 figcaption h2 span {
font-weight: 800;
}
figure.snip0056 figcaption p {
font-size: 0.9em;
opacity: 0.8;
}
figure.snip0056 figcaption .icons {
width: 100%;
text-align: left;
}
figure.snip0056 figcaption .icons i {
font-size: 26px;
padding: 5px;
top: 50%;
color: #000000;
}
figure.snip0056 figcaption a {
opacity: 0.3;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.snip0056 figcaption a:hover {
opacity: 0.8;
}
figure.snip0056 .position {
width: 100%;
text-align: left;
padding: 15px 30px;
font-size: 0.9em;
opacity: 1;
font-style: italic;
color: #ffffff;
background: #000000;
clear: both;
}
figure.snip0056.blue .position {
background: #20638f;
}
figure.snip0056.red .position {
background: #962d22;
}
figure.snip0056.yellow .position {
background: #bf6516;
}
figure.snip0056:hover > img,
figure.snip0056.hover > img {
right: -12%;
}
#import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
#social {
position: absolute;
right: 0;
bottom: 0;
margin: 20px 10px;
text-align: center;
}
.smGlobalBtn { /* global button class */
display: inline-block;
position: relative;
cursor: pointer;
width: 50px;
height: 50px;
border:2px solid #ddd; /* add border to the buttons */
box-shadow: 0 3px 3px #999;
padding: 0px;
text-decoration: none;
text-align: center;
color: #fff;
font-size: 25px;
font-weight: normal;
line-height: 2em;
border-radius: 27px;
-moz-border-radius:27px;
-webkit-border-radius:27px;
}
/* facebook button class*/
.facebookBtn{
background: #4060A5;
}
.facebookBtn:before{ /* use :before to add the relevant icons */
font-family: "FontAwesome";
content: "\f09a"; /* add facebook icon */
}
.facebookBtn:hover{
color: #4060A5;
background: #fff;
border-color: #4060A5; /* change the border color on mouse hover */
}
/* twitter button class*/
.twitterBtn{
background: #00ABE3;
}
.twitterBtn:before{
font-family: "FontAwesome";
content: "\f099"; /* add twitter icon */
}
.twitterBtn:hover{
color: #00ABE3;
background: #fff;
border-color: #00ABE3;
}
/* instagram button class*/
.instagramBtn{
background: #4169E1;
}
.instagramBtn:before{
font-family: "FontAwesome";
content: "\f16d"; /* add instagram icon */
}
.instagramBtn:hover{
color: #00FFFF;
background: #fff;
border-color: #4169E1;
}
<div class="container">
<div class="profile">
<h1 contenteditable="true">janedoe_</h1>
<button class="btn profile-edit-btn">Edit Profile</button>
</div>
<!-- End of profile section -->
</div>
<!-- End of container -->
</header>
<main>
<div class="container">
<figure class="snip0056">
<figcaption>
<h3 contenteditable="true">Stuart <span>White</span></h3>
<h2><p contenteditable="true">I suppose if we couldn't laugh at things that don't make sense, we couldn't react to a lot of life.</h2></p>
</figcaption><img class="image1" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample8.jpg" alt="profilepic1" />
<div class="position"><h3 contenteditable="true">Web Designer</div></h3>
</figure>
<figure class="snip0056 yellow">
<figcaption>
<h3 contenteditable="true">Diana <span>Reed</span></h3>
<h2> <p contenteditable="true">The only skills I have patience to learn are those that have no real application in life.</h2></p>
</figcaption><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample9.jpg" alt="sample9" />
<div class="position"><h3 contenteditable="true">Sales Manager</div></h3>
</figure>
<div id="social">
<a class="facebookBtn smGlobalBtn" href="https://facebook.com/ngurah.dimas.94" ></a>
<a class="twitterBtn smGlobalBtn" href="https://twitter.com/ngurahdimas" ></a>
<a class="instagramBtn smGlobalBtn" href="http://instagram.com/ngurahdimas_" ></a>
</div>
</main>

Open Weather Api FreeCodeCamp not working

The following snippet is not displaying anything. Here's my code from codepen. Could you help me figure out what's wrong and how to fix it? I also checked, and the API links are correct.
$(document).ready(function() {
$(".cityarea").html(getLocation);
testMenu();
});
var currentLat;
var currentLong;
var currentCity;
var currentRegion;
var currentCountry;
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
},
'Denver': {
'region': 'Colorado',
'country': "United States",
'lat': 39.739100,
'lon': -104.984700
}
};
function testMenu() {
for (var place in mainCities) {
var city = place.replace(/_/g, ' ');
$('#testMenu').append("<li onclick=testWeather('" + place + "');><a href='#'>" + city + "</a></li>");
}
};
function testWeather(cityLocation) {
currentLat = mainCities[cityLocation].lat;
currentLong = mainCities[cityLocation].lon;
currentRegion = mainCities[cityLocation].region;
currentCity =cityLocation.replace(/_/g, ' ');
currentCountry = mainCities[cityLocation].country;
getWeather();
};
function getLocation() {
$.getJSON('http://ip-api.com/json', function(data) {
currentRegion = data.regionName;
//currentCity = data.city;
currentCountry = data.country;
currentLat = data.lat;
currentLong = data.lon;
getWeather();
});
};
function getWeather() {
$("#state").text(currentRegion);
$("#country").text(currentCountry);
$.getJSON('http://api.openweathermap.org/data/2.5/weather?lat=' + currentLat + '&lon=' + currentLong + '&units=imperial&APPID=e656b9ee098cf2341fcfdb365b96b4a8', function(json) {
$("#cityname").text(json.name);
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");
});
var prefix = "wi wi-owm-";
var weatherIcons = json.weather[0].id;
var icon = prefix + weatherIcons;
$("#wparameter").html("<i class='" + icon + "'></i>"); $("#wdescription").text(json.weather[0].description);
var weatherImages = {
'rain': 'https://s6.postimg.org/7ug4yocip/rainpic1.jpg', 'clear': 'https://s6.postimg.org/alzepab1d/clearskypic1.jpg',
'snow': 'https://s6.postimg.org/rdkq81ba9/snowpic.jpg',
'clouds': 'https://s6.postimg.org/4v4mxtdnl/cloudspic.jpg',
'fog': 'https://s6.postimg.org/r9mbe1gf5/fogpic.jpg',
'thunder': 'https://s6.postimg.org/qpbvp3ckh/thunderstormpic.jpg',
'windy': 'https://s6.postimg.org/wg222tkkh/windybreezepic.jpg',
'dust': 'https://s6.postimg.org/tpo4rvyht/dustsandpic.jpg',
'tornadostorm': 'https://s6.postimg.org/aamjq9jz5/tornadostorm.jpg'
};
var imagepic;
if (weatherIcons >= 200 && weatherIcons <= 232 ) {
imagepic = weatherImages.thunder;
} else if (weatherIcons >= 300 && weatherIcons <= 531) {
imagepic = weatherImages.rain;
} else if (weatherIcons >= 600 && weatherIcons <= 622) {
imagepic = weatherImages.snow;
} else if (weatherIcons >= 701 && weatherIcons <= 731) {
imagepic = weatherImages.dust;
} else if (weatherIcons == 741) {
imagepic = weatherImages.fog;
} else if (weatherIcons >= 751 && weatherIcons <= 781) {
imagepic = weatherImages.dust;
} else if (weatherIcons == 800) {
imagepic = weatherImages.clear;
} else if (weatherIcons >= 801 && weatherIcons <= 804) {
imagepic = weatherImages.clouds;
} else if (weatherIcons >= 900 && weatherIcons <= 906) {
imagepic = weatherImages.tornadostorm;
} else if (weatherIcons >= 951 && weatherIcons <= 962) {
imagepic = weatherImages.windy;
} else {}
var speedimg = 500;
$(".wrapper").animate({opacity: 0}, speedimg, function() {
$(".wrapper").animate({opacity: 1}, speedimg);
$(".wrapper").css(
'background-image', 'url(' + imagepic + ')');
});
});
};
#import url('https://fonts.googleapis.com/css?family=Roboto:300,400');
body {
position: relative;
}
html, body{
height:100%;
margin: 0;
}
.wrapper {
width: 100%;
height: 100%;
position: relative;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.container {
position: relative;
display: block;
margin: 0 auto;
width: 35%;
min-width: 300px;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 3px;
border: 2px solid #009688;
/*padding: 10px 20px;*/
box-shadow: 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12), 0 5px 5px -3px rgba(0,0,0,.2);
}
.header h1 {
text-align: center;
font-family: 'Roboto', sans-serif;
font-weight: 300;
margin: 0 0 10px 0;
color: #000000;
}
.weatherbox {
text-align: center;
}
.locationbox {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-justify-content: space-between;
justify-content: space-between;
padding: 10px 20px 0px;
}
.locactioninfobox {
/* -webkit-flex-basis: 350px;
flex-basis: 350px;*/
text-align: left;
}
.cityarea h2 {
color: #000000;
font-family: 'Roboto', sans-serif;
font-weight: normal;
font-size: 2em;
margin: 0;
}
.countryarea {
position: relative;
display: -webkit-flex;
display: flex;
/*-webkit-justify-content: center;
justify-content: center;*/
margin: 0 auto;
text-align: left;
}
.countryarea h3 {
margin: 0 0 10px 0;
font-family: 'Roboto', sans-serif;
font-weight: normal;
color: #000000;
}
.countryarea h3:first-child {
margin-right: 8px;
}
.dropdownlocation {
-webkit-align-self: center;
align-self: center;
}
.dropdown {
position: relative;
/*display: inline-block;*/
font-size: 16px;
color: #FFF;
}
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: 12px;
line-height: 1.42857143;
color: #777;
white-space: nowrap;
text-transform: uppercase;
}
.dropdown > span {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.dropdown span {
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;
}
.dropdown span .fa {
display: inline;
}
.dropdown span .fa-globe {
margin-right: 10px;
}
.dropdown > span,
.dropdown > div {
cursor: pointer;
outline: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.dropdown > div {
background-color: rgba(0, 0, 0, 0);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: none;
}
.dropdown > span:focus ~ div {
display: block;
}
.dropdown > ul {
position: absolute;
list-style: none;
text-align: left;
/*width: 100%;*/
min-width: 160px;
z-index: 1;
visibility: hidden;
transition: visibility 0.5s;
opacity: 0;
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);
}
.dropdown > span:focus ~ ul {
visibility: visible;
opacity: 1;
}
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;
}
ul .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
.mainline hr {
border: 0;
height: 1px;
background: #000000;
opacity: 0.2;
}
.temperaturearea {
padding: 0px 20px 10px;
}
.toptempbox {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
}
.tempbox {
-webkit-flex-basis: 180px;
flex-basis: 180px;
}
.temperaturearea span#temp {
position: relative;
color: #000000;
font-family: 'Roboto', sans-serif;
font-size: 10em;
}
.temperaturearea #temp:after {
content: '';
position: absolute;
height: 10px;
width: 10px;
top: 16px;
right: -17px;
border: 3px solid #000000;
border-radius: 50%;
}
.wconditionsbox {
-webkit-align-self: flex-end;
align-self: flex-end;
padding-bottom: 35px;
padding-left: 5px;
-webkit-flex-basis: 100px;
flex-basis: 100px;
}
.wconditionsbox span {
display: block;
text-align: left;
}
#wparameter {
font-size: 3.5em;
}
#wdescription {
font-size: 1em;
}
#wparameter, #wdescription {
color: #000000;
font-family: 'Roboto', sans-serif;
}
.weather > span {
position: relative;
font-family: 'Roboto', sans-serif;
font-size: 1.2rem;
color: #000000;
}
.weather > span:before {
content: '';
position: absolute;
left: -10px;
top: 0px;
height: 3px;
width: 3px;
border: 2px solid #000000;
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;
}
#unit-toggle.toggle {
left: 16px;
}
#media screen and (max-width: 479px) {
.container {
width: 85%;
min-width: 300px;
}
}
#media screen and (min-width: 480px) and (max-width: 900px) {
.container {
width: 65%;
min-width: 300px;
}
}
<html lang="en">
<head>
<meta charset="utf-8">
<title>Local Weather</title>
</head>
<body class="full">
<div class="wrapper">
<div class="container">
<div class="header"><h1></h1></div>
<div class="weatherbox">
<div class="locationbox">
<div class="locactioninfobox">
<div class="cityarea">
<h2 id="cityname"></h2>
</div>
<div class="countryarea">
<h3 id="state"></h3>
<h3 id="country"></h3>
</div>
</div>
<div class="dropdownlocation">
<div class="dropdown">
<span tabindex="0" onclick="return true"><i class="fa fa-globe" aria-hidden="true"></i><i class="fa fa-caret-down" aria-hidden="true"></i></span>
<div tabindex="0" onclick="return true"></div>
<ul id="testMenu">
<li onclick="getLocation();">Current Location</li>
<li class="divider"></li>
<li class="dropdown-header">Main Cities</li>
</ul>
</div>
</div>
</div>
<div class="mainline"><hr></div>
<div class="temperaturearea">
<div class="toptempbox">
<div class="tempbox">
<span id="temp"></span>
</div>
<div class="wconditionsbox">
<span id="wparameter"></span>
<span id="wdescription"></span>
</div>
</div>
<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>
</body>
</html>

Categories