ada-c17 · buslakj · Jun 10, 2022 · Jun 10, 2022 · Jun 13, 2022 · Jun 14, 2022
diff --git a/index.html b/index.html
@@ -5,8 +5,47 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Weather Report</title>
+    <link href="./styles/index.css" rel="stylesheet" type="text/css">
+    <!-- <link rel="node_modules" href="./node_modules/axios/dist/axios.min.js" -->
+
 </head>
+<header>
+    <h1 id="headline"> Weather Report</h1>
+    <h2 id="city"> Edmonds</h2> 
+</header>
+
 <body>
-
+    <section class="info">
+        <section>
+            <label>City: <input type="text" id="input" value=" "></label>
+            <button id="enter">Enter</button>
+            <button type ="reset" id="reset">Reset</button>
+        </section>
+        <section id="temperatureContainer">
+            <button id="upButton"> Increase Temperature</button>
+            <h2 id="f"> Degrees Fahrenheit:60</h2>
+            <button id="downButton"> Decrease Temperature</button>
+        </section>
+        <section>
+            <select id="sky">
+                <option>Sunny</option>
+                <option>Cloudy</option>
+                <option>Rainy</option>
+                <option>Snowy</option>
+            </select>
+            <span id="skies">☁️ ☁️ ☁️ ☀️ ☁️ ☁️</span>
+        </section>
+</section> 
+    <footer class="seasons">
+        <h2>Landscape:
+            <span id="conditions"> 🌸☀️🌸☀️🌸☀️🌸☀️🌸☀️</span>
+        </h2>
+
+
+    </footer> 
+    <script src="./src/index.js"></script>
+    <script src="./node_modules/axios/dist/axios.min.js"></script>
+
 </body>
+
 </html>
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,142 @@
+const state = {
+  fahrenheit: 60,
+  city: 'Edmonds',
+  sky: 'Sunny',
+};
+let num = state.fahrenheit;
+const tempUp = (event) => {
+  state.fahrenheit += 1;
+  tempChangeColor(state.fahrenheit);
+  weatherGarden();
+  const increase = document.getElementById('f');
+  increase.textContent = `Degrees Fahrenheit:${state.fahrenheit}`;
+  return increase.textContent;
+};
+
+const tempDown = (event) => {
+  state.fahrenheit--;
+  tempChangeColor(state.fahrenheit);
+  weatherGarden();
+  const decrease = document.getElementById('f');
+  decrease.textContent = `Degrees Fahrenheit:${state.fahrenheit}`;
+  return decrease.textContent;
+};
+
+const cityInput = (event) => {
+  let cityInput = document.getElementById('input').value;
+  state.city = cityInput;
+  let cityHeader = document.getElementById('city');
+  cityHeader.textContent = `${state.city}`;
+  getCityWeather();
+};
+
+const tempChangeColor = (num) => {
+  let element = document.getElementById('temperatureContainer');
+  if (state.fahrenheit >= 80) {
+    element.style.backgroundColor = 'red';
+  } else if (80 > state.fahrenheit && state.fahrenheit >= 70) {
+    element.style.backgroundColor = 'orange';
+  } else if (70 > state.fahrenheit && state.fahrenheit >= 60) {
+    element.style.backgroundColor = 'yellow';
+  } else if (60 > state.fahrenheit && state.fahrenheit >= 50) {
+    element.style.backgroundColor = 'green';
+  } else if (50 > state.fahrenheit && state.fahrenheit >= 33) {
+    element.style.backgroundColor = 'teal';
+  } else if (state.fahrenheit <= 32) {
+    element.style.backgroundColor = 'blue';
+  }
+};
+
+const weatherGarden = () => {
+  let num = state.fahrenheit;
+  let conditions = document.getElementById('conditions');
+  if (num >= 80) {
+    conditions.textContent = '🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂';
+  } else if (80 > num && num >= 70) {
+    conditions.textContent = '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷';
+  } else if (70 > num && num >= 60) {
+    conditions.textContent = '🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃';
+  } else if (60 > num && num >= 50) {
+    conditions.textContent = '🌲🌲🌲🍂🌲🍁🌲🌲🍂🌲🍂🍁🍂';
+  } else if (50 > num && num >= 33) {
+    conditions.textContent = '🍂🍁🍂🍂🍁🍂🍂🍁🍂🍂🍁🍂';
+  } else if (num < 32) {
+    conditions.textContent = '⛄️⛄️⛄️⛄️⛄️⛄️⛄️⛄️⛄️⛄️';
+  }
+};
+
+const getCityWeather = () => {
+  const q = state.city;
+  axios
+    .get('http://localhost:5000/location', { params: { q } })
+    .then((response) => {
+      console.log('success!', response.data);
+      console.log(response.data[0]['lat']);
+      let lat = response.data[0]['lat'];
+      console.log(lat);
+      let lon = response.data[0]['lon'];
+      axios
+        .get('http://localhost:5000/weather', { params: { lat, lon } })
+        .then((response) => {
+          console.log('success!', response.data);
+          console.log(response.data['current']['temp']);
+          let degrees = response.data['current']['temp'];
+          let degreesF = (degrees - 273) * 1.8 + 32;
+          state.fahrenheit = parseInt(degreesF);
+          updateTemp();
+        })
+        .catch((error) => {
+          console.log(error);
+          console.log('error!', error.response.data);
+        });
+    })
+    .catch((error) => {
+      console.log('error!', error);
+    });
+};
+
+const selectSky = (event) => {
+  const sky = document.getElementById('sky').value;
+  state.sky = sky;
+  const skies = document.getElementById('skies');
+  if (state.sky === 'Sunny') {
+    skies.textContent = '☁️ ☁️ ☁️ ☀️ ☁️ ☁️';
+  } else if (state.sky === 'Cloudy') {
+    skies.textContent = '☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️';
+  } else if (state.sky === 'Rainy') {
+    skies.textContent = '🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧';
+  } else if (state.sky === 'Snowy') {
+    skies.textContent = '🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨';
+  }
+};
+
+const resetCity = (event) => {
+  const resetInput = document.getElementById('input');
+  resetInput.value = 'Edmonds';
+  cityInput();
+  state.fahrenheit = 60;
+  updateTemp();
+};
+
+const updateTemp = () => {
+  const update = document.getElementById('f');
+  update.textContent = `Degrees Fahrenheit:${state.fahrenheit}`;
+};
+const registerEventHandlers = (event) => {
+  const upButton = document.querySelector('#upButton');
+  upButton.addEventListener('click', tempUp);
+
+  const downButton = document.querySelector('#downButton');
+  downButton.addEventListener('click', tempDown);
+
+  const changeCity = document.getElementById('enter');
+  changeCity.addEventListener('click', cityInput);
+
+  selectSky();
+  const changeSky = document.getElementById('sky');
+  changeSky.addEventListener('change', selectSky);
+
+  const resetButton = document.getElementById('reset');
+  resetButton.addEventListener('click', resetCity);
+};
+document.addEventListener('DOMContentLoaded', registerEventHandlers);
diff --git a/styles/index.css b/styles/index.css
@@ -0,0 +1,26 @@
+header {text-align: center;}
+
+ul {
+    list-style-type: none;
+}
+section.info {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+
+
+}
+#temperatureContainer {
+    padding: 50px;
+    border-color: pink;
+    background-color: aquamarine;
+
+
+
+
+
+}   
+footer {
+    display:flex;
+    justify-content: center; 
+}
diff --git a/weather-report-proxy-server/.gitignore b/weather-report-proxy-server/.gitignore
@@ -0,0 +1,141 @@
+.vscode
+.DS_Store
+
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+#   For a library or package, you might want to ignore these files since the code is
+#   intended to run in multiple environments; otherwise, check them in:
+# .python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+#Pipfile.lock
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/
diff --git a/weather-report-proxy-server/LICENSE b/weather-report-proxy-server/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Ada Project Repositories
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/weather-report-proxy-server/Procfile b/weather-report-proxy-server/Procfile
@@ -0,0 +1 @@
+web: gunicorn 'app:create_app()'