We Keep Coding

Toggle menu by changing styles in Javascript

I am trying to add a toggle function to a menu.
I'm trying to do this by changing the style of the the menu in Javascript like below.
It seems to work when I click to open the menu but it doesn't work for closing the menu.
let toogleNavStatus = false;
let toogleNav = function(){
let getSidebar = document.querySelector(".nav-links");
if (toogleNavStatus === false) {
getSidebar.style.visibility = "visible";
toogleNavStatus === true;
}
else if (toogleNavStatus === true) {
getSidebar.style.visibility = "hidden";
toogleNavStatus === false;
}
}
Can someone help me figure out what the problem is with this code?
Below is the HTML
<nav class="nav-bar">
<div class="nav-center">
<div class="nav-header">
<a href="index.html" class="nav-logo">
<img src="./assets/logo.svg" alt="logo" />
</a>
<button type="button" class="btn nav-btn">
<i class="fas fa-bars" onclick="toogleNav()"></i>
</button>
</div>
<div class="nav-links">
Home
All
Contacts
<div class="nav-link nav-social">
<a href="https://www.instagram.com/">
<i class="fab fa-instagram"></i
></a>
</div>
</div>
</div>
</nav>
Thank you

You are not assigning a new state for toogleNavStatus in your JS.
It should be
toogleNavStatus = true;
toogleNavStatus = false;
not
toogleNavStatus === true;
toogleNavStatus === false;
= assigns the value, == and === compares them.

Expanding a div element onClick always expands the same div element

I have three divs containing three separate charts on a page and I would like to expand one to fullscreen on click.
I am targeting a class in the div i'd like to expand (.container-expand) and also a class on the button (.toggle_fullscreen) so that no matter which button is clicked that element will expand, example below.
$('.toggle_fullscreen').on('click', function(){
// if already full screen; exit
// else go fullscreen
if (
document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement
) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
element = $('.container-expand').get(0);
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
});
With the button being;
<button type="button" class="btn btn-sm btn-white toggle_fullscreen">Go Fullscreen</button>
And the container being;
<div class="card container-expand" id="chart1">
2 example divs to show layout
<div class="card col-md-6 border container-expand">
<div class="dropdown show ">
<button type="button" class="btn btn-sm btn-white toggle_fullscreen">Go Fullscreen</button>
<a class="btn btn-sm btn-white" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"><i class="fa fa-download"></i></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a style="margin-left: 10px" href="#" id="download1" download="ChartImage1.jpg"></i>save as
image</a>
<button class="dropdown-item" onclick="saveAsPDF1()">save as pdf</button>
<a class="dropdown-item" href="#">export charts as excel</a>
</div>
</div>
<h4 class="chartTitle">This is chart 1</h4>
<canvas class="chart1" id="chart1" width="400" height="200"></canvas>
</div>
<div class="card col-md-6 border container_expand">
<div class="dropdown show">
<button type="button" class="btn btn-sm btn-white toggle_fullscreen">Go Fullscreen</button>
<a class="btn btn-sm btn-white" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"><i class="fa fa-download"></i></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a style="margin-left: 10px" href="#" id="download2" download="ChartImage2.jpg"></i>save as
image</a>
<button class="dropdown-item" onclick="saveAsPDF2();">save as pdf</button>
<a class="dropdown-item" href="#">export charts as excel</a>
</div>
</div>
<h4 class="chartTitle">This is Chart 2</h4>
<canvas class="chart2 container-expand" id="chart2" width="400" height="200"></canvas>
</div>
The outcome i'm getting is that it is always the same div that expands to fullscreen. e.g I click fullscreen on chart 3 and chart 1 will expand. Same for Chart 2.
Prior to pushing to a branch, this worked fine with each chart and it's div expanding to full screen properly and then, didn't, so I think my understanding of what is happening is off.
I'm still learning, and I'm aware i could get this to work by repeating the code and changing the id's so they're unique, but I'd like to learn some understanding from this.
Any help is appreciated.

You could do as follows:
$('.toggle_fullscreen').on('click', function(e){
var element;
// if already full screen; exit
// else go fullscreen
if (document.fullscreenElement || ... ) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
/**
* based on your current event target `e`,
* find the .container-expand belonging to the current .dropdown box
**/
element = $(e).parent().parent().find('.container-expand');
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
});

Updating window.location with new images based off JS if statements

I’m trying to refactor my already working application. https://besthaircolor.herokuapp.com/
App: When user selects eyeColor and skinTone, a new html results page opens (window.location) and presents them their 3 best hair colors.
Goal: Currently, I have numerous html pages based on every possible result, ex. eyeColor: “Brown” skinTone :“Fair”, Submit, then window.location opens up a separate page of 3 images of best unique hair colors. I’m trying to find a way where there is just ONE html results (window.location)page and the only thing that updates from the dropdown selections are the photos (results).
I’m having a hard time researching what I’m trying to do because adding an img src to window.location wouldn't technically work if it's not clear where the img's will be on the results page correct? I apologize if it’s confusing, I’m still a beginner. If anyone can point me in the right direction or suggest any tutorials for what I’m trying to accomplish that would be helpful.
Unless, my code is perfectly fine the way it currently is but from my studies duplicate/redundant code is never good. If anyone can kindly let me know.
My index.js:
document.onreadystatechange = function () {
if (document.readyState === "interactive") {
initApplication();
}
}
var eyeColor = null;
function selectMenu1(value){
eyeColor = value;
}
var skinTone = null;
function selectMenu2(value){
skinTone = value;
}
function validate() {
if (eyeColor && skinTone){
// alert(`You selected ${eyeColor} eye colour and ${skinTone} skin tone.`);
if (eyeColor=="brown" && skinTone=="fair"){
window.location = "brown/brown_fair.html";
} else if (eyeColor=="brown" && skinTone=="light"){
window.location = "brown/brown_light.html";
} else if (eyeColor=="brown" && skinTone=="medium"){
window.location = "brown/brown_medium.html";
} else if (eyeColor=="brown" && skinTone=="bronze"){
window.location = "brown/brown_bronze.html";
} else if (eyeColor=="brown" && skinTone=="tan"){
window.location = "brown/brown_tan.html";
} else if (eyeColor=="brown" && skinTone=="rich"){
window.location = "brown/brown_rich.html";
}
if (eyeColor=="blue" && skinTone=="fair"){
window.location = "blue/blue_fair.html";
} else if (eyeColor =="blue" && skinTone=="light"){
window.location = "blue/blue_light.html";
} else if (eyeColor =="blue" && skinTone=="medium"){
window.location = "blue/blue_medium.html";
} else if (eyeColor =="blue" && skinTone=="bronze"){
window.location = "blue/blue_bronze.html";
} else if (eyeColor=="blue" && skinTone=="tan"){
window.location = "blue/blue_tan.html";
} else if (eyeColor=="blue" && skinTone=="rich"){
window.location = "blue/blue_rich.html";
}
if (eyeColor=="green" && skinTone=="fair"){
window.location = "green/green_fair.html";
} else if (eyeColor == "green" && skinTone=="light"){
window.location= "green/green_light.html";
} else if (eyeColor== "green" && skinTone=="medium"){
window.location="green/green_medium.html";
} else if (eyeColor=="green" && skinTone=="bronze"){
window.location="green/green_bronze.html";
} else if (eyeColor=="green" && skinTone=="tan"){
window.location="green/green_tan.html";
} else if (eyeColor=="green" && skinTone=="rich"){
window.location="green/green_rich.html";
}
if (eyeColor=="hazel" && skinTone=="fair"){
window.location = "hazel/hazel_fair.html";
} else if (eyeColor=="hazel" && skinTone=="light"){
window.location="hazel/hazel_light.html";
} else if (eyeColor=="hazel" && skinTone=="medium"){
window.location="hazel/hazel_medium.html";
} else if (eyeColor=="hazel" && skinTone=="bronze"){
window.location="hazel/hazel_bronze.html";
} else if (eyeColor=="hazel" && skinTone=="tan"){
window.location="hazel/hazel_tan.html";
} else if (eyeColor=="hazel" && skinTone=="rich"){
window.location="hazel/hazel_rich.html";
}
}
//Error message if user does not select an item from the dropdown menus
if (!eyeColor){
document.getElementById("error").innerHTML = "<span class='error'>Please choose an eye color</span>";
}
else if (!skinTone){
document.getElementById("error").innerHTML = "<span class='error'>Please choose a skin tone</span>";
}
}
function initApplication(){
//setup dropdown menu selection events
Array.from(document.querySelectorAll(".dropdown-menu")).forEach((menu,idx)=>{
const menuCallbackName = menu.attributes.onchange.value;
const fetchedCallback = window[menuCallbackName] || null;
if (fetchedCallback){
Array.from(menu.children).forEach((child)=>{
const callbackValue = child.attributes.data ? child.attributes.data.value : null;
if (callbackValue) child.onclick = () => fetchedCallback(callbackValue);
});
} else console.error(`No callback function named ${menuCallbackName} for menu ${idx}`);
});
}
my index.html:
<title>Best Hair Color</title>
<!--Intro-->
<div class="container text-center">
<div class="jumbotron">
<h1 class="display-4" style="font-size: 2.5rem;"><i class="fas fa-user-alt"></i> Your Best Hair Color Is . . .</h1>
<hr class="my-4">
<p class="info">"The most flattering hair color comes when you have "THE PERFECT TRIO". A perfect trio is when your hair color matches your skin tone and eye color. Your perfect hair color will make your eyes POP. Your eyes will appear brighter and bigger. It will also go well with your skin tone. The right hair color will give your skin color, vibrance, and softness." - Salone Envy Chicago</p>
</div>
<!--Drop down Item 1 -->
<h3 class="display-4" style="font-size: 1.5rem;">What is your eye color</h3>
<div class="dropdown">
<div class="input-group justify-content-center">
<div class="input-group-btn">
<button class="btn btn-info btn-md dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="background-color: #588c7e;">
Eye Color
</button>
<div class="dropdown-menu" onchange="selectMenu1" aria-labelledby="dropdownMenuButton" id="eyeColor">
<a class="dropdown-item" data="brown" ><img src="img/brown_eye.jpg" class="rounded-circle"> Brown</a>
<a class="dropdown-item" data="blue" ><img src="img/blue_eye.jpg" class="rounded-circle" > Blue</a>
<a class="dropdown-item" data="green" ><img src="img/green_eye.jpg" class="rounded-circle" > Green</a>
<a class="dropdown-item" data="hazel" ><img src="img/hazel_eye.jpg" class="rounded-circle" > Hazel</a>
</div>
</div>
</div>
</div>
<!--Drop down Item 2-->
<h3 class="display-4" style="font-size: 1.5rem;"> What is your skin tone</h3>
<div id="menu2" class="dropdown">
<div class="input-group justify-content-center">
<div class="input-group-btn">
<button class="btn btn-info btn-md dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="background-color: #588c7e;">
Skin Tone
</button>
<div class="dropdown-menu" onchange="selectMenu2" aria-labelledby="dropdownMenuButton" id="skinTone">
<a class="dropdown-item" data="fair"><img src="img/fair.jpg" class="rounded-circle" > Fair</a>
<a class="dropdown-item" data="light"><img src="img/light.jpg" class="rounded-circle" > Light</a>
<a class="dropdown-item" data="medium"><img src="img/medium.jpg" class="rounded-circle" > Medium</a>
<a class="dropdown-item" data="bronze"><img src="img/bronze_dark.jpg" class="rounded-circle" > Bronze</a>
<a class="dropdown-item" data="tan"><img src="img/tan.jpg" class="rounded-circle" > Tan</a>
<a class="dropdown-item" data="rich"><img src="img/dark.jpg" class="rounded-circle" > Rich</a>
</div>
<div class="error" id="error"></div>
</div>
</div>
</div>
<br>
<!--Result Button-->
<label id="error"></label>
<button type="button" class="btn btn-info btn-lg active" title ="Submit" style="background-color: #3e4444;" onclick="validate()"><i class="fas fa-arrow-circle-right fa-lg"></i></button>
<script>
$(".dropdown-menu a ").click(function(){
$(this).parents(".input-group-btn").find('.btn').text($(this).text());
});
</script>
</body>
</html>

There are a lot of ways to improve your code, but if you are specifically looking to clean up your redundancies, you can clean up all your selection functions with something like this:
function getColor (eyeColor, skinTone) {
window.location = eyeColor + "/" + eyeColor + "_" + skinTone + ".html";
}

I can suggest you with two solutions,
With the same set of pages,rather than redirecting the whole page make use you of Iframe to load whatever page you want inside the Iframe
The way I do:
Use image tag and feed it with whatever image source you want as a byte array.

So basically what I was suggesting was something like:
<!--index.html-->
<!--after result-button-->
<div id="brown_fair" style="display:hidden">
<!-- here goes your brown/brown_fair.html content, or what you want of it-->
</div>
<!--one more div for each possible result-->
and in your javascript:
function validate() {
if (eyeColor && skinTone){
// alert(`You selected ${eyeColor} eye colour and ${skinTone} skin tone.`);
if (eyeColor=="brown" && skinTone=="fair") {
//toggle element visibility
document.getElementById("brown_fair").style.display(desiredDisplay);
}
//...
}
}

If your code is already working, you can replace the redundant code this way:
window.location = `{eyeColor}/{eyeColor}_{skinTone}.html`;

Fix behavior of collapse/expand blocks

I use bootstrap 4 alpha 6 version. I have several blocks in my page. I want expand/collapse these blocks by clicking main button (id='expand-collapse'). Also every button has there own individual buttons which would open/close concrete block. Right know I use next js code and have strange behavior.
For example: I open first block by clicking first button, then I click main button (id='expand-collapse') to open other blocks. But in fact first block closed and other blocks opened. How to fix this problem?
HTML:
<div class="card">
<div class="card-header">
<button id='expand-collapse' type="button" data-parent="#blocks" data-toggle="collapse" data-target=".block" aria-expanded="false" aria-controls=".block">
</button>
</div>
<div class="card-block">
<div id="blocks">
<div class="list-group">
<div class="list-group-item">
<a data-toggle="collapse" href="#block-1" aria-expanded="false" aria-controls="block-1">OPEN/CLOSE FIRST</a>
<div class="collapse block" id="block-1">
FIRST BLOCK BLOCK-->
</div>
</div>
<div class="list-group-item">
<a data-toggle="collapse" href="#block-2" aria-expanded="false" aria-controls="block-2">OPEN/CLOSE SECOND</a>
<div class="collapse block" id="block-2">
SECOND BLOCK
</div>
</div>
<div class="list-group-item">
<a data-toggle="collapse" href="#block-3" aria-expanded="false" aria-controls="block-3">OPEN/CLOSE THIRD</a>
<div class="collapse block" id="block-3">
THIRD BLOCK
</div>
</div>
</div>
</div>
</div>
</div>
JAVASCRIPT:
$(function() {
$('#expand-collapse').on('click', function() {
var target = $(this).attr('data-target');
$(target).each(function() {
if ($(this).hasClass('show')) {
$(this).collapse('hide');
} else {
$(this).collapse('show');
}
});
});
});

That kind of behaviour is due to data-toggle attribute. Take that off from the main button and change the script to this-
HTML
<button id='expand-collapse' type="button" data-parent="#blocks" data-target=".block" aria-expanded="false" aria-controls=".block">
</button>
JQUERY:
$(function() {
var showAll = false;
$('#expand-collapse').on('click', function() {
var target = $(this).attr('data-target');
//console.log('showAll=' + showAll);
$(target).each(function() {
if(showAll === false) {
$(this).collapse('show');
}
else {
$(this).collapse('hide');
}
});
if(showAll === false) {
showAll = true;
}
else {
showAll = false;
}
//console.log('showAll=' + showAll);
});
});

Adding a 3rd Option to Questionnaire for "Select an Option"

I have a questionnaire and if the user selects Option 1 or 2 for Select an Option what they select determines the link that is displayed at the end of the questionnaire. Instead of only 2 options, I would like to have 3 options for Select an Option.
Here is the HTML:
<a id="q1_one" class="step_button next" href="javascript:void(0)">option 1</a>
<a id="q1_two" class="step_button next" href="javascript:void(0)">option 2</a>
This is where I would like to add a q1_three but I'm not sure how to get it to work
The Javascript:
function run_loading_run_4(time_delay, q1) {
timeoutID3 = window.setTimeout(
function() {
run_loading_4(q1);
},
time_delay);
}
function run_loading_4(q1) {
$('.run_loading_4, .loading').hide();
$('.li_run_loading_4, li_run_loading_5, .run_loading_5, .show_end').fadeIn();
$('#' + q1).show();
}
$(function () {
var q1;
$(document).on('click', '.next', function (e) {
e.preventDefault();
$(this).parent().hide().next().fadeIn();
if ($(this).attr('id') === "q1_one") {
q1 = "yes";
} else if ($(this).attr('id') === "q1_two") {
q1 = "no";
}
});
$(document).on('click', '.run_loading', function (e) {
e.preventDefault();
$(this).parent().hide().next().fadeIn();
$('.step4 .loading').show();
run_loading_run_1('2000');
run_loading_run_2('4500');
run_loading_run_3('6500');
run_loading_run_4('8900',q1);
});
});
and the answers: that are displayed depending if option 1 or 2 is selected.
<div id="yes">
<a class="step_button" href="http://link1.com">I Agree</a>
</div>
<div id="no">
<a class="step_button" href="http://link2.com">I Agree</a>
</div>
JSFIDDLE: http://jsfiddle.net/8r6eH/

Add option by add following lines:
HTML(line#5 and #37);
<h2>Select An Option</h2>
<a id="q1_one" class="step_button next" href="javascript:void(0)">Option 1</a>
<a id="q1_two" class="step_button next" href="javascript:void(0)">Option 2</a>
<a id="q1_three" class="step_button next" href="javascript:void(0)">Option 3</a>
<div id="yes">
<a class="step_button" href="http://link2.com">IF QUESTION 1 = Option 1</a>
</div>
<div id="no">
<a class="step_button" href="http://link1.com">IF QUESTION 1 = Option 2</a>
</div>
<div id="3rd_option">
<a class="step_button" href="http://link1.com">IF QUESTION 1 = Option 3</a>
</div>
and javascript(line#57):
if ($(this).attr('id') === "q1_one") {
q1 = "yes";
} else if ($(this).attr('id') === "q1_two") {
q1 = "no";
} else if ($(this).attr('id') === "q1_three") {
q1 = "3rd_option";
}
jsFiddle