Changed input text area to div and added functionality to most buttons

index.html

@@ -44,7 +44,7 @@
                         <option value="h4">Heading 4</option>
                     </select>
                 </div>
-                <textarea id="input-textarea" autocomplete="off" aria-labelledby="input-header"></textarea>
+                <div id="input-textarea" autocomplete="off" contenteditable="true" aria-labelledby="input-header"></textarea>
             </div>
             <div id="output-div">
                 <h2 id="output-header">Ready-to-go output!</h2>

js/application.js

@@ -14,6 +14,7 @@ $(document).ready(function () {
 			'name': 'Bold',
 			'id': 'bold',
 			'onclick': function () {
+				document.execCommand('bold', false, '');
 				return true;
 			}
 		},
@@ -23,6 +24,7 @@ $(document).ready(function () {
 			'name': 'Italic',
 			'id': 'italic',
 			'onclick': function () {
+				document.execCommand('italic', false, '');
 				return true;
 			}
 		},
@@ -32,6 +34,7 @@ $(document).ready(function () {
 			'name': 'underline',
 			'id': 'underline',
 			'onclick': function () {
+				document.execCommand('underline', false, '');
 				return true;
 			}
 		},
@@ -50,6 +53,7 @@ $(document).ready(function () {
 			'name': 'align-left',
 			'id': 'align-left',
 			'onclick': function () {
+				document.execCommand('justifyLeft', false, '');
 				return true;
 			}
 		},
@@ -59,6 +63,7 @@ $(document).ready(function () {
 			'name': 'align-center',
 			'id': 'align-center',
 			'onclick': function () {
+				document.execCommand('justifyCenter', false, '');
 				return true;
 			}
 		},
@@ -68,6 +73,7 @@ $(document).ready(function () {
 			'name': 'align-right',
 			'id': 'align-right',
 			'onclick': function () {
+				document.execCommand('justifyRight', false, '');
 				return true;
 			}
 		},
@@ -77,6 +83,7 @@ $(document).ready(function () {
 			'name': 'paragraph',
 			'id': 'paragraph',
 			'onclick': function () {
+				document.execCommand('insertParagraph', false, '');
 				return true;
 			}
 		},
@@ -86,6 +93,7 @@ $(document).ready(function () {
 			'name': 'list-ul',
 			'id': 'list-ul',
 			'onclick': function () {
+				document.execCommand('insertUnorderedList', false, '');
 				return true;
 			}
 		},
@@ -95,6 +103,7 @@ $(document).ready(function () {
 			'name': 'list-ol',
 			'id': 'list-ol',
 			'onclick': function () {
+				document.execCommand('insertOrderedList', false, '');
 				return true;
 			}
 		},
@@ -104,6 +113,9 @@ $(document).ready(function () {
 			'name': 'link',
 			'id': 'link',
 			'onclick': function () {
+				let selectedtext = window.getSelection().toString();
+				let linktext = window.prompt("Please enter the link URL", selectedtext);
+				document.execCommand('createLink', false, linktext);
 				return true;
 			}
 		},
@@ -113,6 +125,7 @@ $(document).ready(function () {
 			'name': 'palette',
 			'id': 'palette',
 			'onclick': function () {
+				document.execCommand('createLink', false, linktext);
 				return true;
 			}
 		},
@@ -130,16 +143,37 @@ $(document).ready(function () {
 			'type': 'drop',
 			'id': 'header',
 			'values': [
+				{
+					'name': 'Headings',
+					'value': ''
+				},
 				{
 					'name': 'Heading 1',
-					'value': 'h1'
+					'value': 'H1'
 				},
 				{
 					'name': 'Heading 2',
-					'value': 'h2'
+					'value': 'H2'
+				},
+				{
+					'name': 'Heading 3',
+					'value': 'H3'
+				},
+				{
+					'name': 'Heading 4',
+					'value': 'H4'
+				},
+				{
+					'name': 'Heading 5',
+					'value': 'H5'
+				},
+				{
+					'name': 'Heading 6',
+					'value': 'H6'
 				},
 			],
 			'onchange': function () {
+				document.execCommand('heading', false, this.value);
 				return true;
 			}
 		}