Hengyi Li - Homework 3 Submission

Homework2/VanillaJS-Template/app.js

@@ -13,4 +13,4 @@ document.querySelector('#app').innerHTML = `
 `
 
 mountBarChart();
-mountCounter(document.querySelector('#counter-button'));
+mountCounter(document.querySelector('#counter-button'));

Homework2/VanillaJS-Template/package.json

@@ -7,11 +7,5 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
-  },
-  "devDependencies": {
-    "vite": "^4.3.9",
-    "axios": "^1.2.1",
-    "d3": "^7.8.0",
-    "lodash": "^4.17.21"
   }
 }

Homework2/VanillaJS-Template/src/notes.js

@@ -3,11 +3,10 @@ var counter = 0;
 
 export const Notes = (msg) => (`
     <div class='card' id='note-card'>
-
         <div class="card-content">
             <h5>${msg}</h5>
             <p>
-                This template uses Materialize, a UI libarary based on Google's Material Design. It is independent of any frontend frameworks (e.g., Vuetify for Vue, Materail UI for React), hence good for vanilla JavaScript projects. 
+                This template uses Materialize, a UI libarary based on Google's Material Design. It is independent of any frontend frameworks (e.g., Vuetify for Vue, Materail UI for React), hence good for vanilla JavaScript projects.
             </p>
         </div>
         <div class="card-action">
@@ -22,4 +21,4 @@ export function mountCounter(element) {
       element.innerHTML = `Have clicked this ${counter} times`
     }
     element.addEventListener('click', () => setCounter(counter + 1))
-}
+}

Homework2/Vue-Template/package.json

@@ -9,21 +9,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@vueuse/core": "^9.9.0",
-    "axios": "^1.2.1",
-    "d3": "^7.8.0",
-    "lodash": "^4.17.21",
-    "pinia": "^2.0.28",
-    "vite-plugin-vuetify": "^1.0.1",
-    "vue": "^3.2.45",
-    "vuetify": "^3.0.6"
+    "@vueuse/core": "^9.9.0"
   },
   "devDependencies": {
     "@types/d3": "^7.4.0",
     "@types/lodash": "^4.14.191",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "typescript": "^4.9.3",
-    "vite": "^4.0.0",
-    "vue-tsc": "^1.0.11"
+    "@vitejs/plugin-vue": "^4.0.0"
   }
 }

Homework2/trdli/app.js

@@ -0,0 +1,54 @@
+import { Graph1_OverallView, Graph2_DetailView, Graph3_DetailView, mountChart1, mountChart2, mountChart3 } from './src/VisualizeLayout';
+import './style.css';
+
+document.querySelector('#header').innerHTML = `
+  <header class="Greeting_div fade-in">
+    <h5>Car Sales Trend - The ultimate guide to buy a car</h5>
+    <h6>By Hengyi Li</h6>
+  </header>
+`;
+
+document.querySelector('#MainBody').innerHTML = `
+  <div class="grid-container">
+    <div class="row1 fade-in">
+      ${ Graph1_OverallView() }
+    </div>
+    <div class="row2-left fade-in">
+      ${ Graph2_DetailView() }
+    </div>
+    <div class="row2-right fade-in">
+      ${ Graph3_DetailView() }
+    </div>
+  </div>
+`;
+
+document.querySelector('#footer').innerHTML = `
+  <footer class="footer fade-in">
+    <div class="container">
+      <div class="row">
+        <div class="col l6 s12">
+          <h5>ECS272 Information Visualization</h5>
+          <p>The ultimate guide to buy a car</p>
+          <br>
+          <p> &copy; 2024 Hengyi Li. All rights reserved </p>
+        </div>
+        <div class="col l4 offset-l2 s12">
+          <h5>Connect with me</h5>
+          <ul>
+            <li><a class="black-text"
+                 href="https://github.com/TheRealMilesLee"
+                 target="_blank">GitHub</a></li>
+            <li><a class="black-text"
+                 href="https://www.linkedin.com/in/hengyi-li-968744191/?locale=en_US"
+                 target="_blank">LinkedIn</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    </footer>
+`;
+
+mountChart1();
+mountChart2();
+mountChart3();
+