replace-line-breaks.html

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Replace Line Breaks</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="css/simple-sidebar.css" rel="stylesheet">

</head>

<body>

    <div class="d-flex" id="wrapper">

        <!-- Sidebar -->
        <div class="bg-light border-right" id="sidebar-wrapper">
                <div class="sidebar-heading">Text Manipulation Tools </div>
                <div class="list-group list-group-flush">
                  <a href="index.html" class="list-group-item list-group-item-action bg-light">Home</a>
                  <a href="duplicate-text-line-remover.html" class="list-group-item list-group-item-action bg-light">Duplicate Text Line Remover</a>
                  <a href="find-replace-text.html" class="list-group-item list-group-item-action bg-light">Find and Replace Text</a>
                  <a href="compare-text-files.html" class="list-group-item list-group-item-action bg-light">Compare Text Files (Remove Dupes)</a>
                  <a href="prefix-suffix-lines.html" class="list-group-item list-group-item-action bg-light">Add Prefix/Suffix to Lines</a>
                  <a href="whitespace-remover.html" class="list-group-item list-group-item-action bg-light">WhiteSpace Remover</a>        
                  <a href="sort-text-lines.html" class="list-group-item list-group-item-action bg-light">Sort Text Lines</a>
                  <a href="replace-line-breaks.html" class="list-group-item list-group-item-action bg-light">Replace Line Breaks</a>
                  <a href="letter-case-converter.html" class="list-group-item list-group-item-action bg-light">Letter Case Converter</a>  
                </div>
              </div>
        <!-- /#sidebar-wrapper -->

        <!-- Page Content -->
        <div id="page-content-wrapper">

            <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
                <button class="btn btn-primary" id="menu-toggle">Toggle Menu</button>

                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
            </nav>


            <div class="container-fluid">
                <h1 class="mt-4 text-center">Replace Line Breaks</h1>
                <p class="text-center">First, paste your text in the input box below. Write in the box what do you want the line breaks to be replaced with.</p>
                <p class="text-center">Finally, click the "Replace Line Breaks" button.
                </p>

                <div class="row mt-5 m-5">

                    <div class="col-md-12">
                        <div id="success"></div>
                        <div id="InputandOutput">
                            <label for="replaceInput">
                                <h5 id="inputLabel">Input:</h5>
                            </label>
                            <div class="input-sm float-right">
                                <label for="replace">Replace Line Breaks with</label>
                                <input id="replace">

                            </div>
                            <textarea class="form-control" id="inputText" rows="10"></textarea>

                            <button class="btn btn-primary mt-1 float-right" onclick="replaceLineBreaks();">Replace Line Breaks</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /#page-content-wrapper -->
    </div>
    <!-- /#wrapper -->

    <!--Footer-->

    <footer>      
            <p class="text-center">Theme: 
              <a href="https://startbootstrap.com/templates/simple-sidebar/">Simple Sidebar theme</a> | Made by <a href="https://github.com/toorhamza">Hamza Ahmad</a></p>
            </footer>

    <!--Footer ends-->

    <!-- Bootstrap core JavaScript -->
    <script src="js/jquery.min.js"> </script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/textmani.js"></script>

    <!-- Menu Toggle Script -->
    <script>
        $("#menu-toggle").click(function (e) {
            e.preventDefault();
            $("#wrapper").toggleClass("toggled");
        });
    </script>

</body>

</html>