ada-c17 · Ramora6627 · Jun 9, 2022 · Jun 9, 2022 · Jun 9, 2022 · Jun 9, 2022
diff --git a/.env b/.env
@@ -0,0 +1,2 @@
+LOCATION_KEY="pk.8e923bdd6caecdd41fb592621e6457ec"
+WEATHER_KEY="8ef694b082e1cf1d9e6407167bd6a7b5"
diff --git a/ada-project-docs/assets/cloudy-62.png b/ada-project-docs/assets/cloudy-62.png
diff --git a/ada-project-docs/assets/example-duckduckgo.png b/ada-project-docs/assets/example-duckduckgo.png
diff --git a/ada-project-docs/assets/images.jpeg b/ada-project-docs/assets/images.jpeg
diff --git a/ada-project-docs/assets/rainy.png b/ada-project-docs/assets/rainy.png
diff --git a/ada-project-docs/assets/snowy.jpeg b/ada-project-docs/assets/snowy.jpeg
diff --git a/ada-project-docs/assets/spring.jpeg b/ada-project-docs/assets/spring.jpeg
diff --git a/ada-project-docs/assets/sunny.jpeg b/ada-project-docs/assets/sunny.jpeg
diff --git a/image/atlanta-captions-for-instagram.jpeg b/image/atlanta-captions-for-instagram.jpeg
diff --git a/image/cartoon-desert-010.jpeg b/image/cartoon-desert-010.jpeg
diff --git a/image/depositphotos_90617526-stock-illustration-igloo-winter-background.jpeg b/image/depositphotos_90617526-stock-illustration-igloo-winter-background.jpeg
diff --git a/image/download.png b/image/download.png
diff --git a/image/freezing.jpeg b/image/freezing.jpeg
diff --git a/image/images (1).jpeg b/image/images (1).jpeg
diff --git a/image/images.jpeg b/image/images.jpeg
diff --git a/image/rainy.png b/image/rainy.png
diff --git a/image/snowy.jpeg b/image/snowy.jpeg
diff --git a/image/spring.jpeg b/image/spring.jpeg
diff --git a/image/sunny.jpeg b/image/sunny.jpeg
diff --git a/image/warm.jpeg b/image/warm.jpeg
diff --git a/image/weather.jpeg b/image/weather.jpeg
diff --git a/image/winter-cartoon-png.png b/image/winter-cartoon-png.png
diff --git a/index.html b/index.html
@@ -4,9 +4,60 @@
     <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="styles/index.css">
     <title>Weather Report</title>
 </head>
 <body>
-
+    <header>
+        <div class="text">
+            <h1>Weather Report </h1>
+            <h2 id="cityQuote"> Hotlanta! The City of Sweet tea and Sunshine</h2>
+        </div>
+    </header>
+    <section class="boxes">
+        <div class="grid-container ">
+            <div class="grid-item">
+
+                <button onclick="getCurrentTemp()"> Get Current Temperature</button>
+                <br><br><br>
+                <label id="temperature"></label>
+
+                <br><br>
+                <button onclick="increaseTemp()">Increase Temperature</button>
+                <button onclick="decreaseTemp()">Decrease Temperature</button>
+            </div>
+            <div class="grid-item">
+                <label for="cityid">CITY</label>
+                <br>
+                <input type="text" placeholder="Enter a City" id="cityname">
+                <br>
+                <button onclick="resetCity()"> Reset City </button>
+            </div>
+            <div class="grid-item">
+                <label id="sky">SKY</label>
+                <br>
+                <select id="skytype">
+                    <option value="">Select a Sky</option>
+                    <option value="cloudy">Cloudy</option>
+                    <option value="rainy">Rainy</option>
+                    <option value="snowy">Snowy</option>
+                    <option value="sunny">Sunny</option>
+                </select>
+                <div id = "skyIllustration" class="grid-item-2"></div>
+            </div>
+        </div>
+    </section>
+    <section class="boxes2">
+            <div id = "skyContent" class="grid-item-1">
+                <!-- <section id="weatherfarm"><br>LAND</section> -->
+
+            </div>
+    </section>
+    <br>
+    <footer>
+        <p>&copy;2022;Raha Rastegar</p>
+    </footer>
+    <script src="./src/index.js" type="text/javascript"></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,138 @@
+'use strict';
+// const axios = require('axios');
+
+window.onload = () => {
+  newTemperature();
+  changeCity();
+  changeSky();
+};
+
+let city = 'Atlanta';
+let temperature = 70;
+
+const increaseTemp = () => {
+  temperature += 1;
+  newTemperature();
+};
+
+const decreaseTemp = () => {
+  temperature -= 1;
+  newTemperature();
+};
+
+const getCurrentTemp = () => {
+  let latitude;
+  let longitude;
+
+  const weatherData = axios.get('http://localhost:5001/location', { params: { q: city } })
+    .then((response) => {
+      latitude = response.data[0].lat;
+      longitude = response.data[0].lon;
+      axios
+        .get('http://localhost:5001/weather', {
+          params: { lat: latitude, lon: longitude },
+        })
+        .then((response) => {
+          const kelvin = response.data.current.temp;
+          const fahrenheit = (9 / 5) * (kelvin - 273) + 32;
+          temperature = Math.round(fahrenheit);
+          newTemperature();
+        })
+        .catch((error) => {
+          console.log('error');
+        });
+    })
+    .catch((error) => {
+      console.log('error :(');
+    });
+};
+
+const resetCity = function () {
+  city = 'Atlanta';
+  document.querySelector('#cityname').value = 'Atlanta';
+  const curWeatherHeader = document.getElementById('cityQuote');
+  curWeatherHeader.textContent = 'Hotlanta! The City of Sweet tea and Sunshine';
+  getCurrentTemp();
+  updatteLandBasedonTemp();
+};
+
+const changeCity = () => {
+  // if the #cityname element is changed
+  const input = document.querySelector('#cityname');
+  input.addEventListener('change', updateValue);
+
+  // update header to display city name and update city variable
+  const curWeatherHeader = document.getElementById('cityQuote');
+  function updateValue(e) {
+    city = e.target.value;
+    curWeatherHeader.textContent = 'Current Weather for ' + city;
+    getCurrentTemp();
+  }
+};
+
+const changeSky = () => {
+  const input = document.querySelector('#skytype-select');
+
+  input.addEventListener('change', (event) => {
+    const skyOutput = document.querySelector('#sky');
+    skyOutput.textContent = getSky(event.target.value);
+  });
+};
+
+const newTemperature = () => {
+  const temperatureMessage =  temperature + '\u00B0F';
+  document.getElementById('temperature').innerHTML = temperatureMessage;
+  updatteLandBasedonTemp();
+};
+
+const updatteLandBasedonTemp = () => {
+  let img;
+  let tempColor = '';
+  if (temperature >= 80) {
+    tempColor = 'red';
+    img = 'desert'
+
+  } else if (temperature >= 70) {
+    tempColor = 'orange';
+    img = 'spring';
+  } else if (temperature >= 60) {
+    tempColor = 'yellow';
+    img = 'warm';
+  } else if (temperature >= 50) {
+    tempColor = 'green';
+    img = 'winter';
+  } else if (temperature < 50) {
+    tempColor = 'teal';
+    img = 'freez';
+  }
+  document.getElementById('temperature').style.color = tempColor;
+  document.queryCommandValue("#skyContent");
+  skyContent.classList = `grid-item-1 ${img}`;
+}
+
+
+const updateSky = () => {
+  const optionSky = document.querySelector('#skytype').value;
+  const skyContainer = document.querySelector('#sky');
+  let img;
+  if (optionSky === 'cloudy') {
+    img = 'cloudy';
+} else if (optionSky === 'sunny') {
+    img = 'sunny';
+} else if (optionSky === 'rainy') {
+    img = 'rainy';
+} else if (optionSky === 'snowy') {
+    img = 'snowy'
+}
+
+skyContainer.textContent = '';
+const skyContent = document.querySelector('#skyIllustration');
+skyContent.classList = `grid-item-2 ${img}`;
+}
+
+
+
+
+
+const skySelect = document.querySelector("#skytype");
+skySelect.addEventListener('change', updateSky);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		LOCATION_KEY="pk.8e923bdd6caecdd41fb592621e6457ec"
		WEATHER_KEY="8ef694b082e1cf1d9e6407167bd6a7b5"
Comment on lines +1 to +2 Copy link audreyandoy Jul 19, 2022 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. This is dangerous, your API keys are open to the public and vulnerable to strangers using your account! You need to create a `.gitignore` file and add `.env` to it in order to prevent local environment files from being pushed publicly.