Live Site URL ๐
Scrimba projects ๐
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.
โ 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"
}
โจ Frontend Mentor - @mendezpvi