Ruby Kimberly & Sage

README.md

@@ -1,5 +1,29 @@
 # Weather Report
 
+# Coworking Agreement
+
+## Accessibility Needs
+- Quieter environment
+- Zoom and Live Share
+- Keeping each other accountable
+
+## Collaboration vs. individual work expectations
+- Divide and conquer
+- Give overviews of what was worked on
+
+## Learning Style
+- Visual; diagrams preferred
+- Learn by looking at examples
+
+## Preferred Feedback Style
+- Just don't be Rude.
+
+## One Team Communication Skill to Improve
+- Timeboxing and explaining during the process
+
+## Signatures
+Kimberly Lantigua & Sage Choi (6/7/2023)
+
 ## Skills Assessed
 
 - Following directions and reading comprehension
@@ -24,23 +48,23 @@ Great weather apps do these two things:
 1. Pull weather data from a data source
 1. Display the weather in readable, compelling way
 
-![DuckDuckGo's weather modal, which features city name, temperature reading, and the weather. Some icons show sunny weather, some icons show rainy weather, and some show cloudy weather.](ada-project-docs/assets/example-duckduckgo.png) 
+![DuckDuckGo's weather modal, which features city name, temperature reading, and the weather. Some icons show sunny weather, some icons show rainy weather, and some show cloudy weather.](ada-project-docs/assets/example-duckduckgo.png)
 _Fig. DuckDuckGo's weather modal, which features city name, temperature reading, and weather icons._
 
 Our goal is to create a fun, small weather app that focuses on displaying the weather.
 
 Our weather app will set the weather using user interaction and get the weather from a 3rd party API, OpenWeather.
 
-![Example weather app: The temperature reads 62, in yellow text. The selected dropdown for "Sky" is "Cloudy." There is a depiction of cloudy weather. The city name is "Hoboken." The header reads "Hoboken."](ada-project-docs/assets/cloudy-62.png) 
+![Example weather app: The temperature reads 62, in yellow text. The selected dropdown for "Sky" is "Cloudy." There is a depiction of cloudy weather. The city name is "Hoboken." The header reads "Hoboken."](ada-project-docs/assets/cloudy-62.png)
 _Fig. Example weather app displaying the weather for Hoboken._
 
-![Example weather app: The temperature reads 85, in red text. The selected dropdown for "Sky" is "Sunny." There is a depiction of sunny weather. The city name is "Santo Domingo" The header reads "Santo Domingo."](ada-project-docs/assets/santo-domingo-85.png) 
+![Example weather app: The temperature reads 85, in red text. The selected dropdown for "Sky" is "Sunny." There is a depiction of sunny weather. The city name is "Santo Domingo" The header reads "Santo Domingo."](ada-project-docs/assets/santo-domingo-85.png)
 _Fig. Example weather app displaying the weather for Santo Domingo._
 
-![Example weather app: The temperature reads 38, in teal text. The selected dropdown for "Sky" is "Snowy." There is a depiction of snowy weather. The city name is "Bozeman." The header reads "Bozeman."](ada-project-docs/assets/snow-38.png) 
+![Example weather app: The temperature reads 38, in teal text. The selected dropdown for "Sky" is "Snowy." There is a depiction of snowy weather. The city name is "Bozeman." The header reads "Bozeman."](ada-project-docs/assets/snow-38.png)
 _Fig. Example weather app displaying the weather for Bozeman._
 
-![Example weather app: The temperature reads 49, in teal text. The selected dropdown for "Sky" is "Rainy." There is a depiction of rainy weather. The city name is "Seattle." The header reads "Seattle."](ada-project-docs/assets/rainy-49.png) 
+![Example weather app: The temperature reads 49, in teal text. The selected dropdown for "Sky" is "Rainy." There is a depiction of rainy weather. The city name is "Seattle." The header reads "Seattle."](ada-project-docs/assets/rainy-49.png)
 _Fig. Example weather app displaying the weather for Seattle._
 
 ## How to Complete and Submit
@@ -75,9 +99,9 @@ This should be done during the Wave 1 initial setup of your `index.html` page.
 
 ## Content Requirements
 
-For this project, there are no requirements around color schemes, font choices, or layouts. 
+For this project, there are no requirements around color schemes, font choices, or layouts.
 
-Note that applying styles with CSS is one of many learning goals of this project -- it is not the central learning goal. You may enjoy being creative with styles, but we encourage you to not concern yourself with getting the styles perfect. Remember, you can always choose to continue working on styling after you've completed all functional requirements. 
+Note that applying styles with CSS is one of many learning goals of this project -- it is not the central learning goal. You may enjoy being creative with styles, but we encourage you to not concern yourself with getting the styles perfect. Remember, you can always choose to continue working on styling after you've completed all functional requirements.
 
 However, _at a minimum_, your project must contain these elements:
 

index.html

@@ -10,7 +10,51 @@
  <link rel="stylesheet" href="styles/index.css" />
 </head>
 <body>
- <script src="./src/index.js"></script>
+ <header class="header__header">
+ <h1>Weather Report</h1>
+ <span>Follow your curio-city:
+ <span id="headerCityName" class="header__city-name">
+ Seattle
+ </span>
+ </span>
+ </header>
+ <section class="temperature__section">
+ <h2>Temperature (℉)</h2>
+ <div class="temperature__content">
+ <div class="temperature__controls">
+ <button id="increaseTempBtn">+</button>
+ <span id="tempValue" class="yellow">72</span>
+ <button id="decreaseTempBtn">-</button>
+ </div>
+ <div class="current__control">
+ <button id="currentTempBtn">Current Temp</button>
+ </div>
+ </div>
+ </section>
+ <section class="sky__section">
+ <h2>Sky</h2>
+ <select id="skySelect">
+ <option>Sunny</option>
+ <option>Cloudy</option>
+ <option>Rainy</option>
+ <option>Snowy</option>
+ </select>
+ </section>
+ <section class="city-name__section">
+ <h2>City Name</h2>
+ <div id="textAndBtn">
+ <input id="cityNameInput" type="text" value="Seattle">
+ <button id="cityNameReset" class="city-name__reset-btn">Reset</button>
+ </div>
+ </section>
+ <section class="garden__section">
+ <h2>Weather Garden</h2>
+ <div id="gardenContent" class="garden__content sunny">
+ <div id="sky"></div>
+ <div id="landscape"></div>
+ </div>
+ </section>
  <script src="./node_modules/axios/dist/axios.min.js"></script>
+ <script src="./src/index.js"></script>
 </body>
 </html>

src/index.js

@@ -0,0 +1,185 @@
+
+const state = {
+ city: 'Seattle',
+ lat: 47.6038321,
+ long: -122.3300624,
+ temp: 70,
+};
+
+const convertKToF = (temp) => {
+ return (temp - 273.15) * (9 / 5) + 32;
+};
+
+const getWeather = () => {
+ axios
+ .get('http://127.0.0.1:5000/weather', {
+ params: {
+ lat: state.lat,
+ lon: state.long,
+ },
+ })
+ .then((response) => {
+ const weather = response.data;
+ state.temp = Math.round(convertKToF(weather.main.temp));
+ formatTempAndGarden();
+ })
+ .catch((error) => {
+ console.log('Could not retrieve the weather:')
+ });
+};
+
+const getCoordinates = async () => {
+ axios
+ .get('http://127.0.0.1:5000/location', {
+ params: {
+ q: state.city,
+ },
+ })
+ .then((response) => {
+ state.lat = response.data[0].lat;
+ state.long = response.data[0].lon;
+ getWeather();
+ })
+ .catch((error) => {
+ console.log('Could not find latitute and longitude:', error.response);
+ });
+};
+
+const updateCityName = () => {
+ const inputName = document.getElementById("cityNameInput").value;
+ const headerCityName = document.getElementById("headerCityName");
+ state.city = inputName;
+ headerCityName.textContent = state.city;
+};
+
+const resetCityName = () => {
+ const cityNameInput = document.getElementById("cityNameInput");
+ cityNameInput.value = 'Seattle';
+ updateCityName();
+};
+
+const formatSky = () => {
+ const skies = {
+ sunny: "☁️ ☁️ ☁️ ☀️ ☁️ ☁️",
+ cloudy: "☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️",
+ rainy: "🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧",
+ snowy: "🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨"
+ };
+ const inputSky = document.getElementById('skySelect').value;
+ const skyBox = document.getElementById('sky');
+ let sky = '';
+ let skyColor = '';
+
+ if (inputSky === 'Sunny') {
+ sky = skies.sunny;
+ skyColor = 'sunny';
+ } else if (inputSky === 'Cloudy') {
+ sky = skies.cloudy;
+ skyColor = 'cloudy';
+ } else if (inputSky === 'Rainy') {
+ sky = skies.rainy;
+ skyColor = 'rainy';
+ } else if (inputSky === 'Snowy') {
+ sky = skies.snowy;
+ skyColor = 'snowy';
+ }
+
+ skyBox.textContent = sky;
+ const gardenContent = document.getElementById('gardenContent');
+ gardenContent.classList = `garden__content ${skyColor}`;
+}
+
+const formatTempAndGarden = () => {
+ const landscapes = {
+ hot: "🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂",
+ warm: "🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷",
+ cool: "🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃",
+ cold: "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲"
+ };
+ let temp = state.temp;
+ let color = 'green';
+ let landscape = landscapes.warm;
+
+ if (temp >= 100) {
+ color = 'red';
+ landscape = landscapes.hot;
+ } else if (temp >= 95) {
+ color = 'orangered';
+ landscape = landscapes.hot;
+ } else if (temp >= 86) {
+ color = 'orange';
+ landscape = landscapes.hot;
+ } else if (temp >= 77) {
+ color = 'green';
+ landscape = landscapes.warm;
+ } else if (temp >= 68) {
+ color = 'darkgreen';
+ landscape = landscapes.warm;
+ } else if (temp >= 59) {
+ color = 'teal';
+ landscape = landscapes.cool;
+ } else if (temp >= 50) {
+ color = 'cornflowerblue';
+ landscape = landscapes.cool;
+ } else if (temp >= 41) {
+ color = 'steelblue';
+ landscape = landscapes.cold;
+ } else if (temp >= 32) {
+ color = 'royalblue';
+ landscape = landscapes.cold;
+ } else if (temp >= 23) {
+ color = 'darkblue';
+ landscape = landscapes.cold;
+ } else if (temp >= 14) {
+ color = 'darkslateblue';
+ landscape = landscapes.cold;
+ } else if (temp >= 5) {
+ color = '#424040';
+ landscape = landscapes.cold;
+ } else {
+ color = 'black';
+ landscape = landscapes.cold;
+ }
+
+ const temperature = document.getElementById('tempValue');
+ const newLandscape = document.getElementById('landscape');
+ temperature.style.color = color;
+ temperature.textContent = String(state.temp);
+ newLandscape.textContent = landscape;
+};
+
+const increaseTemp = () => {
+ state.temp++;
+ formatTempAndGarden();
+};
+
+const decreaseTemp = () => {
+ state.temp--;
+ formatTempAndGarden();
+};
+
+const registerEventHandlers = () => {
+ formatTempAndGarden();
+ const currentTempBtn = document.getElementById('currentTempBtn');
+ currentTempBtn.addEventListener('click', getCoordinates);
+
+ const increaseTempBtn = document.getElementById('increaseTempBtn');
+ increaseTempBtn.addEventListener('click', increaseTemp);
+
+ const decreaseTempBtn = document.getElementById('decreaseTempBtn');
+ decreaseTempBtn.addEventListener('click', decreaseTemp);
+
+ updateCityName();
+ const cityNameInput = document.getElementById('cityNameInput');
+ cityNameInput.addEventListener('input', updateCityName);
+
+ const cityNameResetBtn = document.getElementById('cityNameReset');
+ cityNameResetBtn.addEventListener('click', resetCityName);
+ cityNameResetBtn.addEventListener('click', getCoordinates);
+
+ formatSky();
+ const skySelect = document.getElementById('skySelect');
+ skySelect.addEventListener('change', formatSky);
+};
+
+document.addEventListener('DOMContentLoaded', registerEventHandlers);