Video 46: Serving up CSS, JS, Impages, and More

web-server/public/about.html

@@ -1,8 +1,14 @@
 <!DOCTYPE html>
+
 <html>
+
 <head>
+    <link rel="stylesheet" href="/css/styles.css">
 </head>
+
 <body>
     <h1>About</h1>
+    <img src="/img/me.jpg">
 </body>
+
 </html>

web-server/public/css/styles.css

@@ -0,0 +1,7 @@
+h1 {
+    color: grey;
+}
+
+img {
+    width: 250px;
+}

web-server/public/help.html

@@ -1,8 +1,13 @@
 <!DOCTYPE html>
+
 <html>
+
 <head>
+    <link rel="stylesheet" href="/css/styles.css">
 </head>
+
 <body>
     <h1>Help</h1>
 </body>
+
 </html>

web-server/public/index.html

@@ -1,8 +1,14 @@
 <!DOCTYPE html>
+
 <html>
+
 <head>
+    <link rel="stylesheet" href="/css/styles.css">
+    <script src="/js/app.js"></script>
 </head>
+
 <body>
     <h1>From a static file</h1>
 </body>
+
 </html>

web-server/public/js/app.js

@@ -0,0 +1 @@
+console.log('Client side javascript file is loaded!')

web-server/src/app.js

@@ -8,7 +8,7 @@ app.use(express.static(publicDirectoryPath))
 
 app.get('/weather', (req, res) => {
   res.send({
-    forecast: 'It\'s snowing. It\'s really gross out.',
+    forecast: 'It is snowing. In September.',
     location: 'Calgary'
   })
 })