[PR Request] HW3 Push01

hw3/01-routing.js

@@ -24,6 +24,9 @@ const server = http.createServer((req, res) => {
     'other',
   ];
 
+  // accesses CONST routes list and return an html element
+  // <a></a> turns the element content into a hyperlink. 
+  // href specifies the link which the hyperlink goes to
   let getRoutes = () => {
     let result = '';
 
@@ -43,7 +46,67 @@ const server = http.createServer((req, res) => {
     res.end();
   }
 
-  // Add your code here
+  else if (req.url === '/welcome') {
+    let routeResults = getRoutes();
+
+    res.writeHead(200, { 'Content-Type': 'text/html' });
+    res.write(`<h1>Welcome to HW #3!</h1>`);
+    res.write(`<ul> ${routeResults} </ul>`);
+    res.end();
+  }
+
+  else if (req.url === '/redirect') {
+    res.writeHead(302, { Location: "/redirected" });
+    res.end();
+  }
+
+  else if (req.url === '/redirected') {
+    let routeResults = getRoutes();
+
+    res.writeHead(200, { 'Content-Type': 'text/html' });
+    res.write(`<h1>Redirected to /redirected</h1>`);
+    res.write(`<ul> ${routeResults} </ul>`);
+    res.end();
+  }
+
+  else if (req.url === '/cache') {
+    let routeResults = getRoutes();
+
+    res.writeHead(200, { 'Content-Type': 'text/html', 'Cache-control': 'public, max-age=86400'});
+    res.write(`<h1>This resource was cached</h1>`);
+    res.write(`<ul> ${routeResults} </ul>`);
+    res.end();
+  }
+
+  else if (req.url === '/cookie') {
+    let routeResults = getRoutes();
+
+    res.writeHead(200, { 'Content-Type': 'text/html', 'Set-Cookie':'hello=world'});
+    res.write(`<h1>cookies... yummm</h1>`);
+    res.write(`<ul> ${routeResults} </ul>`);
+    res.end();
+  }
+
+  else if (req.url === '/check-cookies') {
+    let routeResults = getRoutes();
+
+    res.writeHead(200, { 'Content-Type': 'text/html' });
+
+    if(req.headers.cookie.indexOf("hello=") !== -1){
+      res.write(`<h2>yes</h2>`);
+    } else {
+      res.write(`<h2>No</h2>`);
+    }
+    res.end();
+  }
+
+  else {
+    res.writeHead(404, {'Content-Type': 'text/html'});
+    res.write(`<h2>Error 404 - Page not Found</h2>`);
+    res.end();
+  }
+
+
 });
 
 server.listen(port, () => {

hw3/02-url.js

@@ -30,9 +30,75 @@ const server = http.createServer((req, res) => {
     res.write(`<h1>Exercise 02</h1>`);
 
     res.write(`<ul> ${routeResults} </ul>`);
+  } 
+
+
+  else if (req.url.indexOf('/attributes') >= 0){
+    let routeResults = getRoutes();
+    const table = createTableHTML(req.url);
+
+    res.writeHead(200, { 'Content-Type': 'text/html' });
+    res.write(`<h1>hello world & lorem ipsum</h1>`);
+    res.write(`<ul> ${routeResults} </ul>`);
+    res.write(table);
   }
 
-  // Add your code here
+  else if (req.url.indexOf('/items') >= 0){
+    let routeResults = getRoutes();
+    const table = createTableHTML(req.url);
+
+    res.writeHead(200, { 'Content-Type': 'text/html' });
+    res.write(`<h1>hello world & lorem ipsum</h1>`);
+    res.write(`<ul> ${routeResults} </ul>`);
+    res.write(table);
+  }
+
+  else if (req.url.indexOf('/characters') >= 0){
+    let routeResults = getRoutes();
+    const table = createTableHTML(req.url);
+
+    res.writeHead(200, { 'Content-Type': 'text/html' });
+    res.write(`<h1>hello world & lorem ipsum</h1>`);
+    res.write(`<ul> ${routeResults} </ul>`);
+    res.write(table);
+  }
+
+  function createTableHTML (url) {
+    let dataset = parsedDataFromURL(url);
+    let results = "";
+
+    results += `<table border=1px>`;
+      dataset.forEach(
+        row => {
+              results += `<tr>`
+                row.forEach(
+                  data => results += `<td>${data}</td>`
+                ),
+
+              results += `</tr>`
+        }
+      )
+    results += `</table>`;
+
+    return results;
+  } 
+
+  function parsedDataFromURL (url) {
+    let parsedURL = url.split("?");
+    let temp1 = parsedURL[1];
+    let parsedArgs = temp1.split("&");
+
+    let results = [];
+    let temp = [];
+
+    // [1=1, 2=2...]
+    parsedArgs.forEach(
+      arg => results.push(arg.split("="))
+    )
+
+    return results;
+  }
+
 
   res.end();
 });

hw3/03-form.js

@@ -0,0 +1,106 @@
+const http = require('http');
+
+const port = process.env.PORT || 5000;
+
+const formHTML = `<html>
+            <head>
+              <meta charset="UTF-8" />
+              <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+              <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+              <title>03 - Form</title>
+              <link
+                rel="stylesheet"
+                href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
+              />
+
+            </head>
+            <body class="bg-dark">
+              <form class="bg-light border rounded w-50 mx-auto mt-5 p-3" method='post' action="/submit">
+                <h1 class="mt-2 mb-4">Contact Form</h1>
+                <h6>Name *</h6>
+                <input type="name" name="name" class="form-control" aria-label="name" id="inputname" aria-describedby="basic-addon1">
+                <h6>Email *</h6>
+                <input type="email" name="email" class="form-control" aria-label="email" id="inputemail" aria-describedby="basic-addon1">
+                <h6>Submit your message:</h6>
+                <textarea type="comment" name="comment" class="form-control" aria-label="msgsubmission" id="inputcomment"></textarea>
+                <div class="form-check">
+                  <input class="form-check-input" type="checkbox" name="newsletter" id="newsletterCheckbox" checked>
+                  <label class="form-check-label" for="flexCheckChecked">
+                    Sign up the newsletter
+                  </label>
+                </div>
+
+                <br>
+                <button type="submit" class="btn btn-primary btn-lg btn-block" >Submit</button>
+                </div>
+              </form>
+            </body>
+          </html>`
+
+
+
+const server = http.createServer((req, res) => {
+  const routes = [
+    '/form',
+    '/submit'
+  ];
+
+  let body = "";
+
+  // use the URL interface to work with URLs
+  // source: https://developer.mozilla.org/en-US/docs/Web/API/URL
+  let url = new URL(req.url, `http://${req.headers.host}`);
+
+  let getRoutes = () => {
+    let result = '';
+
+    routes.forEach(
+      (elem) => (result += `<li><a href="${elem}">${elem}</a></li>`)
+    );
+
+    return result;
+  };
+
+  req.on("data", (chunk) => {
+    body += chunk;
+    console.log("on data: " + body);
+  });
+
+
+  req.on("end", () => {
+  if (req.url === '/') {
+    let routeResults = getRoutes();
+
+    res.writeHead(200, { 'Content-Type': 'text/html' });
+    res.write(`<h1>Exercise 03</h1>`);
+    res.write(`<ul> ${routeResults} </ul>`);
+  } 
+
+  else if (req.url === '/form') {
+    res.writeHead(200, { 'Content-Type': 'text/html'});
+    res.write(formHTML);
+  }
+
+  else if (req.url === '/submit') {
+    const params = new URLSearchParams(body);
+
+    res.writeHead(200, { 'Content-Type': 'text/html'});
+    res.write(`<h2>Name: ${params.get("name")}</h2>`);
+    res.write(`<h2>Email: ${params.get("email")}</h2>`);
+    res.write(`<h2>Comments: ${params.get("comment")}</h2>`);
+
+    if( params.get("newsletter") ){
+      res.write(`<h2> Newsletter: Yes, sign me up for the newsletter.</h2>`);
+    } else {
+      res.write(`<h2> Newsletter: No, thank you.</h2>`);
+    }
+  }
+
+  res.end();
+  })
+});
+
+server.listen(port, () => {
+  console.log(`Server running at http://localhost:${port}`);
+});
+