Untitled

mail@pastecode.io avatar
unknown
plain_text
2 years ago
7.9 kB
1
Indexable
Never
<!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").keyup(function (e) {

            $(this).val(limitRowsAndChar($(this).val(), 5, 10))
            // $(this).val(limitCharacters($(this).val()))

        });

        function limitRowsAndChar(value, maxRows = 7, maxChar = 10) {
            console.log("value->", value)

            let lines = value.split("\n");

            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.pop()
                alert("max lines reached");

            }


            let joined = lines.join('\n');
            return (joined);


        }

        function limitCharacters(value, maxChars = 10) {
            if (value.length > maxChars) {
                value = value.substring(0, maxChars)
                console.log("max char reached");
            }
            return value
        }
        // 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>