Adding same text to multiple divs of different sizes - javascript

Currently, I can add text to a single div (currently, #adXL) using text and file inputs. How can I add that same text and files (from those same text and file inputs) to multiple divs (#adL, #adM, #adS)?
I would also like to be able to add many more divs that receive the same text and file inputs, as well.
Here is my current code:
document.getElementById('getval').addEventListener('change', readURL, true);
function readURL(){
var file = document.getElementById("getval").files[0];
var reader = new FileReader();
reader.onloadend = function(){
document.getElementById('adXL').style.backgroundImage = "url(" + reader.result + ")";
}
if(file){
reader.readAsDataURL(file);
}else{
}
}
document.getElementById('getval2').addEventListener('change', readURL2, true);
function readURL2(){
var file2 = document.getElementById("getval2").files[0];
var reader2 = new FileReader();
reader2.onloadend = function(){
document.getElementById('logo').style.backgroundImage = "url(" + reader2.result + ")";
}
if(file2){
reader2.readAsDataURL(file2);
}else{
}
}
$(document).ready(function(){
var div1 = $('#header')[0];
$('#text1').bind('keyup change', function() {
div1.innerHTML = this.value;
});
var div2 = $('#subHeader')[0];
$('#text2').bind('keyup change', function() {
div2.innerHTML = this.value;
});
var div3 = $('#button')[0];
$('#text3').bind('keyup change', function() {
div3.innerHTML = this.value;
if(this.value.length > 0) {
$('#button').css('display', 'block')
} else {
$('#button').css('display', 'none')
}
});
});
h2 {
font-size: 14px;
}
#adXL{
background-image:url('');
background-size:cover;
background-position: center;
background-repeat: no-repeat;
min-height: 300px;
min-width: 0;
border: 1px solid #ddd;
display: flex;
flex-direction: column;
margin: 20px 0px;
background-color: transparent;
padding: 30px;
z-index: 10000;
position: relative;
}
#logo{
background-image:url('');
background-size: auto 100%;
background-position: center left;
background-repeat: no-repeat;
min-width: 0;
width: 100px;
min-height: 50px;
display: flex;
margin: 30px 0 0 0;
}
#adCopy {
display: flex;
flex: 1;
flex-wrap: wrap;
flex-direction: column;
}
#adButtonAndLogo {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
}
#header {
font-size: 52px;
color: black;
font-family: "helevtica", sans-serif;
font-weight: 600;
margin: 0px;
line-height: 110%;
}
#subHeader {
font-size: 24px;
color: black;
font-family: "helevtica", sans-serif;
font-weight: 400;
margin: 10px 0;
display: block;
margin-right: auto;
}
#button {
font-size: 18px;
color: white;
font-family: "helevtica", sans-serif;
font-weight: 300;
padding: 16px 24px;
border: 0px solid #fff;
border-radius: 3px;
text-align: center;
display: none;
background-color: #1D41FF;
letter-spacing: 1px;
margin: 60px 0 0 0;
box-shadow: 0 2px 7px rgba(0,0,0,0.4);
}
#adL {
?
}
#adM {
?
}
#adS {
?
}
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Background Image</h2>
<input type='file' id='getval' name="background-image" />
<h2>Header</h2><input id="text1" class="textInput">
<h2>Subheader</h2><input id="text2" class="textInput">
<h2>Button Text</h2>
<input id="text3" class="textInput">
<h2>Logo Image Asset</h2>
<input type='file' id='getval2' name="background-image" />
<div id='adXL' class="bg-img">
<div id="adCopy">
<div id="header" class="changeMe"></div>
<div id="subHeader" class="changeMe"></div>
</div>
<div id="adButtonAndLogo">
<div id="logo"></div>
<div id="button"></div>
</div>
</div>
<div id='adL' class="bg-img">
<div id="adCopy">
<div id="header" class="changeMe"></div>
<div id="subHeader" class="changeMe"></div>
</div>
<div id="adButtonAndLogo">
<div id="logo"></div>
<div id="button"></div>
</div>
</div>
<div id='adM' class="bg-img">
<div id="adCopy">
<div id="header" class="changeMe"></div>
<div id="subHeader" class="changeMe"></div>
</div>
<div id="adButtonAndLogo">
<div id="logo"></div>
<div id="button"></div>
</div>
</div>
<div id='adS' class="bg-img">
<div id="adCopy">
<div id="header" class="changeMe"></div>
<div id="subHeader" class="changeMe"></div>
</div>
<div id="adButtonAndLogo">
<div id="logo"></div>
<div id="button"></div>
</div>
</div>


Make an array of the elements you want to add the styles to, the elements you want to add the text to, the elements you want to listen for text changes, and the elements you want to listen for file changes. Then, just iterate over them:
const textInputs = document.querySelectorAll('input:not([type="file"])');
const elementsToChangeOnTextInput = [...document.querySelectorAll('.changeMe')];
const fileInputs = document.querySelectorAll('input[type="file"]');
const elementsToChangeOnFileInput = ['#adXL', '#adL', '#adM', '#adS']
.map(selector => document.querySelector);
textInputs.forEach((textInput) => {
textInput.addEventListener('keyup', () => {
const newValue = textInput.value;
elementsToChangeOnTextInput
.forEach(element => element.textContent = newValue);
});
});
fileInputs.forEach((fileInput) => {
const file = fileInput.files[0];
if (!file) return;
const reader = new FileReader();
reader.addEventListener('loadend', function(){
const imgCSSStr = `url(${reader.result})`;
elementsToChangeOnFileInput.forEach(element => {
element.style.backgroundImage = imgCSSStr;
});
});
reader.readAsDataURL(file);
});
h2 {
font-size: 14px;
}
#adXL{
background-image:url('');
background-size:cover;
background-position: center;
background-repeat: no-repeat;
min-height: 300px;
min-width: 0;
border: 1px solid #ddd;
display: flex;
flex-direction: column;
margin: 20px 0px;
background-color: transparent;
padding: 30px;
z-index: 10000;
position: relative;
}
#logo{
background-image:url('');
background-size: auto 100%;
background-position: center left;
background-repeat: no-repeat;
min-width: 0;
width: 100px;
min-height: 50px;
display: flex;
margin: 30px 0 0 0;
}
#adCopy {
display: flex;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Background Image</h2>
<input type='file' id='getval' name="background-image" />
<h2>Header</h2><input id="text1" class="textInput">
<h2>Subheader</h2><input id="text2" class="textInput">
<h2>Button Text</h2>
<input id="text3" class="textInput">
<h2>Logo Image Asset</h2>
<input type='file' id='getval2' name="background-image" />
<div id='adXL' class="bg-img">
<div id="adCopy">
<div class="changeMe"></div>
<div class="changeMe"></div>
</div>
<div id="adButtonAndLogo">
<div id="logo"></div>
<div class="changeMe"></div>
</div>
</div>
<div id='adL' class="bg-img">
<div id="adCopy">
<div class="changeMe"></div>
<div class="changeMe"></div>
</div>
<div id="adButtonAndLogo">
<div id="logo"></div>
<div class="changeMe"></div>
</div>
</div>
<div id='adM' class="bg-img">
<div id="adCopy">
<div class="changeMe"></div>
<div class="changeMe"></div>
</div>
<div id="adButtonAndLogo">
<div id="logo"></div>
<div class="changeMe"></div>
</div>
</div>
<div id='adS' class="bg-img">
<div id="adCopy">
<div class="changeMe"></div>
<div class="changeMe"></div>
</div>
<div id="adButtonAndLogo">
<div id="logo"></div>
<div class="changeMe"></div>
</div>
</div>

Related

<template> clone but with texts from user input

I am trying to create a comment section for my page, I used the template element to create the box and format for my user's pic and name but i'm having difficulties adding the text received from the user to get into the box. right now it creates the box and just puts the text outside/under it. How can I create a element to store inside the template?
function postComment() {
//Clone new box for comment
var temp = document.getElementsByTagName("template")[0];
var clone = temp.content.cloneNode(true);
var newComment = document.getElementById("new-comment");
newComment.appendChild(clone)
//Get comment
var userComment = document.getElementById("comment-box").value;
var text = document.createElement('p');
text.innerHTML = userComment;
newComment.appendChild(text)
//reset the comment box
document.getElementById("comment-box").value = "";
}
var post = document.getElementById("post");
post.addEventListener("click", function(e) {
e.preventDefault();
postComment()
})
.comment-box,
.post-comment .list {
background-color: white;
border-radius: 5px;
box-shadow: 0 2px 2px black;
}
.comment-section {
width: 100%;
height: auto;
margin: 0 auto;
}
.post-comment .list {
width: 100%;
margin-bottom: 12px;
}
.post-comment .list .user {
display: flex;
padding: 8px;
overflow: hidden;
}
.post-comment .list .user img {
height: 38px;
width: 38px;
margin-right: 10px;
border-radius: 50%;
}
.comment-section .name {
text-transform: uppercase;
}
.post-comment .list .day {
font-size: 12px;
}
.post-comment {
padding: 0 0 15px 58px
}
#comment-box {
border: none;
border-radius: 5px;
}
.comment-box .user {
display: flex;
width: min-content;
}
.comment-box .image img {
width: 24px;
height: 24px;
margin-right: 10px;
border-radius: 50%;
}
<div class="row">
<div class="comment-section">
<div class="post-comment">
<div class="list">
<div class="user">
<div class="user-image"><img src="./images/ok.webp"></div>
<div class="user-name">
<div class="name">TOM</div>
<div class="day">100 days ago</div>
</div>
</div>
<div class="comment">LOREM IPSUN DABUN VUB</div>
</div>
<template>
<div class="list">
<div class="user">
<div class="user-image"><img src="./images/Animal-Crossing-Tom-Nook-with-Money.jpg"></div>
<div class="user-name">
<div class="name">Tom Nook</div>
<div class="day">1 second ago</div>
</div>
</div>
</div>
</template>
<div id="new-comment"></div>
<div class="comment-box">
<div class="user">
<div class="user-image"><img src="./images/OK.webp"></div>
<form>
<textarea name="comment" placeholder="YOUR MESSAGE" id="comment-box"></textarea>
<button id="post">Comment</button>
</form>
</div>
</div>
</div>
</div>
</div>

Try this and see if this suits your requirements:
function postComment() {
//Get comment
var userComment = document.getElementById("comment-box").value;
var html = '<div class="list">' +
'<div class="user">' +
'<div class="user-image"><img src="./images/Animal-Crossing-Tom-Nook-with-Money.jpg"></div>' +
'<div class="user-name">' +
'<div class="name">Tom Nook</div>' +
'<div class="day">1 second ago</div>' +
'</div>' +
'</div>' +
'<div id="new-comment">' + userComment + '</div>' +
'</div>';
var template = document.getElementsByTagName("template")[0];
template.insertAdjacentHTML("afterend", html);
//reset the comment box
document.getElementById("comment-box").value = "";
}
var post = document.getElementById("post");
post.addEventListener("click", function(e) {
e.preventDefault();
postComment()
})
.comment-box,
.post-comment .list {
background-color: white;
border-radius: 5px;
box-shadow: 0 2px 2px black;
}
.comment-section {
width: 100%;
height: auto;
margin: 0 auto;
}
.post-comment .list {
width: 100%;
margin-bottom: 12px;
}
.post-comment .list .user {
display: flex;
padding: 8px;
overflow: hidden;
}
.post-comment .list .user img {
height: 38px;
width: 38px;
margin-right: 10px;
border-radius: 50%;
}
.comment-section .name {
text-transform: uppercase;
}
<div class="row">
<div class="comment-section">
<div class="post-comment">
<div class="list">
<div class="user">
<div class="user-image"><img src="./images/ok.webp"></div>
<div class="user-name">
<div class="name">TOM</div>
<div class="day">100 days ago</div>
</div>
</div>
<div class="comment">LOREM IPSUN DABUN VUB</div>
</div>
<template></template>
<div class="comment-box">
<div class="user">
<div class="user-image"><img src="./images/OK.webp"></div>
<form>
<textarea name="comment" placeholder="YOUR MESSAGE" id="comment-box"></textarea>
<button id="post">Comment</button>
</form>
</div>
</div>
</div>
</div>
</div>

How to .appendChild() to all elements with the same class

The blue F turns into an actual amount of weight when you enter a number into the input field above.
The Two Functions Kg() and Lbs() are changing the class .dynamic which is where Kg or Lbs is being appended to the 8 divs that have the .dynamic class. Now that's exactly what isn't happening. When I select the divs with the .dynamic class, It adds Kg or Lbs (whatever button I press) to the first element with the .dynamic class.
How do I make it so that it appends that to all of the elements with the .dynamic class?
//Variables
const mercury = document.getElementById("mercury");
const venus = document.getElementById("venus");
const earth = document.getElementById("earth");
const mars = document.getElementById("mars");
const jupiter = document.getElementById("jupiter");
const saturn = document.getElementById("saturn");
const uranus = document.getElementById("uranus");
const neptune = document.getElementById("neptune");
const weight = document.getElementById("weight");
weight.addEventListener("input", Calc);
function Calc() {
if (weight.value > 99999) {
alert("Max Amount Of Numbers is 99999");
weight.value = "";
} else {
var val = weight.value;
console.log(val);
var calculate = val * 0.38;
calculate = Math.round(calculate);
mercury.innerHTML = calculate;
console.log(calculate);
var val = weight.value;
console.log(val);
var calculate = val * 0.9;
calculate = Math.round(calculate);
venus.innerHTML = calculate;
console.log(calculate);
var val = weight.value;
console.log(val);
var calculate = val * 1;
calculate = Math.round(calculate);
earth.innerHTML = calculate;
console.log(calculate);
var val = weight.value;
console.log(val);
var calculate = val * 0.38;
calculate = Math.round(calculate);
mars.innerHTML = calculate;
console.log(calculate);
var val = weight.value;
console.log(val);
var calculate = val * 2.36;
calculate = Math.round(calculate);
jupiter.innerHTML = calculate;
console.log(calculate);
var val = weight.value;
console.log(val);
var calculate = val * 0.92;
calculate = Math.round(calculate);
saturn.innerHTML = calculate;
console.log(calculate);
var val = weight.value;
console.log(val);
var calculate = val * 0.89;
calculate = Math.round(calculate);
uranus.innerHTML = calculate;
console.log(calculate);
var val = weight.value;
console.log(val);
var calculate = val * 1.12;
calculate = Math.round(calculate);
neptune.innerHTML = calculate;
console.log(calculate);
}
}
function lbs() {
let unit = document.getElementById("unit");
if (unit == null) {
let newElement = document.createElement("h3");
newElement.setAttribute("class", "value");
newElement.setAttribute("id", "unit");
newElement.textContent = "Lbs";
document.querySelector(".dynamic").appendChild(newElement);
} else {
if (unit.innerHTML == "Kg") {
unit.innerHTML = "Lbs";
}
}
}
function kg() {
let unit = document.getElementById("unit");
if (unit == null) {
let newElement = document.createElement("h3");
newElement.setAttribute("class", "value");
newElement.setAttribute("id", "unit");
newElement.textContent = "Kg";
document.querySelector(".dynamic").appendChild(newElement);
} else {
if (unit.innerHTML == "Lbs") {
unit.innerHTML = "Kg";
}
}
}
#import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
#font-face {
font-family: SpaceQuest;
src: url(https://raw.githubusercontent.com/Lemirq/WODP/master/Fonts/SpaceQuest-yOY3.woff);
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: url(./dario-bronnimann-hNQwIirOseE-unsplash.jpg);
}
/* Handle */
::-webkit-scrollbar-thumb {
background: rgba(59, 59, 59, 0.741);
border-radius: 200px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: rgb(255, 255, 255);
}
* {
--c-light: #f4f4f4;
--c-dark: #141414;
--c-blue: rgb(10, 132, 255);
--f-body: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
--trans-ease-in-out: all 0.2s ease-in-out;
color: var(--c-light);
}
body {
background-image: url(https://raw.githubusercontent.com/Lemirq/WODP/master/images/dario-bronnimann-hNQwIirOseE-unsplash.jpg);
margin: 0;
inset: 50px;
font-family: var(--f-body);
}
a {
color: var(--c-light);
text-decoration: none;
}
/***** NAVBAR *****/
.nav-item {
transition: var(--trans-ease-in-out);
}
.ext-link {
cursor: alias;
}
.nav-item:hover {
color: var(--c-dark);
background-color: var(--c-light);
}
.nav-item:hover li {
color: var(--c-dark);
}
.nav-item.icon-link:hover i {
color: var(--c-dark);
}
.nav-item:not(:last-child) {
margin-right: 20px;
}
navbar {
display: flex;
flex-direction: row;
justify-content: end;
align-items: center;
padding: 20px;
}
.nav-item-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
}
.nav-item {
display: inline-block;
list-style: none;
padding: 10px;
font-size: 20px;
border-radius: 10px;
}
.gh-icon {
font-size: 30px;
}
/***** End NAVBAR *****/
/***** Main *****/
#wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h1 {
font-family: SpaceQuest, sans-serif;
font-size: 3.5rem;
}
.input-group {
border: 2px var(--c-light) solid;
border-radius: 10px;
/* max-width: 400px; */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 50px;
}
[type="number"]:focus {
outline: none;
}
[type="number"] {
font-size: 20px;
padding: 5px;
background-color: rgba(217, 217, 217, 0.2);
border: none;
font-family: var(--f-body);
min-width: 280px;
}
.btn-form {
font-size: 20px;
padding: 5px;
background-color: rgba(217, 217, 217, 0.2);
border: none;
transition: var(--trans-ease-in-out);
cursor: pointer;
font-family: var(--f-body);
}
.btn-form:hover {
background-color: rgba(217, 217, 217, 0.4);
}
.btn-form:first {
border-right: var(--c-light) 1px solid;
}
.input-group-text {
background-color: rgba(217, 217, 217, 0.2);
font-size: 17px;
padding: 7px;
}
/***** End Main *****/
/***** CARDS *****/
.card-container {
margin: 50px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
align-items: center;
grid-gap: 10px;
width: calc(100vw - 200px);
}
.card {
background-color: #141414;
width: auto;
height: auto;
border-radius: 10px;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
}
.planet-info {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.planet {
font-size: 50px;
margin: 0;
text-transform: capitalize;
}
.planet-img {
width: 80px;
height: auto;
margin-right: 30px;
}
[src="./images/planets/Saturn.png"] {
height: 79.25px;
width: auto;
}
.weight {
margin-top: 10px;
text-transform: capitalize;
font-size: 20px;
}
.weight::after {
content: ":";
}
.divider {
height: 1px;
width: 100%;
margin: 20px 0;
background-color: var(--c-light);
}
.value {
font-size: 60px;
color: var(--c-blue);
}
.dynamic>.value:nth-child(2) {
margin-left: 10px;
}
.dynamic {
display: flex;
flex-direction: row;
justify-content: space-between;
}
/***** End CARDS *****/
.input-error {
outline: 1px solid red;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.3/font/bootstrap-icons.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<navbar>
<ul class="nav-item-container">
<a target="_blank" class="nav-item ext-link" href="https://lemirq.github.io">
<li>Website</li>
</a>
<a target="_blank" class="nav-item icon-link ext-link" href="https://github.com/Lemirq">
<li><i class="bi bi-github gh-icon"></i></li>
</a>
</ul>
</navbar>
<div id="wrapper">
<h1 id="vs-h1">Your Weight On Different Planets</h1>
<div class="input-group">
<input id="weight" placeholder="Enter your Weight" type="number">
<button id="kg" onclick="kg()" class="btn-form" type="button">Kg</button>
<button id="lbs" onclick="lbs()" class="btn-form" type="button">Lbs</button>
</div>
<div class="card-container">
<div class="card">
<div class="planet-info">
<img class="planet-img" src="./images/planets/Mercury.png" alt="EARTH">
<h3 class="planet">mercury</h3>
</div>
<div class="divider"></div>
<h4 class="weight">weight</h4>
<div class="dynamic">
<h3 id="mercury" class="value">F</h3>
</div>
</div>
<div class="card">
<div class="planet-info">
<img class="planet-img" src="./images/planets/Venus.png" alt="EARTH">
<h3 class="planet">venus</h3>
</div>
<div class="divider"></div>
<h4 class="weight">weight</h4>
<div class="dynamic">
<h3 id="venus" class="value">F</h3>
</div>
</div>
<div class="card">
<div class="planet-info">
<img class="planet-img" src="./images/planets/Earth.png" alt="EARTH">
<h3 class="planet">earth</h3>
</div>
<div class="divider"></div>
<h4 class="weight">weight</h4>
<div class="dynamic">
<h3 id="earth" class="value">F</h3>
</div>
</div>
<div class="card">
<div class="planet-info">
<img class="planet-img" src="./images/planets/Mars.png" alt="EARTH">
<h3 class="planet">mars</h3>
</div>
<div class="divider"></div>
<h4 class="weight">weight</h4>
<div class="dynamic">
<h3 id="mars" class="value">F</h3>
</div>
</div>
<div class="card">
<div class="planet-info">
<img class="planet-img" src="./images/planets/Jupiter.png" alt="EARTH">
<h3 class="planet">jupiter</h3>
</div>
<div class="divider"></div>
<h4 class="weight">weight</h4>
<div class="dynamic">
<h3 id="jupiter" class="value">F</h3>
</div>
</div>
<div class="card">
<div class="planet-info">
<img class="planet-img" src="./images/planets/Saturn.png" alt="EARTH">
<h3 class="planet">saturn</h3>
</div>
<div class="divider"></div>
<h4 class="weight">weight</h4>
<div class="dynamic">
<h3 id="saturn" class="value">F</h3>
</div>
</div>
<div class="card">
<div class="planet-info">
<img class="planet-img" src="./images/planets/Uranus.png" alt="EARTH">
<h3 class="planet">uranus</h3>
</div>
<div class="divider"></div>
<h4 class="weight">weight</h4>
<div class="dynamic">
<h3 id="uranus" class="value">F</h3>
</div>
</div>
<div class="card">
<div class="planet-info">
<img class="planet-img" src="./images/planets/Neptune.png" alt="EARTH">
<h3 class="planet">neptune</h3>
</div>
<div class="divider"></div>
<h4 class="weight">weight</h4>
<div class="dynamic">
<h3 id="neptune" class="value">F</h3>
</div>
</div>
</div>
</div>

Select all elements with the .dynamic class by using querySelectorAll
Iterate through the NodeList and append desired child to each node
let dynamics = document.querySelectorAll(".dynamic")
dynamics.forEach((ele) => {
let newElement = document.createElement("h3");
ele.appendChild(newElement);
}

Minor Problems
There's no such HTML element <navbar>, there's <nav>.
There's a block code hard-coded 8 times with the only difference between them is a number. Whenever code needs to repeat itself, we use some sort of iteration such as a for loop or an array method and the numbers would be passed as a single variable passed with every iteration.
const gforce = [0.38, 0.9, 1, 0.38, 2.36, 0.92, 0.89, 1.12];
for (let i=0; i < 8; i++) {
var val = weight.value;
console.log(val);
var calculate = val * gforce[i];//<== that should be a variable
calculate = Math.round(calculate);
venus.innerHTML = calculate;
console.log(calculate);
}
Also, the <input> that's supposed to calculate lbs and kg doesn't appear to convert kg to lbs or vice-versa.
Details are commented in example
// An array of objects - each object represents a planet
const data = [{
planet: 'Mercury',
gforce: 0.38,
img: `https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Mercury_in_true_color.jpg/440px-Mercury_in_true_color.jpg`
},
{
planet: 'Venus',
gforce: 0.9,
img: `https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Venus_from_Mariner_10.jpg/440px-Venus_from_Mariner_10.jpg`
},
{
planet: 'Earth',
gforce: 1,
img: `https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/The_Blue_Marble_%28remastered%29.jpg/440px-The_Blue_Marble_%28remastered%29.jpg`
},
{
planet: 'Mars',
gforce: 0.38,
img: `https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/OSIRIS_Mars_true_color.jpg/440px-OSIRIS_Mars_true_color.jpg`
},
{
planet: 'Jupiter',
gforce: 2.36,
img: `https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Jupiter_and_its_shrunken_Great_Red_Spot.jpg/440px-Jupiter_and_its_shrunken_Great_Red_Spot.jpg`
},
{
planet: 'Saturn',
gforce: 0.92,
img: `https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Saturn_during_Equinox.jpg/600px-Saturn_during_Equinox.jpg`
},
{
planet: 'Uranus',
gforce: 0.89,
img: `https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Uranus_as_seen_by_NASA%27s_Voyager_2_%28remastered%29.png/440px-Uranus_as_seen_by_NASA%27s_Voyager_2_%28remastered%29.png`
},
{
planet: 'Neptune',
gforce: 1.12,
img: `https://upload.wikimedia.org/wikipedia/commons/thumb/6/63/Neptune_-_Voyager_2_%2829347980845%29_flatten_crop.jpg/440px-Neptune_-_Voyager_2_%2829347980845%29_flatten_crop.jpg`
}
];
// Reference <form> and all form controls
const conv = document.forms.converter;
const IO = conv.elements;
/*
Collect all tags with [name='planet'] and convert it into an array...
...iterate through array and define a htmlString and interpolate planet
name and <img> url...
...render htmlString into current <output>
*/
[...IO.planet].forEach((output, index) => {
const html = `
<h3>${data[index].planet}</h3>
<img src='${data[index].img}'>
<h4></h4>`;
output.insertAdjacentHTML('beforeend', html)
});
// Bind the "input" event to <form>
conv.oninput = IWC;
/*
Event handler passes Event Object by default
Reference all form controls
Reference the tag the user interacted with
If the user typed into [name='weight']...
...if that tag was also #lbs...
...#kg value is the value of >origin< times 0.45359237...
...otherwise #lbs value is the value of >origin< times 2.20462...
*/
/*
Collect all [name='planet'] into an array and iterate with .forEach()...
...clear out the last tag of current <output> (<h4>)...
...display the calculated totals for lbs. and kg of each planet
*/
function IWC(e) {
const IO = this.elements;
const origin = e.target;
if (origin.name === 'weight') {
if (origin.id === 'lbs') {
IO.kg.value = +origin.value * 0.45359237;
} else {
IO.lbs.value = +origin.value * 2.20462;
}
[...IO.planet].forEach((output, index) => {
output.lastElementChild.innerHTML = '';
output.lastElementChild.insertAdjacentHTML('beforeend',
`lbs. ${Math.round(data[index].gforce * IO.lbs.value)}<br>
kg ${Math.round(data[index].gforce * IO.kg.value)}`);
});
}
}
#import url('https://fonts.googleapis.com/css2?family=Oswald:wght#300&family=Raleway:wght#300&display=swap');
html {
font: 300 2ch/1 Oswald;
}
body {
width: 100%;
overflow-x: hidden;
background: #aaa
}
h1 {
color: gold
}
h1,
h2,
h3,
h4 {
margin: 0;
font-family: Raleway;
}
h3,
h4 {
position: absolute;
z-index: 1;
}
h3 {
margin: 0 auto;
}
h4 {
bottom: 0
}
form {
margin: 0 0 0 -15px;
}
fieldset {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
max-width: 90%;
margin: 15px
}
fieldset+fieldset {
background: #222
}
fieldset+fieldset legend {
color: gold
}
output {
position: relative;
display: inline-flex;
width: 24%;
min-height: 8rem;
margin-top: 15px;
padding: 2px;
background: black;
color: cyan
}
input {
font: inherit;
width: 10rem;
margin: 10px;
text-align: center;
}
img {
width: 100%;
}
<form id='converter'>
<fieldset>
<legend>
<h1>Interplanetary<br>Weight Converter</h1>
</legend>
<input id="lbs" name='weight' placeholder=" Weight in lbs." type="number" min='0' max='99999'><label for='lbs'>lbs.</label>
<input id="kg" name='weight' placeholder="Weight in kg." type="number" min='0' max='99999'><label for='kg'>kg</label>
</fieldset>
<fieldset>
<legend>
<h2>The Solar System</h2>
</legend>
<output name='planet'></output>
<output name='planet'></output>
<output name='planet'></output>
<output name='planet'></output>
<output name='planet'></output>
<output name='planet'></output>
<output name='planet'></output>
<output name='planet'></output>
</fieldset>
</form>

The script must look something like this:
<script>
let elements = document.querySelectorAll(".dynamic")
elements.forEach(el=>{
let child = document.createElement('div')
el.appendChild(child)
})
</script>

This can be simplified quite a bit, the buttons' innerHTML values match what you want in the new unit elements.
<button id="kg" class="btn-form" type="button">Kg</button>
<button id="lbs" class="btn-form" type="button">Lbs</button>
Use JavaScript to add an event listener to both unit buttons that call the same function which will update the innerHTML of the unit headings to match the clicked button. When initializing the unit heading elements you should not give them all the same id but rather a common class and you must also append a cloned copy of the element or it will just move the element form one spot to the next:
document.querySelectorAll('#kg, #lbs').forEach(ub => ub.addEventListener('click', units));
function units(e) {
let units = document.querySelectorAll(".value.unit");
if (units.length == 0) {
let newElement = document.createElement("h3");
newElement.setAttribute("class", "value unit");
document.querySelectorAll(".dynamic").forEach((dyn) => {
// append a cloned copy to each, not the same newElement
dyn.appendChild(newElement.cloneNode())
});
// re-run the query to find the newly added nodes
units = document.querySelectorAll(".value.unit");
}
// set the content
units.forEach(unit => unit.innerHTML = e.target.innerHTML);
}
//Variables
const mercury = document.getElementById("mercury");
const venus = document.getElementById("venus");
const earth = document.getElementById("earth");
const mars = document.getElementById("mars");
const jupiter = document.getElementById("jupiter");
const saturn = document.getElementById("saturn");
const uranus = document.getElementById("uranus");
const neptune = document.getElementById("neptune");
const weight = document.getElementById("weight");
weight.addEventListener("input", Calc);
function Calc() {
if (weight.value > 99999) {
alert("Max Amount Of Numbers is 99999");
weight.value = "";
} else {
var val = weight.value;
console.log(val);
var calculate = val * 0.38;
calculate = Math.round(calculate);
mercury.innerHTML = calculate;
console.log(calculate);
var val = weight.value;
console.log(val);
var calculate = val * 0.9;
calculate = Math.round(calculate);
venus.innerHTML = calculate;
console.log(calculate);
var val = weight.value;
console.log(val);
var calculate = val * 1;
calculate = Math.round(calculate);
earth.innerHTML = calculate;
console.log(calculate);
var val = weight.value;
console.log(val);
var calculate = val * 0.38;
calculate = Math.round(calculate);
mars.innerHTML = calculate;
console.log(calculate);
var val = weight.value;
console.log(val);
var calculate = val * 2.36;
calculate = Math.round(calculate);
jupiter.innerHTML = calculate;
console.log(calculate);
var val = weight.value;
console.log(val);
var calculate = val * 0.92;
calculate = Math.round(calculate);
saturn.innerHTML = calculate;
console.log(calculate);
var val = weight.value;
console.log(val);
var calculate = val * 0.89;
calculate = Math.round(calculate);
uranus.innerHTML = calculate;
console.log(calculate);
var val = weight.value;
console.log(val);
var calculate = val * 1.12;
calculate = Math.round(calculate);
neptune.innerHTML = calculate;
console.log(calculate);
}
}
document.querySelectorAll('#kg, #lbs').forEach(ub => ub.addEventListener('click', units));
function units(e) {
let units = document.querySelectorAll(".value.unit");
if (units.length == 0) {
let newElement = document.createElement("h3");
newElement.setAttribute("class", "value unit");
document.querySelectorAll(".dynamic").forEach((dyn) => {
// append a cloned copy to each, not the same newElement
dyn.appendChild(newElement.cloneNode())
});
// re-run the query to find the newly added nodes
units = document.querySelectorAll(".value.unit");
}
// set the content
units.forEach(unit => unit.innerHTML = e.target.innerHTML);
}
#import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
#font-face {
font-family: SpaceQuest;
src: url(https://raw.githubusercontent.com/Lemirq/WODP/master/Fonts/SpaceQuest-yOY3.woff);
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: url(./dario-bronnimann-hNQwIirOseE-unsplash.jpg);
}
/* Handle */
::-webkit-scrollbar-thumb {
background: rgba(59, 59, 59, 0.741);
border-radius: 200px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: rgb(255, 255, 255);
}
* {
--c-light: #f4f4f4;
--c-dark: #141414;
--c-blue: rgb(10, 132, 255);
--f-body: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
--trans-ease-in-out: all 0.2s ease-in-out;
color: var(--c-light);
}
body {
background-image: url(https://raw.githubusercontent.com/Lemirq/WODP/master/images/dario-bronnimann-hNQwIirOseE-unsplash.jpg);
margin: 0;
inset: 50px;
font-family: var(--f-body);
}
a {
color: var(--c-light);
text-decoration: none;
}
/***** NAVBAR *****/
.nav-item {
transition: var(--trans-ease-in-out);
}
.ext-link {
cursor: alias;
}
.nav-item:hover {
color: var(--c-dark);
background-color: var(--c-light);
}
.nav-item:hover li {
color: var(--c-dark);
}
.nav-item.icon-link:hover i {
color: var(--c-dark);
}
.nav-item:not(:last-child) {
margin-right: 20px;
}
navbar {
display: flex;
flex-direction: row;
justify-content: end;
align-items: center;
padding: 20px;
}
.nav-item-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
}
.nav-item {
display: inline-block;
list-style: none;
padding: 10px;
font-size: 20px;
border-radius: 10px;
}
.gh-icon {
font-size: 30px;
}
/***** End NAVBAR *****/
/***** Main *****/
#wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h1 {
font-family: SpaceQuest, sans-serif;
font-size: 3.5rem;
}
.input-group {
border: 2px var(--c-light) solid;
border-radius: 10px;
/* max-width: 400px; */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 50px;
}
[type="number"]:focus {
outline: none;
}
[type="number"] {
font-size: 20px;
padding: 5px;
background-color: rgba(217, 217, 217, 0.2);
border: none;
font-family: var(--f-body);
min-width: 280px;
}
.btn-form {
font-size: 20px;
padding: 5px;
background-color: rgba(217, 217, 217, 0.2);
border: none;
transition: var(--trans-ease-in-out);
cursor: pointer;
font-family: var(--f-body);
}
.btn-form:hover {
background-color: rgba(217, 217, 217, 0.4);
}
.btn-form:first {
border-right: var(--c-light) 1px solid;
}
.input-group-text {
background-color: rgba(217, 217, 217, 0.2);
font-size: 17px;
padding: 7px;
}
/***** End Main *****/
/***** CARDS *****/
.card-container {
margin: 50px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
align-items: center;
grid-gap: 10px;
width: calc(100vw - 200px);
}
.card {
background-color: #141414;
width: auto;
height: auto;
border-radius: 10px;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
}
.planet-info {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.planet {
font-size: 50px;
margin: 0;
text-transform: capitalize;
}
.planet-img {
width: 80px;
height: auto;
margin-right: 30px;
}
[src="./images/planets/Saturn.png"] {
height: 79.25px;
width: auto;
}
.weight {
margin-top: 10px;
text-transform: capitalize;
font-size: 20px;
}
.weight::after {
content: ":";
}
.divider {
height: 1px;
width: 100%;
margin: 20px 0;
background-color: var(--c-light);
}
.value {
font-size: 60px;
color: var(--c-blue);
}
.dynamic>.value:nth-child(2) {
margin-left: 10px;
}
.dynamic {
display: flex;
flex-direction: row;
justify-content: space-between;
}
/***** End CARDS *****/
.input-error {
outline: 1px solid red;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.3/font/bootstrap-icons.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<navbar>
<ul class="nav-item-container">
<a target="_blank" class="nav-item ext-link" href="https://lemirq.github.io">
<li>Website</li>
</a>
<a target="_blank" class="nav-item icon-link ext-link" href="https://github.com/Lemirq">
<li><i class="bi bi-github gh-icon"></i></li>
</a>
</ul>
</navbar>
<div id="wrapper">
<h1 id="vs-h1">Your Weight On Different Planets</h1>
<div class="input-group">
<input id="weight" placeholder="Enter your Weight" type="number">
<button id="kg" class="btn-form" type="button">Kg</button>
<button id="lbs" class="btn-form" type="button">Lbs</button>
</div>
<div class="card-container">
<div class="card">
<div class="planet-info">
<img class="planet-img" src="./images/planets/Mercury.png" alt="EARTH">
<h3 class="planet">mercury</h3>
</div>
<div class="divider"></div>
<h4 class="weight">weight</h4>
<div class="dynamic">
<h3 id="mercury" class="value">F</h3>
</div>
</div>
<div class="card">
<div class="planet-info">
<img class="planet-img" src="./images/planets/Venus.png" alt="EARTH">
<h3 class="planet">venus</h3>
</div>
<div class="divider"></div>
<h4 class="weight">weight</h4>
<div class="dynamic">
<h3 id="venus" class="value">F</h3>
</div>
</div>
<div class="card">
<div class="planet-info">
<img class="planet-img" src="./images/planets/Earth.png" alt="EARTH">
<h3 class="planet">earth</h3>
</div>
<div class="divider"></div>
<h4 class="weight">weight</h4>
<div class="dynamic">
<h3 id="earth" class="value">F</h3>
</div>
</div>
<div class="card">
<div class="planet-info">
<img class="planet-img" src="./images/planets/Mars.png" alt="EARTH">
<h3 class="planet">mars</h3>
</div>
<div class="divider"></div>
<h4 class="weight">weight</h4>
<div class="dynamic">
<h3 id="mars" class="value">F</h3>
</div>
</div>
<div class="card">
<div class="planet-info">
<img class="planet-img" src="./images/planets/Jupiter.png" alt="EARTH">
<h3 class="planet">jupiter</h3>
</div>
<div class="divider"></div>
<h4 class="weight">weight</h4>
<div class="dynamic">
<h3 id="jupiter" class="value">F</h3>
</div>
</div>
<div class="card">
<div class="planet-info">
<img class="planet-img" src="./images/planets/Saturn.png" alt="EARTH">
<h3 class="planet">saturn</h3>
</div>
<div class="divider"></div>
<h4 class="weight">weight</h4>
<div class="dynamic">
<h3 id="saturn" class="value">F</h3>
</div>
</div>
<div class="card">
<div class="planet-info">
<img class="planet-img" src="./images/planets/Uranus.png" alt="EARTH">
<h3 class="planet">uranus</h3>
</div>
<div class="divider"></div>
<h4 class="weight">weight</h4>
<div class="dynamic">
<h3 id="uranus" class="value">F</h3>
</div>
</div>
<div class="card">
<div class="planet-info">
<img class="planet-img" src="./images/planets/Neptune.png" alt="EARTH">
<h3 class="planet">neptune</h3>
</div>
<div class="divider"></div>
<h4 class="weight">weight</h4>
<div class="dynamic">
<h3 id="neptune" class="value">F</h3>
</div>
</div>
</div>
</div>

Add class to div on scroll up and down

As you can see I have a number of dots lined vertically! On scrolling down it works, as one scrolls the next dot gets a class thats chnages the style of the ball, I want the exact same to happen when i scroll up but it is not working! Please any input is appreciated!
Here is a code pen for your reference!
below the html, css and javascript:
var activeMilestone = function() {
var milestoneBalls = $('.dot');
milestoneBalls[0].classList.add("active");
window.onscroll = function() {
milestoneBalls.each(function(i, v) {
var thisBall = $(this);
var nextBall = milestoneBalls[i + 1];
var prevBall = milestoneBalls[i - 1];
var thisPositionTop = thisBall.offset().top + ($(this).parent().height() / 3);
var winScroll = window.scrollY;
if (thisPositionTop <= winScroll) {
nextBall.classList.add("active");
thisBall.addClass("inactive");
}
if (thisPositionTop >= winScroll) {
//this.classList.add("inactive_ball");
}
});
}
}
$(document).ready(activeMilestone);
.wrapper {
height: 1000px;
background-color: wheat;
}
.info_wrapper {
margin-top: 70px;
}
.container {
height: 50%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.dot {
width: 30px;
height: 30px;
border-radius: 20px;
background-color: maroon;
border: solid 4px green;
}
.active {
border: solid 4px yellow;
background-color: red;
}
.inactive {
background-color: maroon;
border: solid 4px green;
}
.text {}
.header {
width: 100%;
height: 50px;
background-color: lightblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="header"></div>
<div class="container">
<div class="info_wrapper">
<div class="text"></div>
<div class="dot "></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot "></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot "></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
</div>
</div>

So this logic performs the same that you were doing already. With the added logic of, if the element should not advance, and we are not the first element, we check to see if the previous ball should be active. And if so, we make it active.
var activeMilestone = function() {
var milestoneBalls = $('.dot');
milestoneBalls.eq(0).addClass('active');
window.addEventListener('scroll', function() {
var activeBall = milestoneBalls.filter('.active');
var activeBallIndex = milestoneBalls.index( activeBall );
var activeBallPositionTop = activeBall.offset().top + (activeBall.parent().height() / 3);
if (activeBallPositionTop <= window.scrollY) {
activeBall.removeClass('active');
milestoneBalls.eq( activeBallIndex + 1).addClass('active');
} else if ( activeBallIndex ) {
var previousBall = milestoneBalls.eq( activeBallIndex - 1 );
var previousBallPositionTop = previousBall.offset().top + (previousBall.parent().height() / 3);
if (previousBallPositionTop > window.scrollY) {
activeBall.removeClass('active');
previousBall.addClass('active');
}
}
});
}
$(document).ready(activeMilestone);
.wrapper {
height: 1000px;
background-color: wheat;
}
.info_wrapper {
margin-top: 70px;
}
.container {
height: 50%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.dot {
width: 30px;
height: 30px;
border-radius: 20px;
background-color: maroon;
border: solid 4px green;
}
.active {
border: solid 4px yellow;
background-color: red;
}
.inactive {
background-color: maroon;
border: solid 4px green;
}
.text {}
.header {
width: 100%;
height: 50px;
background-color: lightblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="header"></div>
<div class="container">
<div class="info_wrapper">
<div class="text"></div>
<div class="dot "></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot "></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot "></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
</div>
</div>

You can use on wheel from jQuery.
$(window).on('wheel',function(e) {
var mov = e.originalEvent.deltaY;
if(mov > 0) {
alert("up");
}else {
alert("down");
}
});
This will sort out your problem regarding detection of scrolling direction.

Dynamically assign properties and values to a javascript object

I am trying to create a week meal planner. At the moment the scenario is the following:
You click on a time of day (breakfast/lunch/dinner) + day of the week;
A list of recipes fades in;
By selecting (clicking) on a recipe you assign this recipe to the day of th week + time of day previously selected.
I want to store all this data into a JS object, ideally I would like to dynamically create the day object with breakfast/lunch/dinner as keys and recipe as the value but I'm a little stuck here. I've created a jsfiddle as a little demo of what I'm trying achieve. The problem is that when I select for e.g. recipe-1 for Monday breakfast it does correctly get stored but then, if I select recipe-2 for lunch - breakfast gets reassinged a value of 0. Can someone help me understand why is this happening and guide me to a better approach? Any suggestion/ help is very much appreciated! Thank you very much!
// find elements
var data_day = '',
time_of_day = '',
recipe = $('.recipes .recipe'),
weekly_recipes = {
'week_day': {}
};
// show list of recipes
$("[data-time]").on("click", function(){
$('.recipes').fadeIn();
time_of_day = $(this).attr('data-time');
data_day = $(this).parents('.column').attr('data-day');
});
recipe.on('click', function(){
var recipe_name = $(this).attr('data-recipe');
weekly_recipes.week_day[data_day] = {
'breakfast': 0,
'lunch': 0,
'dinner': 0
};
$('.recipes').fadeOut();
weekly_recipes.week_day[data_day][time_of_day] = recipe_name;
$('.meal-plan').text(JSON.stringify(weekly_recipes));
console.log(weekly_recipes);
});
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
.column{
width: 25%;
float: left;
padding: 10px;
}
.column strong{
display: block;
margin-bottom: 20px;
}
.column .wrp{
background: white;
}
.column [data-time]{
cursor: pointer;
margin-bottom: 10px;
}
.recipes{
width: 100%;
display: none;
clear: both;
margin-top: 40px;
background: white;
}
.recipes span{
display: block;
cursor: pointer;
margin-top: 10px;
}
.meal-plan{
margin-top: 20px;
background: white;
clear: both;
margin-top: 40px;
background: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="column" data-day="monday">
<div class="wrp">
<strong>Monday</strong>
<div data-time="breakfast">Breakfast</div>
<div data-time="lunch">Lunch</div>
<div data-time="dinner">Dinner</div>
</div>
</div>
<div class="column" data-day="tuesday">
<div class="wrp">
<strong>Tuesday</strong>
<div data-time="breakfast">Breakfast</div>
<div data-time="lunch">Lunch</div>
<div data-time="dinner">Dinner</div>
</div>
</div>
<div class="column" data-day="wednesday">
<div class="wrp">
<strong>Wednesday</strong>
<div data-time="breakfast">Breakfast</div>
<div data-time="lunch">Lunch</div>
<div data-time="dinner">Dinner</div>
</div>
</div>
<div class="recipes">
<div class="recipe" data-recipe="recipe-1">
<span data-recipe="recipe-1">recipe 1</span>
</div>
<div class="recipe" data-recipe="recipe-2">
<span data-recipe="recipe-2">recipe 2</span>
</div>
</div>
<div class="meal-plan">
</div>
</div>

You were almost there but the whole issue was that you were resetting the object to default 0 value everytime the user clicks on the recepie.
Instead you need to put some check that if it is already initialized then dont reset it to default.
I have added the below code:
if(!weekly_recipes.week_day.hasOwnProperty(data_day) || Object.keys(weekly_recipes.week_day[data_day]).length === 0){
weekly_recipes.week_day[data_day] = {
'breakfast': 0,
'lunch': 0,
'dinner': 0
};
}
See the working code below:
// find elements
var data_day = '',
time_of_day = '',
recipe = $('.recipes .recipe'),
weekly_recipes = {
'week_day': {}
};
// show list of recipes
$("[data-time]").on("click", function() {
$('.recipes').fadeIn();
time_of_day = $(this).attr('data-time');
data_day = $(this).parents('.column').attr('data-day');
});
recipe.on('click', function() {
var recipe_name = $(this).attr('data-recipe');
console.log(weekly_recipes.week_day[data_day]);
if (!weekly_recipes.week_day.hasOwnProperty(data_day) || Object.keys(weekly_recipes.week_day[data_day]).length === 0) {
weekly_recipes.week_day[data_day] = {
'breakfast': 0,
'lunch': 0,
'dinner': 0
};
}
$('.recipes').fadeOut();
weekly_recipes.week_day[data_day][time_of_day] = recipe_name;
$('.meal-plan').text(JSON.stringify(weekly_recipes));
console.log(weekly_recipes);
});
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
.column {
width: 25%;
float: left;
padding: 10px;
}
.column strong {
display: block;
margin-bottom: 20px;
}
.column .wrp {
background: white;
}
.column [data-time] {
cursor: pointer;
margin-bottom: 10px;
}
.recipes {
width: 100%;
display: none;
clear: both;
margin-top: 40px;
background: white;
}
.recipes span {
display: block;
cursor: pointer;
margin-top: 10px;
}
.meal-plan {
margin-top: 20px;
background: white;
clear: both;
margin-top: 40px;
background: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="column" data-day="monday">
<div class="wrp">
<strong>Monday</strong>
<div data-time="breakfast">Breakfast</div>
<div data-time="lunch">Lunch</div>
<div data-time="dinner">Dinner</div>
</div>
</div>
<div class="column" data-day="tuesday">
<div class="wrp">
<strong>Tuesday</strong>
<div data-time="breakfast">Breakfast</div>
<div data-time="lunch">Lunch</div>
<div data-time="dinner">Dinner</div>
</div>
</div>
<div class="column" data-day="wednesday">
<div class="wrp">
<strong>Wednesday</strong>
<div data-time="breakfast">Breakfast</div>
<div data-time="lunch">Lunch</div>
<div data-time="dinner">Dinner</div>
</div>
</div>
<div class="recipes">
<div class="recipe" data-recipe="recipe-1">
<span data-recipe="recipe-1">recipe 1</span>
</div>
<div class="recipe" data-recipe="recipe-2">
<span data-recipe="recipe-2">recipe 2</span>
</div>
</div>
<div class="meal-plan">
</div>
</div>

Your code is very near to work, you only need to take care when the object of some day already exists to not create it again.
See below code, you just create a new day when it doesn't exist, if it already exists, then just add the recipe to the time_of_day of that day
var data_day = '',
time_of_day = '',
recipe = $('.recipes .recipe'),
weekly_recipes = {
'week_day': {}
};
$("[data-time]").on("click", function(){
$('.recipes').fadeIn();
time_of_day = $(this).attr('data-time');
data_day = $(this).parents('.column').attr('data-day');
});
recipe.on('click', function(){
var recipe_name = $(this).attr('data-recipe');
//CHECK FOR DAY EXISTANCE
if (weekly_recipes.week_day[data_day] == null || !weekly_recipes.week_day.hasOwnProperty(data_day)){
weekly_recipes.week_day[data_day] = {
'breakfast': 0,
'lunch': 0,
'dinner': 0
};
}
weekly_recipes.week_day[data_day][time_of_day] = recipe_name;
$('.recipes').fadeOut();
$('.meal-plan').text(JSON.stringify(weekly_recipes));
console.clear()
console.log(weekly_recipes);
});
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
.column{
width: 25%;
float: left;
padding: 10px;
}
.column strong{
display: block;
margin-bottom: 20px;
}
.column .wrp{
background: white;
}
.column [data-time]{
cursor: pointer;
margin-bottom: 10px;
}
.recipes{
width: 100%;
display: none;
clear: both;
margin-top: 40px;
background: white;
}
.recipes span{
display: block;
cursor: pointer;
margin-top: 10px;
}
.meal-plan{
margin-top: 20px;
background: white;
clear: both;
margin-top: 40px;
background: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="column" data-day="monday">
<div class="wrp">
<strong>Monday</strong>
<div data-time="breakfast">Breakfast</div>
<div data-time="lunch">Lunch</div>
<div data-time="dinner">Dinner</div>
</div>
</div>
<div class="column" data-day="tuesday">
<div class="wrp">
<strong>Tuesday</strong>
<div data-time="breakfast">Breakfast</div>
<div data-time="lunch">Lunch</div>
<div data-time="dinner">Dinner</div>
</div>
</div>
<div class="column" data-day="wednesday">
<div class="wrp">
<strong>Wednesday</strong>
<div data-time="breakfast">Breakfast</div>
<div data-time="lunch">Lunch</div>
<div data-time="dinner">Dinner</div>
</div>
</div>
<div class="recipes">
<div class="recipe" data-recipe="recipe-1">
<span data-recipe="recipe-1">recipe 1</span>
</div>
<div class="recipe" data-recipe="recipe-2">
<span data-recipe="recipe-2">recipe 2</span>
</div>
</div>
<div class="meal-plan"></div>

How can i filter a list of divs when 2 checkboxes are checked using jquery or javascript?

I have a list of 4 divs and i use 2 checkboxes to filter the list by the existence of specific divs. The filtering works perfect until i check both 2 checkboxes.
As you can see in my code below if you try to check both "Card" & "Paypal" checkboxes the list is disappeared. Instead i need to display all of 4 divs. How can i make it work this way?
Here's the code:
$("#by-card").change(function() {
$('.store-block .store-payment-options').each(function() {
if ($(this).find('.card-available').length === 0) {
$(this).parent(".store-block").toggleClass('hide-me');
}
});
});
$("#by-paypal").change(function() {
$('.store-block .store-payment-options').each(function() {
if ($(this).find('.paypal-available').length === 0) {
$(this).parent(".store-block").toggleClass('hide-me');
}
});
});
.search-area {
margin-bottom: 10px;
}
.storesList {
margin-top: 20px;
}
#count {
display: inline-block;
}
.store-block {
width: 80%;
margin-bottom: 10px;
padding: 5px;
background: #e5e5e5;
position: relative;
overflow: hidden;
}
.rating {
position: absolute;
right: 70px;
top: 3px;
}
.minorder {
position: absolute;
right: 180px;
top: 3px;
}
.paypal-available,
.card-available {
position: absolute;
right: 10px;
top: 5px;
font-size: 11px;
font-weight: bold;
color: blue;
}
.right {
float: right;
}
.left {
float: left;
}
.hide-me {
display: none;
}
.checkbox-lab {
font-size: 12px;
font-weight: bold;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="checkboxes-area">
<div class=" inputRadioGroup">
<input type="checkbox" id="by-card">
<label for="by-card">Card</label>
</div>
<div class=" inputRadioGroup">
<input type="checkbox" id="by-paypal">
<label for="by-paypal">Paypal</label>
</div>
</div>
<div class="storesList">
<div class="store-block">
<div class="store-name">Apple Store</div>
<div class="rating">&bigstar; 4.5</div>
<div class="minorder">100 €</div>
<div class="store-payment-options">
<div class="card-available">CARD</div>
</div>
</div>
<div class="store-block">
<div class="store-name">Nokia Store</div>
<div class="rating">&bigstar; 3.8</div>
<div class="minorder">250 €</div>
<div class="store-payment-options">
<div class="paypal-available">PAYPAL</div>
</div>
</div>
<div class="store-block">
<div class="store-name">Samsung Store</div>
<div class="rating">&bigstar; 4.0</div>
<div class="minorder">25 €</div>
<div class="store-payment-options">
<div class="card-available">CARD</div>
</div>
</div>
<div class="store-block">
<div class="store-name">Linux</div>
<div class="rating">&bigstar; 4.9</div>
<div class="minorder">50 €</div>
<div class="store-payment-options">
<div class="paypal-available">PAYPAL</div>
</div>
</div>
</div>

To get that behaviour you need to change the code which you have:
You need to have a single change function for the checkboxes of paypal and card
Then whenever any of the checkbox is checked/unchecked, you can loop both the checkboxes to know if any of them is checked. If you get the checkbox checked then show the elements with class store-block where I have also added one more class same as the id value of the checkbox that is clicked.
Using this class value it will be easy to determine the set of divs that belong to the particular checkbox.
You also need to manage the scenario when all the checkbox are unchecked after they were checked so, for that I have used a variable oneChecked.
$(".inputRadioGroup input[type='checkbox']").change(function() {
var oneChecked = false;
$(".inputRadioGroup input[type='checkbox']").each(function(){
var checked = this.checked;
var checkedId = $(this).attr('id');
if(checked){
oneChecked = true;
$('.'+checkedId).show();
} else {
$('.'+checkedId).hide();
}
});
if(!oneChecked){
$('.store-block').show();
}
});
.search-area {
margin-bottom: 10px;
}
.storesList {
margin-top: 20px;
}
#count {
display: inline-block;
}
.store-block {
width: 80%;
margin-bottom: 10px;
padding: 5px;
background: #e5e5e5;
position: relative;
overflow: hidden;
}
.rating {
position: absolute;
right: 70px;
top: 3px;
}
.minorder {
position: absolute;
right: 180px;
top: 3px;
}
.paypal-available,
.card-available {
position: absolute;
right: 10px;
top: 5px;
font-size: 11px;
font-weight: bold;
color: blue;
}
.right {
float: right;
}
.left {
float: left;
}
.hide-me {
display: none;
}
.checkbox-lab {
font-size: 12px;
font-weight: bold;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkboxes-area">
<div class="inputRadioGroup">
<input type="checkbox" id="by-card">
<label for="by-card">Card</label>
</div>
<div class="inputRadioGroup">
<input type="checkbox" id="by-paypal">
<label for="by-paypal">Paypal</label>
</div>
</div>
<div class="storesList">
<div class="store-block by-card">
<div class="store-name">Apple Store</div>
<div class="rating">&bigstar; 4.5</div>
<div class="minorder">100 €</div>
<div class="store-payment-options">
<div class="card-available">CARD</div>
</div>
</div>
<div class="store-block by-paypal">
<div class="store-name">Nokia Store</div>
<div class="rating">&bigstar; 3.8</div>
<div class="minorder">250 €</div>
<div class="store-payment-options">
<div class="paypal-available">PAYPAL</div>
</div>
</div>
<div class="store-block by-card">
<div class="store-name">Samsung Store</div>
<div class="rating">&bigstar; 4.0</div>
<div class="minorder">25 €</div>
<div class="store-payment-options">
<div class="card-available">CARD</div>
</div>
</div>
<div class="store-block by-paypal">
<div class="store-name">Linux</div>
<div class="rating">&bigstar; 4.9</div>
<div class="minorder">50 €</div>
<div class="store-payment-options">
<div class="paypal-available">PAYPAL</div>
</div>
</div>
</div>

I'm not good at jQuery, but here's how I'd solve that using good old plain vanilla Javascript. The key change to your approach is to listen for the change event on a parent element of both checkboxes (instead of on each checkbox with a seperate handler), then check if either, or both, or no checkboxes are checked, and create the appropriate DOM state accordingly:
var checkboxArea = document.querySelector('.checkboxes-area')
var storeBlocks = Array.from(document.querySelectorAll('.store-block'))
var byCard = document.getElementById('by-card')
var byPaypal = document.getElementById('by-paypal')
var cardBlocks = storeBlocks.filter(function(block) {
return block.querySelector('.card-available')
})
var payPalBlocks = storeBlocks.filter(function(block) {
return block.querySelector('.paypal-available')
})
checkboxArea.addEventListener('change', function(e) {
switch (true) {
case byCard.checked && byPaypal.checked:
storeBlocks.forEach(function(block) { block.classList.remove('hide-me') })
break
case byCard.checked:
cardBlocks.forEach(function(block) { block.classList.remove('hide-me') })
payPalBlocks.forEach(function(block) { block.classList.add('hide-me') })
break
case byPaypal.checked:
cardBlocks.forEach(function(block) { block.classList.add('hide-me') })
payPalBlocks.forEach(function(block) { block.classList.remove('hide-me') })
break
default:
payPalBlocks.concat(cardBlocks).forEach(function(block) { block.classList.remove('hide-me') })
}
})
.search-area {
margin-bottom: 10px;
}
.storesList {
margin-top: 20px;
}
#count {
display: inline-block;
}
.store-block {
width: 80%;
margin-bottom: 10px;
padding: 5px;
background: #e5e5e5;
position: relative;
overflow: hidden;
}
.rating {
position: absolute;
right: 70px;
top: 3px;
}
.minorder {
position: absolute;
right: 180px;
top: 3px;
}
.paypal-available,
.card-available {
position: absolute;
right: 10px;
top: 5px;
font-size: 11px;
font-weight: bold;
color: blue;
}
.right {
float: right;
}
.left {
float: left;
}
.hide-me {
display: none;
}
.checkbox-lab {
font-size: 12px;
font-weight: bold;
cursor: pointer;
}
<div class="checkboxes-area">
<div class="inputRadioGroup">
<input type="checkbox" id="by-card">
<label for="by-card">Card</label>
</div>
<div class="inputRadioGroup">
<input type="checkbox" id="by-paypal">
<label for="by-paypal">Paypal</label>
</div>
</div>
<div class="storesList">
<div class="store-block">
<div class="store-name">Apple Store</div>
<div class="rating">&bigstar; 4.5</div>
<div class="minorder">100 €</div>
<div class="store-payment-options">
<div class="card-available">CARD</div>
</div>
</div>
<div class="store-block">
<div class="store-name">Nokia Store</div>
<div class="rating">&bigstar; 3.8</div>
<div class="minorder">250 €</div>
<div class="store-payment-options">
<div class="paypal-available">PAYPAL</div>
</div>
</div>
<div class="store-block">
<div class="store-name">Samsung Store</div>
<div class="rating">&bigstar; 4.0</div>
<div class="minorder">25 €</div>
<div class="store-payment-options">
<div class="card-available">CARD</div>
</div>
</div>
<div class="store-block">
<div class="store-name">Linux</div>
<div class="rating">&bigstar; 4.9</div>
<div class="minorder">50 €</div>
<div class="store-payment-options">
<div class="paypal-available">PAYPAL</div>
</div>
</div>
</div>

Categories

Resources