UMD-INST377 · KiraFreedman · Oct 18, 2022 · Nov 2, 2022 · Nov 2, 2022 · Nov 2, 2022
diff --git a/Food Data/index3.html b/Food Data/index3.html
@@ -0,0 +1,45 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Kira Freedman Final</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  </head>
+  <body>
+    <div class="wrapper">
+        <header class="header">
+            <h1>Nutrition Data</h1>
+        </header>
+        <div class="container">
+            <div>
+                <button onclick="window.history.back()">Go Back</button>
+            </div>
+            <div class="left_section box">
+                <h3>Input Food</h3>
+                <div class = "box main_form">
+                    <div>
+                        <label for="resto">Enter Food Item</label>
+                        <input type="text" id="input">
+                    </div>
+                    <button type="submit" onclick="makeChart()" id="submit">Submit</button>
+                </div>
+            </div>
+            <div class="right_section box">
+                <h3>Food Nutrtional Information</h3>
+
+                <div class="chart_container">
+                    <canvas id="myChart"></canvas>
+                </div>
+            </div>
+        </div>
+        <footer class="footer">
+            Group Pair 19
+        </footer>
+    </div>
+    <script src="./script.js"></script>
+  </body>
+</html>
+
+
diff --git a/Food Data/script.js b/Food Data/script.js
@@ -0,0 +1,86 @@
+const xLabels = [];
+function getData(){
+  const options = {
+    method: 'GET',
+    headers: {
+      'X-RapidAPI-Key': 'e2a17786bamsh39f2855f9aaf40dp1b10c0jsnf0ccf57e91e0',
+      'X-RapidAPI-Host': 'calorieninjas.p.rapidapi.com'
+    }
+  }
+  const input = document.getElementById('input').value;
+  const url = `https://calorieninjas.p.rapidapi.com/v1/nutrition?query=${input}`; 
+  const data = fetch(url, options);
+  console.log(data);
+	const json = data.json();
+
+
+  console.log(json.items[0]);
+  const {name} = json.items[0];
+  const {calories} = json.items[0];
+  const {sugar_g} = data.items[0];
+  const {protein_g} = data.items[0];
+  const {fiber_g} = data.items[0];
+  const {serving_size_g} = data.items[0];
+  const {fat_total_g}= data.items[0];
+
+  xLabels.push(calories, sugar_g, protein_g, fiber_g, serving_size_g, fat_total_g);
+}
+
+function makeChart(){
+
+  const ctx = document.getElementById('myChart');
+
+  const myChart = new Chart(ctx, {
+    type: 'bar',
+    data: {
+      labels: ['Calories', 'Sugar', 'Protein', 'Fiber', 'Serving Size', 'Total Fat'],
+      datasets: [{
+        label: '# of contents in grams)',
+        data: xLabels ,
+        borderWidth: 1
+      }]
+    },
+    options: {
+      scales: {
+        y: {
+          beginAtZero: true
+        }
+      }
+    }
+  });
+}
+makeChart();
+
+
+async function mainEvent() {
+  const form = document.querySelector('.main_form');
+
+  const submit = document.querySelector('#submit');
+  const input = document.querySelector('#input');
+  const chart = document.querySelector('#myChart');
+
+  //const fetchQuery = new URLSearchParams(formProps);
+  //const results = await fetch(`/api/foodService?${fetchQuery}`);
+
+
+  //const formData = new FormData(submitEvent.target); // get the data from the listener target
+  //const formProps = Object.fromEntries(formData);
+  //const arrayFromJson = await results.json()
+  //console.table(arrayFromJson.data)
+
+  // const arrayFromJson = await getData();
+
+  //console.log();
+
+
+  //const myChart = makeChart(chart);
+
+  form.addEventListener('submit', (submitEvent) => {
+   submitEvent.preventDefault();
+
+    const dataList = sendData(arrayFromJson.data);
+    console.log(dataList);
+  });
+}
+
+document.addEventListener('DOMContentLoaded', async () => mainEvent());
diff --git a/Food Data/styles.css b/Food Data/styles.css
@@ -0,0 +1,194 @@
+* {
+  box-sizing: border-box;
+}
+
+html {
+  background-color: #fff;
+  font-size: 16px;
+  min-width: 300px;
+  overflow-x: hidden;
+  overflow-y: scroll;
+
+  /* these are specific to different browsers */
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -webkit-text-size-adjust: 100%;
+  -moz-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+
+  font-family: ‘Segoe UI’, Candara, ‘Bitstream Vera Sans’, ‘DejaVu Sans’, ‘Bitsream Vera Sans’, ‘Trebuchet MS’, Verdana, ‘Verdana Ref’, sans-serif;
+  font-weight: 400;
+  line-height: 1.5;
+  background-color: rgb(239, 239, 239);
+}
+
+
+a {
+  display: inline-block;
+  text-decoration: none;
+}
+
+h2,h3 {
+  margin:0;
+  padding:0;
+  padding-bottom:1.5rem;
+}
+
+form {
+  accent-color: hsla(198, 77%, 73%, 0.482);
+}
+
+
+.wrapper {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  flex: 1;
+}
+
+.container {
+  margin: 0 20px;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: start;
+  flex:1;
+}
+
+.header {
+  padding-top: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-bottom: 1.5rem;
+}
+
+
+/*
+  This rule implies that the H1 tag lives within another HTML tag
+  It "inherits" some rules from the above
+  Those rules won't apply to an h1 that's outside a block with the class of 'header'
+*/
+
+.header h1 {
+  display: block;
+  /* this will push other blocks out of the way */
+
+  /* colors */
+  background-color: rgba(138, 255, 152, 0.781);
+  color: #4a4a4a;
+
+  /* shapes */
+  border-radius: 6px;
+  font-size: 1.5rem;
+  padding: 1.25rem;
+  margin:0; /* removing the margin on h1 tags means the header pins to the top if we move */
+
+
+  /* box-shadows are fancy */
+  box-shadow: 0 0.5em 1em -0.125em rgba(93, 242, 6, 0.1), 0 0 0 1px rgb(10 10 10 / 2%);
+}
+
+
+/*
+  Rules can be combined on a block to apply the 'cascade' in order
+  So you can use two classnames in a single class attribute
+  like: <div class="box section">
+
+  Rules may combine in unexpected ways - remember that the LAST thing written in this file will have "priority"
+  And will be what displays in your client
+*/
+
+.box {
+  background-color: rgba(153, 246, 224, 0.652);
+  border: 2px dashed;
+  border-radius: 4px;
+
+  width: fit-content;
+  height:fit-content;
+  padding: 1.5rem;
+  margin: 0 auto;
+}
+
+.left_section {
+  background-color: rgba(139, 175, 237, 0.8);
+  flex: 0 1 auto;
+  margin: 1rem;
+  padding: 1.5rem;
+}
+
+.right_section {
+  background-color: rgba(151, 151, 238, 0.7);
+    flex: 1 2 auto;
+    margin: 1rem;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+}
+
+.footer {
+  flex-shrink: 0;
+  padding: 1rem;
+  background-color: rgba(245, 248, 140, 0.8);
+  font-size: 1.2rem;
+  font-weight: 600;
+}
+
+.footer a {
+  color: rgb(196, 152, 7);
+  text-decoration: underline;
+}
+
+
+form input {
+    /* This is a hack to make sure our boxes line up with one another nicely */
+    width: 100%;
+    width: -moz-available;          /* WebKit-based browsers will ignore this. */
+    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
+    width: fill-available;
+
+    /* here we are setting white space correctly */
+    margin-bottom: 1rem;
+    height: 2rem;
+    border-radius: 4px;
+  }
+
+form label {
+  width: 100%;
+  width: -moz-available;          /* WebKit-based browsers will ignore this. */
+  width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
+  width: fill-available;
+  align-items: flex-start;
+
+  display: block; /* this turns the label text into a box we can set margins on */
+  margin-bottom: 0.5rem;
+}
+
+/* How To Write A Media Query For Small Screens */
+
+@media only screen and (max-width: 736px){
+    .container {
+      background-color: rgba(227, 242, 153, 0.65);
+      flex-direction: column;
+      align-items: center;
+    }
+    .right_section {
+      background-color: rgba(151, 151, 238, 0.7);
+        flex: 1 2 auto;
+        margin: 1rem;
+        align-items: flex-start;
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+
+  .chart_container {
+      height: 100%;
+      width: 100%;
+  }
diff --git a/README.md b/README.md
@@ -1,6 +1,7 @@
-# This is your readme
-You are required to fill it in with documentation similar to that found in the Sequelize example for the course as part of your final project.
+# INST 377 Final Project
+This is the final project for INST 377. A group project where we created a web application that does various things. This specific page we made allows for the user to search any food into the search box and then have its nutritional information come up.
+### API Used
+We used this API: https://rapidapi.com/calorieninjas/api/calorieninjas/
+### Website Link
 
-### How to use Markdown
-Markdown is a text notation system used in Discord, Whatsapp and similar to structure pages without writing HTML at all. You'll be using it for your documentation.
 * [Markdown guide](https://www.markdownguide.org/cheat-sheet/)
diff --git a/Recipes/index2.html b/Recipes/index2.html
@@ -0,0 +1,50 @@
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="style2.css">
+    </head>
+    <body>
+        <div class="wrapper">
+            <header class="header"><h1>Meal Ideas</h1></header>
+            <div class="container">
+                <div>
+                    <button onclick="window.history.back()">Go Back</button>
+                </div>
+                <div class="left_section box">
+                    <h2> Sample Meal Ideas</h2>
+                    <ol class="box">
+                        <li>Creamy Chicken Noodle Soup with Rotisserie</li>
+                        <li>Creamy Avocado & White Bean Wrap</li>
+                        <li>Chicken and Spinach Skillet Pasta with Lemon</li>
+                        <li>Chipotle Ranch Chicken Casserole</li>
+                        <li>Cucumber Vinegar Salad</li>
+                    </ol>
+                </div>
+                <div class="right_section box">
+                    <h2>Meal Images</h2>
+                    <div class="carousel">
+                        <button class="prev">prev</button>
+                        <div class="slides">
+                            <div class="carousel_item visible"><img id="slide_1" src='meal1.png' alt="Meal One" /></div>
+                            <div class="carousel_item hidden"><img id="slide_2" src='meal2.png' alt="Meal Two" /></div>
+                            <div class="carousel_item hidden"><img id="slide_3" src='meal3.png' alt="Meal Three" /></div>
+                            <div class="carousel_item hidden"><img id="slide_4" src='meal4.png' alt="Meal Four" /></div>
+                            <div class="carousel_item hidden"><img id="slide_5" src='meal5.png' alt="Meal Five" /></div>
+                        </div>
+                        <button class="next">next</button>
+                    </div>
+                    <div class="box">
+                        Five Different Meals
+                    </div>
+                </div>
+            </div>
+            <footer class="footer">
+                Group Project Pair 19
+            </footer>
+        </div>
+        <script src="./script2.js"></script>
+    </body>
+</html>
+
diff --git a/Recipes/meal1.png b/Recipes/meal1.png
diff --git a/Recipes/meal2.png b/Recipes/meal2.png
diff --git a/Recipes/meal3.png b/Recipes/meal3.png
diff --git a/Recipes/meal4.png b/Recipes/meal4.png
diff --git a/Recipes/meal5.png b/Recipes/meal5.png