Added sync button

css/core.css

@@ -8,9 +8,16 @@ html, body{
 	height: 90%;
 }
 #input-div, #output-div{
+	height: 95%;
+	width: 45%;
+	display: block;
+}
+#update-code-div {
     height: 90%;
-	width: 48%;
+    width: 5%;
     display: block;
+    float:left;
+    text-align: center;
 }
 #input-div{
 	float: left;

index.html

@@ -46,6 +46,9 @@
             </div>
             <div id="input-textarea" autocomplete="off" contenteditable="true" aria-labelledby="input-header"></div>
         </div>
+        <div id="update-code-div">
+            <button id="update-code"><i class="fas fa-exchange-alt"></i></button>
+        </div>
         <div id="output-div">
             <h2 id="output-header">Ready-to-go output!</h2>
             <div id="output-pre" aria-labelledby="output-header">

js/application.js

@@ -6,6 +6,9 @@ $(document).ready(function () {
 	$('#input-textarea').val('');
 	$('#input-textarea').on('input propertychange', function () {
 		//console.log('Alteration!')
+		
+    });
+    $('#update-code').click(function(){
         $('#output-pre').text($('#input-textarea').html());
     });
 	var buttonList = [
@@ -16,6 +19,8 @@ $(document).ready(function () {
 			'id': 'bold',
 			'title': 'Bold',
 			'onclick': function () {
+                let selectedtext = window.getSelection().toString();
+
 				document.execCommand('bold', false, '');
 				return true;
 			}