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>
Related
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>
const adder = document.querySelector('.adder')
const gridcont = document.querySelector('.gridbox')
const text = document.querySelector('p')
const button = document.querySelector('.button')
const popup = document.querySelector('.popup-wrapper')
const popuptext = document.querySelector('.popup-content')
const close = document.querySelector('.popup-close')
const notecard = document.querySelector('.card')
const notetext = document.querySelector('.card-text')
const pi = document.querySelector('p')
let counter = 0;
let html;
let note;
let html2
/*close.addEventListener('click', e =>{
popup.style.display ='none'
}) */
popup.addEventListener('click', e=>{
popup.style.display ='none'
})
const template = note =>{
html = `<div class="card">
<div class="card-body">
<h5 class="card-title">Note ${counter}</h5>
<p class="card-text">${note}</p>
<button class="button" type="button">view detail</button>
</div>
</div>`
gridcont.innerHTML += html
}
adder.addEventListener('submit', e =>{
e.preventDefault()
note = adder.add.value
if(note.length){
counter++
template(note)
adder.reset()
}
})
gridcont.addEventListener('click', e =>{
if(e.target.classList.contains('button')){
popup.style.display = 'block'
popuptext.innerHTML = html
}
});
.card{
margin-left: 2rem;
margin-top: 2rem;
}
.form-control{
max-width: 500px;
}
.blu{
color: blue;
}
.gridbox{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.button{
color:white;
background-color: rgb(41, 41, 241);
border-color: rgb(41, 41, 241);;
}
.card-text{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
.popup-wrapper{
display: none;
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.popup{
font-family: arial;
text-align: center;
width: 100%;
max-width: 500px;
margin: 10% auto;
padding: 20px;
background: white;
position: relative;
}
.popup-close{
position: absolute;
top: 5px;
right: 8px;
cursor: pointer;
}
.card-text-show{
overflow: unset;
text-overflow: unset;
max-width: 200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<title>Note taker</title>
</head>
<body>
<div class="head text-center">
<header>
<h1>Note taker app</h1>
<h8 class="blu">add note:</p>
</header>
<form class="adder">
<input class="form-control m-auto" type="text" name="add" placeholder="Enter your note here">
</form>
</div>
<div class="gridbox">
</div>
<div class="popup-wrapper">
<div class="popup">
<div class="popup-close">x</div>
<div class="popup-content">
<h5 class="card-title"> </h5>
<p class="card-text"> </p>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
im trying to make note taker app and each time i add the note and click the view detail button
it shows me only the content of last item added regardless of which one i press i dont know how to write with loop or forEach method i tried it but i failed can anyone explain what to do here im a begginer JS
const adder = document.querySelector('.adder')
const gridcont = document.querySelector('.gridbox')
const text = document.querySelector('p')
const button = document.querySelector('.button')
const popup = document.querySelector('.popup-wrapper')
const popuptext = document.querySelector('.popup-content')
const close = document.querySelector('.popup-close')
const notecard = document.querySelector('.card')
const notetext = document.querySelector('.card-text')
const pi = document.querySelector('p')
let counter = 0;
let html;
let note;
let html2
/*close.addEventListener('click', e =>{
popup.style.display ='none'
}) */
popup.addEventListener('click', e=>{
popup.style.display ='none'
})
const template = note =>{
html = `<div class="card">
<div class="card-body">
<h5 class="card-title">Note ${counter}</h5>
<p class="card-text">${note}</p>
<button class="button" type="button">view detail</button>
</div>
</div>`
gridcont.innerHTML += html
}
adder.addEventListener('submit', e =>{
e.preventDefault()
note = adder.add.value
if(note.length){
counter++
template(note)
adder.reset()
}
})
gridcont.addEventListener('click', e =>{
if(e.target.classList.contains('button')){
popup.style.display = 'block'
popuptext.innerHTML = html
}
});
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<title>Note taker</title>
</head>
<body>
<div class="head text-center">
<header>
<h1>Note taker app</h1>
<h8 class="blu">add note:</p>
</header>
<form class="adder">
<input class="form-control m-auto" type="text" name="add" placeholder="Enter your note here">
</form>
</div>
<div class="gridbox">
</div>
<div class="popup-wrapper">
<div class="popup">
<div class="popup-close">x</div>
<div class="popup-content">
<h5 class="card-title"> </h5>
<p class="card-text"> </p>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
I dont really know many methods so i just use one way im stuck on this project for 4 days
CSS
.card{
margin-left: 2rem;
margin-top: 2rem;
}
.form-control{
max-width: 500px;
}
.blu{
color: blue;
}
.gridbox{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.button{
color:white;
background-color: rgb(41, 41, 241);
border-color: rgb(41, 41, 241);;
}
.card-text{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
.popup-wrapper{
display: none;
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.popup{
font-family: arial;
text-align: center;
width: 100%;
max-width: 500px;
margin: 10% auto;
padding: 20px;
background: white;
position: relative;
}
.popup-close{
position: absolute;
top: 5px;
right: 8px;
cursor: pointer;
}
.card-text-show{
overflow: unset;
text-overflow: unset;
max-width: 200px;
}
On popuptext.innerHTML = html line you are making the mistake, so what is happening is you are setting the innerHTML of popuptext as variable html, so this line tries find html variable and goes to part of this code,
const template = note =>{
html = `<div class="card">
<div class="card-body">
<h5 class="card-title">Note ${counter}</h5>
<p class="card-text">${note}</p>
<button class="button" type="button">view detail</button>
</div>
</div>`
gridcont.innerHTML += html
}
and then it finds the HTML variable here, however the value of this html variable will be whatever you have set it to earlier, so if you add three notes then the value of the html variable will be innerhtml of the latest/last note that you added.
To fix that I have made a change as popuptext.innerHTML = e.target.parentElement.innerHTML, this line makes sure that whatever element you are clicking that element's associated innerhtml is added to the popup.
const adder = document.querySelector('.adder')
const gridcont = document.querySelector('.gridbox')
const text = document.querySelector('p')
const button = document.querySelector('.button')
const popup = document.querySelector('.popup-wrapper')
const popuptext = document.querySelector('.popup-content')
const close = document.querySelector('.popup-close')
const notecard = document.querySelector('.card')
const notetext = document.querySelector('.card-text')
const pi = document.querySelector('p')
let counter = 0;
let html;
let note;
let html2
/*close.addEventListener('click', e =>{
popup.style.display ='none'
}) */
popup.addEventListener('click', e=>{
popup.style.display ='none'
})
const template = note =>{
html = `<div class="card">
<div class="card-body">
<h5 class="card-title">Note ${counter}</h5>
<p class="card-text">${note.substring(0,6)}...<span class="only-popup">${note}</span></p>
<button class="button" type="button">view detail</button>
</div>
</div>`
gridcont.innerHTML += html
}
adder.addEventListener('submit', e =>{
e.preventDefault()
note = adder.add.value
if(note.length){
counter++
template(note)
adder.reset()
}
})
gridcont.addEventListener('click', e =>{
if(e.target.classList.contains('button')){
popup.style.display = 'block'
let temp = `<div class="card">
<div class="card-body">
<h5 class="card-title">${e.target.parentElement.querySelector('.card-title').innerText}</h5>
<p class="card-text">${e.target.parentElement.querySelector('.only-popup').innerText}</p>
<button class="button" type="button">view detail</button>
</div>
</div>`
popuptext.innerHTML = temp
}
});
.card{
margin-left: 2rem;
margin-top: 2rem;
}
.form-control{
max-width: 500px;
}
.blu{
color: blue;
}
.gridbox{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.button{
color:white;
background-color: rgb(41, 41, 241);
border-color: rgb(41, 41, 241);;
}
.card-text{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
.popup-wrapper{
display: none;
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.popup{
font-family: arial;
text-align: center;
width: 100%;
max-width: 500px;
margin: 10% auto;
padding: 20px;
background: white;
position: relative;
}
.popup-close{
position: absolute;
top: 5px;
right: 8px;
cursor: pointer;
}
.only-popup{
display:none;
}
.card-text-show{
overflow: unset;
text-overflow: unset;
max-width: 200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<title>Note taker</title>
</head>
<body>
<div class="head text-center">
<header>
<h1>Note taker app</h1>
<h8 class="blu">add note:</p>
</header>
<form class="adder">
<input class="form-control m-auto" type="text" name="add" placeholder="Enter your note here">
</form>
</div>
<div class="gridbox">
</div>
<div class="popup-wrapper">
<div class="popup">
<div class="popup-close">x</div>
<div class="popup-content">
<h5 class="card-title"> </h5>
<p class="card-text"> </p>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
I am trying to make a simple slide show by changing the pics in a DOM element.
Here is the HTML and the JavaScript..
The pics do NOT show up
What am I missing ?
here is the HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Slide Show</title>
<link rel="stylesheet" href="css/form.css">
</head>
<body>
<img id="pictures" style = "width:50%">
<div>
<button type="button" id="reverse">Reverse</button>
<button type="button" id="forward">Forward</button>
</div>
<script src="js/slideshow.js"></script>
</body>
</html>
Here is the JavaScript Part
function slideshow(){
'use strict';
let i = 0;
// array to hold the pictures
let pics = [];
pics [0] = cave.jpg;
pics [1] = creek.jpg;
pics [2] = entrance.jpg;
pics [3] = tree.jpg;
// making the pictures the dom element
document.getElementById('pictures').value = pics[i];
// make the buttons rotate through the pics
document.getElementById('forward').onclick = i++;
document.getElementById('reverse').onclick = i--;
}
window.onload = init;
Any pointers would be most appriciated.
Few things are missing in your solution, so feel free to run and inspect the code below. Also, put images in HTML at the beginning. JS code running is making sure they are changing the order. Only the middle one is passing through the window (#pictures-container) - this code works only for the odd number of images.
Here's the code that will work:
HTML (index.html)
<html>
<head>
<meta charset="utf-8">
<title>Slide Show</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="pictures-container">
<div id="pictures">
<img class="picture" alt="pic 1" data-id="1">
<img class="picture" alt="pic 2" data-id="2">
<img class="picture" alt="pic 3" data-id="3">
</div>
</div>
<div id="slideshow-actions">
<button type="button" id="reverse">Reverse</button>
<button type="button" id="forward">Forward</button>
</div>
<script src="js/slideshow.js"></script>
</body>
</html>
CSS (css/style.css)
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 20px;
}
#pictures-container {
width: 110px;
height: 90px;
border: 1px solid red;
border-radius: 15px;
position: relative;
overflow: hidden;
}
#pictures {
display: flex;
gap: 5px;
z-index: -1;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.picture {
width: 100px;
height: 80px;
display: block;
padding: 5px;
background-color: #dedede;
}
.picture[data-id="1"] {
background-color: yellow;
}
.picture[data-id="2"] {
background-color: magenta;
}
#slideshow-actions {
margin-top: 15px;
}
JS (js/script.js)
function registerEvents() {
let btnReverse = document.getElementById('reverse');
let btnForward = document.getElementById('forward');
btnReverse.onclick = () => {
let pictures = document.querySelectorAll('.picture');
let firstPic = pictures[0];
let parent = firstPic.parentElement;
parent.removeChild(firstPic);
parent.append(firstPic);
}
btnForward.onclick = () => {
let pictures = document.querySelectorAll('.picture');
let lastPic = pictures[pictures.length - 1];
let parent = lastPic.parentElement;
parent.removeChild(lastPic);
parent.prepend(lastPic);
}
}
registerEvents();
I created a website that saves user data on the local storage. it works well, but I wrote an if else statement to handle people signing up with existing email. I do not know why the code doesn't work. I created a variable duplicateUsers followed by the if else statement. below are the HTML CSS and javascript code.
the javascript file does the following
1) adds a user to the local storage by clicking the signup button
2) checks for incomplete details
3) checks for duplicate users and performs an action based on the response (doesn't work)
the problem here is that regardless of whether the user already exists, it still adds the user to the local storage instead of returning an alert saying the user already exists.
var signUpBtn = document.querySelector('#signUp');
var signUpOver = document.querySelector('.signup__overlay');
var signInBtn = document.querySelector('#signIn');
var signInOver = document.querySelector('.signin__overlay');
var fullname = document.querySelector('#name');
var email = document.querySelector('#email');
var password = document.querySelector('#password');
var age = document.querySelector('#age');
var occupation = document.querySelector('#occupation');
var address = document.querySelector('#address');
var signupSubmitClicked = document.querySelector('#signupClicked');
signupSubmitClicked.addEventListener('click', () => {
if (fullname.value=="" || email.value=="" || password.value=="" || age.value=="" || occupation.value=="" || address.value=="") {
alert("incomplete datails, please fill up everything")
} else {
alert("item created")
addUser(fullname, email, password, age, occupation, address);
}
});
var addUser = (fullname, email, password, age, occupation, address) => {
var users = [];
const user = {
fullname: fullname.value,
email: email.value,
password: password.value,
age: age.value,
occupation: occupation.value,
address: address.value
};
try {
var existingUsers = localStorage.getItem('userData');
users = JSON.parse(existingUsers) || [];
} catch (e) {
}
var duplicateUsers = users.filter(user => user.email === email);
if (duplicateUsers.length === 0) {
users.push(user);
localStorage.setItem('userData', JSON.stringify(users));
} else {
alert("user already exists");
}
};
/*************
signup popup
*************/
signUpBtn.addEventListener('click', () => {
signUpOver.style.display = 'block';
});
signUpOver.addEventListener('click', () => {
if(event.target == signUpOver){
signUpOver.style.display = "none";
}
});
/*************
signup popup
*************/
/*************
signin popup
*************/
signInBtn.addEventListener('click', () => {
signInOver.style.display = 'block';
});
signInOver.addEventListener('click', () => {
if(event.target == signInOver){
signInOver.style.display = "none";
}
});
/*************
signin popup
*************/
/** the end */
body {
width: 100%;
margin: 0;
background-color: #F8F9F9;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
align-content: center;
}
#mainPage,
#userPage {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
align-content: center;
}
#userPage {
display: none;
}
/********************
overlay
********************/
.signup__overlay {
position: fixed;
display: none;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(0,0,0,0.8);
z-index: 1;
}
.signup__content{
position: relative;
width: 100%;
max-width: 520px;
background-color: #ffffff;
opacity: 1;
margin: 64px auto;
padding: 20px;
}
.signin__overlay {
position: fixed;
display: none;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(0,0,0,0.8);
z-index: 1;
}
.signin__content{
position: relative;
width: 100%;
max-width: 520px;
background-color: #ffffff;
opacity: 1;
margin: 64px auto;
padding: 20px;
}
/********************
overlay ending
********************/
.headerMain {
background-color: #000;
color: #fff;
width: 100%;
margin-bottom: 50px;
height: 50px;
display: flex;
flex-direction: row;
align-items: center;
align-content: center;
justify-content: flex-start;
}
.headerUser {
background-color: #000;
color: #fff;
width: 100%;
margin-bottom: 50px;
height: 50px;
display: flex;
flex-direction: row;
align-items: center;
align-content: center;
justify-content: flex-start;
}
.upButton {
margin-bottom: 20px;
}
.upButton, .inButton {
padding-top: 15px;
padding-bottom: 15px;
cursor: pointer;
width: 100%;
max-width: 200px;
background-color: #239B56;
border: #239B56;
color: snow;
}
label {
padding-top: 20px;
}
label,
input {
width: 100%;
}
<!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">
<title>User system</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="mainPage">
<div class="signup__overlay">
<div class="signup__content">
<form>
<label for="name">Full Name</label>
<input required type="text" id="name" name="name">
<label for="email">Email</label>
<input required type="text" id="email" name="email">
<label for="password">Password</label>
<input required type="password" id="password" name="password">
<label for="age">Age</label>
<input required type="text" id="age" name="age">
<label for="occupation">Occupation</label>
<input required type="text" id="occupation" name="occupation">
<label for="address">Address</label>
<input required type="text" id="address" name="address">
<input type="submit" id="signupClicked">
</form>
</div>
</div>
<div class="signin__overlay">
<div class="signin__content">
<form>
<label for="email">Email</label>
<input required type="text" id="Email" name="email">
<label for="email">Password</label>
<input required type="Password" id="Password" name="Password">
<input type="submit" id="signinClicked">
</form>
</div>
</div>
<header class="headerMain">User System</header>
<section>
<button class="upButton" id="signUp">Sign Up</button>
<button class="inButton" id="signIn">Sign In</button>
</section>
</div>
<div id="userPage">
<header class="headerUser">User System</header>
<section>
</section>
</div>
<script src="js/index.js"></script>
</body>
</html>
I'm simply trying to display a grid of boxes with each box having information about a dog breed. My problem is this: There appears to be a difference in behavior when I declare a style in-line vs the same style in a class. I'm confused why there is a difference, when there shouldn't be any as far as I know.
Here is the code behaving properly: http://imgur.com/a/z2b5c
This occurs with the code below. The code to note are the dogDisplay class declared in style, and the div of class dogDisplay in the body. The div has an in-line style="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">
<link href="bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.dogDisplay {
display: inline-block;
width: 300px;
height: 300px;
margin: 10px;
background-color: grey;
}
.dogName {
font-size: 20px;
text-align: center;
}
.img {
width: 200px;
height: 200px;
display: block;
margin-left: auto;
margin-right: auto;
}
.content {
background-color: red;
}
</style>
</head>
<script>
//This just loads the dog information from a JSON file
var dogInfo = [];
function displayInfo(dogBreeds) {
$("#container").append("<div class='dogDisplay'></div>");
}
window.onload = function() {
$.getJSON("breeds.json", function(json) {
var i;
console.log(typeof(json.dogBreeds));
dogInfo = json.dogBreeds;
displayInfo(json.dogBreeds);
})
}
</script>
<body>
<div class="well" style="height:300px"></div>
<div id="container" class="container" style="width:100%;background-color:lightblue;border:black 2px solid;">
<div class="dogDisplay" style="position:absolute">
<div class="content">
<p class="dogName">Dog Name</p>
<img class="img" src="images/place-holder.jpg" alt="Place-holder">
</div>
</div>
</div>
</body>
HOWEVER. When moving style="position:absolute" into the dogDisplay class, this is the new behavior: http://imgur.com/a/sv3Oh
<!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">
<link href="bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.dogDisplay {
display: inline-block;
width: 300px;
height: 300px;
margin: 10px;
background-color: grey;
position: absolute;
}
.dogName {
font-size: 20px;
text-align: center;
}
.img {
width: 200px;
height: 200px;
display: block;
margin-left: auto;
margin-right: auto;
}
.content {
background-color: red;
}
</style>
</head>
<script>
var dogInfo = [];
function displayInfo(dogBreeds) {
$("#container").append("<div class='dogDisplay'></div>");
}
window.onload = function() {
$.getJSON("breeds.json", function(json) {
var i;
console.log(typeof(json.dogBreeds));
dogInfo = json.dogBreeds;
displayInfo(json.dogBreeds);
})
}
</script>
<body>
<div class="well" style="height:300px"></div>
<div id="container" class="container" style="width:100%;background-color:lightblue;border:black 2px solid;">
<div class="dogDisplay">
<div class="content">
<p class="dogName">Dog Name</p>
<img class="img" src="images/place-holder.jpg" alt="Place-holder">
</div>
</div>
</div>
</body>
Why is there a difference? Thank you!
In your first example, this line:
$("#container").append("<div class='dogDisplay'></div>");
Conflicts with the starting layout:
<div class="dogDisplay" style="position:absolute">
Meaning only the initial .dogDisplay will have the absolute positioning. In the second example, all of them will have the absolute positioning.