Develop Reference

Having issue with alignment of multiple circular item in a row

I have created a circular shape where I show some percentages. I want to put multiple items in a row.
I tried with div and making display flex and nothing is working properly.
Here is a what I tried so far:
.meal-circular-progress{
position: relative;
height: 100px;
width: 100px;
border-radius: 50%;
background: conic-gradient(#7d2ae8 0deg, #ededed 0deg);
display: flex;
align-items: center;
justify-content: center;
margin:auto;
//transition: background 2s;
//transition-timing-function: ease;
//border: 1px solid red;
}
.meal-circular-progress::before{
content: "";
position: absolute;
height: 80px;
width: 80px;
border-radius: 50%;
background-color: #fff;
//border: 1px solid red;
}
.progress-value{
position: relative;
font-size: 40px;
font-weight: 600;
color: #7d2ae8;
}
<div class="col-sm-6 center">
<div class="meal-circular-progress" ng-style="c.circular">
<span class="progress-value">10%</span>
</div>
<div class="meal-circular-progress" ng-style="c.circular">
<span class="progress-value">10%</span>
</div>
<div class="meal-circular-progress" ng-style="c.circular">
<span class="progress-value">10%</span>
</div>
</div>

You need to make your parent element flexbox. In this case your parent element is center.
Make that element flexbox and use the align-items property to do so:
.center {
display: flex;
align-items: center;
justify-content: center;
}
.meal-circular-progress {
position: relative;
height: 100px;
width: 100px;
border-radius: 50%;
background: conic-gradient(#7d2ae8 0deg, #ededed 0deg);
display: flex;
align-items: center;
justify-content: center;
margin: auto;
}
.meal-circular-progress::before {
content: "";
position: absolute;
height: 80px;
width: 80px;
border-radius: 50%;
background-color: #fff;
}
.progress-value {
position: relative;
font-size: 40px;
font-weight: 600;
color: #7d2ae8;
}
<div class="col-sm-6 center">
<div class="meal-circular-progress" ng-style="c.circular">
<span class="progress-value">5%</span>
</div>
<div class="meal-circular-progress" ng-style="c.circular">
<span class="progress-value">10%</span>
</div>
<div class="meal-circular-progress" ng-style="c.circular">
<span class="progress-value">20%</span>
</div>
</div>

Flex the container
https://codepen.io/mplungjan/pen/xxJEPwx
#container {
display: flex;
flex-direction: row;
min-width: max-content;
max-width: max-content; /* optional */
border: 1px solid black;
}

How to make my red circle always stays on the green line using html and css code?

I have a webpage like this:
Its code can be found here in JSFiddle
<div class="arrow">
<div class="line"></div>
<div class="triangle"></div>
</div>
<div id="warmup_container">
<p id="warmup_title">這是中文</p>
<div id="warmup_mark"></div>
<p id="warmup_text">some text </p>
</div>
:root {
--arrow-body-length: 500px;
--arrow-tip-length: 30px;
}
.arrow {
position: absolute;
top: 42%;
width: var(--arrow-body-length) + var(--arrow-tip-length);
}
.line {
margin-top: 11px;
width: var(--arrow-body-length);
background: green;
height: 9px;
float: left;
}
.triangle {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: var(--arrow-tip-length) solid green;
float: right;
}
#warmup_container {
height: 200px;
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
top: 8%;
}
#warmup_title {
text-align: center;
margin-top: 0px;
writing-mode: vertical-rl;
}
#warmup_mark {
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
margin-top: 10px;
margin-bottom: -10px;
}
#warmup_text {
text-align: center;
width: 200px;
}
My problem is that when I add more characters into warmup_title, the red circle would not stay on the green line.
How can I change my code so that the red circle always stays on the green line no matter how many characters I type in warmup_title element?
The red circle might also not stay on the green line when I change the size of the window of my browser.

Try this:
:root {
--arrow-body-length: 500px;
--arrow-tip-length: 30px;
}
.arrow {
display: inline-flex;
position: absolute;
bottom: 40%;
width: var(--arrow-body-length) + var(--arrow-tip-length);
}
.line {
margin-top: 11px;
width: var(--arrow-body-length);
background: green;
height: 9px;
float: left;
}
.triangle {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: var(--arrow-tip-length) solid green;
float: right;
}
#warmup_container {
height: 200px;
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
top: 8%;
}
#warmup_title {
text-align: center;
margin-top: 0px;
writing-mode: vertical-rl;
}
#warmup_mark {
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
margin-top: 10px;
margin-bottom: -10px;
z-index: 10;
}
#warmup_text {
text-align: center;
width: 200px;
}
<div id="warmup_container">
<p id="warmup_title">這是中文abc</p>
<div id="warmup_mark"></div>
<p id="warmup_text">some text </p>
<div class="arrow">
<div class="line"></div>
<div class="triangle"></div>
</div>
</div>

Your idea of fixing the green line is right, but it shouldn't use the top property, since the text can be extend, so it will break the visual. Instead make it bottom to anchor it at the end; also remove the height: 200px, add an outer div with position: relative to contain the absolute one.
About the breaking arrow when changing window size, i think make it width: 100% with a max-width to contain the width of it done better job than fixing it right away, so it can responsive with the screen size.
:root {
--arrow-body-length: calc(100% - 30px);
--arrow-tip-length: 30px;
}
.container {
position: relative;
}
.arrow {
position: absolute;
bottom: 35px;
width: var(--arrow-body-length) + var(--arrow-tip-length);
width: 100%;
max-width: 500px;
}
.line {
margin-top: 11px;
width: var(--arrow-body-length);
background: green;
height: 9px;
float: left;
}
.triangle {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: var(--arrow-tip-length) solid green;
float: right;
}
#warmup_container {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
#warmup_title {
text-align: center;
margin-top: 0px;
writing-mode: vertical-rl;
}
#warmup_mark {
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
margin-top: 10px;
margin-bottom: -10px;
}
#warmup_text {
text-align: center;
width: 200px;
}
<div class="container">
<div class="arrow">
<div class="line"></div>
<div class="triangle"></div>
</div>
<div id="warmup_container">
<p id="warmup_title">這是中文abc def</p>
<div id="warmup_mark"></div>
<p id="warmup_text">some text </p>
</div>
</div>

Checkbox with classList.toggle isn't toggling the classes. No errors shown

I have a checkbox, that should trigger the menu to slide in from left side of the screen.The problem is when I got the menu hidden on the left, i can't make the function work. When I click the checkbox icon, it's animation works but nothing else happens. The menu is still hidden and I get no errors.
Here is a snippet of my code:
function showMenuSlider() {
var slider = document.querySelector(".menu-slider");
slider.classList.toggle("menu-slider-show");
var sliderOpacity = document.querySelector(".menu-slider-opacity");
sliderOpacity.classList.toggle("menu-slider-opacity-show")
}
* {
margin: 0;
padding: 0;
font-size: 16px;
font-family: Open Sans;
line-height: 1.6;
display: block;
}
html {
scroll-behavior: smooth;
}
main {
position: relative;
}
header {
width: 100%;
position: fixed;
top: 0;
z-index: 95;
box-shadow: 0px -2px 15px rgba(0, 0, 0, 1);
}
.header-container {
background-color: white;
display: flex;
flex-direction: column;
position: relative;
}
.header-upbar {
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 50;
background-color: white;
width: 100%;
margin-top: 9px;
}
.header-upbar p {
font-size: 16px;
font-weight: 500;
color: grey;
}
.header-upbar-item2,
.header-upbar-item3 {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.header-upbar a {
text-decoration: none;
flex-basis: 50%;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
padding: 8px;
border-bottom: 0.5px solid grey;
}
.header-upbar a:first-of-type {
border-right: 0.5px solid grey;
}
.header-upbar-item2 img {
height: 23px;
margin-right: 6px;
}
.header-upbar-item3 img {
height: 23px;
margin: 0px 6px 0px 0px;
}
.header-downbar {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 51;
background-color: white;
}
.header-downbar-logo {
display: flex;
align-content: center;
align-items: center;
justify-content: center;
}
.header-downbar-logo img {
margin: 18px 18px 18px 18px;
height: 30px;
}
.header-downbar-menu {
height: 40px;
width: 40px;
display: block;
position: fixed;
margin: 15px 18px 15px 18px;
z-index: 502;
right: 5px;
top: 50px;
z-index: 100;
}
#menu {
display: none;
}
.icon {
width: 100%;
height: 100%;
display: block;
cursor: pointer;
position: relative;
}
.icon .menu,
.icon .menu::before,
.icon .menu::after {
content: '';
background-color: rgba(50, 50, 50, 1);
display: block;
position: absolute;
height: 4px;
width: 35px;
transition: background ease .3s, top ease .3s .3s, transform ease .3s;
}
.menu {
top: 17.5px;
}
.menu::before {
top: 12px;
}
.menu::after {
top: -12px;
}
#menu:checked+.menu {
background: transparent;
}
#menu:checked+.menu::before {
transform: rotate(45deg);
}
#menu:checked+.menu::after {
transform: rotate(-45deg);
}
#menu:checked+.menu::before,
#menu:checked+.menu::after {
top: 0;
transition: top ease 0.3s, transform ease 0.3s 0.3s;
}
.menu-slider-opacity {
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
z-index: 98;
position: absolute;
top: 0;
left: -100%;
display: block;
}
.menu-slider {
width: 200px;
height: 100vh;
background-color: white;
z-index: 99;
position: absolute;
;
top: 0;
left: -100%;
display: block;
}
.menu-slider-show {
left: 0;
}
.menu-slider-opacity-show {
left: 0;
}
<div class="header-downbar-menu" onclick="showMenuSlider()">
<label for="menu" class="icon"><input type="checkbox" id="menu">
<div class="menu"></div>
</label>
</div>
<div class="menu-slider-opacity"></div>
<div class="menu-slider"></div>
<header id="header">
<div class="header-container">
<div class="header-upbar">
<a href="mailto: ">
<div class="header-upbar-item2">
<img src="img/Fenix-e-mail-icon-white.png" alt="">
<p>blablablabla#o2.pl</p>
</div>
</a>
<a href="tel: ">
<div class="header-upbar-item3">
<img src="img/Fenix-phone-icon-white.png" alt="">
<p>+48 999 999 999</p>
</div>
</a>
</div>
<div class="header-downbar">
<div class="header-downbar-logo">
<img src="img/Fenix-logo-black.png" alt="">
</div>
</div>
</div>
</header>
The button is outside the header, because i need it to be on top of the dark opacity behind the menu. In the future I will make a nice white rounded background to it, so it won't invisible.
Of course if you know better way to do it, be my guest. I'm struggling with this for a while...

The problem is that you add the onclick handler on the header-downbar-menu and not on the checkbox. So when clicking the checkbox you also click on header-downbar-menu so the event is triggered twice. So the class is toggled twice ( added/removed in the same time...almost :) )
Add the click event on the input. ( you could use an onchange event instead of the click event to check the state checked or unchecked , that might help you )
function showMenuSlider() {
var slider = document.querySelector(".menu-slider");
slider.classList.toggle("menu-slider-show");
var sliderOpacity = document.querySelector(".menu-slider-opacity");
sliderOpacity.classList.toggle("menu-slider-opacity-show")
}
html {
scroll-behavior: smooth;
}
main {
position: relative;
}
header {
width: 100%;
position: fixed;
top: 0;
z-index: 95;
box-shadow: 0px -2px 15px rgba(0, 0, 0, 1);
}
.header-container {
background-color: white;
display: flex;
flex-direction: column;
position: relative;
}
.header-upbar {
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 50;
background-color: white;
width: 100%;
margin-top: 9px;
}
.header-upbar p {
font-size: 16px;
font-weight: 500;
color: grey;
}
.header-upbar-item2,
.header-upbar-item3 {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.header-upbar a {
text-decoration: none;
flex-basis: 50%;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
padding: 8px;
border-bottom: 0.5px solid grey;
}
.header-upbar a:first-of-type {
border-right: 0.5px solid grey;
}
.header-upbar-item2 img {
height: 23px;
margin-right: 6px;
}
.header-upbar-item3 img {
height: 23px;
margin: 0px 6px 0px 0px;
}
.header-downbar {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 51;
background-color: white;
}
.header-downbar-logo {
display: flex;
align-content: center;
align-items: center;
justify-content: center;
}
.header-downbar-logo img {
margin: 18px 18px 18px 18px;
height: 30px;
}
.header-downbar-menu {
height: 40px;
width: 40px;
display: block;
position: fixed;
margin: 15px 18px 15px 18px;
z-index: 502;
right: 5px;
top: 50px;
z-index: 100;
}
#menu {
display: none;
}
.icon {
width: 100%;
height: 100%;
display: block;
cursor: pointer;
position: relative;
}
.icon .menu,
.icon .menu::before,
.icon .menu::after {
content: '';
background-color: rgba(50, 50, 50, 1);
display: block;
position: absolute;
height: 4px;
width: 35px;
transition: background ease .3s, top ease .3s .3s, transform ease .3s;
}
.menu {
top: 17.5px;
}
.menu::before {
top: 12px;
}
.menu::after {
top: -12px;
}
#menu:checked+.menu {
background: transparent;
}
#menu:checked+.menu::before {
transform: rotate(45deg);
}
#menu:checked+.menu::after {
transform: rotate(-45deg);
}
#menu:checked+.menu::before,
#menu:checked+.menu::after {
top: 0;
transition: top ease 0.3s, transform ease 0.3s 0.3s;
}
.menu-slider-opacity {
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
z-index: 98;
position: absolute;
top: 0;
left: -100%;
display: block;
}
.menu-slider {
width: 200px;
height: 100vh;
background-color: white;
z-index: 99;
position: absolute;
top: 0;
left: -100%;
display: block;
}
.menu-slider-show {
left: 0;
}
.menu-slider-opacity-show {
left: 0;
}
<div class="header-downbar-menu">
<label for="menu" class="icon"><input type="checkbox" id="menu" onclick="showMenuSlider()">
<div class="menu"></div>
</label>
</div>
<div class="menu-slider-opacity"></div>
<div class="menu-slider"></div>
<header id="header">
<div class="header-container">
<div class="header-upbar">
<a href="mailto: ">
<div class="header-upbar-item2">
<img src="img/Fenix-e-mail-icon-white.png" alt="">
<p>blablablabla#o2.pl</p>
</div>
</a>
<a href="tel: ">
<div class="header-upbar-item3">
<img src="img/Fenix-phone-icon-white.png" alt="">
<p>+48 999 999 999</p>
</div>
</a>
</div>
<div class="header-downbar">
<div class="header-downbar-logo">
<img src="img/Fenix-logo-black.png" alt="">
</div>
</div>
</div>
</header>

Animate a sound Bar using vanilla js

I want soundbar effects i.e
I want the corresponding divs(bars) to increase/decrease height indefinetely like in the code snippet below. I want to acheive the same effect in Vanilla JS.
I want them to change height randomly i.e 5 bars will change height in 5 random ways.
The Element.animate() method is not doing the job and I am not allowed to use any external libraries or API's as well. I am unsure of using the CSS animate method.
The code written below is in jQuery. I am unable to decipher the same solution in Vanilla JS.
function fluctuate(bar) {
var amplitude = Math.random() * 42;
console.log(amplitude);
var height = amplitude * 4;
//Animate the equalizer bar repeatedly
bar.animate({
height: height
}, 1000, function() {
fluctuate($(this));
});
}
$(".bar").each(function(i) {
fluctuate($(this));
console.log($(this));
});
.inline-block-wrapper {
display: inline-block;
margin-right: -4px;
}
.bar-wrapper {
background-color: black;
height: 160px;
width: 135px;
display: block;
position: relative;
}
.bar {
/* background-color: green; */
width: 100%;
height: 160px;
position: absolute;
left: 0px;
bottom: 0px;
}
.bar-container {
margin: auto;
width: 50%;
height: 10rem;
border: 15px solid black;
}
timers {
display: flex;
}
.start {
display: inline;
background-color: green;
margin-right: 50px;
padding: 10px 10px;
color: white;
border: none;
width: 100px;
height: 35px;
justify-content: center;
}
.stop {
display: inline;
background-color: red;
margin-left: 50px;
padding: 10px 10px;
color: white;
border: none;
width: 100px;
height: 35px;
justify-content: center;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
</head>
<body>
<div class="bar-container">
<div class="inline-block-wrapper">
<div class="bar-wrapper">
<div class="bar" style="background-color:#754ab7"></div>
</div>
</div>
<div class="inline-block-wrapper">
<div class="bar-wrapper">
<div class="bar" style="background-color:#c640a5"></div>
</div>
</div>
<div class="inline-block-wrapper">
<div class="bar-wrapper">
<div class="bar" style="background-color:#f05386"></div>
</div>
</div>
<div class="inline-block-wrapper">
<div class="bar-wrapper">
<div class="bar" style="background-color:#f58169"></div>
</div>
</div>
<div class="inline-block-wrapper">
<div class="bar-wrapper">
<div class="bar" style="background-color:#f9c059"></div>
</div>
</div>
</div>
<div class="timers">
<button class="start" onClick=f luctuate()> Start</button>
<button class="stop" onClick=s topSequence()> Stop</button>

Took a whole lot of CSS but I worked out a solution to something close to what I wanted.
var clicks = 0
function fluctuate(){
clicks+=1
if(clicks>1){
stopFluctuation()
}else{
document.querySelector('.div-stop').classList.toggle('animate-bars')
var bar = document.getElementsByClassName('div-bar')
}
}
function stopFluctuation() {
let count = 1;
let bars = document.getElementsByClassName('div-bar');
for(bar of bars) {
bar.classList.toggle('paused-bars');
}
}
.container {
border: 20px solid black;
background-color: black;
}
.button-container {
display: flex;
}
.start {
display: inline;
background-color: green;
margin-right: 50px;
padding: 10px 10px;
color: white;
border: none;
width: 100px;
height: 35px;
justify-content: center;
}
.stop {
display: inline;
background-color: red;
margin-left: 50px;
padding: 10px 10px;
color: white;
border: none;
width: 100px;
height: 35px;
justify-content: center;
}
.div-stop {
display: flex;
align-items: center;
width: 550px;
height: 150px;
overflow: hidden;
}
.div-stop div {
flex: 10 auto;
height: 100%;
margin: 0;
}
.animate-bars div {
animation: animate-bar 500ms linear infinite alternate;
transform-origin: bottom;
}
.animate-bars div:first-child {
margin-left: 0;
}
.animate-bars div:last-child {
margin-right: 0;
}
.animate-bars div:nth-child(1) {
animation-duration: 2200ms;
animation-delay: 9ms;
position: relative;
top:22%;
}
.animate-bars div:nth-child(2) {
animation-duration: 1500ms;
animation-delay: 0ms;
position: relative;
top: 33%;
}
.animate-bars div:nth-child(3) {
animation-duration: 1789ms;
animation-delay: 5ms;
position: relative;
}
.animate-bars div:nth-child(4) {
animation-duration: 2786ms;
animation-delay: 7ms;
position: relative;
top: 10%;
}
.animate-bars div:nth-child(5) {
animation-duration: 1659ms;
animation-delay: 8ms;
position: relative;
top: 27%;
}
#keyframes animate-bar {
0% {
transform: scaleY(0);
}
100% {
transform: scaleY(100%);
}
}
body {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
body::after {
content: "";
position: absolute;
top: 50%;
right: 0;
left: 0;
width: 100%;
height: 1px;
}
.paused-bars {
-webkit-animation-play-state: paused;
animation-play-state: paused !important;
}
<div class = "container">
<div class="div-stop">
<div style="background-color:#754ab7" class="div-bar"></div>
<div style="background-color:#c640a5" class="div-bar"></div>
<div style="background-color:#f05386" class="div-bar"></div>
<div style="background-color:#f58169" class="div-bar"></div>
<div style="background-color:#f9c059" class="div-bar"></div>
</div>
</div>
<div class = "button-container">
<button id="start" class= "start" onClick="fluctuate()">Start</button>
<button id="stop" class = "stop" onClick="stopFluctuation()">Stop</button>
</div>

Resizing of a Absolute Positioned Element

The Element is not resizing and browser is not re-calculating the position of the Element even though all the widths and heights are mentioned in percentages only. This code basically renders a Squared DIV with Two elements one with Centered and another at right top corner of the SQuare.
<html>
<head>
<style>
.board {
font-size: 8em;
}
.cellContainerOuter {
width: 100%;
padding-bottom: 100%;
position: relative;
background-color: yellow;
border: 1px solid black;
}
.cellContainer {
width: 100%;
padding-bottom: 100%;
position: absolute;
display: table;
}
.cellContainerInner {
padding-bottom: 50%;
padding-top: 50%;
padding-left: 50%;
padding-right: 50%;
position: relative;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.text {
border: 0px dotted white;
position: absolute;
bottom: 20%;
top: 20%;
left: 20%;
right: 20%;
overflow: hidden;
text-overflow: clip;
display: block;
}
.weight {
position: absolute;
right: 0px;
top: 0px;
margin: 2px;
border: 1px solid white;
}
</style>
</head>
<body>
<div class="board">
<div id="cell3_C_1" class="cellContainerOuter" title="ఇ">
<div id="cell2_C_1" class="cellContainer" title="ఇ">
<div id="cell_C_1" class="cellContainerInner" title="ఇ">
<span id="weight_C_1" class="weight" title="6">6</span>
<span id="text_C_1" class="text" title="ఇ">ఇ</span>
</div>
</div>
</div>
</div>
</body>
</html>
Any help to resolve this issue is highly appreciated.
CodePen: https://codepen.io/mdileep/full/MGrNgw/

Refactored your CSS.
Let me know if this is the behaviour you are expecting.
OR with responsive you mean to change your height of 6 as well?
body {
margin: 0;
}
.cellContainer {
position: relative;
background: yellow;
width: calc(100vw - 20px);
height: calc(100vh - 20px);
margin: 10px;
}
.cellContainerInner {
border: 1px solid;
height: 100%;
display: flex;
}
.weight {
font-size: 8em;
position: absolute;
right: 0px;
top: 0px;
border: 1px solid;
}
.text {
flex: 1;
font-size: 8em;
/* border:2px solid; */
align-self: center;
text-align: center;
}
<div class="board">
<div id="cell3_C_1" class="cellContainerOuter" title="ఇ">
<div id="cell2_C_1" class="cellContainer" title="ఇ">
<div id="cell_C_1" class="cellContainerInner" title="ఇ">
<span id="weight_C_1" class="weight" title="6">6</span>
<span id="text_C_1" class="text" title="ఇ">ఇ</span>
</div>
</div>
</div>
</div>