3
\$\begingroup\$

I am fairly new to JS and I am trying to implement a sort of schedule in my website. I have a schedule of speakers and they change every half hour. I would like to display the name of the speaker at the time that they are speaking.

At the moment I have everything working; however, I know I probably did it the most inefficient way possible. I hard coded 48 if statements for every top and bottom of the hour.

<html>
<body>

<h1>Test Java Script</h1>

<p id="demo"></p>

<script>
//setInterval() refreshes the schedule every second 
setInterval(getSchedule, 1000);

function getSchedule(){
var today = new Date()
var curHr = today.getHours()
var curMin = today.getMinutes()

if (curHr == 1 && curMin < 30) {
  document.getElementById("demo").innerHTML = "John";
} else if (curHr == 1 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "George";
} else if (curHr == 2 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Jerry";
} else if (curHr == 2 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Bailey";
} else if (curHr == 3 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Albert";
} else if (curHr == 3 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Smith";
} else if (curHr == 4 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Ralph";
} else if (curHr == 4 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Matt";
} else if (curHr == 5 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Carl";
} else if (curHr == 5 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Bob";
} else if (curHr == 6 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Jared";
} else if (curHr == 6 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Ben";
} else if (curHr == 7 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Alberto";
} else if (curHr == 7 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Lopez";
} else if (curHr == 8 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Anguelo";
} else if (curHr == 8 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Tony";
} else if (curHr == 9 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Pam";
} else if (curHr == 9 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "John";
} else if (curHr == 10 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Mark";
} else if (curHr == 10 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Luke";
} else if (curHr == 11 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Paul";
} else if (curHr == 11 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Geoff";
} else if (curHr == 12 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Gavin";
} else if (curHr == 12 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Peter";
} else if (curHr == 13 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Thomas";
} else if (curHr == 13 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Suarez";
} else if (curHr == 14 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Diane";
} else if (curHr == 14 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Al";
} else if (curHr == 15 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Zak";
} else if (curHr == 15 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Shane";
} else if (curHr == 16 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Jack";
} else if (curHr == 16 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Jill";
} else if (curHr == 17 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Jeff";
} else if (curHr == 17 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Scott";
} else if (curHr == 18 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Ramsey";
} else if (curHr == 18 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Paul";
} else if (curHr == 19 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Bob";
} else if (curHr == 19 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Jack";
} else if (curHr == 20 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Matt";
} else if (curHr == 20 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Nate";
} else if (curHr == 21 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Sam";
} else if (curHr == 21 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Jenny";
} else if (curHr == 22 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Michelle";
} else if (curHr == 22 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "George";
} else if (curHr == 23 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Bill";
} else if (curHr == 23 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Bob";
} else if (curHr == 24 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Bill";
} else if (curHr == 24 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Bob";
} 
}
</script>
</body>
</html>

I would like to know if there is a way to simplify my code. I was thinking about using an array that has all the names of the speakers; however, how would I iterate through it at the exact times.

\$\endgroup\$

1 Answer 1

Reset to default
2
\$\begingroup\$

First of all, it seems to me that getHours() returns a number between 0 and 23. According to the MDN:

Return value: An integer number, between 0 and 23, representing the hour for the given date according to local time.

Therefore, your if conditions have a little problem (curHr will never be 24), but it's easy to fix.

Back to your question:

There are several ways to simplify your code. The one I'm proposing here coincidentally uses your suggested approach (an array with all the speakers).

Your code, the way it is right now, simply divides the day into 48 buckets, and assigns a speaker to each one of then. That being the case, here is a simpler way to do the same:

  1. First, define an array with the speakers:

    var speakersArray = ["Bill", "Bob", "John", "George", etc...];

    Pay attention to the fact that I'm staring with "Bill", not with "John", since "Bill" is the one that starts at midnight, and "Bob" is the next one, starting at 12:30 am.

  2. Then, get the number of seconds since midnight:

    var today = new Date()
var secondsToday = ~~((today.getTime() - today.setHours(0, 0, 0, 0)) / 1000);

    I know some people don't like the double tilde (the bitwise NOT) to get the integer, because of readability, and they consider it an anti-pattern... anyway, even if it's not readable, it's simple and fast. Change for another method to get the integer (like Math.floor) if you want.

  3. Finally, knowing that half-hour has 1800 seconds, get the index of the array:

    document.getElementById("demo").innerHTML = speakersArray[~~(secondsToday / 1800)];

So, the whole function can be simplified to just this:

function getSchedule() {
    var today = new Date()
    var secondsToday = ~~((today.getTime() - today.setHours(0, 0, 0, 0)) / 1000);
    document.getElementById("demo").innerHTML = speakersArray[~~(secondsToday / 1800)];
}

Here is the demo, compare it with the snippet in your question, the result should be the same (except for the last two conditions, since curHr will never be 24):

<h1>Test Java Script</h1>

<p id="demo"></p>

<script>
  var speakersArray = [
    "Bill",
    "Bob",
    "John",
    "George",
    "Jerry",
    "Bailey",
    "Albert",
    "Smith",
    "Ralph",
    "Matt",
    "Carl",
    "Bob",
    "Jared",
    "Ben",
    "Alberto",
    "Lopez",
    "Anguelo",
    "Tony",
    "Pam",
    "John",
    "Mark",
    "Luke",
    "Paul",
    "Geoff",
    "Gavin",
    "Peter",
    "Thomas",
    "Suarez",
    "Diane",
    "Al",
    "Zak",
    "Shane",
    "Jack",
    "Jill",
    "Jeff",
    "Scott",
    "Ramsey",
    "Paul",
    "Bob",
    "Jack",
    "Matt",
    "Nate",
    "Sam",
    "Jenny",
    "Michelle",
    "George",
    "Bill",
    "Bob"
  ];

  setInterval(getSchedule, 1000);

  function getSchedule() {
    var today = new Date()
    var secondsToday = ~~((today.getTime() - today.setHours(0, 0, 0, 0)) / 1000);
    document.getElementById("demo").innerHTML = speakersArray[~~(secondsToday / 1800)];
  }

</script>

PS: setting a setInterval to run every second seems a bit resource-intensive to me (browsers are insanely fast today, though...). Therefore, you could use my secondsToday and the fact that half-hour has 1800 seconds to easily schedule the setInterval to run the exact moment the speaker changes.

\$\endgroup\$
2
  • \$\begingroup\$ @Peilonrayz Sorry, I was not aware of that. Please roll it back. \$\endgroup\$
    – Gerardo Furtado
    Commented Jan 24, 2018 at 12:33
  • 1
    \$\begingroup\$ No problem. It's not expected everyone will know the rules. I just wanted to let you know, :) \$\endgroup\$
    – Peilonrayz ♦
    Commented Jan 24, 2018 at 12:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.