CODEWITHSUNDEEP
javascripthtmlcssnode.jsexpress
Vincent
Vincent

Reputation: 13

CSS and Node express problems

So, I'm just testing some stuff.

I am using Express and only the bodyelement CSS selector is working. If I REMOVE the body tag, then the next container works, but the following ones do not.

When I check the network in Chrome dev tools it says that my CSS file has been gotten.

I have also tried to change app.use(express.static(path.join(__dirname, '/public'))) to app.use(express.static('public'), and this STILL did not work. The JavaScript fetch works fine. I'm at my wits end!

There is extra code for things I want to do later, like body-parser and sqlite3.

HTML:

//index.html
    <html lang="en">
    <head>
            <meta charset="UTF-16">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <link rel="stylesheet" type="text/css" href="/styles.css">
            <title>Document</title>
    </head>
    <body>
            <div class="container1">
                    <h1>Here is some test fetch!</h1>
                    <button id="fetchBtn" class="btnStyle">Click ME!</button>
                    <div id="response">Hey</div>
            </div>

            <div class="container2">
                    <p>Test</p>
            </div>

            <div class="container3">
                    <p>Test</p>
            </div>

            <script src="script.js"></script>
    </body>
    </html>

CSS:

    //styles.css
    body{
        text-align: center;
        height: auto;
        width: 100%;
    };

    .container1{
        width: 750px;
        height: 750px;
        background-color: saddlebrown;
    };

    .container2{
        width: 750px;
        height: 750px;
        display: flex;
        justify-content: center;
        background-color: blue;
    };


    .container3{
        width: 750px;
        height: 750px;
        display: flex;
        justify-content: center;
        background-color: green;
    };

Javascript:

    //server.js
    const express = require('express');
    const app = express();
    const sqlite3 = require('sqlite3');
    const db = new sqlite3.Database('./acs-1-year-2015.sqlite');
    const morgan = require('morgan');
    const bodyParser = require('body-parser');
    const path = require('path');

    const PORT = process.env.PORT || 4001;

    app.use(bodyParser.json());
    app.use(morgan('dev'));
    app.use(express.static(path.join(__dirname, '/public')));

    app.get('/users', (req, res, next) => {
        db.all("SELECT* FROM states", (err, rows) => {
            res.json({rows:rows});
        });

    });



    app.listen(PORT, () => {
        console.log(`We are listening on PORT ${PORT}`);
    });

Upvotes: 1

Views: 103

Answers (1)

V. Sambor
V. Sambor

Reputation: 13389

Ok, after a debugging session, we've found this has nothing to do with Express or JavaScript or event with HTML.

The problem is in CSS itself. (Mind-blowing right?)

Browsers do not like AT ALL the semicolons after selectors... 

//styles.css
body{
    text-align: center;
    height: auto;
    width: 100%;
};  < ---------------------------------- SEE THIS ? :) 

.container1{
    width: 750px;
    height: 750px;
    background-color: saddlebrown;
};  < ---------------------------------- SEE THIS ? :)

So, by removing the semicolons, everything works as expected.

Happy styling!

Upvotes: 2

Related Questions