Today I Learned 8/17

[paulapereira1]

Strings vs. Fragments While we can't query or run an event listener on HTML strings, we can do it to fragments. So how do we turn a string into a fragment? HTML string:

function renderProduct(product) {
  return`
  <div class="products">
    <h2>${priduct.name}</h2>
    <img src="${product.image}" alt="${product.name}"/>
    <button>Add $<span class="currency">${product.currency}</span> ${(product.price_cents /100).toFixed(2)}</button>
  </div>`;
};

Fragment:

function renderProduct(product) {
  const html = `
  <div class="products">
    <h2>${priduct.name}</h2>
    <img src="${product.image}" alt="${product.name}"/>
    <button>Add $<span class="currency">${product.currency}</span> ${(product.price_cents /100).toFixed(2)}</button>
  </div>`;
  const fragment = 
  document.createRange().createContextualFragment(html); // this line takes the html string above and turns it into a fragment 
  const button = fragment.querySelector('button');
  button.addEventListener('click',handleButtonClick);
  return fragment;
};

Yarn Procedure:

• Add the following to the index.js file:

  const express = require('express');
  const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
  const app = express();
  app.listen(3000, () => console.log(`Server is on!`));

• Run yarn init -y from the root of your project to initialize a package.json
• Add the following to the package.json file:

  "scripts": {
  "start": "node index.js"

• Then run yarn add express to add express to your project
• Start the server with by running node index.js
• Next, run yarn start and the site should be deployed to http://localhost:3000
• To stop running, click control+c

Using Stripe https://stripe.com/docs/api

• Two types of API keys: published key (font end) and secret key (back end, and shouldn't be shared)
• Applying the keys to VS Code: First, be sure to run yarn add stripe

  const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
  app.get('/products', async (_request, response) => { // gives us the product listing
  const products = await stripe.products.list({
  limit: 100,
  });
  const prices = await stripe.prices.list({ // gives us the price list of all listed products 
  limit: 100,
  });

• Stripe doesn't do well with weP image formats, so to convert to jpeg we used: https://ezgif.com/webp-to-jpg/ezgif-2-25ff8c984dbf.webp