diff --git a/css/core.css b/css/core.css index e5d1df1076fb8f596dd6db349e23f07fcd76562b..ea8c678c5419a3266c6395cbd6391fafc643344a 100644 --- a/css/core.css +++ b/css/core.css @@ -2,8 +2,8 @@ body{ height: 100%; } #input-div, #output-div{ - height: 100%; - width: 50%; + height: 90%; + width: 48%; display: block; } #input-div{ @@ -16,6 +16,11 @@ body{ clear: both; } #input-textarea{ - height: 100%; - width: 100%; + width: 90%; + height: 90%; +} +#output-pre{ + height: 90%; + width: 90%; + border: solid black 1px; } \ No newline at end of file diff --git a/index.html b/index.html index 6ad4fe37a3c2057674b0718590d4c7f8338e5b49..88a0c599c230224cf22184b30f22faafb15aa349 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,11 @@ <html> <head> - <script src="js/jquery-3.3.1.js"></script> + <meta charset="UTF-8" /> + <meta name="language" content="english"> + <meta http-equiv="content-type" content="text/html"> + <script src="js/jquery-3.3.1.js" defer="defer"></script> + <script src="js/application.js" defer="defer"></script> <link href="css/core.css" rel="stylesheet" type="text/css" /> </head> @@ -10,9 +14,7 @@ <div id="wrapper"> <div id="input-div"> <h2 id="input-header">Input</h2> - <textarea id="input-textarea" aria-labelledby="input-header"> - - </textarea> + <textarea id="input-textarea" autocomplete="off" aria-labelledby="input-header"></textarea> </div> <div id="output-div"> <h2 id="output-header">Ready-to-go output!</h2> diff --git a/js/application.js b/js/application.js new file mode 100644 index 0000000000000000000000000000000000000000..5927207429d46d00980640d5c30c2dd1dd39cb1e --- /dev/null +++ b/js/application.js @@ -0,0 +1,10 @@ +$(document).ready(function () { + //Let's go! + console.log('Hi there!'); + $('#input-textarea').text(''); + $('#input-textarea').val(''); + $('#input-textarea').on('input propertychange', function () { + //console.log('Alteration!') + $('#output-pre').text($('#input-textarea').val()); + }) +}); \ No newline at end of file