jas0nhuang

Build a Basic M.E.N. Site - 4 - Make It Looks Better

Serve CSS With NodeJS/Express

  1. Create a public/ folder inside the project’s main folder, and put a CSS file inside:

    mkdir ./public
    vim ./public/styls.css

  2. Add a middleware in the server.js file:
    EJS can not directly get the CSS file when rendering, so we need to add a middleware in the server file:

    app.use(express.static(__dirname +＂/public"))

  3. Link the CSS file in index.ejs file

    <link href="/style.css" rel="stylesheet" type="text/css">

The STYLE

Some notes about the CSS:

  1. Only one font setting :

    font-family: "Source Han Sans", "Microsoft JhengHei", sans-serif;

  2. Transparent input segment. Use input::placeholder to style the placeholder text. And input:focus::placeholder to set the style when selected(focus).

  3. Button:
    border-radius to set a rounded button. cursor: pointer to change the cursor style.

  4. The <div> holding the list.
    vertical-align: top to set it to the top.

Here it is! A very simple MEN stack web site. What I will like to do latter:

  1. Add a pie chart to show the percentage of each choice using CSS or SVG+JavaScript and Use Math.floor(X *100)/100 to find the percentage. Reference
  2. Use express-rate-limit to block an ip with too much connections. Also improve the site’s security.Reference
  3. Add UPDATE functionality to let user update/change their choice.REference
  4. Auto generate a page every day.