How to build a Text Converter? | Frontend Coding Challenge | React.js | Beginner

Your task is to build a simple tool that can be used to convert the provided text into uppercase, lowercase, encode Base64 and decode Base64. These are some basic functionalities.

Feel free to add more conversion functionalities, validations, and many more operations like copy text etc.

The following mockups are just for demo. Feel free to design this in any way you want.

Mockups:

Demo:

Expected behaviour

If the app were given the following as input:

This is some text.

Submitting the form with the "Convert text to uppercase" radio selected should output the following:

THIS IS SOME TEXT.

Submitting the form with the "Convert text to lowercase" radio selected should output the following:

this is some text.

Submitting the form with the "Encode Base64" radio selected should output the following:

VGhpcyBpcyBzb21lIHRleHQu

Submitting the form with the above output and "Decode Base64" radio selected should output the following:

This is some text.

How your code will be evaluated

Your code will be evaluated on three criteria:

Correctness: Does it follow all the instructions?

Code quality: Is it readable and well structured?

Idiomatic code style: Does it follow the stylistic conventions of the language, such as indentation and capitalization?