We Keep Coding

How do I make the circle div in the center change color from yellow to white and vice versa on every click inside the circle?

So far I have managed to do this on single click.
I removed the lightbulb image
const div = document.getElementById("sphere");
div.addEventListener("click", e => {
console.log("You clicked the mouse!");
div.style.backgroundColor = "white";
})
How do I make the circle div in the center change color from yellow to white and vice versa on every click inside the circle?

You can just try this way:
const div = document.getElementById("sphere");
div.addEventListener("click", e => {
console.log("You clicked the mouse!");
div.classList.toggle('active')
})
#sphere {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: yellow;
}
img {
width: 50px;
height: 50px;
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
}
#sphere.active {
background-color: white;
}
<div id="sphere">
<img src="https://freepngimg.com/thumb/bulb/31669-1-bulb-off-transparent-image.png">
</div>

I would create one css class white (background white) and one yellow (background yellow). Then with js you just add or remove the class you want.
Or you can make it white by default and just create a yellow background class, then you use js toggle class which add or remove automatically a class https://www.w3schools.com/howto/howto_js_toggle_class.asp
Hope it helps

To do this without toggling classes you can create a variable to keep track of which color is being displayed. Something like this:
const div = document.getElementById("sphere");
let isWhite = false;
div.addEventListener("click", e => {
console.log("You clicked the mouse!");
div.style.backgroundColor = isWhite ? "white" : "yellow";
isWhite = !isWhite;
})

Can't change clip-path property on an element

So I have a button with a box shadow, and when I click on it, I want to hide one side of the box shadow. When I change the initial CSS, everything works fine and the box shadow can be changed, but when I use javascript, none of the changes I make to the box shadow work.
HTML:
<button class = "ShowWeather" id = "ShowWeather" onclick = "ShowWeather()"></button>
javascript:
function ShowWeather(){
const Forecast = Get("Forecast"); //get just gets an element by id
const Button = Get("ShowWeather");
const slider = Get('forecast_slider');
if(slider.style.height == "0px"){
slider.style.border = "none";
slider.style.height = `${Forecast.getBoundingClientRect().height}px`;
Button.style.borderRadius = "0vw 0vw 0vw 0vw";
Button.style.borderBottom = "none";
Button.style.clipPath = "inset(-1vh -1vh 0vh -1vh);"; //THIS IS THE PROBLEMATIC LINE
}
else{
slider.style.height = "0px";
Button.style.clipPath = "inset(-1vh -1vh -1vh -1vh);"; //another problematic line
setTimeout(closeWeather, 300);
}
}
CSS:
.ShowWeather{
width: 16.15vw;
background: white;
border-top: none;
padding-top: 1vh;
position: relative;
bottom: 0.8vh;
border-radius: 0vw 0vw 1vw 1vw;
border: none;
box-shadow: 0vh 0.5vh 1vh gray;
clip-path: inset(-1vh -1vh 0vh -1vh);;
}
Everything besides the two problematic lines work perfectly, only changing the clip-path does not work. I probably made some tiny mistake but I have been trying to debug this 1 line of code for multiple hours aaaAAAA

you can try to remove the semicolon at the end:
Button.style.clipPath = "inset(-1vh -1vh -1vh -1vh)";

My button does not move to the upper right corner from the left side via javascript DOM

I have button in html that is on the middle left of the screen, that button is styled such as:
.openbtn {
font-size: 20px;
border-radius: 0 5px 5px 0;
cursor: pointer;
position: fixed;
Top: 50%;
left: 0px;
background-color: #181A1B;
color: white;
padding: 10px 15px;
border: none;
z-index: 1;
transition: 0.5s;
}
now when i click this button i want it to transfer to the upper right and when i click again it should go back to its original position. In Javascript the button is handled as so:
var lastState = false;
function sideButtonClicked() {
if(!lastState){
//open
lastState=true
document.getElementById("Button").style.left = "";
document.getElementById("Button").style.right = "0";
document.getElementById("Button").style.top = "0";
}
else{
//close
lastState=false
document.getElementById("Button").style.left = "0px";
document.getElementById("Button").style.right = "";
document.getElementById("Button").style.top = "50%";
}
I find this tricking because if i want to play that button on the upper right corner is when i declare it on css i dont place the left property but since its initial position is in the left i have to declare it. I tried setting it to "" but it does not work. What i know works is the button moves up/down upon clicking the button,
}

This is a simple example of how to toggle classes in vanilla JS. Then, you just do your styling via CSS.
// Cache the DOM element for continued use
var btn = document.getElementById("btn");
// Attach event listener to button for 'click' event
btn.addEventListener("click", () =>
{
// Where we see if it has the class or not
// Is it inactive?
if (!btn.classList.contains("active"))
{
console.log("Added");
btn.classList.add("active");
} else // If it *is* currently active
{
console.log("Removed");
btn.classList.remove("active");
}
});
.btn {
padding: 1rem;
width: 200px;
transition: all 300ms ease-in-out;
}
.btn.active {
padding: 2rem;
width: 400px;
}
<button class="btn" id="btn">Click Me</button>
Essentially, you're using a CSS class as a target for the different styling and just using JS to turn the class on/off. That way, you can just edit the 'toggle' class in CSS to whatever you want and the code will always work. This is usually what we use for sticky navbars, etc. You just add/remove another class, and that overrides the default styling.

How to make a button change color when clicked and then change back to its original color when a different button is clicked?

I have two buttons and I want the background-color to change color when I click one of them and then change back to its original color when I click the other button. I also want a hover feature that shows the color the button would be if it were to be clicked with some opacity.
I've tried
button:hover{
background-color: pink;
opacity: .5;
}
button:focus{
background-color: pink;
}
This works fine until I click anywhere in the screen and the color change is gone.
I've also tried
var buttons = $('button');
buttons.click(function() {
buttons.css('background-color', 'snow');
$(this).css('background-color', 'pink');
});
This also works fine except the hover effect stops working like I want it to. When I hover over a button, you can see the opacity change but it is no longer pink.
Is there a way to adjust either of these attempts to make it work properly? Thanks in advance

The problem is that your code is overriding the background-color property. Add the !important to your .button:hover and it will work as you expect. Snippet below:
var buttons = $('button');
buttons.click(function() {
buttons.css('background-color', 'snow');
$(this).css('background-color', 'pink');
});
button:hover {
background-color: pink !important;
opacity: .5;
}
button:focus {
background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>First</button>
<button>Second</button>
<button>Third</button>

As i said use Radio Buttons...
[edit]
with 2 version to get value event JS or jQuery
/* jQuery */
$('input[name="btGrp"]').on('change', function() {
console.clear();
console.log ('button is ', $(this).val());
// do button stuff...
});
/* */
/* pure JS * /
document.querySelectorAll('input[name="btGrp"]').forEach(xRadio=>{xRadio.onchange=evt=>{
console.clear();
console.log( 'button is ', evt.target.value);
// do button stuff...
}});
/* */
input[type="radio"] { display: none }
input[type="radio"]+label {
display : inline-block;
background-color : snow;
border : 3px solid #7986cb;
border-radius : 6px;
color : #37474f;;
width : 160px;
padding : 5px 0;
text-align : center;
margin : 5px;
}
input[type="radio"]+label:hover { background-color: lightblue; }
input[type="radio"]:checked + label { background-color: pink; }
input[type="radio"]:checked + label:hover { background-color: lightgreen }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="bt-1" type="radio" name="btGrp" value="b1" >
<label for="bt-1">button 1 </label>
<input id="bt-2" type="radio" name="btGrp" value="b2" >
<label for="bt-2">button 2 </label>
<input id="bt-3" type="radio" name="btGrp" value="b3" >
<label for="bt-3">button 3 </label>

You just need to add foucus pseudo class to button whenever button is focused the color remains and if anywhere you click the button will loose it's color
.my-button:{
background-color:black;
}
.my-button:focus{
background-color:white;
}

Show div on the same page and apply opacity to background

I am trying to make my whole body tag only to be blurred by using opacity. This should run only when I clicked on a button. My button function as a trigger to show a div. But when I do, all of it becomes blurry.
theButton.onclick = function() {
document.getElementById('show-form').style.visibility='visible';
document.getElementById('body').style.opacity='0.5'
}

I think you can apply the opacity only in the body background instead of the whole body element. Try the below code.
const btn = document.querySelector('button');
const invisible = document.querySelector('#show-form');
function showVisible() {
invisible.style.visibility = 'visible';
document.body.classList.add('with-opacity');
}
btn.addEventListener('click', showVisible);
#show-form {
width: 100%;
min-height: 70px;
background: #666;
color: #fff;
visibility: hidden;
}
.with-opacity {
background: rgba(0,0,0,0.3);
}
body, html {
width: 100%;
height: 100%;
}
<div id="show-form">Hello World!</div>
<br><br>
<button>Click me</button>