diff --git a/index.css b/index.css index a99ee492..17671fd5 100644 --- a/index.css +++ b/index.css @@ -1,4 +1,71 @@ html, body { margin: 0; padding: 0; + font-family: 'Rubik', sans-serif; + background-color: #EEF0F4; + color: #432000; + user-select: none; +} + +.container { + display: flex; + flex-direction: column; + max-width: 320px; + margin: 30px auto; +} + +img { + width: 150px; + margin: 0 auto; +} + +input { + color: #432000; + background-color: #DCE1EB; + border: 0; + padding: 15px; + border-radius: 8px; + font-size: 20px; + text-align: center; + font-family: 'Rubik', sans-serif; + margin: 10px 0; +} + +button { + color: #FDFDFD; + background-color: #AC485A; + border: 0; + padding: 15px; + border-radius: 8px; + font-size: 20px; + text-align: center; + font-family: 'Rubik', sans-serif; +} + +button:hover { + background-color: #432000; + cursor: pointer; +} + +ul { + list-style-type: none; + padding: 0; + display: flex; + flex-wrap: wrap; + gap: 10px; +} + +ul li { + font-size: 20px; + background-color: #FFFDF8; + padding: 15px; + border-radius: 8px; + flex-grow: 1; + text-align: center; + box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2) +} + +ul li:hover { + background-color: #FFECC7; + cursor: pointer; } \ No newline at end of file diff --git a/index.html b/index.html index b0dc0138..6372b6ef 100644 --- a/index.html +++ b/index.html @@ -2,11 +2,24 @@ Add to Cart + + + + + + + + - - - +
+ + + + +
+ \ No newline at end of file diff --git a/index.js b/index.js index 831a5cd6..c026b3bd 100644 --- a/index.js +++ b/index.js @@ -2,12 +2,68 @@ Challenge: Make it so that when you click the 'Add to cart' button, whatever is written in the input field should be console logged. */ +import { initializeApp } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js" +import { getDatabase, ref, push } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-database.js" + +const appSettings = { + databaseURL: "https://realtime-database-4c27d-default-rtdb.europe-west1.firebasedatabase.app/" +} + +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()) + + clearShoppingListEl() + + for (let i = 0; i < itemsArray.length; i++) { + let currentItem = itemsArray[i] + let currentItemID = currentItem[0] + let currentItemValue = currentItem[1] + + appendItemToShoppingListEl(currentItem) + } + } else { + shoppingListEl.innerHTML = "No items here... yet" + } +}) + +function clearShoppingListEl() { + shoppingListEl.innerHTML = "" +} + +function clearInputFieldEl() { + inputFieldEl.value = "" +} + +function appendItemToShoppingListEl(item) { + let itemID = item[0] + let itemValue = item[1] + + let newEl = document.createElement("li") + + newEl.textContent = itemValue + + newEl.addEventListener("click", function() { + let exactLocationOfItemInDB = ref(database, `shoppingList/${itemID}`) + + remove(exactLocationOfItemInDB) + }) - console.log(inputValue) -}) \ No newline at end of file + shoppingListEl.append(newEl) +} \ No newline at end of file