16 x 16 grid does not display correctly - javascript

beginner here.
Since days I try to build an etch-a-sketch board with 32 boxes, 16 columns and 16 rows. The only thing I end up with is 32 boxes in a row or in a column. I don't know where the error is, in the script, css or the html so I included all three in the post.
Any help is appreciated!
Here is the code:
document.addEventListener('DOMContentLoaded', () => {
const grid = document.querySelector('.grid');
//const message = document.querySelector('#message');
//MAKE THE BOARD
function makeBoard() {
for (let i = 0; i <= 16; i++ ) {
const squareCol = document.createElement('div');
squareCol.className = 'squareCol';
squareCol.setAttribute('data-id',i)
grid.appendChild(squareCol);
}for(let j = 0; j <= 16; j++){
const squareRow = document.createElement('div');
squareRow.className = 'squareRow';
squareRow.setAttribute('data-id',j)
grid.appendChild(squareRow);
}
}
makeBoard();
})
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 618px;
width: 618px;
}
.grid {
display: flex;
justify-content: center;
align-items: center;
}
.squareRow, .squareCol {
display: flex;
justify-content: center;
align-items: center;
height: 10px;
width: 10px;
border: solid black 1px;
}
<!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>Etch-a-Sketch</title>
<script src="script.js" defer></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<span class="grid"></span>
</div>
<div id="message"></div>
</body>
</html>

Primarily you need to wrap the grid columns. See the additional CSS I've applied to the container and items inside.
As epascarello points out, all flex children should be columns. The container is the row. Either that or you have to restructure your script to actually create multiple flex rows, with individual containers.
document.addEventListener('DOMContentLoaded', () => {
const grid = document.querySelector('.grid');
//const message = document.querySelector('#message');
//MAKE THE BOARD
function makeBoard() {
for (let i = 0; i <= 16; i++) {
const squareCol = document.createElement('div');
squareCol.className = 'squareCol';
squareCol.setAttribute('data-id', i)
grid.appendChild(squareCol);
}
for (let j = 0; j <= 16; j++) {
const squareRow = document.createElement('div');
squareRow.className = 'squareRow';
squareRow.setAttribute('data-id', j)
grid.appendChild(squareRow);
}
}
makeBoard();
})
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 618px;
width: 618px;
}
.grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.squareRow,
.squareCol {
display: flex;
flex: 1 1 6.25%;
justify-content: center;
align-items: center;
height: 10px;
border: solid black 1px;
}
<!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>Etch-a-Sketch</title>
<script src="script.js" defer></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<span class="grid"></span>
</div>
<div id="message"></div>
</body>
</html>

I put a div (.parent) container inside your wrapped container. the parent class containes the grid template.
const grid = document.getElementById('c');
for (let i = 0; i < 32; i++) {
const squareCol = document.createElement('div');
squareCol.className = 'squareCol';
squareCol.setAttribute('data-id',i)
squareCol.innerHTML = (i + 1)
grid.appendChild(squareCol);
}
body {
margin: 0;
padding: 0;
}
.parent {
display: grid;
grid-template-columns: repeat(16, 1fr);
grid-template-rows: repeat(16, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 618px;
width: 618px;
}
.squareCol {
}
.squareRow, .squareCol {
justify-content: center;
align-items: center;
height: 20px;
width: 20px;
border: solid black 1px;
}
<body>
<div class="container">
<div id="c" class="parent"></div>
</div>
<div id="message"></div>
</body>

Related

Fetch and display API information using Javascript

fetch("https://wptavern.com/wp-json/wp/v2/posts")
.then((response) => {
if (response.ok) {
return response.json();
} else {
throw new Error("NETWORK RESPONSE ERROR");
}
})
.then((data) => {
console.log(data);
displayDetails(data);
})
.catch((error) => console.error("FETCH ERROR:", error));
//*function displayDetails(data) {
const informations = data[0]; //create a variable and store the array you need to access
const informationsDiv = document.getElementById("informations"); //create a vaiable with a div to display the data
const informationsTitle = informations.title.rendered; //create a variable and access the specific data, title in this case
const heading = document.createElement("h1"); //create a heading variable h1
heading.innerHTML = informationsTitle;
informationsDiv.appendChild(heading);
const informationsImage = document.createElement("img"); //create a variable for the image
informationsImage.src = informations.episode_featured_image; //specify the image source inside the array
informationsDiv.appendChild(informationsImage);
const informationsDate = informations.date; //create a variable and access the date
const heading1 = document.createElement("p"); //create a variable to use in the DOM
heading1.innerHTML = informationsDate;
informationsDiv.appendChild(heading1); //append the data
//}
function displayDetails(data) {
let informationsDiv = document.getElementById("informations");
for(var i = 0; i < data.length; i++) {
let informations = data[i];
let informationsTitle = informations.title.rendered;
let heading = document.createElement("h1");
heading.innerHTML = informationsTitle;
informationsDiv.appendChild(heading);
let informationsImage = document.createElement("img");
informationsImage.src = informations.episode_featured_image;
informationsDiv.appendChild(informationsImage);
let informationsDate = informations.date;
let heading1 = document.createElement("p");
heading1.innerHTML = informationsDate;
informationsDiv.appendChild(heading1);
}
}
.swiper {
margin: auto;
padding: auto;
width:100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size-adjust: 15px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
background-color: #c2bdd1;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
html,body {
height:100%;
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: auto;
padding: 0;
}
#informations{
max-width: 700px;
text-align: center;
padding: 30px 30px 12px 30px;
color: rgb(252, 252, 252);
background-color: #7766d7;
border: 4px solid #9387f2;
border-radius: 5px;
}
<!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>Document</title>
</head>
<body>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.css" />
<link rel="stylesheet" href="style.css" />
<!--Script-->
<script src="script/script.js"></script>
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper ">
<div class="swiper-slide">
<div id="informations"></div>
</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
allowTouchMove: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
keyboard: {
enabled: true,
}
});
</script>
</body>
</html>
I am building a carousel where on every page I want to display information (title, image, date) taken from this API: https://wptavern.com/wp-json/wp/v2/posts
So far I managed to write this script:
fetch("https://wptavern.com/wp-json/wp/v2/posts")
.then((response) => {
if (response.ok) {
return response.json();
} else {
throw new Error("NETWORK RESPONSE ERROR");
}
}).then((data) => {
console.log(data);
displayDetails(data);
}).catch((error) => console.error("FETCH ERROR:", error));
function displayDetails(data) {
const informations = data[0];
const informationsDiv = document.getElementById("informations");
const informationsTitle = informations.title.rendered;
const heading = document.createElement("h1");
heading.innerHTML = informationsTitle;
informationsDiv.appendChild(heading);
const informationsImage = document.createElement("img");
informationsImage.src = informations.episode_featured_image;
informationsDiv.appendChild(informationsImage);
const informationsDate = informations.date;
const heading1 = document.createElement("p");
heading1.innerHTML = informationsDate;
informationsDiv.appendChild(heading1);
}
The problem is, this works only on the first slide. If I try to call the same function for slide n2 and change all the variables and the start of the array, from data[0] to data[1], then slide n1 doesn't showcase info anymore, but slide n2 does!
I also added a picture of HTM because I don't know how to format code properly and stack overflow is not allowing me to post the question.
The end result should display all the recent articles provided by the API.
Thank you for your time.
I've updated your code, this should work:
fetch("https://wptavern.com/wp-json/wp/v2/posts")
.then((response) => {
if (response.ok) {
return response.json();
} else {
throw new Error("NETWORK RESPONSE ERROR");
}
})
.then((data) => {
console.log(data);
displayDetails(data);
})
.catch((error) => console.error("FETCH ERROR:", error));
function displayDetails(data) {
let informationsDiv = document.getElementById("slider");
for(var i = 0; i < data.length; i++) {
var slide = document.createElement("div");
slide.className = "swiper-slide";
var slideContent = document.createElement("div");
slideContent.className = "informations";
let informations = data[i];
let informationsTitle = informations.title.rendered;
let heading = document.createElement("h1");
heading.innerHTML = informationsTitle;
slideContent.appendChild(heading);
let informationsImage = document.createElement("img");
informationsImage.src = informations.episode_featured_image;
slideContent.appendChild(informationsImage);
let informationsDate = informations.date;
let heading1 = document.createElement("p");
heading1.innerHTML = informationsDate;
slideContent.appendChild(heading1);
slide.appendChild(slideContent);
informationsDiv.appendChild(slide);
}
}
.swiper {
margin: auto;
padding: auto;
width:100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size-adjust: 15px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
background-color: #c2bdd1;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
html,body {
height:100%;
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: auto;
padding: 0;
}
.informations{
max-width: 700px;
text-align: center;
padding: 30px 30px 12px 30px;
color: rgb(252, 252, 252);
background-color: #7766d7;
border: 4px solid #9387f2;
border-radius: 5px;
}
<!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>Document</title>
</head>
<body>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.css" />
<link rel="stylesheet" href="style.css" />
<!--Script-->
<script src="script/script.js"></script>
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper" id="slider">
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
allowTouchMove: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
keyboard: {
enabled: true,
}
});
</script>
</body>
</html>
It basically creates a new swiper-slide for each result of the API, and appends it to your slider.

Buttons not working cannot read properties of null (reading addEventListeners)

I created a 16 x 16 grid where I can etch a sketch on that grid. It's working well. However, the problem now is that, I can't seem to make the buttons to work. I want that if I click on the buttons, it's going to change the colors so I can sketch using other colors, instead, it can not read the eventListener.
--------- Below is my code :
let container = document.querySelector('.container');
let rows = document.getElementsByClassName('gridRow');
let columns = document.getElementsByClassName('gridColumn');
const blue = document.getElementsByClassName('blue');
const eraser = document.getElementsByClassName('eraser');
const black = document.getElementsByClassName('black');
let reset = document.getElementById('reset');
function createGrid(number) {
makeRow(number);
makeColumn(number);
changeColours();
}
function makeRow(numberOfRow) {
for (let i = 0; i <numberOfRow; i++) {
let row = document.createElement('div');
container.appendChild(row);
row.classList.add('gridRow');
}
}
function makeColumn(numberOfColumn, selection) {
for ( let i = 0; i < rows.length; i++) {
for ( let j = 0; j < numberOfColumn; j++) {
let column = document.createElement('div');
if (selection == 'blue') {
column.addEventListener('mouseenter', function() {
column.classList.add('blue');
})
} else if (selection == 'eraser') {
column.addEventListener('mouseenter', function() {
column.classList.add('eraser');
})
} else if (selection == 'black') {
column.addEventListener('mouseenter', function() {
column.classList.add('black');
})
} else {
column.addEventListener('mouseenter', function() {
column.classList.add('colored');
})
}
// column.addEventListener('mouseleave', () => {
// column.classList.remove('colored');
// })
rows[j].appendChild(column);
column.classList.add('gridColumn');
}
}
}
blue.addEventListener('click', function() {
makeColumn(number, 'blue');
})
eraser.addEventListener('click', function() {
makeColumn(number, 'white');
})
black.addEventListener('click', function() {
makeColumn(number, 'black');
})
createGrid(16);
#importurl('https://fonts.googleapis.com/css2family=Asap:wght#400;600;700&display=swap');
body {
display: flex;
height: 100%;
width: 100%;
flex-direction: column;
background-color: beige;
font-family: Asap, sans-serif;
margin: 0;
padding: 0;
justify-content: center;
align-content: center;
align-items: center;
}
.header {
display: flex;
flex: 1;
justify-content: center;
}
#setGridSize {
display: inline-flex;
justify-content: center;
flex: 1;
gap: 12px;
}
#guide {
text-align: center;
margin: 1px;
font-family: Asap, sans-serif;
color: red;
font-size: 13px;;
}
.container {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
border: 1px solid black;
width: 550px;
height: 550px;
}
.gridColumn {
display: inline-flex;
border: 1px solid beige;
margin: -1px 0;
width: 30px;
height: 30px;
}
.colored{
background: red;
}
.buttons {
display: flex;
flex: 1;
gap: 20px;
margin: 10px;
}
.blue {
background: blue;
}
.eraser {
background: white;
}
.black {
background: black;
}
<!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>DOM Manipulation and Events</title>
<script src="javascript.js" defer></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="header"> Let's sketch ! </h1>
<div id="setGridSize">
<p> Grid size </p> <input type="text" placeholder="Size of Board" class="size-box">
<button id="submit" > Submit </button>
</div>
<p id="guide"> Enter a number between 2 to 99</p>
<div class="container"></div>
<div class="buttons">
<button class="blue"> Blue </button>
<button class="eraser" > Eraser </button>
<button class="black"> Black </button>
<button class="rainbow" > Rainbow </button>
<button class="reset" > Reset</button>
</div>
</body>
</html>
When you use
document.getElementsByClassName('blue')
the result is an Array-like object (HTMLCollection).
So just use
blue[0].addEventListener('click', function() {
makeColumn(number, 'blue');
})

How can I make a different text based on the user's choices?

I'm making a Tic Tac Toe game where the user can choose if they play X or O. How do I change the onclick function to display X if they chose X, or O if they chose O?
My code right now doesn't work since it only displays X even if I selected O from the two buttons.
Note: The other boxes don't have a function yet. To see the problem I'm talking about, click the first box on the upper left.
#import url('https://fonts.googleapis.com/css2?family=Koulen&family=VT323&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Lobster&family=Signika+Negative:wght#400;500;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
text-align: center;
background-color: #1C2C54;
color: #D175B7;
font-family: 'Signika Negative', sans-serif;
}
main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
gap: 20px;
margin: auto;
position: absolute;
top: 50%;
bottom: 50%;
left: 50%;
right: 50%;
}
h1 {
font-family: 'VT323', monospace;
font-size: 3rem;
}
.text-container {
display: flex;
flex-direction: column;
width: 300px;
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #4BC3B5;
padding: 20px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 30px;
font-size: 30px;
text-align: center;
cursor: pointer;
}
.button-container {
display: flex;
flex-direction: row;
gap: 10px;
}
button {
padding: 3px 20px;
background-color: #4BC3B5;
color: white;
border: 3px solid #34a396;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #2c8d82;
border: 3px solid #124640;
}
button:focus {
background-color: #2c8d82;
border: 3px solid #124640;
}
.score-container {
display: flex;
flex-direction: column;
gap: 10px;
width: 300px;
justify-content: center;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<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>Tic Tac Toe</title>
</head>
<body>
<main>
<div class="text-container">
<h1>Tic Tac Toe</h1>
</div>
<div class="grid-container">
<div class="grid-item" id="grid1" onclick="clickBox1()"></div>
<div class="grid-item" id="grid2" onclick="clickBox2()" ></div>
<div class="grid-item" id="grid3" onclick="clickBox3()"></div>
<div class="grid-item" id="grid4" onclick="clickBox4()"></div>
<div class="grid-item" id="grid5" onclick="clickBox5()"></div>
<div class="grid-item" id="grid6" onclick="clickBox6()"></div>
<div class="grid-item" id="grid7" onclick="clickBox7()"></div>
<div class="grid-item" id="grid8" onclick="clickBox8()"></div>
<div class="grid-item" id="grid9" onclick="clickBox9()"></div>
</div>
<div class="button-container">
<button id="x-el" onclick="selectX()">X</button>
<button id="o-el" onclick="selectO()">O</button>
</div>
<div class="score-container">
<p id="playerscore">Player Score:</p>
<p id="compscore">Computer Score:</p>
</div>
</main>
<script>
// Grab the elements
let xBtn = document.getElementById('x-el')
let oBtn = document.getElementById('o-el')
let playerScoreDisplay = document.getElementById('playerscore')
let compScoreDisplay = document.getElementById('compscore')
let x = 'X'
let o = 'O'
// Grabbing individual boxes
let box1 = document.getElementById('grid1');
let box2 = document.getElementById('grid2');
let box3 = document.getElementById('grid3');
let box4 = document.getElementById('grid4');
let box5 = document.getElementById('grid5');
let box6 = document.getElementById('grid6');
let box7 = document.getElementById('grid7');
let box8 = document.getElementById('grid8');
let box9 = document.getElementById('grid9');
/*
let boxes = document.querySelectorAll("div.grid-item")
*/
// Selecting x or o
function selectX() {
alert('You selected X!');
}
function selectO() {
alert('You selected O!');
}
// Function for each box
function clickBox1() {
if (selectX) {
box1.innerHTML = x;
} else if (selectO) {
box1.innerHTML = o;
}
}
</script>
</body>
</html>
You would probably want to create a variable to save the user's choice and set it depending on whether or not they clicked on "x-el" or "o-el" like so below.
Also, loop through the boxes instead of creating a function for every single box.
// user's choice
let myChoice
// Selecting x or o
function selectX() {
alert('You selected X!');
myChoice='X'
}
function selectO() {
alert('You selected O!');
myChoice='O'
}
// Function for each box
function clickBox1() {
if (myChoice==='X') {
box1.innerHTML = x;
} else if (myChoice==='O') {
box1.innerHTML = o;
}
}

How to calculate textarea given values in JS

I'm trying to calculate the values that are in my input boxes that's in the middle of the webpage. I thought if i add the class names references in JS within a function that i would get the results or atleast no error messages but now it says "calculate is not defined
at addTotal
at HTMLButtonElement.onclick"
What i am trying to do is Multiply the values by the numbers that's assigns to the boxes and then display the total below the button.
<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">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<textarea name="Buy" id="advertise" cols="55" rows="50"></textarea>
<div id="textFields">
<textarea name="" class="center calculate" cols="100" rows="5"></textarea>
<textarea name="" class="center calculate2" cols="100" rows="5"></textarea>
<textarea name="" class="center calculate3" cols="100" rows="5"></textarea>
<div class="buttonClass">
<button class="addTotalButton" onclick="addTotal()">Add Total</button>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
body {
background-color: #434343;
}
#textFields {
display: flex;
flex-direction: column;
margin: 0 auto;
}
.center {
display: block;
text-align: center;
margin-top: 100px;
}
.wrapper {
display: flex;
width: 100%;
height: 100%;
}
/* #inputButton {
display: flex;
flex-direction: column;
background-color: #011526;
color: aliceblue;
text-align: center;
line-height: 30px;
padding: 10px;
flex-basis: 50%;
} */
.buttonClass {
display: flex;
justify-content: center;
}
.addTotalButton {
margin-top: 50px;
}
let addTotal = ()=> {
let answerElement = document.getElementsByClassName("calculate")
answerElement.innerHTML = parseInt(addTotal) * 20;
let quoteElement = document.getElementsByClassName("calculate2")
quoteElement.innerHTML = parseInt(addTotal) * 30;
let timesElement = document.getElementsByClassName("calculate3")
timesElement.innerHTML = parseInt(addTotal) * 50;
return calculate + calculate2 + calculate3;
}
I think you can change several point in your code
use input with type number instead of textarea (you will be able to use element.value to get the value)
document.getElementsByClassName return an array if you just want one element you can access it by index or use querySelector that return you the first element match selector
your function add Total do nothing if you want to set the value of main text area you can use element.value
let addTotal = ()=> {
let answerElement = document.querySelector(".calculate");
let calculate = parseInt(answerElement.value) * 20;
let quoteElement = document.querySelector(".calculate2");
let calculate2 = parseInt(quoteElement.value) * 20;
let timesElement = document.querySelector(".calculate2");
let calculate3 = parseInt(timesElement.value) * 20;
console.log(calculate + calculate2 + calculate3);
document.getElementById('advertise').value = calculate + calculate2 + calculate3;
}
body {
background-color: #434343;
}
#textFields {
display: flex;
flex-direction: column;
margin: 0 auto;
}
.center {
display: block;
text-align: center;
margin-top: 100px;
}
.wrapper {
display: flex;
width: 100%;
height: 100%;
}
/* #inputButton {
display: flex;
flex-direction: column;
background-color: #011526;
color: aliceblue;
text-align: center;
line-height: 30px;
padding: 10px;
flex-basis: 50%;
} */
.buttonClass {
display: flex;
justify-content: center;
}
.addTotalButton {
margin-top: 50px;
}
<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">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<textarea name="Buy" id="advertise" cols="55" rows="50"></textarea>
<div id="textFields">
<input type="number" class="center calculate"/>
<input type="number" class="center calculate2"/>
<input type="number" class="center calculate3"/>
<div class="buttonClass">
<button class="addTotalButton" onclick="addTotal()">Add Total</button>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>

Code working in Codepen but not in browser

I have made a splash screen that works as intended, and can be seen on this codepen:
https://codepen.io/dbake3452/pen/VwmeoGa
However when I copied that code onto my project, the splash screen no longer goes away after 3 seconds. I'm thinking there is conflicting code somewhere, but I have not been able to spot it
My code:
'/ ///HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" `enter code here`integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
<link rel="stylesheet" href="css/kayportfolio.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#splidejs/splide#latest/dist/css/splide.min.css">
</head>
<body>
<div id="container">
<header>
<nav>
<img id="bun" src="images/kay logo.png">
</nav>
</header>
<div class="splash">
<img class="fade-in" src="images/pippinhop.png">
</div>
<main>
<i class="fas fa-caret-up"></i>
<img id="myth" src="images/mythologyproj.png">
<i class="fas fa-caret-down"></i>
<img id="fingerguns" src="images/fingerguns.png">
</main>
<footer>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/#splidejs/splide#latest/dist/js/splide.min.js"></script>
<script src="js/kayportfolio.js" async defer></script>
</body>
</html>
///SASS
$purple: #a9aaff;
body {
margin: 0;
padding: 0;
}
#container {
height: 100vh;
display: grid;
grid-template-rows: 25vh 1fr 25vh;
header {
grid-area: 1 / 1 / 1 / -1;
display: flex;
align-items: center;
justify-content: center;
img {
width: 400px;
}
}
.splash {
width: 100%;
height: 100vh;
background-color: $purple;
position: fixed;
top: 0;
left: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
img {
width: 12.5%;
}
}
.display-none {
display: none;
};
#keyframes fadeIn{
to {
opacity: 1;
}
}
.fade-in {
opacity: 0;
animation: fadeIn 1s ease-in forwards;
}
main {
grid-area: 2 / 1 / 2 / -1;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
z-index: 1;
i {
font-size: 60px;
margin: 20px;
color: $purple;
}
i:hover {
cursor: pointer;
}
#myth {
width: 800px;
}
#myth:hover {
opacity: .5;
cursor: pointer;
}
#fingerguns {
width: 400px;
position: fixed;
left: 5%;
top: 49%;
}
}
footer {
grid-area: 3 / 1 / 3 / -1;
}
}
/// JS
const splash = document.querySelector('.splash');
document.addEventListener('DOMContentLoaded', (e) => {
setTimeout(() => {
splash.classList.add('display-none')
}, 3000);
});
Sass has to be compiled to CSS for your browser to understand it, in VS code, there are handy extensions to require this, for example live sass compiler.
Click the watch sass button on the bottom (or compile in any way you want).
You can see that the compiler added the CSS version to the project.
Now just include the CSS file in your html, for example (if CSS file is in the same folder):
<link rel="stylesheet" href="./style.css" >
Don't forget to put your JS code in <script></script> tags as well, or create a separate file and include it.
<script>
const splash = document.querySelector('.splash');
document.addEventListener('DOMContentLoaded', (e) => {
setTimeout(() => {
splash.classList.add('display-none')
}, 3000);
});
</script>

Categories