We Keep Coding

How to create a square box in which the border of the box will be filled by color depending on the value given on the box?

Just like the above image or an idea or reference to achieve this design, I appreciate the help or suggestion given by community thank you
I have got reference of progress bar which is circular but not able find an approach to solve it.

const boxes = document.querySelectorAll(".box");
const colors = ['red', 'blue', 'green', 'yellow', 'orange', 'violet']
boxes.forEach((box) => {
const insideContent = box.innerText;
box.style.border = `6px solid ${colors[insideContent]}`
})
#app {
display: flex;
}
.box {
width: 50px;
height: 50px;
margin: 10px;
background-color: cyan;
display: flex;
justify-content: center;
align-items: center;
}
<div id="app">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
As per your question I think this is what you are trying to achieve.

First define a pseudo class root
:root {
--color-val: blue;
}
Note: In order to use the --color-val you need to write it as color: var(--color-var) in CSS
Second use JavaScript to update the variable --color-val
let colors =
var root = document.querySelector(':root');
const delay = ms => new Promise(res => setTimeout(res, ms));
const colorChange = async () => {
await delay(1000);
color = colors[Math.floor(Math.random() * colors.length)]
console.log(color)
root.style.setProperty('--color-val', color);
};
colorChange()
Note:
Add the color list you want to select from or go to CodePen for a list of 1000+ hex codes.
Promise are used for asynchronous function and can be skipped by using setTimeOut for a delayed loop or if used with another eventlistener.

I apologize if I misunderstood the question. Wrote in a hurry and without beautyful visualisation, if you disassemble the principle, you can customize it.
h1 {
display: block;
margin:0 auto;
text-align: center;
padding-top:20%;
}
.container {
display:flex;
width: 150px;
height: 150px;
border: 1px solid black;
z-index: 110;
margin:0;
margin: -10px;
}
.top {
display:block;
background-color: green;
height: 24px;
width: 150px; /* gorizontal top */
animation: top 1s linear;
animation-fill-mode: forwards;
}
#keyframes top {
0% {
width: 0px;
}
100% {
width: 150px;
}
}
.right {
background-color: green;
height: 0%;/* right */
width: 32px;
animation: right 1s linear;
animation-fill-mode: forwards;
animation-delay: 1s;
z-index: 10;
}
#keyframes right {
0% {
height: 0%;
}
100% {
height: 100%;
}
}
.box {
position: fixed;
top: 32.5px;
left: 32.5px;
width: 100px;
height: 100px;
border: 1px solid black;
margin: auto;
z-index: 120;
margin: -10px -10px;
}
.bottom {
position: absolute;
top: 123px;
left: 150px;
background-color: green;
width: 0px;
height: 27px;
z-index: 10;
animation: bottom 1s linear;
animation-fill-mode: forwards;
animation-delay: 2s;
/* animation-direction: reverse; */
}
#keyframes bottom {
0% {
transform: translate(0,0);
}
100% {
transform: translate(-250px,0);
-webkit-transform: translate(-250px,0); /** Safari & Chrome **/
-o-transform: translate(-250px,0); /** Opera **/
-moz-transform: translate(-250px,0); /** Firefox **/
width: 250px;
}
}
.left {
position: absolute;
top: 122px;
background-color: green;
width: 25px;
height: 0px;
animation: left 1s linear;
animation-fill-mode: forwards;
animation-delay: 3s;
}
#keyframes left {
0% {
transform: translate(0,0);
}
100% {
transform: translate(0,-250px);
-webkit-transform: translate(0,-250px); /** Safari & Chrome **/
-o-transform: translate(0,-250px); /** Opera **/
-moz-transform: translate(0,-250px); /** Firefox **/
height: 277px;
}
}
<div class='head'>
<div class='container'>
<div class='top'></div>
<div class='box'>
<h1 id='timer'>
1
</h1>
</div>
<div class='right'></div>
<div class='bottom'></div>
<div class='left'></div>
</div>
</div>
<script type="text/javascript">
init()
function init()
{
sec = 0;
setInterval(tick, 1000);
}
function tick()
{ if (sec<3) { sec++
document.getElementById("timer").
childNodes[0].nodeValue = sec;
} else {
clearInterval(0);
}
}
</script>
Also, instead of the SetInterval script, you can take values from your block width and height styles and output a mathematical calculation in h1 instead of a stopwatch.
upd: After your comment, I decided to do what I wrote about above. You can play with values and math, I add a snippet of another solution that changes the progress bar from the entered values within the entered range. (of course, it would be easier on react than on pure js)
function grade () {
let grade = +document.getElementById("grade").value;
let range = +document.getElementById("range").value;
document.getElementById("timer").innerHTML = `${grade}/${range}`;
progress(grade,range)
}
function progress (value, grade) {
document.getElementById('1').style.backgroundColor = `white`
document.getElementById("left").className = "noactive";
document.getElementById('top').style.width = `0%`
document.getElementById('right').style.height = `0%`
document.getElementById('bottom').style.width = `0%`
let GradeValuSide = grade/4;
if (value <= GradeValuSide) {
document.getElementById('top').style.width =
`${value/GradeValuSide*100}%`
} else if (value > GradeValuSide && value <= (GradeValuSide*2)) {
document.getElementById('top').style.width = `100%`
document.getElementById('right').style.height =
`${(value-GradeValuSide)/GradeValuSide*100}%`
} else if (value >= grade/2 && value < (grade/4)*3) {
document.getElementById('top').style.width = `100%`
document.getElementById('right').style.height = `100%`
document.getElementById('bottom').style.width =
`${((((value-(GradeValuSide*2)) / GradeValuSide) *100) / 100) *27}%`
} else if (value >= grade-(grade/4) /* && value < value + 1 */) {
document.getElementById('top').style.width = `100%`
document.getElementById('right').style.height = `100%`
document.getElementById('bottom').style.width = `100%`
document.getElementById('1').style.backgroundColor = `green`
document.getElementById("left").className = "left";
document.getElementById('left').style.height =
`${(40 - (40 * ((((value-(GradeValuSide*3)) * 100) / GradeValuSide)/ 100)))}%`
}
}
h1 {
font-size:20px;
position: absolute;
left: 40px;
display: block;
margin: 0 auto;
align-items: center;
padding-top:10%;
}
.container {
display:flex;
width: 150px;
height: 150px;
border: 1px solid black;
margin:0;
margin: -10px;
}
div.top {
display:block;
background-color: green;
height: 24px;
width: 0%; /* gorizontal top */
z-index:999;
}
div.right {
position:relative;
background-color: green;
height: 0%;/* right */
width: 32px;
z-index: 9999;
}
.box {
position: fixed;
top: 32.5px;
left: 32.5px;
background-color:white;
width: 100px;
height: 100px;
border: 1px solid black;
margin: auto;
z-index: 120;
margin: -10px -10px;
}
.wrap{
position: relative;
}
div.bottom {
position: absolute;
top: 123px;
background-color: green;
width: 0%; /* 27 = 100% */
height: 27px;
float: right;
right: 78vw;
z-index: 100;
}
div.left {
position: absolute;
background-color: white;
width: 23px;
height: 40%;
top: 23px;
bottom: 10px;
left: 0;
float: top;
}
div.noactive {
position: absolute;
background-color: white;
width: 23px;
height: 0%;
top: 23px;
bottom: 10px;
left: 0;
float: top;
}
.items {
margin-top: 50px;
text-align: center;
}
.grade,
.value {
height: 15px;
width: 50px;
align-items: center;
}
<div class='head'>
<div id='1' class='container'>
<div id='top' class='top'></div>
<div class='box'>
<h1 id='timer'>1</h1>
<div class='items'>
value<input id='grade' class='grade' type=number oninput="grade()"/>
range<input id='range' class='value' type=number oninput="grade()"/>
</div>
</div>
<div id='right' class='right'></div>
<div id='bottom' class='bottom'></div>
<div id='left' class='noactive'></div>
</div>
</div>
<script src='app.js'></script>

how to make an element stay in place when position changes from absolute to fixed

I have this button that on click reveals and expands a div element using a css transition, giving the illusion that the button itself expands. In order to have the div positioned on top of the button i set it to position: absolute but when open needs to be position: fixed. The problem i have with this is that when it switches between absolute to fixed it moves ruining the expantion effect. Here is the jsfiddle to my example.
function big() {
document.getElementById("content").classList.add('show');
document.getElementById("content").classList.add('bigger');
document.getElementById("content").classList.add('position');
}
function small() {
document.getElementById("content").classList.remove('bigger');
document.getElementById("content").classList.remove('position');
setTimeout(() => {
document.getElementById("content").classList.remove("show");
}, 1000);
document.getElementById("testo").classList.remove('show');
document.getElementById("close").classList.remove('show');
}
function delayed() {
setTimeout(function() {
document.getElementById("testo").classList.add('show');
}, 1100);
setTimeout(function() {
document.getElementById("close").classList.add('show');
}, 1100);
}
.button {
position: relative;
width: 100%;
height: 100%;
}
.button>button {
position: absolute;
left: 50vw;
top: 50vw;
color: white;
background-color: pink;
border: none;
padding: 30px;
cursor: pointer;
}
.button>button:hover {
background-color: purple;
}
.fixed {
position: absolute;
background-color: pink;
left: 50vw;
top: 50vw;
text-align: center;
width: 100px;
height: 75px;
transition: width 1s, height 1s, left 1s, top 1s, position 1s;
}
.position {
position: fixed;
}
.hidden {
visibility: hidden;
}
.show {
visibility: visible!important;
}
.bigger {
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.close {
border: none;
visibility: hidden;
background-color: red;
position: absolute;
top: 5px;
right: 5px;
color: white;
cursor: pointer;
}
.close:hover {
background-color: yellow;
color: black;
}
#testo {
visibility: hidden;
}
body {
height: 1000px;
}
<div class="button">
<button onclick="big(); delayed()">expand</button>
<div id="content" class="fixed hidden">
<p id="testo">just testing this thing</p>
<button id="close" class="close" onclick="small()">X</button>
</div>
</div>

You can set an opacity or a transform: translate() on the .button parent container to make a fixed position child relative to the parent vs. the root of the document.
Doing this should give you the effect you're looking for.
function big() {
document.getElementById("content").classList.add('show');
document.getElementById("content").classList.add('bigger');
document.getElementById("content").classList.add('position');
}
function small() {
document.getElementById("content").classList.remove('bigger');
document.getElementById("content").classList.remove('position');
setTimeout(() => {
document.getElementById("content").classList.remove("show");
}, 1000);
document.getElementById("testo").classList.remove('show');
document.getElementById("close").classList.remove('show');
}
function delayed() {
setTimeout(function() {
document.getElementById("testo").classList.add('show');
}, 1100);
setTimeout(function() {
document.getElementById("close").classList.add('show');
}, 1100);
}
html,body {
width: 100%;
height: 100%;
}
.button {
position: relative;
/* opacity: 1; */
transform: translate(0, 0);
width: 100%;
height: 100%;
}
.button > button {
position: fixed;
left: 50%;
top: 50%;
color: white;
background-color: pink;
border: none;
padding: 30px;
cursor: pointer;
transform: translate(-50%, -50%);
}
.button > button:hover {
background-color: purple;
}
.fixed {
position: absolute;
background-color: pink;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 100px;
height: 75px;
transition: width 1s, height 1s, left 1s, top 1s, position 1s;
}
.position {
position: fixed;
}
.hidden {
visibility: hidden;
}
.show {
visibility: visible !important;
}
.bigger {
width: 100%;
height: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.close {
border: none;
visibility: hidden;
background-color: red;
position: absolute;
top: 5px;
right: 5px;
color: white;
cursor: pointer;
}
.close:hover {
background-color: yellow;
color: black;
}
#testo {
visibility: hidden;
}
<div class="button">
<button onclick="big(); delayed()">expand</button>
<div id="content" class="fixed hidden">
<p id="testo">just testing this thing</p>
<button id="close" class="close" onclick="small()">X</button>
</div>
</div>

you can place fixed position to content after your animation is done
so your animation effect wont ruin . i have edited your fiddle see if this works as you like
edited fiddle
function big() {
document.getElementById("content").classList.add('show');
document.getElementById("content").classList.add('bigger');
setTimeout(function(){
document.getElementById("content").classList.add('position');
},1000)
}
function small() {
document.getElementById("content").classList.remove('bigger');
document.getElementById("content").classList.remove('position');
setTimeout(()=>{
document.getElementById("content").classList.remove("show");
}, 1000);
document.getElementById("testo").classList.remove('show');
document.getElementById("close").classList.remove('show');
}
function delayed() {
setTimeout(function(){document.getElementById("testo").classList.add('show');},1100);
setTimeout(function(){document.getElementById("close").classList.add('show');},1100);
}

Hide and show same element on click with javascript [duplicate]

This question already has answers here:
How to create javascript delay function [duplicate]
(3 answers)
What is the JavaScript version of sleep()?
(91 answers)
Closed 4 years ago.
I am trying to get a bar to hide and then show again in one click. Do I need to put some kind of time out when re-adding the class?
var button = document.querySelector('.btn');
button.addEventListener('click', function() {
document.querySelector('.bar').classList.remove('animateBar');
document.querySelector('.bar').classList.add('animateBar');
});
* {
padding: 0;
margin: 0;
}
.wrap {
width: 100%;
height: 100vh;
overflow: hidden;
position: relative
}
.bar {
position: absolute;
bottom: 0;
height: 100px;
width: 100%;
background-color: black;
transform: translateY(100%);
transition: transform 1s;
}
.animateBar {
transform: translateY(0);
transition: transform 1s;
}
.btn {
position: relative;
display: block;
text-align: center;
cursor: pointer;
}
<div class="wrap">
<div class="bar animateBar"></div>
<div class="btn">hide/show</div>
</div>

use setTimeout() between removing and adding the class
var button = document.querySelector('.btn');
button.addEventListener('click', function() {
document.querySelector('.bar').classList.remove('animateBar');
setTimeout(function(){
document.querySelector('.bar').classList.add('animateBar');
}, 1000);
});
* {
padding: 0;
margin: 0;
}
.wrap {
width: 100%;
height: 100vh;
overflow: hidden;
position: relative
}
.bar {
position: absolute;
bottom: 0;
height: 100px;
width: 100%;
background-color: black;
transform: translateY(100%);
transition: transform 1s;
}
.animateBar {
transform: translateY(0);
transition: transform 1s;
}
.btn {
position: relative;
display: block;
text-align: center;
cursor: pointer;
}
<div class="wrap">
<div class="bar animateBar"></div>
<div class="btn">hide/show</div>
</div>

Yes you need to use setTimeout with a delay. Try the following.
var button = document.querySelector('.btn');
button.addEventListener('click', function() {
document.querySelector('.bar').classList.remove('animateBar');
setTimeout(() => {
document.querySelector('.bar').classList.add('animateBar');
}, 800);
});
* {
padding: 0;
margin: 0;
}
.wrap {
width: 100%;
height: 100vh;
overflow: hidden;
position: relative
}
.bar {
position: absolute;
bottom: 0;
height: 100px;
width: 100%;
background-color: black;
transform: translateY(100%);
transition: transform 1s;
}
.animateBar {
transform: translateY(0);
transition: transform 1s;
}
.btn {
position: relative;
display: block;
text-align: center;
cursor: pointer;
}
<div class="wrap">
<div class="bar animateBar"></div>
<div class="btn">hide/show</div>
</div>

var button = document.querySelector('.btn');
button.addEventListener('click', function() {
document.querySelector('.bar').classList.remove('animateBar');
setTimeout(() => {
document.querySelector('.bar').classList.add('animateBar');
}, 1000);
});
This should work

How to use removeClass according to multiple conditions?

Can someone help me out with this animation? I have been trying to replicate this one. I got so close to completing it but just can't find a way to make the animation endless on every click. Huge, Thanks in advance!
Problem: After two clicks my animation transitioning of div elements away from the window does not seem to be working.
Expected Result: One every click the Background should transitioning into the window just like the reference from Instagram that I have linked you with.
Reference
Here is the Demo Link
<div class="bg">
<div id="blue" class="skew"></div>
<div id="red" class="skew"></div>
<div id="blue_2" class="skew"></div>
</div>
<button>Toggle</button>
$skew: skew(-10deg);
html,
body {
width: 100%;
height: 100%;
box-sizing: border-box;
}
.bg {
position: relative;
background: red;
width: inherit;
height: inherit;
overflow: hidden;
}
.skew {
position: relative;
width: 100%;
height: inherit;
transform: translateX(-110%);
animation-fill-mode: forwards;
&.blue_wrapper {
background: blue;
animation: slideRight 1s forwards;
}
&.red_wrapper {
background: red;
animation: slideRight 1s forwards;
}
&::before,
&::after {
content: "";
position: absolute;
top: 0;
width: 250px;
height: inherit;
background: inherit;
transform: $skew;
}
&::before {
left: -5%;
}
&::after {
right: -5%;
}
}
#red,
#blue_2 {
position: absolute;
top: 0;
left: 0;
}
blue_2.blue_wrapper_2 {
background: blue;
animation: slideRight 1s forwards;
}
button {
position: fixed;
right: 30px;
bottom: 30px;
}
#keyframes slideRight {
from {
transform: translateX(-110%);
}
to {
transform: translateX(0);
}
}
$(document).ready(function() {
$("button").on("click", function() {
if (
$("#blue").hasClass("blue_wrapper")
) {
$("#red").addClass("red_wrapper");
} else if (
$("#blue").hasClass("skew blue_wrapper") &&
$("#red").hasClass("skew red_wrapper")
) {
$("skew red_wrapper").removeClass("red_wrapper");
$("skew blue_wrapper").removeClass("blue_wrapper");
$("blue_2").addClass("blue_wrapper_2");
} else if {
$("#blue_2").hasClass("blue_wrapper_2")
) {
$("#red").removeClass("red_wrapper");
$("#blue").removeClass("blue_wrapper");
} else {
$("#blue").addClass("blue_wrapper");
}
});
});

You logic makes no sense for
else if (
$("#blue").hasClass("") +
$("#red").hasClass("") +
$("#blue_2").hasClass("blue_wrapper_2")
) {
$("#red").removeClass("red_wrapper");
$("#blue").removeClass("blue_wrapper");
In the above you are checking if the classes have no class then removing the class that is lnt there.
Also you are using + when I assume you meant && or ||

Your Demo link isn't working because you aren't removing the blue Wrapper or red wrapper, this will get the demo to work:
$(document).ready(function() {
$("button").on("click", function() {
if ($("#blue").hasClass("blue_wrapper")) {
$("#red").addClass("red_wrapper");
$("#blue").removeClass("blue_wrapper");
} else {
$("#blue").addClass("blue_wrapper");
$("#red").removeClass("red_wrapper");
}
});
});
For your regular code, you should replace + with && or || as needed, and remove wrappers that you add.

Some syntax issues, some selector issues. Compiled the CSS to test. Removed one odd CSS thing that would not compile. Note I modified to use lime to start to better illustrate.
$(function() {
$("button.toggle").on("click", function() {
if (
$("#blue").hasClass("blue_wrapper") && !$("#red").hasClass("red_wrapper")
) {
$("#red").addClass("red_wrapper");
} else if (
$("#blue").hasClass("blue_wrapper") &&
$("#red").hasClass("red_wrapper")
) {
$(".red_wrapper").removeClass("red_wrapper");
$(".blue_wrapper").removeClass("blue_wrapper");
$("#blue_2").addClass("blue_wrapper_2");
} else if (
$("#blue_2").hasClass("blue_wrapper_2")
) {
$("#red").removeClass("red_wrapper");
$("#blue").removeClass("blue_wrapper");
$("#blue_2").removeClass("blue_wrapper_2")
} else {
$("#blue").addClass("blue_wrapper");
}
});
});
.skew {
transform: skew(-10deg);
}
html,
body {
width: 100%;
height: 100%;
box-sizing: border-box;
}
.bg {
position: relative;
background: lime;
width: inherit;
height: inherit;
overflow: hidden;
}
.skew {
position: relative;
width: 100%;
height: inherit;
transform: translateX(-110%);
animation-fill-mode: forwards;
}
.skew.blue_wrapper {
background: blue;
animation: slideRight 1s forwards;
}
.skew.red_wrapper {
background: red;
animation: slideRight 1s forwards;
}
.skew::before,
.skew::after {
content: "";
position: absolute;
top: 0;
width: 250px;
height: inherit;
background: inherit;
transform: $skew;
}
.skew::before {
left: -5%;
}
.skew::after {
right: -5%;
}
#red,
#blue_2 {
position: absolute;
top: 0;
left: 0;
}
#blue_2.blue_wrapper_2 {
background: blue;
animation: slideRight 1s forwards;
}
button {
position: fixed;
right: 30px;
bottom: 30px;
}
#keyframes slideRight {
from {
transform: translateX(-110%);
}
to {
transform: translateX(0);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="bg">
<div id="blue" class="skew">blue</div>
<div id="red" class="skew">red</div>
<div id="blue_2" class="skew">blue_2</div>
</div>
<button class="toggle">Toggle</button>

Animating background color, pulse effect

I have made a script for animating my menu li element after mouseovering the a element inside it.
Everything works fine, but I want something else. I want the effect not to disappear but to linger as long as the mouse is over the a element.
What function to use?
Script so far:
jQuery(document).ready(function($){
$(".main-navigation a").mouseover(function() {
$(this).parent().animate({
backgroundColor: "green"
}, "normal"),
$(this).parent().animate({
backgroundColor: "transparent"
})
.mouseleave(function() {
$(this).parent().animate({
backgroundColor: "transparent"
}, "normal")
});
});
});
http://jsfiddle.net/neugu8r9/

You could do this using CSS's #keyframes without jQuery.
ul {
position: relative;
width: 250px;
height: 50px;
padding: 0;
margin: 0;
list-style: none;
}
li a {
width: 100%;
height: 100%;
line-height: 50px;
text-align: center;
}
li a:before {
position: absolute;
content: '';
width: 100%;
height: 100%;
display: block;
z-index: -1;
}
li {
position: relative;
height: 50px;
width: 250px;
text-align: center;
border: 1px solid black;
}
a:hover:before {
-webkit-animation: pulse 0.8s ease-in-out infinite alternate;
animation: pulse 0.8s ease-in-out infinite alternate;
}
#-webkit-keyframes pulse {
0% {
background: transparent;
}
50% {
background: green;
}
100% {
background: transparent;
}
}
#keyframes pulse {
0% {
background: transparent;
}
50% {
background: green;
}
100% {
background: transparent;
}
}
<nav class="main-navigation">
<ul>
<li><a>Menu-item#1</a></li>
<li><a>Menu-item#2</a></li>
<li><a>Menu-item#3</a></li>
<li><a>Menu-item#4</a></li>
</ul>
</nav>

Here is the Full jQuery solution for you buddy, hope it helps:=)
jQuery(document).ready(function($){
var intervalID;
$(".main-navigation ul li a").hover(function(){
var that = $(this);
var opacityToggle = function(){
if(!that.children('.green').length){
$(that).prepend('<span class="green"></span>');
$('.green').animate({opacity:1},500);
}
else if(that.children('.green').length){
$('.green').animate({opacity:0},500,function(){
$('.green').remove();
});
}
}
intervalID = setInterval(opacityToggle, 500);
},function(){
$('.green').remove();
clearInterval(intervalID);
intervalID = 0;
});
});
ul{
list-style:none;
}
li a {
height:100%;
text-align:center;
position:relative;
width:inherit;
display:block;
}
li {
height: 50px;
width: 250px;
text-align: center;
border: 1px solid black;
}
.green{
position:absolute;
background-color:green;
width:100%;
height:100%;
display:block;
opacity:0;
z-index:-1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="main-navigation">
<ul>
<li><a>Menu-item#1</a></li>
<li><a>Menu-item#2</a></li>
<li><a>Menu-item#3</a></li>
<li><a>Menu-item#4</a></li>
</ul>
</nav>