Multiple modals on one page only showing 1 modal

Multiple modals on one page only showing 1 modal - javascript

This may be a duplicate, but I can't figure this out.
I can't figure out why the same modal is showing for both buttons. I've tried making separate classes for each modal but that didn't work.
// emailmodal.js
var emailModal = document.getElementById("email-modal");
var emailBtn = document.getElementById("email");
var emailSpan = document.getElementsByClassName("email-close")[0];
emailBtn.onclick = function() {
emailModal.style.display = "block";
}
emailSpan.onclick = function() {
emailModal.style.display = "none";
}
window.onclick = function(event) {
if (event.taget == emailModal) {
emailModal.style.display = "none";
}
}
// phonemodal.js
var phoneModal = document.getElementById("phone-modal");
var phoneBtn = document.getElementById("phone");
var phoneSpan = document.getElementsByClassName("phone-close")[0];
phoneBtn.onclick = function() {
phoneModal.style.display = "block";
}
phoneSpan.onclick = function() {
phoneModal.style.display = "none";
}
window.onclick = function(event) {
if (event.taget == phoneModal) {
phoneModal.style.display = "none";
}
}
.fa {
padding: 80px;
font-size: 50px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 10px 10px;
border-radius: 10%;
color: white;
transition: 0.7s;
}
.fa-envelope-o {
background: #199cad;
}
.fa-phone {
background: #121e88;
}
.container {
text-align: center;
padding: 50px;
}
.middle-colour {
color: #00ffff;
}
.email-modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.phone-modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.socials-modal-content {
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 25%;
color: white;
font-size: 20px;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #888888;
text-decoration: none;
cursor: pointer;
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles/contact.css">
</head>
<body>
<div class="main">
<div class="container">
<div class="socials-3">
<a class="fa fa-envelope-o" id="email" href="#Email"></a>
<div id="email-modal" class="email-modal">
<div class="socials-modal-content">
<span class="close email-close">×</span>
<p>fun<span class="middle-colour">#</span>wbf<span class="middle-colour">.</span>com</p>
</div>
<script src="js/emailmodal.js"></script>
</div>
<a class="fa fa-phone" id="phone" href="#Phone"></a>
<div id="phone-modal" class="phone-modal">
<div class="socials-modal-content">
<span class="close phone-close">×</span>
<p>01234567890</p>
</div>
<script src="js/phonemodal.js"></script>
</div>
</div>
</div>
</div>
</body>
</html>
It's probably something simple but would be a big help if someone can find out the issue.
Edit:
Changed code to snippet.

Try giving your phone element variables their phone element equivalents. Right now they're all referring to email elements.
i.e. change this:
var phoneModal = document.getElementById("email-modal");
var phoneBtn = document.getElementById("email");
var phoneSpan = document.getElementsByClassName("email-close")[0];
to this:
var phoneModal = document.getElementById("phone-modal");
var phoneBtn = document.getElementById("phone");
var phoneSpan = document.getElementsByClassName("phone-close")[0];
Edit
You also have multiple typos: event.taget should be event.target, and you might want to use strict equality (===) instead of normal equality (==). Both equalities will work, however.
Here's a working example based on your code.

You can change the style of socials-modal-content in your CSS file.
For example, define two classes for email and phone like below code:
.socials-modal-content-email {
background-color: rgb(100, 800, 0);
background-color: rgba(0, 0, 0, 0.4);
margin: 15% auto;
padding: 20px;
border: 10px solid #888;
width: 25%;
color: green;
font-size: 30px;
}
.socials-modal-content-phone {
background-color: rgb(1, 0, 0);
background-color: rgba(1, 0, 0, 0.4);
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 25%;
color: white;
font-size: 20px;
}
Then in your HTML file spread both of them like:
<div class="socials-modal-content-email">
<div class="socials-modal-content-phone">
Overall, you can edit and combine your HTML and JS like:
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles/contact.css">
</head>
<body>
<div class="main">
<div class="container">
<div class="socials-3">
<a class="fa fa-envelope-o" onclick="show_email()" id="email" href="#Email"></a>
<div id="email-modal" class="email-modal">
<div class="socials-modal-content-email">
<span class="close email-close" onclick="close_eamil()">×</span>
<p>fun<span class="middle-colour">#</span>wbf<span class="middle-colour">.</span>com</p>
</div>
</div>
<a class="fa fa-phone" id="phone" onclick="show_phone()" href="#Phone"></a>
<div id="phone-modal" class="phone-modal">
<div class="socials-modal-content-phone">
<span class="close phone-close" onclick="close_phone()">×</span>
<p>01234567890</p>
</div>
</div>
</div>
</div>-
</div>
</body>
</html>
<script type="text/javascript" >
var emailModal = document.getElementById("email-modal");
var phoneModal = document.getElementById("phone-modal");
function show_email(){
emailModal.style.display = "block";
}
function close_eamil(){
emailModal.style.display = "none";
}
function show_phone(){
phoneModal.style.display = "block";
}
function close_phone(){
phoneModal.style.display = "none";
}
</script>

Related

Error return as the JS file is looking for top function in all HTML files

I'm going to keep this simple:
1 JS File
3 HTML Files (named: Cars, Trees, House)
1 CSS files.
All the functions are thrown into the JS file. But the problem is if I click on the submit 'button' in Cars the JS File will start with the (tree's) function at the top and will look for the addEventListener, if it can't find it it will come back with error 'Cannot read property 'addEventListener' of null' - problem is at:
tree_form.addEventListener('submit', e => {
I just want the Js file to execute the function that the HTML file is asking it to.
So in this case its the 'Car' functions that follow the tree functions.
If I separate everything and put it into individual projects or throw the JS in with the referenced HTML file it all works fine, problem occurs only when I put all functions in one JS file.
HTML Cars
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Car Form</title>
</head>
<body>
<div class="cars-body">
<div class="car_container">
<div class="car_heading_form">
<h2> Car Form</h2>
</div>
<form id="car_form" class="car_form">
<div class="car-form-control">
<label for="carName">Car Name</label>
<input type="text" placeholder="hank" id="carName" />
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="car-form-control">
<label for="carColor">Car Color</label>
<input type="text" placeholder="Gold" id="carColor" />
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<button>Submit</button>
</form>
</div>
</div>
</body>
<script src="script.js"></script>
</html>
JS
// Tree Form
const tree_form = document.getElementById('tree_form');
const treeName = document.getElementById('treeName');
const treeHeight = document.getElementById('treeHeight');
tree_form.addEventListener('submit', e => {
e.preventDefault();
tree_Inputs();
});
function tree_Inputs() {
//trim to remove the whitespaces
const treerNameValue = treeName.value.trim();
const treeHeightValue = treeHeight.value.trim();
if (treeNameValue === '') {
setErrorForTree(treeName, 'Please enter a name');
} else {
setSuccessForTree(treeName);
}
if (treeHeightValue === '') {
setErrorForTree(treeHeight, 'Please enter a number.');
} else {
setSuccessForTree(treeHeight);
}
}
function setErrorForTree(input, message) {
const formControlTree = input.parentElement;
const small = formControlTree.querySelector('small');
formControlTree.className = 'tree-form-control error';
small.innerText = message;
}
function setSuccessForTree(input) {
const formControlTree = input.parentElement;
formControlCar.className = 'tree-form-control success';
}
// Car Form
const car_form = document.getElementById('car_form');
const carName = document.getElementById('carName');
const carColor = document.getElementById('carColor');
car_form.addEventListener('submit', e => {
e.preventDefault();
car_Inputs();
});
function car_Inputs() {
//trim to remove the whitespaces
const carNameValue = carName.value.trim();
const carColorValue = carColor.value.trim();
if (carNameValue === '') {
setErrorForCar(carName, 'Please enter a name');
} else {
setSuccessForCar(carName);
}
if (carColorValue === '') {
setErrorForCar(carColor, 'Please a color.');
} else {
setSuccessForCar(carColor);
}
}
function setErrorForCar(input, message) {
const formControlCar = input.parentElement;
const small = formControlCar.querySelector('small');
formControlCar.className = 'car-form-control error';
small.innerText = message;
}
function setSuccessForCar(input) {
const formControlCar = input.parentElement;
formControlCar.className = 'car-form-control success';
}
CSS
/***** CONTACT US PAGE CSS *****/
* {
box-sizing: border-box;
}
.car-body, tree-body {
min-height: 1300px;
width: 100%;
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 0px;
}
.car_container, .tree_container {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgb(0 0 0 / 30%);
overflow: hidden;
width: 600px;
max-width: 100%;
}
.car_heading_form, .tree_heading_form {
border-bottom: 1px solid #f0f0f0;
background-color: #f7f7f7;
padding: 20px 40px;
}
.car_heading_form h2 {
margin: 0px;
color: Blue;
}
.tree_heading_form h2 {
margin: 0px;
color: green;
}
.car_form, .tree_form {
padding: 30px 40px;
}
.car-form-control, .tree-form-control {
margin-bottom: 10px;
padding-bottom: 20px;
position: relative;
}
.car-form-control label, .tree-form-control label {
display: inline-block;
margin-bottom: 5px;
font-weight: 530;
font-size: 17px;
}
.car-form-control input, .tree-form-control input {
border: 2px solid #f0f0f0;
border-radius: 4px;
display: block;
font-size: 14px;
padding: 10px;
width: 100%;
}
.car-form-control input:focus, .tree-form-control input:focus {
outline: 0;
border-color: #777;
}
.car-form-control.success input, .tree-form-control.success input {
border-color: green;
}
.car-form-control.error input, .tree-form-control.error input {
border-color: red;
}
.car-form-control i, .tree-form-control i {
visibility: hidden;
position: absolute;
top: 40px;
right: 10px;
}
.car-form-control.success i.fa-check-circle, .tree-form-control.success i.fa-check-circle {
color: green;
visibility: visible;
}
.car-form-control.error i.fa-exclamation-circle, .tree-form-control.error i.fa-exclamation-circle {
color: red;
visibility: visible;
}
.car-form-control small, .tree-form-control small {
color: red;
position: absolute;
bottom: 0;
left: 0;
visibility: hidden;
}
.car-form-control.error small, .tree-form-control.error small {
visibility: visible;
}
.car_form button {
background-color: rgb(31, 136, 229);
border: 2px solid rgb(128, 128, 128, 0.199);
border-radius: 4px;
color: #fff;
display: block;
font-size: 16px;
padding: 10px;
margin-top: 20px;
width: 50%;
cursor: pointer;
}
.car_form button:hover {
cursor: pointer;
box-shadow: 1px 1px 1px rgb(25, 60, 173);
}

There are two ways to solve this issue.
I would prefer to create a namespace in JS if there is lots of things I need to add in just a single JS.
var yourNamespace = {
Car: function() {
},
Tree: function() {
},
House: function() {
}
};
and in last call it yourNamespace.Car() when you click on submit.
This is a working scenario:
var yourNamespace = {};
yourNamespace = {
Tree: function() {
const tree_form = document.getElementById('tree_form');
const treeName = document.getElementById('treeName');
const treeHeight = document.getElementById('treeHeight');
tree_form.addEventListener('submit', e => {
e.preventDefault();
tree_Inputs();
});
function tree_Inputs() {
//trim to remove the whitespaces
const treerNameValue = treeName.value.trim();
const treeHeightValue = treeHeight.value.trim();
if (treeNameValue === '') {
setErrorForTree(treeName, 'Please enter a name');
} else {
setSuccessForTree(treeName);
}
if (treeHeightValue === '') {
setErrorForTree(treeHeight, 'Please enter a number.');
} else {
setSuccessForTree(treeHeight);
}
}
function setErrorForTree(input, message) {
const formControlTree = input.parentElement;
const small = formControlTree.querySelector('small');
formControlTree.className = 'tree-form-control error';
small.innerText = message;
}
function setSuccessForTree(input) {
const formControlTree = input.parentElement;
formControlCar.className = 'tree-form-control success';
}
},
Car: function() {
const car_form = document.getElementById('car_form');
const carName = document.getElementById('carName');
const carColor = document.getElementById('carColor');
car_form.addEventListener('submit', e => {
e.preventDefault();
car_Inputs();
});
function car_Inputs() {
//trim to remove the whitespaces
const carNameValue = carName.value.trim();
const carColorValue = carColor.value.trim();
if (carNameValue === '') {
setErrorForCar(carName, 'Please enter a name');
} else {
setSuccessForCar(carName);
}
if (carColorValue === '') {
setErrorForCar(carColor, 'Please a color.');
} else {
setSuccessForCar(carColor);
}
}
function setErrorForCar(input, message) {
const formControlCar = input.parentElement;
const small = formControlCar.querySelector('small');
formControlCar.className = 'car-form-control error';
small.innerText = message;
}
function setSuccessForCar(input) {
const formControlCar = input.parentElement;
formControlCar.className = 'car-form-control success';
}
},
House: function() {
}
};
* {
box-sizing: border-box;
}
.car-body, tree-body {
min-height: 1300px;
width: 100%;
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 0px;
}
.car_container, .tree_container {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgb(0 0 0 / 30%);
overflow: hidden;
width: 600px;
max-width: 100%;
}
.car_heading_form, .tree_heading_form {
border-bottom: 1px solid #f0f0f0;
background-color: #f7f7f7;
padding: 20px 40px;
}
.car_heading_form h2 {
margin: 0px;
color: Blue;
}
.tree_heading_form h2 {
margin: 0px;
color: green;
}
.car_form, .tree_form {
padding: 30px 40px;
}
.car-form-control, .tree-form-control {
margin-bottom: 10px;
padding-bottom: 20px;
position: relative;
}
.car-form-control label, .tree-form-control label {
display: inline-block;
margin-bottom: 5px;
font-weight: 530;
font-size: 17px;
}
.car-form-control input, .tree-form-control input {
border: 2px solid #f0f0f0;
border-radius: 4px;
display: block;
font-size: 14px;
padding: 10px;
width: 100%;
}
.car-form-control input:focus, .tree-form-control input:focus {
outline: 0;
border-color: #777;
}
.car-form-control.success input, .tree-form-control.success input {
border-color: green;
}
.car-form-control.error input, .tree-form-control.error input {
border-color: red;
}
.car-form-control i, .tree-form-control i {
visibility: hidden;
position: absolute;
top: 40px;
right: 10px;
}
.car-form-control.success i.fa-check-circle, .tree-form-control.success i.fa-check-circle {
color: green;
visibility: visible;
}
.car-form-control.error i.fa-exclamation-circle, .tree-form-control.error i.fa-exclamation-circle {
color: red;
visibility: visible;
}
.car-form-control small, .tree-form-control small {
color: red;
position: absolute;
bottom: 0;
left: 0;
visibility: hidden;
}
.car-form-control.error small, .tree-form-control.error small {
visibility: visible;
}
.car_form button {
background-color: rgb(31, 136, 229);
border: 2px solid rgb(128, 128, 128, 0.199);
border-radius: 4px;
color: #fff;
display: block;
font-size: 16px;
padding: 10px;
margin-top: 20px;
width: 50%;
cursor: pointer;
}
.car_form button:hover {
cursor: pointer;
box-shadow: 1px 1px 1px rgb(25, 60, 173);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="cars-body">
<div class="car_container">
<div class="car_heading_form">
<h2> Car Form</h2>
</div>
<form id="car_form" class="car_form">
<div class="car-form-control">
<label for="carName">Car Name</label>
<input type="text" placeholder="hank" id="carName" />
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="car-form-control">
<label for="carColor">Car Color</label>
<input type="text" placeholder="Gold" id="carColor" />
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<button onClick="yourNamespace.Car()">Submit</button>
</form>
</div>
</div>
check on id which form is currently visible (not preferable in your situation, better to use features that JS provide)

It seems you're expecting the JavaScript to magically know which form it's on and which code to run. Sorry. JavaScript is not magic.
Try something like
const tree_form = document.getElementById('tree_form');
const car_form = document.getElementById('car_form');
if (tree_form) {
// all the tree code
}
else if (car_form) {
// all the car code
}

If you hit the submit button a second time with no value in the other input field then the message has to be shown correct. This is the javascript for the car without your css.
// Car Form
const car_form = document.getElementById('car_form');
const carName = document.getElementById('carName');
const carColor = document.getElementById('carColor');
car_form.addEventListener('submit', e => {
e.preventDefault();
car_Inputs();
});
function car_Inputs() {
//trim to remove the whitespaces
const carNameValue = carName.value.trim();
const carColorValue = carColor.value.trim();
setErrorForCar(carName, 'Message');
if (carNameValue === '') {
setErrorForCar(carName, 'Please enter a name');
} else {
setSuccessForCar(carName);
}
setErrorForCar(carColor, 'Message');
if (carColorValue === '') {
setErrorForCar(carColor, 'Please enter a color.');
} else {
setSuccessForCar(carColor);
}
}
function setErrorForCar(input, message) {
const formControlCar = input.parentElement;
const small = formControlCar.querySelector('small');
formControlCar.className = 'car-form-control error';
small.innerText = message;
}
function setSuccessForCar(input) {
const formControlCar = input.parentElement;
formControlCar.className = 'car-form-control success';
}
<div class="cars-body">
<div class="car_container">
<div class="car_heading_form">
<h2> Car Form</h2>
</div>
<form id="car_form" class="car_form">
<div class="car-form-control">
<label for="carName">Car Name</label>
<input type="text" placeholder="hank" id="carName" />
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Message</small>
</div>
<div class="car-form-control">
<label for="carColor">Car Color</label>
<input type="text" placeholder="Gold" id="carColor" />
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Message</small>
</div>
<button>Submit</button>
</form>
</div>
</div>

Dynamically Create a Modal for a Note Taker App

I am working on a simple note taking app using vanilla javascript. I am trying to have the program add the note with a modal that when clicked would show the text. With what I have so far it is adding the note below the input box and along with the modal button. When I click the modal button it does nothing the first click. On the second click the text and modal button disappear.
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Note Tracker</title>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.success {
background-color: #ddffdd;
border-left: 6px solid #4CAF50;
}
</style>
</head>
<body>
<h1>Note Tracker Web App</h1>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<label for="iNote">Input Note:</label><br>
<br>
<textarea id="inote" name="inote" rows="4" cols="50">
</textarea>
<br>
<button type="button" id="btn" onclick="addNote()">Add Note</button>
<br><br>
<div id="noteList">
<span class="close">×</span>
</div>
<script src="scripts.js"></script>
</body>
Javascript is the below that creates the note and then add it along with the modal
function addNote(){
var item = document.getElementById("inote").value
var text = document.createTextNode(item)
var newItem = document.createElement("P")
newItem.appendChild(text)
document.getElementById("noteList").appendChild(newItem)
var x = document.createElement("BUTTON");
x.id = "someId";
//x.onclick ="modalOpen()";
x.onclick = function(){
var modal = document.getElementById("noteList");
var btn = document.getElementById("someId");
btn.onclick = function() {
modal.style.display = "none";
}
};
var t = document.createTextNode("Open Modal");
x.appendChild(t);
document.getElementById("noteList").appendChild(x);
var z = document.createElement("BR");
document.getElementById("noteList").appendChild(z);
var newElem = document.createElement("BR");
document.getElementById("noteList").appendChild(newElem);
}

on first time, you are just attach event listener of click, simply put x.onclick outside the function

Hopefully this one will help.
So we have the "note-list" to handle the list.
I create a modal element that can activate when we click on the "new note" button.
In here I play with opacity and z-index to show this modal. Can be better than this.
const newNote = document.getElementById('new-note'),
addNote = document.getElementById('add-note');
let myModal = document.getElementById('my-modal');
newNote.addEventListener('click', () => {
myModal.style.zIndex = 99;
myModal.style.opacity = 1;
});
addNote.addEventListener('click', () => {
let note = document.getElementById('note'),
noteList = document.getElementById('note-list');
if (note.value !== '') {
let _el = document.createElement('li');
_el.innerHTML = note.value;
let _a = document.createElement('a');
_a.innerHTML = 'delete';
_el.appendChild(_a);
noteList.appendChild(_el);
note.value = '';
myModal.style.zIndex = -1;
myModal.style.opacity = 0;
_a.addEventListener('click', (e) => {
e.target.parentNode.remove();
});
} else {
alert('note can not empty');
}
});
#my-modal {
width: 100%: height: 100%;
z-index: -1;
opacity: 0;
position: absolute;
background: rgba(0, 0, 0, 0.5);
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.modal-wrapper {
border-radius: .5rem;
background: #fff;
display: block;
padding: 1rem;
margin-top: 20%;
}
ul {
display: block;
}
#note-list li {
display: block;
margin-bottom: .5rem;
border: 1px solid #efefef;
background: #f7f7f7;
border-radius: .5rem;
position: relative;
padding: 1rem;
width: 70%;
}
#note-list li a{
position: absolute;
right: 0;
top: 0;
background: tomato;
padding: 1rem;
color: #fff;
}
.modal-wrapper * {
display: block;
margin: .5rem auto;
width: 90%;
text-align: center;
}
<h1>Note Taker App</h1>
<div class="note-wrapper">
<ul id="note-list">
</ul>
<button id="new-note">New Note</button>
</div>
<div id="my-modal">
<div class="modal-wrapper">
<label for="note">Your Note</label>
<input type="text" name="note" id="note">
<button id="add-note">add note</button>
</div>
</div>

Javascript file partially running

So I taught myself coding a few years ago, and got it just enough to put together a few tools for work. I recently had to migrate my site out of CodePen and onto an actual web server. Now I'm having an issue where part of my javascript is executing properly (a portion that empties all other input fields when a user enters an input field using JQuery), but the button that calculates an answer will not work. I believe the .click is not picking it up. Either way I'm not getting error messages, the button just does nothing when I press it.
When I put the code in a snippet to share with you guys, it works (just like it did in CodePen), but the exact same code on my web host does not work. I'm really at a loss here and any help would be greatly appreciated. I feel like I'm missing some small line of code that's supposed to be included in all web files.
$(document).ready(function() {
//Clear out input fields when not selected
$("#sg").focusin(function() {
$("#density").val("");
});
$("#density").focusin(function() {
$("#sg").val("");
});
$("#pounds").focusin(function() {
$("#grams").val("");
$("#percentage").val("");
});
$("#grams").focusin(function() {
$("#percentage").val("");
$("#pounds").val("");
});
$("#percentage").focusin(function() {
$("#pounds").val("");
$("#grams").val("");
});
$(".input_field").focusin(function() {
$("#density").removeClass('highlight');
$("#sg").removeClass('highlight');
$("#pounds").removeClass('highlight');
$("#grams").removeClass('highlight');
$("#percentage").removeClass('highlight');
});
//Calculate on press of enter
$("#button").keypress(function(e) {
if (e.which == 13) {
alert("this is working");
}
});
$("#button").click(function() {
calculateButton();
});
//Calculate values on button hit
function calculateButton() {
function numberWithCommas(x) {
x = x.toString();
var pattern = /(-?\d+)(\d{3})/;
while (pattern.test(x))
x = x.replace(pattern, "$1,$2");
return x;
}
function removeCommas(x) {
x = x.replace(",", "");
return x;
}
var results = 0;
//Pulling information from input cells
var densityStr = document.getElementById("density").value;
var sgStr = document.getElementById("sg").value;
var poundsStr = document.getElementById("pounds").value;
var gramsStr = document.getElementById("grams").value;
var percentageStr = document.getElementById("percentage").value;
//remove commas from string and then convert string to number
var densityNum = Number(removeCommas(densityStr));
var sgNum = Number(removeCommas(sgStr));
var poundsNum = Number(removeCommas(poundsStr));
var gramsNum = Number(removeCommas(gramsStr));
var percentageNum = Number(removeCommas(percentageStr));
if (densityStr.length !== 0) {
var sgConversion = densityNum / 8.3454;
$("#sg").val(sgConversion.toFixed(3));
$("#density").addClass('highlight');
} else if (sgStr.length !== 0) {
var densityConversion = sgNum * 8.3454;
$("#density").val(densityConversion.toFixed(3));
$("#sg").addClass('highlight');
}
if (poundsStr.length !== 0) {
$("#pounds").addClass("highlight");
densityNum = document.getElementById("density").value;
var gramsConversion = poundsNum * 119.83;
var percentageConversion = poundsNum / densityNum * 100;
$("#grams").val(gramsConversion.toFixed(0));
$("#percentage").val(percentageConversion.toFixed(2));
} else if (gramsStr.length !== 0) {
$("#grams").addClass("highlight");
densityNum = document.getElementById("density").value;
var poundsConversion = gramsNum / 119.83;
var percentageConversion = poundsConversion / densityNum * 100;
$("#pounds").val(poundsConversion.toFixed(2));
$("#percentage").val(percentageConversion.toFixed(2));
} else if (percentageStr.length !== 0) {
$("#percentage").addClass("highlight");
densityNum = document.getElementById("density").value;
var percentageDec = percentageNum / 100;
var poundsConversion = densityNum * percentageDec;
var gramsConversion = poundsConversion * 119.83;
$("#pounds").val(poundsConversion.toFixed(2));
$("#grams").val(gramsConversion.toFixed(2));
}
}
});
body {
margin: 0;
font-family: 'Lato', sans-serif;
background: #d2d2d2;
}
p {
text-align: center;
}
conatiner {
max-width: 1024px;
margin: 0 auto;
}
#navbarContainer {
background: #F44336;
overflow: hidden;
width: 100%;
margin: 0;
}
.navbar {
float: left;
display: block;
font-family: 'Lato', sans-serif;
height: 40px;
width: 200px;
line-height: 40px;
text-align: center;
background: #F44336;
text-decoration: none;
color: #212121;
}
.navbar:hover {
background: #E57373;
color: white;
}
.active {
background: #C62828;
color: white;
}
#formContainer {
width: 450px;
background: #FDFFFC;
margin: 50px auto;
padding: 0px;
border-radius: 8px;
overflow: hidden;
}
#formContainer header {
width: 100%;
height: 130px;
background-color: #3cba54;
overflow: auto;
color: white;
}
header h1 {
margin: 35px 0 0 0;
text-align: center;
line-height: 30px;
}
header h3 {
line-height: 40px;
text-align: center;
margin: 0;
}
#heading {
background-color: #3cba54;
height: 40px;
color: white;
margin-bottom: 25px;
margin-left: -30px;
}
#heading h3 {
line-height: 40px;
}
form {
padding: 20px 0 0 20px;
text-align: center;
}
label {
display: inline-block;
width: 220px;
text-align: right;
}
#myForm .input_field {
margin-left: 20px;
margin-bottom: 10px;
font-size: 20px;
padding-left: 10px;
width: 125px;
height: 35px;
font-size: 17px;
border-radius: 3px;
background-color: #E0E0E0;
border: none;
}
#button {
display: block;
border-radius: 6px;
width: 200px;
height: 50px;
padding: 8px 15px 8px 15px;
margin: 0 auto;
margin-bottom: 50px;
font-size: 16px;
box-shadow: 0 6px #540000;
background-color: #FF3636;
border: none;
outline: none;
}
#button:active {
background-color: #B81B1B;
box-shadow: 0 1px #27496d;
transform: translateY(5px);
}
.highlight {
background: #FFEB3B !important;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="container">
<div id="navbarContainer">
<a class="navbar" id="62" href="https://s.codepen.io/awheat/debug/MpMrEo/yYAyLDjQWgKr">326 IAC 6-2 Tool</a>
<a class="navbar" id="63" href="https://s.codepen.io/awheat/debug/gWmazm/NQkzYnjeQZyA">326 IAC 6-3 Tool</a>
<a class="navbar active" id="voc" href="https://s.codepen.io/awheat/debug/qVpPNm/VGAWNnJYBjZr">VOC Conversion Tool</a>
</div>
<div id="formContainer">
<header>
<h1>VOC Conversion Tool</h1>
<h3>(for conversion of VOC data to other units)</h3>
</header>
<form id="myForm">
<label>Density of Coating (lbs/gal): </label><input type="text" id="density" class="input_field">
<label>Specific Graviy: </label><input type="text" id="sg" class="input_field">
<div id="heading">
<h3>VOC Content</h3>
</div>
<label>Pounds per Gallon (lbs/gal): </label><input type="text" id="pounds" class="input_field">
<label>Grams per Liter (g/L): </label><input type="text" id="grams" class="input_field">
<label>Percentage (%): </label><input type="text" id="percentage" class="input_field"><br><br>
<input type="button" id="button" value="Calculate" autofocus>
</form>
</div>
</div>
</body>
</html>

Sometimes putting script tags before the elements on the page can cause issues. You can try to put the scripts at the bottom of the body like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="navbarContainer">
<a class="navbar" id="62" href="https://s.codepen.io/awheat/debug/MpMrEo/yYAyLDjQWgKr">326 IAC 6-2 Tool</a>
<a class="navbar" id="63" href="https://s.codepen.io/awheat/debug/gWmazm/NQkzYnjeQZyA">326 IAC 6-3 Tool</a>
<a class="navbar active" id="voc" href="https://s.codepen.io/awheat/debug/qVpPNm/VGAWNnJYBjZr">VOC Conversion Tool</a>
</div>
<div id="formContainer">
<header>
<h1>VOC Conversion Tool</h1>
<h3>(for conversion of VOC data to other units)</h3>
</header>
<form id="myForm">
<label>Density of Coating (lbs/gal): </label><input type="text" id="density" class="input_field">
<label>Specific Graviy: </label><input type="text" id="sg" class="input_field">
<div id="heading">
<h3>VOC Content</h3>
</div>
<label>Pounds per Gallon (lbs/gal): </label><input type="text" id="pounds" class="input_field">
<label>Grams per Liter (g/L): </label><input type="text" id="grams" class="input_field">
<label>Percentage (%): </label><input type="text" id="percentage" class="input_field"><br><br>
<input type="button" id="button" value="Calculate" autofocus>
</form>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

Can not get power button to work with display to display time as innerHTML?

I'm currently building a digital clock wow super easy yes i know. I guess what i want to be able to do is to click the powerButton to turn on the clock and then display the time inside the clockdisplay as innerHTML. I would like to use the variables from the setting time function and display them when the if statement executes. Can i get some help with this problem.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<title>Document</title>
<style>
/*Google Fonts */
#import url('https://fonts.googleapis.com/css?family=Righteous&display=swap');
/*The Body the clock */
#container {
background-color: lime;
/* border: 1px solid black; */
border-radius: 15px;
height: 300px;
position: relative;
left: 400px;
top: 50px;
width: 800px;
}
/**/
#clock-display {
background-color: white;
border: 1px solid rgb(97, 97, 97);
border-radius: 15px;
font-family: 'Righteous', cursive;
font-size: 2em;
height: 100px;
line-height:100px;
position: absolute;
top: 30px;
left: 30px;
width: 400px;
text-align: center;
}
#clock-display:hover {
box-shadow: 0 1px 6px 0#00E4FF, 0 4px 8px 0 #C3FAFF;
}
#powerButton {
background-color: #E7E7E7;
border: 2px solid #F7F7F7;
border-radius: 50%;
color: white;
position: absolute;
height: 100px;
line-height: 102px;
top: 30px;
left: 490px;
width: 100px;
text-align: center;
}
#powerButton:active {
border: 2px solid #B8FDFF;
}
#power-icon {
color: #FF0000;
font-size: 2.7em;
}
#power-icon:hover {
text-shadow: 2px 5px 5px#FF9898;
}
#alarm {
color: white;
border: 1px solid white;
height: 40px;
width: 100px;
position: absolute;
top: 200px;
left: 50px;
}
#text-box {
border: 2px solid gray;
height: 35px;
position: absolute;
top: 200px;
left:175px;
text-align: center;
}
</style>
</head>
<body>
<!-- Basically a container that stores all the data -->
<div id="container">
<!-- The clock display where the time is to be displayed on. -->
<div id="clock-display"></div>
<!-- ------------------------------------------------------------------ -->
<!-- The HTML for the power button -->
<div id="powerButton">
<!-- the span that allows us to use css with the icon -->
<span id="power-icon">
<!-- the icon import from front-awesome ver 4.7.0 -->
<i class="fa fa-power-off" aria-hidden="true"></i>
</span>
</div>
<!-- ------------------------------------------------------------------ -->
<!--Alarm container contains a label and input text box to retrieve your alarm time with audio.-->
<div id="alarm-container">
<label name="text-box">Alarm</label>
<input type="text" id="text-box" name="text-box" placeholder="Enter Time Here"/>
</div>
</div>
<!-- -->
<script type="text/javascript" language="javascript">
// global variables
var clockDisplay = document.getElementById("clock-display");
var powerButton = document.getElementById("power-icon");
var buttonON = document.getElementById("powerButton");
console.log(clockDisplay); //exsists in the console in developer tools.
function settingTime() {
var x = setInterval(function () {
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
});
//return hours,minutes,seconds;
}
//button toggle algorithm i came up with that allows you to toggle the button with out built in function or jquery/vanilla api's
function on_Off_Switch() {
let numOfClick = 0;
buttonON.addEventListener('click', function(e) {
console.log(e);
numOfClick += 1;
console.log(numOfClick);
const randArr = ["#00F0FF","red"];
if(numOfClick % 2 === 0) {
powerButton.style.color = randArr[0];//red
powerButton.style.textShadow = "1px 3px 3px #74F7FF, 2px 5px 5px white";
} else {
powerButton.style.color = randArr[1];//bluetooth bluetooth blue
powerButton.style.textShadow = "1px 3px 3px #FF9898, 2px 5px 5px white";
clockDisplay.innerHTML = ""; //where we turn off the audio to the radio if you decide to code it.
}
});
}
function powerButtonToggle () {
let toggle_int = 0;
let z = setInterval(function() {
toggle_int += 1;
console.log(toggle_int);
if(toggle_int % 2 === 0) {
$(powerButton).fadeOut(400, function() {
});
}
else if(toggle_int % 2 === 1) {
$(powerButton).fadeIn(400,function() {
console.log("this function is logging data");
});
}
},1000);
}
//main function
settingTime();
on_Off_Switch();
powerButtonToggle();
</script>
</body>
</html>

You can use .innerHTML to rewrite the content inside of a certain tag.
For example,
document.getElementById("clock-display").innerHTML = date + "; " + hours + ":" + minutes + ":" + seconds;
will set the clock-display element to the date and time. An example is below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<title>Document</title>
<style>
/*Google Fonts */
#import url('https://fonts.googleapis.com/css?family=Righteous&display=swap');
/*The Body the clock */
#container {
background-color: lime;
/* border: 1px solid black; */
border-radius: 15px;
height: 300px;
position: relative;
left: 400px;
top: 50px;
width: 800px;
}
/**/
#clock-display {
background-color: white;
border: 1px solid rgb(97, 97, 97);
border-radius: 15px;
font-family: 'Righteous', cursive;
font-size: 2em;
height: 100px;
line-height: 100px;
position: absolute;
top: 30px;
left: 30px;
width: 400px;
text-align: center;
}
#clock-display:hover {
box-shadow: 0 1px 6px 0#00E4FF, 0 4px 8px 0 #C3FAFF;
}
#powerButton {
background-color: #E7E7E7;
border: 2px solid #F7F7F7;
border-radius: 50%;
color: white;
position: absolute;
height: 100px;
line-height: 102px;
top: 30px;
left: 490px;
width: 100px;
text-align: center;
}
#powerButton:active {
border: 2px solid #B8FDFF;
}
#power-icon {
color: #FF0000;
font-size: 2.7em;
}
#power-icon:hover {
text-shadow: 2px 5px 5px#FF9898;
}
#alarm {
color: white;
border: 1px solid white;
height: 40px;
width: 100px;
position: absolute;
top: 200px;
left: 50px;
}
#text-box {
border: 2px solid gray;
height: 35px;
position: absolute;
top: 200px;
left: 175px;
text-align: center;
}
</style>
</head>
<body>
<!-- Basically a container that stores all the data -->
<div id="container">
<!-- The clock display where the time is to be displayed on. -->
<div id="clock-display"></div>
<!-- ------------------------------------------------------------------ -->
<!-- The HTML for the power button -->
<div id="powerButton">
<!-- the span that allows us to use css with the icon -->
<span id="power-icon">
<!-- the icon import from front-awesome ver 4.7.0 -->
<i class="fa fa-power-off" aria-hidden="true"></i>
</span>
</div>
<!-- ------------------------------------------------------------------ -->
<!--Alarm container contains a label and input text box to retrieve your alarm time with audio.-->
<div id="alarm-container">
<label name="text-box">Alarm</label>
<input type="text" id="text-box" name="text-box" placeholder="Enter Time Here" />
</div>
</div>
<!-- -->
<script type="text/javascript" language="javascript">
// global variables
var clockDisplay = document.getElementById("clock-display");
var powerButton = document.getElementById("power-icon");
var buttonON = document.getElementById("powerButton");
function settingTime() {
var x = setInterval(function () {
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
document.getElementById("clock-display").innerHTML = date + "; " + hours + ":" + minutes + ":" + seconds;
});
}
//button toggle algorithm i came up with that allows you to toggle the button with out built in function or jquery/vanilla api's
function on_Off_Switch() {
let numOfClick = 0;
buttonON.addEventListener('click', function (e) {
numOfClick += 1;
const randArr = ["#00F0FF", "red"];
if (numOfClick % 2 === 0) {
powerButton.style.color = randArr[0];//red
powerButton.style.textShadow = "1px 3px 3px #74F7FF, 2px 5px 5px white";
} else {
powerButton.style.color = randArr[1];//bluetooth bluetooth blue
powerButton.style.textShadow = "1px 3px 3px #FF9898, 2px 5px 5px white";
clockDisplay.innerHTML = ""; //where we turn off the audio to the radio if you decide to code it.
}
});
}
function powerButtonToggle() {
let toggle_int = 0;
let z = setInterval(function () {
toggle_int += 1;
if (toggle_int % 2 === 0) {
$(powerButton).fadeOut(400, function () {
});
}
else if (toggle_int % 2 === 1) {
$(powerButton).fadeIn(400, function () {
});
}
}, 1000);
}
//main function
settingTime();
on_Off_Switch();
powerButtonToggle();
</script>
</body>
</html>

How can I make my skills graph use a grade letter, rather than a percentage?

I've looked everywhere for this specific need but cannot find any good sources. I have a 'skills' graph that shows how well I can accomplish things. My issue is that I don't want it to display a percentage, but a letter grade (A+, A, B, C)
Here is the link
Here is the code
<script type="text/javascript">
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
function grow() {
var element = '.bar';
var i = 1;
$(element).each(function(index, value) {
var percent = $(this).attr('data-percent');
var timing = percent / 100;
setTimeout(function() {
$(value).css('max-width', +percent + '%').css('transition', timing + 's ease all');
$(value).append('<div class="num">' + percent + '%</div>');
}, i * 50);
i++;
});
}
$(window).load(function() {
requestAnimationFrame(grow);
});
</script>
.bar {
background: white;
border-top: 1px solid #b4996d;
width: 100%;
max-width: 0;
height: 25px;
margin: 0 0 10px 0;
border-top-style: dotted;
}
.num {
line-height: 22px;
color: #b4996d;
font-size: 12px;
text-align: right;
font-family: 'open_sansbold';
}
.label-graph {
line-height: 22px;
position: absolute;
color: #333;
font-size: 12px;
font-family: 'open_sansbold';
}
.holder {
margin: 0 auto;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="holder">
<div class="bar" data-percent="95">
<span class="label-graph">Web Design</span>
</div>
<div class="bar" data-percent="95">
<span class="label-graph">Graphic Design</span>
</div>
<div class="bar" data-percent="95">
<span class="label-graph">Photoshop</span>
</div>
<div class="bar" data-percent="80">
<span class="label-graph">HTML5</span>
</div>
<div class="bar" data-percent="90">
<span class="label-graph">Illustration</span>
</div>
<div class="bar" data-percent="85">
<span class="label-graph">Print</span>
</div>
</div>

Here is a simple example with what #lux suggests in the comment. You add conditions on what you get with the data-percent attribute and it's on :)
See it here
$(function(){
$('.bar').each(function(i,v){
data = $(this).data('percent');
// just an example, you can set whatever you wants as value and conditions
if(data > 80){
$(this).addClass('grade-Aplus');
}
else if(data <= 80 && data > 60){
$(this).addClass('grade-A');
}else{
$(this).addClass('grade-B');
}
});
});
CSS
.bar:before {content:""; width: 0; height: 30px; background: blue; position: absolute; left: 0; top: 0; transition: all 0.5s; }
.bar { position: relative; margin: 15px 0; padding: 7px 0 0 110px}
.bar.grade-Aplus:before { width: 100px; content: "A+"; color: #fff;}
.bar.grade-A:before { width: 80px; content: "A"; color: #fff}
.bar.grade-B:before { width: 30px; content: "B"; color: #fff}
/* and so on ... :) */

We Keep Coding

JavaScript is the programming language of the Web.

Multiple modals on one page only showing 1 modal - javascript

Related

Error return as the JS file is looking for top function in all HTML files

Dynamically Create a Modal for a Note Taker App

Javascript file partially running

Can not get power button to work with display to display time as innerHTML?

How can I make my skills graph use a grade letter, rather than a percentage?

Categories

Resources