Create page, scripts and icon to display current quarter cashback cat…

…agories Created index.html as the home page Created cards.js, jsonItemLoader.js to compute and display current quarter cashback catagories Created cards.json for simple data storage Created icon image files for mobile shortcut icons
Goolloo · Jan 2, 2019 · a4dc6e0 · a4dc6e0
1 parent 14e0c74
commit a4dc6e0
Show file tree

Hide file tree

Showing 10 changed files with 326 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,13 @@
+# Five Percent Cashback Credit Card Catagory
+## Testing
+### Windows
+Using powershell and npm tool `http-server` to run local website so it won't cause cross region file access issue.
+#### Install http-server
+```sh
+npm install http-server -g
+```
+#### Run http-server with given port number
+```sh
+ http-server.cmd ./ -p 8060
+```
+
diff --git a/data/cards.json b/data/cards.json
@@ -0,0 +1,127 @@
+[{
+    "Name": "Discover it!",
+    "CashBackList": [{
+            "Year": 2018,
+            "Quater": 1,
+            "Catagories": ["Gas Stations", "Wholesale Clubs"]
+        },
+        {
+            "Year": 2018,
+            "Quater": 2,
+            "Catagories": ["Grocery Stores"]
+        },
+        {
+            "Year": 2018,
+            "Quater": 3,
+            "Catagories": ["Restaurants"]
+        },
+        {
+            "Year": 2018,
+            "Quater": 4,
+            "Catagories": ["Amazon.com", "Wholesale Clubs"]
+        }, {
+            "Year": 2019,
+            "Quater": 1,
+            "Catagories": ["Grocery Stores"]
+        },
+        {
+            "Year": 2019,
+            "Quater": 2,
+            "Catagories": ["Gas Stations", "Uber", "Lyft"]
+        },
+        {
+            "Year": 2019,
+            "Quater": 3,
+            "Catagories": ["Restaurants"]
+        },
+        {
+            "Year": 2019,
+            "Quater": 4,
+            "Catagories": ["Amazon.com"]
+        }
+    ]
+}, {
+    "Name": "Chase Freedom",
+    "CashBackList": [{
+            "Year": 2018,
+            "Quater": 1,
+            "Catagories": ["Gas Stations", "Wholesale Clubs"]
+        },
+        {
+            "Year": 2018,
+            "Quater": 2,
+            "Catagories": ["Grocery Stores"]
+        },
+        {
+            "Year": 2018,
+            "Quater": 3,
+            "Catagories": ["Restaurants"]
+        },
+        {
+            "Year": 2018,
+            "Quater": 4,
+            "Catagories": ["Amazon.com", "Wholesale Clubs"]
+        }, {
+            "Year": 2019,
+            "Quater": 1,
+            "Catagories": ["Gas Stations", "Tolls", "Grugstores"]
+        },
+        {
+            "Year": 2019,
+            "Quater": 2,
+            "Catagories": []
+        },
+        {
+            "Year": 2019,
+            "Quater": 3,
+            "Catagories": []
+        },
+        {
+            "Year": 2019,
+            "Quater": 4,
+            "Catagories": []
+        }
+    ]
+}, {
+    "Name": "Citi Dividend",
+    "CashBackList": [{
+            "Year": 2018,
+            "Quater": 1,
+            "Catagories": ["Gas Stations", "Car Rentals"]
+        },
+        {
+            "Year": 2018,
+            "Quater": 2,
+            "Catagories": ["HomeDepot", "Home Furnishing Stores"]
+        },
+        {
+            "Year": 2018,
+            "Quater": 3,
+            "Catagories": ["Airlines", "Movie Theaters"]
+        },
+        {
+            "Year": 2018,
+            "Quater": 4,
+            "Catagories": ["BestBuy", "Department Stores"]
+        }, {
+            "Year": 2019,
+            "Quater": 1,
+            "Catagories": ["Gas Stations", "HomeDepot"]
+        },
+        {
+            "Year": 2019,
+            "Quater": 2,
+            "Catagories": ["Grugstores", "Fitness Clubs"]
+        },
+        {
+            "Year": 2019,
+            "Quater": 3,
+            "Catagories": ["Airlines", "Car Rentals"]
+        },
+        {
+            "Year": 2019,
+            "Quater": 4,
+            "Catagories": ["Department Stores", "BestBuy"]
+        }
+    ]
+}]
diff --git a/images/FivePercent_152X.png b/images/FivePercent_152X.png
diff --git a/images/FivePercent_167X.png b/images/FivePercent_167X.png
diff --git a/images/FivePercent_180X.png b/images/FivePercent_180X.png
diff --git a/images/FivePercent_200X.png b/images/FivePercent_200X.png
diff --git a/images/FivePercent_origin.PNG b/images/FivePercent_origin.PNG
diff --git a/index.html b/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <!--MetaData-->
+    <meta charset="utf-8">
+    <title>Five Percent Cashback Credit Card Catagory</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+    <script src="./scripts/jsonItemLoader.js"></script>
+    <script src="./scripts/cards.js"></script>
+    <!-- HTML icon -->
+    <link rel="icon" type="image/png" href="./images/FivePercent_200X.png">
+    <!-- Safari web app icons-->
+    <link rel="apple-touch-icon" href="./images/FivePercent_200X.png">
+    <link rel="apple-touch-icon" href="./images/FivePercent_152X.png" sizes="152x152">
+    <link rel="apple-touch-icon" href="./images/FivePercent_167X.png" sizes="167x167">
+    <link rel="apple-touch-icon" href="./images/FivePercent_180X.png" sizes="180x180">
+    <!-- Safari web app configurations-->
+    <meta name="apple-mobile-web-app-title" content="Five Percent Cashback
+            Credit Card Catagory">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="white">
+</head>
+
+<body onload="onload()">
+    <!-- -->
+    <!-- -->
+    <!-- Web page -->
+    <div class="contains-fluid">
+        <div class="col-sm-12 col-lg-4" id="container">
+            <div class="panel-group" id="cards"></div>
+        </div>
+    </div>
+    <!-- WEB Page end -->
+    <!-- -->
+    <!-- -->
+</body>
+
+</html>
diff --git a/scripts/cards.js b/scripts/cards.js
@@ -0,0 +1,108 @@
+/**
+ * Page loading function
+ */
+function onload() {
+    displayCurrentQuarter();
+
+    jsonItemLoader.loadFromJSON("./data/cards.json", function(JSONObj) {
+        displayCard(JSONObj);
+    });
+}
+
+/**
+ * Find quarter logic
+ */
+function findCurrentQuarterCatagory(cashBackList) {
+    var currentQuarter = getCurrentQuarter();
+    for (var i = 0; i < cashBackList.length; i++) {
+        var cashback = cashBackList[i];
+        if (cashback[cardCashbackYearKey] == currentQuarter[cardCashbackYearKey] &&
+            cashback[cardCashbackQuarterKey] == currentQuarter[cardCashbackQuarterKey]) {
+            return cashback;
+        }
+    }
+}
+
+function getCurrentQuarter() {
+    var currentQuarter = {};
+    var current = new Date();
+    currentQuarter[cardCashbackYearKey] = current.getFullYear();
+    currentQuarter[cardCashbackQuarterKey] = current.getMonth() / 3 + 1;
+
+    return currentQuarter;
+}
+
+/**
+ * Page element building functions
+ */
+var containerId = "container";
+var currentQuarterAlertId = "currentQuarter";
+var cardPanelGroupId = "cards";
+
+var cardNameKey = "Name";
+var cardCashbackListKey = "CashBackList";
+var cardCashbackYearKey = "Year";
+var cardCashbackQuarterKey = "Quater";
+var cardCashbackCatagoryKey = "Catagories";
+
+function displayCurrentQuarter() {
+    var currentQuarter = getCurrentQuarter();
+
+    var currentQuarterAlert = document.createElement("div");
+    currentQuarterAlert.setAttribute("class", "alert alert-success");
+    currentQuarterAlert.setAttribute("id", currentQuarterAlertId);
+    currentQuarterAlert.innerHTML = currentQuarter[cardCashbackYearKey] + ' Q' + currentQuarter[cardCashbackQuarterKey];
+
+    var container = document.getElementById(containerId);
+    container.insertAdjacentElement("afterbegin", currentQuarterAlert);
+}
+
+function displayCard(card) {
+    var cardPanelGroup = document.getElementById(cardPanelGroupId);
+    cardPanelGroup.appendChild(buildCardPanel(card));
+}
+
+function buildCardPanel(card) {
+    // Panel Heading
+    var cardPanelHeading = buildCardPanelHeading(card[cardNameKey]);
+    // Panel Body
+    var cardPanelBody = buildCardPanelBody(card[cardCashbackListKey]);
+    // Panel
+    var cardPanel = document.createElement("div");
+    cardPanel.setAttribute("class", "panel panel-info");
+    cardPanel.appendChild(cardPanelHeading);
+    cardPanel.appendChild(cardPanelBody);
+
+    return cardPanel;
+}
+
+function buildCardPanelHeading(cardName) {
+    var cardPanelHeading = document.createElement("div");
+    cardPanelHeading.setAttribute("class", "panel-heading");
+    cardPanelHeading.innerHTML = cardName;
+
+    return cardPanelHeading;
+}
+
+function buildCardPanelBody(cashBackList) {
+    var currentCashBackInfo;
+    var currentCashBack = findCurrentQuarterCatagory(cashBackList);
+    if (currentCashBack == null || currentCashBack == undefined) {
+        currentCashBackInfo = "Cashback catagory of current quarter hasn't been updated yet."
+    } else {
+        currentCashBackInfo = currentCashBack[cardCashbackCatagoryKey].join();
+    }
+
+    var cardPanelBody = document.createElement("div");
+    cardPanelBody.setAttribute("class", "panel-body");
+    cardPanelBody.innerHTML = currentCashBackInfo;
+
+    return cardPanelBody;
+}
+
+/**
+ * debug
+ */
+function print(str) {
+    console.log(str);
+}
diff --git a/scripts/jsonItemLoader.js b/scripts/jsonItemLoader.js
@@ -0,0 +1,35 @@
+/**
+ * Json loading function
+ */
+// Base Load JSON file function
+function loadJSON(filePath, callBack) {
+    var request = new XMLHttpRequest();
+    request.overrideMimeType("application/json");
+    request.open('GET', filePath, true);
+    request.onreadystatechange = function() {
+        if (request.readyState == 4 && request.status == "200") {
+            callBack(request.responseText);
+        }
+    };
+    request.send(null);
+}
+
+/**
+ * JsonItemLoader module
+ */
+var jsonItemLoader = {};
+jsonItemLoader['items'] = [];
+jsonItemLoader.addItem = function(newItem) {
+    jsonItemLoader['items'].push(newItem);
+}
+jsonItemLoader.getItems = function() {
+    return jsonItemLoader['items'];
+}
+jsonItemLoader.loadFromJSON = function(filePath, objectProcessCallBack) {
+    loadJSON(filePath, function(reseponse) {
+        var actualJSON = JSON.parse(reseponse);
+        for (var i = 0; i < actualJSON.length; i++) {
+            objectProcessCallBack(actualJSON[i]);
+        }
+    })
+};