Time does not display when you start the timer

Time does not display when you start the timer - javascript

My timer does not show when I input a certain time, and I have checked several times what the issue could be but have no errors. I am not sure if it is related to the javascript code.
Everything else works perfectly fine, e.g. the buttons for submit, continue and stop.
This is the HTML code:
<!DOCTYPE html>
<html>
<head>
<title>CountDown</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1>CountDown</h1>
</header>
<div class="content">
<div class="counter"></div>
<input type="number" id="seconds" placeholder="Seconds">
<div class="buttons">
<button class="btn start" id="start" value="1" onclick="check(this)">Start</button>
<button class="btn start" id="continue" value="1" onclick="check(this)">Continue</button>
<button class="btn stop" id="stop" value="0" onclick="check(this)">Stop</button>
<button class="btn start" id="ok" onclick="toSubmit()">Submit</button>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
This is the javascript code:
const container = document.querySelector('.counter');
const buttonsDiv = document.querySelector('.buttons');
const secInput = document.getElementById('.seconds');
var seconds;
var remseconds;
var minuts;
var toCount = false;
function toSubmit(){
display('start');
remove('seconds');
remove('ok');
seconds = Number(secInput.value);
counting();
}
function display(e){
document.getElementById(e).style.display = 'block';
}
function remove(e){
document.getElementById(e).style.display = 'none';
}
function check(stat){
toCount = this.value;
if(stat.id == "start"){
display("stop");
remove("start");
}
else if(stat.id == "stop"){
display("continue");
remove("stop");
}
else{
display("stop");
remove("continue");
}
}
function count(){
if(seconds > 0){
if(toCount == true){
seconds--;
remseconds = seconds % 60;
minuts = Math.floor(seconds / 60);
if(minuts < 10){
minuts = "0" + minuts;
}
if(remseconds < 10){
remseconds = "0" + remseconds;
}
container.innerHTML = minuts + " : " + remseconds;
}
}
else{
container.innerHTML = "DONE!";
buttonsDiv.style.opacity = "0";
}
}
function counting(){
remseconds = seconds % 60;
minuts = Math.floor(seconds / 60);
if(remseconds < 10){
remseconds = "0" + remseconds;
}
container.innerHTML = minuts + " : " + remseconds;
setInterval(count, 1000);
}
This is the CSS code:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html, body{
height: 100%;
}
body{
width: 100%;
height: 100%;
background: linear-gradient(to left top, #0045D6, #00A9f6);
}
header{
width: 100%;
height: 13vh;
background-color: #fff;
color: #0045F6;
display: flex;
justify-content: center;
align-items: center;
}
.content{
width: 100%;
height: 60vh;
font-size: 3rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.content #seconds{
width: 250px;
font-size: 2rem;
padding: 1rem;
outline: none;
background: none;
border: none;
border-bottom: 3px solid #fff;
color: #fff;
}
#seconds::placeholder{
color: #ddd;
font-size: 1.7rem;
}
.btn{
background-color: #fff;
border-radius: 4px;
border: none;
outline: none;
cursor: pointer;
padding: 0.8rem 1.7rem;
font-size: 1.2rem;
font-weight: 700;
}
.start{
color: #1f0;
}
.stop{
color: #E00;
}
#start, #stop, #continue{
display: none;
}
.counter{
color: #fff;
}

Your selector is wrong: const secInput = document.getElementById('.seconds'); use . for classes. change this line as following: const secInput = document.getElementById('seconds');
After Edit:
Ok. take a look at following snippet:
usage of toCount variable was incorrect.
const container = document.querySelector('.counter');
const buttonsDiv = document.querySelector('.buttons');
const secInput = document.getElementById('seconds');
var seconds;
var remseconds;
var minuts;
var toCount = false;
function toSubmit(){
display('start');
remove('seconds');
remove('ok');
seconds = Number(secInput.value);
counting();
}
function display(e){
document.getElementById(e).style.display = 'block';
}
function remove(e){
document.getElementById(e).style.display = 'none';
}
function check(stat){
if(stat.id == "start"){
display("stop");
remove("start");
toCount = true;
}
else if(stat.id == "stop"){
display("continue");
remove("stop");
toCount = false;
}
else{
display("stop");
remove("continue");
toCount =true;
}
}
function count(){
if(seconds > 0){
if(toCount == true){
seconds--;
remseconds = seconds % 60;
minuts = Math.floor(seconds / 60);
if(minuts < 10){
minuts = "0" + minuts;
}
if(remseconds < 10){
remseconds = "0" + remseconds;
}
container.innerHTML = minuts + " : " + remseconds;
}
}
else{
container.innerHTML = "DONE!";
buttonsDiv.style.opacity = "0";
}
}
function counting(){
remseconds = seconds % 60;
minuts = Math.floor(seconds / 60);
if(remseconds < 10){
remseconds = "0" + remseconds;
}
container.innerHTML = minuts + " : " + remseconds;
setInterval(count, 1000);
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html, body{
height: 100%;
}
body{
width: 100%;
height: 100%;
background: linear-gradient(to left top, #0045D6, #00A9f6);
}
header{
width: 100%;
height: 13vh;
background-color: #fff;
color: #0045F6;
display: flex;
justify-content: center;
align-items: center;
}
.content{
width: 100%;
height: 60vh;
font-size: 3rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.content #seconds{
width: 250px;
font-size: 2rem;
padding: 1rem;
outline: none;
background: none;
border: none;
border-bottom: 3px solid #fff;
color: #fff;
}
#seconds::placeholder{
color: #ddd;
font-size: 1.7rem;
}
.btn{
background-color: #fff;
border-radius: 4px;
border: none;
outline: none;
cursor: pointer;
padding: 0.8rem 1.7rem;
font-size: 1.2rem;
font-weight: 700;
}
.start{
color: #1f0;
}
.stop{
color: #E00;
}
#start, #stop, #continue{
display: none;
}
.counter{
color: #fff;
}
<head>
<title>CountDown</title>
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1>CountDown</h1>
</header>
<div class="content">
<div class="counter"></div>
<input type="number" id="seconds" placeholder="Seconds">
<div class="buttons">
<button class="btn start" id="start" value="1" onclick="check(this)">Start</button>
<button class="btn start" id="continue" value="1" onclick="check(this)">Continue</button>
<button class="btn stop" id="stop" value="0" onclick="check(this)">Stop</button>
<button class="btn start" id="ok" onclick="toSubmit()">Submit</button>
</div>
</div>
</body>

Here is a fix which should make your code work
function check(stat){
seconds = Number(document.getElementById('seconds').value);
if(stat.id == "start"){
display("stop");
remove("start");
}
else if(stat.id == "stop"){
display("continue");
remove("stop");
}
else{
display("stop");
remove("continue");
}
counting();
}
you should be reading value inside check
Also when you are using getElementById do not use (.seconds)
It would be document.getElementById('seconds')
Call counting inside the check function to start counting
In counting function make the toCount flag = true
Make the toCount flag = false when 'DONE'

You only need to update a few things:
function check(stat){
toCount = stat.value;
// not this.value
const secInput = document.getElementById('seconds');
// not const secInput = document.getElementById('.seconds');
This is enough to make it work.
Tip: if you are not sure what the value of a variable is during execution, you can try a console.log. In Firefox, Chrome you can go to developer tools - inspector, tab console to view the result.
This is wat I did:
function check(stat){
toCount = this.value;
console.log(toCount);
This showed me that toCount was undefined, not the value I expected and made me clear that "this" is not valid here, it's about the passed object "stat".

Related

trying to make a wordle game, but the letters are going up to down, instead of right to left, i don't know how to tackle it

I am making a 4x4 wordle game, and I used js to make the squares and input letters. When I input letters they go top to bottom instead of left to right and I'm not really sure how to fix it. I don't know how to modify the key events to go from the first column to the second, this is the code that deals with it, but I don't know why it isn't working, i feel like the code that is affecting it is this, but im not sure
if (col < gameWidth) {
let currsquare = document.getElementById(row.toString() + '-' + col.toString());
currsquare.innerText = e.code[3];
col++;
}
var gameHeight = 4; //number of guesses
var gameWidth = 4; //length of the word
var row = 0; //current guess (attempt #)
var col = 0; //current letter for that attempt
var gameOver = false;
var word = "RAAA";
window.onload = function() {
initialize();
};
function initialize() {
const darkModeToggle = document.getElementById("dark-mode-toggle");
darkModeToggle.addEventListener("click", () => {
document.body.classList.toggle("dark");
});
const instructionsToggle = document.getElementById("info");
const instructionsContainer = document.getElementById("instructions-container");
// Hide the instructions by default
instructionsContainer.style.display = "none";
// Show or hide the instructions when the button is clicked
instructionsToggle.addEventListener("click", () => {
if (instructionsContainer.style.display === "none") {
instructionsContainer.style.display = "block";
} else {
instructionsContainer.style.display = "none";
}
});
// Create the game board
for (let i = 0; i < gameHeight; i++) {
let row = document.createElement("div");
row.classList.add("row");
for (let j = 0; j < gameWidth; j++) {
let square = document.createElement("span");
square.id = i.toString() + "-" + j.toString();
square.classList.add("square");
square.innerText = "";
row.appendChild(square);
}
document.getElementById("board").appendChild(row);
}
// Listen for Key Press
document.addEventListener("keyup", (e) => {
if (gameOver) return;
if ("KeyA" <= e.code && e.code <= "KeyZ") {
if (col < gameWidth) {
let currsquare = document.getElementById(row.toString() + '-' + col.toString());
currsquare.innerText = e.code[3];
col++;
}
} else if (e.code == "Backspace") {
if (col > 0) {
col--;
let currsquare = document.getElementById(row.toString() + '-' + col.toString());
currsquare.innerText = "";
}
} else if (e.code == "Enter") {
update();
row += 1; // start new row
col = 0; // reset current index to 0 for new row
}
if (!gameOver && row == gameHeight) {
gameOver = true;
document.getElementById("answer").innerText = word;
}
});
}
function update() {
let correct = 0;
for (let column = 0; column < gameWidth; column++) {
let currsquare = document.getElementById(row.toString() + '-' + column.toString());
let letter = currsquare.innerText;
// Is it in the correct position?
if (word[row*gameWidth + (column % gameWidth)] == letter) {
currsquare.classList.add("correct");
correct += 1;
} // Is it in the word?
else if (word.includes(letter)) {
currsquare.classList.add("present");
} // Not in the word
else {
currsquare.classList.add("absent");
}
}
if (correct == gameWidth) {
gameOver = true;
document.getElementById("congrats").style.display = "block";
}
if (!gameOver && row == gameHeight - 1) {
gameOver = true;
document.getElementById("answer").innerText = word;
}
}
this is the updated html
<html>
<head>
<title>Wordle</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.3/css/all.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<link rel="stylesheet" href="wordle.css">
</head>
<body>
<h1 id="title">Wordle</h1>
<i id = "info" class="fas fa-info-circle"></i>
<i id="dark-mode-toggle" class="fas fa-circle"></i>
<hr>
<br>
<div id="board">
</div>
<br>
<div id="instructions-container">
<p>The goal is to guess the word </p>
</div>
<img id="congrats" src="https://res.cloudinary.com/mkf/image/upload/v1675467141/ENSF-381/labs/congrats_fkscna.gif" alt="Congratulations">
<script src="wordle.js"></script>
</html>
This is the updated css
body {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
--correct:#6baa64;
--background-color:white;
--text-color:black;
color: var(--text-color);
background-color: var(--background-color);
}
body.dark{
font-family: Arial, Helvetica, sans-serif;
text-align: center;
--correct:#6baa64;
--background-color:black;
background-color: var(--background-color);
--text-color:white;
color:white;
}
hr {
width: 500px;
}
#title {
font-size: 36px;
font-weight: bold;
letter-spacing: 2px;
}
#board {
width: 350px;
height: 420px;
margin: 0 auto;
margin-top: 3px;
display: flex;
flex-wrap: wrap;
}
.square {
border: 2px solid lightgray;
width: 60px;
height: 60px;
margin: 2.5px;
color: black;
font-size: 36px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
}
.correct {
background-color: var(--correct);
color: white;
border-color: white;
}
.present {
background-color: #C9B458;
color: white;
border-color: white;
}
.absent {
background-color: #787C7E;
color: white;
border-color:white;
}
#congrats {
display: none;
}
#dark-mode-toggle {
position: fixed;
top: 10px;
right: 250px;
}
#question{
position: fixed;
top: 10px;
right: 200px;
}
#info{
position: fixed;
top: 10px;
right: 300px;
}

You dont need display: flex; in board but you need to add display: flex; to row
#board {
width: 350px;
height: 420px;
margin: 0 auto;
margin-top: 3px;
}
.row {
display: flex;
}

Does #id override the :hover change?

I've seen different similar answers but none with the level of nesting I'm dealing with. I have two sets of buttons, circular ones and rectangular ones that I want the background to change to white on hover. The only thing I have been able to successfully change is the text color for the rectangular ones.
I previously had the button styles inline and thought that was the issue. Guess not :/
Does the ID override the :hover change? And if so do I need to reformat all of my buttons? Thank you!
(previous code solutions involve jquery and I have no knowledge of it whatsoever)
/*
CS 81 Final - Noah Derby
*/
//Global Variables
"use strict";
let gameActive = false;
let dealerValue = 0;
let playerValue = 0;
let buttons = document.getElementsByTagName('button');
let totalAmount = document.getElementById('betAmount');
let bank = document.getElementById('bank');
//Card Functions and
function Card(value, name, suit) {
this.value = value;
this.name = name
this.suit = suit
}
function newDeck() {
let suits = ['Hearts','Diamonds','Spades','Clubs'];
let names = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];
let deck = []
for(let i of suits) {
for(let n=0; n < names.length; n++) {
deck.push(new Card(n+1, names[n], i));
}
}
for (let i = deck.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
const temp = deck[i];
deck[i] = deck[j];
deck[j] = temp;
}
return deck;
}
function addTo(player, card){
let ascii_char;
let div = document.createElement('card');
div.className = 'card';
if(card.suit === 'Diamonds'){
ascii_char = "♦";
div.style.color = 'red';
} else if (card.suit === 'Hearts') {
ascii_char = '♥'
div.style.color = 'red';
} else {
ascii_char = "&" + card.suit.toLowerCase() + ";"
}
div.innerHTML = "<span class='number'>" + card.name + "</span><span class='suit'>" + ascii_char + "</span>";
if(player.id === "dealerTotal"){
document.querySelector(".dealerCards").appendChild(div);
} else {
document.querySelector(".playerCards").appendChild(div);
}
if (card.value > 10){
player.value = parseInt(player.value, 10) + 10;
} else if (card.value === 1) {
let handValue = parseInt(player.value, 10);
if(handValue <= 10) {
player.value = handValue + 11
} else {
player.value = handValue + 1
}
} else {
player.value = parseInt(player.value, 10) + card.value;
}
}
function clearCards() {
document.querySelector(".dealerCards").innerHTML = "";
document.querySelector(".playerCards").innerHTML = "";
}
//Button Handlers
for (let i=0; i < buttons.length; i++) {
buttons[i].addEventListener('click', () => {
let playerTotal = document.getElementById("playerTotal");
let dealerTotal = document.getElementById("dealerTotal");
let bankValue = parseInt(bank.value, 10);
let amountValue = parseInt(totalAmount.value, 10);
let cards = newDeck();
switch (buttons[i].id) {
case "one":
if(!gameActive){
totalAmount.value = parseInt(totalAmount.value, 10) + 1;
break;
}
break;
case "five":
if(!gameActive){
totalAmount.value = parseInt(totalAmount.value, 10) + 5;
break;
}
break;
case "ten":
if(!gameActive){
totalAmount.value = parseInt(totalAmount.value, 10) + 10;
break;
}
break;
case "twentyfive":
if(!gameActive){
totalAmount.value = parseInt(totalAmount.value, 10) + 25;
break;
}
break;
case "hundred":
if(!gameActive){
totalAmount.value = parseInt(totalAmount.value, 10) + 100;
break;
}
break
case "fivehundred":
if(!gameActive){
totalAmount.value = parseInt(totalAmount.value, 10) + 500;
break;
}
break;
case "thousand":
if(!gameActive){
totalAmount.value = parseInt(totalAmount.value, 10) + 1000;
break;
}
break;
case "reset":
if (!gameActive){
totalAmount.value = 0;
break;
}
break;
case "submit":
if(!gameActive){
if (bankValue === 0) {
alert("No funds available :(");
break;
} else if (amountValue === 0) {
alert("Please Enter a valid amount")
break;
} else if(amountValue > bankValue){
totalAmount.value = bank.value;
bank.value = 0;
} else{
bank.value = bankValue - amountValue;
}
clearCards();
playerTotal.value = dealerTotal.value = '0';
addTo(playerTotal, cards.pop());
addTo(playerTotal, cards.pop());
addTo(dealerTotal, cards.pop());
dealerTotal.style.color = "transparent";
gameActive = true;
break;
}
break;
case "hit":
if(gameActive) {
addTo(playerTotal, cards.pop())
if(parseInt(playerTotal.value, 10) > 21){
alert(`You lost $${amountValue} :( \n Submit another bet to play again!`);
dealerTotal.style.color = "black";
totalAmount.value= '0';
gameActive = false;
break;
}
}
break;
case 'stand':
if (gameActive) {
playerValue = parseInt(playerTotal.value, 10);
while(parseInt(dealerTotal.value, 10) <= 17){
addTo(dealerTotal, cards.pop());
}
dealerValue = parseInt(dealerTotal.value, 10);
if (dealerValue > 21){
alert(`You won $${amountValue*2}!!!`);
bank.value = bankValue + amountValue * 2;
totalAmount.value = 0;
gameActive = false;
dealerTotal.style.color = "black";
break;
}
if (playerValue < dealerValue) {
alert(`You lost $${amountValue} :( \n Submit another bet to play again!`);
totalAmount.value= '0';
} else if (playerValue > dealerValue) {
alert(`You won $${amountValue*2}!!!`);
bank.value = bankValue + amountValue * 2;
totalAmount.value = '0';
} else {
alert(`Its a tie! Funds refunded!`);
bank.value = bankValue + amountValue;
totalAmount.value= '0';
}
dealerTotal.style.color = "black";
gameActive = false;
}
break;
}
}, false)
}
/* CS 81 Final - Noah Derby */
body {
background-image: url('https://cdn.hipwallpaper.com/i/46/65/hEiUkp.jpg');
background-size: cover;
font-family: Verdana, sans-serif, bold;
font-weight: bold;
margin: 5px;
}
header {
text-align: center;
font-size: 50px;
margin: 50px 500px -50px;
}
label{
font-size: 25px;
}
input{
font-size: 25px;
color: black;
background-color: white;
}
div {
margin: 5px;
}
.economyWrap{
position: relative;
float: left;
width: 480px;
height: 500px;
top: 100px;
left: 50px;
}
.playWrap{
position: relative;
border: 5px solid black;
float: left;
top: 100px;
width: 260px;
height: 300px;
margin-left: 140px;
}
.textContainer{
padding: 5px;
background: rgba(0, 128, 0, 0.02);
margin: 200px 0 0 125px;
width: 400px;
float: left;
}
.playButtonContainer{
position: absolute;
margin: 17px;
bottom:-90px;
}
.earningsContainer{
position: absolute;
width: 450px;
height: 35px;
padding: 5px;
top:0;
left:85px;
}
.submitContainer {
margin: auto;
position: absolute;
width: 340px;
bottom: 220px;
left: 120px;
}
.chipContainer{
margin: auto;
position: absolute;
height: 210px;
width: 250px;
left: 140px;
bottom: 0;
}
/*
Buttons
*/
button.chip{
display: inline-block;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 15px;
font-weight: bold;
border-radius: 50%;
height: 52px;
width: 52px;
margin: 5px;
cursor: pointer;
transition-duration: .5s;
}
#one {
background-color: rgba(34,31,32,0.95);
color:white;
border: 5px solid rgba(209,212,213,0.95);
}
#five {
background-color: rgba(242,122,128,0.95);
color: rgba(148,30,28,0.95);
border: 5px solid rgba(235,53,45,0.95);
}
#ten {
background-color: rgba(169,219,203,0.95);
color: rgba(13,45,76,0.95);
border: 5px solid rgba(3,90,136,0.95);
}
#twentyfive {
background-color: rgba(235,232,64,0.95);
color: rgba(51,123,18,0.95);
border: 5px solid rgba(57,134,63,0.95);
}
#hundred {
background-color: #fdf049;
color: rgb(235,53,45);
border: 5px solid rgb(235,53,45);
}
#fivehundred {
background-color: #b6b0d5;
color: rgb(71,45,126);
border: 5px solid rgb(126,70,155);
}
#thousand {
background-color: #fffef6;
color: rgb(34,31,31);
border: 5px solid #59585a;
}
button.bet {
display: inline-block;
border-radius: 10px;
border: 4px solid saddlebrown;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 14px;
font-weight: bold;
height: 50px;
width: 100px;
margin: 5px;
cursor: pointer;
transition-duration: .5s;
}
#submit {
background-color: #358535;
}
#reset {
background-color: yellow;
}
#hit {
background-color: lightcoral;
}
#stand {
background-color: lightgreen;
}
.card{
background-color: white;
width:40px;
height:60px;
border:1px solid #151718;
float:left;
border-radius:2px;
}
.number, .suit{
width:100%;
display:block;
text-align:center;
padding-top:8px;
}
button:hover {
background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<!-- CS 81 Final Project - Noah Derby-->
<!-- A simple blackjack game. I hope you enjoy!!!!!!-->
<head>
<meta charset="UTF-8">
<title>Blackjack!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>Blackjack!</header>
<div class="economyWrap">
<div class="earningsContainer">
<label for="bank" style="font-size: 25px;">Your Balance is: $ </label><input type="number" id="bank" value="1000" style="width: 100px;" disabled>
</div>
<div class="chipContainer">
<button id="one" class="chip">1</button>
<button id="five" class="chip">5</button>
<button id="ten" class="chip" >10</button>
<button id="twentyfive" class="chip">25</button>
<button id="hundred" class="chip">100</button>
<button id="fivehundred" class="chip">500</button>
<button id="thousand" class="chip">1k</button>
</div>
<div class="submitContainer">
<label for="betAmount" style="font-size: 25px;">Bet Amount: $ </label><input type="number" id="betAmount" value="0" style="margin:5px; width: 100px;" disabled>
<button id="reset" class="bet">Reset</button>
<button id="submit" class="bet">Submit</button>
</div>
</div>
<div class="playWrap">
<div class="dealerContainer">
<label for="dealerTotal">Dealer Total: </label><input value="0" id="dealerTotal" style=" width: 50px;" disabled>
<div class="dealerCards"></div>
</div>
<div class="playerContainer" style="position: absolute; bottom:0;">
<label for="playerTotal">Your Total: </label><input value="0" id="playerTotal" style="bottom:0; width: 50px;" disabled>
<div class="playerCards"></div>
</div>
<div class="playButtonContainer">
<button class="bet" id="hit" style="background-color: lightgreen;">Hit</button>
<button class="bet" id="stand" style="background-color: lightcoral;">Stand</button>
</div>
</div>
<div class="textContainer">
<h2>Welcome to Blackjack!</h2>
<h4>
To start, click the corresponding chips to place your bets and click "Submit" to start the game!
The goal is to reach 21, so you can decide to either hit (gain another card) or stand (wait for the dealer).
Whoever is closer to 21 without going over wins!
</h4>
</div>
</body>
<script src="main.js"></script>
</html>

Question - Does the ID override the :hover change?
Answer -
The style rule for a:hover will override the paragraph as long as it is written in the CSS after the rule for p or #id.
The problem is that the selector handling your :hover behavior has a lower Specificity than the rule for the default behavior (p#id selector).
Question - If so do I need to reformat all of my buttons?
Answer - No, you don't need to reformat all the buttons as you can use !important on the button:hover in the CSS file.
/*
CS 81 Final - Noah Derby
*/
//Global Variables
"use strict";
let gameActive = false;
let dealerValue = 0;
let playerValue = 0;
let buttons = document.getElementsByTagName('button');
let totalAmount = document.getElementById('betAmount');
let bank = document.getElementById('bank');
//Card Functions and
function Card(value, name, suit) {
this.value = value;
this.name = name
this.suit = suit
}
function newDeck() {
let suits = ['Hearts','Diamonds','Spades','Clubs'];
let names = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];
let deck = []
for(let i of suits) {
for(let n=0; n < names.length; n++) {
deck.push(new Card(n+1, names[n], i));
}
}
for (let i = deck.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
const temp = deck[i];
deck[i] = deck[j];
deck[j] = temp;
}
return deck;
}
function addTo(player, card){
let ascii_char;
let div = document.createElement('card');
div.className = 'card';
if(card.suit === 'Diamonds'){
ascii_char = "♦";
div.style.color = 'red';
} else if (card.suit === 'Hearts') {
ascii_char = '♥'
div.style.color = 'red';
} else {
ascii_char = "&" + card.suit.toLowerCase() + ";"
}
div.innerHTML = "<span class='number'>" + card.name + "</span><span class='suit'>" + ascii_char + "</span>";
if(player.id === "dealerTotal"){
document.querySelector(".dealerCards").appendChild(div);
} else {
document.querySelector(".playerCards").appendChild(div);
}
if (card.value > 10){
player.value = parseInt(player.value, 10) + 10;
} else if (card.value === 1) {
let handValue = parseInt(player.value, 10);
if(handValue <= 10) {
player.value = handValue + 11
} else {
player.value = handValue + 1
}
} else {
player.value = parseInt(player.value, 10) + card.value;
}
}
function clearCards() {
document.querySelector(".dealerCards").innerHTML = "";
document.querySelector(".playerCards").innerHTML = "";
}
//Button Handlers
for (let i=0; i < buttons.length; i++) {
buttons[i].addEventListener('click', () => {
let playerTotal = document.getElementById("playerTotal");
let dealerTotal = document.getElementById("dealerTotal");
let bankValue = parseInt(bank.value, 10);
let amountValue = parseInt(totalAmount.value, 10);
let cards = newDeck();
switch (buttons[i].id) {
case "one":
if(!gameActive){
totalAmount.value = parseInt(totalAmount.value, 10) + 1;
break;
}
break;
case "five":
if(!gameActive){
totalAmount.value = parseInt(totalAmount.value, 10) + 5;
break;
}
break;
case "ten":
if(!gameActive){
totalAmount.value = parseInt(totalAmount.value, 10) + 10;
break;
}
break;
case "twentyfive":
if(!gameActive){
totalAmount.value = parseInt(totalAmount.value, 10) + 25;
break;
}
break;
case "hundred":
if(!gameActive){
totalAmount.value = parseInt(totalAmount.value, 10) + 100;
break;
}
break
case "fivehundred":
if(!gameActive){
totalAmount.value = parseInt(totalAmount.value, 10) + 500;
break;
}
break;
case "thousand":
if(!gameActive){
totalAmount.value = parseInt(totalAmount.value, 10) + 1000;
break;
}
break;
case "reset":
if (!gameActive){
totalAmount.value = 0;
break;
}
break;
case "submit":
if(!gameActive){
if (bankValue === 0) {
alert("No funds available :(");
break;
} else if (amountValue === 0) {
alert("Please Enter a valid amount")
break;
} else if(amountValue > bankValue){
totalAmount.value = bank.value;
bank.value = 0;
} else{
bank.value = bankValue - amountValue;
}
clearCards();
playerTotal.value = dealerTotal.value = '0';
addTo(playerTotal, cards.pop());
addTo(playerTotal, cards.pop());
addTo(dealerTotal, cards.pop());
dealerTotal.style.color = "transparent";
gameActive = true;
break;
}
break;
case "hit":
if(gameActive) {
addTo(playerTotal, cards.pop())
if(parseInt(playerTotal.value, 10) > 21){
alert(`You lost $${amountValue} :( \n Submit another bet to play again!`);
dealerTotal.style.color = "black";
totalAmount.value= '0';
gameActive = false;
break;
}
}
break;
case 'stand':
if (gameActive) {
playerValue = parseInt(playerTotal.value, 10);
while(parseInt(dealerTotal.value, 10) <= 17){
addTo(dealerTotal, cards.pop());
}
dealerValue = parseInt(dealerTotal.value, 10);
if (dealerValue > 21){
alert(`You won $${amountValue*2}!!!`);
bank.value = bankValue + amountValue * 2;
totalAmount.value = 0;
gameActive = false;
dealerTotal.style.color = "black";
break;
}
if (playerValue < dealerValue) {
alert(`You lost $${amountValue} :( \n Submit another bet to play again!`);
totalAmount.value= '0';
} else if (playerValue > dealerValue) {
alert(`You won $${amountValue*2}!!!`);
bank.value = bankValue + amountValue * 2;
totalAmount.value = '0';
} else {
alert(`Its a tie! Funds refunded!`);
bank.value = bankValue + amountValue;
totalAmount.value= '0';
}
dealerTotal.style.color = "black";
gameActive = false;
}
break;
}
}, false)
}
/* CS 81 Final - Noah Derby */
body {
background-image: url('https://cdn.hipwallpaper.com/i/46/65/hEiUkp.jpg');
background-size: cover;
font-family: Verdana, sans-serif, bold;
font-weight: bold;
margin: 5px;
}
header {
text-align: center;
font-size: 50px;
margin: 50px 500px -50px;
}
label{
font-size: 25px;
}
input{
font-size: 25px;
color: black;
background-color: white;
}
div {
margin: 5px;
}
.economyWrap{
position: relative;
float: left;
width: 480px;
height: 500px;
top: 100px;
left: 50px;
}
.playWrap{
position: relative;
border: 5px solid black;
float: left;
top: 100px;
width: 260px;
height: 300px;
margin-left: 140px;
}
.textContainer{
padding: 5px;
background: rgba(0, 128, 0, 0.02);
margin: 200px 0 0 125px;
width: 400px;
float: left;
}
.playButtonContainer{
position: absolute;
margin: 17px;
bottom:-90px;
}
.earningsContainer{
position: absolute;
width: 450px;
height: 35px;
padding: 5px;
top:0;
left:85px;
}
.submitContainer {
margin: auto;
position: absolute;
width: 340px;
bottom: 220px;
left: 120px;
}
.chipContainer{
margin: auto;
position: absolute;
height: 210px;
width: 250px;
left: 140px;
bottom: 0;
}
/*
Buttons
*/
button.chip{
display: inline-block;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 15px;
font-weight: bold;
border-radius: 50%;
height: 52px;
width: 52px;
margin: 5px;
cursor: pointer;
transition-duration: .5s;
}
#one {
background-color: rgba(34,31,32,0.95);
color:white;
border: 5px solid rgba(209,212,213,0.95);
}
#five {
background-color: rgba(242,122,128,0.95);
color: rgba(148,30,28,0.95);
border: 5px solid rgba(235,53,45,0.95);
}
#ten {
background-color: rgba(169,219,203,0.95);
color: rgba(13,45,76,0.95);
border: 5px solid rgba(3,90,136,0.95);
}
#twentyfive {
background-color: rgba(235,232,64,0.95);
color: rgba(51,123,18,0.95);
border: 5px solid rgba(57,134,63,0.95);
}
#hundred {
background-color: #fdf049;
color: rgb(235,53,45);
border: 5px solid rgb(235,53,45);
}
#fivehundred {
background-color: #b6b0d5;
color: rgb(71,45,126);
border: 5px solid rgb(126,70,155);
}
#thousand {
background-color: #fffef6;
color: rgb(34,31,31);
border: 5px solid #59585a;
}
button.bet {
display: inline-block;
border-radius: 10px;
border: 4px solid saddlebrown;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 14px;
font-weight: bold;
height: 50px;
width: 100px;
margin: 5px;
cursor: pointer;
transition-duration: .5s;
}
#submit {
background-color: #358535;
}
#reset {
background-color: yellow;
}
#hit {
background-color: lightcoral;
}
#stand {
background-color: lightgreen;
}
.card{
background-color: white;
width:40px;
height:60px;
border:1px solid #151718;
float:left;
border-radius:2px;
}
.number, .suit{
width:100%;
display:block;
text-align:center;
padding-top:8px;
}
button:hover {
background-color: white !important;
}
<!DOCTYPE html>
<html lang="en">
<!-- CS 81 Final Project - Noah Derby-->
<!-- A simple blackjack game. I hope you enjoy!!!!!!-->
<head>
<meta charset="UTF-8">
<title>Blackjack!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>Blackjack!</header>
<div class="economyWrap">
<div class="earningsContainer">
<label for="bank" style="font-size: 25px;">Your Balance is: $ </label><input type="number" id="bank" value="1000" style="width: 100px;" disabled>
</div>
<div class="chipContainer">
<button id="one" class="chip">1</button>
<button id="five" class="chip">5</button>
<button id="ten" class="chip" >10</button>
<button id="twentyfive" class="chip">25</button>
<button id="hundred" class="chip">100</button>
<button id="fivehundred" class="chip">500</button>
<button id="thousand" class="chip">1k</button>
</div>
<div class="submitContainer">
<label for="betAmount" style="font-size: 25px;">Bet Amount: $ </label><input type="number" id="betAmount" value="0" style="margin:5px; width: 100px;" disabled>
<button id="reset" class="bet">Reset</button>
<button id="submit" class="bet">Submit</button>
</div>
</div>
<div class="playWrap">
<div class="dealerContainer">
<label for="dealerTotal">Dealer Total: </label><input value="0" id="dealerTotal" style=" width: 50px;" disabled>
<div class="dealerCards"></div>
</div>
<div class="playerContainer" style="position: absolute; bottom:0;">
<label for="playerTotal">Your Total: </label><input value="0" id="playerTotal" style="bottom:0; width: 50px;" disabled>
<div class="playerCards"></div>
</div>
<div class="playButtonContainer">
<button class="bet" id="hit" style="background-color: lightgreen;">Hit</button>
<button class="bet" id="stand" style="background-color: lightcoral;">Stand</button>
</div>
</div>
<div class="textContainer">
<h2>Welcome to Blackjack!</h2>
<h4>
To start, click the corresponding chips to place your bets and click "Submit" to start the game!
The goal is to reach 21, so you can decide to either hit (gain another card) or stand (wait for the dealer).
Whoever is closer to 21 without going over wins!
</h4>
</div>
</body>
<script src="main.js"></script>
</html>

Weird behavior in displaying textContent when there's overflow

I am making a Calculator App and there I am noticing a weird glitch. When I enter "1-1111...." and the moment it overflows the display div width, the text in the div element jumps down to only "1-", whereas if I inspect the textContent for div element its still "1-1111....".
To see for yourself just enter 1 then minus sign and then keep entering 1's untill the display overflows. You will see what I am taking about. View in FullScreen
Also this happens only with minus sign try inserting plus sign instead of minus it will work fine.
//Selectors
let numbers = document.querySelectorAll(".numbers")
let operators = document.querySelectorAll(".operators")
let equalto = document.querySelector(".equalto")
let clear = document.querySelector(".clear")
let backspace = document.querySelector(".backspace")
let plusMinus = document.querySelector(".plus-minus")
let dot = document.querySelector(".dot")
let display = document.querySelector(".display")
let output = document.querySelector(".output")
let equaltoPressed = false;
//Event Listeners
for(let i=0; i<numbers.length; i++){
numbers[i].addEventListener("click", function(){
if (equaltoPressed){
display.textContent = "";
equaltoPressed = false;
}
//if condition so that if the display has "Infinity" on it, we don't append digits
if ("0123456789.+-×÷".includes(display.textContent[display.textContent.length-1]) || display.textContent == "")
display.textContent += this.textContent;
evaluate();
})
}
for(let i=0; i<operators.length; i++){
operators[i].addEventListener("click", function(){
equaltoPressed = false;
if ("+-×÷".includes(display.textContent[display.textContent.length-1]))
display.textContent = display.textContent.substring(0,display.textContent.length-1) + this.textContent;
else
display.textContent += this.textContent;
})
}
equalto.addEventListener("click", function(){
if (output.textContent !== ""){
display.textContent = output.textContent;
output.textContent = "";
equaltoPressed = true;
}
});
clear.addEventListener("click", function(){
equaltoPressed = false;
display.textContent = "";
output.textContent = "";
})
backspace.addEventListener("click", function(){
equaltoPressed = false;
display.textContent = display.textContent.substr(0,display.textContent.length-1);
evaluate();
})
plusMinus.addEventListener("click", function(){
equaltoPressed = false;
let expression = display.textContent;
let flag = true;
for (let i=expression.length-1; i>=0; i--){
if ("+-×÷".includes(expression[i])){
if (expression[i] !== "-")
expression = expression.substring(0,i+1) + "-" + expression.substring(i+1,expression.length);
else if ("+-×÷".includes(expression[i-1]) || i-1<0)
expression = expression.substring(0,i) + expression.substring(i+1,expression.length);
else
expression = expression.substring(0,i) + "+" + expression.substring(i+1,expression.length);
flag = false;
break;
}
}
if (flag)
expression = "-"+expression;
display.textContent = expression;
evaluate();
})
dot.addEventListener("click", function(){
if (equaltoPressed)
display.textContent = "";
let start = 0;
for (let i=display.textContent.length-1; i>=0; i--){
if("+-×÷".includes(display.textContent[i])){
start = i+1;
break;
}
}
if (!display.textContent.substring(start,display.textContent.length).includes("."))
display.textContent += ".";
})
//Functions
function evaluate(){
let expression = display.textContent;
for (let i=0; i<expression.length; i++){
if (expression[i] === "×")
expression = expression.substring(0,i) + "*" + expression.substring(i+1,expression.length);
if (expression[i] === "÷")
expression = expression.substring(0,i) + "/" + expression.substring(i+1,expression.length);
}
if("0123456789.".includes(expression[expression.length-1]) && eval(expression) != expression)
output.textContent = eval(expression);
else
output.textContent = "";
}
*{
border:0;
margin:0;
}
body{
height: 100vh;
background: black;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: arial;
font-size: 1.5rem;
color: #f8f8f8;
}
.row{
display: flex;
}
.light-grey{
display: flex;
align-items: center;
justify-content: center;
background-color: #a6a6a6;
height: 4.2rem;
width: 4.2rem;
border-radius: 50%;
margin: .4rem;
cursor: pointer;
color: black;
}
.dark-grey{
display: flex;
align-items: center;
justify-content: center;
background-color: #333333;
height: 4.2rem;
width: 4.2rem;
border-radius: 50%;
margin: .4rem;
cursor: pointer;
}
.yellow{
display: flex;
align-items: center;
justify-content: center;
background-color: #ff9501;
height: 4.2rem;
width: 4.2rem;
border-radius: 50%;
margin: .4rem;
cursor: pointer;
}
#zero{
width: 9.2rem;
border-radius:0 50px 50px 0;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
border-top-left-radius: 50px;
}
.display{
width: 19.2rem;
height: 3rem;
margin: 0 .4rem 1.5rem .4rem;
text-align: right;
font-size: 3rem;
padding-bottom: 0.5rem;
overflow-y: hidden;
overflow-x: scroll;
}
.output{
width: 19.2rem;
height: 2rem;
margin: 0 .4rem 1.5rem .4rem;
text-align: right;
font-size: 2rem;
padding-bottom: 0.5rem;
overflow-y: hidden;
overflow-x: scroll;
}
i{
font-size: 1.3rem;
}
::-webkit-scrollbar {
width: 19.2rem;
height: .2rem;
}
::-webkit-scrollbar-track {
background: black;
}
::-webkit-scrollbar-thumb {
background: #333333;
}
::-webkit-scrollbar-thumb:hover {
background: #a6a6a6;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" integrity="sha256-46r060N2LrChLLb5zowXQ72/iKKNiw/lAmygmHExk/o=" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="display"></div>
<div class="output"></div>
<div class="row">
<div class="light-grey clear">AC</div>
<div class="light-grey plus-minus">+/-</div>
<div class="light-grey operators">÷</div>
<div class="yellow backspace"><i class="fas fa-backspace"></i></div>
</div>
<div class="row">
<div class="dark-grey numbers">7</div>
<div class="dark-grey numbers">8</div>
<div class="dark-grey numbers">9</div>
<div class="yellow operators">×</div>
</div>
<div class="row">
<div class="dark-grey numbers">4</div>
<div class="dark-grey numbers">5</div>
<div class="dark-grey numbers">6</div>
<div class="yellow operators">-</div>
</div>
<div class="row">
<div class="dark-grey numbers">1</div>
<div class="dark-grey numbers">2</div>
<div class="dark-grey numbers">3</div>
<div class="yellow operators">+</div>
</div>
<div class="row">
<div class="dark-grey numbers" id="zero">0</div>
<div class="dark-grey dot">.</div>
<div class="yellow equalto">=</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

You should add white-space: nowrap to .display, so the text won't break with the dash.
If you change the font-size, you can see that the text is going down with the dash.

How to customize audio player?

I'm trying to replicate this audio player:
https://medium.com/s/story/the-law-of-least-effort-is-the-success-secret-nobody-talks-about-c713eeab8ade)
with a grey progress line, but I can't seem to figure out the following 4 things:
How to put the progress bar next to the play/pause button?
How to have 2 decimals for the total time digit? (The 48 seconds)
How to have 2 decimals for the currentTimer? (First 9 seconds)
How to place the timers at the beginning and the end?
var barSize = 640;
var bar = document.getElementById('defaultBar');
var progressBar = document.getElementById('progressBar');
mytrack.addEventListener("loadedmetadata", function() {
var minutes = parseInt(mytrack.duration / 60);
var seconds = parseInt(mytrack.duration % 60);
duration.innerHTML = minutes + ':' + seconds;
})
duration.innerHTML = mytrack.duration;
playButton.addEventListener('click', playOrPause, false);
bar.addEventListener('click', clickedBar, false);
#progressBar {
position: absolute;
height: 2px;
background-color: #C6C6C6;
width: 0px;
float: left;
}
#playButton {
background-color: #FFFFFF;
border: none;
outline: none;
height: 60px;
width: 60px;
background-image: url(../Desktop/Play%20button.png);
background-repeat: no-repeat;
background-position: center;
}
#player {
background-color: #FFFFFF;
width: 400px;
margin-left: 300px;
padding: 5px;
box-sizing: border-box;
}
<div id="wrapper">
<audio id="mytrack">
<source src="file:///Users/Pier/Desktop/Narrated%20Story%20-%20Example.m4a" type="audio/mp3"/>
</audio>
<nav>
<div id="defaultBar">
<div id="progressBar"></div>
</div>
<div id="buttons">
<button type="button" id="playButton"></button>
<span id="currentTime">0:00</span>
<span id="fullDuration">0:00</span>
</div>
</nav>
</div>

The page you referenced uses flexbox for layout. You might consider a similar approach.
Below, I restructured your HTML and made each control element a flexbox item.
I also centered all items vertically with align-items:center.
var myTrack = document.getElementById('myTrack');
var progressBar = document.getElementById('progressBar');
var currentTime = document.getElementById('currentTime');
var fullDuration = document.getElementById('fullDuration');
function zeroPad(s) {
return ('00' + s).slice(-2);
}
function formatTime(t) {
var m = Math.floor(t / 60);
var s = Math.floor(t % 60);
return zeroPad(m) + ':' + zeroPad(s);
}
function playOrPause() {
myTrack.paused ? myTrack.play() : myTrack.pause();
}
myTrack.addEventListener("loadedmetadata", function() {
fullDuration.innerHTML = formatTime(this.duration);
});
myTrack.addEventListener("timeupdate", function() {
var thisTime = this.currentTime;
var duration = this.duration;
progressBar.style.width = thisTime / duration * 100 + '%';
currentTime.innerHTML = formatTime(thisTime);
});
playButton.addEventListener('click', playOrPause, false);
#audioControls {
display: flex;
align-items: center;
}
.controlTime {
margin: 0 1em;
}
#progressWrap {
/* Allow this element to grow */
flex: 1 0 auto;
border: 1px solid #EEE;
border-radius: 0.5em;
overflow: hidden;
}
#progressBar {
height: 0.5em;
background-color: #55AA55;
width: 0;
}
#playButton {
background-color: #FFFFFF;
border: 1px solid #CCC;
border-radius: 3px;
padding: 0.7em 1em;
outline: none;
cursor: pointer;
}
#playButton:hover {
background-color: darkgray;
color: white;
}
<div id="wrapper">
<audio id="myTrack">
<source src="https://example-files.online-convert.com/audio/m4a/example.m4a" type="audio/mp3"/>
</audio>
<nav id="audioControls">
<button type="button" id="playButton">play</button>
<span class="controlTime" id="currentTime">00:00</span>
<div id="progressWrap">
<div id="progressBar"></div>
</div>
<span class="controlTime" id="fullDuration">00:00</span>
</nav>
</div>

Audio player not working for multiple audios

I have created an audio player using javascript,
with the below Javascript, html, css I am getting expected result for one audio file in the HTML, when i add another audio file in the html, its not working.
Can you please anyone suggest how this can be handled for multiple audio files in the HTML?
Javascript
function calculateTotalValue(length) {
var minutes = Math.floor(length / 60),
seconds_int = length - minutes * 60,
seconds_str = seconds_int.toString(),
seconds = seconds_str.substr(0, 2),
time = minutes + ':' + seconds
return time;
}
function calculateCurrentValue(currentTime) {
var current_hour = parseInt(currentTime / 3600) % 24,
current_minute = parseInt(currentTime / 60) % 60,
current_seconds_long = currentTime % 60,
current_seconds = current_seconds_long.toFixed(),
current_time = (current_minute < 10 ? "0" + current_minute : current_minute) + ":" + (current_seconds < 10 ? "0" + current_seconds : current_seconds);
return current_time;
}
function initProgressBar() {
var player = document.getElementById('player');
var length = player.duration
var current_time = player.currentTime;
// calculate total length of value
var totalLength = calculateTotalValue(length)
jQuery(".end-time").html(totalLength);
// calculate current value time
var currentTime = calculateCurrentValue(current_time);
jQuery(".start-time").html(currentTime);
var progressbar = document.getElementById('seekObj');
progressbar.value = (player.currentTime / player.duration);
progressbar.addEventListener("click", seek);
if (player.currentTime == player.duration) {
$('#play-btn').removeClass('pause');
}
function seek(evt) {
var percent = evt.offsetX / this.offsetWidth;
player.currentTime = percent * player.duration;
progressbar.value = percent / 100;
}
};
function initPlayers(num) {
for (var i = 0; i < num; i++) {
(function() {
var playerContainer = document.getElementById('player-container'),
player = document.getElementById('player'),
isPlaying = false,
playBtn = document.getElementById('play-btn');
if (playBtn != null) {
playBtn.addEventListener('click', function() {
togglePlay()
});
}
// Controls & Sounds Methods
// ----------------------------------------------------------
function togglePlay() {
if (player.paused === false) {
player.pause();
isPlaying = false;
$('#play-btn').removeClass('pause');
} else {
player.play();
$('#play-btn').addClass('pause');
isPlaying = true;
}
}
}());
}
}
function muteAud(){
if (player.muted === false) {
player.muted = true;
$('#btn_muteUnmute').addClass('mute');
}
else
{
player.muted = false;
$('#btn_muteUnmute').removeClass('mute');
}
}
initPlayers(jQuery('#player-container').length);
Here is the HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div class="audio-player">
<div id="play-btn"></div>
<div class="audio-wrapper" id="player-container">
<audio id="player" ontimeupdate="initProgressBar()">
<source
src="mmc03-01-9780128023198.mp3" type="audio/mp3"/></audio>
</div>
<div class="player-controls scrubber">
<div id="seekObjContainer">
<progress id="seekObj" value="0" max="1"></progress>
</div>
<small style="float: left; position: relative; left: 15px;" class="start-time"></small>
<small style="float: right; position: relative; right: 20px;" class="end-time"></small>
<div id="btn_muteUnmute"></div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
CSS:
html {
height: 100%;
display: table;
margin: auto;
}
body {
height: 100%;
display: table-cell;
vertical-align: middle;
}
.start-time
{
margin: 0rem 0rem 0 0rem;
}
.end-time
{
margin: 0rem 15rem 0 0rem;
}
.audio-player {
background: white;
width: 50vw;
text-align: center;
display: flex;
flex-flow: row;
margin: 4rem 0 4rem 0;
}
.audio-player .player-controls {
align-items: center;
justify-content: center;
margin-top: 2.5rem;
flex: 3;
}
.audio-player .player-controls progress {
width: 70%;
margin-left: -15.5rem;
}
.audio-player .player-controls progress[value] {
-webkit-appearance: none;
appearance: none;
background-color: white;
color: grey;
height: 6px;
}
.audio-player .player-controls progress[value]::-webkit-progress-bar {
background-color: #d3d3d3;
border-radius: 2px;
border: 1px solid #dfdfdf;
color: grey;
}
.audio-player .player-controls progress::-webkit-progress-value {
background-color: grey;
}
.audio-player .player-controls p {
font-size: 1.6rem;
}
.audio-player #play-btn {
background-image: url("../img/play.png");
background-size: cover;
width: 25px;
height: 25px;
margin: 2.7rem 0 2rem 2rem;
}
.audio-player #play-btn.pause {
background-image: url("../img/pause.png");
}
.audio-player #btn_muteUnmute {
background-image: url("../img/unmute.png");
background-size: cover;
width: 25px;
height: 25px;
margin: -1.9rem 0 2rem 48rem;
}
.audio-player #btn_muteUnmute.mute {
background-image: url("../img/mute.png");
}
html{font-size:10px;)}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}

Here you id instead of class:
Change some of your code like this:
var playerContainer = document.querySelectorAll('.player-container'),
player = document.querySelectorAll('.player'),
isPlaying = false,
playBtn = document.querySelectorAll('.play-btn');
Note: You should loop through the element playerContainer, player and playBtn variable because querySelectorAll returns a list of Node.
Advice: if you use jQuery, use it for the selector.

Develop Reference

JavaScript is the programming language of the Web.

Time does not display when you start the timer - javascript

Related

trying to make a wordle game, but the letters are going up to down, instead of right to left, i don't know how to tackle it

Does #id override the :hover change?

Weird behavior in displaying textContent when there's overflow

How to customize audio player?

Audio player not working for multiple audios

Categories

Resources