Create a React.js RGBA color to HEX Color Change Web App in Javascript Complete Project

Welcome Learner today in this blog post we will be using React.js RGBA color to HEX Color Change Web App in Javascript. All the Complete source code of the application is shown Down.

In order to lets started, you need to make a file index.html and copy-paste the mentioned code

index.html 

 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css"/>
<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>

READ – 

  1. React.js Unsplash API Demo to Get Image By Pagination Using Axios in Javascript Complete Project For learner
  2. React.js User Profile Card in Browser Via Github API With Javascript complete Project For learner

 

style.css 

 

#root {
  background: linear-gradient(to bottom, #a2ded0, #ffffff);
  padding-bottom: 2.5rem;
}

label {
  font-size: 10px;
  margin-bottom: 2px;
}

 

And now create a script.js file and copy-paste the Given code.

script.js 

 

"use strict";

console.clear(); // rgb(171,79,152) = #ab4f98
// hsl(208,88,118)
// rgb(87,87,86) = #575756
// rgb(71,71,69) = #474744
// rgb(77,78,76) = #4d4e4c
// rgb(69,70,68) = #454644
// rgb(248,241,246) = #f8f1f6
// rgb(251,244,249) = #fbf4f9

function Color(props) {
  const [r, setR] = React.useState(171);
  const [g, setG] = React.useState(79);
  const [b, setB] = React.useState(152);
  let backgroundColor = '#000000';

  if (typeof r === 'number' && typeof g === 'number' && typeof b === 'number') {
    backgroundColor = `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
  }

  React.useEffect(() => {
    if (typeof r === 'string') {
      setR(parseInt(r));
    }
  }, [r]);
  React.useEffect(() => {
    if (typeof g === 'string') {
      setG(parseInt(g));
    }
  }, [g]);
  React.useEffect(() => {
    if (typeof b === 'string') {
      setB(parseInt(b));
    }
  }, [b]);
  React.useEffect(() => {
    if (typeof r === 'number' && typeof g === 'number' && typeof b === 'number') {
      backgroundColor = `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
    }
  }, [r, g, b]);
  return /*#__PURE__*/React.createElement("div", {
    className: "row"
  }, /*#__PURE__*/React.createElement("div", {
    className: "col-6"
  }, /*#__PURE__*/React.createElement("h4", null, "RGB"), /*#__PURE__*/React.createElement("label", null, "R"), /*#__PURE__*/React.createElement("input", {
    type: "number",
    className: "form-control",
    value: r,
    onChange: e => setR(e.target.value)
  }), /*#__PURE__*/React.createElement("label", null, "G"), /*#__PURE__*/React.createElement("input", {
    type: "number",
    className: "form-control",
    value: g,
    onChange: e => setG(e.target.value)
  }), /*#__PURE__*/React.createElement("label", null, "B"), /*#__PURE__*/React.createElement("input", {
    type: "number",
    className: "form-control",
    value: b,
    onChange: e => setB(e.target.value)
  })), /*#__PURE__*/React.createElement("div", {
    className: "col-6"
  }, /*#__PURE__*/React.createElement("h4", null, "Hex"), /*#__PURE__*/React.createElement("div", {
    className: "text-muted text-monospace mb-3"
  }, backgroundColor), /*#__PURE__*/React.createElement("h4", null, "Preview"), /*#__PURE__*/React.createElement("div", {
    style: {
      backgroundColor,
      width: 75,
      height: 75
    }
  })));
}

function App(props) {
  return /*#__PURE__*/React.createElement("div", {
    className: "container-fluid"
  }, /*#__PURE__*/React.createElement("h1", {
    className: "text-center"
  }, "ReactJS: Color converter (RGB to Hex)"), /*#__PURE__*/React.createElement("hr", null), /*#__PURE__*/React.createElement(Color, null));
}
/* Util */


function trace(value, size) {
  if (typeof size === 'number' && size > 0) {
    console.log(JSON.stringify(value, null, size));
  } else {
    console.log(value);
  }
}

function PreCode(props) {
  const {
    children,
    value,
    size = 2
  } = props;

  if (typeof value === 'string' && value.length > 0 || typeof value === 'object' || typeof value === 'number' || typeof value === 'boolean') {
    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("pre", null, /*#__PURE__*/React.createElement("code", null, JSON.stringify(value, null, size))));
  }

  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("pre", null, /*#__PURE__*/React.createElement("code", null, JSON.stringify(children, null, size))));
}

ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById('root'));

Leave a Comment

Your email address will not be published. Required fields are marked *