added new application get-cart

AnuragAnalog · AnuragAnalog · commit 9ff06922189b · 2023-07-11T11:16:27.000-04:00
diff --git a/README.md b/README.md
@@ -1,3 +1,11 @@
 # js-projects
 
 A set of my js projects
+
+* Passenger Counter App - A simple app stores the count of passengers in a station and displays it on the screen. It also has a reset button that resets the counter to zero.
+
+* Mini Calculator - A simple calculator that performs basic arithmetic operations.
+
+* BlackJack - A simple game of blackjack, where cards are drawn at random, if they exceed 21, the player losses, if the player gets 21, the player wins.
+
+* Chrome extension - A Lead Tracker chrome extension, which can track all the leads of the user and store them in a localstorage(browser database)
diff --git a/get-cart/cat.png b/get-cart/cat.png
diff --git a/get-cart/index.html b/get-cart/index.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+    <head>
+        <title> Get Cart </title>
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="style.css" type="text/css">
+    </head>
+
+    <body>
+        <div class="main-container">
+            <img src="cat.png" alt="cat" id="cat">
+            <input type="text" id="input-field" placeholder="Enter Item name">
+            <button id="add-btn"> Add Item </button>
+            <p id="items">
+
+            </p>
+        </div>
+
+        <script src="index.js" type="module"></script>
+    </body>
+</html>
diff --git a/get-cart/index.js b/get-cart/index.js
@@ -0,0 +1,24 @@
+//@ts-check
+
+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://get-cart-default-rtdb.firebaseio.com/"
+}
+
+const app = initializeApp(appSettings);
+const db = getDatabase(app);
+const itemsInDB = ref(db, "items");
+
+let inputEL = document.querySelector("#input-field");
+let btnEL = document.querySelector("#add-btn");
+let pEL = document.querySelector("#items");
+
+btnEL.addEventListener("click", function () {
+    let item = inputEL.value;
+
+    push(itemsInDB, item);
+    pEL.textContent += item + " ";
+    inputEL.value = "";
+});
diff --git a/get-cart/project.zip b/get-cart/project.zip
diff --git a/get-cart/style.css b/get-cart/style.css
@@ -0,0 +1,41 @@
+html, body {
+    margin: 0;
+    padding: 0;
+    font-family: 'Rubik', sans-serif;
+    background-color: #EEF0F4;
+}
+
+.main-container {
+    display: flex;
+    flex-direction: column;
+    max-width: 320px;
+    margin: 30px auto;
+}
+
+img {
+    width: 150px;
+    margin: 0 auto;
+}
+
+input {
+    margin: 10px 0;
+    border: none;
+    padding: 15px;
+    border-radius: 8px;
+    font-size: 20px;
+    text-align: center;
+    color: #432000;
+    background-color: #DCE1EB;
+    font-family: 'Rubik', sans-serif;
+}
+
+button {
+    border: none;
+    border-radius: 8px;
+    padding: 15px;
+    font-size: 20px;
+    text-align: center;
+    color: #FDFDFD;
+    background-color: #AC485A;
+    font-family: 'Rubik', sans-serif;
+}
