Modify the font color within a JavaScript countdown

I'm trying to create a timer that changes the font color of a div with the ID "clear" at the one-minute and two-minute marks. However, I'm having trouble getting it to work properly.

var ho1 = document.getElementsByTagName('ho1')[0],
    clear = document.getElementById('clear'),
    seconds = 0,
    minutes = 0,
    hours = 0,
    t;

function add() {
    seconds++;
    if (seconds >= 60) {
        seconds = 0;
        minutes++;
    }

    ho1.textContent = (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);

    timer();
}

function timer() {
    t = setTimeout(add, 1000);
}

timer();

Is there anyone who can offer assistance? The color change is defined in the style of the DIV.

javascriptcsstimercolors

Answer №1

In the section of your code where you are evaluating the variable seconds

if (seconds >= 60) {
    seconds = 0;
    // checking for minutes
    minutes++;
    if(minutes===1) ho1.style.color = "red";
    if(minutes===2)  ho1.style.color = "green";
}

Answer №2

Using jQuery and a Switch-case Statement:

window.counter = 0;

function changeBackgroundColor() {
  switch (window.counter) {
    case 0:
        setTimer('white');
        break;
    case 1:
       setTimer('red');
       setTimer();
       break;
    case 2:
       setTimer('green');
       break;
    default:
       console.log('end');
       break;
  }
}

function setTimer(color) {
  $('#clear').css('background-color', color);
  setTimeout(changeBackgroundColor, 1000);
  window.counter = window.counter + 1;
}
setTimer('black');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Obtain navigation instructions from current location to destination when marker is selected

I have successfully generated a map with markers loaded from an XML file and determined my current location. However, I am facing trouble in getting directions from my location to a marker when clicked. The code I have seems to be working fine for everyt ...

javascriptphpgoogle-mapsgeolocation

What is causing the action button in my MUI snackbar to occupy an additional line?

I'm currently learning how to use MUI and I'm struggling with a specific issue. The close button in my code is appearing on a separate line, but I want it to be on the same line as the word "again". I've tried experimenting with absolute pos ...

cssreactjsmaterial-uijsxsnackbar

Arranging Bootstrap 4 columns in a vertical stack

My HTML code is as follows: <html> <head> <title>Title</title> <meta charset="utf-8"> <meta name="description" content="description"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <li ...

htmlcssbootstrap-4

Guide on aligning a series of divs in a single row within a parent div

Within the confines of a 400px wide div called "container", there are six left-floated "box" divs, each 100px wide. The combined width of the "box" divs exceeds 400px, resulting in the divs wrapping onto two lines, with 4 on the first and 2 on the second ...

css

What is the best way to call the app.js function from an HTML page in an Express.js environment

Is there a way to trigger the function init() { // } located in app.js from an HTML page? <a href='javascript:init();'> Trigger init </a> The issue with the code above is that it searches for function init() only on the client side ...

javascriptnode.jsexpress

Tips for implementing permission-based functions in a React frontend with a Django Rest API

I am currently using Django Rest Framework in conjunction with React on the frontend. Utilizing Token Authentication has been successful for me thus far. Now, I am looking to add permission-based functions to my React frontend. Specifically, I want only th ...

javascriptdjangoreactjsdjango-rest-frameworkpermissions

There seems to be an issue with the HighCharts Pie Chart where the total value is not

I'm struggling to show the total number of users on the PieChart. Unfortunately, my code for "getting the total" isn't working as expected and nothing is being displayed. Here's the code snippet I'm using: events: { load: func ...

javascriptphphighcharts

Tips for swapping out the data array in my ChartJS graph

I am currently working on a project that involves changing the data array of a chart with a completely different one. Unfortunately, although my code is successfully updating the labels of the chart, the data itself remains unchanged and I cannot figure ou ...

javascriptarrayschart.js

Vue.js is displaying an error message stating that the data property is

I am struggling to access my data property within my Vue.js component. It seems like I might be overlooking something obvious. Below is a condensed version of my code. The file StoreFilter.vue serves as a wrapper for the library matfish2/vue-tables-2. &l ...

javascriptlaravelvue.jsvuejs2vue-component

Using Google's Closure Compiler to Optimize JSON Files

When dealing with a json string that is parsed and properties of the object are accessed using dot notation, a warning may be triggered by the google closure compiler stating that the property is not defined. To overcome this issue, one workaround is to c ...

javascriptjsongoogle-closure-compiler

What could be the reason behind the appearance of borders in my modal window?

I can't seem to find the source of the 2 silver borders in my modal. I've checked the CSS code, tried using developer tools, and looked through the entire code but still can't figure it out. Here is the JSX code I'm working with: impor ...

javascripthtmlcssreactjs

Sending data to a child component through an onClick event handler

Can someone help me figure out how to make the Overlay inside the InviteButton visible when clicking on it? I want to use the prop show={true}, but I'm struggling with this implementation. Any assistance or guidance would be greatly appreciated. ----f ...

javascriptreactjs

Attempting to retrieve and substitute the final value within an input field by cross-referencing or evaluating it against a different value

Can you help me with a solution for fetching the last value (word or character) in an input box, storing it in a variable, and then replacing it with one of a set of values that match exactly or partially? The items within the bindname-block contain vario ...

javascriptjqueryhtml

Attempting to include a new choice on a drop-down menu and ensure its visibility within the drop-down menu

On my journey into the world of web development, I am facing a challenge with adding an option to a dropdown list. Despite pressing the add button to insert "Pasta" as a new option, it is not showing up in the list immediately. However, selecting all optio ...

javascriptjquery

How to place a child <div> within a parent <div> that is fixed on the page

I am currently working on creating a modal window using HTML/CSS. My goal is to have the modal window fixed in position relative to the browser window, with a white background. Inside the modal, there will be an image at the top and a div element at the bo ...

htmlcss

Angular 6 CSS spacing dilemmas

We recently made the switch from Angular 5 to Angular 6 and noticed that there is no spacing between the buttons/icons, etc. We are looking to bring back the spaces between the buttons and icons. I have recreated the issue below. As you can see in the Ang ...

javascriptcssangularangular5angular6

Endless AngularJS loop using ng-view

I recently started experimenting with AngularJS for a new project I am working on, but I have encountered a problem when dealing with routes and views. For the sake of simplicity, I have minimized this example to its basic form, yet the issue persists. Th ...

javascriptangularjsinfinite-loop

Creating an HTML form that allows for multiple entries without the need for JavaScript serialization

I'm in the process of creating a straightforward form that allows users to add multiple photos before uploading. Right now, I'm manually generating an object using JavaScript. var objArr = []; for(var i = 0; i < arrayOfInputs.length; i++){ ...

javascripthtml

Having trouble displaying form in a different view, form is not appearing as expected

I am facing an issue with rendering a form inside a modal. The form is being rendered but the form_for does not show up, only the inputs are visible. This prevents me from targeting the submit button, which I need for ajax functionality. My file path: Adg ...

javascriptjqueryruby-on-railsajaxforms

Replace the term "controlled" with "unleashed" when utilizing the file type input

In my app, I have defined multiple states like this: const [state,setstate]=React.useState({headerpic:'',Headerfontfamily:'',Subheaderfontfamilty:''}) And to get an image from my device, I am using the following input: &l ...

javascriptreactjsreact-hookscontrolled-component