3 changed files with 65 additions and 10 deletions
+ 37
- 3
css/notes_app.css
View File
| 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
| <meta charset="UTF-8"> | <meta charset="UTF-8"> | ||||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||||
| <title>Document</title> | <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> | <script src="/scripts/notes_app.js"></script> | ||||
| <link rel="stylesheet" href="/css/notes_app.css" type="text/css"> | <link rel="stylesheet" href="/css/notes_app.css" type="text/css"> | ||||
| </head> | </head> | ||||
| <body> | <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> | </body> | ||||
| </html> | </html> |
+ 5
- 5
scripts/notes_app.js
View File
| function test() { | |||||
| alert("Test something"); | |||||
| } | |||||
| console.log("Hello") | |||||
| $(document).ready(function(){ | |||||
| $("#addNoteDiv").on('click', function() { | |||||
| $("#noteFormDiv").toggle() | |||||
| }) | |||||
| }) |
Loading…