1

So I'm trying to figure out how to change the background color of a page after a countdown timer has been activated. For example I have code below that displays a 5:00 timer that begins counting after selecting the "Start" Button. When you press "Stop" the timer obviously stops, and when you select reset the timer resets to 5:00 and pauses. I patched the javascript code together from two codes I found online (Just now beginning javascript) and it works however I am now trying to figure out a way to change the background color of the page based on the time of the countdown timer.

So between 300 seconds and 90 seconds the color should be "GREEN" Between 90-30 the color should change to "YELLOW" 30 - 0 the color should change to "RED"

Any feedback you guys can give me on my code and how to accomplish the task above would be greatly appreciated. Im just starting out coding so if there is a proper way of doing javascript let me know.

Here is the code for my Countdown timer (javascript):

var seconds = 300;
var t;

function secondPassed() {
    var minutes = Math.round((seconds - 30) / 60);
    var remainingSeconds = seconds % 60;
    if (remainingSeconds < 10) {
        remainingSeconds = "0" + remainingSeconds;
    }
    document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;

}

function countdown() {

    // starts countdown
    secondPassed();
    if (seconds == 0) {} else {
        seconds--;
        t = setTimeout("countdown()", 1000);
    }
}

function cdpause() {
    // pauses countdown
    clearTimeout(t);
};

function cdreset() {
    // resets countdown
    cdpause();
    secondPassed();
};
            
@charset "UTF-8";
        /* CSS Document*/
#countdown {
    font-size: 2em;
    background-color: white;
}
<html>

<head>
    <link rel="stylesheet" type="text/css" href="newTicket2.0.css">
    <script src="Timer.js">
    </script>
</head>

<body onload="cdreset()">
    <span id="countdown" class="timer"></span>

    <input type="button" value="Start" onclick="countdown()">
    <input type="button" value="Stop" onclick="cdpause()">
    <input type="button" value="Reset" onclick="cdreset(seconds = 300)">

</body>

</html>

I am thinking that in order to change the background color the code should be something like this:

function changeColor() {
    if (seconds == 300) {
        document.change.bgColor = "green";
    } else if (seconds == 90) {
        document.change.bgColor = "yellow";
    } else(seconds == 30) {
        `enter code here`
        document.change.bgColor = "red";
    }
}

However, I have not been able to figure out how to change anything without messing up the original product. The color change should be linked to the button click. So once the "start" button is pressed the color should change and continue to change according to the parameters above. Once the counter has reached zero it should stay red until the reset button has been pressed. Once the "reset" button is pressed the color goes back to green and goes to yellow, then red. So it should work in tandem with the timer I just cant seem to get it to work.

Sushil
  • 2,837
  • 4
  • 21
  • 29
zombie dude 789
  • 163
  • 3
  • 15
  • You probably want `document.body.style.backgroundColor = 'red'` – adeneo May 14 '15 at 21:28
  • Ive made the changes to the code but it seems when i add the changeColor() function to the countdown() function it completely removes the timer and nothing works. So im wondering if it is an issue with the timer code. I just need to figure out why it won't work. but at least I know that I was kind of in the right ball park lol. – zombie dude 789 May 14 '15 at 22:07

2 Answers2

1

To change the background of the body of your page, use the following line:

document.body.style.background = colorString;

If you have a div or some other element that takes up the entire background, make sure the div has a unique id and use the following line:

document.getElementById("theIdOfYourElement").style.background = colorString;

where "colorString" is the name of the color, or hex/rgb value you want the background to be, formatted as a string.

Ex: "red", or "#FF000", or "rgb(255,0,0)"

Your function changeColor() looks really good, but I would probably use an interval argument in each if statement, like this:

function changeColor() {
if (seconds <= 300 && seconds > 90) {
document.body.style.background = "green";
}

else if (seconds <= 90 && seconds > 30) {
document.body.style.background = "yellow";
}

else {
document.body.style.background = "red";
}

If I'm looking at your code correctly, you would probably want to call changeColor() in the function countdown() where you are decrementing the seconds.

As far as Javascript tips, I think your code looks really good for a beginner - you obviously have coding experience. The only suggestion I have would be that instead of using an empty if statement followed by an else in your function countdown(), try something like this using the not (!) operator:

        if (seconds != 0) { 
        seconds--;
        t = setTimeout("countdown()", 1000);
        changeColor();
        }
Kathy
  • 305
  • 2
  • 9
  • So It seems everytime I try to put in the changeColor() function the countdown timer disappears. Once I remove the changeColor function everything works smooth as ice. So I'm wondering if maybe I need to rewrite the actual countdown timer code to make it work with the changeColor() function. The stuff you wrote out was exactly what I was thinking of, it just doesn't seem to want to work with the buttons or the timer. I guess ill try to rewrite the countdown timer myself. I pieced two codes i found online together. But at least I know I'm on the right track. – zombie dude 789 May 14 '15 at 22:04
  • If you want, you can go ahead and create a [fiddle](http://jsfiddle.net/) and I can take a look at that. It's tough to guess exactly what's going wrong without trying out a live version. – Kathy May 14 '15 at 22:13
  • Also, if this answer works for you, please click the checkmark by the voting buttons to accept the answer. It improves my reputation and helps other people searching for an answer to this issue in the future. – Kathy May 14 '15 at 22:16
  • So I just created the fiddle, but for some reason it is not displaying the number at all. Im using the same code and using my browser and it displays fine. Not sure what the problem is. But check out the code here. [link](https://jsfiddle.net/8wcnpppm/1/) – zombie dude 789 May 14 '15 at 22:35
  • Hey - I had some trouble getting your code to work, so I adapted some code from a [previous SO post](http://stackoverflow.com/questions/20618355/the-simplest-possible-javascript-countdown-timer), which I think is where you probably started also. You can see my solution in this [fiddle](https://jsfiddle.net/8wcnpppm/29/). I think it follows most of your intended behavior, and you can probably adapt from there as needed – Kathy May 15 '15 at 16:56
  • Thanks for taking a look at it. Its actually pretty funny, but i literally just got my code to work like 5 mins ago. Was able to change color and everything. Now my question is how do I make it so that the countdown() button only allows the function to carry out once. Whats happening now is when you click the start button once it counts down by one second. Click it again, it adds a second, so on and so forth. You wouldnt know how to only make it countdown by 1 sec no matter how many times you press it? Thanks for the help. – zombie dude 789 May 15 '15 at 17:02
  • Yeah, I noticed that, too. You could try [setting the disabled attribute to "true"](http://stackoverflow.com/questions/8394562/how-do-i-disable-and-re-enable-a-button-in-with-javascript) once the start button has been clicked, then back to "false" once the reset button is clicked. Good luck! – Kathy May 15 '15 at 17:17
0

to change a color of something use

document.getElementById('[your element id]').style.background="red";

Rainer Plumer
  • 3,693
  • 2
  • 24
  • 42