rollup · hvacsteve-chi · Jul 21, 2024 · Aug 6, 2024 · Aug 7, 2024 · Aug 7, 2024
diff --git a/README.md b/README.md
@@ -2,8 +2,7 @@
 
 This repo contains a bare-bones example of how to create an application using Rollup, including importing a module from `node_modules` and converting it from CommonJS.
 
-*See also https://github.com/rollup/rollup-starter-lib*
-
+_See also https://github.com/rollup/rollup-starter-lib_
 
 ## Getting started
 

diff --git a/package.json b/package.json
@@ -1,11 +1,15 @@
 {
   "name": "rollup-starter-app",
+  "main": "./src/main.js",
+  "version": "1.0.0",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^17.0.0",
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^11.1.0",
     "npm-run-all": "^4.1.5",
-    "rollup": "^2.36.2",
+    "rollup": "^2.79.1",
     "rollup-plugin-terser": "^7.0.2",
+    "rollup-watch": "^4.3.1",
     "serve": "^11.3.2"
   },
   "dependencies": {

diff --git a/public/bundle.js b/public/bundle.js
diff --git a/public/bundle.js.map b/public/bundle.js.map
diff --git a/public/index.html b/public/index.html
@@ -1,21 +1,118 @@
-<!doctype html>
-<html>
-<head lang='en'>
-	<meta charset='utf-8'>
-	<meta name='viewport' content='width=device-width'>
-	<title>rollup-starter-app</title>
-
-	<style>
-		body {
-			font-family: 'Helvetica Neue', Arial, sans-serif;
-			color: #333;
-			font-weight: 300;
-		}
-	</style>
-</head>
-<body>
-	<h1>rollup-starter-app</h1>
-	<p>The time is <span id='time-now'>...</span></p>
-	<script src='bundle.js'></script>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="utf-8">
+    <meta name="google-site-verification" content="GSo7buConJufr_QUETL_IH06rZeFvtlof6xU7j_LmZc">
+
+    <meta http-equiv="Cache-control" content="max-age=31536000, immutable">
+
+    <meta name="theme-color" content="#212123">
+
+    <title>WorkSite</title
+
+    <meta name="description" content="Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.">
+
+    <meta property="og:site_name" content="Google Fonts">    <meta property="og:url" content="https://fonts.google.com/icons">
+
+    <meta property="og:title" content="Material Symbols and Icons - Google Fonts">
+
+    <meta property="og:description" content="Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.">
+
+    <meta property="og:image" content="https://www.gstatic.com/images/icons/material/apps/fonts/1x/material-symbols/material_symbols.jpg">
+
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:site" content="@faithhvac">
+    <meta name="twitter:title" content="Expert HVAC Service in Chicago - Faith Heating and Cooling">
+
+    <meta name="twitter:description" content="Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.">
+
+    <meta name="twitter:image" content="https://www.gstatic.com/images/icons/material/apps/fonts/1x/material-symbols/material_symbols.jpg">
+
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <link rel="icon" href="https://www.gstatic.com/images/icons/material/apps/fonts/1x/catalog/v5/favicon.svg">
+
+    <meta name="apple-mobile-web-app-capable" content="yes">
+
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+
+    <link rel="apple-touch-icon" href="https://www.gstatic.com/images/branding/product/1x/google_fonts_64dp.png">
+
+    <link rel="apple-touch-icon" sizes="96x96" href="https://www.gstatic.com/images/branding/product/1x/google_fonts_96dp.png">
+
+    <link rel="apple-touch-icon" sizes="128x128" href="https://www.gstatic.com/images/branding/product/2x/google_fonts_64dp.png">
+
+    <link rel="apple-touch-icon" sizes="192x192" href="https://www.gstatic.com/images/branding/product/2x/google_fonts_96dp.png">
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="canonical" href="https://fonts.google.com/icons"/>
+
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+
+    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&amp;display=swap" rel="preload" as="font">
+
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+
+
+<script defer
+{
+  "@context": "https://schema.org",
+  "@type": ["HVAC contractor", "Heating contractor", "Air conditioning contractor", "Air conditioning repair service", "Furnace repair service", "Handyman service"],
+  "address": {
+  "@type": "PostalAddress",
+  "streetAddress": "1709 W Cornelia Ave Unit 2",
+  "addressLocality": "Chicago",
+  "addressRegion": "IL",
+  "postalCode": "60657",
+  "addressCountry": "US"
+	}
+}
+</script>
+<style>
+*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-text-size-adjust:100%;-moz-text-size-adjust: 100%;text-size-adjust:100%;}
+</style>
+
+
+		<link rel="stylesheet" href="style.css" />
+
+  </head>
+  <body>
+
+		<header>
+      <div class="header-wrapper">
+
+        <nav>
+          <i class="material-symbols-outlined">menu</i>
+        </nav>
+
+        <h1>LOGO</h1>
+
+        <span id="headerHeight"></span>
+
+      </div>
+		</header>
+
+    <main>
+      <div class="main-wrapper">
+
+        <span id="time-now">...</span>
+
+        <span id="mainHeight"></span>
+
+      </div>
+		</main>
+
+		<footer>
+      <div class="footer-wrapper">
+
+        <span id="footerHeight"></span>
+
+      </div>
+    </footer>
+
+    <script type="module" src="bundle.js"></script>
+
+  </body>
+</html>
diff --git a/public/indexedDB/index.html b/public/indexedDB/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"  content="width=device-width, initial-scale=1.0">
+    <title>IndexedDB</title>
+</head>
+<body>
+    <form id="subscription">
+        <h1>Subscribe</h1>
+        <div id="message"></div>
+        <div class="field">
+            <label for="name">Name: 
+            <input type="text" id="name" name="name" placeholder="Enter your full name" required /></label>
+            <small></small>
+        </div>
+        <div class="field">
+            <label for="email">Email: 
+            <input type="email" id="email" name="email" placeholder="Enter your email address" required /></label>
+            <small></small>
+        </div>
+        <div class="field">
+            <button type="button" class="full" id="submit">Subscribe</button>
+        </div>
+    </form> <script src="js/form-data.js" defer></script>
+
+    <script src="js/app.js" defer></script>
+</body>
+</html>
diff --git a/public/indexedDB/js/app-backedup.js b/public/indexedDB/js/app-backedup.js
@@ -0,0 +1,184 @@
+(function () {
+  // check for IndexedDB support
+  if (!window.indexedDB) {
+      console.log(`Your browser doesn't support IndexedDB`);
+      return;
+  }
+
+  // open the CRM database with the version 1
+  const request = indexedDB.open('CRM', 1);
+
+  // create the Contacts object store and indexes
+  request.onupgradeneeded = (event) => {
+      let db = event.target.result;
+
+      // create the Contacts object store 
+      // with auto-increment id
+      let store = db.createObjectStore('Contacts', {
+          autoIncrement: true
+      });
+
+      // create an index on the email property
+      let index = store.createIndex('email', 'email', {
+          unique: true
+      });
+  };
+
+  // handle the error event
+  request.onerror = (event) => {
+      console.error(`Database error: ${event.target.errorCode}`);
+  };
+
+  // handle the success event
+  request.onsuccess = (event) => {
+      const db = event.target.result;
+
+      // insert contacts
+      // insertContact(db, {
+      //     email: 'john.doe@outlook.com',
+      //     firstName: 'John',
+      //     lastName: 'Doe'
+      // });
+
+      // insertContact(db, {
+      //     email: 'jane.doe@gmail.com',
+      //     firstName: 'Jane',
+      //     lastName: 'Doe'
+      // });
+
+
+      // get contact by id 1
+      // getContactById(db, 1);
+
+
+      // get contact by email
+      // getContactByEmail(db, 'jane.doe@gmail.com');
+
+      // get all contacts
+      // getAllContacts(db);
+
+      deleteContact(db, 1);
+
+  };
+
+  function insertContact(db, contact) {
+      // create a new transaction
+      const txn = db.transaction('Contacts', 'readwrite');
+
+      // get the Contacts object store
+      const store = txn.objectStore('Contacts');
+      //
+      let query = store.put(contact);
+
+      // handle success case
+      query.onsuccess = function (event) {
+          console.log(event);
+      };
+
+      // handle the error case
+      query.onerror = function (event) {
+          console.log(event.target.errorCode);
+      }
+
+      // close the database once the 
+      // transaction completes
+      txn.oncomplete = function () {
+          db.close();
+      };
+  }
+
+
+  function getContactById(db, id) {
+      const txn = db.transaction('Contacts', 'readonly');
+      const store = txn.objectStore('Contacts');
+
+      let query = store.get(id);
+
+      query.onsuccess = (event) => {
+          if (!event.target.result) {
+              console.log(`The contact with ${id} not found`);
+          } else {
+              console.table(event.target.result);
+          }
+      };
+
+      query.onerror = (event) => {
+          console.log(event.target.errorCode);
+      }
+
+      txn.oncomplete = function () {
+          db.close();
+      };
+  };
+
+  function getContactByEmail(db, email) {
+      const txn = db.transaction('Contacts', 'readonly');
+      const store = txn.objectStore('Contacts');
+
+      // get the index from the Object Store
+      const index = store.index('email');
+      // query by indexes
+      let query = index.get(email);
+
+      // return the result object on success
+      query.onsuccess = (event) => {
+          console.table(query.result); // result objects
+      };
+
+      query.onerror = (event) => {
+          console.log(event.target.errorCode);
+      }
+
+      // close the database connection
+      txn.oncomplete = function () {
+          db.close();
+      };
+  }
+
+  function getAllContacts(db) {
+      const txn = db.transaction('Contacts', "readonly");
+      const objectStore = txn.objectStore('Contacts');
+
+      objectStore.openCursor().onsuccess = (event) => {
+          let cursor = event.target.result;
+          if (cursor) {
+              let contact = cursor.value;
+              console.log(contact);
+              // continue next record
+              cursor.continue();
+          }
+      };
+      // close the database connection
+      txn.oncomplete = function () {
+          db.close();
+      };
+  }
+
+
+  function deleteContact(db, id) {
+      // create a new transaction
+      const txn = db.transaction('Contacts', 'readwrite');
+
+      // get the Contacts object store
+      const store = txn.objectStore('Contacts');
+      //
+      let query = store.delete(id);
+
+      // handle the success case
+      query.onsuccess = function (event) {
+          console.log(event);
+      };
+
+      // handle the error case
+      query.onerror = function (event) {
+          console.log(event.target.errorCode);
+      }
+
+      // close the database once the 
+      // transaction completes
+      txn.oncomplete = function () {
+          db.close();
+      };
+
+  }
+})();