CODEWITHSUNDEEP
javascript
user12103151
user12103151

Reputation:

Change certain font color based calculated hours - JavaScript

I'm working on calculating parking tickets based on the time it entered and the time it exited. I am stuck on changing the color setting. So if the vehicle stays parked > 23 hr, the font color will change to 'red', and if the vehicle stays parked < 1 hr, the font color will change to 'blue'.

I tried to add comments on every step and my approach.


    let row = document.querySelector("#pricerow");

    if (duration > 1) {
      var price = (duration * 2.99).toFixed(2);

    } // if it's more than 23 hrs, change the font color to red
    else if (duration > 23) {
      // change the font color to red
      var price = row.style.color = "red";

    } // if the vehicle was parked for less than 1 hr, change the font color to blue
    else{
      var price = 0;
      row.style.color = "blue";
      // price.style.fontcolor = 'blue'    // not working
      // price.fontcolor("blue");
    }

    tb.innerHTML += `<tr>
                              <td>${car.license}</td>
                              <td id='pricerow'>${price}</td>
                              <td>${duration}</td>
                              <td>${timeIn}</td>
                              <td>${timeOut}</td>
                            </tr>`

  });

}

Upvotes: 1

Views: 70

Answers (2)

Aks Jacoves
Aks Jacoves

Reputation: 877

Try

 const table = document.querySelector(`#tableRow`)

// ------------------------------------------ Duration

    // calculating the amount of time a vehicle was parked
    let row = document.querySelector("#pricerow");
    let duration = ((Math.abs(dateIn - outDate))/3600000).toFixed(2)
    // if more than 1 hr, calculate the price
    var price = 0
    if (duration > 1) {
      price = (duration * 2.99).toFixed(2);

    } // if it's more than 23 hrs, change the font color to red
    table.innerHTML += `<tr>
                              <td>${car.license}</td>
                              <td style="color: ${(duration < 1) ? 'blue' : ((duration > 23) ? 'red' : 'black')}" id='pricerow'>${price}</td>
                              <td>${duration}</td>
                              <td>${timeIn}</td>
                              <td>${timeOut}</td>
                            </tr>`
    // table.innerHTML += row
  });

}

Comments:

Your code has some logic errors (which I removed in my answer) on this line for example:

if (duration > 1) {
  var price = (duration * 2.99).toFixed(2);

} // if it's more than 23 hrs, change the font color to red
else if (duration > 23) {
  // change the font color to red
  var price = row.style.color = "red";

} // if the vehicle was parked for less than 1 hr, change the font color to blue
else{
  var price = 0;
  row.style.color = "blue";
  // price.style.fontcolor = 'blue'    // not working
  // price.fontcolor("blue");
}

Note that you have, if(duration> 1) and else if(duration> 23), the else if(duration> 23) will never be executed, because if duration is greater than 23 it will already be greater than 1 too, so executed only what is inside if(duration > 1)

Upvotes: 0

Unmitigated
Unmitigated

Reputation: 89314

Just set the CSS color property using .style.color.

var row = document.querySelector("#pricerow");
if (duration > 1) {

} // if it's more than 23 hrs, change the font color to red
else if (duration > 23) {
  // change the font color to red
  row.style.color = "red";
} // if the vehicle was parked for less than 1 hr, change the font color to blue
else{
  row.style.color = "blue";
}

Upvotes: 2

Related Questions