Bootcamp
Search…
📅
Course Schedule
0: Language and Tooling Teaching Guide
1: Frontend Basics Teaching Guide
2: Backend Basics Teaching Guide
3: Backend Applications Teaching Guide
4: Backend Structure Teaching Guide
5: Full-Stack Applications Teaching Guide
6: Frontend Infrastructure Teaching Guide
7: React Teaching Guide
8: Advanced React Teaching Guide
9: Advanced Topics Teaching Guide
🧮
Algorithms Teaching Guide
💼
Interview Prep Teaching Guide
☺
User Experience Teaching Guide
5.1: DOM Manipulation with Express App

Introduction

We are adding back in the JavaScript from the first module.
We have now completed a journey to understand how an HTML page arrives at the browser, through a TCP/IP request built into an HTTP request- A request that results in HTML being sent back, HTML that is generated by an application with data from a SQL database.
Now that we are back in the browser we will investigate this request/response behaviour that happens before the JS file runs.
  1. 1.
    The browser makes a request to the server.
  2. 2.
    The Express server sends back HTML.
  3. 3.
    The browser reads a script tag in the HTML response. The script tag src attribute triggers the browser to make a get request for the JavaScript automatically.
  4. 4.
    The Express server, based on the request path, looks in the hard drive for a file that matches the request and sends the file contents back in the response.
  5. 5.
    Because the request was kicked off from a script tag, the file contents response is digested by the JavaScript interpreter of the browser.
  6. 6.
    JavaScript in the browser runs.

Exercise

Routes

  1. 1.
    Create a route for /items
  2. 2.
    Create a controller for this route called items
    1. 1.
      Since we don't care about the database for this exercise, we won't create a model for this controller. We'll use some fake data that looks like it could have come from the database.
    2. 2.
      The controller callback will call render and pass in the following data.
      1
      const items = [
      2
      {
      3
      name:'banana',
      4
      price:'$2',
      5
      category:'fruits'
      6
      },
      7
      {
      8
      name:'apple',
      9
      price:'$1',
      10
      category:'fruits'
      11
      },
      12
      {
      13
      name:'salmon',
      14
      price:'$22',
      15
      category:'fish'
      16
      },
      17
      {
      18
      name:'trout',
      19
      price:'$12',
      20
      category:'fish'
      21
      },
      22
      {
      23
      name:'guava',
      24
      price:'$3',
      25
      category:'fruits'
      26
      }
      27
      ];
      Copied!
  3. 3.
    Create a view for this controller, items/index.ejs, and use a loop to render the list of items above.

Add CSS

  1. 1.
    Add a CSS file called styles.css to the public folder. Set the background color of body to pink
  2. 2.
    Use a link tag to import this CSS into our view

Add JS

  1. 1.
    Add a script.js file to the public folder. Put a console.log in the script.js file
  2. 2.
    Use a script tag to import this JS into our view

Verify Behaviour

  1. 1.
    Open DevTools. Confirm that the console.log appears when we load the page
  2. 2.
    Look in the Elements tab. Confirm the existence of the link and script tags.
  3. 3.
    Look in the Network tab. Confirm the request for the CSS and JS files.

Logic

Add the following logic to script.js.
  1. 1.
    When a user clicks on any item, apply a class to that item to turn the background colour grey.
  2. 2.
    When the user clicks the item again, the background reverts to the original colour.
Last modified 2mo ago