We Keep Coding

Javascript - Radio buttons with switch case

I am trying to change the div's background colour using inputs from the radio buttons but I struggle to change colours in reverse order e.g. (pink to black ) or (green to yellow). It works perfectly fine when I try to change colour in order e.g. (black to red) or (red to yellow). I have used console.log to check the variable when I click on a different radio button and it is changing accordingly.
Many thanks
const container = document.querySelector(".container");
const cell = document.querySelector(".cell");
// var rows = 16; //default grid = 16x16
// var cols = 16;
var rows = 16;
var cols = 16;
function makeGrid(rows, cols) {
container.style.setProperty("--rows", rows);
container.style.setProperty("--cols", cols);
for (i = 0; i < (rows * cols); i++) {
let cell = document.createElement("div");
container.appendChild(cell).className = "cell";
container.appendChild(cell).id = i + 1;
};
};
function modifyCell() {
$(document).ready(function() {
var radioValue = $('input[type=radio]:checked').val();
switch (radioValue) {
case 'black':
// console.log(radioValue);
$(".cell").on("mousedown", function() {
$(this).removeClass('cell').addClass('cell-black');
})
.on("mouseup", function() {
$(this).removeClass('cell').addClass('cell-black');
});
break;
case 'red':
console.log(radioValue);
$(".cell").on("mousedown", function() {
$(this).removeClass('cell').addClass('cell-red');
})
.on("mouseup", function() {
$(this).removeClass('cell').addClass('cell-red');
});
break;
case 'pink':
console.log(radioValue);
$(".cell").on("mousedown", function() {
$(this).removeClass('cell').addClass('cell-pink');
})
.on("mouseup", function() {
$(this).removeClass('cell').addClass('cell-pink');
});
break;
case 'yellow':
console.log(radioValue);
$(".cell").on("mousedown", function() {
$(this).removeClass('cell').addClass('cell-yellow');
})
.on("mouseup", function() {
$(this).removeClass('cell').addClass('cell-yellow');
});
break;
case 'green':
console.log(radioValue);
$(".cell").on("mousedown", function() {
$(this).removeClass('cell').addClass('cell-green');
})
.on("mouseup", function() {
$(this).removeClass('cell').addClass('cell-green');
});
break;
case 'blue':
console.log(radioValue);
$(".cell").on("mousedown", function() {
$(this).removeClass('cell').addClass('cell-blue');
})
.on("mouseup", function() {
$(this).removeClass('cell').addClass('cell-blue');
});
break;
case 'violet':
console.log(radioValue);
$(".cell").on("mousedown", function() {
$(this).removeClass('cell').addClass('cell-violet');
})
.on("mouseup", function() {
$(this).removeClass('cell').addClass('cell-violet');
});
break;
default:
alert("!");
};
});
};
function reset() {
$(document).ready(function() {
while (container.firstChild) {
container.firstChild.remove();
};
makeGrid(rows, cols);
modifyCell();
});
};
function resetGrid() {
rows = prompt('Enter a number for grid size. (min = 1, max = 50)');
cols = rows;
$(document).ready(function() {
while (container.firstChild) {
container.firstChild.remove();
};
makeGrid(rows, cols);
modifyCell();
});
};
makeGrid(rows, cols);
modifyCell();
$('input[type=radio]').on('change', function() {
modifyCell();
});
html {
background-image: linear-gradient(45deg, purple, pink);
justify-items: center;
}
header {
margin-bottom: 10px;
padding: 3px;
text-align: center;
font-family: sans-serif;
font-size: 30px;
color: purple;
border: 5px thin purple;
border-radius: 10px;
width: 93vw;
background-color: white;
}
.container {
background-color: white;
display: grid;
margin: 2px;
border: 3px solid purple;
border-radius: 10px;
padding: 6px;
justify-content: center;
width: 90vw;
height: 90vw;
grid-template-rows: repeat(var(--rows), 1fr);
grid-template-columns: repeat(var(--cols), 1fr);
grid-gap: 1px;
}
.container .cell {
background-color: gray;
opacity: 0.3;
}
.container .cell:hover {
background-color: hsl(30, 0%, 95%);
opacity: 1;
}
.container .cell-black {
background-color: black;
opacity: 1;
}
.container .cell-red {
background-color: red;
opacity: 1;
}
.container .cell-pink {
background-color: pink;
opacity: 1;
}
.container .cell-yellow {
background-color: yellow;
opacity: 1;
}
.container .cell-green {
background-color: green;
opacity: 1;
}
.container .cell-blue {
background-color: blue;
opacity: 1;
}
.container .cell-violet {
background-color: violet;
opacity: 1;
}
.button {
border: 2px solid black;
border-radius: 20px;
font-size: 15px;
}
.button:hover {
border: 2px solid black;
border-radius: 20px;
font-size: 15px;
background-color: pink;
}
.radio {
border: 2px solid black;
border-radius: 10px;
box-sizing: border-box;
background-color: white;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Etch-a-Sketch</title>
</head>
<header>
Etch-a-Sketch
</header>
<body>
<input class="button" type="button" value="Reset Grid" onclick="resetGrid()">
<input class="button" type="button" value="Clear" onclick="reset()">
<div class="container">
</div>
<div class="radio">
<input type="radio" id="black" name="colour" value="black" checked>
<label for="black">Black</label>
<input type="radio" id="red" name="colour" value="red">
<label for="red">Red</label>
<input type="radio" id="pink" name="colour" value="pink">
<label for="pink">Pink</label>
<input type="radio" id="yellow" name="colour" value="yellow">
<label for="yellow">Yellow</label>
<input type="radio" id="green" name="colour" value="green">
<label for="green">Green</label>
<input type="radio" id="blue" name="colour" value="blue">
<label for="blue">Blue</label>
<input type="radio" id="violet" name="colour" value="violet">
<label for="violet">Violet</label>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

You need to remove all the other cell-<color> classes when adding the new color, not just the cell class.
You shouldn't add new event handlers every time the user selects a different radio button. Just have the event handler get the color from the selected radio button.
And instead of using switch/case, you can concatenate the button value to cell- to get the new class to add.
I'm not sure why you had both mousedown and mouseup handlers, since they both did the same thing. So I combined them into a single click handler.
const container = document.querySelector(".container");
const cell = document.querySelector(".cell");
// var rows = 16; //default grid = 16x16
// var cols = 16;
var rows = 16;
var cols = 16;
function makeGrid(rows, cols) {
container.style.setProperty("--rows", rows);
container.style.setProperty("--cols", cols);
for (i = 0; i < (rows * cols); i++) {
let cell = document.createElement("div");
container.appendChild(cell).className = "cell";
container.appendChild(cell).id = i + 1;
};
};
function modifyCell() {
$(document).ready(function() {
$(".cell").on("click", function() {
var radioValue = $('input[type=radio]:checked').val();
$(this).removeClass("cell cell-black cell-red cell-pink cell-yellow cell-green cell-blue cell-violet").addClass("cell-" + radioValue);
});
});
}
function reset() {
$(document).ready(function() {
while (container.firstChild) {
container.firstChild.remove();
};
makeGrid(rows, cols);
modifyCell();
});
};
function resetGrid() {
rows = prompt('Enter a number for grid size. (min = 1, max = 50)');
cols = rows;
$(document).ready(function() {
while (container.firstChild) {
container.firstChild.remove();
};
makeGrid(rows, cols);
modifyCell();
});
};
makeGrid(rows, cols);
modifyCell();
html {
background-image: linear-gradient(45deg, purple, pink);
justify-items: center;
}
header {
margin-bottom: 10px;
padding: 3px;
text-align: center;
font-family: sans-serif;
font-size: 30px;
color: purple;
border: 5px thin purple;
border-radius: 10px;
width: 93vw;
background-color: white;
}
.container {
background-color: white;
display: grid;
margin: 2px;
border: 3px solid purple;
border-radius: 10px;
padding: 6px;
justify-content: center;
width: 90vw;
height: 90vw;
grid-template-rows: repeat(var(--rows), 1fr);
grid-template-columns: repeat(var(--cols), 1fr);
grid-gap: 1px;
}
.container .cell {
background-color: gray;
opacity: 0.3;
}
.container .cell:hover {
background-color: hsl(30, 0%, 95%);
opacity: 1;
}
.container .cell-black {
background-color: black;
opacity: 1;
}
.container .cell-red {
background-color: red;
opacity: 1;
}
.container .cell-pink {
background-color: pink;
opacity: 1;
}
.container .cell-yellow {
background-color: yellow;
opacity: 1;
}
.container .cell-green {
background-color: green;
opacity: 1;
}
.container .cell-blue {
background-color: blue;
opacity: 1;
}
.container .cell-violet {
background-color: violet;
opacity: 1;
}
.button {
border: 2px solid black;
border-radius: 20px;
font-size: 15px;
}
.button:hover {
border: 2px solid black;
border-radius: 20px;
font-size: 15px;
background-color: pink;
}
.radio {
border: 2px solid black;
border-radius: 10px;
box-sizing: border-box;
background-color: white;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Etch-a-Sketch</title>
</head>
<header>
Etch-a-Sketch
</header>
<body>
<input class="button" type="button" value="Reset Grid" onclick="resetGrid()">
<input class="button" type="button" value="Clear" onclick="reset()">
<div class="container">
</div>
<div class="radio">
<input type="radio" id="black" name="colour" value="black" checked>
<label for="black">Black</label>
<input type="radio" id="red" name="colour" value="red">
<label for="red">Red</label>
<input type="radio" id="pink" name="colour" value="pink">
<label for="pink">Pink</label>
<input type="radio" id="yellow" name="colour" value="yellow">
<label for="yellow">Yellow</label>
<input type="radio" id="green" name="colour" value="green">
<label for="green">Green</label>
<input type="radio" id="blue" name="colour" value="blue">
<label for="blue">Blue</label>
<input type="radio" id="violet" name="colour" value="violet">
<label for="violet">Violet</label>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

Manage dropdown lists in a sidenav

I am trying to do a side navigation that:
Just have ONE open sublist (close other)
Select only the clicked link in sublist
There are tons of examples out there, but I have not found any good sample in Vanilla Javascript.
HTML
<div class="sidenav">
Home
<button class="btn">Module 1</button>
<div class="list">
Link 1
Link 2
Link 3
</div>
<button class="btn">Module 2</button>
<div class="list">
Link 1
Link 2
Link 3
</div>
</div>
Javascript
var dropdown = document.getElementsByClassName("btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
The complete CSS is found on this Fiddle:
http://jsfiddle.net/q2en6djg/1/
Any clue, hint or help is appreciated.

You can consider an active CSS class to make it easier:
var dropdown = document.getElementsByClassName("btn");
var l = dropdown.length;
var i;
for (i = 0; i < l; i++) {
dropdown[i].addEventListener("click", function() {
for (var j = 0; j < l; j++) {
if (this != dropdown[j])
dropdown[j].classList.remove('active')
}
this.classList.toggle('active');
});
}
/*To select the sub item*/
var sub = document.querySelectorAll(".list a");
for (var i = 0; i < sub.length; i++) {
sub[i].addEventListener("click", function() {
this.classList.toggle('active');
});
}
* {
font-family: "Trebuchet MS", sans-serif;
font-size: 7em;
}
.sidenav {
margin-top: 0px;
height: auto;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #555;
overflow-x: hidden;
}
.sidenav a,
.btn {
padding: 10px 10px 10px 20px;
text-decoration: none;
font-size: 17px;
color: #fff;
display: block;
text-align: left;
border: none;
background: none;
width: 100%;
cursor: pointer;
outline: none;
border-bottom: 1px solid #777;
box-sizing:border-box;
}
.sidenav a:hover,
.sidenav a.active,
.btn:hover,
.btn.active {
background-color: #777;
}
.list {
display: none;
background-color: #999;
padding-left: 0px;
}
.active+.list {
display: block;
}
<div class="sidenav">
Home
<button class="btn">Module 1</button>
<div class="list">
Link 1
Link 2
Link 3
</div>
<button class="btn">Module 2</button>
<div class="list">
Link 1
Link 2
Link 3
</div>
</div>

Display collapse content one at a time

I found some really helpful tutorial to help me use javascript to expand and collapse content, but now I can't figure out how to make it only expand one at a time... So that when one div is expanded, if you click to expand another one, it collapses the first one. Any ideas? Here is the tutorial that i have followed
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
.collapsible {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="collapsible"> Expand </button>
<div class="content">
<p>Some content</p>
</div>

You can select all the <div class="content"> and then set each of those to display: none. Snippet below:
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
//add new code here
var contents = document.querySelectorAll('div.content')
contents.forEach((content) => {
content.style.display = "none"
})
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
.collapsible {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
<button class="collapsible"> Expand </button>
<div class="content">
<p>Some content</p>
</div>
<button class="collapsible"> Expand </button>
<div class="content">
<p>Some content2</p>
</div>
Hope this helps

how to highlight a tab between multiple tabs of a browser

If I use alert command (jQuery) in tab and if am in other tab then when the alert pops that tab starts blinking.
However I wanted a custom dialog box, so I created one. The problem is when I used the custom dialog box the tab is not getting highlighted.
$(document).ready(function() {
var dialog = $('#window');
$('#exit').click(function() {
dialog.hide();
});
$('#snooze').click(function() {
var selected = $('#dropdown :selected').val();
dialog.hide();
setTimeout(function() {
dialog.show();
}, selected * 1000);
});
$('#show').click(function() {
dialog.show();
});
});
#exit {
padding: 4px 8px;
}
#window {
width: 400px;
height: 150px;
position: absolute;
margin: auto;
top: 0%;
right: 0%;
bottom: 0%;
left: 0%;
/*background: linear-gradient(top, #ffffff 0%, #93d2ed 73%);*/
border: 1px solid gray;
font-family: sans-serif;
/* padding: 5px 10px 20px 20px;*/
}
#snoozetimer {
border: 1px solid grey;
padding: 2px 2px 4px 4px
}
#head {
background: #76DBEA;
display: block;
padding: 5px 10px 5px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="window">
<span id="head">Time out alert</span>
<h3 style="padding:0px 5px">
<p>Please Submit Time In !</p>
</h3>
<span><img src="alarm.gif" alt="image" style="position:absolute;right:10%;top:25%;display:inline-block; width=50px;height:50px;"></img></span>
<button id="exit">Close </button>
<span id="snoozetimer">
<select id="dropdown">
<option value="5">5-Minutes</option>
<option value="10">10-Minutes</option>
<option value="15">15-Minutes</option>
<option value="20">20-Minutes</option>
<option value="25">25-Minutes</option>
<option value="30">30-Minutes</option>
</select>
<button id="snooze">Snooze </button>
</span>
</div>
**I have a ASP.net project i need pass some value to master page so that the alert dialog pops up after a certain time by click certain event on the page ,if the user is in other tab of same project,can i pop up alert dialog on the currently active tab , otherwise on contrary if the tab gets hightlighted on which it is clikced after certain time its fine, if i use predefined alert from jquery its working as i wanted but if i use custum created dialog pop up its doenot have the power of the real alert box IF anyone knows any solution pls tell me
**

I created Tabs using w3school code and try to answer your scenario.
i believe you can use this simple approach easily.Here I attached whole code of it.
After you snooze the clock after its expire tab 1 will be highlighted even if you were at any tab at that moment.
function openCity(evt, tab) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(tab).style.display = "block";
evt.currentTarget.className += " active";
}
var dialog = $('#window');
$('#exit').click(function() {
dialog.hide();
});
$('#snooze').click(function() {
var selected = $('#dropdown :selected').val();
dialog.hide();
setTimeout(function() {
var tablinks1 = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks1.length; i++) {
if (tablinks1[i].className === 'tablinks tab1') {
tablinks1[i].className = "tablinks tab1 active";
} else {
tablinks1[i].className = tablinks1[i].className.replace(" active", "");
}
}
dialog.show();
}, selected * 1000);
});
$('#show').click(function() {
var tablinks1 = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks1.length; i++) {
if (tablinks1[i].className === 'tablinks tab1') {
tablinks1[i].className = "tablinks tab1 active";
} else {
tablinks1[i].className = tablinks1[i].className.replace(" active", "");
}
}
dialog.show();
});
#exit {
padding: 4px 8px;
}
#window {
width: 400px;
height: 150px;
position: absolute;
margin: auto;
top: 0%;
right: 0%;
bottom: 0%;
left: 0%;
/*background: linear-gradient(top, #ffffff 0%, #93d2ed 73%);*/
border: 1px solid gray;
font-family: sans-serif;
/* padding: 5px 10px 20px 20px;*/
}
#snoozetimer {
border: 1px solid grey;
padding: 2px 2px 4px 4px
}
#head {
background: #76DBEA;
display: block;
padding: 5px 10px 5px 10px;
}
/* Style the tab */
div.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
div.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
/* Change background color of buttons on hover */
div.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
div.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<button id="show">show </button>
<div class="tab">
<button class="tablinks tab1" onclick="openCity(event, 'Tab1')">Tab1</button>
<button class="tablinks tab2" onclick="openCity(event, 'Tab2')">Tab2</button>
<button class="tablinks tab3" onclick="openCity(event, 'Tab3')">Tab3</button>
</div>
<div id="Tab1" class="tabcontent">
<h3>Tab1</h3>
<div id="window">
<span id="head">Time out alert</span>
<h3 style="padding:0px 5px">
<p>Please Submit Time In !</p>
</h3>
<span><img src="alarm.gif" alt="image" style="position:absolute;right:10%;top:25%;display:inline-block; width=50px;height:50px;"></img></span>
<button id="exit">Close </button>
<span id="snoozetimer">
<select id="dropdown">
<option value="5">5-Minutes</option>
<option value="10">10-Minutes</option>
<option value="15">15-Minutes</option>
<option value="20">20-Minutes</option>
<option value="25">25-Minutes</option>
<option value="30">30-Minutes</option>
</select>
<button id="snooze">Snooze </button>
</span>
</div>
</div>
<div id="Tab2" class="tabcontent">
<h3>Tab2</h3>
</div>
<div id="Tab3" class="tabcontent">
<h3>Tab3</h3>
</div>
</body>
</html>
There may be several ways to do your problem.but this is quite easy :)
Cheers.

How to align center an accordion in CSS?

There is an accordion on the left container of my webpage which is left aligned by default. I am using CSS to align it center. I have tried using position: center, align: left and margin-left: 5px in the CSS code but those are not working. Can anyone help me out. Thanks in advance.
Here is my code for CSS:
var acc_leftpanel = document.getElementsByClassName("accordion_leftpanel");
var i;
for (i = 0; i < acc_leftpanel.length; i++) {
acc_leftpanel[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + 'px';
}
}
}
button.accordion_leftpanel {
background-color: #2da0d9;
color: #444;
cursor: pointer;
padding: 5px;
width: 60%;
border: none;
align: center;
text-align: center;
outline: none;
font-size: 12px;
transition: 0.4s;
border-radius: 25px;
}
button.accordion_leftpanel.active,
button.accordion_leftpanel:hover {
background-color: #5ebb61;
}
button.accordion_leftpanel:after {
color: #ffffff;
font-weight: bold;
float: center;
margin-left: 8px;
}
<div class="leftcontentborder">
<p align="center">LIST OF SOLVED PAPERS</p>
<button class="accordion_leftpanel" align="center">June 2014</button>
<div class="panel">
<p>Paper 2</p>
<p>Paper 3</p>
</div>
</div>

Center using using margin, margin: 0 auto;
Also, check out https://developer.mozilla.org/en-US/docs/Web/CSS

You can add a class to your CSS if you want to center the all inside leftcontentborder.
.leftcontentborder {
text-align: center;
}