JSFiddle - React, Tailwind, and code Playground

by irbaz

HTML

<div class="con">
        <div class="b">
            <br>
            <h4>String To UPPERcase</h4>
                <br>
                <input type="text" name="" id="text"placeholder="Enter the String">
            <button onclick="upp()">Convert</button>
            <p>RESULT</p>
            <p id="data"></p>
        </div>
    </div>

CSS

body{
        background-color: cadetblue;
    }
    .con{
        height: 170vh;
        width: 80%;
        margin-left:12%;
        margin-top: 0%;
        background-color: white;
        box-shadow: 1px 1px 20px white;
    }
    .b{
text-align: center;
    }
    button{
        height: 30px;
        width: 15%;
        background-color: black;
        color: white;
        border: 1px solid black;
        cursor: pointer;
    }
    input{
        height: 22px;
    }
    p{
        font-weight: bold;
    }
    a{
        color: black;
        text-decoration: none;
    }

JavaScript

function upp() {
            let str = document.getElementById("text").value;
            let arr = str.split(',');

            for (let i = 0; i < arr.length; i++) {
                arr[i] = arr[i].trim().toUpperCase();
            }

            document.getElementById("data").innerHTML = arr
        }