How to I append a suffix to an animated counter? - javascript

I am having difficulty adding a static suffix to the end of these animated counters. I'd like to add a "+" sign to some of them, doesn't need to be animated.
I tried creating a suffix class but I can't get it to append directly to the end value, it just keeps appearing below the numbers. I am a complete beginner so if there's an obvious solution I apologize! I've searched the forums but the approaches don't seem similar to mine.
let valueDisplays = document.querySelectorAll(".num");
let interval = 4000;
valueDisplays.forEach((valueDisplay) => {
let startValue = 0;
let endValue = parseInt(valueDisplay.getAttribute("data-val"));
let duration = Math.floor(interval / endValue);
let counter = setInterval(function() {
startValue += 1;
valueDisplay.textContent = startValue;
if (startValue == endValue) {
clearInterval(counter);
}
}, duration);
});
* {
padding: 0;
margin: 0;
font-family: "Poppins", sans-serif;
}
body {
background-color: white;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 100vh;
}
.wrapper {
position: absolute;
width: 80vw;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
display: flex;
justify-content: space-around;
gap: 10px;
}
.container {
width: 28vmin;
height: 28vmin;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 1em 0;
position: relative;
font-size: 16px;
border-radius: 0.5em;
backdrop-filter: blur(10px);
}
i {
color: #000000;
font-size: 3.8em;
text-align: center;
}
span.num {
color: #000000;
display: grid;
place-items: center;
font-weight: 600;
font-size: 3em;
}
span.text {
color: #000000;
font-size: 1em;
text-align: center;
pad: 0.7em 0;
font-weight: 400;
line-height: 0;
}
#media screen and (max-width: 1024px) {
.wrapper {
width: 85vw;
}
.container {
height: 26vmin;
width: 26vmin;
font-size: 12px;
}
}
#media screen and (max-width: 768px) {
.wrapper {
width: 90vw;
flex-wrap: wrap;
gap: 30px;
}
.container {
width: calc(50% - 40px);
height: 30vmin;
margin-bottom: 25px;
font-size: 14px;
}
}
#media screen and (max-width: 480px) {
.wrapper {
gap: 15px;
}
.container {
width: 100%;
height: 25vmin;
font-size: 8px;
margin-bottom: 25px;
}
}
<div class="wrapper">
<div class="container">
<i class="fa-regular fa-face-laugh"></i>
<span class="num" data-val="8">0</span>
<span class="text">Apples</span>
</div>
<div class="container">
<i class="fa-solid fa-users"></i>
<span class="num" data-val="40000">0</span>
<span class="text">Oranges</span>
</div>
<div class="container">
<i class="fa-regular fa-circle-down"></i>
<span class="num" data-val="2.3">0</span>
<span class="text">Lemons</span>
</div>
<div class="container">
<i class="fa-solid fa-podcast"></i>
<span class="num" data-val="900">0</span>
<span class="text">Pears</span>
</div>
</div>


It's pretty simple, you can use the :after pseudo-element to inject the +.
However, I had to remove the grid display for the .num elements, as that didn't align the added + nicely.
See the CSS block in this snippet.
let valueDisplays = document.querySelectorAll(".num");
let interval = 4000;
valueDisplays.forEach((valueDisplay) => {
let startValue = 0;
let endValue = parseInt(valueDisplay.getAttribute("data-val"));
let duration = Math.floor(interval / endValue);
let counter = setInterval(function() {
startValue += 1;
valueDisplay.textContent = startValue;
if (startValue == endValue) {
clearInterval(counter);
}
}, duration);
});
.num:after {
content: '+';
}
span.num {
text-align: center;
}
/* ^ That's all there is to it. */
* {
padding: 0;
margin: 0;
font-family: "Poppins", sans-serif;
}
body {
background-color: white;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 100vh;
}
.wrapper {
position: absolute;
width: 80vw;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
display: flex;
justify-content: space-around;
gap: 10px;
}
.container {
width: 28vmin;
height: 28vmin;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 1em 0;
position: relative;
font-size: 16px;
border-radius: 0.5em;
backdrop-filter: blur(10px);
}
i {
color: #000000;
font-size: 3.8em;
text-align: center;
}
span.num {
color: #000000;
font-weight: 600;
font-size: 3em;
}
span.text {
color: #000000;
font-size: 1em;
text-align: center;
pad: 0.7em 0;
font-weight: 400;
line-height: 0;
}
#media screen and (max-width: 1024px) {
.wrapper {
width: 85vw;
}
.container {
height: 26vmin;
width: 26vmin;
font-size: 12px;
}
}
#media screen and (max-width: 768px) {
.wrapper {
width: 90vw;
flex-wrap: wrap;
gap: 30px;
}
.container {
width: calc(50% - 40px);
height: 30vmin;
margin-bottom: 25px;
font-size: 14px;
}
}
#media screen and (max-width: 480px) {
.wrapper {
gap: 15px;
}
.container {
width: 100%;
height: 25vmin;
font-size: 8px;
margin-bottom: 25px;
}
}
<div class="wrapper">
<div class="container">
<i class="fa-regular fa-face-laugh"></i>
<span class="num" data-val="8">0</span>
<span class="text">Apples</span>
</div>
<div class="container">
<i class="fa-solid fa-users"></i>
<span class="num" data-val="40000">0</span>
<span class="text">Oranges</span>
</div>
<div class="container">
<i class="fa-regular fa-circle-down"></i>
<span class="num" data-val="2.3">0</span>
<span class="text">Lemons</span>
</div>
<div class="container">
<i class="fa-solid fa-podcast"></i>
<span class="num" data-val="900">0</span>
<span class="text">Pears</span>
</div>
</div>

Related

The navbar's appears to not cover entire screen in mobile mode

My navbar works just fine in desktop mode. But when I decrease the screen resolution, its starts not covering the entire width of the window. Can you help me to make it cover the whole width of screen.
MY home.html file
var ser = document.getElementById('in');
document.getElementById('in').onkeypress = function(e) {
if (e.keyCode == 13) {
console.log("ent")
var value = document.getElementById('in').value;
var search = "example";
console.log(value)
window.open("result.html", "_self");
sessionStorage.setItem("search", value);
}
}
const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");
const item = document.querySelector(".item");
hamburger.addEventListener("click", mobileMenu);
function mobileMenu() {
//hamburger.classList.toggle("active");
navMenu.classList.toggle("active");
}
const navLink = document.querySelectorAll(".nav-link");
navLink.forEach(n => n.addEventListener("click", closeMenu));
function closeMenu() {
hamburger.classList.remove("active");
navMenu.classList.remove("active");
}
var width = screen.width;
var height = screen.height;
var tempo = document.getElementById("tempo");
var ser = document.getElementById("ser");
if (width < 650) {
tempo.remove();
ser.remove();
navMenu.setAttribute('width', '100%')
}
* {
margin: 0px;
background-color: white;
}
.navbar {
background-color: blue;
width: 100%;
height: 50px;
}
.navbar-container {
display: flex;
align-items: center;
background-color: black;
height: 100%;
}
.item {
padding: 0 20px;
background-color: black;
color: white;
text-decoration: solid;
}
.search_box_item {
padding: 0 0 0 400px;
width: 500px;
}
.p1 {
float: right;
}
.pm {
font-family: 'Courier New', Courier, monospace;
color: aquamarine;
font-size: 5vw;
background-color: transparent;
width: 3vw;
margin: 10px 10px;
}
.flex-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%
}
.nav-items {
list-style-type: none;
}
#in {
border-radius: 25px;
}
.hamburger {
display: none;
}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: #101010;
}
#media only screen and (max-width: 767px) {
.navbar {
height: 20vw;
width: 100%;
}
.logo {
height: 1vw;
width: 1vw
}
.navbar-container {
align-items: center;
background-color: black;
height: 100%;
}
}
#media only screen and (max-width: 480px) and (min-width: 320px) {
.navbar {
height: 30vw;
}
.navbar {
height: 20vw;
width: 100%;
}
.logo {
height: 10vw
}
.navbar-container {
align-items: center;
background-color: black;
height: 100%;
}
}
#media only screen and (max-width: 768px) {
.nav-menu {
position: fixed;
left: -100%;
top: 5rem;
flex-direction: column;
background-color: #fff;
width: 100%;
border-radius: 10px;
text-align: center;
transition: 0.3s;
box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
}
.nav-menu.active {
left: 0;
}
.nav-item {
margin: 2.5rem 0;
}
.hamburger {
display: block;
cursor: pointer;
}
.navbar-container {
align-items: center;
background-color: black;
height: 100%;
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
width: 100%;
}
.temp {
visibility: collapse;
}
.navbar {
height: 20vw;
width: 100%;
}
}
.nav-menu {
background-color: black;
width: 100%;
height: 40%;
margin-top: 0px;
}
<script src="https://kit.fontawesome.com/67c66657c7.js"></script>
<div class="navbar flex-row" style="width: 100%;">
<nav class="navbar-container navbar" style="width: 100%;">
<div class="navbar-logo item"><img class="logo" src="images/Navlab.png" style="width:3vw"></div>
<div class="search_box_item item temp" id="ser">
<input id="in" type="search" placeholder=" Search here" style="width:100%; background-color: white; align-self: center;">
<!--<button id="search" style="background: url(images/search1.png); height: 40px; width: 40px; border: none;"></button>-->
</div>
<div class="nav-items flex-row" id="tempo">
<li class="ptopics item temp">New releases</li>
<li class="profile item temp">My profile</li>
<li class="about item temp">About us</li>
</div>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<div class="nav-menu">
</div>
</nav>
</div>
<div class="firstp" style="max-width: 100vw; height: 100vw;">
<img style="float:left; max-width:50%vw; height:auto; margin: 10vw 10vw;" src="images/i1.png">
<p1 class="pm" style="margin-top: 10vw; padding-top: 5vw; float:left">Read <br> Write <br> Learn</p1>
</div>
I tried to make the width of navbar, navbar-container and navmenu 100% but its is still not working.

The class search_box_item has a padding: 0px 0px 0px 400px;. It causes the second <div> in <nav> to mess things up.
Checking elements one by one using Inspect Elements/Developer Tools helps a lot.

In a custom dropdown, how to push down content below?

In this custom dropdown menu, when I click on the top dropdown, I want to push down the dropdown menu below it.
Here is a Codepen if it helps.
Currently, it starts like this:
and opens like this (overlaps the content below it):
But, when clicked I want it to look like this:
I know this has something to do with positioning, but I'm not sure where it should be applied.
for (const dropdown of document.querySelectorAll(".custom__select-wrapper:not(.clearFilter)")) {
dropdown.addEventListener("click", function() {
this.querySelector(".custom__select").classList.toggle("open");
});
}
for (const option of document.querySelectorAll(".custom__option")) {
option.addEventListener("click", function() {
if (!this.classList.contains("selected")) {
this.parentNode
.querySelector(".custom__option.selected")
.classList.remove("selected");
this.classList.add("selected");
this.closest(".custom__select").querySelector(
".custom__select-trigger h6"
).textContent = this.textContent;
if (this.getAttribute("data-year")) {
current_year = this.dataset["year"];
yearFilter(this.dataset["year"]);
} else {
current_story = this.dataset["type"];
storyFilter(this.dataset["type"]);
}
}
});
}
window.addEventListener("click", function(e) {
for (const select of document.querySelectorAll(".custom__select")) {
if (!select.contains(e.target)) {
select.classList.remove("open");
}
}
});
#selectedFilter {
color: #005fec;
}
.filter {
padding-right: 15px;
padding-left: 15px;
margin-top: 3rem;
display: flex;
flex-direction: column;
}
#media (min-width: 768px) {
.filter__settings {
display: flex;
flex-direction: row;
border-top: 1px solid #E0E5EC;
border-bottom: 1px solid #E0E5EC;
}
}
.custom__select {
position: relative;
display: flex;
flex-direction: column;
}
.custom__select-wrapper {
position: relative;
user-select: none;
padding: 0;
border-bottom: 1px solid #E0E5EC;
}
.custom__select-wrapper:last-child {
border: 0;
}
.custom__select-wrapper.clearFilter {
display: flex;
flex-direction: column;
justify-content: center;
height: 40px;
}
#media (min-width: 768px) {
.custom__select-wrapper {
padding: 0 2em;
border: 0;
display: flex;
justify-content: center;
align-items: center;
}
.custom__select-wrapper:last-child {
margin-left: auto;
}
.custom__select-wrapper:first-child,
.custom__select-wrapper:last-child {
padding: 0;
}
}
.custom__select-wrapper h6 {
padding: 20px 3px;
color: #62668C;
font-weight: 300;
}
.custom__select-trigger {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
height: 40px;
cursor: pointer;
}
#media (min-width: 768px) {
.custom__select-trigger {
justify-content: space-evenly;
margin-right: auto;
}
}
.custom__select-wrapper h6,
.custom__select-trigger h6 {
font-size: .75rem;
line-height: .75rem;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 0;
}
.custom__select-trigger h6 {
color: #005fec;
font-weight: 900;
}
.custom__select-wrapper #selectedFilter {
font-size: 12px;
line-height: 12px;
letter-spacing: 1px;
text-transform: uppercase;
color: #005fec;
font-weight: 800;
padding: 0;
}
.custom__options {
position: absolute;
background-color: #005fec;
top: 100%;
left: 0;
right: 0;
border-top: 0;
transition: all 0.5s;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 2;
}
.custom__options:before,
.custom__options:after {
content: "";
position: absolute;
bottom: 100%;
left: 11px;
border: 11px solid transparent;
border-bottom-color: #005fec;
}
.custom__options.active {
display: block;
visibility: visible;
opacity: 1;
z-index: 10;
}
.custom__select-trigger,
.custom__option {
letter-spacing: 1px;
font-weight: 800;
color: #005fec;
border: 0;
background: transparent;
}
/* #media (min-width: 768px) {
.custom__select.open .custom__options {
opacity: 1;
visibility: visible;
pointer-events: all;
color: #fff;
min-width: 15rem;
}
} */
.custom__select.open .custom__options {
opacity: 1;
visibility: visible;
pointer-events: all;
color: #fff;
min-width: 15rem;
}
.custom__option {
position: relative;
display: block;
padding: 0 22px 0 20px;
font-weight: 300;
color: #fff;
cursor: pointer;
transition: all 0.5s;
font-size: 1.25rem;
line-height: 1.25rem;
margin: 1.5em 0;
}
.custom__option:hover {
cursor: pointer;
}
.custom__option.selected {
color: #ffffff;
}
.custom__option.selected::before {
content: "•";
margin-left: -12px;
padding-right: 8px;
}
/* arrow */
.arrow {
position: relative;
height: 8px;
width: 5px;
margin-left: 2em;
}
.arrow::before,
.arrow::after {
content: "";
position: absolute;
bottom: 0px;
width: 0.1rem;
height: 100%;
transition: all 0.5s;
}
.arrow::before {
left: 0;
transform: rotate(45deg);
background-color: #005fec;
}
.arrow::after {
left: -4.5px;
transform: rotate(-45deg);
background-color: #005fec;
}
.open .arrow::before {
left: 0;
transform: rotate(-45deg);
}
.open .arrow::after {
left: -4.5px;
transform: rotate(45deg);
}
<section class="filter">
<div class="filter__settings">
<div class="custom__select-wrapper">
<div class="custom__select story-sel selector">
<div class="custom__select-trigger">
<h6>Story Type</h6>
<div class="arrow"></div>
</div>
<div class="custom__options dropdown story-selector" id="storyFilter">
<span class="custom__option selected" data-type="all">All</span>
<span class="custom__option" data-type="news">News and Media</span>
<span class="custom__option" data-type="analysis">Analysis</span>
</div>
</div>
</div>
<div class="custom__select-wrapper">
<div class="custom__select year-sel selector">
<div class="custom__select-trigger">
<h6>Year</h6>
<div class="arrow"></div>
</div>
<div class="custom__options dropdown year-selector" id="yearFilter">
<span class="custom__option selected" data-year="all">All</span>
<span class="custom__option" data-year="2021">2021</span>
<span class="custom__option" data-year="2020">2020</span>
</div>
</div>
</div>
</div>
</section>

You are using popover. But you should use an Accordion. You should check this
So what is the problem in your code? When your options comes to display it is floating over the screen. But it should contain the space
in the .custom__options class remove the position: absolute and add followig
display: none
It will hide the options.
Now in the .custom__select.open .custom__options do this
display: block;
In the arrow add this
top: 18px;

I added a sample code here, I think you can get some Idea
Sourse :
https://www.w3schools.com/howto/howto_js_accordion.asp
https://www.fileformat.info/info/unicode/char/search.htm
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "grid") {
panel.style.display = "none";
} else {
panel.style.display = "grid";
}
});
}
.accordion{
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.accordion:after {
content: '\2c4';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2c5";
}
.active, .accordion:hover {
background-color: #ccc;
}
.panel {
display: none;
background-color: cornflowerblue;
overflow: hidden;
}
.custom__option:hover {
cursor: pointer;
background: rgb(170, 204, 255);
}
.custom__option{
margin-left: 35px;
}
<div class="arrow"></div>
<button class="accordion">Story Type</button>
<div class="panel">
<span class="custom__option selected" data-type="all">All</span>
<span class="custom__option" data-type="news">News and Media</span>
<span class="custom__option" data-type="analysis">Analysis</span>
</div>
<button class="accordion">Year</button>
<div class="panel">
<span class="custom__option selected" data-year="all">All</span>
<span class="custom__option" data-year="2021">2021</span>
<span class="custom__option" data-year="2020">2020</span>
</div>

Javascript - Calendar Flip animation not working

I am attempting to create a calendar wherein upon clicking a particular date, the calendar should flip over to reveal details of a specific reservation. While the calendar interface appears perfectly on the webpage, the flip animation does not work and I cant seem to figure out why. I must add that I found most of this code on codepen and am modifying it based on my preference. I have attached my code breakdown below. I would greatly appreciate any advice and help. Thanks!:
<script type = "text/javascript">
var app = {
settings: {
container: $(".calendar"),
calendar: $(".front"),
days: $(".weeks span"),
form: $(".back"),
input: $(".back input"),
buttons: $(".back button")
},
init: function () {
instance = this;
settings = this.settings;
this.bindUIActions();
},
swap: function (currentSide, desiredSide) {
settings.container.toggleClass("flip");
currentSide.fadeOut(900);
currentSide.hide();
desiredSide.show();
},
bindUIActions: function () {
settings.days.on("click", function () {
instance.swap(settings.calendar, settings.form);
settings.input.focus();
});
settings.buttons.on("click", function () {
instance.swap(settings.form, settings.calendar);
});
}
};
app.init();
</script>
<style type = "text/css">
* {
box-sizing: border-box;
font-family: "Roboto", sans-serif;
list-style: none;
margin: 0;
outline: none;
padding: 0;
}
a {
text-decoration: none;
}
body,
html {
height: 100%;
}
body {
background: #dfebed;
font-family: "Roboto", sans-serif;
}
.container {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
margin: 0 auto;
max-width: 600px;
width: 100%;
}
.calendar {
background: #2b4450;
border-radius: 4px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
height: 501px;
perspective: 1000;
transition: 0.9s;
transform-style: preserve-3d;
width: 100%;
}
/* Front - Calendar */
.front {
transform: rotateY(0deg);
}
.current-date {
border-bottom: 1px solid rgba(73, 114, 133, 0.6);
display: flex;
justify-content: space-between;
padding: 30px 40px;
}
.current-date h1 {
color: #dfebed;
font-size: 1.4em;
font-weight: 300;
}
.week-days {
color: #dfebed;
display: flex;
justify-content: space-between;
font-weight: 600;
padding: 30px 40px;
}
.days {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.weeks {
color: #fff;
display: flex;
flex-direction: column;
padding: 0 40px;
}
.weeks div {
display: flex;
font-size: 1.2em;
font-weight: 300;
justify-content: space-between;
margin-bottom: 20px;
width: 100%;
}
.last-month {
opacity: 0.3;
}
.weeks span {
padding: 10px;
}
.weeks span.active {
background: #f78536;
border-radius: 50%;
}
.weeks span:not(.last-month):hover {
cursor: pointer;
font-weight: 600;
}
.event {
position: relative;
}
.event:after {
content: "•";
color: #f78536;
font-size: 1.4em;
position: absolute;
right: -4px;
top: -4px;
}
/* Back - Event form */
.back {
height: 100%;
transform: rotateY(180deg);
}
.back input {
background: none;
border: none;
border-bottom: 1px solid rgba(73, 114, 133, 0.6);
color: #dfebed;
font-size: 1.4em;
font-weight: 300;
padding: 30px 40px;
width: 100%;
}
.info {
color: #dfebed;
display: flex;
flex-direction: column;
font-weight: 600;
font-size: 1.2em;
padding: 30px 40px;
}
.info div:not(.observations) {
margin-bottom: 40px;
}
.info span {
font-weight: 300;
}
.info .date {
display: flex;
justify-content: space-between;
}
.info .date p {
width: 50%;
}
.info .address p {
width: 100%;
}
.actions {
bottom: 0;
border-top: 1px solid rgba(73, 114, 133, 0.6);
display: flex;
justify-content: space-between;
position: absolute;
width: 100%;
}
.actions button {
background: none;
border: 0;
color: #fff;
font-weight: 600;
letter-spacing: 3px;
margin: 0;
padding: 30px 0;
text-transform: uppercase;
width: 50%;
}
.actions button:first-of-type {
border-right: 1px solid rgba(73, 114, 133, 0.6);
}
.actions button:hover {
background: #497285;
cursor: pointer;
}
.actions button:active {
background: #5889a0;
outline: none;
}
/* Flip animation */
.flip {
transform: rotateY(180deg);
}
.front,
.back {
backface-visibility: hidden;
}
</style>
<link rel = "stylesheet" type = "text/css">
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<div class="container">
<div class="calendar">
<div class="front">
<div class="current-date">
<h1>Monday 26th</h1>
<h1>April 2021</h1>
</div>
<div class="current-month">
<ul class="week-days">
<li>MON</li>
<li>TUE</li>
<li>WED</li>
<li>THU</li>
<li>FRI</li>
<li>SAT</li>
<li>SUN</li>
</ul>
<div class="weeks">
<div class="first">
<span class="last-month">28</span>
<span class="last-month">29</span>
<span class="last-month">30</span>
<span class="last-month">31</span>
<span>01</span>
<span>02</span>
<span>03</span>
</div>
<div class="second">
<span>04</span>
<span>05</span>
<span class="event">06</span>
<span>07</span>
<span>08</span>
<span>09</span>
<span>10</span>
</div>
<div class="third">
<span>11</span>
<span>12</span>
<span>13</span>
<span>14</span>
<span class="active">15</span>
<span>16</span>
<span>17</span>
</div>
<div class="fourth">
<span>18</span>
<span>19</span>
<span>20</span>
<span>21</span>
<span>22</span>
<span>23</span>
<span>24</span>
</div>
<div class="fifth">
<span>25</span>
<span>26</span>
<span>27</span>
<span>28</span>
<span>29</span>
<span>30</span>
<span>31</span>
</div>
</div>
</div>
</div>
<div class="back">
<input placeholder="What's the event?">
<div class="info">
<div class="date">
<p class="info-date">
Date: <span>Jan 15th, 2016</span>
</p>
<p class="info-time">
Time: <span>6:35 PM</span>
</p>
</div>
<div class="address">
<p>
Address: <span>129 W 81st St, New York, NY</span>
</p>
</div>
<div class="observations">
<p>
Observations: <span>Be there 15 minutes earlier</span>
</p>
</div>
</div>
<div class="actions">
<button class="save">
Save <i class="ion-checkmark"></i>
</button>
<button class="dismiss">
Dismiss <i class="ion-android-close"></i>
</button>
</div>
</div>
</div>
</div>

Just change the <script> tag as shown below. I added Google CDN for jQuery. Why?
For more about how to load script tags check here
var app = {
settings: {
container: $(".calendar"),
calendar: $(".front"),
days: $(".weeks span"),
form: $(".back"),
input: $(".back input"),
buttons: $(".back button")
},
init: function () {
instance = this;
settings = this.settings;
this.bindUIActions();
},
swap: function (currentSide, desiredSide) {
settings.container.toggleClass("flip");
currentSide.fadeOut(900);
currentSide.hide();
desiredSide.show();
},
bindUIActions: function () {
settings.days.on("click", function () {
instance.swap(settings.calendar, settings.form);
settings.input.focus();
});
settings.buttons.on("click", function () {
instance.swap(settings.form, settings.calendar);
});
}
};
app.init();
* {
box-sizing: border-box;
font-family: "Roboto", sans-serif;
list-style: none;
margin: 0;
outline: none;
padding: 0;
}
a {
text-decoration: none;
}
body,
html {
height: 100%;
}
body {
background: #dfebed;
font-family: "Roboto", sans-serif;
}
.container {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
margin: 0 auto;
max-width: 600px;
width: 100%;
}
.calendar {
background: #2b4450;
border-radius: 4px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
height: 501px;
perspective: 1000;
transition: 0.9s;
transform-style: preserve-3d;
width: 100%;
}
/* Front - Calendar */
.front {
transform: rotateY(0deg);
}
.current-date {
border-bottom: 1px solid rgba(73, 114, 133, 0.6);
display: flex;
justify-content: space-between;
padding: 30px 40px;
}
.current-date h1 {
color: #dfebed;
font-size: 1.4em;
font-weight: 300;
}
.week-days {
color: #dfebed;
display: flex;
justify-content: space-between;
font-weight: 600;
padding: 30px 40px;
}
.days {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.weeks {
color: #fff;
display: flex;
flex-direction: column;
padding: 0 40px;
}
.weeks div {
display: flex;
font-size: 1.2em;
font-weight: 300;
justify-content: space-between;
margin-bottom: 20px;
width: 100%;
}
.last-month {
opacity: 0.3;
}
.weeks span {
padding: 10px;
}
.weeks span.active {
background: #f78536;
border-radius: 50%;
}
.weeks span:not(.last-month):hover {
cursor: pointer;
font-weight: 600;
}
.event {
position: relative;
}
.event:after {
content: "•";
color: #f78536;
font-size: 1.4em;
position: absolute;
right: -4px;
top: -4px;
}
/* Back - Event form */
.back {
height: 100%;
transform: rotateY(180deg);
}
.back input {
background: none;
border: none;
border-bottom: 1px solid rgba(73, 114, 133, 0.6);
color: #dfebed;
font-size: 1.4em;
font-weight: 300;
padding: 30px 40px;
width: 100%;
}
.info {
color: #dfebed;
display: flex;
flex-direction: column;
font-weight: 600;
font-size: 1.2em;
padding: 30px 40px;
}
.info div:not(.observations) {
margin-bottom: 40px;
}
.info span {
font-weight: 300;
}
.info .date {
display: flex;
justify-content: space-between;
}
.info .date p {
width: 50%;
}
.info .address p {
width: 100%;
}
.actions {
bottom: 0;
border-top: 1px solid rgba(73, 114, 133, 0.6);
display: flex;
justify-content: space-between;
position: absolute;
width: 100%;
}
.actions button {
background: none;
border: 0;
color: #fff;
font-weight: 600;
letter-spacing: 3px;
margin: 0;
padding: 30px 0;
text-transform: uppercase;
width: 50%;
}
.actions button:first-of-type {
border-right: 1px solid rgba(73, 114, 133, 0.6);
}
.actions button:hover {
background: #497285;
cursor: pointer;
}
.actions button:active {
background: #5889a0;
outline: none;
}
/* Flip animation */
.flip {
transform: rotateY(180deg);
}
.front,
.back {
backface-visibility: hidden;
}
</style>
<div class="container">
<div class="calendar">
<div class="front">
<div class="current-date">
<h1>Monday 26th</h1>
<h1>April 2021</h1>
</div>
<div class="current-month">
<ul class="week-days">
<li>MON</li>
<li>TUE</li>
<li>WED</li>
<li>THU</li>
<li>FRI</li>
<li>SAT</li>
<li>SUN</li>
</ul>
<div class="weeks">
<div class="first">
<span class="last-month">28</span>
<span class="last-month">29</span>
<span class="last-month">30</span>
<span class="last-month">31</span>
<span>01</span>
<span>02</span>
<span>03</span>
</div>
<div class="second">
<span>04</span>
<span>05</span>
<span class="event">06</span>
<span>07</span>
<span>08</span>
<span>09</span>
<span>10</span>
</div>
<div class="third">
<span>11</span>
<span>12</span>
<span>13</span>
<span>14</span>
<span class="active">15</span>
<span>16</span>
<span>17</span>
</div>
<div class="fourth">
<span>18</span>
<span>19</span>
<span>20</span>
<span>21</span>
<span>22</span>
<span>23</span>
<span>24</span>
</div>
<div class="fifth">
<span>25</span>
<span>26</span>
<span>27</span>
<span>28</span>
<span>29</span>
<span>30</span>
<span>31</span>
</div>
</div>
</div>
</div>
<div class="back">
<input placeholder="What's the event?">
<div class="info">
<div class="date">
<p class="info-date">
Date: <span>Jan 15th, 2016</span>
</p>
<p class="info-time">
Time: <span>6:35 PM</span>
</p>
</div>
<div class="address">
<p>
Address: <span>129 W 81st St, New York, NY</span>
</p>
</div>
<div class="observations">
<p>
Observations: <span>Be there 15 minutes earlier</span>
</p>
</div>
</div>
<div class="actions">
<button class="save">
Save <i class="ion-checkmark"></i>
</button>
<button class="dismiss">
Dismiss <i class="ion-android-close"></i>
</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

CSS z-index property and javascript background mouse interaction

I'm trying to add a radial gradient as a background of my blogpost card.
This radial gradient should follow the cursor when the
blog post card is hovered. Here here my little code example about the
effect ( https://codepen.io/D_s/pen/OJNpNBV ).
The problem is that doesn't work as expected because the other div elements of the card (title, image, tags, button) are interfering with the hovering. How i can solve this?
Here is the code of the blog post card:
let backgroundgradient = document.querySelector('.card');
backgroundgradient.onmousemove = function(e) {
let rect = e.target.getBoundingClientRect();
let x = e.clientX - rect.left;
let y = e.clientY - rect.top;
backgroundgradient.style.setProperty('--x', x + 'px');
backgroundgradient.style.setProperty('--y', y + 'px');
}
Thank you for the help!

Instead of using e.target.getBoundingClientRect() and .left/.right which will change as the child elements are hovered, consider using the .offsetLeft/.offsetRight of the .card element itself.
let backgroundgradient = document.querySelector('.card');
backgroundgradient.onmousemove = function(e) {
let x = e.clientX - backgroundgradient.offsetLeft;
let y = e.clientY - (backgroundgradient.offsetTop - window.pageYOffset);
backgroundgradient.style.setProperty('--x', x + 'px');
backgroundgradient.style.setProperty('--y', y + 'px');
}
.card,
.imagebox {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.imagebox {
flex: 3 1 30ch;
height: calc(282px + 5vw);
overflow: hidden;
}
.imagebox img {
max-width: 100%;
min-width: 100%;
min-height: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: cover;
object-position: 50% 50%;
padding: 15px;
border-radius: 30px;
z-index: 1;
}
.card {
background: #bdbdbd;
box-sizing: border-box;
border: 2px solid #f93668;
overflow: hidden;
position: relative;
border-radius: 20px;
overflow: hidden;
}
.card:before {
--size: 0;
content: '';
position: absolute;
left: var(--x);
top: var(--y);
width: var(--size);
height: var(--size);
background: radial-gradient(circle closest-side, #f93668, transparent);
transform: translate(-50%, -50%);
transition: width 0.8s ease, height 0.4s ease;
}
.card:hover:before {
--size: 90rem;
}
.card-content {
padding: 16px 32px;
flex: 10 1 40ch;
z-index: 2;
}
.card-tags {
margin: 0 -8px;
}
.card-tag {
display: inline-block;
margin: 8px;
font-size: 0.875em;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--primary);
}
.card-title {
margin: 0;
font-size: clamp(2.4em, 1.1vw, 1.1em);
font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
}
.card-title a {
text-decoration: none;
color: inherit;
}
.card-metadata {
margin: 0;
}
.card-save {
display: flex;
align-items: center;
padding: 6px 14px 6px 12px;
border-radius: 4px;
border: 2px solid currentColor;
color: var(--primary);
background: none;
cursor: pointer;
font-weight: bold;
}
.card-save svg {
margin-right: 6px;
}
/* Body Layout */
* {
box-sizing: border-box;
}
body {
--primary: rgb(249, 54, 104);
--grey: #454545;
--lightgrey: #666;
color: var(--grey);
line-height: 1.55;
display: flex;
justify-content: center;
flex-wrap: wrap;
font-family: "Roboto", Helvetica, Arial, sans-serif;
}
.container {
width: clamp(20px, 90%, 90%);
padding: 24px;
}
<div class="container">
<article class="card">
<div class="imagebox">
<img src="https://d2w9rnfcy7mm78.cloudfront.net/2548871/original_eb4afb32258fcb72de6dddd99cbc4171.jpg?1534159969?bc=1" width="1500" height="1368" alt="">
</div>
<div class="card-content">
<p class="card-tags">
<span class="card-tag">Gluten Free</span>
<span class="card-tag">Main dish</span>
</p>
<h1 class="card-title">Title for a post to come</h1>
<p class="card-desc">by Slutty Urbanism</p>
<button class="card-save" type="button">
Read more
</button>
</div>
</article>
</div>
An example with multiple card elements...
let cards = document.querySelectorAll('.card');
for (let card of cards) {
card.onmousemove = function(e) {
let x = e.clientX - card.offsetLeft;
let y = e.clientY - (card.offsetTop - window.pageYOffset);
card.style.setProperty('--x', x + 'px');
card.style.setProperty('--y', y + 'px');
}
}
.card,
.imagebox {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.imagebox {
flex: 3 1 30ch;
height: calc(282px + 5vw);
overflow: hidden;
}
.imagebox img {
max-width: 100%;
min-width: 100%;
min-height: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: cover;
object-position: 50% 50%;
padding: 15px;
border-radius: 30px;
z-index: 1;
}
.card {
background: #bdbdbd;
box-sizing: border-box;
border: 2px solid #f93668;
overflow: hidden;
position: relative;
border-radius: 20px;
overflow: hidden;
}
.card:before {
--size: 0;
content: '';
position: absolute;
left: var(--x);
top: var(--y);
width: var(--size);
height: var(--size);
background: radial-gradient(circle closest-side, #f93668, transparent);
transform: translate(-50%, -50%);
transition: width 0.8s ease, height 0.4s ease;
}
.card:hover:before {
--size: 90rem;
}
.card-content {
padding: 16px 32px;
flex: 10 1 40ch;
z-index: 2;
}
.card-tags {
margin: 0 -8px;
}
.card-tag {
display: inline-block;
margin: 8px;
font-size: 0.875em;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--primary);
}
.card-title {
margin: 0;
font-size: clamp(2.4em, 1.1vw, 1.1em);
font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
}
.card-title a {
text-decoration: none;
color: inherit;
}
.card-metadata {
margin: 0;
}
.card-save {
display: flex;
align-items: center;
padding: 6px 14px 6px 12px;
border-radius: 4px;
border: 2px solid currentColor;
color: var(--primary);
background: none;
cursor: pointer;
font-weight: bold;
}
.card-save svg {
margin-right: 6px;
}
/* Body Layout */
* {
box-sizing: border-box;
}
body {
--primary: rgb(249, 54, 104);
--grey: #454545;
--lightgrey: #666;
color: var(--grey);
line-height: 1.55;
display: flex;
justify-content: center;
flex-wrap: wrap;
font-family: "Roboto", Helvetica, Arial, sans-serif;
}
.container {
width: clamp(20px, 90%, 90%);
padding: 24px;
}
<div class="container">
<article class="card">
<div class="imagebox">
<img src="https://d2w9rnfcy7mm78.cloudfront.net/2548871/original_eb4afb32258fcb72de6dddd99cbc4171.jpg?1534159969?bc=1" width="1500" height="1368" alt="">
</div>
<div class="card-content">
<p class="card-tags">
<span class="card-tag">Gluten Free</span>
<span class="card-tag">Main dish</span>
</p>
<h1 class="card-title">Title for a post to come</h1>
<p class="card-desc">by Slutty Urbanism</p>
<button class="card-save" type="button">
Read more
</button>
</div>
</article>
<article class="card">
<div class="imagebox">
<img src="https://d2w9rnfcy7mm78.cloudfront.net/2548871/original_eb4afb32258fcb72de6dddd99cbc4171.jpg?1534159969?bc=1" width="1500" height="1368" alt="">
</div>
<div class="card-content">
<p class="card-tags">
<span class="card-tag">Gluten Free</span>
<span class="card-tag">Main dish</span>
</p>
<h1 class="card-title">Title for a post to come</h1>
<p class="card-desc">by Slutty Urbanism</p>
<button class="card-save" type="button">
Read more
</button>
</div>
</article>
</div>

from a decimal to hexadecimal [duplicate]

This question already has answers here:
How to convert decimal to hexadecimal in JavaScript
(30 answers)
How to convert a very large hex number to decimal in javascript
(6 answers)
Working with hex strings and hex values more easily in Javascript
(4 answers)
Closed 4 years ago.
Could someone help me
with this problem? from decimal to binary is already working, but I couldn't get it working from decimal to hexadecimal.
I have a problem with this code: var ant2 = som2 * (gewenstgetal / 4); the rest is working but i couldn't get that to work, it would be very helpfull if someone can help me
function omzetten() {
var invoer = document.getElementById('omzettenInvoer').value;
var talstelselVan = document.getElementById('omvettenVan').value;
var gewenstgetal = document.getElementById('gewenstgetal').value;
var waarde = 1;
var positie = invoer.length - 1;
var som = 0;
while (positie >= 0) {
var cijfer = invoer.charAt(positie);
var poswaarde;
if (cijfer == "a") {
poswaarde = 10 * waarde
} else if (cijfer == "b") {
poswaarde = 11 * waarde
} else if (cijfer == "c") {
poswaarde = 12 * waarde
} else if (cijfer == "d") {
poswaarde = 13 * waarde
} else if (cijfer == "e") {
poswaarde = 14 * waarde
} else if (cijfer == "f") {
poswaarde = 15 * waarde
} else {
poswaarde = cijfer * waarde;
}
som = som + poswaarde;
positie--;
waarde = waarde * talstelselVan;
var som2 = som * gewenstgetal;
var ant2 = som2 * (gewenstgetal / 4);
document.getElementById('output1').value = som;
document.getElementById('output2').value = ant2;
}
}
/*phone*/
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav {
background-color: #10689A;
overflow: hidden;
}
#calcie {
margin-left: 19.5vw !important;
text-align: center;
background-color: grey;
border: solid grey;
width: 50vw;
border-radius: 2em;
}
input[type="text"] {
width: 40vw !important;
}
header {
display: none;
}
#bobies {
width: 20vw;
position: absolute;
margin-left: 40vw;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #10689A;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
#desktop {
display: none;
}
#home {
margin-left: 2vw;
}
#logo {
margin-top: 20%;
position: absolute;
}
#welkomstekst {
background-color: #10689A;
width: 70vw;
margin-left: 15vw;
text-align: center;
padding: 20px;
margin-top: 10vh;
line-height: 1.9;
border-radius: 2em;
}
#welkomstekst p {
color: white;
font-size: 5vw;
}
#toekomstreferencie {
width: 40vw;
height: 10vh;
margin-left: 28vw;
margin-top: 3vh;
background-color: #10689A;
border-radius: 2em;
margin-bottom: .9em;
}
#toekomstreferencie button {
width: 32vw;
height: 4vh;
margin-left: 4vw;
margin-top: 3vh;
border-radius: 2em;
}
header {
width: 86.5vw;
margin-left: 30%;
}
footer {
margin-top: 10vw;
}
#biggie {
max-width: 2vw;
}
}
/*Tablet*/
#media screen and (min-width: 601px) {
#phone {
display: none;
}
#Navbar {
background-color: #10689A;
width: 99vw;
height: 120px;
min-width: : 500px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
#Navbar a {
color: white;
font-size: 15px;
margin-top: 30px;
margin-right: 10%;
}
#Navbar img {
width: 5vw;
height: 5vw;
Margin-top: -5px;
}
#calcie {
margin-left: 37.5vw !important;
text-align: center;
background-color: grey;
border: solid grey;
width: 14vw;
border-radius: 2em;
}
input[type="text"] {
width: 10vw !important;
}
#desktop {
display: flex;
flex-wrap: nowrap;
}
#home {
margin-left: 2vw;
}
#logo {
margin-top: 20%;
position: absolute;
}
#welkomstekst {
background-color: #10689A;
width: 50vw;
margin-left: 25vw;
text-align: center;
padding: 20px;
margin-top: 4vh;
line-height: 1.9;
border-radius: 2em;
}
#welkomstekst p {
color: white;
font-size: 2vw;
}
#toekomstreferencie {
width: 15vw;
height: 10vh;
margin-left: 42vw;
margin-top: 3vh;
background-color: #10689A;
border-radius: 2em;
margin-bottom: .9em;
}
#toekomstreferencie button {
width: 11vw;
height: 4vh;
margin-left: 2.0vw;
margin-top: 3vh;
border-radius: 2em;
}
header {
width: 86.5vw;
margin-left: 30%;
}
footer {
margin-top: 10vw;
}
#biggie {
max-width: 2vw;
}
}
/*Desktop*/
#media screen and (min-width: 1250px) {
#phone {
display: none;
}
#Navbar {
background-color: #10689A;
width: 99vw;
height: 120px;
min-width: : 500px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
#Navbar a {
color: white;
font-size: 15px;
margin-top: 30px;
margin-right: 10%;
}
#calcie {
margin-left: 37.5vw !important;
text-align: center;
background-color: grey;
border: solid grey;
width: 13vw;
border-radius: 2em;
}
input[type="text"] {
width: 10vw !important;
}
#Navbar img {
width: 5vw;
height: 5vw;
Margin-top: -5px;
}
#desktop {
display: flex;
flex-wrap: nowrap;
}
#home {
margin-left: 2vw;
}
#logo {
margin-top: 20%;
position: absolute;
}
#welkomstekst {
background-color: #10689A;
width: 50vw;
margin-left: 25vw;
text-align: center;
padding: 20px;
margin-top: 4vh;
line-height: 1.9;
border-radius: 2em;
}
#welkomstekst p {
color: white;
}
#toekomstreferencie {
width: 15vw;
height: 10vh;
background-color: #10689A;
border-radius: 2em;
display: grid;
grid-area: grid;
grid-template-columns: auto;
grid-template-areas: 'grid';
margin-bottom: .9em;
}
#toekomstreferencie button {
width: 7vw;
height: 4vh;
margin-left: 3.7vw;
margin-top: 3vh;
font-size: 1.2vw;
border-radius: 2em;
}
header {
width: 46.5vw;
margin-left: 30%;
}
footer {
margin-top: 10vw;
}
#biggie {
max-width: 2vw;
}
#buttie {
min-width: 9vw;
margin-left: 3vw !important;
}
}
/*HD (High defenition)*/
#media screen and (min-width: 1800px) {
#bigmama1 {
width: 20vw;
height: 10vw;
position: absolute;
background-color: #10689A;
margin-left: 19vw;
margin-top: 4vw;
padding-left: 1.3vw;
}
#bigmama2 {
width: 11vw;
height: 10vw;
position: absolute;
background-color: #10689A;
margin-left: 24vw;
margin-top: 20vw;
}
#id1 {
margin-left: 22vw;
margin-top: 2vw;
position: absolute;
}
#nassi,
#nabr[type="text"] {
max-width: 2vw;
}
#id2 {
position: absolute;
margin-left: 26.5vw;
margin-top: 18vw;
}
#output1 {
margin-top: .5vw;
width: 17.1vw !important;
text-align: center;
height: 7vw;
overflow: auto;
}
#phone {
display: none;
}
#Navbar {
background-color: #10689A;
width: 99vw;
height: 120px;
min-width: : 500px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
#Navbar a {
color: white;
font-size: 15px;
margin-top: 30px;
margin-right: 10%;
}
#calcie {
margin-left: 24.5vw !important;
text-align: center;
background-color: grey;
border: solid grey;
width: 9vw;
border-radius: 2em;
}
input[type="text"] {
width: 7vw !important;
}
#Navbar img {
width: 5vw;
height: 5vw;
Margin-top: -5px;
}
#desktop {
display: flex;
flex-wrap: nowrap;
}
#home {
margin-left: 2vw;
}
#logo {
margin-top: 20%;
position: absolute;
}
#welkomstekst {
background-color: #10689A;
width: 50vw;
margin-left: 25vw;
text-align: center;
padding: 20px;
margin-top: 4vh;
line-height: 1.9;
border-radius: 2em;
}
#welkomstekst p {
color: white;
}
#toekomstreferencie {
width: 15vw;
height: 8vh;
background-color: #10689A;
border-radius: 2em;
display: grid;
grid-area: grid;
grid-template-columns: auto;
grid-template-areas: 'grid';
margin-bottom: .9em;
}
#toekomstreferencie button {
width: 7vw;
height: 4vh;
margin-left: 3.7vw;
margin-top: 3vh;
font-size: 1.2vw;
border-radius: 2em;
}
header {
width: 46.5vw;
margin-left: 36%;
}
footer {
margin-top: 10vw;
}
#biggie {
max-width: 2vw;
}
#buttie {
min-width: 9vw;
margin-left: 3vw !important;
}
}
#bobie {
width: 3vw !important;
}
.nav-item {
padding-top: 1.4vw;
}
.dropdown {
max-width: 10vw;
float: right;
padding-top: 1.7vw;
}
.Fibo {
background-color: #10689A;
width: 50vw;
margin-left: 5vw;
text-align: center;
padding: 20px;
margin-top: 4vh;
line-height: 1.9;
border-radius: 2em;
}
#dReeksP {
color: white;
}
#dReeksF {
color: white;
}
#output2 {
margin-left: 12.9vw;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header>
<div id="desktop">
<ul class="nav nav-tabs auto-fill">
<li class="nav-item">
<a class="nav-link active" href="index.html"><img id="bobie" src="IMG/calculatorlogo.png"></a>
</li>
<li class="nav-item">
<a class="nav-link active" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Rad van fortuin</a>
<li class="nav-item">
<a class="nav-link active" href="#">Shoot the pig</a>
</li>
</li>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Rekenen
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Rekenpagina</li>
<li>Gevorderd rekenpagina</li>
<li>reeksen</li>
<li>Omrekenen</li>
</ul>
</div>
</ul>
</div>
</header>
<section id="phone">
<img id="bobies" src="IMG/calculatorlogo.png">
<div class="topnav" id="myTopnav">
Home
Rekenpagina
Gevordend Rekenpagina
Reeksen
Omrekenen
Rad van fortuin
Shoot the pig
☰
</div>
</section>
<div id="minis">
<div id="welkomstekst">
<p>Welkom bij <strong>Math-mate m2</strong> hier kan je:<br> lekker <strong>rekenen met hexa</strong></br>
eigen manier, heb je na het <strong>rekenen</strong></br>
zin in wat ontspanning speel shoot the pig!</p>
</div>
</div>
<div id="toekomstreferencie"><button id="buttie" onclick="toggle_visibility('minis')" href="#slides" data-toggle="collapse">Hexa's</button></div>
<div class="collapse" id="slides">
<div class="container">
<h3 id="id1">Binair naar hexadecimaal</h3>
<div id="bigmama1">
<form>
<input type="text" value "" id="omzettenInvoer" placeholder="Waarde" value="1010" />
<input type="number" value "" id="omvettenVan" placeholder="tal" value="2" />
<button type="button" id="arie" value "" name="-->" disabled>--></button>
<input type="text" value "" id="gewenstgetal" placeholder="tal" />
<button type="button" value="verzenden" onclick="omzetten()">Bereken</button></br>
<input type="text" value "" id="output1" name="input" />
<input type="text" value "" id="output2" name="input" />
</form>
</div>
<h3 id="id2">Factorizer</h3>
<div id="bigmama2">
<form>
<input type="text" value "" id="getalie" placeholder="Hier invullen" name="input" />
<button type="button" value="verzenden" onclick="he()">Bereken</button>
</form>
</div>
</div>
</div>
<footer>
<p> © Ravi Breugom en Alexander wallaard</p>
</footer>

Categories