8. step completed

https://open-wc.org/codelabs/intermediate/lit-html.html#7

README.md

@@ -1,2 +1,10 @@
 # lit-open-wc-intermediate
  lit-html & lit-element: intermediate - https://open-wc.org/codelabs/intermediate/lit-html
+
+npm i
+npm i @web/dev-server
+npx web-dev-server --node-resolve --watch --open
+
+http://localhost:8000/
+
+@srkn 2022

brewery-app.js

@@ -0,0 +1,82 @@
+import {html, css, LitElement} from 'lit';
+import './brewery-detail.js';
+
+class BreweryApp extends LitElement {
+  static get styles() {
+    return css`p { color: chocolate }`;
+  }
+  static get properties() {
+    return {
+      _serviceURL: {state: true},
+      _breweries: {type: Array},
+      _breweriesFetched: {type: Boolean},
+    };
+  }
+  connectedCallback() {
+    console.log('brewery-app connected');
+    super.connectedCallback();
+    if (!this._breweries) {
+      console.log('brewery-app connectedCallback calling:fetchBreweries');
+      this.fetchBreweries();
+      console.log('brewery-app connectedCallback called:fetchBreweries');
+    }
+  }
+  disconnectedCallback() {
+    console.log('brewery-app disconnected');
+    super.disconnectedCallback();
+  }
+  update(changed) {
+    console.log('brewery-app update');
+    super.update(changed);
+  }
+  updated(changed) {
+    console.log('brewery-app updated');
+    super.updated(changed);
+  }
+  firstUpdated() {
+    console.log('brewery-app firstUpdated');
+    super.firstUpdated();
+  }
+  constructor() {
+    super();
+    this._serviceURL = "https://api.openbrewerydb.org/breweries";
+    this._breweriesFetched = false;
+  }
+  render() {
+    console.log('brewery-app rendered');
+    if (!this._breweriesFetched) {
+      return html` <p>Breweries Loading...</p> `;
+    }
+    const totalVisited = this._breweries.filter(brewery => brewery.visited).length;
+    const totalNotVisited = this._breweries.length - totalVisited;
+    return html`
+      <p>Total Visit Status : (${totalVisited} visited and ${totalNotVisited} still to go)</p> 
+      <ul>
+      ${this._breweries.map(brewery => html`
+          <li>
+            <brewery-detail 
+              .name=${brewery.name} 
+              .type=${brewery.brewery_type} 
+              .city=${brewery.city} 
+              .url=${brewery.website_url}
+              @toggle-visited-status=${() => this.toggleVisitedStatus(brewery)}
+            ></brewery-detail>
+          </li>`,)}
+      </ul> `;
+  }
+  async fetchBreweries() {
+    console.log('brewery-app fetchBreweries fetching Breweries');
+    const response = await fetch('https://api.openbrewerydb.org/breweries');
+    const jsonResponse = await response.json();
+    this._breweries = jsonResponse;
+    this._breweriesFetched = true;
+    console.log('brewery-app fetchBreweries fetched Breweries');
+  }
+  toggleVisitedStatus(breweryToUpdate) {
+    console.log('brewery-app toggleVisitedStatus');
+    this._breweries = this._breweries.map(brewery => {
+      return brewery === breweryToUpdate ? { ...brewery, visited: !brewery.visited } : brewery;
+    });
+  }
+}
+customElements.define('brewery-app', BreweryApp);

brewery-detail.js

@@ -0,0 +1,50 @@
+import {html, css, LitElement} from 'lit';
+
+class BreweryDetail extends LitElement {
+  static get styles() {
+    return css`p { color: coral }`;
+  }
+  static get properties() {
+    return {
+      name: String,
+      type: String,
+      city: String,
+      visited: {type: Boolean},
+      url: String
+    };
+  }
+  constructor() {
+    super();
+    this.name = '';
+    this.type = '';
+    this.city = '';
+    this.visited = false;
+    this.url = '';
+  }
+  render() {
+    console.log('brewery-detail rendered');
+    return html`
+      <h3>Name: ${this.name} - ${this.visitedStatus(this.visited)} - <button @click=${this.visit}>${this.visitButtonText()} This!</button></h3>
+      <p>Type: ${this.type}</p>
+      <p>City: ${this.city}</p>
+    `;
+  }
+  visitedStatus(visited) {
+    if (visited) {
+      return 'Visited';
+    }
+    return 'Not Visited';
+  }
+  visit() {
+    console.log('brewery-detail visit');
+    this.visited = !this.visited;
+    this.dispatchEvent(new CustomEvent('toggle-visited-status'));
+  }
+  visitButtonText() {
+    if (this.visited) {
+      return 'Un-Visit';
+    }
+    return 'Visit';
+  }
+}
+customElements.define('brewery-detail', BreweryDetail);

index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Lit Open-WC Elementary</title>
+    <meta name="description" content="Lit Open-WC Elementary Codelabs">
+    <script type="module" src="brewery-app.js"></script>
+  </head>
+  <body>
+    <h1>Brewery App</h1>
+    <brewery-app></brewery-app>
+  </body>
+</html>