JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<div class="container">

<h1 style=color:green>
    GeeksforGeeks
</h1>
  
<p>Select any part of this sentence
    and press the button</p>
  
<!--Button to invoke the
        function to get the selected text-->
<input type="button" value="Get Selection" onmousedown="getSelectedText()">
  
<!--Form to show the selected text as output-->
<form name="testform">
    <textarea name="selectedtext" rows="5" cols="20"></textarea>
</form>

CSS

html,
body {
  color: #454545;
}

.container {
  margin-top: 5%;
}

.editor {
  background: #EEEEEE;
  border: 1px solid #CCCCCC;
  margin: 25px auto;
  padding: 20px 30px;
  width: 100%;
}

.highlight {
  animation: highlight linear 1s;
}

@keyframes highlight {
  from {
    outline: 1px solid #f00f;
  }

  to {
    outline: 1px solid #f000;
  }
}

.bold {
  font-weight: bold;
}

h1 {

JavaScript

// Function to get the Selected Text
    function getSelectedText() {
        var selectedText = '';
      
        // window.getSelection
        if (window.getSelection) {
            selectedText = window.getSelection();
        }
        // document.getSelection
        else if (document.getSelection) {
            selectedText = document.getSelection();
        }
        // document.selection
        else if (document.selection) {
            selectedText =
            document.selection.createRange().text;
        } else return;
        // To write the selected text into the textarea
        document.testform.selectedtext.value = selectedText;
    }