I am making a small game to guess numbers in javascript, but when I try to reset the game adding an addEventListener with a click and clicking a button created that is called "Again" in order to reset to original configuration and reset the game web-app loses shape. Why this happens??
My HTML code is :
var number = Math.trunc(Math.random() * 20) + 1;
var score = 20;
var highscore = 0;
document.querySelector(".check").addEventListener("click", function() {
var guess = Number(document.querySelector(".guess").value);
console.log(guess);
// when there is no input
if (!guess) {
document.querySelector(".message").
textContent = "No Number!!!!!!";
// when player wins
} else if (guess === number) {
document.querySelector(".message").
textContent = "Correct Number!!!!!!!!";
document.querySelector(".number").textContent = number;
document.querySelector("body").style.backgroundColor="#60b347";
document.querySelector(".number").style.width="30rem";
if(score>highscore){
highscore=score;
document.querySelector(".highscore").textContent=highscore;
}
// when guess is too high
} else if (guess > number) {
if (score > 1) {
document.querySelector(".message").
textContent = "Too High!!!!!!!!!!";
score = score - 1;
document.querySelector(".score").textContent = score;
} else {
document.querySelector(".message").textContent = "YOU LOST THE GAME";
document.querySelector(".score").textContent=0;
}
// when guess is to low
} else if (guess < number) {
if (score > 1) {
document.querySelector(".message").
textContent = "Too Low!!!!!!!!!!";
score = score - 1;
document.querySelector(".score").textContent = score;
} else {
document.querySelector(".message").textContent = "YOU LOST THE GAME";
document.querySelector(".score").textContent=0;
}
}
});
document.querySelector(".again").addEventListener("click", function(){
score=20;
var number = Math.trunc(Math.random() * 20) + 1;
document.querySelector(".message").textContent = "Start guessing...";
document.querySelector(".score").textContent = score;
document.querySelector(".number").textContent = "?";
document.querySelector(".guess").value="";
document.querySelector("body").style.backgroundColor="#222";
document.querySelector("body").style.width="15rem";
});
#import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
body {
font-family: 'Press Start 2P', sans-serif;
color: #eee;
background-color: #222;
/* background-color: #60b347; */
}
/* LAYOUT */
header {
position: relative;
height: 35vh;
border-bottom: 7px solid #eee;
}
main {
height: 65vh;
color: #eee;
display: flex;
align-items: center;
justify-content: space-around;
}
.left {
width: 52rem;
display: flex;
flex-direction: column;
align-items: center;
}
.right {
width: 52rem;
font-size: 2rem;
}
/* ELEMENTS STYLE */
h1 {
font-size: 4rem;
text-align: center;
position: absolute;
width: 100%;
top: 52%;
left: 50%;
transform: translate(-50%, -50%);
}
.number {
background: #eee;
color: #333;
font-size: 6rem;
width: 15rem;
padding: 3rem 0rem;
text-align: center;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
}
.between {
font-size: 1.4rem;
position: absolute;
top: 2rem;
right: 2rem;
}
.again {
position: absolute;
top: 2rem;
left: 2rem;
}
.guess {
background: none;
border: 4px solid #eee;
font-family: inherit;
color: inherit;
font-size: 5rem;
padding: 2.5rem;
width: 25rem;
text-align: center;
display: block;
margin-bottom: 3rem;
}
.btn {
border: none;
background-color: #eee;
color: #222;
font-size: 2rem;
font-family: inherit;
padding: 2rem 3rem;
cursor: pointer;
}
.btn:hover {
background-color: #ccc;
}
.message {
margin-bottom: 8rem;
height: 3rem;
}
.label-score {
margin-bottom: 2rem;
}
<!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="style.css" />
<title>Guess My Number!</title>
</head>
<body>
<header>
<h1>Guess My Number!</h1>
<p class="between">(Between 1 and 20)</p>
<button class="btn again">Again!</button>
<div class="number">?</div>
</header>
<main>
<section class="left">
<input type="number" class="guess" />
<button class="btn check">Check!</button>
</section>
<section class="right">
<p class="message">Start guessing...</p>
<p class="label-score">Score: <span class="score">20</span></p>
<p class="label-highscore">
Highscore: <span class="highscore">0</span>
</p>
</section>
</main>
<script src="script.js"></script>
</body>
</html>
delete this row: document.querySelector("body").style.width="15rem"
Related
I'm having trouble figuring out how to make the data-title only appear on hovering of the up-arrow only when the footer is down/not showing. However, I would also appreciate another solution where the data-title would still be visible when hovering the up-arrow even when the footer is up/showing. In this case, I would prefer the data-title to be displayed in its original position, up-right/0deg and on top of the up-arrow, rather than rotated 180deg and under the up-arrow.
I've tried using CSS and JavaScript to add and remove the data-title attribute, empty its innerHTML, and toggle its display, but nothing seems to work the way I want. Specifically, I was expecting the data-title to only appear on hover of an element (let's call it "Element A") when another element (let's call it "Element B") is hidden. Element A is the up-arrow, and I want the data-title to be shown on hover of Element A when Element B (the footer) is not visible on the page.
I suspect that the solution may be simple, but I'm struggling to figure it out. Any help or suggestions would be greatly appreciated.
// Get the up arrow element
const upArrow = document.getElementById("up-arrow");
const footer = document.querySelector(".slide-up-footer");
let isOpen = false;
// Add an event listener to toggle the "show" class
upArrow.addEventListener("click", toggleFooter);
upArrow.addEventListener("click", () => {
footer.classList.toggle("show");
});
function toggleFooter() {
if (isOpen) {
footer.style.bottom = "-100%";
upArrow.style.transform = "rotate(0deg)";
upArrow.style.bottom = "0";
} else {
footer.style.bottom = "0";
upArrow.style.bottom = "6%";
upArrow.style.transform = "rotate(180deg)";
}
isOpen = !isOpen;
}
html {
scroll-behavior:smooth;
}
body {
font-family: 'Adobe Caslon Pro Bold', sans-serif;
background-color: red;
overflow: hidden;
}
body h1 {
text-align: center;
}
.page-wrap {
position: fixed;
top: 10px;
right: 10px;
left: 10px;
bottom: 10px;
background: white;
border-radius: 30px;
padding: 20px;
text-align: center;
overflow: hidden;
}
.page-wrap h1 {
margin: 0;
}
p {
line-height: 3;
}
::-webkit-scrollbar-track {
background: none;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 5px;
}
.slide-up-footer {
display: flex;
flex-direction: column;
justify-content: center;
font: 10px Fakt Soft, sans-serif;
position: absolute;
bottom: -1000px; /* or another value that will hide the footer */
width: 100vw;
height: 8%;
transition: all 0.7s ease-in-out;
background-color: white;
}
.slide-up-footer.show {
bottom: 0;
}
.footer-text {
display: grid;
grid-row: 1/2;
font: 12px Fakt Soft, sans-serif;
color: black;
text-align: center;
padding: 10px;
justify-content: center;
position: relative;
}
.footer-text p{
line-height: 0;
}
.up-arrow {
transition: all 0.7s ease-in-out;
position: absolute;
bottom: 0px;
right: 0px;
margin: 2rem;
z-index: 999;
}
.custom-class{
font-weight: bold;
font: 20px Fakt Soft, sans-serif;
color:black;
cursor: pointer;
z-index: 999;
}
.custom-class:hover::before {
content: "FOOTER";
font: 12px Fakt Soft, sans-serif;
position: absolute;
background-color: transparent;
color: black;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Helvetica+Neue&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Retro Step</title>
</head>
<body>
<div class="page-wrap">
<footer class="slide-up-footer">
<div class="footer-text">
<p>FREE SHIPPING IN PORTUGAL / IN EUROPE FROM 150€ / EASY RETURNS</p>
</footer>
<div class="up-arrow" id="up-arrow">
<span class="custom-class" data-title="FOOTER">^</span>
</div>
<script src="script.js"></script>
</div>
</body>
</html>
So apply a style when the sibling as the show class to hide it from view
.slide-up-footer.show + .up-arrow > .custom-class:hover::before {
display: none;
}
// Get the up arrow element
const upArrow = document.getElementById("up-arrow");
const footer = document.querySelector(".slide-up-footer");
let isOpen = false;
// Add an event listener to toggle the "show" class
upArrow.addEventListener("click", toggleFooter);
upArrow.addEventListener("click", () => {
footer.classList.toggle("show");
});
function toggleFooter() {
if (isOpen) {
footer.style.bottom = "-100%";
upArrow.style.transform = "rotate(0deg)";
upArrow.style.bottom = "0";
} else {
footer.style.bottom = "0";
upArrow.style.bottom = "6%";
upArrow.style.transform = "rotate(180deg)";
}
isOpen = !isOpen;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Adobe Caslon Pro Bold', sans-serif;
background-color: red;
overflow: hidden;
}
body h1 {
text-align: center;
}
.page-wrap {
position: fixed;
top: 10px;
right: 10px;
left: 10px;
bottom: 10px;
background: white;
border-radius: 30px;
padding: 20px;
text-align: center;
overflow: hidden;
}
.page-wrap h1 {
margin: 0;
}
p {
line-height: 3;
}
::-webkit-scrollbar-track {
background: none;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 5px;
}
.slide-up-footer {
display: flex;
flex-direction: column;
justify-content: center;
font: 10px Fakt Soft, sans-serif;
position: absolute;
bottom: -1000px;
/* or another value that will hide the footer */
width: 100vw;
height: 8%;
transition: all 0.7s ease-in-out;
background-color: white;
}
.slide-up-footer.show {
bottom: 0;
}
.footer-text {
display: grid;
grid-row: 1/2;
font: 12px Fakt Soft, sans-serif;
color: black;
text-align: center;
padding: 10px;
justify-content: center;
position: relative;
}
.footer-text p {
line-height: 0;
}
.up-arrow {
transition: all 0.7s ease-in-out;
position: absolute;
bottom: 0px;
right: 0px;
margin: 2rem;
z-index: 999;
}
.custom-class {
font-weight: bold;
font: 20px Fakt Soft, sans-serif;
color: black;
cursor: pointer;
z-index: 999;
}
.custom-class:hover::before {
content: "FOOTER";
font: 12px Fakt Soft, sans-serif;
position: absolute;
background-color: transparent;
color: black;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
}
.slide-up-footer.show+.up-arrow>.custom-class:hover::before {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Helvetica+Neue&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Retro Step</title>
</head>
<body>
<div class="page-wrap">
<footer class="slide-up-footer">
<div class="footer-text">
<p>FREE SHIPPING IN PORTUGAL / IN EUROPE FROM 150€ / EASY RETURNS</p>
</footer>
<div class="up-arrow" id="up-arrow">
<span class="custom-class" data-title="FOOTER">^</span>
</div>
<script src="script.js"></script>
</div>
</body>
</html>
So here is my code that i need help with
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style8.css" />
<title>Progress Steps</title>
</head>
<body>
<div class="container">
<div class="progress-container">
<div class="progress" id="progress"></div>
<div class="circle active">1</div>
<div class="circle">2</div>
<div class="circle">3</div>
<div class="circle">4</div>
</div>
<button class="btn" id="prev" disabled>Prev</button>
<button class="btn" id="next">Next</button>
</div>
<script src="script8.js"></script>
</body>
</html>
Here is the css
#import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
:root {
--line-border-fill: #3498db;
--line-border-empty: #383838;
}
* {
box-sizing: border-box;
}
body {
background-color: #1f1f1f;
font-family: 'Muli', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.container {
text-align: center;
}
.progress-container { //im trying to use this
display: flex;
justify-content: space-between;
position: relative;
margin-bottom: 30px;
max-width: 100%;
width: 350px;
}
.progress-container::before { //im trying to use this
content: '';
background-color: var(--line-border-empty);
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
height: 4px;
width: 100%;
z-index: -1;
}
.progress { //im trying to use this
background-color: var(--line-border-fill);
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
height: 4px;
width: 0%;
z-index: -1;
transition: 0.4s ease;
}
.circle {
background-color: #1f1f1f;
color:#e2e2e2;
border-radius: 50%;
height: 30px;
width: 30px;
display: flex;
align-items: center;
justify-content: center;
border: 3px solid var(--line-border-empty);
transition: 0.4s ease;
}
.circle.active {
border-color: var(--line-border-fill);
}
.btn {
background-color: var(--line-border-fill);
color: #fff;
border: 0;
border-radius: 6px;
cursor: pointer;
font-family: inherit;
padding: 8px 30px;
margin: 5px;
font-size: 14px;
}
.btn:active {
transform: scale(0.98);
}
.btn:focus {
outline: 0;
}
.btn:disabled {
background-color: var(--line-border-empty);
cursor: not-allowed;
}
And here is the javascript. Im not really familiar with javascript. Kind of a newbie at it.
const progress = document.getElementById("progress");
const prev = document.getElementById("prev");
const next = document.getElementById("next");
const circles = document.querySelectorAll(".circle");
let currentActive = 1;
next.addEventListener("click", () => {
currentActive++;
if (currentActive > circles.length) {
currentActive = circles.length;
}
update();
});
prev.addEventListener("click", () => {
currentActive--;
if (currentActive < 1) {
currentActive = 1;
}
update();
});
function update() { //here is the part i need help with
}
const actives = document.querySelectorAll(".active");
progress.style.width =
((actives.length - 1) / (circles.length - 1)) * 100 + "%";
if (currentActive === 1) {
prev.disabled = true;
} else if (currentActive === circles.length) {
next.disabled = true;
} else {
prev.disabled = false;
next.disabled = false;
}
Im trying to write a function to update the html when the back or next button is pressed and i need to use the progress css class. I have no idea how to implement it.
You should be able to use the DOM control functions in JavaScript to fix your problem.
Send my answer. Sincerely
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Progress Steps</title>
</head>
<style>
#import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
:root {
--line-border-fill: #3498db;
--line-border-empty: #383838;
}
* {
box-sizing: border-box;
}
body {
background-color: #1f1f1f;
font-family: 'Muli', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.container {
text-align: center;
}
.progress-container {
display: flex;
justify-content: space-between;
position: relative;
margin-bottom: 30px;
max-width: 100%;
width: 350px;
}
.progress-container::before {
content: '';
background-color: var(--line-border-empty);
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
height: 4px;
width: 100%;
z-index: -1;
}
.progress {
background-color: #3498db;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
height: 4px;
width: 0%;
z-index: -1;
transition: 0.4s ease;
}
.circle {
background-color: #1f1f1f;
color:#e2e2e2;
border-radius: 50%;
height: 30px;
width: 30px;
display: flex;
align-items: center;
justify-content: center;
border: 3px solid var(--line-border-empty);
transition: 0.4s ease;
}
.circle.active {
border-color: #3498db;
}
.btn {
background-color: #3498db;
color: #fff;
border: 0;
border-radius: 6px;
cursor: pointer;
font-family: inherit;
padding: 8px 30px;
margin: 5px;
font-size: 14px;
}
.btn:active {
transform: scale(0.98);
}
.btn:focus {
outline: 0;
}
.btn:disabled {
background-color: var(--line-border-empty);
cursor: not-allowed;
}
</style>
<body>
<div class="container">
<div id="content" style="border: 1px solid black; margin: 0 auto; width: 300px; height: 100px; background-color: white;">
Content 1
</div>
<div class="progress-container">
<div class="progress" id="progress"></div>
<div class="circle active">1</div>
<div class="circle">2</div>
<div class="circle">3</div>
<div class="circle">4</div>
</div>
<button class="btn" id="prev" disabled>Prev</button>
<button class="btn" id="next">Next</button>
</div>
</body>
<script>
const progress = document.getElementById("progress");
const prev = document.getElementById("prev");
const next = document.getElementById("next");
const content = document.getElementById("content"); // added
const circles = document.querySelectorAll(".circle");
let currentActive = 1;
next.addEventListener("click", () => {
currentActive++;
if (currentActive > circles.length) {
currentActive = circles.length;
}
update(currentActive);
});
prev.addEventListener("click", () => {
currentActive--;
if (currentActive < 1) {
currentActive = 1;
}
update(currentActive);
});
function update(currentStep) {
//here is the part I fixed
let stepItems = document.getElementsByClassName("circle");
for (let i = 0; i < stepItems.length; i++) {
const stepItem = stepItems[i];
if (stepItem.textContent == currentStep) {
stepItem.classList.toggle("active");
}
}
prev.toggleAttribute("disabled", false);
next.toggleAttribute("disabled", false);
if (currentStep == 1) prev.setAttribute("disabled", true);
if (currentStep == 4) next.setAttribute("disabled", true);
content.innerText = "Content" + currentStep;
}
const actives = document.querySelectorAll(".active");
progress.style.width = ((actives.length - 1) / (circles.length - 1)) * 100 + "%";
if (currentActive === 1) {
prev.disabled = true;
} else if (currentActive === circles.length) {
next.disabled = true;
} else {
prev.disabled = false;
next.disabled = false;
}
</script>
</html>
I am trying to create a Library and add information that is entered into my form (form is in popup window) to appear in a div (bookCard) within my grid. I was able to create an eventListener for the submit button and make my div (bookCard) appear. However, I am unable to display the input from my form on the bookCard div. How can I add to the function to make the inputs appear and display there when it is entered? Is there something I am missing within the addBookToLibrary function?
Thank you in advance for your help.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!----GitHub icon-->
<script
src="https://kit.fontawesome.com/4c536a6bd5.js"
crossorigin="anonymous"></script>
<!----------Font Below ---------------->
<link rel="stylesheet" href="https://use.typekit.net/jmq2vxa.css">
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/png" href="images/open-book.png"/>
<title>My Library</title>
</head>
<body>
<div class="head-box">
<h1>My Library</h1>
</div>
<main class ="main-container">
<div class="body-box">
<button id="addBook">Add Book</button>
</div>
<div class="books-grid" id="booksGrid">
<div class="library-container" id="library-container"></div>
</div>
</main>
<!-----Form information----->
<div class="form-popup">
<div class="form-content"
<form action="example.com/path" class="form-container" id="popUpForm">
<h3>add new book</h3>
<input class="input" type="text" id="title" placeholder="Title" required maxlength="100">
<input type="author" id="author" placeholder="Author" required maxlength="100">
<input type="number" id="pages" placeholder="Pages" required max="10000">
<div class="isRead">
<label for="readOption">Have you read it?</label>
<input type="checkbox" id="readOption" name="readOption">
</div>
<button class="btn submit" type="submit" id="submit">Submit</button>
</form>
</div>
</div>
<div id="overlay"></div>
<div id="invisibleDiv"></div>
</body>
</html>
CSS
/*CSS RESET*/
* {
margin:0;
padding:0;
}
h1 {
font-family: ohno-blazeface, sans-serif;
font-weight: 100;
font-style: normal;
font-size: 8vh;
color: #001D4A;
}
.head-box {
background-color: #9DD1F1;
display: flex;
align-items: center;
justify-content: center;
height: 20vh;
border-bottom: 2px solid #e0f3ff;
}
h2 {
font-family: poppins, sans-serif;
font-weight: 300;
font-style: normal;
font-size: 5vh;
color: #001D4A;
}
h3 {
font-family: ohno-blazeface, sans-serif;
font-weight: 100;
font-style: normal;
font-size: 4vh;
color: #001D4A;
}
button {
height: 10vh;
width: 20vh;
min-width: 20vh;
min-height: 10vh;
font-size: 3vh;
background-color: #27476E;
border-radius: 22px;
border-style: none;
font-family: poppins, sans-serif;
font-weight: 300;
font-style: normal;
color:#ffffff;
}
button:hover {
background-color: #192c44;
}
body {
min-height: 100vh;
background: linear-gradient(180deg,#d0edff,#9DD1F1) no-repeat;
}
.body-box {
margin: 3vh;
display: flex;
justify-content: center;
}
/* The pop up form - hidden by default */
.form-popup {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9;
}
.form-content {
text-align: center;
border-radius: 20px;
width: 30vh;
height: auto;
border: 3px solid #001D4A;
padding: 20px;
background-color: #9DD1F1;
gap: 10px;
}
.form-container {
min-width: 20vh;
min-height: 50vh;
}
.isRead{
display: flex;
height: 30px;
width: 100%;
margin: 2px;
align-items: center;
justify-content: center;
}
label {
font-family: poppins, sans-serif;
font-weight: 600;
font-style: normal;
font-size: 2.5vh;
}
input {
border-radius: 10px;
height: 50px;
margin: 3px;
width: 100%;
padding: 4px;
background-color: #d0edff;
border: none;
font-family: poppins, sans-serif;
font-weight: 300;
font-size: 2.5vh;
}
#submit {
margin-top: 4px;
height: 20px;
width: 100%;
border-radius: 15px;
color: #ffffff;
border: none;
}
input[type=checkbox] {
width: 20px;
margin: 10px;
}
#invisibleDiv {
position: fixed;
height: 100%;
width: 100%;
}
#overlay {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.books-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
/* BOOK CARD */
#library-container {
display: none;
height: 50vh;
width: 50vh;
border-radius: 15px;
border: 5px solid #ffffff;
background-color: #d0edff;
flex-direction: column;
justify-content: space-between;
margin: 28px;
}
JS
class book {
constructor(title, author, pages, read) {
this.title = form.title.value;
this.author = form.author.value;
this.pages = form.pages.value + 'pages';
this.read = form.read.checked;
}
}
//creates book from Book Constructor, adds to library
let myLibrary = [];
function addBookToLibrary(book) {
const bookTitle = document.getElementById('title').value;
const bookAuthor = document.getElementById('author').value;
const bookPages = document.getElementById('pages').value;
}
// User interface //
const popUpForm = document.querySelector('.form-popup');
const button = document.getElementById('addBook');
const overlay = document.getElementById('overlay');
const booksGrid = document.getElementById('booksGrid');
const bookCard = document.querySelector('.library-container');
const form = document.querySelector('.form-container');
const submitBtn = document.getElementById('submit');
// Form Pop Up function //
document.getElementById('invisibleDiv').onclick = function()
{
popUpForm.style.display = "none";
overlay.style.display = "none";
};
button.addEventListener("click", () => {
popUpForm.style.display = "block";
overlay.style.display = "block";
});
// Submit Button Event Listener (displays bookCard) //
submitBtn.addEventListener("click", () => {
bookCard.style.display = "block";
popUpForm.style.display = "none";
overlay.style.display = "none";
addBookToLibrary();
});
Check this out, it should help.
Good luck
<!-- https://codepen.io/bradtraversy/pen/OrmKWZ -->
OR
<!-- https://codepen.io/fun/pen/PPVwBY -->
This is on-going, unfinish answer. The code in the question is put into live mode for investigation purposes.
Any reader may try to edit/run to get a solution.
class book {
constructor(title, author, pages, read) {
this.title = form.title.value;
this.author = form.author.value;
this.pages = form.pages.value + 'pages';
this.read = form.read.checked;
}
}
//creates book from Book Constructor, adds to library
let myLibrary = [];
function addBookToLibrary(book) {
const bookTitle = document.getElementById('title').value;
const bookAuthor = document.getElementById('author').value;
const bookPages = document.getElementById('pages').value;
}
// User interface //
const popUpForm = document.querySelector('.form-popup');
const button = document.getElementById('addBook');
const overlay = document.getElementById('overlay');
const booksGrid = document.getElementById('booksGrid');
const bookCard = document.querySelector('.library-container');
const form = document.querySelector('.form-container');
const submitBtn = document.getElementById('submit');
// Form Pop Up function //
document.getElementById('invisibleDiv').onclick = function()
{
popUpForm.style.display = "none";
overlay.style.display = "none";
};
button.addEventListener("click", () => {
popUpForm.style.display = "block";
overlay.style.display = "block";
});
// Submit Button Event Listener (displays bookCard) //
submitBtn.addEventListener("click", () => {
bookCard.style.display = "block";
popUpForm.style.display = "none";
overlay.style.display = "none";
addBookToLibrary();
});
/*CSS RESET*/
* {
margin:0;
padding:0;
}
h1 {
font-family: ohno-blazeface, sans-serif;
font-weight: 100;
font-style: normal;
font-size: 8vh;
color: #001D4A;
}
.head-box {
background-color: #9DD1F1;
display: flex;
align-items: center;
justify-content: center;
height: 20vh;
border-bottom: 2px solid #e0f3ff;
}
h2 {
font-family: poppins, sans-serif;
font-weight: 300;
font-style: normal;
font-size: 5vh;
color: #001D4A;
}
h3 {
font-family: ohno-blazeface, sans-serif;
font-weight: 100;
font-style: normal;
font-size: 4vh;
color: #001D4A;
}
button {
height: 10vh;
width: 20vh;
min-width: 20vh;
min-height: 10vh;
font-size: 3vh;
background-color: #27476E;
border-radius: 22px;
border-style: none;
font-family: poppins, sans-serif;
font-weight: 300;
font-style: normal;
color:#ffffff;
}
button:hover {
background-color: #192c44;
}
body {
min-height: 100vh;
background: linear-gradient(180deg,#d0edff,#9DD1F1) no-repeat;
}
.body-box {
margin: 3vh;
display: flex;
justify-content: center;
}
/* The pop up form - hidden by default */
.form-popup {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9;
}
.form-content {
text-align: center;
border-radius: 20px;
width: 30vh;
height: auto;
border: 3px solid #001D4A;
padding: 20px;
background-color: #9DD1F1;
gap: 10px;
}
.form-container {
min-width: 20vh;
min-height: 50vh;
}
.isRead{
display: flex;
height: 30px;
width: 100%;
margin: 2px;
align-items: center;
justify-content: center;
}
label {
font-family: poppins, sans-serif;
font-weight: 600;
font-style: normal;
font-size: 2.5vh;
}
input {
border-radius: 10px;
height: 50px;
margin: 3px;
width: 100%;
padding: 4px;
background-color: #d0edff;
border: none;
font-family: poppins, sans-serif;
font-weight: 300;
font-size: 2.5vh;
}
#submit {
margin-top: 4px;
height: 20px;
width: 100%;
border-radius: 15px;
color: #ffffff;
border: none;
}
input[type=checkbox] {
width: 20px;
margin: 10px;
}
#invisibleDiv {
position: fixed;
height: 100%;
width: 100%;
}
#overlay {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.books-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
/* BOOK CARD */
#library-container {
display: none;
height: 50vh;
width: 50vh;
border-radius: 15px;
border: 5px solid #ffffff;
background-color: #d0edff;
flex-direction: column;
justify-content: space-between;
margin: 28px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!----GitHub icon-->
<script
src="https://kit.fontawesome.com/4c536a6bd5.js"
crossorigin="anonymous"></script>
<!----------Font Below ---------------->
<link rel="stylesheet" href="https://use.typekit.net/jmq2vxa.css">
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/png" href="images/open-book.png"/>
<title>My Library</title>
</head>
<body>
<div class="head-box">
<h1>My Library</h1>
</div>
<main class ="main-container">
<div class="body-box">
<button id="addBook">Add Book</button>
</div>
<div class="books-grid" id="booksGrid">
<div class="library-container" id="library-container"></div>
</div>
</main>
<!-----Form information----->
<div class="form-popup">
<div class="form-content"
<form action="example.com/path" class="form-container" id="popUpForm">
<h3>add new book</h3>
<input class="input" type="text" id="title" placeholder="Title" required maxlength="100">
<input type="author" id="author" placeholder="Author" required maxlength="100">
<input type="number" id="pages" placeholder="Pages" required max="10000">
<div class="isRead">
<label for="readOption">Have you read it?</label>
<input type="checkbox" id="readOption" name="readOption">
</div>
<button class="btn submit" type="submit" id="submit">Submit</button>
</form>
</div>
</div>
<div id="overlay"></div>
<div id="invisibleDiv"></div>
</body>
</html>
I am Sandhya and I am trying to change the color of the pseudo span added to the input box, on the left side when I click on calculate button in the code given below.
I was unable to add code as it's showing the error It looks like your post is mostly code; please add some more details.
*,
::after,
::before {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
}
.container {
display: flex;
width: 100%;
height: 100vh;
}
.leftcontainer {
background-color: #e9ecef;
width: 20%;
height: 100%;
}
.userprofile::after {
content: "";
display: block;
background: lightgray;
width: 100%;
height: 1px;
bottom: 0;
z-index: 1;
position: absolute;
}
.userprofile img {
width: 50px;
height: 50px;
border-radius: 50%;
}
.maincontent {
width: 100%;
padding: 15px;
}
.maincontent-header p {
text-align: justify;
font-weight: lighter;
font-weight: 200;
}
.readings {
padding-top: 15px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.readings input {
width: 100px;
height: 50px;
border: none;
padding: 15px;
font-weight: 600;
}
.readings input:focus,
button:focus {
outline: none;
}
.readings button:hover {
outline: none;
background-color: #b5e48c;
}
.reading-group p {
padding-top: 5px;
font-size: 10px;
padding-bottom: 15px;
}
.readings button {
height: 50px;
padding: 8px 8px;
background-color: lightgray;
border: none;
font-size: 15px;
font-weight: 600;
color: #14213d;
cursor: pointer;
box-sizing: border-box;
}
.systolic {
position: relative;
}
.systolic::after {
content: "";
display: block;
background: lightgray;
width: 5px;
height: 100%;
bottom: 0;
z-index: 1;
position: absolute;
}
.diastolic {
position: relative;
}
.diastolic::after {
content: "";
display: block;
background: lightgray;
width: 5px;
height: 100%;
bottom: 0;
left: 0;
z-index: 1;
position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blood Pressure Calculator</title>
</head>
<body>
<div class="container">
<div class="leftcontainer">
<div class="maincontent">
<div class="maincontent-header">
<p>Enter your blood pressure reading here :</p>
</div>
<div class="readings">
<div class="reading-group">
<span class="systolic"><input type="text" id="sys" placeholder="Systolic"></span>
<span class="diastolic"><input type="text" id="dys" placeholder="Diastolic"></span>
<button type="button" onclick="calculatebp();">Calculate</button>
<p>(mm Hg)</p>
</div>
</div>
</div>
</div>
</body>
</html>
This is the end of the code and looks forward to your support.
You if you want to change color of pseudo-elements, you can do something like make a new css for a class for a new background color, and add or remove that class using javascript
Put this is css:
.red_pseudo::after{
background: red;
}
Now I am adding the class when the function runs, hence when class is added their bg color will change to red
let diastolic_pseudo = document.getElementsByClassName('diastolic')[0]
let systolic_pseudo = document.getElementsByClassName('systolic')[0]
function calculatebp() {
alert('you clicked :)');
diastolic_pseudo.classList.add('red_pseudo')
systolic_pseudo.classList.add('red_pseudo')
}
Try here : https://codepen.io/sachuverma/pen/OJbKBbo
I'm having problems getting a game to work on my website. I had made the game using sublime text. the game is aimed at providing children with a fun way to learn and should display on a website to allow children to play the game and see their score. The game should start when the start button is clicked and should display a maths problem in the problem box and alert the user to input data using the keyboard.
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="PrimaryLearning">
<meta name="author" content="Jack McGowan">
<title>Primary Learning | Subtraction</title>
<link rel="stylesheet" href="subtraction.css">
</head>
<body>
<div>
<nav>
<p>Primary Learning | Fun Maths Games</p>
<ul>
<li>Homepage</li>
<li>Lessons
<ul>
<li>Addition</li>
<li class="current">Subtraction</li>
<li>Multiplication</li>
</ul>
<li>Overview</li>
</ul>
</nav>
</div>
<section>
<div class='start-container slide-container'>
<button id="start">START</button>
<div id="timer-slide" class='timer slide-cover slid-up'>
<p id="timer-label" class='label'>Timer</p>
<p id="timer" class='main'></p>
</div>
</div>
<div class='problem'>
<p class='label'>PROBLEM</p>
<p id="question" class='main'></p>
</div>
<div class='lights'>
<div id='green-light' class='light'></div>
<div id='red-light' class='light'></div>
</div>
<div class='score-container'>
<p class='label'>SCORE</p>
<p id="score" class='main'></p>
</div>
</section>
<p class='label'>(Use Numbers on Keyboard)</p>
</body>
<footer>
<p>Devenish College, Copyright copy 2019</p>
<div>
<p>Links to our social media accounts:<div>Click here to find us on <strong>Twitter</strong></div><div>Click here to Visit our <strong>Facebook</strong> page</div><div>Click here to visit our <strong>Youtube</strong> channel</div></p>
</div>
css
*{
margin-top: 0;
padding: 0;
}
body{
background-color: #CAEBF2;
font-size: 15px;
font-family: Verdana,Helvetica,sans-serif;
line-height: 1.5;
padding: 0;
}
nav{
width: 100%;
height: 60px;
background-color: #A9A9A9;
border-bottom: #FF3B3F 8px solid;
}
nav p{
font-family: verdana;
color: #EFEFEF;
font-size: 24px;
line-height: 55px;
float: left;
}
nav ul{
float: left;
}
nav ul li{
float: left;
list-style: none;
position: relative;
}
nav ul li a{
display: block;
font-family: verdana;
color: #EFEFEF;
font-size: 18px;
padding: 22px 14px;
text-decoration: none;
}
nav ul li ul{
display: none;
position: absolute;
background-color: #FF3B3F;
padding: 10px;
border-radius: 0px 0px 4px 4px;
}
nav ul li:hover ul{
display: block;
}
nav ul li ul li{
border-radius: 0px 0px 4px 4px;
}
nav ul li ul li a{
padding: 12px 14px;
}
nav ul li ul li a:hover{
background-color: #FF3B3F;
}
body{
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 70vh;
background: #1d1f20;
color:white;
}
div{
display: flex;
justify-content: center;
align-items: center;
flex-flow: column nowrap;
}
section{
border: 2px solid white;
}
section > div{
margin: 5px;
height: 4em;
width: 10em;
border-radius: 5px;
}
.score-container{
background: #568bbd;
}
div.problem{
background: #86b38a;
}
p.main{
font-size: 1.4rem;
margin: 5px;
}
p.label{
font-size: 0.8rem;
margin: 2px;
}
.lights{
flex-flow: row nowrap;
}
.light{
height: 20px;
width: 20px;
border-radius: 50%;
margin: 5px;
}
.light::after {
content: '';
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
z-index: 2;
}
#green-light::after{
background: #00ff00aa;
}
#red-light::after{
background: #ff0000aa;
}
.white{
background: white;
}
button{
border: 2px solid #42964c;
background-color: #86b38a;
color: white;
border-radius: 10px;
padding: 0.5em;
font-size: 1.4rem;
cursor: pointer;
box-shadow: 0 5px 0 #42964c;
transition-duration: 0.2s;
text-shadow: 2px 2px 0 #42964c;
outline: 0;
}
button:hover{
transform: translateY(5px);
box-shadow: 0 0 0 #42964c;
}
button:active{
transform: scale(0.8);
}
.slide-container{
position: relative;
overflow: hidden;
}
.slide-cover{
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
transition-duration: 0.2s;
transform: translateY(0);
}
.slid-up{
transform: translateY(-120%);
}
#timer-slide{
background: #d0782a;
}
javascript
;(() => {
var totalScore, currentAnswer, timerCount, timerFunction, flashColorTimer, inPlay;
const questionEl = document.getElementById('question');
const scoreEl = document.getElementById('score');
const redEl = document.getElementById('red-light');
const greenEl = document.getElementById('green-light');
const timerEl = document.getElementById('timer');
const slideEl = document.getElementById('timer-slide');
const timerLabelEl = document.getElementById('timer-label');
const randInt = range => Math.random() * range | 0;
const isNumber = val => !isNaN(val);
function flashColor(colorName) {
clearTimeout(flashColorTimer);
redEl.style.background = colorName === "red" ? "white" : "black";
greenEl.style.background = colorName === "green" ? "white" : "black";
flashColorTimer = setTimeout(flashColor, 500);
}
const game = ({
init() {
inPlay = false;
document.getElementById('start').addEventListener("click", this.start);
document.addEventListener('keypress', event => game.answer = event.key);
return this;
},
set score(value) { // abstract score now is how much is scored not total score
if(value !== 0){
totalScore += value;
flashColor(value < 0 ? "red" : "green");
} else { totalScore = 0 }
scoreEl.textContent = totalScore;
game.newQuestion();
},
set answer(value) {
if (inPlay && currentAnswer !== null && isNumber(value)) {
game.score = (currentAnswer === Number(value)) ? 100 : -50;
}
},
set timer(type) {
const start = type === "start";
timerCount = start ? 4 : 11; // Add one as first tick is 0ms
timerFunction = start ? game.begin : game.end;
timerLabelEl.textContent = start ? "Starting in" : "Remaining";
setTimeout(game.tick, 0);
},
tick() {
timerCount -= 1;
timerEl.textContent = timerCount;
timerCount === 0 ?
timerFunction() :
setTimeout(game.tick, 1000);
},
start() {
if (!inPlay) {
slideEl.classList.remove('slid-up');
currentAnswer = null;
game.timer = "start";
scoreEl.textContent = "0";
inPlay = true;
}
},
begin() {
game.score = 0;
game.timer = "end";
},
end() {
inPlay = false;
questionEl.textContent = "";
slideEl.classList.add('slid-up');
},
newQuestion() {
currentAnswer = randInt(10);
const r1 = randInt(10);
const r2 = randInt(10);
questionEl.textContent = `${r1} + ${r2} - ${r1 + r2 - currentAnswer}`;
},
}).init();
})();
'''
It seems that you have no script tag in your html. You need to have a script tag to call the JavaScript file. Without this, your html file doesn't know to run the script.
<script src="filename.js"></script>
The best place to put this is usually at the bottom, but inside the body tag. The html will run line by line. So if you put the script tag in the head or near the top, then the js file cannot find elements of the page because they are not loaded yet.