AdaGold · brookestrz · Dec 13, 2022 · Dec 13, 2022 · Dec 13, 2022 · Dec 13, 2022
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1 @@
+<!DOCTYPE html><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" type="text/css" href="/weather-report/styles.f2adb762.css"><title>Weather Report</title></head><body> <div id="card"> <h1 id="city_name">Atlanta</h1> <form id="form"> <input type="text" id="search" placeholder="" autocomplete="off"> </form> <div id="temp_display"> <button id="arrowUp">&#11014;</button> <h1 id="temp">1</h1> <span>&#176;</span> <h2 id="feeL"></h2> <button id="arrowDown">&#11015;</button> </div> <button id="upDate">update</button> <select name="skies" id="skySelect"> <option value="">Select a sky</option> <option value="sunny">sunny</option> <option value="cloudy">cloudy</option> <option value="rainy">rainy</option> <option value="snowy">snowy</option> </select> <button id="reset">reset city</button> </div> <script type="text/javascript" src="/weather-report/src.8c511049.js"></script> </body></html>
diff --git a/dist/src.8c511049.js b/dist/src.8c511049.js
diff --git a/dist/src.8c511049.js.map b/dist/src.8c511049.js.map
diff --git a/dist/styles.f2adb762.css b/dist/styles.f2adb762.css
diff --git a/dist/styles.f2adb762.css.map b/dist/styles.f2adb762.css.map
diff --git a/index.html b/index.html
@@ -4,9 +4,32 @@
     <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" type="text/css" href="styles/index.css" /> 
     <title>Weather Report</title>
 </head>
 <body>
-
+    <div id="card">
+        <h1 id = "city_name">Atlanta</h1>
+    <form id="form">
+        <input type="text" id="search" placeholder="" autocomplete="off">
+    </form>
+    <div id="temp_display">
+    <button id="arrowUp">&#11014;</button>
+    <h1 id="temp">1</h1>
+    <span>&#176;</span>
+    <h2 id="feeL"></h2>
+    <button id="arrowDown">&#11015;</button>
+    </div>
+    <button id="upDate">update</button>
+    <select name="skies" id="skySelect">
+        <option value="">Select a sky</option>
+        <option value="sunny">sunny</option>
+        <option value="cloudy">cloudy</option>
+        <option value="rainy">rainy</option>
+        <option value="snowy">snowy</option>
+    </select>
+    <button id="reset">reset city</button>
+    </div>
+<script type="module" src="src/index.js"></script>
 </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,5 +1,16 @@
 {
   "dependencies": {
-    "axios": "^0.27.2"
+    "axios": "^1.2.1"
+  },
+  "devDependencies": {
+    "gh-pages": "^4.0.0",
+    "parcel-bundler": "1.12.5"
+  },
+  "scripts": {
+    "predeploy": "rm -rf dist && yarn run build",
+    "deploy": "gh-pages -d dist",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "parcel index.html ",
+    "build": "parcel build index.html --public-url /weather-report/"
   }
 }
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,136 @@
+import 'regenerator-runtime/runtime';
+import axios from 'axios';
+const temp_max = 105 
+const temp_min = -1
+
+
+const increaseTemp = () => {
+    let temp = document.querySelector("#temp")
+    let tempValue=  temp.textContent;
+    if(tempValue < temp_max ){
+        tempValue ++;
+    };
+    temp.textContent= tempValue
+};
+const decreaseTemp = () => {
+    let temp = document.querySelector('#temp')
+    let tempValue = temp.textContent
+    if(tempValue > temp_min){
+        tempValue -=1
+    };
+temp.textContent = tempValue
+};
+const colorTemp = () => {
+    let temp = document.querySelector('#temp')
+    let tempValue = temp.textContent
+    if (tempValue >= 80){
+        temp.style.color = "red";
+        document.body.style.backgroundImage = "url('styles/so-hot-oh-my.gif')";
+    }
+    else if(tempValue >= 70){
+        temp.style.color = "orange";
+        document.body.style.backgroundImage = "url('styles/sunny.gif')";
+
+    }
+    else if(tempValue >= 60){
+        temp.style.color = "yellow";
+        document.body.style.backgroundImage = "url('styles/peekaboo-sunshine.gif')";
+    }
+    else if(tempValue >= 50){
+        temp.style.color = "blue";
+        document.body.style.backgroundImage = "url('styles/totally-spies-sam.gif')";
+    }
+    else{
+        temp.style.color = "blue";
+        document.body.style.backgroundImage = "url('styles/spongebob-patrick-star.gif')";
+    }
+}
+
+const userInput = () => {
+	var inputValue = document.getElementById("search").value;
+    document.getElementById("city_name").innerHTML = inputValue;
+
+}
+const reseT = () => {
+    let searchBar = document.getElementById("search")
+    let cityName = document.getElementById("city_name")
+    searchBar.value = 'Atlanta'
+    cityName.textContent = 'Atlanta'
+}
+
+const changeSky = () => {
+    let sky = document.getElementById("skySelect").value
+    let carD = document.getElementById("card")
+    if(sky === "sunny"){
+        carD.style.backgroundImage = "url('styles/istockphoto-545096038-612x612.jpg')";
+    }
+    else if(sky === "cloudy"){
+        carD.style.backgroundImage = "url('styles/istockphoto-1023201682-612x612.jpg')";
+    }
+    else if(sky === "rainy"){
+        carD.style.backgroundImage = "url('styles/istockphoto-466693533-612x612.jpg')"
+    }
+    else if(sky === "snowy"){
+        carD.style.backgroundImage = "url('styles/istockphoto-490686800-612x612.jpg')"
+    }
+
+
+}
+
+
+const registerEventHandler = () => {
+    const upArrow = document.querySelector("#arrowUp");
+    const downArrow = document.querySelector("#arrowDown");
+    var inputValue = document.getElementById("search");
+    const update = document.getElementById("upDate")
+    const skySelector = document.getElementById("skySelect")
+    const resetButton = document.getElementById("reset")
+    upArrow.addEventListener("click", increaseTemp);
+    downArrow.addEventListener("click",decreaseTemp);
+    upArrow.addEventListener("click", colorTemp)
+    downArrow.addEventListener("click",colorTemp)
+    inputValue.addEventListener("keyup",userInput)
+    update.addEventListener("click",Update)
+    skySelector.addEventListener("change", changeSky)
+    resetButton.addEventListener("click",reseT)
+};
+
+
+// testing calling request using stored city value.
+const Update = () => {
+let city = document.getElementById("search").value;
+let lat;
+let lon;
+axios.get(`https://weatherapibrooke.herokuapp.com/location?q=${city}`)
+.then(function (response) {
+    // handle success
+    lat = response.data[0]['lat'];
+    lon = response.data[0]['lon'];
+    callWeather(lat,lon)
+})
+.catch(function (error) {
+    // handle error
+    console.log(error)
+})
+}
+
+// create function call for weather request
+
+const callWeather = (lat,lon) => {
+
+axios.get(`https://weatherapibrooke.herokuapp.com/weather?lat=${lat}&lon=${lon}&units=imperial`)
+.then(function(response) {
+
+    let temp = document.querySelector('#temp')
+    let feelsLike = document.querySelector('#feeL')
+    console.log(response.data)
+    temp.textContent = Math.round(response.data['main']['temp'])
+    feelsLike.textContent = Math.round(response.data['main']['feels_like'])
+    colorTemp()
+})
+.catch(function (error) {
+    // handle error
+    console.log(error);
+});
+}
+document.addEventListener("DOMContentLoaded", registerEventHandler);
diff --git a/styles/index.css b/styles/index.css
@@ -0,0 +1,72 @@
+@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Bangers&family=Manrope:wght@600&family=Noto+Serif+Oriya:wght@700&family=Open+Sans:wght@600&family=Roboto+Mono:ital,wght@1,600&family=Zen+Dots&display=swap');
+
+#card{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 7em;
+    background-color: black;
+    border-radius: 30px;
+    width: 400px;
+    top: 35%;
+    left: 27%;
+    margin: -25px 0 0 -25px; 
+    position: absolute;
+
+}
+html{
+    font-family: 'Roboto Mono', monospace;
+}
+
+#temp {
+    color: grey; 
+}
+
+#city_name {
+    color: white;
+    position: absolute;
+    top: -15px;
+    left: 16px;
+}
+
+#temp_display {
+    position: absolute;
+    left: 20px;
+    top: 45px;
+}
+#image {
+    width: 100%;
+    height: 0;
+    padding-bottom: 100%;
+    position: relative;
+
+}
+
+#feeL {
+    color: white;
+}
+
+span {
+    position: absolute;
+    left: 50px;
+    color: white;
+    top: 47px
+
+
+}
+button {
+    font-family: 'Roboto Mono', monospace;
+    color: black;
+    background-color: pink;
+}
+
+#skySelect{
+    font-family: 'Roboto Mono', monospace;
+    background-color: pink;
+
+}
+
+#search{
+    font-family: 'Roboto Mono', monospace;
+    background-color: pink;
+}
diff --git a/styles/istockphoto-1023201682-612x612.jpg b/styles/istockphoto-1023201682-612x612.jpg
diff --git a/styles/istockphoto-466693533-612x612.jpg b/styles/istockphoto-466693533-612x612.jpg
diff --git a/styles/istockphoto-490686800-612x612.jpg b/styles/istockphoto-490686800-612x612.jpg
diff --git a/styles/istockphoto-545096038-612x612.jpg b/styles/istockphoto-545096038-612x612.jpg
diff --git a/styles/peekaboo-sunshine.gif b/styles/peekaboo-sunshine.gif
diff --git a/styles/so-hot-oh-my.gif b/styles/so-hot-oh-my.gif
diff --git a/styles/spongebob-patrick-star.gif b/styles/spongebob-patrick-star.gif
diff --git a/styles/sunny.gif b/styles/sunny.gif
diff --git a/styles/totally-spies-sam.gif b/styles/totally-spies-sam.gif
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<!DOCTYPE html><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" type="text/css" href="/weather-report/styles.f2adb762.css"><title>Weather Report</title></head><body> <div id="card"> <h1 id="city_name">Atlanta</h1> <form id="form"> <input type="text" id="search" placeholder="" autocomplete="off"> </form> <div id="temp_display"> <button id="arrowUp">⬆</button> <h1 id="temp">1</h1> <span>°</span> <h2 id="feeL"></h2> <button id="arrowDown">⬇</button> </div> <button id="upDate">update</button> <select name="skies" id="skySelect"> <option value="">Select a sky</option> <option value="sunny">sunny</option> <option value="cloudy">cloudy</option> <option value="rainy">rainy</option> <option value="snowy">snowy</option> </select> <button id="reset">reset city</button> </div> <script type="text/javascript" src="/weather-report/src.8c511049.js"></script> </body></html>