Preparations to add rooms dynamically.

app/app.css

@@ -115,7 +115,7 @@ form input:hover {
 }
 form input:focus {
   /*opacity: 0.4;*/
-  width: 354px !important;
+  width: 354px;
   color: white;
 }
 
@@ -474,4 +474,18 @@ footer a:hover{
   margin-right: auto;
   width: 200px;
   margin-top: 10%;
+}
+
+#croom_container {
+  margin-left: auto;
+  margin-right: auto;
+  width: 304px !important;
+}
+
+#croom_label {
+  color: white;
+}
+
+#croom {
+  width: 304px !important;
 }

app/app.js

@@ -108,6 +108,11 @@ if (Meteor.isClient) {
                 })
             });
             $("#stop").show();
+        },
+        "click #croom_create": function(){
+            Meteor.call("createRoom", $("#croom").val(), function(err, res) {
+                console.log(err, res);
+            });
         }
     });
 

app/templates/dashboard.html

@@ -27,7 +27,17 @@
                 </div>
             </div>
         </div>
-
+        <div class="col-md-4"></div>
+        <div class="col-md-4">
+            <div id="croom_container">
+                <label for="croom" id="croom_label">Room Name:</label>
+                <div class="input-group">
+                    <input type="text" id="croom" name="croom" required />
+                </div>
+                <button class="btn btn-warning" id="croom_create">Create</button>
+            </div>
+        </div>
+        <div class="col-md-4"></div>
         <ul class="bg-bubbles">
             <li></li>
             <li></li>