3 changed files with 65 additions and 10 deletions
+ 37
- 3
css/notes_app.css
View File
| @@ -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; | |||
| } | |||
+ 23
- 2
html/index.html
View File
| @@ -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> | |||
+ 5
- 5
scripts/notes_app.js
View File
| @@ -1,5 +1,5 @@ | |||
| function test() { | |||
| alert("Test something"); | |||
| } | |||
| console.log("Hello") | |||
| $(document).ready(function(){ | |||
| $("#addNoteDiv").on('click', function() { | |||
| $("#noteFormDiv").toggle() | |||
| }) | |||
| }) | |||
Loading…