I am trying to create the logic behind displaying some data fetched from an API, as well as changing the background color of a bar, but so far I haven been able to get it to work, can anyone help?
html:
<section >
<div >
<div >
<div >
<h4>1</h4>
</div>
<p >Starts:</p>
<span >-</span>
<p >Ends:</p>
<span id="time-end-peg-1">
</span>
<div >
<p >Length:</p>
<span id="total-time-1">-</span>
<span id="peg-1-update-time">-</span>
</div>
<div >
<div >
</div>
</div>
<div >
<span id="time-peg-1">-</span>
</div>
</div>
<div >
<div >
<h4>3</h4>
</div>
<p >Starts:</p>
<span ></span>
<p >Ends: </a>
</p>
<span id="time-end-peg-3">-</span>
<div >
<p >Length:</p>
<span id="total-time-3"></span>
<span id="peg-3-update-time"> 10</span>
</div>
<div >
<div >
</div>
</div>
<div >
<span id="time-peg-3"></span>
</div>
</div>
<div >
<div >
<h4>5</h4>
</div>
<p >Starts:</p>
<span ></span>
<p >Ends:</p>
<span id="time-end-peg-5"></span>
<div >
<p >Length:</p>
<span id="total-time-5"></span>
<span id="peg-5-update-time"> 10</span>
</div>
<div >
<div >
</div>
</div>
<div >
<span id="time-peg-5">
<p></p>
</span>
</div>
</div>
<div >
<div >
<h4>7</h4>
</div>
<p >Starts:</p>
<span ></span>
<p >Ends:</p>
<span id="time-end-peg-7"></span>
<div >
<p >Length:</p>
<span id="total-time-7"></span>
<span id="peg-7-update-time"> 10</span>
</div>
<div >
<div >
</div>
</div>
<div >
<span id="time-peg-7"></span>
</div>
</div>
<div >
<div >
<h4>9</h4>
</div>
<p >Starts:</p>
<span ></span>
<p >Ends:</p>
<span id="time-end-peg-9"></span>
<div >
<p >Length:</p>
<span id="total-time-9"></span>
<span id="peg-9-update-time"> 10</span>
</div>
<div >
<div >
</div>
</div>
<div >
<span id="time-peg-9">
<p></p>
</span>
</div>
</div>
<div >
<h1>PRIVATE AREA</h1>
</div>
<div >
<div >
<h4>10</h4>
</div>
<p >Starts:</p>
<span >10</span>
<p >Ends:</p>
<span id="time-end-peg-10">
</span>
<div >
<p >Length:</p>
<span id="total-time-10">
<span id="peg-10-update-time"> 10</span>
</span>
</div>
<div >
<div >
</div>
</div>
<div >
<span id="time-peg-10">
</span>
</div>
</div>
<div >
<div >
<h4>12</h4>
</div>
<p >Starts:</p>
<span ></span>
<p >Ends:</p>
<span id="time-end-peg-12">-</span>
<div >
<p >Length:</p>
<span id="total-time-12">
<span id="peg-12-update-time"> 10</span>
<p></p>
</span>
</div>
<div >
<div >
</div>
</div>
<div >
<span id="time-peg-12">
<p></p>
</span>
</div>
</div>
</div>
<div >
<div >
<div >
<h4>2</h4>
</div>
<p >Starts:</p>
<span ></span>
<p >Ends:</p>
<span id="time-end-peg-2">
</span>
<div >
<p >Length:</p>
<span id="total-time-2">
<span id="peg-2-update-time"> 10</span>
<p></p>
</span>
</div>
<div >
<div >
</div>
</div>
<div >
<span id="time-peg-2">
<p></p>
</span>
</div>
</div>
<div >
<div >
<h4>4</h4>
</div>
<p >Starts:</p>
<span ></span>
<p >Ends:</p>
<span id="time-end-peg-4">-</span>
<div >
<p >Length:</p>
<span id="total-time-4">
<span id="peg-4-update-time"> 10</span>
<p></p>
</span>
</div>
<div >
<div >
</div>
</div>
<div >
<span id="time-peg-4">
<p></p>
</span>
</div>
</div>
<div >
<div >
<h4>6</h4>
</div>
<p >Starts:</p>
<span ></span>
<p >Ends:</p>
<span id="time-end-peg-6"></span>
<div >
<p >Length:</p>
<span id="total-time-6">
<span id="peg-6-update-time"> 10</span>
<p></p>
</span>
</div>
<div >
<div >
</div>
</div>
<div >
<span id="time-peg-6">
<p></p>
</span>
</div>
</div>
<div >
<div >
<h4>8</h4>
</div>
<p >Starts:</p>
<span ></span>
<p >Ends:</p>
<span id="time-end-peg-8">-</span>
<div >
<p >Length:</p>
<span id="total-time-8">
<span id="peg-8-update-time"> 10</span>
<p></p>
</span>
</div>
<div >
<div >
</div>
</div>
<div >
<span id="time-peg-8">
<p></p>
</span>
</div>
</div>
<div >
<div >
<h4>11</h4>
</div>
<p >Starts:</p>
<span ></span>
<p >Ends:</p>
<span id="time-end-peg-11">
</span>
<div >
<p >Length:</p>
<span id="total-time-11">
<span id="peg-11-update-time"> 10</span>
<p></p>
</span>
</div>
<div >
<div >
</div>
</div>
<div >
<span id="time-peg-11">
<p></p>
</span>
</div>
</div>
</div>
css:
.pegs-container {
border-radius: 25px;
display: grid;
grid-template-columns: 600px 600px;
grid-column-gap: 40px;
justify-content: center;
align-items: center;
margin: auto;
max-width: 1000px;
}
.peg-container-left, .peg-container-right {
color: var(--dark-green-color);
width: 600px;
}
.peg-wrapper {
background-color: var(--color-white);
border-radius: 15px;
box-shadow: 2px 1px 1px 1px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
margin-bottom: 26px;
margin-left: 80px;
height: 97px;
}
.peg-wrapper-8 {
background-color: var(--color-white);
border-radius: 15px;
margin-bottom: 180px;
margin-left: 80px;
box-shadow: 2px 1px 1px 1px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
height: 97px;
}
.peg-wrapper-11 {
background-color: var(--color-white);
border-radius: 15px;
margin-bottom: 130px;
margin-left: 80px;
box-shadow: 2px 1px 1px 1px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
height: 97px;
}
.peg-name-1, .peg-name-2, .peg-name-3, .peg-name-4, .peg-name-5, .peg-name-6, .peg-name-7, .peg-name-8, .peg-name-9, .peg-name-10, .peg-name-11, .peg-name-12 {
display: inline-block;
background-color: var(--color-white);
border-radius: 50%;
height: 25px;
width: 30px;
font-family: var(--font-paraghraph);
text-align: center;
padding-top: 5px;
border: 2px solid var(--peg-label-dark-green);
z-index: 1;
transform: translate(-0.8rem, -3ex);
/*do not change*/
}
.label-1 {
color: gray;
font-family: var(--font-paraghraph);
font-size: 16px;
margin-left: 60px;//it was -1
margin-right: 10px;
max-width: 125px;
display: inline-flex;
}
.label-2 {
color: gray;
font-family: var(--font-paraghraph);
font-size: 16px;
margin-left: 80px;
margin-right: 10px;
}
.label-3 {
color: gray;
font-family: var(--font-paraghraph);
font-size: 16px;
margin-left: 0px;
margin-right: 10px;
display: inline-flex;
}
/* empty container only to show if time is added to the session */
#peg-1-update-time,#peg-2-update-time, #peg-3-update-time,#peg-4-update-time,#peg-5-update-time,#peg-6-update-time,#peg-7-update-time,#peg-8-update-time,#peg-9-update-time,#peg-10-update-time,#peg-11-update-time,#peg-12-update-time{
visibility: hidden;
}
/* Progress-bars */
.peg-1-bar, .peg-2-bar, .peg-3-bar, .peg-4-bar, .peg-5-bar, .peg-6-bar, .peg-7-bar, .peg-8-bar, .peg-9-bar, .peg-10-bar, .peg-11-bar, .peg-12-bar {
background-color: var(--color-light-gray);
border-radius: 50px;
height: 20px;
width: 400px;
margin-left: 30px;
}
.peg-1-bar-fill, .peg-2-bar-fill, .peg-3-bar-fill, .peg-4-bar-fill, .peg-5-bar-fill, .peg-6-bar-fill, .peg-7-bar-fill, .peg-8-bar-fill, .peg-9-bar-fill, .peg-10-bar-fill,
.peg-11-bar-fill, .peg-12-bar-fill {
border-radius: 50px;
height: 100%;
width: 100%;
max-width: 400px;
}
.peg-1-timer, .peg-1-start-time, .peg-2-timer, .peg-2-start-time, .peg-3-timer, .peg-3-start-time, .peg-4-timer, .peg-4-start-time, .peg-5-timer, .peg-5-start-time, .peg-6-timer, .peg-6-start-time, .peg-7-timer, .peg-7-start-time, .peg-8-timer, .peg-8-start-time, .peg-9-timer, .peg-9-start-time, .peg-10-timer, .peg-10-start-time, .peg-11-timer, .peg-11-start-time, .peg-12-timer, .peg-12-start-time {
text-align: center;
max-width: 100px;
display: inline-flex;
margin-left: -10px;
}
.peg-1-timer,.peg-2-timer,.peg-3-timer,.peg-4-timer,.peg-5-timer,.peg-6-timer,.peg-7-timer,.peg-8-timer,.peg-9-timer,.peg-10-timer, .peg-11-timer,.peg-12-timer{
transform: translate(1rem, -4ex);
margin-left: 425px;
}
.total-time, .time-left {
margin-top: 12px;
padding-bottom: 12px;
text-align: center;
}
this is the js:
const peg1 = {
status: completedata[0].id,
startTime: completedata[1].price,
endTime: completedata[0].price,
totalLength: completedata[0].price 'm',
remainingTime: completedata[0].price 'm',
barPercentage: completedata[8].price,
};
document.getElementsByClassName("time-start-peg-1").innerHTML = peg1.startTime;
document.getElementById("time-end-peg-1").innerHTML = peg1.startTime;
document.getElementById("total-time-1").innerHTML = peg1.totalLength;
document.getElementById("time-peg-1").innerHTML = peg1.totalLength;
// document.getElementById("peg-1-update-time").innerHTML = peg1.totalLength;
const peg2 = {
status: completedata[1].id,
startTime: completedata[2].price,
endTime: completedata[2].price,
totalLength: completedata[2].price 'm',
remainingTime: completedata[2].price 'm',
barPercentage: completedata[8].price,
};
document.getElementsByClassName("time-start-peg-2").innerHTML = peg2.startTime;
document.getElementById("time-end-peg-2").innerHTML = peg2.startTime;
document.getElementById("total-time-2").innerHTML = peg2.totalLength;
document.getElementById("time-peg-2").innerHTML = peg2.totalLength;
// document.getElementById("peg-1-update-time").innerHTML = peg1.totalLength;
const peg3 = {
status: completedata[0].id,
startTime: completedata[3].price,
endTime: completedata[3].price,
totalLength: completedata[3].price 'm',
remainingTime: completedata[3].price 'm',
barPercentage:completedata[8].price,
};
document.getElementsByClassName("time-start-peg-3").innerHTML = peg1.startTime;
document.getElementById("time-end-peg-3").innerHTML = peg1.startTime;
document.getElementById("total-time-3").innerHTML = peg1.totalLength;
document.getElementById("time-peg-3").innerHTML = peg1.totalLength;
// document.getElementById("peg-1-update-time").innerHTML = peg1.totalLength;
const peg4 = {
status: completedata[2].id,
startTime: completedata[4].price,
endTime: completedata[4].price,
totalLength: completedata[4].price 'm',
remainingTime: completedata[4].price 'm',
barPercentage: completedata[8].price,
};
document.getElementsByClassName("time-start-peg-4").innerHTML = peg1.startTime;
document.getElementById("time-end-peg-4").innerHTML = peg1.startTime;
document.getElementById("total-time-4").innerHTML = peg1.totalLength;
document.getElementById("time-peg-4").innerHTML = peg1.totalLength;
// document.getElementById("peg-1-update-time").innerHTML = peg1.totalLength;
const peg5 = {
status: completedata[2].id,
startTime: completedata[5].price 'm',
endTime: completedata[5].price 'm',
totalLength: completedata[5].price 'm',
remainingTime: completedata[5].price 'm',
barPercentage:completedata[8].price,
};
document.getElementsByClassName("time-start-peg-5").innerHTML = peg1.startTime;
document.getElementById("time-end-peg-5").innerHTML = peg1.startTime;
document.getElementById("total-time-5").innerHTML = peg1.totalLength;
document.getElementById("time-peg-5").innerHTML = peg1.totalLength;
// document.getElementById("peg-1-update-time").innerHTML = peg1.totalLength;
const peg6 = {
status: completedata[1].id,
startTime: completedata[6].price,
endTime: completedata[6].price,
totalLength: completedata[6].price 'm',
remainingTime: completedata[6].price 'm',
barPercentage: completedata[8].price,
};
document.getElementsByClassName("time-start-peg-6").innerHTML = peg1.startTime;
document.getElementById("time-end-peg-6").innerHTML = peg1.startTime;
document.getElementById("total-time-6").innerHTML = peg1.totalLength;
document.getElementById("time-peg-6").innerHTML = peg1.totalLength;
// document.getElementById("peg-6-update-time").innerHTML = peg1.totalLength;
const uiProgressBarPeg7 = document.getElementById(`peg-7-bar-fill`);
const peg7 = {
status: completedata[1].id,
startTime: completedata[7].price,
endTime: completedata[7].price,
totalLength: completedata[7].price 'm',
remainingTime: completedata[7].price 'm',
barPercentage:completedata[8].price,
};
document.getElementsByClassName("time-start-peg-7").innerHTML = peg2.startTime;
document.getElementById("time-end-peg-7").innerHTML = peg2.startTime;
document.getElementById("total-time-7").innerHTML = peg2.totalLength;
document.getElementById("time-peg-7").innerHTML = peg2.totalLength;
// document.getElementById("peg-7-update-time").innerHTML = peg2.totalLength;
const peg8 = {
status: completedata[0].id,
startTime: completedata[7].price,
endTime: completedata[7].price,
totalLength: completedata[7].price 'm',
remainingTime: completedata[7].price 'm',
barPercentage: completedata[8].price,
};
document.getElementsByClassName("time-start-peg-8").innerHTML = peg8.startTime;
document.getElementById("time-end-peg-8").innerHTML = peg8.startTime;
document.getElementById("total-time-8").innerHTML = peg8.totalLength;
document.getElementById("time-peg-8").innerHTML = peg8.totalLength;
// document.getElementById("peg-1-update-time").innerHTML = peg8.totalLength;
const peg9 = {
status: completedata[1].id,
startTime: completedata[8].price,
endTime: completedata[8].price,
totalLength: completedata[8].price 'm',
remainingTime: completedata[8].price 'm',
barPercentage: completedata[8].price,
};
document.getElementsByClassName("time-start-peg-9").innerHTML = peg9.startTime;
document.getElementById("time-end-peg-9").innerHTML = peg9.startTime;
document.getElementById("total-time-9").innerHTML = peg9.totalLength;
document.getElementById("time-peg-9").innerHTML = peg9.totalLength;
// document.getElementById("peg-1-update-time").innerHTML = peg9.totalLength;
const peg10 = {
status: completedata[1].id,
startTime: completedata[9].price,
endTime: completedata[9].price,
totalLength: completedata[9].price 'm',
remainingTime: completedata[9].price 'm',
barPercentage:completedata[8].price,
};
document.getElementsByClassName("time-start-peg-10").innerHTML = peg1.startTime;
document.getElementById("time-end-peg-10").innerHTML = peg10.startTime;
document.getElementById("total-time-10").innerHTML = peg10.totalLength;
document.getElementById("time-peg-10").innerHTML = peg10.totalLength;
// document.getElementById("peg-1-update-time").innerHTML = peg10.totalLength;
const peg11 = {
status: completedata[0].id,
startTime: completedata[10].price,
endTime: completedata[10].price,
totalLength: completedata[10].price 'm',
remainingTime: completedata[10].price 'm',
barPercentage: completedata[8].price,
};
document.getElementsByClassName("time-start-peg-11").innerHTML = peg1.startTime;
document.getElementById("time-end-peg-11").innerHTML = peg11.startTime;
document.getElementById("total-time-11").innerHTML = peg11.totalLength;
document.getElementById("time-peg-11").innerHTML = peg11.totalLength;
// document.getElementById("peg-11-update-time").innerHTML = peg11.totalLength;
const peg12 = {
status: completedata[1].id,
startTime: completedata[11].price,
endTime: completedata[11].price,
totalLength: completedata[11].price 'm',
remainingTime: completedata[11].price 'm',
barPercentage:completedata[8].price ,
};
document.getElementsByClassName("time-start-peg-12").innerHTML = peg12.startTime;
document.getElementById("time-end-peg-12").innerHTML = peg12.startTime;
document.getElementById("total-time-12").innerHTML = peg12.totalLength;
document.getElementById("time-peg-12").innerHTML = peg12.totalLength;
// document.getElementById("peg-1-update-time").innerHTML = peg12.totalLength;
the idea would be to implement the following code:
if( peg7.status === 0){
uiProgressBarPeg7.style.background = "var(--color-light-gray)";
} else if ( peg7.status === 1) {
uiProgressBarPeg7.style.background = "var(--dark-green-color)";
} else if ( peg7.status === 2) {
uiProgressBarPeg7.style.background = "var(--light-orange-color)";
} else if(peg7.status === 3){
uiProgressBarPeg7.style.background = "var(--light-red-color)";
uiTime.style.fontFamily = 'Poppins, sans-serif';
uiTime.style.fontSize = '16px';
}
else if (peg7.status === 4){
uiProgressBarPeg7.style.background = "var(--color-light-gray)";
}
if( peg7.status== 0 & peg7.barPercentage ===0 ){
uiProgressBarPeg7.style.background = "var(--color-light-gray)";
}
For every peg object, I thought about putting everything on an array but I have no idea how to wrap everything.
Any help is welcome.
CodePudding user response：
Leaving your HTML and CSS as is, I will refactor the JavaScript to be like this.
// This map is going to be used to look up the background color for different status,
// it should eliminate the need to do multiple if conditions
const pegBackgrounds = new Map();
pegBackgrounds.set(0, "var(--color-light-gray)");
pegBackgrounds.set(1, "var(--dark-green-color)");
pegBackgrounds.set(2, "var(--light-orange-color)");
pegBackgrounds.set(3, "var(--light-red-color)");
pegBackgrounds.set(4, "var(--color-light-gray)");
// Assuming this is coming from some api
const completeData = [
{ id: 1, price: 1 },
{ id: 2, price: 2 },
{ id: 3, price: 3 },
{ id: 4, price: 4 },
{ id: 5, price: 5 },
{ id: 6, price: 6 },
{ id: 7, price: 7 },
{ id: 8, price: 8 },
{ id: 9, price: 9 },
{ id: 10, price: 10 },
{ id: 11, price: 11 },
{ id: 12, price: 12 },
];
// Transform your response from api into the shape of your choice
const pegs = completeData.map((peg) => {
return {
status: peg.id,
startTime: peg.price,
endTime: peg.price,
totalLength: peg.price "m",
remainingTime: peg.price "m",
barPercentage: peg.price,
};
});
// Run through each of your peg items and set the style based on the element index, although this could be improved,
// I have done whatever I could assume based on whatever code you've provided
pegs.forEach((peg, index) => {
const startTimeNode = document.getElementsByClassName(
`time-start-peg-${index 1}`
);
const startTimeText = document.createTextNode(peg.startTime);
startTimeNode.append(startTimeText);
const endTimeNode = document.getElementsByClassName(
`time-end-peg-${index 1}`
);
const endTimeText = document.createTextNode(peg.startTime);
endTimeNode.append(endTimeText);
const totalTimeNode = document.getElementsByClassName(
`total-time-${index 1}`
);
const totalTimeText = document.createTextNode(peg.totalLength);
totalLengthNode.append(totalTimeText);
const timeNode = document.getElementsByClassName(`time-peg-${index 1}`);
const timeText = document.createTextNode(peg.totalLength);
timeNode.append(timeText);
});
// Lastly, I don't know where this uiProgressBarPeg7 comes from, but you can set style for it by looking
// up the value inside pegBackgrounds map that we created, which removes the need to do multiple if statements
uiProgressBarPeg7.style.background = pegBackgrounds.get(peg7.status);