// will need a HTML page with "root" import React from "react"; import ReactDOM from "react-dom"; const date = new Date(); const currentTime = date.getHours(); const currentMins = date.getMinutes(); let greeting; const customSyle = { color: "" }; if (currentTime < 12) { greeting = "good morning"; customSyle.color = "red"; } else if (currentTime < 18) { greeting = "good evening"; customSyle.color = "blue"; } else { greeting = "good night"; customSyle.color = "puprle"; } ReactDOM.render( <h1 className="heading" style={customSyle}> {currentTime + ":" + currentMins + " " + greeting} </h1>, document.getElementById("root") );
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter