We Keep Coding

My toggle button will not switch from left to right, I have coded in JavaScript and cannot find the bug?

First someone suggested it was a typo with my classList property and I made the necessary changes but it still is not working. I have js node downloaded but it still is not responding. Can anyone help? I cant yet find the bug i need some extra help. I have posted my css javascript and html files below
Here is my work..
var btn = document.getElementById("btn");
function togglebtn() {
btn.classList.toggle(".active");
}
*{
margin: 0;
padding: 0;
font-family: 'poppins', sans-serif;
box-sizing: border-box;
}
.hero{
background: #1d2026;
min-height: 100vh;
width: 100%;
color: #fff;
position: relative;
}
nav{
display: flex;
align-items: center;
}
nav .menu{
padding-right: 30px;
padding-left: 10px;
padding-bottom: 40px;
cursor: pointer;
}
nav .logo{
width: 500px;
height: 200px;
object-fit: none;
padding-right: 50px;
padding-bottom: 60px;
}
nav ul{
flex: 1;
text-align: right;
margin-right: 20px;
}
nav ul li{
display: inline-block;
list-style: none;
margin-right: 20px;
padding-bottom: 100px;
font-size: 25px;
margin: 0 20px;
}
nav ul a{
text-decoration: none;
color: #fff;
}
nav button{
background: #efefef;
height:30px ;
width: 60px;
border-radius: 20px;
border: 0;
outline: 0;
cursor: pointer;
margin-bottom: 100px;
margin-right: 20px;
}
nav button span{
display: block;
background: #999;
height: 26px;
width: 26px;
border-radius: 50%;
margin-left: 2px;
}
.lamp-set{
position: absolute;
top: -20px;
left: 22%;
width: 200px;
}
.lamp{
width: 100%;
}
.light{
position: absolute;
top: 97%;
left: 50%;
transform: translateX(-50%);
width: 700px;
margin-left: -10px;
opacity: 1;
}
.text-container{
max-width: 1000px;
margin-top: 2%;
margin-left: 50%;
}
.text-container h1{
font-size: 80px;
font-weight: 400;
display: inline-block;
color: #fff;
}
.text-container p{
font-size: 40px;
font-weight: 200;
display: inline-block;
color: #fff;
margin-top: 10px;
}
.emails{
background: #00a8f3;
padding: 14px 40px;
display: inline-block;
color: #fff;
font-size: 25px;
margin-top: 30px;
margin-left: 50%;
border-radius: 30px;
}
.active{
background: turquoise;
}
.active span{
background:#ffff ;
margin-left: 31px;
}
<div class="hero">
<nav>
<img src="menu.png" class="menu">
<img src="ovlogo.png" class="logo">
<ul>
<li>
<a href="">
Home
</li>
<li><a href="">contact</li>
<li><a href="">shop</li>
</ul>
<button type="button" onclick="togglebtn()" id="btn"><span></span></button>
</nav>
<div class="lamp-set">
<img src="lamp.png" class="lamp">
<img src="light.png" class="light">
</div>
<div class="text-container">
<h1>One Stop Shop.</h1>
<p>Get the latest "as seen on" products and appliances that fit you and your everyday needs.We specialize in variety and identifying cunsumer sentiment to maximize the expirence with overviral, your online marketplace. </p>
</div>
<div class="emails">
subscribe for emails
</div>
</div>

You have to remove the "." from the toggle function className.
function togglebtn() {
btn.classList.toggle("active"); // remove the "." from the class name
}

Managing shipment progress bar in percentage using HTML CSS JS

I have the below code where I am trying to show the shipment progress. I want such that I want to show place B point based on how much distance is covered. For example : If 70% of total distance is completed, progress bar will show PLACE B point on 70% of the width of total progress bar.
Could you please help, whatever I tried it is breaking the whole thing, yes I am noob. Please help.
.progress {
list-style: none;
margin: 0;
padding: 0;
display: table;
table-layout: fixed;
width: 100%;
color: #849397;
}
.progress > li {
position: relative;
display: table-cell;
text-align: center;
font-size: 0.8em;
}
.progress > li:before {
content: '';
display: block;
margin: 0 auto;
background: #dfe3e4;
width: 3em;
height: 3em;
text-align: center;
margin-bottom: 0.25em;
line-height: 3em;
border-radius: 100%;
position: relative;
z-index: 1000;
}
.progress > li:after {
content: "";
position: absolute;
display: block;
background: #dfe3e4;
width: 100%;
height: 0.5em;
top: 1.25em;
left: 50%;
margin-left: 1.5em\9;
z-index: -1;
}
.progress > li:last-child:after {
display: none;
}
.progress > li.is-complete {
color: #2ecc71;
}
.progress > li.is-complete:before, .progress > li.is-complete:after {
color: #fff;
background: blue;
}
.progress > li.is-active {
color: blue;
}
.progress > li.is-active:before {
color: #fff;
background: green;
}
/**
* Needed for IE8
*/
.progress__last:after {
display: none !important;
}
/**
* Some Generic Stylings
*/
*,
*:after,
*:before {
box-sizing: border-box;
}
<ol class="progress">
<li class="is-complete" data-step="1">
Place A
</li>
<li class="is-active" data-step="2">
Place B
</li>
<li data-step="3" class="progress__last">
Place C
</li>
</ol>
JS Bin Demo

Try below example
.progress {
padding: 40px 0;
position: relative;
}
.progress::before,
.progress::after {
content: "";
background-color: #dfe3e4;
height: 0.5em;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
}
.progress::before {
width: 100%;
}
.progress::after {
width: 70%;
background: #008000;
}
.progress li {
position: relative;
list-style: none;
z-index: 1;
display: inline-block;
}
.progress li:first-child {
left: 0;
}
.progress li.is-active {
left: 70%;
position: absolute;
}
.progress li:last-child {
float: right;
}
.progress > li:before {
content: "";
display: block;
margin: 0 auto;
background: #dfe3e4;
width: 3em;
height: 3em;
text-align: center;
line-height: 3em;
border-radius: 100%;
position: relative;
z-index: 1000;
}
.progress li:first-child:before {
background: #0000ff;
}
.progress li.is-active:before {
background: #008000;
}
.progress li span {
position: absolute;
bottom: -20px;
width: max-content;
}
<ol class="progress">
<li class="is-complete" data-step="1"><span>Place A</span></li>
<li class="is-active" data-step="2"><span>Place B</span></li>
<li data-step="3" class="progress__last"><span>Place C</span></li>
</ol>

The basic idea is to have 2 elements that connect your circles: one with the background color and one with the active color. Then you will have to inject the real width value from JS of from the backend, based on your real application.
Here an example made from your code:
.progress {
list-style: none;
margin: 0;
padding: 0;
display: table;
table-layout: fixed;
width: 100%;
color: #849397;
}
.progress > li {
position: relative;
display: table-cell;
text-align: center;
font-size: 0.8em;
}
.progress > li:before {
content: '';
display: block;
margin: 0 auto;
background: #dfe3e4;
width: 3em;
height: 3em;
text-align: center;
margin-bottom: 0.25em;
line-height: 3em;
border-radius: 100%;
position: relative;
z-index: 1000;
}
.progress > li:after {
content: "";
position: absolute;
display: block;
background: #dfe3e4;
width: 100%;
height: 0.5em;
top: 1.25em;
left: 50%;
margin-left: 1.5em\9;
z-index: -1;
}
.progress span.path:after {
content: "";
position: absolute;
display: block;
background: #dfe3e4;
width: 100%;
height: 0.5em;
top: 1.25em;
left: 50%;
margin-left: 1.5em\9;
z-index: -1;
}
.progress > li:last-child:after {
display: none;
}
.progress > li.is-complete {
color: #2ecc71;
}
.progress > li.is-complete:before, .progress > li.is-complete:after {
color: #fff;
background: blue;
}
.progress > li.is-complete:after {
width: 70%;
}
.progress > li.is-active {
color: blue;
}
.progress > li.is-active:before {
color: #fff;
background: green;
}
/**
* Needed for IE8
*/
.progress__last:after {
display: none !important;
}
/**
* Some Generic Stylings
*/
*,
*:after,
*:before {
box-sizing: border-box;
}
<ol class="progress">
<li class="is-complete" data-step="1">
<span class="path"></span>
Place A
</li>
<li class="is-active" data-step="2">
Place B
</li>
<li data-step="3" class="progress__last">
Place C
</li>
</ol>

How can i make this custom Stepper?

I want to make the Stepper with two circle (one inside other), linked to other circle, but that circle inside other is hard to do, i can i do it?
I try using this https://jsfiddle.net/dedi_wibisono17/c69e374r/2/ and change it to look like that i want to do, but i fail!
<div class="row">
<div class="col-xs-12 col-md-8 offset-md-2 block border">
<div class="wrapper-progressBar">
<ul class="progressBar">
<li class="active">Beong Processed</li>
<li class="active">Waiting for payment</li>
<li>Paid</li>
</ul>
</div>
</div>
</div>
.wrapper-progressBar {
width: 100%
}
.progressBar {
}
.progressBar li {
list-style-type: none;
float: left;
width: 33%;
position: relative;
text-align: center;
}
.progressBar li:before {
content: " ";
line-height: 30px;
border-radius: 50%;
width: 30px;
height: 30px;
border: 1px solid #ddd;
display: block;
text-align: center;
margin: 0 auto 10px;
background-color: white
}
.progressBar li:after {
content: "";
position: absolute;
width: 100%;
height: 2px;
background-color: #ddd;
top: 15px;
left: -50%;
z-index: -1;
}
.progressBar li:first-child:after {
content: none;
}
.progressBar li.active {
color: dodgerblue;
}
.progressBar li.active:before {
border-color: dodgerblue;
background-color: dodgerblue
}
.progressBar li.active + li:after {
background-color: dodgerblue;
}
there was an error, the linked line with z-index=-1 it stay behind the section background, how can i put it in front ( i try change z-index but it not look well, it stay in front of the circle)

This should get you closer to what you're going for.
.wrapper-progressBar {
width: 100%;
}
.progressBar {
}
.progressBar li {
list-style-type: none;
float: left;
width: 33%;
position: relative;
text-align: center;
color:white
}
.progressBar li:before {
content: " ";
line-height: 30px;
border-radius: 50%;
width: 10px;
height: 10px;
display: block;
text-align: center;
padding:5px;
margin: 15px auto 25px;
background-color: white;
}
.progressBar li:after {
content: "";
position: absolute;
width: 94%;
height: 2px;
background-color: #19C1D5;
top: 18px;
left: -47%;
}
.progressBar li:first-child:after {
content: none;
}
.progressBar li.active:before {
margin:0 auto 10px;
border:15px solid #19C1D5;
}
The main changes were changing the margin of the li:before so it acts as a transparent border for the top and bottom, and changing li.active:before to revert the margin/add the border.

The first step of my Step Progress Bar cannot be activated VUEJS

So i tried to make an Step Progress Bar, I was able to do so but I got a small bug.
I programmed it so that if an List Object gets the Class "active" it will turn this step green for active. But now I have the Problem if the first step/List Object is active the second Step turns green
Heres my HTMl and css:
<div class="container">
<div class="progressbar">
<ul style="list-style-type:none;">
<li>Video Anschauen</li>
<li>Fragen beantworten</li>
<li>Rabatt erhalten</li>
</ul>
</div>
And heres my CSS:
.container{
width: 100%;
position: absolute;
z-index: 1;
margin-left: 20%;
overflow: auto;
}
.progressbar {
counter-reset: step;
}
.progressbar li{
float: left;
width: 25%;
position: relative;
text-align: center;
}
.progressbar li:before{
content:counter(step);
counter-increment: step;
width: 30px;
height: 30px;
border: 2px solid black;
display: block;
margin: 0 auto 10px auto;
border-radius: 50%;
line-height: 27px;
background: white;
color: black;
text-align: center;
font-weight: bold;
}
.progressbar li:after{
content: '';
position: absolute;
width: 100%;
height: 3px;
background:black;
top: 15px;
left: -50%;
z-index: -1;
}
.progressbar li:first-child:after{
content: none;
}
.progressbar li.active + li:after{
background: #50d146;
}
.progressbar li.active + li:before{
border-color: #50d146;
background: #50d146;
color: white
}

jQuery animations work on one element and not another

I've been working on a mockup for an app store, and now that I've built the basic framework I wanted to start using jQuery to make certain things interactive. However, none of the jQuery actions I try will work. What's odd is that if I delete all my code, and then try to run a jQuery action with just one div, then it works. Also, if it helps, I am using the Brackets editor.
My code is below. The blue box is the div I animated before all the other code and the green box is the div I animated after the rest of the code. On my end only the blue div hides on click while the green div does nothing.
What's going wrong?
$(document).ready(function() {
$(".scroll-menu").click(function() {
$(".scroll-menu").hide();
});
$(".box").click(function() {
$(".box").hide();
});
});
.box {
z-index: -1;
margin-top: 20em;
position: relative;
width: 10em;
height: 20em;
background: green;
left: 20em
}
.scroll-menu {
background: blue;
height: 300px;
width: 500px;
margin: auto;
}
nav {
position: absolute;
height: 100%;
width: 16em;
left: 0;
top: 0;
background: #f5f5f5;
border-right: .1em solid grey
}
.mini-menu {
position: relative;
background: #E3E0E6;
top: 5em;
height: 32em
}
.top-menu {
position: relative;
top: 5em;
list-style-type: none;
margin-left: -1em;
}
.top-menu li {
position: relative;
padding-top: .2em;
padding-bottom: .2em;
font-size: 1.1em;
font-family: droid-sans;
font-weight: ;
border-radius: .5em;
margin-right: .5em;
margin-top: .5em;
margin-left: -.5em;
padding-left: 1em;
}
.top-menu li:hover {
background: #725490;
}
.top-menu li a {
text-decoration: none;
color: #000000
}
.top-menu li:hover a {
color: white;
}
.mini-menu ul li {
position: relative;
padding-top: .2em;
padding-bottom: .2em;
font-size: 1em;
font-family: droid-sans;
font-weight: ;
border-radius: .5em;
margin-right: .5em;
margin-top: .5em;
margin-left: -.5em;
padding-left: 1em;
}
.mini-menu ul {
position: relative;
top: .9em;
list-style-type: none;
margin-left: -1em;
}
.mini-menu ul li a {
text-decoration: none;
color: rgb(109, 52, 150);
}
.mini-menu a:hover {
color: #ab6bb1
}
.header {
position: absolute;
height: 5em;
width: 100%;
left: 0;
top: 0;
background: white;
z-index: 1;
border-bottom: .12em solid grey
}
.logo {
position: relative;
width: 10em;
height: auto;
left: 2em;
top: 2em
}
.app {
positio: relative;
margin-left: 8.8em;
margin-top: -.1em;
font-family: antic, ;
font-size: 1.4em
}
.search {
position: relative;
left: 12em;
top: -2em;
width: 15em;
border: .06em solid grey;
font-family: antic, ;
font-size: 1.9em;
padding-left: .5em
}
form i {
position: relative;
left: 11.5em;
top: -1.9em;
color: purple;
cursor: pointer;
}
.icon-open {
position: absolute;
top: 5em;
cursor: pointer;
z-index: 4;
left: 19em
}
.icon-open i {
cursor: pointer
}
{
position: relative;
background: green;
height 30em;
width: 6em;
top: 30em;
left: 50em;
border: solid;
z-index: 20;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box"></div>
<div class="scroll-menu"></div>
<nav>
<ul class="top-menu">
<li> Home</li>
<li> Popular</li>
<li>Trending</li>
<li>Collections</li>
</ul>
<div class="mini-menu">
<ul>
<li>Diagnosis & Staging</li>
<li>Image Review</li>
<li>Rx & Protocols</li>
<li>Planning</li>
<li>Chart Checks & Reviews</li>
<li>Calibration</li>
<li>Policy & Procedure</li>
<li>Certifications</li>
<li>Connected Clinical</li>
<li>Messaging</li>
<li>Utilities</li>
<li>Interfaces</li>
<li>Acounting & Finance</li>
<li>Clinical Analytics</li>
</ul>
</div>
</nav>
<div class="header">
<img src="MedLever-Logo-HighRes.png" class="logo">
<p class="app">App Store</p>
<form>
<input type="text" autocomplete="on" name="search" class="search">
<i class="fa fa-search fa-2x"></i>
</form>
</div>
<div class="icon-open">
<i class="fa fa-bars"></i>
</div>

You've given the .box element a z-index of -1. This places the element behind the <body> tag and makes it unable to be clicked.
The purpose of the z-index is not apparent, so I've removed it in my example, below, and both boxes are successfully hidden on click.
$(document).ready(function() {
$(".scroll-menu").click(function() {
$(".scroll-menu").hide();
});
$(".box").click(function() {
$(".box").hide();
});
});
.box {
margin-top: 20em;
position: relative;
width: 10em;
height: 20em;
background: green;
left: 20em
}
.scroll-menu {
background: blue;
height: 300px;
width: 500px;
margin: auto;
}
nav {
position: absolute;
height: 100%;
width: 16em;
left: 0;
top: 0;
background: #f5f5f5;
border-right: .1em solid grey
}
.mini-menu {
position: relative;
background: #E3E0E6;
top: 5em;
height: 32em
}
.top-menu {
position: relative;
top: 5em;
list-style-type: none;
margin-left: -1em;
}
.top-menu li {
position: relative;
padding-top: .2em;
padding-bottom: .2em;
font-size: 1.1em;
font-family: droid-sans;
font-weight: ;
border-radius: .5em;
margin-right: .5em;
margin-top: .5em;
margin-left: -.5em;
padding-left: 1em;
}
.top-menu li:hover {
background: #725490;
}
.top-menu li a {
text-decoration: none;
color: #000000
}
.top-menu li:hover a {
color: white;
}
.mini-menu ul li {
position: relative;
padding-top: .2em;
padding-bottom: .2em;
font-size: 1em;
font-family: droid-sans;
font-weight: ;
border-radius: .5em;
margin-right: .5em;
margin-top: .5em;
margin-left: -.5em;
padding-left: 1em;
}
.mini-menu ul {
position: relative;
top: .9em;
list-style-type: none;
margin-left: -1em;
}
.mini-menu ul li a {
text-decoration: none;
color: rgb(109, 52, 150);
}
.mini-menu a:hover {
color: #ab6bb1
}
.header {
position: absolute;
height: 5em;
width: 100%;
left: 0;
top: 0;
background: white;
z-index: 1;
border-bottom: .12em solid grey
}
.logo {
position: relative;
width: 10em;
height: auto;
left: 2em;
top: 2em
}
.app {
positio: relative;
margin-left: 8.8em;
margin-top: -.1em;
font-family: antic, ;
font-size: 1.4em
}
.search {
position: relative;
left: 12em;
top: -2em;
width: 15em;
border: .06em solid grey;
font-family: antic, ;
font-size: 1.9em;
padding-left: .5em
}
form i {
position: relative;
left: 11.5em;
top: -1.9em;
color: purple;
cursor: pointer;
}
.icon-open {
position: absolute;
top: 5em;
cursor: pointer;
z-index: 4;
left: 19em
}
.icon-open i {
cursor: pointer
}
{
position: relative;
background: green;
height 30em;
width: 6em;
top: 30em;
left: 50em;
border: solid;
z-index: 20;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box"></div>
<div class="scroll-menu"></div>
<nav>
<ul class="top-menu">
<li> Home</li>
<li> Popular</li>
<li>Trending</li>
<li>Collections</li>
</ul>
<div class="mini-menu">
<ul>
<li>Diagnosis & Staging</li>
<li>Image Review</li>
<li>Rx & Protocols</li>
<li>Planning</li>
<li>Chart Checks & Reviews</li>
<li>Calibration</li>
<li>Policy & Procedure</li>
<li>Certifications</li>
<li>Connected Clinical</li>
<li>Messaging</li>
<li>Utilities</li>
<li>Interfaces</li>
<li>Acounting & Finance</li>
<li>Clinical Analytics</li>
</ul>
</div>
</nav>
<div class="header">
<img src="MedLever-Logo-HighRes.png" class="logo">
<p class="app">App Store</p>
<form>
<input type="text" autocomplete="on" name="search" class="search">
<i class="fa fa-search fa-2x"></i>
</form>
</div>
<div class="icon-open">
<i class="fa fa-bars"></i>
</div>
Below is a demonstration of an element being placed behind the <body>. I've given the <body> a white background with an opacity of 0.9. Notice that the second green box has a white overlay because it's been placed behind the <body> with z-index:-1. Also notice that the first box can be clicked, but the second cannot.
html,body {
background-color:rgba(255,255,255,.9)
}
.box {
position:relative;
width: 10em;
height: 20em;
background: green;
display:inline-block;
}
.behind {
z-index:-1;
}
CLICK
CAN'T CLICK