raw website

- open form with button - some styling
2020-05-21 17:57:03 +02:00 · 2020-05-21 17:57:03 +02:00 · 029d2276fa
commit 029d2276fa
parent e7a34b32cb
3 changed files with 65 additions and 10 deletions
--- a/css/notes_app.css
+++ b/css/notes_app.css
@ -1,3 +1,37 @@
-h1 {
-    color:green
-}
+body{
+    background-color:#f9f5f4;
+    columns:#555555;
+    font-family:Arial, Helvetica, sans-serif;
+    font-size:16px;
+}
+
+#mainHeader h1{
+    margin:0;
+    padding:2.5px;
+}
+
+#mainHeader h6{
+    margin-top:0;
+    padding:2.5px;
+}
+
+#noteFormDiv{
+    display: none;
+}
+
+#noteForm{
+    padding:5px;
+    margin-top:2px;
+    display: inline-block;
+    border:1px black solid;
+}
+
+#memo{
+    width: 300px;
+    height: 150px;
+    box-sizing: border-box;
+}
+
+#input1{
+    margin-bottom:5px;
+}
--- a/html/index.html
+++ b/html/index.html
@ -4,11 +4,32 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="/scripts/notes_app.js"></script>
    <link rel="stylesheet" href="/css/notes_app.css" type="text/css">
 </head>
 <body>
-    <h1>Hello World</h1>
-    <p>Whats the matter ?</p>
+    <div id=mainHeader>
+        <h1>
+            Quick Notes
+        </h1>
+        <h6>
+            A sample note web app to demonstrate the usage of Promises/Async/Await.
+        </h6>
+    </div>
+    <div id=addNoteDiv>
+        <button type="button" id=addNote>+</button>
+    </div>
+
+    <div id=noteFormDiv>
+        <form id=noteForm>
+            <input type="text" name="noteTitle" id="input1" placeholder="Enter title...">
+            <div>
+                <textarea name=noteText id=memo placeholder="Enter notes..."></textarea> 
+            </div>
+            <button type="button" id=saveNote>Save</button>
+        </form>   
+    </div>
+    
 </body>
 </html>
--- a/scripts/notes_app.js
+++ b/scripts/notes_app.js
@ -1,5 +1,5 @@
-function test() {
-    alert("Test something");
-}
-
-console.log("Hello")
+$(document).ready(function(){
+    $("#addNoteDiv").on('click', function() {
+        $("#noteFormDiv").toggle()
+    })
+})