Temp section

index.html

@@ -19,16 +19,17 @@ <h1>Weather Report</h1>
  </span>
  </header>
  <section class="temperature__section">
- <h2>Temperature</h2>
+ <h2>Temperature (℉)</h2>
  <div class="temperature__content">
  <div class="temperature__controls">
- <button id="increaseTemp">UP</button>
- <span id="tempValue" class="yellow">68</span>
- <button id="decreaseTemp">DOWN</button>
+ <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>
- <button id="currentTempButton">Current Temp</button>
  </div>
-
  </section>
  <section class="sky__section">
  <h2>Sky</h2>

src/index.js

@@ -1,8 +1,71 @@
-import axios from 'axios';
+// import 'regenerator-runtime/runtime';
+// import axios from 'axios';
 
 const state = {
  city: 'Seattle',
  lat: 47.6038321,
  long: -122.3300624,
- temp: 72,
+ temp: 70,
 };
+
+const formatTempAndGarden = () => {
+ let temp = state.temp;
+ let color = 'green';
+
+ if (temp >= 100) {
+ color = 'red';
+ } else if (temp >= 95) {
+ color = 'orangered';
+ } else if (temp >= 86) {
+ color = 'orange';
+ } else if (temp >= 77) {
+ color = 'green';
+ } else if (temp >= 68) {
+ color = 'darkgreen';
+ } else if (temp >= 59) {
+ color = 'teal';
+ } else if (temp >= 50) {
+ color = 'cornflowerblue';
+ } else if (temp >= 41){
+ color = 'steelblue';
+ } else if (temp >= 32) {
+ color = 'royalblue';
+ } else if (temp >= 23) {
+ color = 'darkblue';
+ } else if (temp >= 14) {
+ color = 'darkslateblue';
+ } else if (temp >= 5) {
+ color = '#424040';
+ } else {
+ color = 'black';
+ }
+
+ const temperature = document.getElementById('tempValue');
+ temperature.style.color = color;
+ temperature.textContent = String(state.temp);
+};
+
+const increaseTemp = () => {
+ state.temp++;
+ formatTempAndGarden();
+};
+
+const decreaseTemp = () => {
+ state.temp--;
+ formatTempAndGarden();
+};
+
+const registerEventHandlers = () => {
+ formatTempAndGarden();
+
+ // const currentTempBtn = document.querySelector('currentTempBtn');
+ // currentTempButton.addEventListener('click', findCoordinates);
+
+ const increaseTempBtn = document.getElementById('increaseTempBtn');
+ increaseTempBtn.addEventListener('click', increaseTemp);
+
+ const decreaseTempBtn = document.getElementById('decreaseTempBtn');
+ decreaseTempBtn.addEventListener('click', decreaseTemp);
+};
+
+document.addEventListener('DOMContentLoaded', registerEventHandlers);

styles/index.css

@@ -2,14 +2,21 @@
  border: 1px antiquewhite dashed;
 }
 
+h2 {
+ margin: 0 auto 2rem auto;
+}
+
 body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto auto;
  grid-gap: 1rem;
  font-family: Rubik,sans-serif;
  font-size: 18px;
- background-color: #7d9fdd;
+ /* background-color: #7d9fdd; */
+ background-image: url("../images/clouds3.jpg");
+ background-size: cover;
+ background-position: center;
  margin: 2rem;
 }
 
@@ -26,21 +33,43 @@ body {
  font-size: 3em;
 }
 
-h2 {
- margin: 0 auto 2rem auto;
-}
-
 .header__city-name::before,
 .header__city-name::after {
  content: "✨";
 }
 
+.current__control {
+ display: flex;
+ align-self: flex-start;
+ text-align: justify;
+}
+
+.temperature__section button {
+ display: flex;
+ background-color: #e7b434;
+ justify-content: center;
+ border: none;
+ color: #fff;
+ padding: 12px 30px;
+ font-size: 1.2rem;
+ border-radius: 10px;
+}
+
+button:hover {
+ background-color: #c3992d;
+}
+
+.temperature__content {
+ display: flex;
+ justify-content: space-around;
+}
+
 .temperature__section,
 .sky__section,
 .city-name__section {
  border-radius: 8px;
  padding: 2rem;
- background-color: white;
+ background-color: whitesmoke;
  grid-row: 2;
 }