s2/tasks
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add ejs and make some views

Browse Source
This commit is contained in:
s2
2016-11-10 15:01:20 +01:00
parent c86d2c73b9
commit be1711a8ab
5 changed files with 1801 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
index.html
View File

@@ -3,45 +3,14 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<script type="text/javascript" src="libs/jquery.min.js"></script> <script type="text/javascript" src="libs/jquery.min.js"></script>
<!-- <script type="text/javascript" src="libs/ejs.js"></script>
It made life easier for many years, and it makes it really easy to change the dom and make ajax calls.
So let's include it in our html file. The latest browsers make jQuery almost useless, but it's still nice to
have it around for a lot of things for now.
-->
<link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap.min.css">
<!-- bootstrap -->
<link rel="stylesheet" href="css/app.css"> <link rel="stylesheet" href="css/app.css">
<!--
This file will be empty in the beginning, but since we know we will be using this let's add it now already.
-->
</head> </head>
<body> <body>
<!--
We have the first screen of our app inside the index.html file.
This is not that nice, because if we have to add more screens later we clutter our index.html file with all
the screens our app will have.
So we will have to move this out later.
-->
<div class="container"> <div class="container">
<h1>Tasks</h1>
<div class="panel panel-default">
<div class="panel-body">
<form id="add-task-form" class="form-inline">
<div class="form-group">
<label for="task" class="control-label">New task</label>
<input type="text" class="form-control" id="task">
</div>
<button class="btn btn-default" id="add-task" type="submit">Add</button>
</form>
<!-- our tasks go here -->
<ol id="task-list" class="list-group">
</ol>
</div>
</div>
</div> </div>
<script type="text/javascript" src="index.js"></script> <script type="text/javascript" src="index.js"></script>

8
index.js
View File

@@ -1,7 +1,11 @@
(function($) { (function($) {
//events
$(document).on('submit', '#add-task-form', function(ev) { $(document).on('submit', '#add-task-form', function(ev) {
ev.preventDefault(); ev.preventDefault();
var newTask = '<li class="list-group-item">' + $('#task').val() + '</li>';
$('#task-list').append(newTask); $('#task-list').append('views/task-item.ejs', {title: $('#task').val()});
}); });
//initial page setup
$('.container').html('views/tasks.ejs', {});
})(jQuery) })(jQuery)

1777
libs/ejs.js Normal file
View File

File diff suppressed because it is too large Load Diff

1
views/task-item.ejs Normal file
View File

@@ -0,0 +1 @@
<li class="list-group-item"><%= title %></li>

16
views/tasks.ejs Normal file
View File

@@ -0,0 +1,16 @@
<h1>Tasks</h1>
<div class="panel panel-default">
<div class="panel-body">
<form id="add-task-form" class="form-inline">
<div class="form-group">
<label for="task" class="control-label">New task</label>
<input type="text" class="form-control" id="task">
</div>
<button class="btn btn-default" id="add-task" type="submit">Add</button>
</form>
<!-- our tasks go here -->
<ol id="task-list" class="list-group">
</ol>
</div>
</div>