Node.js: Code Outside the Browser / Building a Basic Server-Side Application (Without Framework)

HTML Templating: Building the Templates

🎯 Goal of This Note

Create the HTML templates that will later be filled in with dynamic data from the JSON file — one template for the product detail page, and one for the overview page.

🏗️ Project Overview

  • The website will be dynamic: it reads product data from the data.json file.

  • If the JSON file changes (e.g., a product is removed or renamed), the website should automatically reflect that change when reloaded.

  • Two main pages will be built:

    1. 🏠 Overview page — lists all products.

    2. 📦 Product detail page — shows details for a single product.

🎨 Why Everything Is Internal (CSS & Images)

  • All CSS styling is written directly inside the HTML files (inline <style>), instead of linking external stylesheet files.

  • Instead of using real images, emojis are used to represent products.

🧐 Why?

  • Every separate file (CSS file, image file, etc.) triggers its own HTTP request to the server (just like the earlier example with favicon.ico).

  • To avoid handling many extra requests for assets, everything is kept self-contained within the HTML file itself.

🛠️ Step 1: Building the Product Detail Template

📁 Starting Point

  • Based on: templates/product.html (a static sample page)

This file already contains the HTML and CSS needed to get us up and running. Right now it's filled with dummy data, which we'll swap out for live data from the JSON file. Since this isn't an HTML/CSS course, we won't be going over how that markup and styling works.

🧮 Data Fields Available (from JSON)

Each product in data.json has fields such as:

  • 🏷️ productName

  • 😀 image

  • 🌍 from

  • 🥗 nutrients

  • ⚖️ quantity

  • 💲 price

  • 🌱 organic (true/false)

  • 📝 description

🔄 Swapping Static Content for Placeholders

For any data that should be dynamic, delete the static text and replace it with a placeholder like %PRODUCTNAME%.

  • 🏷️ The %...% format is used because it's unlikely to clash with other text on the page.

  • 💡 Any format works, as long as it's distinct and easy to spot.

Dummy Product Name

Placeholder

📋 Placeholders Used in product.html

Now let's replace all the static data that needs to be dynamic.

  • The price in the JSON is just a number (e.g., 6.50) — the currency symbol (€) stays hardcoded in the HTML template since it doesn't change.

🌱 Special Case: Organic Badge

  • 🌿 Products are marked organic: true or false in the JSON.

  • 👀 A CSS class hides the "organic" badge when a product isn't organic.

  • 🏷️ To handle this dynamically, add a placeholder inside the class attribute:
    class="... %NOT_ORGANIC%"

  • 🔄 Later, this gets replaced, covered in an upcoming lecture.

💾 Final Step

  • 📁 Save this completed file as the product template (referred to as template-product).

🏗️ Step 2: Building the Overview Template

🎯 The Challenge

  • 📦 Unlike the detail page, the overview page needs to show one "card" per product — but the number of products can vary (could be 2, 5, 10, etc.).

  • 🚫 We can't hardcode a fixed number of cards in the template.

💡 The Solution: Two Separate Templates

  1. overview.html currently has dummy/hardcoded code showing 5 fixed cards. This needs to be made dynamic — the cards should be generated from JSON data instead of being hardcoded.

  1. Each <figure></figure> represent a product card

  1. Lets change overview to template-overview

  1. Create a new file template-card — a template for just one single product card, which will be reused/repeated for every product.

  1. Now let's copy the <figure> section from template-overview.html and paste it into template-card.html

  1. Now lets clean template-overview and add a placeholder : %PRODUCT_CARDS%

  1. Later in the code, one "card" will be generated for each product in the JSON, all combined into one string, and inserted here.

🛠️ Step 3: Modifying template-card

  • Now lets replace static data with placeholder here

  • Add %NOT_ORGANIC% as classname in %QUANITY% parent <div> which will be used for styling later

🔗 Building the Product Link (Detail Page Navigation)

Each card contains a link (<a> element) to that product's detail page. Example real link format:

/product?id=0

👷‍♂️ Demo from the final project

  • The id in the URL matches the product's id field in the JSON
    (e.g., avocado = id: 0, goat cheese = id: 1, broccoli = id: 2, etc.).

  • In the template, this becomes: /product?id=%ID%

  • Later, %ID% will be replaced with the actual product ID for each card.

💡 Note: This routing logic (handling /product?id=X requests) is not yet implemented — that will be covered in an upcoming lecture.

✅ Updated placeholder in template-card.html

🏷️ Field

📝 Placeholder Example

Image (appears twice in the card)

%IMAGE%

Product name

%PRODUCTNAME%

Organic badge

%NOT_ORGANIC% (same concept as before)

Quantity

%QUANTITY%

Price

%PRICE%

Link

/product?id=%ID%

🗂️ Summary of Templates Created

📄 Template Name

🎯 Purpose

template-product

Full detail page for a single product

template-overview

Overall overview page layout, with one placeholder (%PRODUCTCARDS%) for all product cards

template-card

A single reusable "card" — repeated once per product to build the full list on the overview page