Home > Enterprise >  How to use conditional statements on objects
How to use conditional statements on objects

Time:09-06

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);
  • Related