This closes #2. Added yahoo-finance NPM package, as well.

package.json

@@ -14,6 +14,7 @@
     "morgan": "~1.6.1",
     "pug": "^2.0.0-beta3",
     "serve-favicon": "~2.3.0",
-    "socket.io": "^1.4.8"
+    "socket.io": "^1.4.8",
+    "yahoo-finance": "^0.2.12"
   }
 }

public/javascripts/script.js

@@ -1 +1,49 @@
-console.log("Script loaded");
+console.log("Script loaded");
+
+var stockList; //Global, for easy debugging...
+
+$(function() {
+
+    var errFlash = function() {
+        $("#add_new")[0].style.backgroundColor = "#aa0000";
+        setTimeout(function() {
+            $("#add_new")[0].removeAttribute("style");
+        }, 1000);    
+    };
+
+    $("#button_add").click(function() {
+        if ($("#input_add")[0].value == 0) {
+            errFlash();
+            return false;
+        }
+        addStock($("#input_add")[0].value);
+        $("#input_add")[0].value = "";
+    });
+
+    $("#input_add").keypress(function(e) {
+        if (e.keyCode === 13) {
+            $("#button_add")[0].click();
+        }
+    });
+
+    $(document).on("click", ".close", function(e) {
+        var div2Close = e.target.parentElement;
+        $(div2Close).remove();
+        updateStockList();
+    });
+
+    var addStock = function(symbol) {
+        var newDiv = $('<div class="col-md-4"></div>');
+        newDiv.append('<span class="close">x</span>');
+        var stockDiv = $('<div class="stock_name"></div>');
+        stockDiv[0].innerText = symbol;
+        newDiv.append(stockDiv);
+        $('#stock_list').append(newDiv);
+        updateStockList();
+    };
+
+    var updateStockList = function() {
+        stockList = $(".stock_name").contents();
+    };
+
+});

public/stylesheets/style.css

@@ -49,6 +49,18 @@ main {
 
 #add_new {
     background-color: rgba(0, 100, 0, .1);
+    display: flex;
+    justify-content: center;
+    align-items: center;    
+}
+
+#add_new * {
+    border-radius: 4px;
+}
+
+#add_new button {
+    background-color: darkgreen;
+    color: white;
 }
 
 #chart {

server.js

@@ -13,6 +13,7 @@ var favicon = require('serve-favicon');
 var logger = require('morgan');
 var cookieParser = require('cookie-parser');
 var bodyParser = require('body-parser');
+var yahooFinance = require('yahoo-finance');
 
 console.log(chalk.bgYellow.black("Loading routes..."));
 var routes = require('./routes/index');

views/index.pug

@@ -6,13 +6,10 @@ block content
   div(id="chart_caption") Stocks
   div(id="stock_list" class="row")
     div(class="col-md-4" id="add_new")
-
+        input(id="input_add" type="text" placeholder="MSFT, GOOG, AAPL...")
+        button(id="button_add")
+            i(class="fa fa-plus-square" aria-hidden="true")
+            |  Add
     div(class="col-md-4")
         span(class="close") x
-        div(class="stock_name") GOOG
-    div(class="col-md-4")
-        div(class="stock_name") AAPL
-    div(class="col-md-4")
-        div(class="stock_name") MSFT
-    div(class="col-md-4")
-        div(class="stock_name") HPQ
+        div(class="stock_name") GOOG

views/layout.pug

@@ -4,6 +4,7 @@ html
         meta(name="viewport" content="width=device-width, initial-scale=1")
         title= title
         script(src="http://code.jquery.com/jquery-2.2.4.min.js")
+        script(src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js")
         script(src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js", integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS", crossorigin="anonymous")
         link(href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css", rel="stylesheet", integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1", crossorigin="anonymous")
         link(href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css", rel="stylesheet", integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7", crossorigin="anonymous")