add gitignore

.gitignore

@@ -0,0 +1,36 @@
+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/
+
+# Python
+__pycache__/
+*.py[cod]
+.venv/
+venv/
+.pytest_cache/
+
+# Java and Android build output
+.gradle/
+build/
+*.class
+local.properties

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

@@ -1,48 +1,48 @@
-CREATE TABLE test_customer (
+CREATE TABLE test_customer (
-	Id NUMBER(6,0), 
+	Id NUMBER(6,0), 
-	Name VARCHAR2(20)
+	Name VARCHAR2(20)
-);
+);
-
+
-INSERT INTO test_Customer (Id, Name) VALUES (100,'SMITH');
+INSERT INTO test_Customer (Id, Name) VALUES (100,'SMITH');
-INSERT INTO test_Customer (Id, Name) VALUES (101,'JONES');
+INSERT INTO test_Customer (Id, Name) VALUES (101,'JONES');
-INSERT INTO test_Customer (Id, Name) VALUES (100,'BROWN');
+INSERT INTO test_Customer (Id, Name) VALUES (100,'BROWN');
-
+
-SELECT * FROM test_customer;
+SELECT * FROM test_customer;
-
+
---TRUNCATE TABLE test_customer;
+--TRUNCATE TABLE test_customer;
-DROP TABLE test_customer;
+DROP TABLE test_customer;
-
+
-CREATE TABLE test_customer (
+CREATE TABLE test_customer (
-	Id NUMBER(6,0) PRIMARY KEY, 
+	Id NUMBER(6,0) PRIMARY KEY, 
-	Name VARCHAR2(20)
+	Name VARCHAR2(20)
-);
+);
-
+
-
+
-DROP TABLE IF EXISTS test_customer;
+DROP TABLE IF EXISTS test_customer;
-
+
-CREATE TABLE test_customer (
+CREATE TABLE test_customer (
-	Id NUMBER(6,0), 
+	Id NUMBER(6,0), 
-	Name VARCHAR2(20),
+	Name VARCHAR2(20),
-	CONSTRAINT test_customer_Id_pk PRIMARY KEY (Id)
+	CONSTRAINT test_customer_Id_pk PRIMARY KEY (Id)
-);
+);
-
+
--- Viewing the Data Dictionary
+-- Viewing the Data Dictionary
-SELECT table_name, num_rows FROM USER_TABLES WHERE table_name != 'HTMLDB_PLAN_TABLE';
+SELECT table_name, num_rows FROM USER_TABLES WHERE table_name != 'HTMLDB_PLAN_TABLE';
-
+
--- Table Creation through Sub Queries
+-- Table Creation through Sub Queries
-CREATE TABLE cust_marketing AS
+CREATE TABLE cust_marketing AS
-	(SELECT Id, Lastname, FirstName, City, Province FROM Customers);
+	(SELECT Id, Lastname, FirstName, City, Province FROM Customers);
-
+
-SELECT * FROM cust_marketing;
+SELECT * FROM cust_marketing;
-
+
--- Modify Existing Tables
+-- Modify Existing Tables
-ALTER TABLE Vendors ADD Ext NUMBER(4,0);
+ALTER TABLE Vendors ADD Ext NUMBER(4,0);
-
+
-ALTER TABLE VENDORS MODIFY Ext NUMBER(5,0);
+ALTER TABLE VENDORS MODIFY Ext NUMBER(5,0);
-
+
-ALTER TABLE vendors DROP COLUMN Ext;
+ALTER TABLE vendors DROP COLUMN Ext;
-
+
-
+
-
+
-SELECT table_name, num_rows FROM user_tables 
+SELECT table_name, num_rows FROM user_tables 
-WHERE table_name != 'HTMLDB_PLAN_TABLE';
+WHERE table_name != 'HTMLDB_PLAN_TABLE';

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/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 4/lab-4-info-app/screens/MainScreen.js

@@ -1,51 +1,51 @@
-import React from 'react';
+import React from 'react';
-import { View, Text, Button, StyleSheet } from 'react-native';
+import { View, Text, Button, StyleSheet } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
-
+
-const MainScreen = () => {
+const MainScreen = () => {
-    const navigation = useNavigation();
+    const navigation = useNavigation();
-
+
-    const navigateToSendEmail = () => {
+    const navigateToSendEmail = () => {
-        navigation.navigate('SendEmail');
+        navigation.navigate('SendEmail');
-    }
+    }
-
+
-    const navigateToSendSMS = () => {
+    const navigateToSendSMS = () => {
-        navigation.navigate('SendSMS');
+        navigation.navigate('SendSMS');
-    }
+    }
-
+
-    return (
+    return (
-        <View style={styles.container}>
+        <View style={styles.container}>
-            <Text style={styles.title}>SEND MY INFO</Text>
+            <Text style={styles.title}>SEND MY INFO</Text>
-            <Text style={styles.title}>l_mclean215318</Text>
+            <Text style={styles.title}>l_mclean215318</Text>
-            <View style={styles.buttonContainer}>
+            <View style={styles.buttonContainer}>
-                <Button title="EMAIL MY INFO" color="green" onPress={navigateToSendEmail} />
+                <Button title="EMAIL MY INFO" color="green" onPress={navigateToSendEmail} />
-            </View>
+            </View>
-            <View style={styles.buttonContainer}>
+            <View style={styles.buttonContainer}>
-                <Button title="SMS MY INFO" color="blue" onPress={navigateToSendSMS} />
+                <Button title="SMS MY INFO" color="blue" onPress={navigateToSendSMS} />
-            </View>
+            </View>
-        </View>
+        </View>
-    );
+    );
-};
+};
-
+
-const styles = StyleSheet.create({
+const styles = StyleSheet.create({
-    container: {
+    container: {
-        marginTop: 1,
+        marginTop: 1,
-        justifyContent: 'center',
+        justifyContent: 'center',
-        alignItems: 'center',
+        alignItems: 'center',
-    },
+    },
-    title: {
+    title: {
-        fontSize: 30,
+        fontSize: 30,
-        fontWeight: 'bold',
+        fontWeight: 'bold',
-        marginBottom: 20,
+        marginBottom: 20,
-        alignItems: 'center',
+        alignItems: 'center',
-    },
+    },
-    buttonContainer: {
+    buttonContainer: {
-        borderRadius: 10,
+        borderRadius: 10,
-        marginTop: 10,
+        marginTop: 10,
-        padding: 10,
+        padding: 10,
-        width: 200,
+        width: 200,
-        alignItems: 'center',
+        alignItems: 'center',
-    },
+    },
-});
+});
-
+
 export default MainScreen;

INFO-3173 Mobile Development 1/Labs/Lab 4/lab-4-info-app/screens/SendEmail.js

@@ -1,60 +1,60 @@
-import React from 'react';
+import React from 'react';
-import { View, Text, StyleSheet, Button, Alert } from 'react-native';
+import { View, Text, StyleSheet, Button, Alert } from 'react-native';
-import * as MailComposer from 'expo-mail-composer';
+import * as MailComposer from 'expo-mail-composer';
-
+
-const SendEmail = () => {
+const SendEmail = () => {
-    const [message, setMessage] = React.useState('Levi McLean\n123 Main St\nLondon, ON\n(555) 555-5555\naidanmclean111@gmail.com');
+    const [message, setMessage] = React.useState('Levi McLean\n123 Main St\nLondon, ON\n(555) 555-5555\naidanmclean111@gmail.com');
-
+
-    const sendMessageWithEmail = async () => {
+    const sendMessageWithEmail = async () => {
-        try {
+        try {
-            const isAvailable = await MailComposer.isAvailableAsync();
+            const isAvailable = await MailComposer.isAvailableAsync();
-            if (!isAvailable) {
+            if (!isAvailable) {
-                Alert.alert('Email is not available on this device');
+                Alert.alert('Email is not available on this device');
-                return;
+                return;
-            }
+            }
-
+
-            const result = await MailComposer.composeAsync({
+            const result = await MailComposer.composeAsync({
-                recipients: ['aidanmclean111@gmail.com'],
+                recipients: ['aidanmclean111@gmail.com'],
-                subject: 'Lab 4 - Customized Email',
+                subject: 'Lab 4 - Customized Email',
-                body: message,
+                body: message,
-            });
+            });
-
+
-            if (result.status === 'sent') {
+            if (result.status === 'sent') {
-                Alert.alert('Email sent successfully');
+                Alert.alert('Email sent successfully');
-            } else {
+            } else {
-                Alert.alert('Failed to send email');
+                Alert.alert('Failed to send email');
-            }
+            }
-        } catch (error) {
+        } catch (error) {
-            Alert.alert('Error sending email', error.message);
+            Alert.alert('Error sending email', error.message);
-        }
+        }
-    };
+    };
-
+
-    return (
+    return (
-        <View style={styles.form}>
+        <View style={styles.form}>
-            <Text style={styles.label}>You are going to send the following info:</Text>
+            <Text style={styles.label}>You are going to send the following info:</Text>
-            <Text style={styles.messageInfo}>{message}</Text>
+            <Text style={styles.messageInfo}>{message}</Text>
-
+
-            <Button title="Send via Email" onPress={sendMessageWithEmail} />
+            <Button title="Send via Email" onPress={sendMessageWithEmail} />
-        </View>
+        </View>
-    );
+    );
-};
+};
-
+
-const styles = StyleSheet.create({
+const styles = StyleSheet.create({
-    form: {
+    form: {
-        padding: 30,
+        padding: 30,
-        marginTop: 60,
+        marginTop: 60,
-    },
+    },
-    label: {
+    label: {
-        fontSize: 18,
+        fontSize: 18,
-        marginBottom: 30,
+        marginBottom: 30,
-        textAlign: 'center',
+        textAlign: 'center',
-    },
+    },
-    messageInfo: {
+    messageInfo: {
-        fontSize: 16,
+        fontSize: 16,
-        marginBottom: 15,
+        marginBottom: 15,
-        textAlign: 'center',
+        textAlign: 'center',
-        fontWeight: 'bold',
+        fontWeight: 'bold',
-    },
+    },
-});
+});
-
+
 export default SendEmail;

INFO-3173 Mobile Development 1/Labs/Lab 4/lab-4-info-app/screens/SendSMS.js

@@ -1,64 +1,64 @@
-import React, { useState } from 'react';
+import React, { useState } from 'react';
-import { View, Text, StyleSheet, Button } from 'react-native';
+import { View, Text, StyleSheet, Button } from 'react-native';
-import * as SMS from 'expo-sms';
+import * as SMS from 'expo-sms';
-
+
-const SendSMS = () => {
+const SendSMS = () => {
-    const [message, setMessage] = useState('Levi McLean\n123 Main St\nLondon, ON\n(555) 555-5555\naidanmclean111@gmail.com');
+    const [message, setMessage] = useState('Levi McLean\n123 Main St\nLondon, ON\n(555) 555-5555\naidanmclean111@gmail.com');
-
+
-    const sendMessageWithSMS = async () => {
+    const sendMessageWithSMS = async () => {
-        const isAvailable = await SMS.isAvailableAsync();
+        const isAvailable = await SMS.isAvailableAsync();
-        if (isAvailable) {
+        if (isAvailable) {
-            const recipients = ['+15195351398']; // Replace with the recipient's phone number
+            const recipients = ['+15195351398']; // Replace with the recipient's phone number
-            const options = {
+            const options = {
-                recipients: recipients,
+                recipients: recipients,
-                message: message,
+                message: message,
-            };
+            };
-            await SMS.sendSMSAsync(options.recipients, options.message)
+            await SMS.sendSMSAsync(options.recipients, options.message)
-                .then((result) => {
+                .then((result) => {
-                    if (result.result === 'sent') {
+                    if (result.result === 'sent') {
-                        Alert.alert('SMS sent successfully');
+                        Alert.alert('SMS sent successfully');
-                    } else {
+                    } else {
-                        Alert.alert('Failed to send SMS');
+                        Alert.alert('Failed to send SMS');
-                    }
+                    }
-                })
+                })
-                .catch((error) => {
+                .catch((error) => {
-                    Alert.alert('Error sending SMS');
+                    Alert.alert('Error sending SMS');
-                });
+                });
-        } else {
+        } else {
-            Alert.alert('SMS is not available on this device');
+            Alert.alert('SMS is not available on this device');
-        };
+        };
-    };
+    };
-
+
-    const onChangeHandler = (value) => {
+    const onChangeHandler = (value) => {
-        setMessage(value);
+        setMessage(value);
-    };
+    };
-
+
-    return (
+    return (
-        <View style={styles.form}>
+        <View style={styles.form}>
-            <Text style={styles.label}>You are going to send the following info:</Text>
+            <Text style={styles.label}>You are going to send the following info:</Text>
-            <Text style={styles.messageInfo}>{message}</Text>
+            <Text style={styles.messageInfo}>{message}</Text>
-
+
-            <Button title="Send via SMS" onPress={sendMessageWithSMS} />
+            <Button title="Send via SMS" onPress={sendMessageWithSMS} />
-        </View>
+        </View>
-    );
+    );
-}
+}
-
+
-const styles = StyleSheet.create({
+const styles = StyleSheet.create({
-    form: {
+    form: {
-        padding: 30,
+        padding: 30,
-        marginTop: 60,
+        marginTop: 60,
-    },
+    },
-    label: {
+    label: {
-        fontSize: 18,
+        fontSize: 18,
-        marginBottom: 30,
+        marginBottom: 30,
-        textAlign: 'center',
+        textAlign: 'center',
-    },
+    },
-    messageInfo: {
+    messageInfo: {
-        fontSize: 16,
+        fontSize: 16,
-        marginBottom: 15,
+        marginBottom: 15,
-        textAlign: 'center',
+        textAlign: 'center',
-        fontWeight: 'bold',
+        fontWeight: 'bold',
-    },
+    },
-});
+});
-
+
 export default SendSMS;