React Base64 Decode

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
    const { useState } = React;

function App() {
            const [inputString, setInputString] = useState("fontawesomeicons.com");
            const [encodedString, setEncodedString] = useState("Zm9udGF3ZXNvbWVpY29ucy5jb20=");

const handleInputChange = (event) => {
                setInputString(event.target.value);
            }

const handleEncodeClick = () => {
                const encoded = btoa(inputString);
                setEncodedString(encoded);
            }

return (
                <div className="container">
                    <h3>React Js btao() function </h3>
                    <p>Encode String to base64 in React Js</p>
                    <label htmlFor="input">Input string:</label>
                    <input type="text" id="input" value={inputString} onChange={handleInputChange} />
                    <button onClick={handleEncodeClick}>Encode to Base64</button>
                    <label htmlFor="output">Encoded string:</label>
                    <textarea id="output" value={encodedString} readOnly />
                </div>
            );
        }
        ReactDOM.render(<App />, document.getElementById('app'));
    </script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }

.container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

label {
            display: block;
            margin-bottom: 10px;
            font-weight: bold;
        }

input[type="text"],
        textarea {
            display: block;
            width: 100%;
            padding: 10px;
            font-size: 16px;
            line-height: 1.4;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
            resize: none;
            margin: 10px 0
        }

button {
            background-color: #4caf50;
            color: #fff;
            font-size: 16px;
            font-weight: bold;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.2s;
            margin-bottom: 10px;
        }

button:hover {
            background-color: #3e8e41;
        }
    </style>
</body>
</html>

 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
    const { useState } = React;
​
        function App() {
            const [inputString, setInputString] = useState("fontawesomeicons.com");
            const [encodedString, setEncodedString] = useState("Zm9udGF3ZXNvbWVpY29ucy5jb20=");
​
            const handleInputChange = (event) => {
                setInputString(event.target.value);
            }
​
            const handleEncodeClick = () => {
                const encoded = btoa(inputString);
                setEncodedString(encoded);
            }
​
            return (
                <div className="container">
                    <h3>React Js btao() function </h3>
                    <p>Encode String to base64 in React Js</p>
                    <label htmlFor="input">Input string:</label>
                    <input type="text" id="input" value={inputString} onChange={handleInputChange} />
                    <button onClick={handleEncodeClick}>Encode to Base64</button>
                    <label htmlFor="output">Encoded string:</label>
                    <textarea id="output" value={encodedString} readOnly />
                </div>
            );
        }
        ReactDOM.render(<App />, document.getElementById('app'));
    </script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
​
        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
​
        label {
            display: block;
            margin-bottom: 10px;
            font-weight: bold;
        }
​
        input[type="text"],
        textarea {
            display: block;
            width: 100%;
            padding: 10px;
            font-size: 16px;
            line-height: 1.4;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
            resize: none;
            margin: 10px 0
        }
​
        button {
            background-color: #4caf50;
            color: #fff;
            font-size: 16px;
            font-weight: bold;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.2s;
            margin-bottom: 10px;
        }
​
        button:hover {
            background-color: #3e8e41;
        }
    </style>
</body>
</html>