JSFiddle - React, Tailwind, and code Playground

by irbaz

HTML

<div class="con">
        <div class="a">
            <br>
            <h4>STRING TO CHARACTER</h4>
            <br>
            <input type="text" placeholder="Enter the text"id="text">
            <button onclick="find()">OK</button>
            <p>OUTPUT:</p>
            <p id="out"></p>
        </div>
    </div>

CSS

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

JavaScript

function find(){
           
            let data=document.getElementById("text").value;
            let last='';
           for(let i=0;i<data.length;i++){
            last+=`'${data[i]}'`
            document.getElementById("out").innerHTML=last
           }
        }