Build a React.js RGBA to HEX Color Converter Web App in Javascript Full Project For Beginners

 

 

Welcome folks today in this blog post we will be building a react.js rgba to hex color converter in javascript. All the full source code of the application is shown below.

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the following 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>

 

 

style.css

 

 

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

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

 

 

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 Reply