View source for WebFund 2013F: Assignment 1

In this assignment you are to examine, modify, and answer questions regarding the [http://homeostasis.scs.carleton.ca/~soma/webfund-2013f/form-demo.zip form-demo] sample node application.  The files of this application are also listed below.

==Questions==

===Part A===
What happens when you change the following lines from the application?  Indicate the behavior if each deletion is the '''only''' change made to the application.
# package.json: delete 7
# app.js: delete 6, add semicolon to end of 5
# app.js: delete 8
# app.js: delete 17
# app.js: delete 18
# app.js: delete 25-27
# app.js: delete 31
# app.js: delete 32
# app.js: delete 34-36
# style.css: delete 2
# style.css: delete 3
# index.jade: change <tt>action="/add"</tt> to <tt>"action="/"</tt>
# index.jade: delete 11
# index.jade: delete 12
# index.jade: delete 26
# add.jade: delete 3

==Source==

===package.json===
<source line lang="javascript">
{
    "name": "application-name"
  , "version": "0.0.1"
  , "private": true
  , "dependencies": {
      "express": "2.5.8"
    , "jade": ">= 0.0.1"
  }
}
</source>


===app.js===

<source line lang="javascript">
/**
 * Module dependencies.
 */

var express = require('express')
  , routes = require('./routes');

var app = module.exports = express.createServer();

// Configuration

app.configure(function(){
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(__dirname + '/public'));
});

app.configure('development', function(){
  app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});

app.configure('production', function(){
  app.use(express.errorHandler());
});

// Routes

app.get('/', routes.index);
app.post('/add', routes.add);

app.listen(3010, function(){
  console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env);
});

</source>


===public/stylesheets/style.css===

<source line lang="javascript">
body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}
</source>


===routes/index.js===

<source line lang="javascript">

/*
 * GET home page.
 */

exports.index = function(req, res){
    res.render('index', { title: 'form demo with node and express' })
};

exports.add = function(req, res){
    res.render('add', { title: 'Person added',
			name: req.body.name,
			country: req.body.country,
			date: req.body.birthday,
			email: req.body.email});
};
</source>


===views/layout.jade===

<source line lang="html4strict">
!!!
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body!= body
</source>


===views/index.jade===

<source line lang="html4strict">
h1= title

div
  p Fill out your info
  form(method="post", action="/add")
    div
      input#name(type="text", name="name")
      label.add-on(for="name")
        | Name
    div
      input#country(type="text", name="country")
      label.add-on(for="country")
        | Country
    div
      input#birthday(type="text", name="birthday")
      label.add-on(for="birthday")
        | Birthday
    div
      label.checkbox
        input#send-email(type="checkbox", name="send-email")
        | Email Me
    div
      input#email(type="text", name="email")
      label.add-on(for="email")
        | Email
    button(type="submit") Submit
</source>


===views/add.jade===

<source line lang="html4strict">
h1 Info Added
p Name: #{name}
p Country: #{country}
p Date: #{date}
p Email: #{email}
</source>