Mobile lab 5

.gitignore

@@ -0,0 +1,29 @@
+node_modules/
+dist/
+# Operating system files
+.DS_Store
+Thumbs.db
+Desktop.ini
+
+# Editor and temporary files
+*.swp
+*.swo
+*~
+*.tmp
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+pnpm-debug.log*
+
+# JavaScript
+node_modules/
+dist/
+coverage/
+
+# Java and Android build output
+.gradle/
+build/
+*.class
+local.properties

INFO-3169 Databases 2/labs/Lab 5/Lab 5 SQL Scripts.sql

@@ -0,0 +1,51 @@
+DROP TABLE test_customers;
+
+CREATE TABLE test_customers (
+    CustomerID NUMBER(8),
+    CustName VARCHAR2(35) NOT NULL,
+    CustAge NUMBER(2),
+    CONSTRAINT pk_test_customers_CustomerID PRIMARY KEY(CustomerID),
+    CONSTRAINT uk_test_customers_CustName UNIQUE(CustName),
+    CONSTRAINT ck_test_customers_CustAge CHECK(CustAge>=16 AND CustAge<=70)
+);
+
+INSERT INTO test_customers VALUES(100, 'John Smith', null);
+INSERT INTO test_customers VALUES(350, 'Mark Smith', 20);
+
+SELECT * FROM test_customers;
+
+CREATE TABLE test_orders (
+    OrderID NUMBER(8),
+    CustomerID NUMBER(8),
+    OrderDate Date,
+    OrderAmount NUMBER(8,2),
+    CONSTRAINT pk_test_orders_OrderID PRIMARY KEY(OrderID),
+    CONSTRAINT fk_test_orders_test_customers FOREIGN KEY(CustomerID) REFERENCES test_customers(CustomerID)
+);
+
+INSERT INTO test_orders VALUES(1, 100, '2023-01-15', 125.3);
+INSERT INTO test_orders VALUES(2, 100, '2023-01-18', 300.3);
+
+SELECT * FROM test_orders;
+SELECT * FROM test_customers c JOIN test_orders o ON c.CustomerID = o.CustomerID;
+
+
+
+
+SELECT constraint_name, constraint_type, search_condition, table_name, 'Levi McLean' AS "Created By"
+FROM user_constraints
+WHERE table_name IN('CATEGORIES','EMPLOYEES','CUSTOMERS', 'ORDERS','ORDER_DETAILS','PRODUCTS','VENDORS','PRODUCT_VENDORS') 
+    AND constraint_name NOT LIKE 'SYS%'
+ORDER BY 1;
+
+
+
+SELECT 'Customers' AS "Levi McLean's Tables", COUNT(*) AS "Row Count" FROM CUSTOMERS
+UNION
+SELECT 'Employees', COUNT(*) FROM Employees UNION
+SELECT 'Orders', COUNT(*) FROM Orders UNION
+SELECT 'Orders Details', COUNT(*) FROM OrderDetails UNION
+SELECT 'Products', COUNT(*) FROM Products UNION
+SELECT 'Categories', COUNT(*) FROM Categories UNION
+SELECT 'Shippers', COUNT(*) FROM Shippers UNION
+SELECT 'Suppliers', COUNT(*) FROM Suppliers;

INFO-3169 Databases 2/labs/Lab 5/Lab 5.sql

@@ -0,0 +1,162 @@
+-- (1) Customers --
+DROP TABLE Customers CASCADE CONSTRAINTS; -- uncomment after 1st run
+
+CREATE TABLE customers (
+    customerId CHAR(5),
+    companyName VARCHAR2(40) NOT NULL,
+    contactName VARCHAR2(30),
+    contactTitle VARCHAR2(30),
+    address VARCHAR2(60),
+    city VARCHAR2(15),
+    region VARCHAR2(15),
+    postalCode VARCHAR2(10),
+    country VARCHAR2(15),
+    phone VARCHAR2(24),
+    fax VARCHAR2(24),
+    email VARCHAR2(50),
+
+    CONSTRAINT Customers_CustomerId_pk PRIMARY KEY (customerId),
+    CONSTRAINT Customers_Email_uk UNIQUE(email),
+);
+
+-- (2) Employees --
+DROP TABLE Employees CASCADE CONSTRAINTS; -- uncomment after 1st run
+
+CREATE TABLE employees (
+    employeeId NUMBER(8,0),
+    lastName VARCHAR2(20) NOT NULL,
+    firstName VARCHAR2(10) NOT NULL,
+    title VARCHAR2(30),
+    titleOfCourtesy VARCHAR2(25),
+    birthDate DATE,
+    hireDate DATE,
+    address VARCHAR2(60),
+    city VARCHAR2(15),
+    region VARCHAR2(15),
+    postalCode VARCHAR2(10),
+    country VARCHAR2(15),
+    homePhone VARCHAR2(24),
+    extension VARCHAR2(4),
+    notes VARCHAR2(600),
+    reportsTo NUMBER(8,0),
+    photograph VARCHAR2(255),
+    SIN CHAR(9),
+
+    CONSTRAINT Employees_EmployeeId_pk PRIMARY KEY (employeeId),
+    CONSTRAINT Employees_SIN_uk UNIQUE (SIN),
+    CONSTRAINT Employees_ReportsTO_fk REFERENCES employees(employeeId),
+);
+
+-- (3) Shippers --
+DROP TABLE Shippers CASCADE CONSTRAINTS; -- uncomment after 1st run
+
+CREATE TABLE shippers (
+    shipperId NUMBER(8,0) NOT NULL,
+    companyName VARCHAR2(40) NOT NULL,
+    phone VARCHAR2(24),
+
+    CONSTRAINT Shippers_Shipper_ID_pk PRIMARY KEY (shipperId),
+);
+
+-- (4) Suppliers --
+DROP TABLE Suppliers CASCADE CONSTRAINTS; -- uncomment after 1st run
+
+CREATE TABLE suppliers (
+    supplierId NUMBER(8,0) NOT NULL,
+    companyName VARCHAR2(40) NOT NULL,
+    contactName VARCHAR2(30),
+    contactTitle VARCHAR2(30),
+    address VARCHAR2(60),
+    city VARCHAR2(15),
+    region VARCHAR2(15),
+    postalCode VARCHAR2(10),
+    country VARCHAR2(15),
+    phone VARCHAR2(24),
+    fax VARCHAR2(24),
+    homepage VARCHAR2(200),
+
+    CONSTRAINT Suppliers_SupplierId_pk PRIMARY KEY (supplierId),
+);
+
+-- (5) Categories ---
+DROP TABLE Categories CASCADE CONSTRAINTS; -- uncomment after 1st run
+
+CREATE TABLE categories (
+    categoryId NUMBER(8,0),
+    categoryName VARCHAR2(15) NOT NULL,
+    categoryCode NUMBER(6,0),
+    description VARCHAR2(300),
+
+    CONSTRAINT Categories_CategoryID_pk PRIMARY KEY (categoryId),
+    CONSTRAINT Categories_CategoryCode_uk UNIQUE(categoryCode),
+);
+
+-- (6) Orders --
+DROP TABLE Orders CASCADE CONSTRAINTS; -- uncomment after 1st run
+
+CREATE TABLE orders (
+    orderId NUMBER(8,0) NOT NULL,
+    customerId CHAR(5),
+    employeeId NUMBER(8,0),
+    territoryId VARCHAR2(20),
+    orderDate DATE,
+    requiredDate DATE,
+    shippedDate DATE,
+    shipVia NUMBER(8,0),
+    freight NUMBER(8,2),
+    shipName VARCHAR2(40),
+    shipAddress VARCHAR2(60),
+    shipCity VARCHAR2(15),
+    shipRegion VARCHAR2(15),
+    shipPostalCode VARCHAR2(10),
+    shipCountry VARCHAR2(15),
+
+    CONSTRAINT Orders_OrderId_pk PRIMARY KEY (orderId),
+    CONSTRAINT Orders_CustomerId_fk REFERENCES customers(customerId),
+    CONSTRAINT Orders_EmployeeId_fk REFERENCES employees(employeeId),
+    CONSTRAINT Orders_ShippedVia_fk REFERENCES shippers(shipperId),
+);
+
+-- (7) Products --
+DROP TABLE Products CASCADE CONSTRAINTS; -- uncomment after 1st run
+
+CREATE TABLE products (
+    productId NUMBER(8,0) NOT NULL,
+    productName VARCHAR2(40) NOT NULL,
+    supplierId NUMBER(8,0),
+    categoryId NUMBER(8,0),
+    quantityPerUnit VARCHAR2(20),
+    unitPrice NUMBER(8,2),
+    unitsInStock NUMBER(6,0),
+    unitsOnOrder NUMBER(6,0),
+    reorderLevel NUMBER(6,0),
+    discontinued NUMBER(1,0) NOT NULL,
+
+    CONSTRAINT Products_ProductID_pk PRIMARY KEY (productId),
+    CONSTRAINT Products_UnitPrice_ck CHECK (unitPrice >= 0),
+    CONSTRAINT Products_ReorderLevel_ck CHECK (reorderLevel >= 0),
+    CONSTRAINT Products_Quantity_ck CHECK (quantity >= 0),
+    CONSTRAINT Products_UnitsOnOrder_ck CHECK (unitsOnOrder >= 0),
+    CONSTRAINT Products_SupplierId_fk REFERENCES suppliers(supplierId),
+    CONSTRAINT Products_CategoryId_fk REFERENCES categories(categoryId),
+);
+
+-- (8) OrderDetails --
+DROP TABLE OrderDetails CASCADE CONSTRAINTS; -- uncomment after 1st run
+
+CREATE TABLE orderDetails (
+    orderId NUMBER(8,0) NOT NULL,
+    productId NUMBER(8,0) NOT NULL,
+    unitPrice NUMBER(8,2) NOT NULL,
+    quantity NUMBER(6,0) NOT NULL,
+    discount NUMBER(5,2) NOT NULL,
+
+    CONSTRAINT orderDetails_OID_PID_pk PRIMARY KEY (orderId, productId),
+    CONSTRAINT orderDetails_Discount_ck CHECK (discount >= 0 AND discount <= 1),
+    CONSTRAINT orderDetails_Quantity_ck CHECK (quantity > 0),
+    CONSTRAINT orderDetails_UnitPrice_ck CHECK (unitPrice >= 0),
+    CONSTRAINT orderDetails_ProductId_fk REFERENCES products(productId),
+);
+
+SELECT table_name, 'Levi McLean' FROM user_tables
+    WHERE table_name != 'HTMLDB_PLAN_TABLE';

INFO-3171 Data Visualization and UI/Notes/D3js/barGraph.js

@@ -0,0 +1,14 @@
+var data = [10, 20, 30, 40, 50];
+var svg = d3.select("body")
+            .append("svg")
+            .attr("width", 400)
+            .attr("height", 200);
+            svg.selectAll("rect") 
+            .data(data)
+            .enter()
+            .append("rect")
+            .attr("x", function(d, i) { return i * 40; })
+            .attr("y", function(d) { return 200 - d * 2; })
+            .attr("width", 30)
+            .attr("height", function(d) { return d * 2; }) 
+            .attr("fill", "purple"); 

INFO-3171 Data Visualization and UI/Notes/D3js/data/csvimport.csv

@@ -0,0 +1,3 @@
+First Name,Last Name
+John,Doe
+Harry,Potter

INFO-3171 Data Visualization and UI/Notes/D3js/data/jsonimport.json

@@ -0,0 +1,11 @@
+[{
+    "name": "John",
+    "age": 30,
+    "city": "Toronto"
+},
+{
+    "name": "Jane",
+    "age": 10,
+    "city": "London"
+}
+]

INFO-3171 Data Visualization and UI/Notes/D3js/dataBinding.js

@@ -0,0 +1,9 @@
+var dataset = [100, 122];
+
+d3.select('body')
+        .selectAll('p')
+            .data(dataset)
+            .text('Added Paragraph!')
+            .attr('style', 'color:red')
+            .exit()
+            .remove();

INFO-3171 Data Visualization and UI/Notes/D3js/dataBinding2.js

@@ -0,0 +1,11 @@
+var dataset = [100, 122, 23, 54, 5, 360];
+
+           d3.select('body')
+                .selectAll('p')
+                .data(dataset)
+                .enter()
+                .append('p')
+                .text((d, i) => {
+                    return d
+                })
+                .attr('style', 'color:red');

INFO-3171 Data Visualization and UI/Notes/D3js/dataLoading.js

@@ -0,0 +1,19 @@
+d3.csv("data/csvimport.csv")
+           .then(function(data){
+                console.log(data)
+                d3.select('body')
+                .selectAll('p')
+                .data(data)
+                .enter()
+                .append('p')
+                .text((d, i) => {
+                    return d['First Name'] + ' ' +  d['Last Name']
+                })
+                .attr('style', 'color:red');
+
+           })
+
+           d3.json("data/jsonimport.json")
+           .then(function(data){
+                console.log(data)
+           })

INFO-3171 Data Visualization and UI/Notes/D3js/domManipulation.js

@@ -0,0 +1,24 @@
+            d3.select('body').append('h1');
+            d3.select('h1').text('Hello World');
+            d3.select('h1').style('color', 'pink');
+            //d3.select('h1').attr('class', 'first-heading')
+            d3.select('h1').attr('id', 'first-heading')
+            d3.select('h1').classed("class-added", true)
+            // d3.select('h1').remove();
+
+            // d3.select('body').append('p');
+            // d3.select('p').text('Added First Paragraph');
+            // d3.select('p').style('color', 'red');
+            d3.select('body').append('p').text('Added First Paragraph with Method Chaning').style('color', 'red')
+            d3.select('body').append('div').text('outerdiv text here').style('border', '1px solid blue')
+                            .append('div').text('Innerdiv text here').style('border', '1px solid green')
+                            
+            d3.select("body").append('p').text('First Message').text('Second Message')
+
+            d3.select('div').insert('div', 'div').text('inserted text')
+
+            d3.select('body').append('div').html('<a href="https://google.com">Click Here!</a>')
+
+            d3.select('body').append('div').classed("new-class", true).attr('id', 'new-id');
+            d3.select('.new-class').text('select element with class').style('color', 'aqua');
+            d3.select('#new-id').style("font-family", "sans-serif");

INFO-3171 Data Visualization and UI/Notes/D3js/domSelection.js

@@ -0,0 +1,5 @@
+            var paragraph = d3.select('p');
+            console.log('select(): ', paragraph);
+
+            var paragraphs = d3.selectAll('p');
+            console.log('selectAll(): ', paragraphs)

INFO-3171 Data Visualization and UI/Notes/D3js/index.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html> 
+<html>
+    <head>
+        <script src="https://d3js.org/d3.v7.min.js"></script>
+    </head> 
+    <body>
+        <h1>D3.js Examples</h1>
+        <h2>Simple SVG Examples</h2>
+        <svg width="300" height="300">
+            <rect width="100" height="200" x="100" y="100"></rect>
+        </svg>
+
+        <svg width="500" height="500">
+            <line x1="0" y1="300" x2="400" y2="100" stroke="#ffffff"></line>
+        </svg>
+
+        <svg width="500" height="500">
+            <circle r="100" cx="100" cy="100"></circle>
+        </svg>
+
+        <svg width="500" height="500">
+            <ellipse rx="100" ry="150" cx="100" cy="150"></ellipse>
+        </svg>
+
+        <svg width="500" height="500">
+            <text x="250" y="25">Text Goes here</text>
+        </svg>
+        <hr>
+        <h2>SVGs with text</h2>
+        <svg width="500" height="500">
+            <circle r="100" cx="250" cy="250"></circle>
+            <text x="200" y="200" stroke="#fff">Text Goes Here</text>
+        </svg>
+        <svg width="500" height="500">
+            <g>
+                <rect width="300" height="100" x="100" y="200"></rect>
+                <text x="200" y="250" stroke="#fff">Text Goes Here</text>
+            </g>
+        </svg>
+        <h2>SVG with D3js (easier)</h2>
+        <script src="./plainSVGwithD3.js"></script>
+        <hr>
+        <h2>Bar Graph (no labels)</h2>
+        <script src="./barGraph.js"></script>
+        <hr>
+        <h2>Data Binding</h2>
+        <p></p>
+        <p></p>
+        <p></p>
+        <p></p>
+        <p></p>
+        <script src="./dataBinding.js"></script>
+        <hr>
+        <h2>Data Binding 2</h2>
+        <script src="./dataBinding2.js"></script>
+        <hr>
+        <h2>Data Loading (CSV)</h2>
+        <script src="./dataLoading.js"></script>
+        <hr>
+        <h2>DOM Manipulation</h2>
+        <script src="./domManipulation.js"></script>
+        <hr>
+        <h2>DOM Selection</h2>
+        <p>Second Paragraph</p>
+        <p>First Paragraph</p>
+        <script src="./domSelection.js"></script>
+        <hr>
+    </body>
+</html>

INFO-3171 Data Visualization and UI/Notes/D3js/plainSVGwithD3.js

@@ -0,0 +1,59 @@
+            var width = 500;
+            var height = 500;
+
+            var svg = d3.select('body')
+                        .append('svg')
+                        .attr("width", width)
+                        .attr("height", height)
+            
+            //1. rect
+            // <svg width="300" height="300">
+            //     <rect width="100" height="200" x="100" y="100"></rect>
+            // </svg>
+
+            // svg.append("rect")
+            //     .attr("x", 100)
+            //     .attr("y", 100)
+            //     .attr("width", 100)
+            //     .attr("height", 200)
+            
+            //2. line
+            // <svg width="500" height="500">
+            //     <line x1="0" y1="300" x2="400" y2="100" stroke="#ffffff"></line>
+            // </svg>
+            // svg.append('line')
+            //     .attr('x1', 0)
+            //     .attr('x2', 400)
+            //     .attr('y1', 300)
+            //     .attr('y2', 100)
+            //     .attr('stroke', '#000000')
+
+            //3. circle - try on your own!
+
+            //4. ellipse - try on your own!
+
+            //5. text - try on your own!
+
+            //6. Circle over text
+            // <svg width="500" height="500">
+            //     <g>
+            //         <circle r="100" cx="250" cy="250"></circle>
+            //         <text x="200" y="200" stroke="#fff">Text Goes Here</text>
+            //     </g>
+            // </svg>
+            var group = svg.append('g')
+
+            var circle = group.append('circle')
+                                .attr('cx', 250)
+                                .attr('cy', 250)
+                                .attr('r', 100)
+                                .attr('fill', 'hotpink')
+                                .style('opacity', 0.8)
+            group.append("text")
+                .attr("x", 175)
+                .attr("y", 200)
+                .attr("stroke", "#fff")
+                .attr("font-family", "Impact, sans-serif")
+                .attr("font-size", '24px')
+                .attr("fill", "red")
+                .text("This is a circle!")

INFO-3171 Data Visualization and UI/Notes/Exercise1.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Exercise 1</title>
+    <script src="https://d3js.org/d3.v7.min.js"></script>
+</head>
+
+<body>
+    <h1>Exercise 1</h1>
+    <script>
+        d3.select("body")
+            .append("svg")
+            .attr("width", 110)
+            .attr("height", 200)
+            .append("rect")
+            .attr("x", 10)
+            .attr("width", 100)
+            .attr("height", 200)
+            .attr("fill", "blue");
+        d3.select("body")
+            .append("svg")
+            .attr("width", 220)
+            .attr("height", 200)
+            .style("margin-left", "50px")
+            .append("rect")
+            .attr("x", 120)
+            .attr("width", 100)
+            .attr("height", 200)
+            .attr("fill", "green");
+    </script>
+</body>
+
+</html>

INFO-3171 Data Visualization and UI/Projects/Project1Example/index.html

@@ -0,0 +1,256 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <!--Import Google Icon Font-->
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <!--Import materialize.css-->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
+    <!--Let browser know website is optimized for mobile-->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <link rel="stylesheet" href="main.css"/>
+    <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=Alatsi&family=Quicksand&display=swap" rel="stylesheet">  </head>
+
+  <body>
+    <div class="container">
+        <div class="row">
+            <div class="col s3">
+                <img src="./images/techit.png" alt="logo"/>
+            </div>
+            <div class="col s9">
+                <h1>TECHIT Pattern Library</h1>
+            </div>  
+        </div>
+        <div class="row">
+            <div class="col s3 h-100">
+                <ul class="tabs">
+                    <li><h6>General</h6></li>
+                    <li class="tab"><a href="#test1" class="active">Typography</a></li>
+                    <li class="tab"><a href="#test2">Color</a></li>
+                    <li class="tab"><a href="#test3">Page Layout</a></li>
+                    <li class="tab"><a href="#test4">Data Visualization</a></li>
+               
+                    <li><h6>Elements</h6></li>
+                
+                    <li class="tab"><a href="#test5">Buttons</a></li>
+                    <li class="tab"><a href="#test6">Form</a></li>
+                    <li class="tab"><a href="#test7">Notifications</a></li>
+                    <li class="tab"><a href="#test8">Tables</a></li>
+                    <li class="tab"><a href="#test9">Stat/Data</a></li>
+                </ul>
+            </div>
+            <div class="col s9">
+                <div id="test1" class="col s12">
+                    <h3>Typography</h3>
+
+                    <div>
+                        <h4>Headings</h4>
+                        <div class="row heading-typogrpahy">
+                            <div class="col m3 typeface">
+                                <p>Aa</p>
+                            </div>
+                            <div class="col m9">
+                                <p>Typeface  |  Alatsi</p>
+                                <p>font-family  |  'Alatsi', sans-serif</p>
+                            </div>
+                         </div>
+                        <div class="row">
+                            <div class="headings">
+                                <h1>TECHIT Brand Heading One</h1>
+                                <hr>
+                                <p>56px | normal | Alatsi </p>
+                            </div>
+                            <div class="headings">
+                                <h2>TECHIT Brand Heading Two Alatsi</h2>
+                                <hr>
+                                <p>50px | normal | Alatsi </p>
+                            </div>
+                            <div class="headings">
+                                <h3>TECHIT Brand Heading Three Alatsi</h3>
+                                <hr>
+                                <p>44px | normal | Alatsi </p>
+                            </div>
+                            <div class="headings">
+                                <h4>TECHIT Brand Heading Four Alatsi</h4>
+                                <hr>
+                                <p>38px | normal | Alatsi </p>
+                            </div>                            
+                        </div>
+                    </div>
+                    <div>
+                        <h4>Contents</h4>
+                        <div class="row content-typogrpahy">
+                            <div class="col m3 typeface-content">
+                                <p>Aa</p>
+                            </div>
+                            <div class="col m9">
+                                <p>Typeface  |  Quicksand</p>
+                                <p>font-family  |  'Quicksand', sans-serif</p>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col s12">
+                                <p class="main-content">
+                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, 
+                                </p>
+                                <hr>
+                                <p>18px | normal | Quicksand | 150% </p>
+                            </div>                          
+                        </div>
+                        <div class="row">
+                            <div class="col s12">
+                                <p class="main-content">
+                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, 
+                                </p>
+                                <hr>
+                                <p>18px | normal | Quicksand | 150% </p>
+                            </div>                          
+                        </div>
+                    </div>
+                   
+                </div>
+                <div id="test2" class="col s12">
+                    <h3>Color</h3>
+
+                    <div class="card-panel">
+                        <h5>Brand Color</h5>
+                        <div class="row">
+                            <div class="col s12 m2">
+                                <div class="card">
+                                    <div class="card-image main-color">
+                                        <p class="card-title">#1995ad</p>
+                                    </div>
+                                    <div class="card-content">
+                                        <p>Glacier Blue</p>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col s12 m2">
+                                <div class="card">
+                                    <div class="card-image second-color">
+                                        <p class="card-title">#a1d6e2</p>
+                                    </div>
+                                    <div class="card-content">
+                                        <p>Ice</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <h5>Functional Color</h5>
+                        <div class="row">
+                            <div class="col s12 m2">
+                                <div class="card">
+                                    <div class="card-image functional-color-first">
+                                        <p class="card-title">#f1f1f2</p>
+                                    </div>
+                                    <div class="card-content">
+                                        <p>Overcast</p>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col s12 m2">
+                                <div class="card">
+                                    <div class="card-image functional-color-second">
+                                        <p class="card-title">#bcbabe</p>
+                                    </div>
+                                    <div class="card-content">
+                                        <p>Warm Gray</p>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col s12 m2">
+                                <div class="card">
+                                    <div class="card-image functional-color-third">
+                                        <p class="card-title">#0c090a</p>
+                                    </div>
+                                    <div class="card-content">
+                                        <p>Night</p>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col s12 m2">
+                                <div class="card">
+                                    <div class="card-image functional-color-fourth">
+                                        <p class="card-title">#c1e1dc</p>
+                                    </div>
+                                    <div class="card-content">
+                                        <p>Baby Blue</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <h5>Feedback Color</h5>
+                        <div class="row">
+                            <div class="col s12 m2">
+                                <div class="card">
+                                    <div class="card-image feedback-color-first">
+                                        <p class="card-title">#fa6e59</p>
+
+                                    </div>
+                                    <div class="card-content">
+                                        <p>Watermeon</p>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col s12 m2">
+                                <div class="card">
+                                    <div class="card-image feedback-color-second">
+                                        <p class="card-title">#ffdb5c</p>
+                                    </div>
+                                    <div class="card-content">
+                                        <p>Banana</p>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col s12 m2">
+                                <div class="card">
+                                    <div class="card-image feedback-color-third">
+                                        <p class="card-title">#52958b</p>
+                                    </div>
+                                    <div class="card-content">
+                                        <p>Lichen</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div id="test3" class="col s12">
+                    <h3>Page Layout</h3>
+                </div>
+                <div id="test4" class="col s12">
+                    <h3>Data Visualization</h3>
+                </div>
+                <div id="test5" class="col s12">
+                    <h3>Buttons</h3> 
+                </div>
+                <div id="test6" class="col s12">
+                    <h3>Dialogs</h3>
+                </div>
+                <div id="test7" class="col s12">
+                    <h3>Notifications</h3>
+                </div>
+                <div id="test8" class="col s12">
+                    <h3>Tables</h3>
+                </div>
+                <div id="test9" class="col s12">
+                    <h3>Stat/Data</h3>
+                </div>
+
+
+            </div>
+        </div>
+    </div>       
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            M.AutoInit();
+        });
+    </script>
+    <!--JavaScript at end of body for optimized loading-->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+  </body>
+</html>
+      

INFO-3171 Data Visualization and UI/Projects/Project1Example/main.css

@@ -0,0 +1,169 @@
+/* body */
+body {
+    font-family: 'Quicksand', sans-serif;
+}
+
+img {
+    width: 100%;
+}
+/* navigation */
+.tabs {
+    height: auto;
+    white-space: normal;
+}
+
+.tab {
+    display: block;
+    width: 100%;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.tabs  li.tab {
+    text-align: left;
+}
+
+.tabs .tab a {
+    padding: 0;
+    color: #0c090a;
+}
+
+.tabs .tab a:hover, .tabs .tab a.active {
+    color:#0c090a;
+}
+
+.tabs .tab a:focus, .tabs .tab a:focus.active {
+    padding: 0;
+    background: #c1e1dc;
+    color:#0c090a;
+}
+
+p:first-child {
+    margin-top: 0;
+}
+
+.tab-content {
+    height: 200px;
+    width: 100%;
+    background: #fcfcfc;
+    border:1px solid #f0f0f0;
+}
+
+.indicator {
+    display: none;
+}
+
+/* h1 */
+h1, h2, h3, h4, h5, h6 {
+    color: #333;
+    font-family: 'Alatsi', sans-serif;
+}
+
+h1 {
+    font-size: 56px;
+    margin-top: 65px;
+}
+
+h2 {
+    font-size: 50px;
+}
+
+h3 {
+    font-size: 44px;
+    margin-bottom: 50px;
+}
+
+h4 {
+    font-size: 38px;
+}
+
+
+h6:nth-child(2) {
+    height: 200px;
+}
+
+/* typeface */
+.heading-typogrpahy {
+    font-family: 'Alatsi', sans-serif;
+}
+
+.typeface {
+    width: 200px;
+    height: 200px;
+    background: #1995ad;
+    font-size: 140px;
+    text-align: center;
+}
+
+.typeface p, .typeface-content p {
+    color: #f1f1f2
+}
+
+.content-typogrpahy {
+    font-family: 'Quicksand', sans-serif;
+}
+
+.typeface-content {
+    width: 200px;
+    height: 200px;
+    background: #1995ad;
+    font-size: 140px;
+    text-align: center;
+}
+
+.main-content {
+    line-height: 150%;
+}
+/* color */
+.card-image {
+    background: #1995ad;
+    height: 80px;
+    /* width: 120px; */
+}
+
+.main-color {
+    background: #1995ad;
+}
+.card .card-title {
+    text-align:center;
+    font-size: 12px
+}
+.card .card-content {
+    text-align:center;
+    padding: 3px;
+}
+
+.second-color {
+    background: #a1d6e2;
+}
+
+.functional-color-first {
+    background: #f1f1f2;
+}
+
+.functional-color-second {
+    background: #bcbabe
+}
+
+.functional-color-third {
+    background: #0c090a;
+}
+
+.functional-color-fourth {
+    background: #c1e1dc;
+}
+
+.feedback-color-first {
+    background: #fa6e59
+}
+
+.feedback-color-first p {
+    color:  #FA4C39
+}
+
+.feedback-color-second {
+    background: #ffdb5c
+}
+
+.feedback-color-third {
+    background: #52958b
+}

INFO-3173 Mobile Development 1/Labs/Lab 5/firebase-DB/.expo/README.md

@@ -0,0 +1,13 @@
+> Why do I have a folder named ".expo" in my project?
+
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+
+> What do the files contain?
+
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+
+> Should I commit the ".expo" folder?
+
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

INFO-3173 Mobile Development 1/Labs/Lab 5/firebase-DB/.expo/devices.json

@@ -0,0 +1,3 @@
+{
+  "devices": []
+}

INFO-3173 Mobile Development 1/Labs/Lab 5/firebase-DB/App.js

@@ -0,0 +1,309 @@
+import { StatusBar } from "expo-status-bar";
+import React, { useState, useEffect } from "react";
+import { View, TextInput, Text, Button, Alert, StyleSheet } from "react-native";
+import { db, firestore, auth } from "./FirebaseConfig";
+import {
+  createUserWithEmailAndPassword,
+  signOut,
+  signInWithEmailAndPassword,
+  onAuthStateChanged,
+} from "firebase/auth";
+import { ref, set, onValue } from "firebase/database";
+import { doc, setDoc, onSnapshot } from "firebase/firestore";
+
+export default function App() {
+  const [registrationEmail, setRegistrationEmail] = useState("");
+  const [registrationPassword, setRegistrationPassword] = useState("");
+  const [loginEmail, setLoginEmail] = useState("");
+  const [loginPassword, setLoginPassword] = useState("");
+  const [loggedIn, setLoggedIn] = useState(false);
+  const [databaseData, setDatabaseData] = useState("");
+  const [user, setUser] = useState(null);
+
+  // Monitor authentication state
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
+      setUser(currentUser);
+      setLoggedIn(!!currentUser);
+    });
+    return () => unsubscribe();
+  }, []);
+
+  const registerWithFirebase = () => {
+    if (registrationEmail.length < 4) {
+      Alert.alert("Please enter an email address.");
+      return;
+    }
+
+    if (registrationPassword.length < 4) {
+      Alert.alert("Please enter a password.");
+      return;
+    }
+
+    createUserWithEmailAndPassword(
+      auth,
+      registrationEmail,
+      registrationPassword
+    )
+      .then((userCredential) => {
+        Alert.alert("User registered successfully!");
+        setRegistrationEmail("");
+        setRegistrationPassword("");
+      })
+      .catch((error) => {
+        console.log("Registration error:", error);
+        if (error.code === "auth/weak-password") {
+          Alert.alert("The password is too weak.");
+        } else if (error.code === "auth/email-already-in-use") {
+          Alert.alert("This email is already registered.");
+        } else {
+          Alert.alert(error.message);
+        }
+      });
+  };
+
+  const loginWithFirebase = () => {
+    if (loginEmail.length < 4) {
+      Alert.alert("Please enter an email address.");
+      return;
+    }
+
+    if (loginPassword.length < 4) {
+      Alert.alert("Please enter a password.");
+      return;
+    }
+
+    signInWithEmailAndPassword(auth, loginEmail, loginPassword)
+      .then((userCredential) => {
+        Alert.alert("User logged in successfully!");
+        setLoginEmail("");
+        setLoginPassword("");
+      })
+      .catch((error) => {
+        console.log("Login error:", error);
+        if (error.code === "auth/wrong-password") {
+          Alert.alert("Wrong password.");
+        } else if (error.code === "auth/user-not-found") {
+          Alert.alert("User not found.");
+        } else {
+          Alert.alert(error.message);
+        }
+      });
+  };
+
+  const signoutWithFirebase = () => {
+    signOut(auth)
+      .then(() => {
+        Alert.alert("User was logged out!");
+        setDatabaseData("");
+      })
+      .catch((error) => {
+        Alert.alert("Error signing out:", error.message);
+      });
+  };
+
+  const saveDataWithFirebase = () => {
+    if (!user) {
+      Alert.alert("Please log in first.");
+      return;
+    }
+
+    const userID = user.uid;
+
+    // Save to Realtime DB
+    set(ref(db, "users/" + userID), {
+      text: databaseData,
+      timestamp: Date.now(),
+    })
+      .then(() => {
+        console.log("Data saved to Realtime DB");
+      })
+      .catch((error) => {
+        console.log("Realtime DB error:", error);
+      });
+
+    // Save to Firestore
+    setDoc(
+      doc(firestore, "users", userID),
+      {
+        text: databaseData,
+        timestamp: Date.now(),
+      },
+      { merge: true }
+    )
+      .then(() => {
+        Alert.alert("Data saved successfully!");
+      })
+      .catch((error) => {
+        Alert.alert("Error saving data");
+        console.log("Firestore error:", error);
+      });
+  };
+
+  const retrieveDataWithFirebase = () => {
+    if (!user) {
+      Alert.alert("Please log in first.");
+      return;
+    }
+
+    const userID = user.uid;
+    const dbRef = ref(db, "users/" + userID);
+
+    // Using Realtime DB
+    onValue(dbRef, (snapshot) => {
+      if (snapshot.exists()) {
+        const data = snapshot.val();
+        setDatabaseData(data.text || "");
+        Alert.alert("Data retrieved from Realtime DB");
+      } else {
+        Alert.alert("No data found");
+      }
+    });
+
+    // Uncomment for Firestore
+    /*
+    const unsubscribe = onSnapshot(doc(firestore, "users", userID), (doc) => {
+      if (doc.exists()) {
+        const data = doc.data();
+        setDatabaseData(data.text || "");
+        Alert.alert("Data retrieved from Firestore");
+      } else {
+        Alert.alert("No data found in Firestore");
+      }
+    });
+    */
+  };
+
+  return (
+    <View style={styles.form}>
+      <StatusBar style="auto" />
+
+      {!loggedIn ? (
+        <View>
+          <View style={styles.section}>
+            <Text style={styles.label}>Lab 5 - l_mclean215318</Text>
+            <Text style={styles.label}>Register with Firebase</Text>
+            <TextInput
+              style={styles.textInput}
+              onChangeText={setRegistrationEmail}
+              value={registrationEmail}
+              autoCapitalize="none"
+              autoCorrect={false}
+              autoCompleteType="email"
+              keyboardType="email-address"
+              placeholder="Email"
+            />
+            <TextInput
+              style={styles.textInput}
+              onChangeText={setRegistrationPassword}
+              value={registrationPassword}
+              autoCapitalize="none"
+              autoCorrect={false}
+              autoCompleteType="password"
+              placeholder="Password"
+              secureTextEntry={true}
+            />
+            <Button title="Register" onPress={registerWithFirebase} />
+          </View>
+
+          <View style={styles.section}>
+            <Text style={styles.label}>Sign In with Firebase</Text>
+            <TextInput
+              style={styles.textInput}
+              onChangeText={setLoginEmail}
+              value={loginEmail}
+              autoCapitalize="none"
+              autoCorrect={false}
+              autoCompleteType="email"
+              keyboardType="email-address"
+              placeholder="Email"
+            />
+            <TextInput
+              style={styles.textInput}
+              onChangeText={setLoginPassword}
+              value={loginPassword}
+              autoCapitalize="none"
+              autoCorrect={false}
+              autoCompleteType="password"
+              placeholder="Password"
+              secureTextEntry={true}
+            />
+            <Button title="Login" onPress={loginWithFirebase} />
+          </View>
+        </View>
+      ) : (
+        <View>
+          <Text style={styles.welcome}>Welcome, {user?.email}</Text>
+          <TextInput
+            style={styles.textArea}
+            multiline={true}
+            numberOfLines={4}
+            onChangeText={setDatabaseData}
+            value={databaseData}
+            placeholder="Enter your data here..."
+          />
+          <View style={styles.buttonContainer}>
+            <Button title="Save Data" onPress={saveDataWithFirebase} />
+            <Button title="Load Data" onPress={retrieveDataWithFirebase} />
+          </View>
+          <View style={styles.signOutButton}>
+            <Button
+              title="Sign Out"
+              onPress={signoutWithFirebase}
+              color="#ff4444"
+            />
+          </View>
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  form: {
+    flex: 1,
+    margin: 30,
+    marginTop: 60,
+  },
+  section: {
+    marginBottom: 30,
+  },
+  label: {
+    fontSize: 18,
+    marginBottom: 15,
+    textAlign: "center",
+    fontWeight: "bold",
+  },
+  welcome: {
+    fontSize: 18,
+    marginBottom: 20,
+    textAlign: "center",
+    fontWeight: "bold",
+  },
+  textInput: {
+    borderColor: "#ccc",
+    borderWidth: 1,
+    marginBottom: 15,
+    paddingVertical: 8,
+    paddingHorizontal: 10,
+    borderRadius: 5,
+  },
+  textArea: {
+    borderColor: "#ccc",
+    borderWidth: 1,
+    marginBottom: 15,
+    paddingVertical: 8,
+    paddingHorizontal: 10,
+    borderRadius: 5,
+    height: 100,
+    textAlignVertical: "top",
+  },
+  buttonContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginBottom: 20,
+  },
+  signOutButton: {
+    marginTop: 20,
+  },
+});

INFO-3173 Mobile Development 1/Labs/Lab 5/firebase-DB/FirebaseConfig.js

@@ -0,0 +1,21 @@
+import { initializeApp } from "firebase/app";
+import { getDatabase } from "firebase/database";
+import { getAuth } from "firebase/auth";
+import { getFirestore } from "firebase/firestore";
+
+// Your Firebase config
+const firebaseConfig = {
+  apiKey: "AIzaSyBfvjd5heEO3nS59rQSqY3Vsr36Pv2V3RU",
+  authDomain: "week6-fb-db.firebaseapp.com",
+  databaseURL: "https://week6-fb-db-default-rtdb.firebaseio.com",
+  projectId: "week6-fb-db",
+  storageBucket: "week6-fb-db.firebasestorage.app",
+  messagingSenderId: "854313991657",
+  appId: "1:854313991657:web:42859a9b1c0bd06f391f78",
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+export const db = getDatabase(app);
+export const auth = getAuth(app);
+export const firestore = getFirestore(app);

INFO-3173 Mobile Development 1/Labs/Lab 5/firebase-DB/app.json

@@ -0,0 +1,29 @@
+{
+  "expo": {
+    "name": "firebase-DB",
+    "slug": "firebase-DB",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "newArchEnabled": true,
+    "splash": {
+      "image": "./assets/splash-icon.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "edgeToEdgeEnabled": true
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

INFO-3173 Mobile Development 1/Labs/Lab 5/firebase-DB/index.js

@@ -0,0 +1,8 @@
+import { registerRootComponent } from 'expo';
+
+import App from './App';
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in Expo Go or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App);

INFO-3173 Mobile Development 1/Labs/Lab 5/firebase-DB/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "firebase-db",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@react-native-async-storage/async-storage": "^1.24.0",
+    "expo": "~54.0.12",
+    "expo-status-bar": "~3.0.8",
+    "firebase": "^12.3.0",
+    "react": "19.1.0",
+    "react-native": "0.81.4"
+  },
+  "private": true,
+  "devDependencies": {
+    "@expo/cli": "^54.0.10"
+  }
+}