Untitled

 avatar
unknown
plain_text
3 years ago
7.7 kB
5
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
        integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>
<body >
    <div class="container-fluid">
        <p><label for="text">Review of W3Schools:</label></p>
        
        <!-- <textarea id="text" name="w3review" rows="4" cols="50">
        </textarea>
        <div id="count"></div> -->
        <textarea rows="15" cols="30" name="t1" id="text"></textarea>
        <div class="theCount">Lines used: <span id="linesUsed">0</span>
            <div>
        <!-- <div class="row" >
            <div class="col-12 col-lg-5 ml-auto">
                <input type="number" name="row" id="enterRows">
            </div>
            <div class="col-12">
                <div class="row div-row" id="main_div" style="background-color: rosybrown; display: none;">
                    <div class="col-12 col-md-3 col-lg-3 col-xl-3" style="border: 1px solid white;">
                        <label for="">Label1</label>
                    </div>
                    <div class="col-12 col-md-4 col-lg-4 col-xl-4" style="border: 1px solid white;">
                        <label for="" id="question"></label>
                    </div>
                    <div class="col-12 col-md-5 col-lg-5 col-xl-5" id="ques_response" style="border: 1px solid white;">
                         <input type="checkbox">
                        <label for="test" id="response"></label>   -->
                    <!-- </div>
                </div>
                <div class="main-div container-fluid" id="main_div_template">
                </div>
                <div class="inner-data" id="inner_data" style="display: none;">
                    <input type="checkbox" name="test" id="test">
                    <label for="test" id="response"></label>
                </div>
            </div>
            
        </div>  -->
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
    integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js"
    integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous">
</script>
<!-- <script>
$(document).ready(function(){
    $("#enterRows").val('');
    $("#enterRows").change(function(){
        let numOfRows = ["Apple","banana","milk","oats"];
        var innerData = [{"a":"data1"},{"b":"data2"}];
        var inner_data_length = Object.values(innerData);
        console.log(inner_data_length)
        inner_data_length.forEach(element => {
        let res = innerData.map(x => Object.values(x)[0]);
        console.log(res[0]);
        // console.log(innerData.map(value,'a'));
            
            
        });
        // console.log(Object.entries(innerData));
        // console.log(inner_data_length[1].length);
        
        let main_div_template = document.getElementById('main_div_template');
        main_div_template.innerHTML="";
        let ques_response = document.getElementById('ques_response');
        // ques_response.innerHTML="";
        console.log("hi");
        console.log(numOfRows);
        var i=0;
        for (let numRow=0; numRow<numOfRows.length; numRow++){
            console.log(numRow);
            ques_response.innerHTML="";
            document.getElementById('question').innerHTML=numOfRows[numRow];
            for(let data=0;data<inner_data_length[i].length;data++){
                console.log(i);
                // for(let appendData = 0 ; appendData<inner_data_length[data].length;appendData++){
                console.log("data",data);
                console.log(innerData[data]);
                // ques_response.setAttribute("id","ques_response_" + data);
                document.getElementById('response').innerHTML=inner_data_length[i][data];
                let dataToBeCloned = document.getElementById('inner_data').cloneNode(true);
                dataToBeCloned.id = 'inner_data_'+ numRow;
                dataToBeCloned.querySelector('label').id = 'response_'+numRow+data;
                // dataToBeCloned.setAttribute("id","inner_data_"+ data);
                dataToBeCloned.style.display='';
                ques_response.appendChild(dataToBeCloned);
                // }
                
            }
            i++;
            // data=0;
            let rowToBeCloned = document.getElementById('main_div').cloneNode(true);
            rowToBeCloned.setAttribute("id","main_div"+numRow);
            rowToBeCloned.style.display='';
            main_div_template.appendChild(rowToBeCloned);
        }
    });
    
});
</script> -->
<script>
    $(document).ready(function(){
        $("#text").keydown(function (e) {
            $(this).val(limitRowsAndChar($(this).val()))
        });

        function limitRowsAndChar(value,maxRows=7,maxChar=10){
            let lines = value.split(/(\r\n|\n|\r)/gm);
            console.log("lines",lines);
            for (var i = 0; i < lines.length; i++) {
                if (lines[i].length > maxChar) {
                    lines[i] = lines[i].substring(0, maxChar);
                    console.log(lines[i]);
                    alert("max character limit exceeded")
                }
            }
            let linesEntered = lines.filter((line, index) => {
                return line != '\n';

            });
            console.log("lines Entered",linesEntered);
            if (linesEntered.length > maxRows) {
                console.log("max lines reached");
                // lines=['abc','efg,'klji\n']
                lines[lines.length - 1] = lines[lines.length - 1].substring(0, lines[lines.length - 1].length - 2)
                alert("max lines reached");
                // return false;
            }
            
            return (lines.join(''));
        }
        // var linesUsed = $('#linesUsed');

        // $('#text').keydown(function (e) {

        //     newLines = $(this).val().split("\n").length;
        //     console.log("nexlines",newLines);
        //     // linesUsed.text(newLines);

        //     if (e.keyCode == 13 && newLines >= lines) {
        //         // linesUsed.css('color', 'red');
        //         alert("max limit exceeded");
        //         return false;
        //     }
        // });

        
    });
    
    //  var wordLen = 10; // Maximum word length
    //     function checkWordLen(obj) {
    //         var len = obj.value.split(/[\s]+/);
    //         console.log(len)
    //         if (len.length > wordLen) {
    //             alert("You cannot put more than " + wordLen + " words in this text area.");
    //             obj.oldValue = obj.value != obj.oldValue ? obj.value : obj.oldValue;
    //             obj.value = obj.oldValue ? obj.oldValue : "";
    //             return false;
    //         }
    //         return true;
    //     }

</script>
</html>
Editor is loading...