JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div class="content">
        <div class="col">
            <div class="block">
                <p>Введите текст</p>
                <textarea cols="100" rows="10" id="area1" name="text1" required placeholder="Введите текст для обработки, затем выберите стиль текста"> </textarea>
            </div>
            <div class="block">
                <p>Выберите параметры для нового текста:</p>
                <p>
                    <input type="radio" name="format" value="bold" checked> <b>Жирный</b></p>
                <p>
                    <input type="radio" name="format" value="italic"> <i>Наклонный</i></p>
                <p>
                    <input type="radio" name="format" value="underline"> <ins>Подчеркнутый</ins></p>
                <p>
                    <button id="btn-operation" value="Обработать текст"> Обработать текст</button>
                </p>
            </div>
        </div>
        <div class="col">
            <div class="block">
                <p>Здесь появится обработанный текст</p>
                <textarea cols="100" rows="10" id="area2" name="text2" placeholder="Здесь появится обработанный текст"> </textarea>
            </div>
            <div class="block">
                <p>Количество слов в тексте:
                    <textarea id="warea" readonly rows="1" cols="5"></textarea>
                </p>
                <p>Количество предложений в тексте:
                    <textarea id="sarea" readonly rows="1" cols="5"></textarea>
                </p>
                <p>Количество символов в тексте:
                    <textarea id="symarea" readonly rows="1" cols="5"></textarea>
                </p>
                <p>Количество цифр в тексте:
                    <textarea id="narea" readonly rows="1" cols="5"></textarea>
                </p>
                <p>Длина текста:
                    <textarea id="larea" readonly rows="1" cols="5"></textarea>
                </p>
            </div>
        </div>
    </div>

CSS

* {
        box-sizing: border-box;
    }

    .content {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin: 1 auto;
    }

    .col {
        position: relative;
    }

    .col:first-child {
        flex-basis: 50%;
    }

    .col:last-child {
        flex-basis: 50%;
    }

    .block {
        position: relative;
        padding: 3rem 3rem;
    }
    /*---*/

    .col:first-child .block:nth-child(odd) {
        background: #eee;
    }

    .col:first-child .block:nth-child(even) {
        background: #ddd;
    }
    /*---*/

    .col:last-child .block:nth-child(even) {
        background: #eee;
    }

    .col:last-child .block:nth-child(odd) {
        background: #ddd;
    }

    .section > div {
        display: inline-block;
    }

    textarea {
        resize: none;
    }
		.italic {
			font-style: italic;
		}
		.bold {
			font-weight: bold;
		}
		.underline {
			text-decoration: underline;
		}

JavaScript

let opText = {
	btn: document.getElementById(`btn-operation`),
	events: {
		click: () => {
			let fieldsConf = {
				fieldRaw: document.getElementById(`area1`),
				fieldOp: document.getElementById(`area2`),
				countWords: document.getElementById(`warea`),
				countSentences: document.getElementById(`sarea`),
				countSymbols: document.getElementById(`symarea`),
				countNumbers: document.getElementById(`narea`),
				lengthText: document.getElementById(`larea`),
			};
			fieldsConf.text = fieldsConf.fieldRaw.value.trim();
			if (fieldsConf.text !== ``) {
				fieldsConf.fieldOp.className = `${document.querySelector(`[name="format"]:checked`).value}`;
				fieldsConf.fieldOp.value = fieldsConf.text;
				fieldsConf.countWords.value = fieldsConf.text.split` `.filter(e => e.trim() !== ``).length;
				fieldsConf.countSentences.value = fieldsConf.text.split`.`.length;
				fieldsConf.countSymbols.value = (fieldsConf.text.match(/[A-Za-zА-Яа-я]/gm)||[]).length;
				fieldsConf.countNumbers.value = (fieldsConf.text.match(/\d{1}/gm)||[]).length;
				fieldsConf.lengthText.value = fieldsConf.text.split``.length;
			}
			fieldsConf = undefined;
		},
	},
};
opText.btn.addEventListener(`click`, opText.events.click);
window.addEventListener(`beforeunload`, () => {
	opText.btn.removeEventListener(`click`, opText.events.click);
	opText = undefined;
});