There is this code, in it I set the minimum indent between the sliders using rangeGap. Everything seems to work as it should, but they continue to run into each other. Maybe someone can tell me what is wrong.
I can't figure out if it's the positioning of the elements or if I need to change the logic in the js. It should work like this, but the thumbs should not move each other when colliding: https://codepen.io/BabylonJS/pen/gqzBWx
const progressBar = document.querySelector('.slider--progress');
const inputMin = document.querySelector('.input--min');
const inputMax = document.querySelector('.input--max');
const inputRange = [inputMin, inputMax];
const rangeGap = 50000;
inputRange.forEach(function (el) {
el.addEventListener('input', function (e) {
let minValue = parseInt(inputRange[0].value);
let maxValue = parseInt(inputRange[1].value);
if (maxValue - minValue < rangeGap) {
if (e.target.className === 'input--min') {
inputRange[0].value = maxValue - rangeGap;
} else if (e.target.className === 'input--max') {
inputRange[1].value = minValue + rangeGap;
}
} else {
progressBar.style.left = (minValue / inputRange[0].max) * 100 + '%';
progressBar.style.right = 100 - (maxValue / inputRange[1].max) * 100 + '%';
}
});
});
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
background: rgb(107, 216, 107);
}
.slider {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
margin-top: 50px;
height: 30px;
width: 500px;
padding: 15px 10px;
border-radius: 10px;
background: rgb(42, 138, 42);
}
.slider--body {
background: rgb(250, 250, 250);
height: 4px;
width: 100%;
position: relative;
border-radius: 5px;
}
.slider--progress {
position: absolute;
left: 25%;
right: 25%;
background: rgb(107, 216, 107);
height: 4px;
border-radius: 10px;
}
.slider--inputs {
position: relative;
}
.slider--inputs > input {
pointer-events: none;
}
.slider--input {
position: absolute;
top: -2.4px;
left: -3px;
height: 5px;
width: calc(100% + 2px);
background: none;
-webkit-appearance: none;
}
.slider--input::-webkit-slider-thumb {
width: 15px;
height: 15px;
background: rgb(107, 216, 107);
border-radius: 50%;
border: 1px solid rgb(42, 138, 42);
pointer-events: auto;
-webkit-appearance: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Double-range slider</title>
</head>
<body>
<div class="slider">
<div class="slider--body">
<div class="slider--progress"></div>
<div class="slider--inputs">
<input type="range" class="slider--input input--min" min="0" , max="999999" step="10" value="250000" />
<input type="range" class="slider--input input--max" min="0" , max="999999" step="10" value="750000" />
</div>
</div>
</div>
<script src="double-range-slider.js"></script>
</body>
</html>
Thanks for the help) Instead of className === 'class', I wrote classList.contains('class') and it worked!
const progressBar = document.querySelector('.slider--progress');
const inputRange = document.querySelectorAll('.slider--input');
let rangeGap = 50000;
inputRange.forEach(function (el) {
el.addEventListener('input', function (e) {
let minValue = parseInt(inputRange[0].value);
let maxValue = parseInt(inputRange[1].value);
if (maxValue - minValue < rangeGap) {
if (e.target.classList.contains('input--min')) {
inputRange[0].value = maxValue - rangeGap;
} else if (e.target.classList.contains('input--max')) {
inputRange[1].value = minValue + rangeGap;
}
} else {
progressBar.style.left = (minValue / inputRange[0].max) * 100 + '%';
progressBar.style.right = 100 - (maxValue / inputRange[1].max) * 100 + '%';
}
});
});
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
background: rgb(107, 216, 107);
}
.slider {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
margin-top: 50px;
height: 30px;
width: 500px;
padding: 15px 10px;
border-radius: 10px;
background: rgb(42, 138, 42);
}
.slider--body {
background: rgb(250, 250, 250);
height: 4px;
width: 100%;
position: relative;
border-radius: 5px;
}
.slider--progress {
position: absolute;
left: 25%;
right: 25%;
background: rgb(107, 216, 107);
height: 4px;
border-radius: 10px;
}
.slider--inputs {
position: relative;
}
.slider--inputs > input {
pointer-events: none;
}
.slider--input {
position: absolute;
top: -2.4px;
left: -3px;
height: 5px;
width: calc(100% + 2px);
background: none;
-webkit-appearance: none;
}
.slider--input::-webkit-slider-thumb {
width: 15px;
height: 15px;
border-radius: 50%;
border: 1px solid rgb(42, 138, 42);
pointer-events: auto;
-webkit-appearance: none;
background: rgb(107, 216, 107);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Double-range slider</title>
</head>
<body>
<div class="slider">
<div class="slider--body">
<div class="slider--progress"></div>
<div class="slider--inputs">
<input type="range" class="slider--input input--min" min="0" , max="999999" step="10" value="250000" />
<input type="range" class="slider--input input--max" min="0" , max="999999" step="10" value="750000" />
</div>
</div>
</div>
<script src="double-range-slider.js"></script>
</body>
</html>
e.target.className === 'input--min' will always return false. If you put e.target.className in a console log you will see "slider--input input--min".
Here's the correct way for your condition 👉 Check if an element contains a class in JavaScript?
Related
I have this logo which has 2 eyes in it. I'd like to get the animated effect which will track the cursor position and look at it whole time.
I need this:
I have created this solution but still have some problem with the width of the eyes and once I get it more wide, it gets out of the border.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style media="screen">
#import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: "Bebas Neue", cursive;
background: #0c3b5a;
}
.container {
display: flex;
background: white;
border-radius: 48px;
width: auto;
padding: 1em 2em;
}
.container .eyes {
position: relative;
width: 80px;
height: 80px;
display: block;
background-color: #fff;
margin: 0 -10px;
border-radius: 50%;
border: 2px solid black;
}
.eyes:first-child{
z-index:9
}
.container .eyes::before {
content: "";
top: 50%;
left: 35px;
transform: translate(-50%, -50%);
width: 70px;
height: 70px;
border-radius: 50%;
background: #000;
position: absolute;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="container">
<div class="eyes"></div>
<div class="eyes"></div>
</div>
<script type="text/javascript">
document.querySelector("body").addEventListener("mousemove", eyeball);
function eyeball() {
const eye = document.querySelectorAll(".eyes");
eye.forEach(function (eye) {
let x = eye.getBoundingClientRect().left + eye.clientWidth / 2;
let y = eye.getBoundingClientRect().top + eye.clientHeight / 2;
let radian = Math.atan2(event.pageX - x, event.pageY - y);
let rotate = radian * (180 / Math.PI) * -1 + 270;
eye.style.transform = "rotate(" + rotate + "deg)";
});
}
</script>
</body>
</html>
1- don't style container and eye together. actually, you have some unnecessary styles.
2- add overflow: auto; to the eye.
3- you better differentiate the eye border color from the eyeballs, because if it's the same, the eyeballs look extended a little. it's up to you.
here is the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style media="screen">
#import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: "Bebas Neue", cursive;
background: #0c3b5a;
}
.container {
display: flex;
background: white;
border-radius: 48px;
width: auto;
padding: 1em 2em;
}
.eyes {
position: relative;
width: 100px;
height: 100px;
display: block;
background-color: #fff;
margin: 0 -10px;
border-radius: 50%;
border: 1px solid orange;
overflow: auto;
}
.eyes:first-child{
z-index:9
}
.container .eyes::before {
content: "";
top: 50%;
left: 35px;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
border-radius: 50%;
background: #000;
position: absolute;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="container">
<div class="eyes"></div>
<div class="eyes"></div>
</div>
<script type="text/javascript">
document.querySelector("body").addEventListener("mousemove", eyeball);
function eyeball() {
const eye = document.querySelectorAll(".eyes");
eye.forEach(function (eye) {
let x = eye.getBoundingClientRect().left + eye.clientWidth / 2;
let y = eye.getBoundingClientRect().top + eye.clientHeight / 2;
let radian = Math.atan2(event.pageX - x, event.pageY - y);
let rotate = radian * (180 / Math.PI) * -1 + 270;
eye.style.transform = "rotate(" + rotate + "deg)";
});
}
</script>
</body>
</html>
is there an easy fix to separate the volume icon from the volume slider? I have the volume icon change depending on the slider value but it feels janky because the size of the icon changes and pushes everything. I think you can c/p the code on replit and see the problem with the volume slider.
I tried aligning it to the right or changing the position using transform but it doesn't seem to fix the problem.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="style.css" rel="stylesheet" type="text/css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<body>
<div class="video-player">
<video id="myVideo" poster="Poke_Ball.png">
<source src="https://www.youtube.com/watch?v=Y3xgmGSnzlU" class="video">
</video>
<div class="player-controls">
<div class="video-progress">
<div class="video-progress-filled"></div>
</div>
<button id="btnPlay"><i class="fa fa-play-circle-o"></i></button>
<button id="btnPause" class="hidden"><i class="fa fa-pause-circle-o"></i></button>
<button id="volumeNone" class="hidden"><i class="fa fa-volume-off"></i></button>
<button id="volumeLow" class="hidden"><i class="fa fa-volume-down"></i></button>
<button id="volumeHigh"><i class="fa fa-volume-up"></i></button>
<input type="range" class="volume" min="0" max="1" step="0.01" value=".5"/>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
.hidden {
display: none;
}
.video-player {
max-width: 100%;
position: relative;
overflow: hidden;
}
.player-controls {
display: flex;
position: absolute;
bottom: 0;
width: 100%;
transform: translateY(100%) translateY(-5px);
transition: 0.3s;
flex-wrap: wrap;
background: rgba(0, 0, 0, 0.6);
}
.video-player:hover .player-controls {
transform: translateY(0);
}
.video-progress {
position: relative;
display: flex;
width: 100%;
height: 5px;
transition: 0.3s;
background: rgba(0, 0, 0, 0.6);
cursor: pointer;
}
.video-progress-filled {
width: 0;
background: orangered;
}
.video-player:hover .video-progress {
height: 13px;
}
input[type="range"] {
-webkit-appearance: none;
background: transparent;
margin: 0;
width: 7%;
padding: 0 10px;
}
input[type="range"]:focus {
outline: none;
}
input[type="range"]::-webkit-slider-runnable-track {
width: 5%;
height: 10px;
cursor: pointer;
background: white;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 10px;
width: 13px;
background: orangered;
cursor: pointer;
}
#timeOut{
font-family: monospace;
font-size: 120%;
padding: 18px;
color: white;
border: none;
background: none;
}
#btnPlay,#btnPause,#volumeNone,#volumeLow,#volumeHigh {
font-size: 200%;
padding: 10px;
color: white;
border: none;
background: none;
}
#btnPlay:hover,#btnPause:hover,#volumeNone:hover,#volumeLow:hover,#volumeHigh:hover {
transition: all 0.1s ease;
color: orangered;
}
const volume = document.querySelector('.volume');
const volumeNone = document.getElementById("volumeNone");
const volumeLow = document.getElementById("volumeLow");
const volumeHigh = document.getElementById("volumeHigh");
const myVideo = document.getElementById("myVideo");
const btnPlay = document.getElementById("btnPlay");
const btnPause = document.getElementById("btnPause");
btnPlay.addEventListener("click", vidPlay);
btnPause.addEventListener("click", vidPause);
volume.addEventListener('mousemove', (e)=> {
myVideo.volume = e.target.value;
if(myVideo.volume === 0){
volumeNone.classList.remove("hidden");
volumeLow.classList.add("hidden");
volumeHigh.classList.add("hidden");
}
else if(myVideo.volume < .5 && myVideo.volume > .1){
volumeNone.classList.add("hidden");
volumeLow.classList.remove("hidden");
volumeHigh.classList.add("hidden");
}
else if(myVideo.volume > .5) {
volumeNone.classList.add("hidden");
volumeLow.classList.add("hidden");
volumeHigh.classList.remove("hidden");
}
})
function vidPlay() {
btnPlay.classList.add("hidden");
btnPause.classList.remove("hidden");
myVideo.play();
}
function vidPause() {
btnPlay.classList.remove("hidden");
btnPause.classList.add("hidden");
myVideo.pause();
}
is there an easy fix to separate the volume icon from the volume slider?
- Simply removing the code
You can remove the code that makes the volume icon synchronized with the volume slider in the first place.
const volume = document.querySelector('.volume');
const volumeNone = document.getElementById("volumeNone");
const volumeLow = document.getElementById("volumeLow");
const volumeHigh = document.getElementById("volumeHigh");
const myVideo = document.getElementById("myVideo");
const btnPlay = document.getElementById("btnPlay");
const btnPause = document.getElementById("btnPause");
btnPlay.addEventListener("click", vidPlay);
btnPause.addEventListener("click", vidPause);
/* volume.addEventListener('mousemove', (e)=> {
myVideo.volume = e.target.value;
if(myVideo.volume === 0){
volumeNone.classList.remove("hidden");
volumeLow.classList.add("hidden");
volumeHigh.classList.add("hidden");
}
else if(myVideo.volume < .5 && myVideo.volume > .1){
volumeNone.classList.add("hidden");
volumeLow.classList.remove("hidden");
volumeHigh.classList.add("hidden");
}
else if(myVideo.volume > .5) {
volumeNone.classList.add("hidden");
volumeLow.classList.add("hidden");
volumeHigh.classList.remove("hidden");
}
})
*/
function vidPlay() {
btnPlay.classList.add("hidden");
btnPause.classList.remove("hidden");
myVideo.play();
}
function vidPause() {
btnPlay.classList.remove("hidden");
btnPause.classList.add("hidden");
myVideo.pause();
}
.hidden {
display: none;
}
.video-player {
max-width: 100%;
position: relative;
overflow: hidden;
}
.player-controls {
display: flex;
position: absolute;
bottom: 0;
width: 100%;
transform: translateY(100%) translateY(-5px);
transition: 0.3s;
flex-wrap: wrap;
background: rgba(0, 0, 0, 0.6);
}
.video-player:hover .player-controls {
transform: translateY(0);
}
.video-progress {
position: relative;
display: flex;
width: 100%;
height: 5px;
transition: 0.3s;
background: rgba(0, 0, 0, 0.6);
cursor: pointer;
}
.video-progress-filled {
width: 0;
background: orangered;
}
.video-player:hover .video-progress {
height: 13px;
}
input[type="range"] {
-webkit-appearance: none;
background: transparent;
margin: 0;
width: 7%;
padding: 0 10px;
}
input[type="range"]:focus {
outline: none;
}
input[type="range"]::-webkit-slider-runnable-track {
width: 5%;
height: 10px;
cursor: pointer;
background: white;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 10px;
width: 13px;
background: orangered;
cursor: pointer;
}
#timeOut{
font-family: monospace;
font-size: 120%;
padding: 18px;
color: white;
border: none;
background: none;
}
#btnPlay,#btnPause,#volumeNone,#volumeLow,#volumeHigh {
font-size: 200%;
padding: 10px;
color: white;
border: none;
background: none;
}
#btnPlay:hover,#btnPause:hover,#volumeNone:hover,#volumeLow:hover,#volumeHigh:hover {
transition: all 0.1s ease;
color: orangered;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="style.css" rel="stylesheet" type="text/css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<body>
<div class="video-player">
<video id="myVideo" poster="Poke_Ball.png">
<source src="https://www.youtube.com/watch?v=Y3xgmGSnzlU" class="video">
</video>
<div class="player-controls">
<div class="video-progress">
<div class="video-progress-filled"></div>
</div>
<button id="btnPlay"><i class="fa fa-play-circle-o"></i></button>
<button id="btnPause" class="hidden"><i class="fa fa-pause-circle-o"></i></button>
<button id="volumeNone" class="hidden"><i class="fa fa-volume-off"></i></button>
<button id="volumeLow" class="hidden"><i class="fa fa-volume-down"></i></button>
<button id="volumeHigh"><i class="fa fa-volume-up"></i></button>
<input type="range" class="volume" min="0" max="1" step="0.01" value=".5"/>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
- Quick and easy fix instead of giving up on the idea
If the only reason you don't want to use this code is because it "feels janky", I fixed it by adding `min-width: 60px;` to `#btnPlay,#btnPause,#volumeNone,#volumeLow,#volumeHigh`. The problem was that the `volumeHigh`'s width was larger than `volumeLow` and `volumeNone`'s. fixing all the icon's width at a minimum of 60px solved the problem. `width: 60px` will also work.
const volume = document.querySelector('.volume');
const volumeNone = document.getElementById("volumeNone");
const volumeLow = document.getElementById("volumeLow");
const volumeHigh = document.getElementById("volumeHigh");
const myVideo = document.getElementById("myVideo");
const btnPlay = document.getElementById("btnPlay");
const btnPause = document.getElementById("btnPause");
btnPlay.addEventListener("click", vidPlay);
btnPause.addEventListener("click", vidPause);
volume.addEventListener('mousemove', (e)=> {
myVideo.volume = e.target.value;
if(myVideo.volume === 0){
volumeNone.classList.remove("hidden");
volumeLow.classList.add("hidden");
volumeHigh.classList.add("hidden");
}
else if(myVideo.volume < .5 && myVideo.volume > .1){
volumeNone.classList.add("hidden");
volumeLow.classList.remove("hidden");
volumeHigh.classList.add("hidden");
}
else if(myVideo.volume > .5) {
volumeNone.classList.add("hidden");
volumeLow.classList.add("hidden");
volumeHigh.classList.remove("hidden");
}
})
function vidPlay() {
btnPlay.classList.add("hidden");
btnPause.classList.remove("hidden");
myVideo.play();
}
function vidPause() {
btnPlay.classList.remove("hidden");
btnPause.classList.add("hidden");
myVideo.pause();
}
.hidden {
display: none;
}
.video-player {
max-width: 100%;
position: relative;
overflow: hidden;
}
.player-controls {
display: flex;
position: absolute;
bottom: 0;
width: 100%;
transform: translateY(100%) translateY(-5px);
transition: 0.3s;
flex-wrap: wrap;
background: rgba(0, 0, 0, 0.6);
}
.video-player:hover .player-controls {
transform: translateY(0);
}
.video-progress {
position: relative;
display: flex;
width: 100%;
height: 5px;
transition: 0.3s;
background: rgba(0, 0, 0, 0.6);
cursor: pointer;
}
.video-progress-filled {
width: 0;
background: orangered;
}
.video-player:hover .video-progress {
height: 13px;
}
input[type="range"] {
-webkit-appearance: none;
background: transparent;
margin: 0;
width: 7%;
padding: 0 10px;
}
input[type="range"]:focus {
outline: none;
}
input[type="range"]::-webkit-slider-runnable-track {
width: 5%;
height: 10px;
cursor: pointer;
background: white;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 10px;
width: 13px;
background: orangered;
cursor: pointer;
}
#timeOut{
font-family: monospace;
font-size: 120%;
padding: 18px;
color: white;
border: none;
background: none;
}
#btnPlay,#btnPause,#volumeNone,#volumeLow,#volumeHigh {
font-size: 200%;
padding: 10px;
color: white;
border: none;
background: none;
min-width: 60px;
}
#btnPlay:hover,#btnPause:hover,#volumeNone:hover,#volumeLow:hover,#volumeHigh:hover {
transition: all 0.1s ease;
color: orangered;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="style.css" rel="stylesheet" type="text/css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<body>
<div class="video-player">
<video id="myVideo" poster="Poke_Ball.png">
<source src="https://www.youtube.com/watch?v=Y3xgmGSnzlU" class="video">
</video>
<div class="player-controls">
<div class="video-progress">
<div class="video-progress-filled"></div>
</div>
<button id="btnPlay"><i class="fa fa-play-circle-o"></i></button>
<button id="btnPause" class="hidden"><i class="fa fa-pause-circle-o"></i></button>
<button id="volumeNone" class="hidden"><i class="fa fa-volume-off"></i></button>
<button id="volumeLow" class="hidden"><i class="fa fa-volume-down"></i></button>
<button id="volumeHigh"><i class="fa fa-volume-up"></i></button>
<input type="range" class="volume" min="0" max="1" step="0.01" value=".5"/>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
I'm not sure if this is different in a video player for whatever reason but when facing issues like that in the past I usually will wrap the icon in some kind of container that is big enough to accommodate the biggest icon. It needs to have either static dimensions or dimensions that are informed by something other than its contents.
Then you can either give it position relative and center the icons absolutely, or (and this is what I recommend) you can just use flexbox to center the icon.
Here is a Svelte Repl with an example. If you don't know svelte don't worry just know I'm switching between a 24x24 icon and a 34x34 icon and am using the button as the container. The styles are in a style tag at the bottom.
https://svelte.dev/repl/34a316c3169248ce84b18972ab4953f5?version=3.47.0
I tried using redoing it but it doesn't work all I want is to redCar to move left and right when using the arrow keys
there was a error once but it got solved by moving the below the body and can you tell me why is that????
var blueCar = document.getElementById("bluecar");
var redCar = document.getElementById("redcar");
var result = document.getElementById("result");
var game = document.getElementById("game");
var score = document.getElementById("score");
var counter = 0;
blueCar.addEventListener("animationiteration",function(){
var random = ((Math.floor(Math.random()*3))*130)
blueCar.style.left = random+"px";
counter++;
})
**next code is not working like it sappose to do**
redCar.addEventListener("keydown",function(e){
if(e.keyCode=="39")
{
var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left"))
if(redCarleft<260)
{
redCar.style.left = (redCarleft+130)+"px";
}
}; *this is the command of left key*
if(e.keyCode=="37")
{
var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left"))
if(redCarleft>0){
redCar.style.left = (redCarleft-130)+"px";
}
}
})
//this is my css which is working is fine
*{
margin: 0%;
padding: 0%;
}
body{
background-color: #34adff;
background-image: -webkit-linear-gradient(45deg,#7c7e80 50%,#323333 50%);
min-height: 800px;
}
#game{
height: 500px;
width: 390px;
background-color: 1rem solid black;
background-image:url(narutoR.png) ;
background-size: contain;
margin: 1rem auto;
overflow: hidden;
}
#bluecar{
height: 100px;
width: 130px;
background-color: #34adff;
position: relative;
top: 0px;
left: 0px;
text-align: center;
animation: move 1s linear infinite;
}
#bluecar img{
height: 100px;
}
#keyframes move {
0%{
top: 0px;
}
100%
{
top: 501px;
}
}
#redcar{
height: 100px;
width: 130px;
background-color:red;
position: relative;
top: 250px;
left: 130px;
text-align: center;
}
#redcar img{
height: 100px;
}
#result{
height: 200px;
width: 400px;
background-color: darkred;
margin:5rem ;
border: 2px solid white;
border-radius:20px ;
font-size: 30px;
text-align: center;
display:none;
}
#score{
font-size: 2.2rem;
color:goldenrod;
}
#btn{
padding: 0.5rem 1rem;
border: none;
border-radius: 20px;
background-color:black;
color:cyan;
font-size: 25px;
text-transform: uppercase;
margin-top: 10px;
cursor: pointer;
}
**this is working fine as i am able to access them perfectely**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>car game</title>
<link rel="stylesheet" href="cargame.css">
</head>
<body>
<div>
<div id="game">
<div id="bluecar" > <img src="rasengan.jpeg" alt="blurcar"></div>
<div id="redcar" > <img src="pain.jpeg" alt="redcar"></div>
</div>
<div id="result">
<h1>GameOver</h1>
<p id="score"></p>
<button id="btn" onclick="location.reload()">Restart</button>
</div>
</div>
</body>
<script src="cargame.js"></script>
</html>
Add the keydown eventListener to the document.
document.addEventListener("keydown",function(e){
if(e.keyCode=="39")
{
var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left"))
if(redCarleft<260)
{
redCar.style.left = (redCarleft+130)+"px";
}
};
if(e.keyCode=="37")
{
var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left"))
if(redCarleft>0){
redCar.style.left = (redCarleft-130)+"px";
}
}
})
I saw this example in w3schools where you set svg line attributes like x1, y1, x2, y2 and a line appears on screen. I am using same method to draw svg line between div elements using javascript and it doesn't seem to work.
I have two circle from which I read there x and y values using boundingClientRect in javascript and setting it on svg line using set attribute. I want line connecting those two circles
Here is my code
const circle1 = document.querySelector('.circle--1');
const circle2 = document.querySelector('.circle--2');
const line1 = document.querySelector('#line-1');
line1.setAttribute('x1', circle1.getBoundingClientRect().x);
line1.setAttribute('y1', circle1.getBoundingClientRect().y);
line1.setAttribute('x2', circle2.getBoundingClientRect().x);
line1.setAttribute('y2', circle2.getBoundingClientRect().y);
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-family: sans-serif;
}
.header {
width: 100%;
height: 57rem;
background-image: linear-gradient(to right, #64b5f6, #1976d2);
padding: 0 2rem;
}
.graph {
width: 100%;
max-width: 120rem;
background-color: grey;
height: 100%;
position: relative;
}
.circle {
width: 5rem;
height: 5rem;
border-radius: 50%;
background-color: white;
font-size: 2rem;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
}
.circle--1 {
left: 0;
bottom: 5%;
}
.circle--1 {
left: 10%;
bottom: 60%;
}
.circle--2 {
right: 10%;
bottom: 60%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>Connect Divs</title>
</head>
<body>
<header class="header">
<div class="graph">
<div class="circle circle--1">1</div>
<div class="circle circle--2">2</div>
<svg>
<line
id="line-1"
style="stroke: rgb(255, 255, 255); stroke-width: 3"
/>
</svg>
</div>
</header>
<script src="./script.js"></script>
</body>
</html>
An svg element has a size, and your line is outside of the that area.
The default setting for an svg is:
svg:not(:root) {
overflow: hidden;
}
so your line won't be visible.
If you add this to your style:
svg {
overflow: visible;
border: 1px solid red;
}
You will see where your svg is located and its dimension, and overflow: visible; makes the line visible:
const circle1 = document.querySelector('.circle--1');
const circle2 = document.querySelector('.circle--2');
const line1 = document.querySelector('#line-1');
line1.setAttribute('x1', circle1.getBoundingClientRect().x);
line1.setAttribute('y1', circle1.getBoundingClientRect().y);
line1.setAttribute('x2', circle2.getBoundingClientRect().x);
line1.setAttribute('y2', circle2.getBoundingClientRect().y);
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-family: sans-serif;
}
.header {
width: 100%;
height: 57rem;
background-image: linear-gradient(to right, #64b5f6, #1976d2);
padding: 0 2rem;
}
.graph {
width: 100%;
max-width: 120rem;
background-color: grey;
height: 100%;
position: relative;
}
.circle {
width: 5rem;
height: 5rem;
border-radius: 50%;
background-color: white;
font-size: 2rem;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
}
.circle--1 {
left: 0;
bottom: 5%;
}
.circle--1 {
left: 10%;
bottom: 60%;
}
.circle--2 {
right: 10%;
bottom: 60%;
}
svg {
overflow: visible;
border: 1px solid red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>Connect Divs</title>
</head>
<body>
<header class="header">
<div class="graph">
<div class="circle circle--1">1</div>
<div class="circle circle--2">2</div>
<svg>
<line
id="line-1"
style="stroke: rgb(255, 255, 255); stroke-width: 3"
/>
</svg>
</div>
</header>
<script src="./script.js"></script>
</body>
</html>
But instead of using overflow: visible; you should change the size and/or positioning of the svg.
I cant believe that i was unable to implement this using all the resources that I know about and I'm stuck on implementing this small feature since last 5-6 hours but it is what it is. I need help to store a single variable on user's localStorage that initially has value 1. If user clicks on a button, then the localStorage value updates to 0. If he clicks again, it again becomes 1. This value is used to switch between light mode and dark mode of the website. Initially I have set the css variable as 1 (for dark mode) and I want to update it using only plain javascript (no libraries) whenever user clicks on the button. The code for the button is in the 2nd try's code. Or it can also be found at my last stackoverflow post regarding the same project.
Here are a few codes of me trying to implement it:
Code implemented and working perfectly without localstorage and with initial variable value as 0:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:root {
--numvar: 0;
}
html {
filter: invert(var(--numvar));
}
body {
background: #fff;
}
.outer-button {
display: inline-block;
height: 28px;
width: 28px;
position: relative;
margin: 0 3px;
}
.inner-button {
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px 2px white;
border-radius: 20px;
background: #f5f5f5;
}
span {
display: inline-block;
vertical-align: middle;
}
.status-text {
color: white;
text-transform: uppercase;
font-size: 11px;
font-family: Futura, sans-serif;
transition: all 0.2s ease;
}
.sliding-switch {
height: 28px;
width: 72px;
position: relative;
}
.outer-switch-box {
overflow: hidden;
height: 100%;
width: 100%;
display: inline-block;
border-radius: 20px;
position: relative;
box-shadow: inset 0 1px 3px 0px #818181, 0px 1px 2px 1px white;
transition: all 0.3s ease;
transition-delay: 65ms;
position: absolute;
z-index: 1;
}
.inner-switch-box {
position: relative;
width: 175px;
transition: all 0.3s ease;
}
/* .switch-checkbox:checked+.outer-switch-box .unchecked-text {
color: transparent;
}
.switch-checkbox:not(:checked)+.outer-switch-box .checked-text {
color: transparent;
} */
.switch-checkbox:checked+.outer-switch-box .inner-switch-box {
left: 20px;
}
.switch-checkbox:not(:checked)+.outer-switch-box .inner-switch-box {
left: -27px;
}
.switch-checkbox:checked+.outer-switch-box {
/* background-image: linear-gradient(#b6d284, #b6d284); */
background: #492d7b;
/* background: #b6d284; */
}
.switch-checkbox:not(:checked)+.outer-switch-box {
/* background-image: linear-gradient(#cbcbcb, #dbdbdb); */
background: #dbdbdb;
}
[type="checkbox"] {
margin: 0;
padding: 0;
appearance: none;
width: 100%;
height: 100%;
border: 1px solid black;
position: absolute;
top: 0;
left: 0;
z-index: 100;
opacity: 0;
}
.unchecked-text{
color: black !important;
font-weight: 700;
}
.btn-heading{
color: black;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Open Sans', 'Helvetica Neue', 'sans-serif';
padding: .4vw 0;
}
body{
float: left;
}
</style>
</head>
<body>
<div class="btn-heading">Change Mode</div>
<div class="sliding-switch">
<input type="checkbox" id="btn" class="switch-checkbox" />
<div class="outer-switch-box">
<div class="inner-switch-box">
<span class="status-text checked-text">on</span>
<span class="outer-button">
<span class="inner-button"></span>
</span>
<span class="status-text unchecked-text" >off</span>
</div>
</div>
</div>
<script>
document.getElementById("btn").addEventListener("click", myfunc);
function myfunc() {
let root = document.documentElement;
let elem = getComputedStyle(root).getPropertyValue("--numvar");
console.log(elem);
if (elem == 0 ) {
elem = 1;
}
else if (elem == 1 ) {
elem = 0;
}
// alert(elem);
console.log(elem);
root.style.setProperty("--numvar", elem);
}
</script>
</body>
</html>
Before this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:root {
--numvar: 0;
}
html {
filter: invert(var(--numvar));
}
body {
background: #fff;
}
.outer-button {
display: inline-block;
height: 28px;
width: 28px;
position: relative;
margin: 0 3px;
}
.inner-button {
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px 2px white;
border-radius: 20px;
background: #f5f5f5;
}
span {
display: inline-block;
vertical-align: middle;
}
.status-text {
color: white;
text-transform: uppercase;
font-size: 11px;
font-family: Futura, sans-serif;
transition: all 0.2s ease;
}
.sliding-switch {
height: 28px;
width: 72px;
position: relative;
}
.outer-switch-box {
overflow: hidden;
height: 100%;
width: 100%;
display: inline-block;
border-radius: 20px;
position: relative;
box-shadow: inset 0 1px 3px 0px #818181, 0px 1px 2px 1px white;
transition: all 0.3s ease;
transition-delay: 65ms;
position: absolute;
z-index: 1;
}
.inner-switch-box {
position: relative;
width: 175px;
transition: all 0.3s ease;
}
/* .switch-checkbox:checked+.outer-switch-box .unchecked-text {
color: transparent;
}
.switch-checkbox:not(:checked)+.outer-switch-box .checked-text {
color: transparent;
} */
.switch-checkbox:checked+.outer-switch-box .inner-switch-box {
left: 20px;
}
.switch-checkbox:not(:checked)+.outer-switch-box .inner-switch-box {
left: -27px;
}
.switch-checkbox:checked+.outer-switch-box {
/* background-image: linear-gradient(#b6d284, #b6d284); */
background: #492d7b;
/* background: #b6d284; */
}
.switch-checkbox:not(:checked)+.outer-switch-box {
/* background-image: linear-gradient(#cbcbcb, #dbdbdb); */
background: #dbdbdb;
}
[type="checkbox"] {
margin: 0;
padding: 0;
appearance: none;
width: 100%;
height: 100%;
border: 1px solid black;
position: absolute;
top: 0;
left: 0;
z-index: 100;
opacity: 0;
}
.unchecked-text{
color: black !important;
font-weight: 700;
}
.btn-heading{
color: black;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Open Sans', 'Helvetica Neue', 'sans-serif';
padding: .4vw 0;
}
body{
float: left;
}
</style>
</head>
<body>
<div class="btn-heading">Change Mode</div>
<div class="sliding-switch">
<input type="checkbox" id="btn" class="switch-checkbox" />
<div class="outer-switch-box">
<div class="inner-switch-box">
<span class="status-text checked-text">on</span>
<span class="outer-button">
<span class="inner-button"></span>
</span>
<span class="status-text unchecked-text" >off</span>
</div>
</div>
</div>
<script>
document.getElementById("btn").addEventListener("click", myfunc);
let avar = true; //assume it exists
if (localStorage.hardtoimplement) {
avar = true;
}
else {
localStorage.setItem("hardtoimplement", "on")
}
console.log(localStorage.getItem("hardtoimplement"));
var num = 1;
function myfunc() {
let root = document.documentElement;
let elem = getComputedStyle(root).getPropertyValue("--numvar");
if (typeof (Storage) !== "undefined") {
// console.log(num);
if (localStorage.getItem("hardtoimplement") == "on") {
num = 1;
}
else if (localStorage.getItem("hardtoimplement") == "off") {
num = 0;
}
console.log(num);
}
else {
alert("Sorry, your browser does not support web storage");
}
// console.log(num);
console.log(localStorage.getItem("hardtoimplement"));
if (localStorage.getItem("hardtoimplement") == "on") {
localStorage.hardtoimplement = "off";
}
else if (localStorage.getItem("hardtoimplement") == "off") {
localStorage.hardtoimplement = "on";
}
console.log(elem);
if (num == 0 ) {
num = 1;
}
else if (num == 1 ) {
num = 0;
}
// alert(num);
console.log(num);
root.style.setProperty("--numvar", num);
}
</script>
</body>
</html>
The first try:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
let avar = true; //assume it exists
if (localStorage.thisisvar) {
avar = true;
}
else {
localStorage.setItem("thisisvar", "on")
}
console.log(localStorage.getItem("thisisvar"));
var num = 0;
function myfunc() {
if (typeof (Storage) !== "undefined") {
// console.log(num);
if (localStorage.getItem("thisisvar") == "on") {
num = 1;
}
else if (localStorage.getItem("thisisvar") == "off") {
num = 0;
}
console.log(num);
}
else {
alert("Sorry, your browser does not support web storage");
}
// console.log(num);
console.log(localStorage.getItem("thisisvar"));
if (localStorage.getItem("thisisvar") == "on") {
localStorage.thisisvar = "off";
}
else if (localStorage.getItem("thisisvar") == "off") {
localStorage.thisisvar = "on";
}
}
function func2(){
alert(num); //initial value is 0 here
}
</script>
</head>
<body>
<button id="result" onclick=" myfunc()">hi</button>
<button onclick="func2()">b2</button>
</body>
</html>
I tried looking for this feature at many places like google, codepen, stackoverflow, etc. and I did find many implementations of this feature but I am unable to integrate any of them to my project on my own.
The requirement can be basically defined as:
A CSS variable is initially set to 1 and it should change on button click to 0.
And if user refreshes the page, it should still be 0.
Thanks.
EDIT:
Integation of answer with project:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:root {
--numvar: 0;
}
html {
filter: invert(var(--numvar));
}
body {
background: #fff;
}
.outer-button {
display: inline-block;
height: 28px;
width: 28px;
position: relative;
margin: 0 3px;
}
.inner-button {
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px 2px white;
border-radius: 20px;
background: #f5f5f5;
}
span {
display: inline-block;
vertical-align: middle;
}
.status-text {
color: white;
text-transform: uppercase;
font-size: 11px;
font-family: Futura, sans-serif;
transition: all 0.2s ease;
}
.sliding-switch {
height: 28px;
width: 72px;
position: relative;
}
.outer-switch-box {
overflow: hidden;
height: 100%;
width: 100%;
display: inline-block;
border-radius: 20px;
position: relative;
box-shadow: inset 0 1px 3px 0px #818181, 0px 1px 2px 1px white;
transition: all 0.3s ease;
transition-delay: 65ms;
position: absolute;
z-index: 1;
}
.inner-switch-box {
position: relative;
width: 175px;
transition: all 0.3s ease;
}
/* .switch-checkbox:checked+.outer-switch-box .unchecked-text {
color: transparent;
}
.switch-checkbox:not(:checked)+.outer-switch-box .checked-text {
color: transparent;
} */
.switch-checkbox:checked+.outer-switch-box .inner-switch-box {
left: 20px;
}
.switch-checkbox:not(:checked)+.outer-switch-box .inner-switch-box {
left: -27px;
}
.switch-checkbox:checked+.outer-switch-box {
/* background-image: linear-gradient(#b6d284, #b6d284); */
background: #492d7b;
/* background: #b6d284; */
}
.switch-checkbox:not(:checked)+.outer-switch-box {
/* background-image: linear-gradient(#cbcbcb, #dbdbdb); */
background: #dbdbdb;
}
[type="checkbox"] {
margin: 0;
padding: 0;
appearance: none;
width: 100%;
height: 100%;
border: 1px solid black;
position: absolute;
top: 0;
left: 0;
z-index: 100;
opacity: 0;
}
.unchecked-text{
color: black !important;
font-weight: 700;
}
.btn-heading{
color: black;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Open Sans', 'Helvetica Neue', 'sans-serif';
padding: .4vw 0;
}
body{
float: left;
}
</style>
</head>
<body>
<div class="btn-heading">Change Mode</div>
<div class="sliding-switch">
<input type="checkbox" id="btn" class="switch-checkbox" onclick="change()" />
<div class="outer-switch-box">
<div class="inner-switch-box">
<span class="status-text checked-text">on</span>
<span class="outer-button">
<span class="inner-button"></span>
</span>
<span class="status-text unchecked-text" >off</span>
</div>
</div>
</div>
<script>
if (!localStorage.getItem('thisvarisgud4me')) {
localStorage.setItem("thisvarisgud4me", "1")
}
function change() {
if (localStorage.getItem('thisvarisgud4me') == '1') {
localStorage.setItem("thisvarisgud4me", '0')
} else {
localStorage.setItem("thisvarisgud4me", '1')
}
var num = Number(localStorage.getItem('thisvarisgud4me'));
let root = document.documentElement;
root.style.setProperty("--numvar", num);
}
var num = Number(localStorage.getItem('thisvarisgud4me'));
let root = document.documentElement;
root.style.setProperty("--numvar", num);
</script>
</body>
</html>
Here is the correct version:
I think you should learn a bit more js as there were a lot of syntax errors.
Here are some resources:
JavaScript Reference
Learn JS at freecodecamp.org
Learn JS at Codecademy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:root {
--numvar: 0;
}
html {
filter: invert(var(--numvar));
}
</style>
</head>
<body>
<button id="res" onclick="change()">hi</button>
<script>
if (!localStorage.getItem('thisvarisgood')) {
localStorage.setItem("thisvarisgood", "1")
}
function change() {
if (localStorage.getItem('thisvarisgood') == '1') {
localStorage.setItem("thisvarisgood", '0')
} else {
localStorage.setItem("thisvarisgood", '1')
}
var num = Number(localStorage.getItem('thisvarisgood'));
let root = document.documentElement;
root.style.setProperty("--numvar", num);
}
var num = Number(localStorage.getItem('thisvarisgood'));
let root = document.documentElement;
root.style.setProperty("--numvar", num);
</script>
</body>
</html>
The biggest problem with the most recent attempt is you set the variable with the name "thisvarisgood" and access it with "thisvarisgud".
Once you correct that, you need to correct the way that modifies the css. Doing it in the script itself won't work, because the script only runs once. You'll need to set the style it in the function that is called to change the local storage value, and on page load.
edit: the other answer solved it for you, as you can see. He corrected the localStorage variable name and set the style in the function as well (lines 35-37). The "on page load" styling is lines 40-41.