CODEWITHSUNDEEP
javascript
Aiya Siddig
Aiya Siddig

Reputation: 111

How do I color code time-blocks using js?

I'm working on a planner and would like to color code time blocks based on if the hour is past current or present, but my code is not working and I cant figure out why.

Here is my html

<div class = "container" spellcheck="false">
    <div class = "row my-row">
        <div class = "col my-col col-a1 colorcode" id = "9"> 9am </div>
        <div class = "col my-col col-a2 edit_cont" > </div>
        <div class = "col my-col col-a3 edit_btn"> edit </div>
    </div>
    <div class = "row my-row" >
        <div class = "col my-col col-b1 colorcode" id = "10"> 10am </div>
        <div class = "col my-col col-b2 edit_cont">  </div>
        <div class = "col my-col col-b3 edit_btn"> edit </div>
    </div>
    <div class = "row my-row" >
        <div class = "col my-col col-c1 colorcode" id = "11" > 11am </div>
        <div class = "col my-col col-c2 edit_cont">  </div>
        <div class = "col my-col col-c3 edit_btn"> edit </div>
    </div>

(+ MORE ROWS)

And here is my JS:

    const colorcode = document.getElementsByClassName("color");
let currentHour = parseInt(moment().format('H'));

Array.from(colorcode).forEach(colorcode => {
  let
    colorcodeIdString = colorcode.id,
    colorcodeHour;
  if (colorcodeIdString) {
    colorcodeHour = parseInt(colorcodeIdString);
  }
  if (colorcodeHour) {
    if (currentHour === colorcodeHour) {
      setColor(green);
    } else if ((currentHour < colorcodeHour) && (currentHour > colorcodeHour - 6)) {
      setColor(color, "blue");
    } else if ((currentHour > colorcodeHour) && (currentHour < colorcodeHour + 6)) {
      setColor(color, "red");
    } else {
      setColor(color, "white");
    }
  }
});

function setColor(element, color) {
  element.style.backgroundColor = color;

Upvotes: 1

Views: 1307

Answers (3)

user3647971
user3647971

Reputation: 1056

const colorcode = document.getElementsByClassName("colorcode");//<- switched to get elements with class corresponding to the given html
let currentHour = Date.now().getHours();//get current time hour

colorcode.forEach(function(colorcodedDiv){//just a syntax I use
    let colorcodeHour = parseInt(colorcodedDiv.id);
  if (colorcodeHour) {
    if (currentHour === colorcodeHour) {
      setColor(colorcodedDiv, "Red");//switched to reference the iterated element
    } else if ((currentHour < colorcodeHour) && (currentHour > colorcodeHour - 6)) {
      setColor(colorcodedDiv, "Green");
    } else if ((currentHour > colorcodeHour) && (currentHour < colorcodeHour + 6)) {
      setColor(colorcodedDiv, "LightGrey");
    } else {
      setColor(colorcodedDiv, "White");
    }
  }
});
function setColor(element, color) {
    element.style.backgroundColor = color;
}//added curly bracket since it was missing

Here's a jQuery example:

var currentHour = Date.now().getHours();
$('.colorcode').each(function(){
    var val = parseInt($(this).prop('id'));
    if(val > currentHour && val < currentHour+6){
        $(this).css('background-color','Blue');
    }else if(val < currentHour && val > currentHour-6){
        $(this).css('background-color','Red');
    }else if(val === currentHour){
        $(this).css('background-color','Green');
    }else{
        $(this).css('background-color','White');
    }
});

Upvotes: 1

Rob Monhemius
Rob Monhemius

Reputation: 5144

There are so many things you could improve.

document.getElementsByClassName("color"); doesn't select anything because there are no elements with a class called color.

Especially try to name your variable colorcode differently. Noone would expect this to be a NodeList.

I mentioned a few suggestions in a working example below. It is far from a foolproof solution, but it should get you started and offers some suggestions on how to improve your code and what to look into.

function check_time(){
  // select all time classes
  let nodes = document.querySelectorAll('.time');
  for (let node of nodes ) {
    // should get the time using Date(), but for this example a fixed hour always works ;)
    const current_time = 12; 
    // get the time from a data-attribute, don't use an id for this!
    const node_time = parseInt(node.getAttribute('data-time'));
    // add a relevant class, much easier to maintain/update than styling elements inside your JS
    if(current_time === node_time )
      node.classList.add('now');
    else if(current_time > node_time )
      node.classList.add('past');
    else if(current_time < node_time )
      node.classList.add('future');
  }
}

// use window.setTimeout(...) to check frequently to keep up to date. I just called the function once instead of periodically.
check_time();
.now{
  color: green;
}
.past{
  color: red;
}
.future{
  color: grey;
}
<div class = "time" data-time="11" > 10am </div>
<div class = "time" data-time="12" > 11am </div>
<div class = "time" data-time="13" > 12am </div>

Upvotes: 1

movie_nerd
movie_nerd

Reputation: 31

just as an idea, but if you use .css it would be about like this:

$("#id_of_time").css("color", "#ff0000");

that script essentially just changes the color of the selected #id, you can replace "color" with "background-color" to change that as well, or any css value honestly. also you can replace

$("#id_of_time")

with a var or a simple getElementById since i beleive $. is Ajax specific but i could be wrong on that part

Upvotes: 1

Related Questions