JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<figure class="card">
  <div class="card__emoji">🥑🥑</div>

  <div class="card__title-box">
    <h2 class="card__title">{{PRODUCTNAME}}</h2>
  </div>

  <div class="card__details">
    <div class="card__detail-box">
      <h6 class="card__detail card__detail--organic">{{ORGANIC}}</h6>
    </div>

    <div class="card__detail-box">
      <h6 class="card__detail">{{QUANTITY}} per 📦</h6>
    </div>

    <div class="card__detail-box">
      <h6 class="card__detail card__detail--price">{{PRICE}}€</h6>
    </div>
  </div>

  <a class="card__link" href="#">
    <span>Detail <i class="emoji-right">👉</i></span>
  </a>
</figure>

JavaScript

const fs = require("fs")
const http = require("http")
//const url = require('url')
const data = fs.readFileSync(`${__dirname}/dev-data/data.json`, 'utf-8');
const productdict = JSON.parse(data);

const interpolate = (template, params) => template.replace(/\{\{(\w+)}}/g, (match, identifier) => {
	if (params.has(identifier)) {
  	return params.get(identifier);
  } else {
	  // alternatively this could throw
  	return match;
  }
});


const getCard = (card, element) => {
  let {
    productName,
    image,
    from,
    nutrients,
    price,
    organic,
    description
  } = element;

	const params = new Map();
	params.set('PRODUCTNAME', productName);
  params.set('IMAGE', image);
  // and so on...
	return interpolate(card, params);
}

const overview = () => {
  const productCards = [];
  fs.readFile(`${__dirname}/templates/card.html`, 'utf-8', (err, htmlcard) => {

    productdict.forEach(element => {
      productCards.push(getCard(htmlcard, element));
    })
  });

  let htmloverview = fs.readFileSync(`${__dirname}/templates/overview.html`, 'utf-8');
  htmloverview.replace("CARDS", productCards.join(""))

}


const server = http.createServer((req, res) => {
  if (req.url === "/overview") {
    let htmloverview = overview();

    res.writeHead(200, {
      'Content-type': 'text/html'
    });
    res.end(htmloverview);

  }
})

server.listen(8000, "127.0.0.1", () => {
  console.log(`Listening to the server at  ${"127.0.0.1:8000"}`);

})