We Keep Coding

Classlist method gives typerror

So I'm trying to make a simple to do list and I'm trying select all the li tags so when clicked on the li tag it would cross it out and display a check mark But I get an error saying Uncaught TypeError: Cannot read properties of undefined (reading 'add')
at check (script.js:11:18)
at HTMLLIElement.onclick (index.html:12:33)
const addBtn = document.getElementById("addBtn");
const inputEl = document.getElementById("myInput");
const li = document.getElementsByClassName("li")
addBtn.addEventListener("click", () => {
myUl.innerHTML += `<li>${inputEl.value}</li>`
})
check = () => {
li.classList.add("checked")
}
* {
box-sizing: border-box;
}
/* Remove margins and padding from the list */
ul {
margin: 0;
padding: 0;
}
/* Style the list items */
ul li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
background: #eee;
font-size: 18px;
transition: 0.2s;
/* make the list items unselectable */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Set all odd list items to a different color (zebra-stripes) */
ul li:nth-child(odd) {
background: #f9f9f9;
}
/* Darker background-color on hover */
ul li:hover {
background: #ddd;
}
/* When clicked on, add a background color and strike out text */
ul li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}
/* Add a "checked" mark when clicked on */
ul li.checked::before {
content: '';
position: absolute;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 15px;
width: 7px;
}
/* Style the close button */
.close {
position: absolute;
right: 0;
top: 0;
padding: 12px 16px 12px 16px;
}
.close:hover {
background-color: #f44336;
color: white;
}
/* Style the header */
.header {
background-color: #f44336;
padding: 30px 40px;
color: white;
text-align: center;
}
/* Clear floats after the header */
.header:after {
content: "";
display: table;
clear: both;
}
/* Style the input */
input {
margin: 0;
border: none;
border-radius: 0;
width: 75%;
padding: 10px;
float: left;
font-size: 16px;
}
/* Style the "Add" button */
#addBtn {
padding: 10px;
width: 25%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
}
.addBtn:hover {
background-color: #bbb;
}
<h2>My To Do List</h2>
<input type="text" id="myInput">
<span id="addBtn">Add</span>
<link rel="stylesheet" href="index.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</div>
<ul id="myUL">
<li onclick="check()">Hit the gym</li>
<li class="checked">Pay bills</li>
<li onclick="check()">Meet George</li>
<li onclick="check()">Buy eggs</li>
<li onclick="check()">Read a book</li>
<li onclick="check()">Organize office</li>
</ul>
<script src="script.js">
</script>

getElementsByClassName() returns a node list (collection) of matching elements. classList is a property of a single element. In order to use it, you must call it on one element only.
Alternatives:
Use .querySelector(.[className]) to return the first element that
matches the selector.
Access one of the collection items by passing an index (li[0]).
Loop over the collection and call classList on each item as you
loop.
Also, don't use .getElementsByClassName() in the first place as it returns a "live node list" that causes performance issues.

How to create a responsive popup subscribe modal

I am trying to create a subscribe popup for the user to click on the subscribe button and to receive notification.
Does anyone know how to make this popup become responsive? Need this for my assignment. The button and the popup container are required to responsive. I have tried width:100% in #media but the width of the button will become too long. The notification part i have done.
How can I fix this? Please provide some solutions. Thank you
function subOpen() {
document.getElementById("sub").style.display = "block";
}
function subClose() {
document.getElementById("sub").style.display = "none";
}
.subscribe{
box-sizing: border-box;
}
.open-button {
background-color:cornflowerblue;
color: black;
font-weight: bold;
padding: 16px 15px;
border: none;
cursor: pointer;
opacity: 0.8;
width: 15%;
border-radius: 5px;
}
.sub-title{
margin-top: 30px;
margin-bottom: 20px;
font-weight: bold;
text-align: center;
}
.sub-p{
text-align: center;
font-size: 1;
}
/* The popup form - hidden by default */
.sub-popup {
display: none;
position: fixed;
bottom:100px;
left:500px;
border: none;
border-radius:5px;
z-index: 9;
}
#sub {
max-width: 300px;
padding: 10px;
background-color:beige;
}
/* Set a style for the subscribe button */
#sub .btn {
background-color: #04AA6D;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width:50%;
margin-bottom:10px;
margin-left: 70px;
opacity: 0.8;
}
#sub .cancel {
background-color: red;
}
#sub .btn:hover, .open-button:hover {
opacity: 1;
}
<div class= "subscribe">
<button class="open-button" onclick="subOpen()">SUBSCRIBE</button>
<div class="sub-popup" id="sub">
<h4 class="sub-title container">SUBSCRIBE US</h4>
<p class="sub-p">Click to receive notification to get our updates and special offers now!</p>
<button type="submit" class="btn subscribeBtn">Subscribe</button>
<button type="button" class="btn cancel" onclick="subClose()">Close</button>
</div>
</div>

Try this:
.subscribe {
box-sizing: border-box;
position: relative;
}
.sub-popup {
display: none;
position: absolute;
top: 50%;
left: 50%;
border: none;
border-radius: 5px;
z-index: 9;
transform: translate(-50%, 50%);
}

The answer to this question depends on what you mean by 'make it become responsive', and how you want it to respond.
In general, using units such as vw, vh, and % create sizes that are responsive to your window size.
Media queries can be used if you want styling to change at certain dimensions.
Place this at the end of your CSS, and your popup window will align to the left when your window is 600px or less.
#media (max-width: 600px){
.sub-popup{
left: 0px;
}

The left and bottom using px positioning on the popup form were messing up the responsiveness, first fix that came up to my mind was replacing them with margin 0 auto which basically centers it within it's parent container.
If you're using an absolute unit (px), you need to set media queries to match different screen sizes and change the values accordingly.
I'm not trying to say that using px for sizing is bad, it really depends on what are you trying to achieve so getting familiar with the different units really comes in handy.
There are actually quite a few solutions for this including flexbox, bootstrap, media queries, using relative units.
Hopefully these good reads can help you.
W3 CSS Units
What’s The Difference Between PX, EM, REM, %, VW, and VH?
function subOpen() {
document.getElementById("sub").style.display = "block";
}
function subClose() {
document.getElementById("sub").style.display = "none";
}
.subscribe{
box-sizing: border-box;
}
.open-button {
background-color:cornflowerblue;
color: black;
font-weight: bold;
padding: 16px 15px;
border: none;
cursor: pointer;
opacity: 0.8;
width: 15%;
border-radius: 5px;
}
.sub-title{
margin-top: 30px;
margin-bottom: 20px;
font-weight: bold;
text-align: center;
}
.sub-p{
text-align: center;
font-size: 1;
}
/* The popup form - hidden by default */
.sub-popup {
display: none;
position: fixed;
margin: 0 auto; // replaced left and bottom positioning with margin 0 auto
border: none;
border-radius:5px;
z-index: 9;
}
#sub {
max-width: 300px;
padding: 10px;
background-color:beige;
}
/* Set a style for the subscribe button */
#sub .btn {
background-color: #04AA6D;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width:50%;
margin-bottom:10px;
margin-left: 70px;
opacity: 0.8;
}
#sub .cancel {
background-color: red;
}
#sub .btn:hover, .open-button:hover {
opacity: 1;
}
<div class= "subscribe">
<button class="open-button" onclick="subOpen()">SUBSCRIBE</button>
<div class="sub-popup" id="sub">
<h4 class="sub-title container">SUBSCRIBE US</h4>
<p class="sub-p">Click to receive notification to get our updates and special offers now!</p>
<button type="submit" class="btn subscribeBtn">Subscribe</button>
<button type="button" class="btn cancel" onclick="subClose()">Close</button>
</div>
</div>

How to make a button that will uncheck all checkboxes and changes the background color of the divs?

I have following code: jiddle.com
There are two checkboxes with a picture and a label in a div. When the checkbox is selected the div changes the background color to orange.
Now i have added a button with which i can uncheck all checkboxes but the background color does not change back to white. Does anyone now where is my mistake?
function uncheckAll() {
$("input[type='checkbox']:checked").prop("checked", false)
}
$('#aufheben_button').on('click', uncheckAll)
$("input[type='checkbox']").change(function(){
if($(this).is(":checked", true)){
$(this).parent().addClass("changeBackground");
}
else{
$(this).parent().removeClass("changeBackground");
$('#aufheben_button').parent().removeClass("changeBackground");
}
});
li{
float: left;
width: 30%;
min-width: 160px;
height: 130px;
margin: 0 0 3px 0;
font-size: 10px;
line-height: 1.4;
text-align: center;
background-color: #f9f9f9;
border: 5px solid #fff;
position: relative;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
list-style: none;
display: block;
}
.app_name{
font-size: calc(10px + 0.4vw);
}
label{
display: block;
padding-right: 25px;
}
.picture{
position: relative;
display: block;
margin: 0 auto;
width: 100px;
height: 100px
}
/* Customize the label (the container) */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #f9f9f9;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #FD9B08;
}
/* Ändern des Hintergrunds bei der Groupbox */
.isChecked {
background-color: #FD9B08;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.changeBackground{
background-color: #FD9B08;
}
.div_groupbox{
background-color: #f9f9f9;
width: auto;
}
.div_groupbox:hover{
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><html>
<head>
</head>
<body>
<button type="button" class="aufheben" id="aufheben_button">unselect checkmarks</button>
<ul>
<li class="background_li">
<div class="div_groupbox">
<label class="container">
<img id="Firefox" src="Bilder/Test1.png" class="picture">
<div class="app_name">Test1</div><input type="checkbox" name="acs" value="Test1">
<span class="checkmark"></span>
</label>
</div>
</li>
<li>
<div class="div_groupbox">
<label class="container">
<img src="Bilder/Test2.png" class="picture">
<div class="app_name">Test2</div><input type="checkbox" name="acs" value="Test2">
<span class="checkmark"></span>
</label>
</div>
</li>
</ul>
</body>
</html>

You need to add this to the uncheckAll function:
$("input[type='checkbox']:checked").prop("checked", false);
$("input[type='checkbox']").parent().removeClass("changeBackground");
And add a onclick="uncheckAll()" to the button.

The change event handler will not be executed with this code:
$("input[type='checkbox']:checked").prop("checked", false);
If you want to execute whatever is in the change-event handler, then trigger the click event, which will toggle the checkbox and execute any event handlers that would result from that:
$("input[type='checkbox']:checked").trigger("click");

Masking labels for Checkboxes - The correct way?

I am aware that we can create customised checkboxes using <label for="#checkbox_id"> using the for attribute and referencing the input's id.
I need to know which would be the best way to hide the background checkbox tag i.e, <input type="checkbox" class="masked-input" id="checkbox_id"/>
I'm currently using .masked-input{display: none;} .No issues for me so far.
But I have seen in many webpages, they don't use the display:none property.
Instead they use
.checkbox{
height: 0;
width: 0;
border: 0;
overflow: hidden;
visibility: hidden;
}
Why wouldn't they just use display:none; and keep this simple? Or am I missing something or doing it the wrong way?

User Accessibility Issue:
Its a very straight forward question. You should use
.checkbox{
height: 0;
width: 0;
border: 0;
overflow: hidden;
visibility: hidden;
}
or
.checkbox{
opacity: 0;
}
because if you use display: none; it will be hard to access by the user. For instance if the user is trying to access the checkbox by pressing the tab key, the checkbox with the display none property will get skipped from the focus.
In our example below, the second checkbox property is set to display: none; and other two checkboxes are set with opacity: 0; you can see the focus by pressing tab key and how the second checkbox is getting skipped.
.styled-checkbox {
position: absolute;
opacity: 0;
}
#styled-checkbox-2{
display: none;
}
.styled-checkbox + label {
position: relative;
cursor: pointer;
padding: 0;
}
.styled-checkbox + label:before {
content: '';
margin-right: 10px;
display: inline-block;
vertical-align: text-top;
width: 20px;
height: 20px;
background: white;
}
.styled-checkbox:hover + label:before {
background: #f35429;
}
.styled-checkbox:focus + label:before {
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
.styled-checkbox:checked + label:before {
background: #f35429;
}
.styled-checkbox:disabled + label {
color: #b8b8b8;
cursor: auto;
}
.styled-checkbox:disabled + label:before {
box-shadow: none;
background: #ddd;
}
.styled-checkbox:checked + label:after {
content: '';
position: absolute;
left: 5px;
top: 9px;
background: white;
width: 2px;
height: 2px;
box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
html {
background: lightgray;
}
body {
font-family: 'Source Sans Pro', sans-serif;
}
.unstyled {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
margin: 20px 0;
}
.centered {
width: 300px;
margin: auto;
}
.title {
text-align: center;
color: #4571ec;
}
<h1 class="title">Pure CSS Custom Checkboxes</h1>
<ul class="unstyled centered">
<li>
<input class="styled-checkbox" id="styled-checkbox-1" type="checkbox" value="value1">
<label for="styled-checkbox-1">Checkbox</label>
</li>
<li>
<input class="styled-checkbox" id="styled-checkbox-2" type="checkbox" value="value2">
<label for="styled-checkbox-2">CSS Only</label>
</li>
<li>
<input class="styled-checkbox" id="styled-checkbox-3" type="checkbox" value="value4">
<label for="styled-checkbox-3">Fourth option</label>
</li>
</ul>

The code you use is often used when there is a custom styled checkbox. They hide the original checkbox and display a custom one instead. In order to still keep the functionality they only hide the checkbox.
If you use display: none the complete checkbox will be removed from the DOM, making it impossible to click.
As https://kyusuf.com/post/completely-css-custom-checkbox-radio-buttons-and-select-boxes states:
Note that we are hiding the input with z-index: -1; and opacity: 0; -
using display: none; or visibility: hidden; would stop the inputs
functioning correctly. Onto the .control__indicator - this is what we
will style to look like checkboxes/radio buttons.

HTML Dropdown Returns Blank

For some reason, my HTML dropdown menu is returning completely blank values. However, you can see the values when you hover your mouse over them. My code is at my GitHub here: https://github.com/kekTEHfrahg/bengalidabbois/blob/master/index.html
EDIT: Sorry, got the wrong link. I fixed it now.
Also, for the specific code with my dropdown:
<div translate="no" class="compact marquee" id="div_language">
<select id="select_language" onchange="updateCountry()">
<option value="0">Afrikaans</option><option value="1">Bahasa Indonesia</option><option value="2">Bahasa Melayu</option><option value="3">Català</option><option value="4">Čeština</option><option value="5">Dansk</option><option value="6">Deutsch</option><option value="7">English</option><option value="8">Español</option><option value="9">Euskara</option><option value="10">Filipino</option><option value="11">Français</option><option value="12">Galego</option><option value="13">Hrvatski</option><option value="14">IsiZulu</option><option value="15">Íslenska</option><option value="16">Italiano</option><option value="17">Lietuvių</option><option value="18">Magyar</option><option value="19">Nederlands</option><option value="20">Norsk bokmål</option><option value="21">Polski</option><option value="22">Português</option><option value="23">Română</option><option value="24">Slovenščina</option><option value="25">Slovenčina</option><option value="26">Suomi</option><option value="27">Svenska</option><option value="28">Tiếng Việt</option><option value="29">Türkçe</option><option value="30">Ελληνικά</option><option value="31">български</option><option value="32">Pусский</option><option value="33">Српски</option><option value="34">Українська</option><option value="35">한국어</option><option value="36">中文</option><option value="37">日本語</option><option value="38">हिन्दी</option><option value="39">ภาษาไทย</option></select> <select id="select_dialect" style="visibility: visible;">
<option value="en-AU">Australia</option><option value="en-CA">Canada</option><option value="en-IN">India</option><option value="en-NZ">New Zealand</option><option value="en-ZA">South Africa</option><option value="en-GB">United Kingdom</option><option value="en-US">United States</option></select>
</div>
</div>
Here is the CSS code. Honestly, I don't find anything wrong with it. Is there something wrong with the CSS that makes the dropdown blank?
<style>
.speech {border: 1px solid #DDD; width: 300px; padding: 0; margin: 0}
.speech input {border: 0; width: 240px; display: inline-block; height: 30px;}
.speech img {float: right; width: 40px }
l {
border: ipx solid black
}
/* Style the tabs */
ul.tab {
list-style-type: none;
border-radius:10px;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #ccc;
background-color: #f2f2f2;
}
/* Float the list items side by side */
ul.tab li {float: left;}
/* Style the links inside the list items */
ul.tab li a {
background-color:#d9d9d9;
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of links on hover */
ul.tab li a:hover {
background-color:#999999 ;
}
/* Create an active/current tablink class */
ul.tab li a:focus, .active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
border-radius:10px;
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
/* All content below pertains to the function of the tabs in an "accordian" style */
button.accordion {
border-radius:26px;
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
button.accordion:after {
content: '>>';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: "<<";
}
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
#info {
font-size: 20px;
}
#div_start {
float: right;
}
#headline {
text-decoration: none
}
#results {
font-size: 14px;
font-weight: bold;
border: 1px solid #ddd;
padding: 15px;
text-align: left;
min-height: 150px;
}
#start_button {
border: 0;
background-color:transparent;
padding: 0;
}
.interim {
color: gray;
}
.final {
color: black;
padding-right: 3px;
}
.button {
display: none;
}
.marquee {
margin: 20px auto;
}
#buttons {
margin: 10px 0;
position: relative;
top: -50px;
}
#copy {
margin-top: 20px;
}
#copy > div {
display: none;
margin: 0 70px;
}
body, h1,h2,h3,h4,h5,h6 {font-family: "Montserrat", sans-serif}
.w3-row-padding img {margin-bottom: 12px}
/* Set the width of the sidebar to 120px */
.w3-sidebar {width: 120px;background: #222;}
/* Add a left margin to the "page content" that matches the width of the sidebar (120px) */
#main {margin-left: 120px}
/* Remove margins from "page content" on small screens */
#media only screen and (max-width: 600px) {#main {margin-left: 0}}
</style>

It looks like the W3Schools style sheet sets the text color of every element to white (color: #fff!important;).
This can be easily remedied with changing the text color for select and option elements:
select, option {
color: black;
}
You can debug something like this by opening your browser's development tools, right-clicking the element and looking at the CSS used to render the element. In this particular case, your body tag uses the w3-green class, which has the following CSS by default:
.w3-green, .w3-hover-green:hover {
color: #fff!important;
background-color: #4CAF50!important;
}
In addition, the normalize style sheet (which has the highest specificity for the select elements) tells the browser to inherit the color from the parent (there's no other color declarations in each of select's parents until it reaches the body tag).
button, input, optgroup, select, textarea {
margin: 0;
font: inherit;
color: inherit;
}

You have a lot of CSS libraries and they are interfering with each other. Bootstrap.min.css is setting the color of your select to "inherit". Add this after bootstrap's style to fix that.
select {color:black;}
You can debug your code by using your browser's developer tools and see what style is being applied to your elements and from which library.