Random Number Generator

Server Software: ExpressJS

We are going to use ExpressJS on the server page (server.js).

To install ExpressJS:


$ npm install express

Why ExpressJS?

Marketability: Organizations using NodeJS tend to use ExpressJS. When applying to a job, that's going to be a bullet point with HR.
Quick Setup: I came to NodeJS from a LAMP stack background. Many NodeJS newbs are not familar with writing the code for a server page. Express makes it quick and easy to set up a local NodeJS environment.
Quality: Because many of us are new to server pages, our server code may not be the best. Programming takes practice. Express has already provided good code that is highly supported.
Compatibility: Most modules you will want to install are made to work with ExpressJS. It should not cause conflicts with other major libraries. We should follow suit with our code and make sure our vanilla NodeJS is also compatible with ExpressJS.

Liquid Web | Fastest cloud vps hosting - $29 per month

ExpressJS documentation: npm express

You will find ExpressJS server code in the project code below: ExpressJS Random Number Generator

./server.js


'use strict';

var express = require('express');
var app = express();
app.use(express.static('static'));

var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: false }));

app.get('/',function(req,res) {
  res.sendFile(__dirname + '/static/index.html');
});

function checkInput(input) {
  var message = "";
  if(input < 0){
    message = "User Error!  User Error! Please Try Again!";
  }
  else {
    message = "Hi, my name is Ivy and I want to give you the number " + input;
  }
  return message;
}

/* Watch the coresponding video to complete
       this function. Or just figure it out
       yourself :p */
app.post('/',function(req,res) {
  console.log(req.body);
});

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
};

var port = getRandomInt(9999);

app.listen(port, (err) => {
  console.log(`The magic happens on port: ${port}`);
});

Learn system adminstration with

index.html

************************
static
index.html
*************************


       <!DOCTYPE html>
       <html>
       <head>
         <title>Random Number Generator</title>
         <style>
         body {
           .classy {
             padding: 2.5px;
             border-radius: 6px;
             background-color: green;
             color: white;
             font-size: 14px;
           }

           .classy:hover {
             opacity: .5;
             background-color: black;
           }
           background-color: black;
           color: #49FF0D;
           line-height: 1.5;
           font-size: 18px;
         }

         /* All elements width includes borders and padding*/
       * {
           box-sizing: border-box;
       }

       /* Rows*/
       .row::after {
           content: "";
           clear: both;
           display: table;
       }

       /* Classes containing "col-"*/
       [class*="col-"] {
           float: left;
           padding: 15px;
       }

       /* Column width for small devices (i.e. smart phones)*/
       [class*="col-"] {
           width: 100%;
       }

       /* Column width for large devices (i.e. computers)*/
       @media only screen and (min-width: 768px) {
           .col-1 {width: 8.33%;}
           .col-2 {width: 16.66%;}
           .col-3 {width: 25%;}
           .col-4 {width: 33.33%;}
           .col-5 {width: 41.66%;}
           .col-6 {width: 50%;}
           .col-7 {width: 58.33%;}
           .col-8 {width: 66.66%;}
           .col-9 {width: 75%;}
           .col-10 {width: 83.33%;}
           .col-11 {width: 91.66%;}
           .col-12 {width: 100%;}
       }

         /* Column width for large devices (i.e. tablets)*/
         @media only screen and (min-width: 600px) {
           .col-t-1 {width: 8.33%;}
           .col-t-2 {width: 16.66%;}
           .col-t-3 {width: 25%;}
           .col-t-4 {width: 33.33%;}
           .col-t-5 {width: 41.66%;}
           .col-t-6 {width: 50%;}
           .col-t-7 {width: 58.33%;}
           .col-t-8 {width: 66.66%;}
           .col-t-9 {width: 75%;}
           .col-t-10 {width: 83.33%;}
           .col-t-11 {width: 91.66%;}
           .col-t-12 {width: 100%;}
       }
         </style>
       </head>
       <body>
 <div class="row">
   <div class="col-2"></div>
   <div class="col-8" align="center">
     <h1>Random Number Generator</h1>
     <h3>by Emma, Daniel and Friends</h3>
     <form method="post" action="/">
       I will generate a random integer between 0 and<br>
       <input type="number" name="max_value" placeholder="Max Value"><br>
       <input type="submit" name="submit" value="Generate!">
     </form>
   </div>
 </div>
</body>
</html>

Try ExpressJS:

'use strict'; var express = require('express'); var app = express(); app.use(express.static('static')); var bodyParser = require('body-parser'); app.use(bodyParser.urlencoded({ extended: false })); app.get('/',function(req,res) { res.sendFile(__dirname + '/static/index.html'); }); function checkInput(input) { var message = ""; if(input < 0){ message = "User Error! User Error! Please Try Again!"; } else { message = "Hi, my name is Ivy and I want to give you the number " + input; } return message; } /* Watch the coresponding video to complete this function. Or just figure it out yourself :p */ app.post('/',function(req,res) { console.log(req.body); }); function getRandomInt(max) { return Math.floor(Math.random() * Math.floor(max)); }; var port = getRandomInt(9999); app.listen(port, (err) => { console.log(`The magic happens on port: ${port}`); });

ExpressJS - Random Number Generator

Server Software: ExpressJS

Why ExpressJS?

./server.js

index.html

Try ExpressJS: