We Keep Coding

How do I get my etch-a-sketch program to "listen" to this dropdown menu instead of the buttons?

I'm new to Stack Overflow. I hope that I'm doing this correctly. ❤
I'm working on an old Etch-a-Sketch JavaScript project from months ago and decided to rework the 'mobile' form of the project because I hadn't bothered to do so at the time. At first, I tried just moving the buttons to the top horizontally, but I didn't like any of the variations I tried. So I decided I'd be better off with a dropdown menu instead that would appear when the screen is 500px or smaller, replacing the buttons.
The dropdown menu is supposed to do exactly what the buttons do - when a certain mode is selected, that's the mode that the program is supposed to switch to. For example, when the "Party mode" button is clicked, the program switches to "party mode". I want the dropdown menu to behave similarly - when the "party mode" option is selected, the program should switch to "party mode".
My logic was that I needed a function that grabbed the value of the dropdown menu, and then an "if" condition would run that pretty much says "If the value is x, x mode should run; else if the value is y, y mode should run", and so on. I added the function to the existing window.onload function so it would run upon the window loading. This didn't work.
Note that the dropdown menu will, in the future, only appear when the screen size is 500px or less. In addition, I still have the buttons on the screen for all sizes, just for testing/debugging purposes. When I'm done and have this figured out, the buttons will have "display = 'none'" and be hidden for the "mobile size".
Anyway, so yeah, the program is still just listening to the buttons, and not the dropdown menu. That leads me to believe that I need to somehow turn "off" the button mode? If that's the case, how do I do that? If that's not the case, what am I supposed to do here? Any help or insight would be greatly appreciated. Thanks!
const defaultMode = 'default';
const defaultSize = 30;
const defaultColor = '#0b478b';
let currentMode = defaultMode;
let currentSize = defaultSize;
let currentColor = defaultColor;
// Sets the program's current mode
function setCurrentMode(newMode) {
activeButton(newMode);
currentMode = newMode;
}
// Sets the grid's size
function setCurrentSize(newSize) {
currentSize = newSize;
}
// Sets the color of the square (if in default mode)
function setCurrentColor(newColor) {
currentColor = newColor;
}
// Links the various HTML elements to this script
const sizeValue = document.querySelector('#sizevalue');
const sizeSlider = document.querySelector('#sizeslider');
const colorPicker = document.querySelector('#colorpicker');
const defaultBtn = document.querySelector('#default');
const partyBtn = document.querySelector('#party');
const grayBtn = document.querySelector('#grayscale');
const eraserBtn = document.querySelector('#eraser');
const clearBtn = document.querySelector('#clear');
const grid = document.querySelector('#maincontainer');
// DOM manipulations for buttons, color picker, and size slider
colorPicker.onchange = (e) => setCurrentColor(e.target.value);
defaultBtn.onclick = () => setCurrentMode('default');
partyBtn.onclick = () => setCurrentMode('party');
grayBtn.onclick = () => setCurrentMode('gray');
eraserBtn.onclick = () => setCurrentMode('eraser');
clearBtn.onclick = () => reloadGrid();
sizeSlider.onmousemove = (e) => updateSizeValue(e.target.value);
sizeSlider.onchange = (e) => changeSize(e.target.value);
// When the size is changed, we set the grid size, update the size value (text), and reload the grid.
function changeSize(num) {
setCurrentSize(num);
updateSizeValue(num);
reloadGrid();
}
// When we update the size value, the text changes to reflect the value. (It's a square, so the value is always the same for length and width).
function updateSizeValue(num) {
sizeValue.innerHTML = `${num} x ${num}`;
}
// When we reload the grid (which happens when "Clear grid" is pressed), we ensure that we clear the grid and that the size is still the current size.
function reloadGrid() {
clearGrid()
makeGrid(currentSize)
}
// When we clear the grid, it clears the grid.
function clearGrid() {
grid.innerHTML = ''
}
// Creates the base grid and includes the code that says "when the mouse goes over the squares, draw."
function makeGrid(size) {
grid.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
grid.style.gridTemplateRows = `repeat(${size}, 1fr)`;
for (i = 0; i < size * size; i++) {
let square = document.createElement('div');
square.addEventListener('mouseover', changeColor);
grid.appendChild(square);
}
}
// These are the conditions to set the color of the "pen" (squares)
function changeColor(e) {
if (currentMode === 'party') {
const randomR = Math.floor(Math.random() * 256);
const randomG = Math.floor(Math.random() * 256);
const randomB = Math.floor(Math.random() * 256);
e.target.style.backgroundColor = `rgb(${randomR}, ${randomG}, ${randomB})`;
} else if (currentMode === 'default') {
e.target.style.backgroundColor = currentColor;
} else if (currentMode === 'gray') {
e.target.style.backgroundColor = calculateGray(e);
} else if (currentMode === 'eraser') {
e.target.style.backgroundColor = 'white';
}
}
// Shading mode code
function calculateGray(e) {
let clr = returnRGB(e.target.style.backgroundColor);
if (!clr || clr[1] !== clr[2] || clr[1] !== clr[3]) {
return `rgb(255, 255, 255)`;
}
return clr[1] <= 0 ? `rgb(255, 255, 255)` : `rgb(${clr[1]-25}, ${clr[1]-25}, ${clr[1]-25})`;
}
function returnRGB(num) {
return num.match(/rgb\(([0-9]*), ([0-9]*), ([0-9]*)\)/);
}
// Changes the button styling to indicate which mode is the active mode
function activeButton(newMode) {
if (currentMode === 'party') {
partyBtn.classList.remove('active');
} else if (currentMode === 'default') {
defaultBtn.classList.remove('active');
} else if (currentMode === 'gray') {
grayBtn.classList.remove('active');
} else if (currentMode === 'eraser') {
eraserBtn.classList.remove('active');
}
if (newMode === 'party') {
partyBtn.classList.add('active');
} else if (newMode === 'default') {
defaultBtn.classList.add('active');
} else if (newMode === 'gray') {
grayBtn.classList.add('active');
} else if (newMode === 'eraser') {
eraserBtn.classList.add('active');
}
}
// Ensures that, when we load the page, we make the grid and activate the correct mode (default).
window.onload = () => {
makeGrid(defaultSize);
activeButton(defaultMode);
dropdownModeThing(document.getElementById('dropdown-mode').value);
}
// Code for the dropdown menu
function dropdownModeThing(val) {
if (val === 'default') {
setCurrentMode('default');
} else if (val === 'party') {
setCurrentMode('party');
} else if (val === 'shading') {
setCurrentMode('gray');
} else if (val === 'eraser') {
setCurrentMode('eraser');
} else if (val === 'clear') {
reloadGrid();
}
}
body,
html {
min-height: 100vh;
height: 100%;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
margin: 0;
padding: 0;
background-color: white;
overflow-x: hidden;
}
header {
text-align: center;
margin: 0;
border-bottom: 1px solid black;
background-color: #0b478b;
color: white;
padding: 10px;
box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
}
p {
margin: 0;
}
h1 {
text-align: center;
margin: 0;
font-size: 2.5rem;
padding: 0;
}
#maincontainer {
background-color: white;
margin: 20px auto 10px auto;
display: grid;
border: 1px solid black;
width: 45vw;
height: 45vw;
min-height: 300px;
min-width: 300px;
box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
}
.testing {
padding-top: 100%;
color: hsla(0, 0%, 68%, 0.596);
}
#btncontainer {
padding-top: 20px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
a {
color: #2aa5a1;
text-decoration: none;
}
a:hover {
color: white;
}
button {
background-color: #2aa5a1;
color: white;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
border: 1px solid black;
margin: 10px 15px;
padding: 8px 10px;
font-size: .9em;
transition: 0.3s;
box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
}
button:active {
background-color: #3F86D8;
color: white;
border: 1px solid black;
}
.active {
background-color: #3F86D8;
transition: 0.3s;
color: white;
border: 1px solid black;
}
button:hover {
background-color: #0b478b;
color: white;
border: 1px solid black;
opacity: 1;
}
#rightside {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
text-align: center;
min-height: 500px;
padding: 0;
margin: 0;
}
#sizevalue {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
margin-bottom: 0;
}
input[type=range] {
background-color: white;
height: 28px;
-webkit-appearance: none;
margin: 0;
margin-bottom: 35px;
width: 250px;
padding: 0;
}
input[type=range]:focus {}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 11px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px #000000;
background: #3F86D8;
border-radius: 13px;
border: 0px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 2px #000031;
border: 1px solid #00001E;
height: 20px;
width: 20px;
border-radius: 15px;
background: #FFFFFF;
cursor: pointer;
-webkit-appearance: none;
margin-top: -5px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #3F86D8;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 11px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px #000000;
background: #3F86D8;
border-radius: 13px;
border: 0px solid #010101;
}
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 2px #000031;
border: 1px solid #00001E;
height: 20px;
width: 20px;
border-radius: 15px;
background: #F3EEED;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 11px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #3F86D8;
border: 0px solid #010101;
border-radius: 26px;
box-shadow: 1px 1px 1px #000000;
}
input[type=range]::-ms-fill-upper {
background: #3F86D8;
border: 0px solid #010101;
border-radius: 26px;
box-shadow: 1px 1px 1px #000000;
}
input[type=range]::-ms-thumb {
margin-top: 1px;
box-shadow: 1px 1px 2px #000031;
border: 1px solid #00001E;
height: 20px;
width: 20px;
border-radius: 15px;
background: #F3EEED;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: #3F86D8;
}
input[type=range]:focus::-ms-fill-upper {
background: #3F86D8;
}
main {
display: flex;
justify-content: center;
margin: 0;
margin-bottom: 20px;
padding: 0;
}
#colorpicker {
-webkit-appearance: none;
border-radius: 100vw;
width: 50px;
height: 50px;
padding: 0;
margin: 0 auto 10px auto;
overflow: hidden;
border: 1px solid black;
box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
}
input[type='color']:hover {
transform: scale(1.05);
}
input[type='color']::-webkit-color-swatch-wrapper {
padding: 0;
}
input[type='color']::-webkit-color-swatch {
border: none;
border-radius: 50px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
/* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%;
/* To the left of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
footer {
color: white;
text-align: center;
background-color: #0b478b;
position: fixed;
bottom: 0;
width: 100%;
margin: 0;
padding-top: 10px;
padding-bottom: 15px;
}
#media (max-width: 500px) {
main {
flex-direction: column;
}
#btncontainer {
margin: 0 auto;
padding: 20px 10px 5px 10px;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
}
#btncontainer button {
margin: 0 3px;
height: 35px;
}
#colorpicker {
-webkit-appearance: none;
border-radius: 100px;
width: 35px;
height: 35px;
padding: 0;
margin: 0 auto 10px auto;
overflow: hidden;
border: 1px solid black;
box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
}
}
<!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">
<!-- CSS spreadsheet -->
<link href="styles.css" rel="stylesheet">
<title>Etch-a-Sketch</title>
</head>
<body>
<!-- Note that this is set up in various divs so
that we can use Flex to create our wanted layout. -->
<div id="entirepage">
<header>
<h1>Etch-a-Sketch</h1>
<p title="Testing">Select a color or a different mode, then select your size, and get drawing!</p>
</header>
<main>
<div id="btncontainer">
<select id="dropdown-mode">
<option value="default">Default mode</option>
<option value="party">Party mode</option>
<option value="shading">Shading</option>
<option value="eraser">Eraser mode</option>
<option value="clear">Clear grid</option>
</select>
<input type="color" id="colorpicker" value="#0b478b">
<button id="default">Default mode</button>
<button id="party">Party mode</button>
<button id="grayscale">Shading</button>
<button id="eraser">Eraser mode</button>
<button id="clear">Clear grid</button>
</div>
<div id="rightside">
<div id="maincontainer">
</div>
<label for="sizeslider" id="sizevalue">30 x 30</label>
<input type="range" min="1" max="100" value="30" id="sizeslider">
</div>
</main>
<footer>
<p>Created by Sara Dunlop (RiscloverYT)</p>
</footer>
</div>
<!-- JavaScript script -->
<script src="script.js"></script>
</body>
</html>

Luckily, there's an easy way to do that. Add this piece of code into your javascript file and see the magic.
const dropdown = document.getElementById('dropdown-mode');
dropdown.addEventListener('change', (e) => {
setCurrentMode(e.target.value);
});
Read more about change event here.

CSS backdrop effect - blur background of search bar

I'm trying to make the background (only the search bar) to be a backdrop blur background without blurring the whole background image behind it.
I've tried webkit filter: blur & filter: blur, but they both blur the whole body and not just make the transparent background of the search bar blurred.
Note: I'm not using a background image in the code below because I'll embed this code in an iframe, which the background before it will be an image.
EDIT: I have removed the domain name in the ORIGINAL code so it doesn't conflict in search results for that domain name. Thanks everyone for helping me fix this issue! You're amazing!
<html>
<head>
<base target="_blank" />
<base target="_blank" />
<script type="text/javascript">
function submitSearch() {
var siteSearchUrl = "https://*DOMAIN_NAME*/_/search?query="; // Replace with your site's search URL
var query = document.getElementById("search-query-input").value;
var url = siteSearchUrl + query;
if (typeof IE_fix != "undefined") {
// IE8 and lower fix to pass the http referer
var referLink = document.createElement("a");
referLink.href = url;
document.body.appendChild(referLink);
referLink.click();
} else {
window.open(url, "_blank");
} // All other browsers
}
function searchKeyPress(e) {
// look for window.event in case event isn't passed in
e = e || window.event;
if (e.keyCode == 13) {
document.getElementById("search-icon").click();
return false;
}
return true;
}
</script>
<link
rel="stylesheet"
type="text/css"
href="https://ssl.gstatic.com/docs/script/css/add-ons.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700"
rel="stylesheet"
/>
<style>
body {
margin: 0;
padding: 14px 6px 0 6px;
background-color: transparent;
font-family: "Roboto", sans-serif;
overflow: hidden;
}
#search-icon {
margin: 4px 4px 4px 10px;
padding: 8px;
height: 24px;
vertical-align: middle;
cursor: pointer;
}
#search-icon:hover {
background: rgba(155, 153, 176, 0.2);
border-radius: 100px;
}
#search-query {
background: inherit;
}
body:before {
background: inherit;
}
#search-query:before {
box-shadow: inset 0 0 2000px rgba(255, 255, 255, 0.5);
filter: blur(10px);
}
#search-query {
width: max-content;
margin: 0 auto;
overflow: hidden;
border: 0;
border-radius: 14px;
color: #212121;
font-size: 16px;
line-height: 24px;
transition: 0.4s;
}
#search-query:hover {
color: #212121;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
font-size: 16px;
line-height: 24px;
}
#search-query-input {
width: 60vw;
height: 24px;
font-size: 16px;
font-stretch: normal;
letter-spacing: normal;
line-height: 24px;
border: 0;
color: #000;
background-color: transparent;
cursor: text;
margin-left: -5px;
text-align: start;
vertical-align: middle;
}
#media (max-width: 500px) {
#search-query-input {
width: 80vw;
}
}
#media (min-width: 900px) {
#search-query-input {
width: 60vw;
}
}
</style>
</head>
<body>
<!-- <input type="text" id="query" />
<button id="search" onclick="submitSearch()">Search</button> -->
<div id="search-query">
<img
id="search-icon"
alt="Search"
onclick="submitSearch();"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAQAAABIkb+zAAADAklEQVR4AezZA6xcQRSA4b92g9q2/VRuw9puVLcxake13Zh1G9W2bds2T42ZzNPeO7Pb5H5/zD17PUMgEAgEAoFAIGxFGMRMlrGTi7zjFZfZwTJmMohCRLkajOMYkkRHGUdNolI8B5EUdpB4okpJViOpbDXFiArpGMcHJIzeMY50RFgB9iIe2ksBIiiGR4jHHhFDhHTlI+JDH+lKBMQmceY/YhZNqExBMn+rAJUIMZMnCOY+EItjxRP9OetoTQZMMtCadYixJ5TAoQyYH1cbiCE5CWxADB0jA85MNp7JHUipnsbTbwqO1OWL4RSIIzUSDKfgF+riQBrOIFrPKENqleEZonWGNFjX0vDPNSUcTQ1HsiXWbUO0hhOu4YjWViwri2gdwYvDiFZ5rJqIaMXgRRyiNRGr7iBKa/BqDaJ0G4vKIVqN8Kqxy5OoL6L0mDR4lUZ/o2UA1sxHlBbhh8WI0jys2Y4odcUPXRCl7VhzDVFqgB8aIErXsUZ/fylr5dnyGGv0R38O/JADUfqMNfpLcHb8kF1/Mf/fT6HnWHMdUWqIHxoiSjexZiui1A0/dEWUtmHNPERpsZUH2WJ3rxKPSIdX6XiMKPXGmvKIVgivQohWJSx6YP11+g5WTUK04vAiBtGaBeDyJDqMF0cQrVpYthnRGkq4hiJau7GuhW/LKiHDskpzrEvDKV8WtkobFrZ24UQ9H5YW44xLi7VwZIpxcbcbKdXNuDUyG2cychQxtJ4YkhPPOsTQJXLiUMmwNjhasQUx9obyOBafzBZTiMoUIguZKUhlQszSRtYHaI5z+pnsT6NxKI5HiMee8xlRGoJDhdiNeOg6ZWmNRHKEdIzlXZj7w/PIDYBEdgQoxmokla2nNL9J5EeAeI4iKWwPXfiXRMcIUJPxHEOS6CTDKYVuTGRH0BViEDNZyk4u8gpBeMMuJtKegujcj2DN1/bnmAgAEIBhIJIZGZHOWAEslPsoyCMgIHxPmAgICAjXIQRQSsh+JSH7vYQ1StvZryW8vy9JkiQdHsFQT60Y7OcAAAAASUVORK5CYII="
/>
<input
type="text"
id="search-query-input"
placeholder="Search"
enterkeyhint="go"
onkeypress="return searchKeyPress(event);"
style="box-shadow: none"
;=""
/>
</div>
</body>
</html>

* {
padding: 0;
margin: 0;
font-family: sans-serif;
box-sizing: border-box;
}
.sections {
background-image: url(https://images.pexels.com/photos/3293148/pexels-photo-3293148.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
background-size:100vw;
background-size:cover;
background-repeat:no-repeat;
height: 100vh;
padding-top: 15vh;
}
.search-bar {
border: 1px solid transparent;
width: 300px;
align-items: center;
display: flex;
margin: 0 auto;
padding-left: 2vh;
border-radius: 10px;
transition: 0.5s;
}
.search-bar:hover {
border: 1px solid rgb(142, 141, 141);
backdrop-filter: blur(5px);
}
.search-text {
padding: 4vh 8vh;
background: transparent;
border: none;
height: 100%;
width: 100%;
border-radius: 50px;
font-size: 18px;
color: #424242;
font-weight: 500;
}
.search-text:focus {
outline: none;
}
.fa-search {
color: #fff;
}
<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" />
<script src="https://kit.fontawesome.com/2dba9f6187.js" crossorigin="anonymous"></script>
<title>Blur Background Project</title>
</head>
<body>
<header>
<div class="center">
<div class="sections">
<div class="search-bar">
<i class="fas fa-search"></i>
<input type="text" placeholder="Search" class="search-text" />
</div>
</div>
</div>
</header>
</body>

function submitSearch(){
var siteSearchUrl = 'https://support.yssf.ml/_/search?query='; // Replace with your site's search URL
var query = document.getElementById("search-query-input").value;
var url = siteSearchUrl + query
if(typeof IE_fix != "undefined") // IE8 and lower fix to pass the http referer
{
var referLink = document.createElement("a");
referLink.href = url;
document.body.appendChild(referLink);
referLink.click();
}
else { window.open(url,'_blank'); } // All other browsers
}
function searchKeyPress(e){
// look for window.event in case event isn't passed in
e = e || window.event;
if (e.keyCode == 13)
{
document.getElementById('search-icon').click();
return false;
}
return true;
}
body {
margin:0;
padding:14px 6px 0 6px;
background-color:transparent;
font-family: 'Roboto', sans-serif;
overflow:hidden;
background: url('https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
background-size:100vw;
background-size:cover;
background-repeat:no-repeat;
}
#search-query{
background: transparent;
width:max-content;
margin:0 auto;
overflow:hidden;
border:0;
border-radius:14px;
color: #212121;
font-size:16px;
line-height:24px;
transition:0.4s;
}
#search-query::before {
box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
filter: blur(10px);
}
#search-query:hover {
color: #212121;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),
0 3px 1px -2px rgba(0,0,0,0.12),
0 1px 5px 0 rgba(0,0,0,0.2);
font-size:16px;
line-height:24px;
backdrop-filter:blur(3px);
}
#search-query-input {
width:60vw;
height:24px;
font-size:16px;
font-stretch: normal;
letter-spacing: normal;
line-height:24px;
border:0;
color:#000;
background-color:transparent;
cursor:text;
margin-left:-5px;
text-align:start;
vertical-align:middle;
}
#search-query-input:hover{
color:white;
}
#search-icon {
margin: 4px 4px 4px 10px;
padding:8px;
height:24px;
vertical-align:middle;
cursor:pointer;
}
#search-icon:hover {
background: rgba(155,153,176, 0.2);
border-radius: 100px;
}
#search-query-input:hover::placeholder{
color:white;
}
#media (max-width:500px) {
#search-query-input {
width:80vw;
}
}
#media (min-width:900px) {
#search-query-input {
width:60vw;
}
}
<html>
<head>
<base target="_blank">
<base target="_blank">
<link rel="stylesheet" type="text/css" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
</head>
<body>
<!-- <input type="text" id="query" />
<button id="search" onclick="submitSearch()">Search</button> -->
<div id="search-query">
<img id="search-icon" alt="Search" onclick="submitSearch();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAQAAABIkb+zAAADAklEQVR4AezZA6xcQRSA4b92g9q2/VRuw9puVLcxake13Zh1G9W2bds2T42ZzNPeO7Pb5H5/zD17PUMgEAgEAoFAIGxFGMRMlrGTi7zjFZfZwTJmMohCRLkajOMYkkRHGUdNolI8B5EUdpB4okpJViOpbDXFiArpGMcHJIzeMY50RFgB9iIe2ksBIiiGR4jHHhFDhHTlI+JDH+lKBMQmceY/YhZNqExBMn+rAJUIMZMnCOY+EItjxRP9OetoTQZMMtCadYixJ5TAoQyYH1cbiCE5CWxADB0jA85MNp7JHUipnsbTbwqO1OWL4RSIIzUSDKfgF+riQBrOIFrPKENqleEZonWGNFjX0vDPNSUcTQ1HsiXWbUO0hhOu4YjWViwri2gdwYvDiFZ5rJqIaMXgRRyiNRGr7iBKa/BqDaJ0G4vKIVqN8Kqxy5OoL6L0mDR4lUZ/o2UA1sxHlBbhh8WI0jys2Y4odcUPXRCl7VhzDVFqgB8aIErXsUZ/fylr5dnyGGv0R38O/JADUfqMNfpLcHb8kF1/Mf/fT6HnWHMdUWqIHxoiSjexZiui1A0/dEWUtmHNPERpsZUH2WJ3rxKPSIdX6XiMKPXGmvKIVgivQohWJSx6YP11+g5WTUK04vAiBtGaBeDyJDqMF0cQrVpYthnRGkq4hiJau7GuhW/LKiHDskpzrEvDKV8WtkobFrZ24UQ9H5YW44xLi7VwZIpxcbcbKdXNuDUyG2cychQxtJ4YkhPPOsTQJXLiUMmwNjhasQUx9obyOBafzBZTiMoUIguZKUhlQszSRtYHaI5z+pnsT6NxKI5HiMee8xlRGoJDhdiNeOg6ZWmNRHKEdIzlXZj7w/PIDYBEdgQoxmokla2nNL9J5EeAeI4iKWwPXfiXRMcIUJPxHEOS6CTDKYVuTGRH0BViEDNZyk4u8gpBeMMuJtKegujcj2DN1/bnmAgAEIBhIJIZGZHOWAEslPsoyCMgIHxPmAgICAjXIQRQSsh+JSH7vYQ1StvZryW8vy9JkiQdHsFQT60Y7OcAAAAASUVORK5CYII=">
<input type="text" id="search-query-input" placeholder="Search" enterkeyhint="go" onkeypress="return searchKeyPress(event);" style="box-shadow:none" ;="">
</div>
</body>

Use CSS filter on any page element. This may require you to duplicate the existing background into the #search-query Div (so that there is an image present to be blurred, it then appears like a blur of the original image behind it) but also try it with no background as a test. It's been a while since I used it but you may find that the blur applies to everything behind it regardless.
#search-query{
filter: blur(10px);
}

How to customize Input slider to make volume bar

I'm trying to make volume bar with input slider with styled-components.
I could find many useful information but cannot find about how to customize valued area.
For example, if I set volume as 80, default html input range color from 0 to 80 blue. I want to change this color but couldn't find any information about it. When I set -webkit-appearance: none; I could find it becomes transparent but I just want to change colors of it. (Not the background. I know I can do that with background).
edit) This is my code
const StyledTrackVolumeSlide = styled.input`
width: 100%;
// -webkit-appearance: none; I know this code will reset default css
background: #555;
height: 0.25em;
outline: none;
&::-webkit-slider-thumb {
-webkit-appearance: none;
}
I tried these properties, but could not find one with the blue valued background color. And also cannot find in chrome dev tools. Tried all the stuffs from here
&::-webkit-slider-thumb{
}
&:focus{
}
&::-ms-track{
}
Is there any possible way to customize input slider's valued color with plain CSS?

Check out this tool: https://toughengineer.github.io/demo/slider-styler
Among other things it allows to style progress indication.
To make the slider vertical you'll have to use CSS transform, though.
Here is an example:
for (let e of document.querySelectorAll('input[type="range"].slider-progress')) {
e.style.setProperty('--value', e.value);
e.style.setProperty('--min', e.min == '' ? '0' : e.min);
e.style.setProperty('--max', e.max == '' ? '100' : e.max);
e.addEventListener('input', () => e.style.setProperty('--value', e.value));
}
/*generated with Input range slider CSS style generator (version 20201223)
https://toughengineer.github.io/demo/slider-styler*/
input[type=range].styled-slider {
height: 2.2em;
-webkit-appearance: none;
}
/*progress support*/
input[type=range].styled-slider.slider-progress {
--range: calc(var(--max) - var(--min));
--ratio: calc((var(--value) - var(--min)) / var(--range));
--sx: calc(0.5 * 2em + var(--ratio) * (100% - 2em));
}
input[type=range].styled-slider:focus {
outline: none;
}
/*webkit*/
input[type=range].styled-slider::-webkit-slider-thumb {
width: 2em;
height: 2em;
border-radius: 1em;
background: #007cf8;
border: none;
box-shadow: 0 0 2px black;
margin-top: calc(max((1em - 1px - 1px) * 0.5,0px) - 2em * 0.5);
-webkit-appearance: none;
}
input[type=range].styled-slider::-webkit-slider-runnable-track {
height: 1em;
border-radius: 0.5em;
background: #efefef;
border: 1px solid #b2b2b2;
box-shadow: none;
}
input[type=range].styled-slider::-webkit-slider-thumb:hover {
background: #0061c3;
}
input[type=range].styled-slider:hover::-webkit-slider-runnable-track {
background: #e5e5e5;
border-color: #9a9a9a;
}
input[type=range].styled-slider::-webkit-slider-thumb:active {
background: #2f98f9;
}
input[type=range].styled-slider:active::-webkit-slider-runnable-track {
background: #f5f5f5;
border-color: #c1c1c1;
}
input[type=range].styled-slider.slider-progress::-webkit-slider-runnable-track {
background: linear-gradient(#007cf8,#007cf8) 0/var(--sx) 100% no-repeat, #efefef;
}
input[type=range].styled-slider.slider-progress:hover::-webkit-slider-runnable-track {
background: linear-gradient(#0061c3,#0061c3) 0/var(--sx) 100% no-repeat, #e5e5e5;
}
input[type=range].styled-slider.slider-progress:active::-webkit-slider-runnable-track {
background: linear-gradient(#2f98f9,#2f98f9) 0/var(--sx) 100% no-repeat, #f5f5f5;
}
/*mozilla*/
input[type=range].styled-slider::-moz-range-thumb {
width: 2em;
height: 2em;
border-radius: 1em;
background: #007cf8;
border: none;
box-shadow: 0 0 2px black;
}
input[type=range].styled-slider::-moz-range-track {
height: max(calc(1em - 1px - 1px),0px);
border-radius: 0.5em;
background: #efefef;
border: 1px solid #b2b2b2;
box-shadow: none;
}
input[type=range].styled-slider::-moz-range-thumb:hover {
background: #0061c3;
}
input[type=range].styled-slider:hover::-moz-range-track {
background: #e5e5e5;
border-color: #9a9a9a;
}
input[type=range].styled-slider::-moz-range-thumb:active {
background: #2f98f9;
}
input[type=range].styled-slider:active::-moz-range-track {
background: #f5f5f5;
border-color: #c1c1c1;
}
input[type=range].styled-slider.slider-progress::-moz-range-track {
background: linear-gradient(#007cf8,#007cf8) 0/var(--sx) 100% no-repeat, #efefef;
}
input[type=range].styled-slider.slider-progress:hover::-moz-range-track {
background: linear-gradient(#0061c3,#0061c3) 0/var(--sx) 100% no-repeat, #e5e5e5;
}
input[type=range].styled-slider.slider-progress:active::-moz-range-track {
background: linear-gradient(#2f98f9,#2f98f9) 0/var(--sx) 100% no-repeat, #f5f5f5;
}
/*ms*/
input[type=range].styled-slider::-ms-fill-upper {
background: transparent;
border-color: transparent;
}
input[type=range].styled-slider::-ms-fill-lower {
background: transparent;
border-color: transparent;
}
input[type=range].styled-slider::-ms-thumb {
width: 2em;
height: 2em;
border-radius: 1em;
background: #007cf8;
border: none;
box-shadow: 0 0 2px black;
margin-top: 0;
box-sizing: border-box;
}
input[type=range].styled-slider::-ms-track {
height: 1em;
border-radius: 0.5em;
background: #efefef;
border: 1px solid #b2b2b2;
box-shadow: none;
box-sizing: border-box;
}
input[type=range].styled-slider::-ms-thumb:hover {
background: #0061c3;
}
input[type=range].styled-slider:hover::-ms-track {
background: #e5e5e5;
border-color: #9a9a9a;
}
input[type=range].styled-slider::-ms-thumb:active {
background: #2f98f9;
}
input[type=range].styled-slider:active::-ms-track {
background: #f5f5f5;
border-color: #c1c1c1;
}
input[type=range].styled-slider.slider-progress::-ms-fill-lower {
height: max(calc(1em - 1px - 1px),0px);
border-radius: 0.5em 0 0 0.5em;
margin: -1px 0 -1px -1px;
background: #007cf8;
border: 1px solid #b2b2b2;
border-right-width: 0;
}
input[type=range].styled-slider.slider-progress:hover::-ms-fill-lower {
background: #0061c3;
border-color: #9a9a9a;
}
input[type=range].styled-slider.slider-progress:active::-ms-fill-lower {
background: #2f98f9;
border-color: #c1c1c1;
}
<input type="range" class="styled-slider slider-progress" style="width: 25em;" />
<br />
<!--this div is needed to cut off all that's not needed, you have to specify width explicitly-->
<div style="display: inline-block; width: 2.2em; overflow: hidden;">
<!--this div catches the size of the child block-->
<div style="display: inline-block;">
<!--this div sizes itself to the width of the <input> and makes itself square, also rotates contents-->
<div style="display: inline-block; height: 0; padding: 0 0 100% 0; transform: rotate(-90deg);">
<!--style <input> as usual as if it is horizontal-->
<input type="range" class="styled-slider slider-progress" style="width: 10em;" />
</div>
</div>
</div>
more content to the right of the vertical slider

"default html input range color" doesn't exist, the element is rendered by your browser.
You must specify -webkit-appearance: none; (depends browser), for telling to the browser "don't design the input, I take care of that".
another tutorial
Sadly you must recreate input element, you can't just override color.

Need assistance with Palindrome flip-card app! It's not excuting the functions as planned

I'm made a Palindrome app that takes a word input and flips to say if it's a palindrome or not. However, after inputting a word it's not flipping the card to reveal if it's a palindrome or not. I was using following the Multi-faced Flip Card with a Click by Maria del Carmen Santiago, particularly the CSS and JavaScript sections as a guide. Could someone please help me figure out what it is I'm doing wrong?
I'm also attaching a CodePen link for the app.
{
const form = document.querySelector("form");
const input = document.querySelector(".word__input");
const cardContent = document.querySelector(".card__content");
const cardBack = document.querySelectorAll(".card__back");
const resultBack = document.querySelector(".back__result");
const backButton = document.querySelector(".back__button");
function clean(input) {
input.toLowercase().replace(/[\W]/g, "");
}
function isPalindrome(event) {
event.preventDefault();
const cleanInput = clean(input);
// const cleanInput = input.toLowerCase().replace(/[\W_]/g, "");
// const reverseInput = cleanInput.split("");
const reverseInput = cleanInput.split("").reverse().join("");
// for (let i = 0; i < reverseInput.length; i++) {
// // const element = array[index];
// if
// }
if (reverseInput === cleanInput) {
// console.log(reverseInput);
// console.log(cleanInput);
cardBack.classList.add(
"display",
(resultBack.innerHTML = `Yes ${CleanInput} is a Palindrome!`)
);
// resultBack.innerHTML = `Yes ${CleanInput} is a Palindrome!`;
// document.querySelector(
// ".back__result"
// ).innerHTML = `Yes ${CleanInput} is a Palindrome!`;
} else {
// console.log(reverseInput);
// console.log(cleanInput);
cardBack.classList.add(
"display",
(resultBack.innerHTML = `No sorry, ${CleanInput} is not a Palindrome!`)
);
// resultBack.innerHTML = `No sorry, ${CleanInput} is not a Palindrome!`;
// document.querySelector(
// ".back__result"
// ).innerHTML = `No sorry, ${CleanInput} is not a Palindrome!`;
}
cardFlip();
form.reset();
}
function cardFlip() {
cardContent.classList.toggle("is-flipped");
}
// function cardFlipBack() {
// // Remove back of the card 2 seconds after flipping.
// setTimeout(function () {
// cardBack.classList.remove("display");
// }, 2000);
// cardFlip();
// }
form.addEventListener("submit", isPalindrome);
backButton.addEventListener("click", cardFlip);
// backButton.forEach(function (button) {
// Button.addEventListener("click", cardFlip);
// });
}
:root {
--first-color: #fe9813;
--second-color: #e77b0e;
--third-color: #a22000;
--fourth-color: #281200;
--fith-color: #281200db;
--sixth-color: #e4dede80;
--seventh-color: #e4dedec5;
--font: "Orbitron";
--first-shadow: 6px 6px 12px #220f00, -6px -6px 12px #2e1500;
--second-shadow: 6px 6px 12px #931d00, -6px -6px 12px #b12300;
--first-shadow-inset: inset 8px 8px 16px #c76a0c, inset -8px -8px 16px #ff8c10;
--second-shadow-inset: inset 6px 6px 12px #931d00,
inset -6px -6px 12px #b12300;
--first-shadow-text: 2px 2px 4px rgba(0, 0, 0, 0.6), -1px -1px 3px #fff;
--second-shadow-text: 1px 1px 2px rgba(0, 0, 0, 0.3), -1px -1px 1.5px #fff;
}
*,
*:before,
*:after {
box-sizing: inherit;
text-align: center;
font-family: var(--font), sans-serif, monospace;
font-size: 30px;
font-weight: normal;
color: var(--first-color);
-webkit-text-stroke: 2px var(--third-color);
}
body {
background-color: var(--fourth-color);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
min-height: 100vh;
}
main {
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
margin: 0 auto;
}
img {
align-items: center;
width: 90vw;
height: 60vh;
margin: -20px 0px;
margin-top: -150px;
}
.card {
width: 450px;
height: 450px;
perspective: 450px;
text-align: center;
border-radius: 5px;
margin-top: -100px;
}
.card__content {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transform-style: preserve-3d;
transform-origin: center right;
transition: transform 2s;
}
.card__content.is-flipped {
transform: translateX(-100%) rotateY(-180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
border-radius: 10px;
backface-visibility: hidden;
border-radius: 10px;
}
.card__front {
padding: 20px 5px;
box-shadow: var(--first-shadow);
}
h2 {
font-size: 45px;
font-weight: normal;
}
.enter__word {
margin-top: 25px;
}
.word__input {
padding: 10px;
align-items: center;
border: 1px solid var(--third-color);
outline: none;
width: 300px;
height: 50px;
-webkit-text-stroke: 1px var(--third-color);
background: var(--fourth-color);
border-radius: 10px;
}
.card__back {
transform: rotateY(180deg);
display: none;
padding: 20px 5px;
}
.card__back.display {
display: block;
}
p {
font-size: 2em;
font-weight: 700;
text-align: center;
margin-top: -50px;
}
button {
margin: 5px;
padding: 10px;
width: 90px;
height: 45px;
outline: 0;
border: 1px solid var(--third-color);
background: transparent;
cursor: pointer;
font-size: 25px;
-webkit-text-stroke: 1.2px var(--third-color);
border-radius: 5px 10px;
position: absolute;
bottom: 0px;
right: 0px;
}
.start__button:hover {
color: var(--third-color);
background: var(--second-color);
font-weight: bolder;
}
.start__button:active {
box-shadow: var(--first-shadow-inset);
}
.back__button:hover {
color: var(--third-color);
background: var(--second-color);
font-weight: bolder;
}
.back__button:active {
box-shadow: var(--first-shadow-inset);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ROTATOR</title>
<link
href="https://fonts.googleapis.com/css2?family=Orbitron&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<main>
<div class="title">
<h1 class="logo">
<img src="https://raw.githubusercontent.com/Avixph/Palindrome/fbca45350e2be55f7db82f2b64a0dad94dfe7d16/images/rotator_logo.svg" />
</h1>
</div>
<div>
<div class="card">
<div class="card__content">
<div id="front" class="card__face card__front">
<h2>Is</h2>
<form class="enter__word">
<input id="form__input" class="word__input" type="text" placeholder="Enter Word" required="required" />
<h2>a Palindrome?</h2>
<button id="form__button" class="button start__button" type="submit">
Check
</button>
</form>
</div>
<div id="back" class="card__face card__back">
<p class="back__result">Yes, _____ is a Palindrome.</p>
<button id="back__button" class="button back__button">
Reset
</button>
</div>
</div>
</div>
</div>
</main>
<script src="js/script.js"></script>
</body>
</html>

You very very close to getting it right, you just had some issues that should be catched by an IDE.
Typo: toLowerCase instead of toLowercase.
You were not using return inside the function clean. If you don't do that, the value will never be passed to the outer environment.
Typo: cleanInput instead of CleanInput.
querySelectorAll is used when you want to grab many items. You just wanted one.
You were adding changing the innerHTML in a wrong place, as a second parameter of the classList.add method.
But don't fret over these issues, you did a good job!
{
const form = document.querySelector("form");
const input = document.querySelector(".word__input");
const cardContent = document.querySelector(".card__content");
const cardBack = document.querySelector(".card__back");
const resultBack = document.querySelector(".back__result");
const backButton = document.querySelector(".back__button");
function clean(input) {
return input.toLowerCase().replace(/[\W]/g, "");
}
function isPalindrome(event) {
event.preventDefault();
const cleanInput = clean(input.value);
// const cleanInput = input.toLowerCase().replace(/[\W_]/g, "");
// const reverseInput = cleanInput.split("");
const reverseInput = cleanInput.split("").reverse().join("");
// for (let i = 0; i < reverseInput.length; i++) {
// // const element = array[index];
// if
// }
if (reverseInput === cleanInput) {
// console.log(reverseInput);
// console.log(cleanInput);
cardBack.classList.add("display");
resultBack.innerHTML = `Yes ${cleanInput} is a Palindrome!`;
// resultBack.innerHTML = `Yes ${CleanInput} is a Palindrome!`;
// document.querySelector(
// ".back__result"
// ).innerHTML = `Yes ${CleanInput} is a Palindrome!`;
} else {
// console.log(reverseInput);
// console.log(cleanInput);
cardBack.classList.add("display");
resultBack.innerHTML = `No sorry, ${cleanInput} is not a Palindrome!`;
// resultBack.innerHTML = `No sorry, ${CleanInput} is not a Palindrome!`;
// document.querySelector(
// ".back__result"
// ).innerHTML = `No sorry, ${CleanInput} is not a Palindrome!`;
}
cardFlip();
form.reset();
}
function cardFlip() {
cardContent.classList.toggle("is-flipped");
}
// function cardFlipBack() {
// // Remove back of the card 2 seconds after flipping.
// setTimeout(function () {
// cardBack.classList.remove("display");
// }, 2000);
// cardFlip();
// }
form.addEventListener("submit", isPalindrome);
backButton.addEventListener("click", cardFlip);
// backButton.forEach(function (button) {
// Button.addEventListener("click", cardFlip);
// });
}
:root {
--first-color: #fe9813;
--second-color: #e77b0e;
--third-color: #a22000;
--fourth-color: #281200;
--fith-color: #281200db;
--sixth-color: #e4dede80;
--seventh-color: #e4dedec5;
--font: "Orbitron";
--first-shadow: 6px 6px 12px #220f00, -6px -6px 12px #2e1500;
--second-shadow: 6px 6px 12px #931d00, -6px -6px 12px #b12300;
--first-shadow-inset: inset 8px 8px 16px #c76a0c, inset -8px -8px 16px #ff8c10;
--second-shadow-inset: inset 6px 6px 12px #931d00,
inset -6px -6px 12px #b12300;
--first-shadow-text: 2px 2px 4px rgba(0, 0, 0, 0.6), -1px -1px 3px #fff;
--second-shadow-text: 1px 1px 2px rgba(0, 0, 0, 0.3), -1px -1px 1.5px #fff;
}
*,
*:before,
*:after {
box-sizing: inherit;
text-align: center;
font-family: var(--font), sans-serif, monospace;
font-size: 30px;
font-weight: normal;
color: var(--first-color);
-webkit-text-stroke: 2px var(--third-color);
}
body {
background-color: var(--fourth-color);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
min-height: 100vh;
}
main {
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
margin: 0 auto;
}
img {
align-items: center;
width: 90vw;
height: 60vh;
margin: -20px 0px;
margin-top: -150px;
}
.card {
width: 450px;
height: 450px;
perspective: 450px;
text-align: center;
border-radius: 5px;
margin-top: -100px;
}
.card__content {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transform-style: preserve-3d;
transform-origin: center right;
transition: transform 2s;
}
.card__content.is-flipped {
transform: translateX(-100%) rotateY(-180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
border-radius: 10px;
backface-visibility: hidden;
border-radius: 10px;
}
.card__front {
padding: 20px 5px;
box-shadow: var(--first-shadow);
}
h2 {
font-size: 45px;
font-weight: normal;
}
.enter__word {
margin-top: 25px;
}
.word__input {
padding: 10px;
align-items: center;
border: 1px solid var(--third-color);
outline: none;
width: 300px;
height: 50px;
-webkit-text-stroke: 1px var(--third-color);
background: var(--fourth-color);
border-radius: 10px;
}
.card__back {
transform: rotateY(180deg);
display: none;
padding: 20px 5px;
}
.card__back.display {
display: block;
}
p {
font-size: 2em;
font-weight: 700;
text-align: center;
margin-top: -50px;
}
button {
margin: 5px;
padding: 10px;
width: 90px;
height: 45px;
outline: 0;
border: 1px solid var(--third-color);
background: transparent;
cursor: pointer;
font-size: 25px;
-webkit-text-stroke: 1.2px var(--third-color);
border-radius: 5px 10px;
position: absolute;
bottom: 0px;
right: 0px;
}
.start__button:hover {
color: var(--third-color);
background: var(--second-color);
font-weight: bolder;
}
.start__button:active {
box-shadow: var(--first-shadow-inset);
}
.back__button:hover {
color: var(--third-color);
background: var(--second-color);
font-weight: bolder;
}
.back__button:active {
box-shadow: var(--first-shadow-inset);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ROTATOR</title>
<link
href="https://fonts.googleapis.com/css2?family=Orbitron&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<main>
<div class="title">
<h1 class="logo">
<img src="https://raw.githubusercontent.com/Avixph/Palindrome/fbca45350e2be55f7db82f2b64a0dad94dfe7d16/images/rotator_logo.svg" />
</h1>
</div>
<div>
<div class="card">
<div class="card__content">
<div id="front" class="card__face card__front">
<h2>Is</h2>
<form class="enter__word">
<input id="form__input" class="word__input" type="text" placeholder="Enter Word" required="required" />
<h2>a Palindrome?</h2>
<button id="form__button" class="button start__button" type="submit">
Check
</button>
</form>
</div>
<div id="back" class="card__face card__back">
<p class="back__result">Yes, _____ is a Palindrome.</p>
<button id="back__button" class="button back__button">
Reset
</button>
</div>
</div>
</div>
</div>
</main>
<script src="js/script.js"></script>
</body>
</html>

When strictly comparing two equal values stored in an array, how come the output does not return equal?

I am creating the array clickedBoxesArray and passing class names to it on each click. I am then comparing those class names. When the class name of the element I've just clicked matches the class name of the Item I have clicked previously, I then want to add classes to those elements.
When the values of the object at clickedBoxesArray[clickedBoxesCounter] is the same as clickedBoxesArray[prevClickedBoxCounter], the if statement does not trigger. But if the value at those two positions is Undefined, the if statement evaluates the two values as equal and changes classes as desired. Why will the statement work if the values are `undefined but not if the values are identical lists of classes?
JS/JQuery:
$(document).ready(function(){
"use strict";
//this function populates the game body with a user selected # of cards
$(".submit").on("click", function(){
var boxAmt = 2 * Math.round(parseInt($(".boxNum").val())/2);
for (var b = 1; b <= boxAmt; b++){
$(".game-body").append("<span class='card'><i class='fa fa-heart fa-4x'></i></span>");
// $(".game-body").append("<span class='card'><i class='fa " + iconChoices[Math.floor(Math.random()*(200-0+1))+0] + " fa-4x'></i></span>");
};
if(boxAmt%5 === 0){
$(".game-body").css({marginLeft : "20%", marginRight : "20%"});
}//closes %5 if/else
else if(boxAmt%4 === 0){
$(".game-body").css({marginLeft : "28%", marginRight : "20%"});
}
});
//this function flips cards
$(".game-body").on("click", ".card", function(){
$(this).addClass("fliparoo");
$(this.children).addClass("game-icon");
});
//this function counts clicks and matches cards
var count = 0;
var clickedBoxesArray = []
$(".game-body").click(function(){
count+=1;
function logClicksCurrent(input){
clickedBoxesArray.push(input);
}
logClicksCurrent($(".game-body").find(".fliparoo").children()[count -1]);
var clickedBoxesCounter = clickedBoxesArray.length-1;
var prevClickedBoxCounter = clickedBoxesArray.length-2
console.log(clickedBoxesArray[clickedBoxesCounter]);
console.log(clickedBoxesArray[prevClickedBoxCounter]);
console.log(clickedBoxesArray)
if(count%2 === 0 && clickedBoxesArray[clickedBoxesCounter] === clickedBoxesArray[prevClickedBoxCounter]){
$(".game-body").find(".fliparoo").addClass("match-card");
$(".game-body").find(".fliparoo").addClass("match-icon");
}
});
HTML:
<!DOCTYPE html>
<html>
<head>
<title>MEMORY | easy mode</title>
<link href="./assets/css/reset.css" rel="stylesheet">
<link href="./assets/css/style.css" rel="stylesheet">
<link href="./assets/css/animations.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Orbitron:400,500,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<audio src="./assets/audio/got-theme.mp3"></audio>
<div id="entrance-animation" class="fadeIn">
<header>
<div class="header">
<div class="memory-name">
<span>Mem</span><i class="fa fa-lightbulb-o"></i> <span>ry</p>
</div>
</div>
<!-- class="heart-row">
<i class="fa fa-heart"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-heart-o"></i>
<i class="fa fa-heart-o"></i>
</ul> -->
<span class="timer"></span>
</header>
<div class="enter-boxes">HOW MANY BOXES DO YOU WANT?</div>
<input type="text" value="" class="boxNum">
<input class="submit" type="submit" value="gimme boxes">
<section class="game-body group">
</section>
</main>
<footer>
<nav>
<div class="return-to-menu">Back to menu</div>
</nav>
</footer>
</div>
<script src="./assets/js/scripts.js"></script>
</body>
</html>
CSS:
/*********************************************************
element and cross-page styling
**********************************************************/
*{
box-sizing: border-box;
}
body {
background: blue;
font-family: 'Orbitron', sans-serif;
color: white
}
a {
text-decoration: none;
color: white;
}
.memory-name {
text-align: justify;
font-family: 'Orbitron', sans-serif;
color: white;
font-size: 4em;
}
/*********************************************************
new-game page styling
**********************************************************/
.choice-menu {
display: inline-block;
margin: 10% 0 0 40%;
}
.new-game-text {
display: inline-block;
margin: 0 0 0 40px;
padding: 40px 0 0 0;
text-align: center;
font-size: 2em;
}
.easy-mode-box {
text-align: center;
font-size: 2em;
border: 2px solid white;
margin: 50px 0 0 20px;
padding: 10px 0;
background: blue;
transform: perspective(200px) rotateY(-15deg)
}
.hard-mode-box {
text-align: center;
font-size: 2em;
border: 2px solid white;
margin: 20px 0 0 20px;
padding: 10px 0;
background: blue;
transform: perspective(200px) rotateY(15deg)
/*add transform here*/
}
.easy-mode-box:hover {
-webkit-transition-property: background;
background: paleturquoise;
}
.hard-mode-box:hover {
-webkit-transition-property: background;
background: turquoise;
}
/*********************************************************
easy mode page styling (index.html)
**********************************************************/
/****header****/
.easy-mode-header {
display: block;
margin: 0 0 0 40%;
}
.heart-row {
display: inline-block;
margin: 0 0 0 16%;
}
.timer {
float: right;
margin: 0 16% 0 0;
}
/****game body****/
.game-body {
margin: 5% 15%;
position: relative;
/*margin: auto;*/
}
.game-body span {
position: relative;
float: left;
overflow: hidden;
}
.card {
width: 10em;
height: 10em;
background: steelblue;
display: block;
transition: background 1s, -webkit-transform 1s;
border-radius: .4em;
border: 1px solid darkblue;
margin: 3px;
color: rgba(255,255,255,0);
text-align: center;
padding-top: 5%;
}
.card:hover {
box-shadow: 2px 2px 2px 2px darkblue;
}
/****click transitions****/
.fliparoo {
background: powderblue;
-webkit-transform: rotateY(180deg);
}
.game-icon {
color:rgba(255,255,255,1);
transition-delay: .5s;
}
.match-card{
background: limegreen;
}
.match-icon{
color:rgba(200,200,200,1);
}
/*********************************************************
footer
**********************************************************/
.return-to-menu {
display: inline-block;
text-align: center;
font-size: 2em;
/*border: 2px solid white;*/
margin: 50px 0 20px 42%;
padding: 10px 10px 5px 10px;
background: blue;
border-radius: .3em;
}
.enter-boxes {
display: block;
font-size: 1em;
/*border: 2px solid white;*/
background: blue;
border-radius: .3em;
}
.return-to-menu:hover {
-webkit-transition-property: background;
background: cornflowerblue;
box-shadow: 2px 2px 2px 2px steelblue;
}
/*********************************************************
clearfix (experimental-prolly not relevant)
**********************************************************/
.group:after {
content: "";
display: table;
clear: both;
}
/*********************************************************
media queries
**********************************************************/
#media (max-width: 1420px) {
.game-body{
width: 2000px;
}
}
#media (min-width: 1620px) {
.margin-fix {
margin: 2% 0 0 15%;
}
}
#media (min-width: 1620px) {
.margin-fix-2 {
margin: 2% 0 0 23%;
}
}