How to change the color of the text dynamically?

Question

I wanted to change the color of the heading during specific times of the day.(e.g At night blue, in the morning green...) For this I'm trying to use inline-css(inside js file).

My css file:

.heading {
  font-size: 50px;
  font-weight: bold;
  border-bottom: 5px solid black;
}

My js file:

import React from "react";
import ReactDOM from "react-dom";

const root = document.getElementById("root");

const curretnTime = new Date().getHours();

if (curretnTime < 12 && curretnTime >= 0) {
  ReactDOM.render(
    <div>
      <h1 className="heading">Good Morning</h1>
    </div>,
    root
  );
} else if (curretnTime >= 12 && curretnTime <= 18) {
  ReactDOM.render(
    <div>
      <h1>Good Afternoon</h1>
    </div>,
    root
  );
} else {
  ReactDOM.render(
    <div>
      <h1>Good Evening</h1>
    </div>,
    root
  );
}

I know it is pretty easy question to ask, but any answer would be helpful. Thank you.

Answer 1

//YOu can try this

import React from "react";
import ReactDOM from "react-dom";

const today = new Date();
const hour = today.getHours();

const text = {
  color: "",
  backgroundColor: ""
};

let greet;

if (hour >= 0 && hour < 12) {
  greet = "Good morning";
  text.color = "orange";
  text.backgroundColor = "blue";
} else if (hour >= 12 && hour < 16) {
  greet = "Good Afternoon";
  text.color = "blue";
  text.backgroundColor = "orange";
} else if (hour >= 16 && hour < 19) {
  greet = "Good Evening";
  text.color = "white";
  text.backgroundColor = "purple";
} else {
  greet = "Good Night";
  text.color = "grey";
  text.backgroundColor = "pink";
}

ReactDOM.render(<h1 style={text}>{greet}</h1>, document.getElementById("root"));

Answer 2

You can try this:-

import React from "react";
import ReactDOM from "react-dom";

const curretnTime = new Date().getHours();

let greetings;
const customStyle = {
  color: ""
  };

 if (curretnTime < 12) {
  greetings = "Good Morning";
  customStyle.color = "red";
 } else if (curretnTime < 18) {
  greetings = "Good Evening";
  customStyle.color = "green";
 } else {
  greetings = "Good Night";
  customStyle.color = "blue";
 }

 ReactDOM.render(<h1 className="heading" style={customStyle} > 
 {greetings}</h1>, document.getElementById("root"));

Answer 3

You can trying using the following code:

import React from "react";
import ReactDOM from "react-dom";

const currentDate = new Date();
//const hour = 19; // anything b/w 0 - 24 to check
const hour  = currentDate.getHours();

let greeting = "Good Evening";
let colorStyle = { color: "blue" };

if (hour >= 0 && hour <= 12) {
    greeting = "Good Morning";
    colorStyle = { color: "red" };
} 
else if (hour >= 12 && hour <= 18) {
    greeting = "Good Afternoon";
    colorStyle = { color: "green" };
}

ReactDOM.render(
  <div>

      <h2 style={colorStyle}>{greeting}</h2>

  </div>,
  document.getElementById("root")
);

Answer 4

You could do this:

import React from 'react';
import ReactDOM from 'react-dom';

const time = new Date().getHours();
let greeting;
let color = {};

if (time <= 12) {
  greeting = 'Good morning';
  color.color = 'red';
} else if (time > 12 && time <= 18) {
  greeting = 'Good afternoon';
  color.color = 'green';
} else {
  greeting = 'Good night';
  color.color = 'blue';
}

ReactDOM.render(
  <h1 className="heading" style={color}>
    {greeting}
  </h1>,

  document.getElementById('root')
);

Answer 5

You should use inline styles, like:

import React from "react";
import ReactDOM from "react-dom";

const root = document.getElementById("root");

const curretnTime = new Date().getHours();

let timeOfDay = 'evening';   // not used

let timeOfDayColor = 'blue';
let timeOfDayMessage = 'Good Evening';

if (curretnTime < 12 && curretnTime >= 0) {
   timeOfDay = 'morning';

   timeOfDayColor = 'green';
   timeOfDayMessage = 'Good Morning';

} else if (curretnTime >= 12 && curretnTime <= 18) {
   timeOfDay = 'afternoon';

   timeOfDayColor = 'purple';
   timeOfDayMessage = 'Good Afternoon';
}

ReactDOM.render(
    <div>
      <h1 className="heading" style={{backgroundColor: timeOfDayColor}} >{timeOfDayMessage}</h1>
    </div>,
    root
);

The style={{backgroundColor: timeOfDayColor}} is your inline style that overrides the CSS style : https://www.w3schools.com/react/react_css.asp

However, you should really use components and not have all the code in the ReactDOM.render method. Maybe try a react tutorial first: https://reactjs.org/tutorial/tutorial.html

Answer 6

I think that you are not using inline-css - To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.. But that is just "definition".

Anyway, what are you doing is not correct. You should create a component (see: https://reactjs.org/docs/react-component.html) where you will have logic for the change of color (see: https://reactjs.org/docs/faq-state.html#what-does-setstate-do - you can save the color in state). Then you can add the componentDidMount method and there you can add setInterval - so you can basically set "every X hour I will change the color".

Answer 7

You can do it in different ways, one of them is below:

JS file

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";

const root = document.getElementById("root");

const curretnTime = new Date().getHours();
if (curretnTime < 12 && curretnTime >= 0) {
  ReactDOM.render(
    <div className="morning">
      <h1>Good Morning</h1>
    </div>,
    root
  );
} else if (curretnTime >= 12 && curretnTime <= 18) {
  ReactDOM.render(
    <div>
      <h1>Good Afternoon</h1>
    </div>,
    root
  );
} else {
  ReactDOM.render(
    <div className="evening">
      <h1>Good Evening</h1>
    </div>,
    root
  );
}

CSS file

h1 {
  font-size: 50px;
  font-weight: bold;
  border-bottom: 5px solid black;
}

.morning {
  color: green;
}

.evening {
  color: blue;
}

Answer 8

I'd recommend using different classes over inline css.

.heading {
  font-size: 50px;
  font-weight: bold;
  border-bottom: 5px solid black;
}

.heading.morning {
  color: green;
}

.heading.afternoon {
  color: purple;
}

.heading.night {
  color: blue;
}

if (currentTime < 12 && currentTime >= 0) {
  ReactDOM.render(
    <div>
      <h1 className="heading morning">Good Morning</h1>
    </div>,
    root
  );
} else if (currentTime >= 12 && currentTime <= 18) {
  ReactDOM.render(
    <div>
      <h1 className="heading afternoon">Good Afternoon</h1>
    </div>,
    root
  );
} else {
  ReactDOM.render(
    <div>
      <h1 className="heading night">Good Evening</h1>
    </div>,
    root
  );
}