Progressive Web App - Shopping cart using Firebase - Vladi.cc

Las aplicaciones web progresivas (mejor conocidas como PWAs por «Progressive Web Apps») son aplicaciones web que utilizan APIs y funciones emergentes del navegador web junto a una estrategia tradicional de mejora progresiva para ofrecer una aplicación web multiplataforma, similar a una aplicación móvil.

Este pequeño proyecto consiste en crear un carrito de compras usando HTML, CSS y JavaScript con el servicio de Firebase Realtime Database para la persistencia de los datos. Este es un curso impartido por Rafid Hoda en YouTube y Scrimba, es un curso muy genial en el cual se ponen en práctica excelentes fundamentos de JavaScript y del Desarrollo Web en general.

Preview

Escribe un producto y agregalo, para eliminar toca el producto de la lista

Abrir en una nueva pestaña

Código

index.html



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap"
    />
    <link rel="stylesheet" href="index.css" />
    <link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png" />
    <link rel="manifest" href="site.webmanifest" />
    <title>Add to cart</title>
  </head>
  <body>
    <div class="container">
      <img src="assets/cat.png" />
      <input type="search" id="input-field" placeholder="Bread" />
      <button id="add-button">Add to cart</button>
      <ul id="shopping-list"></ul>
      <script src="index.js" type="module" crossorigin></script>
    </div>
  </body>
</html>

index.js


import { initializeApp } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js";
import { getDatabase, ref, push, onValue, remove } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-database.js";
import { projectId, databaseUrl } from "../config.js";

const appSettings = {
    projectId,
    databaseUrl
}

const app = initializeApp(appSettings);
const database = getDatabase(app);
const shoppingListInDB = ref(database, "shoppingList");

const inputFieldEl = document.getElementById("input-field");
const addButtonEl = document.getElementById("add-button");
const shoppingListEl = document.getElementById("shopping-list");

addButtonEl.addEventListener("click", function () {
    let inputValue = inputFieldEl.value;
    push(shoppingListInDB, inputValue);
    clearInputFieldEl();
});

onValue(shoppingListInDB, function (snapshot) {

    if (snapshot.exists()) {
        let itemsArray = Object.entries(snapshot.val());

        cleanShoppingListEl();

        for (let i = 0; i < itemsArray.length; i++) {
            let currentValue = itemsArray[i];
            let currentItemID = currentValue[0];
            let currentItemValue = currentValue[1];
            appendItemToShoppingListEl(currentValue);
        }
    }else{
        shoppingListEl.innerHTML = "No items here... yet";
    }


});

function clearInputFieldEl() {
    inputFieldEl.value = "";
}

function cleanShoppingListEl() {
    shoppingListEl.innerHTML = "";
}

function appendItemToShoppingListEl(item) {
    let newEl = document.createElement("li");
    let itemID = item[0];
    let itemValue = item[1];

    newEl.textContent = itemValue;

    shoppingListEl.append(newEl);

    newEl.addEventListener("click", function () {
        let exactLocationOfItemInDB = ref(database, `shoppingList/${itemID}`);
        remove(exactLocationOfItemInDB);
    })
}