Skip to content

mendezpvi/fcp-mobile-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Build Mobile App

Build Mobile App

Screenshots 📷

Mobile

Desktop

Link 🔗

Live Site URL 👀

Scrimba projects 👀

Steps:

1️⃣ Add the input value to the DB.

2️⃣ Render the DB items.

3️⃣ Remove item duplication (bug generated when adding a new item).

4️⃣ Retrieve key of the current item to be deleted.

5️⃣ Create element in DOM using createElement.

6️⃣ Delete item by clicking on it.

7️⃣ Check if items exist in the DB.

8️⃣ Edit Manifest.

I learnt 🤓

✅ import

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"

✅ Firebase: initializeApp

const appSettings = {
  databaseURL: "https://shopping-list-e9203-default-rtdb.firebaseio.com/"
}
const app = initializeApp(appSettings)

✅ Firebase: getDatabase

const database = getDatabase(app)

✅ Firebase: reference

const shoppingListInDB = ref(database, "shoppingList")

✅ Firebase: push

push(shoppingListInDB, inputValue)

✅ Firebase: onValue

✅ Firebase: snapshot

onValue(shoppingListInDB, function(snapshot) {
  // CODE
})

✅ ID's

✅ Firebase: remove

remove(exactLocationItemInDB)

✅ Object ➡️ Array

let itemsArr = Object.entries(snapshot.val())

✅ createElement

const LI = document.createElement("LI")
LI.textContent = itemValue

✅ Flexbox: flex-wrap

✅ Flexbox: gap

✅ user-select

✅ Setting the viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

✅ Favicon

✅ Web Application Manifest

{
  "name": "Shopping List",
  "short_name": "Shopping List",
  "icons": [
    {
      "src": "./assets/favicon/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./assets/favicon/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#593c27",
  "background_color": "#DCF3FA",
  "display": "standalone"
}

Author 🔰

✨ Frontend Mentor - @mendezpvi