From 37a75c5dc53cab8e50e0e79ca34f17135f681934 Mon Sep 17 00:00:00 2001
From: Lindsey <lindseymarcea@icloud.com>
Date: Wed, 7 Dec 2022 18:02:54 -0500
Subject: [PATCH 01/13] Creating HTML and boxes
---
index.html | 25 +++++++++++++++++++++++++
src/index.js | 1 +
styles/index.css | 48 ++++++++++++++++++++++++++++++++++++++++++++++++
3 files changed, 74 insertions(+)
diff --git a/index.html b/index.html
index 68b320b9a..261f83079 100644
--- a/index.html
+++ b/index.html
@@ -2,11 +2,36 @@
<html lang="en">
<head>
<meta charset="UTF-8">
+ <link href="styles/index.css" rel="stylesheet">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather Report</title>
</head>
<body>
+ <div class="container">
+ <header class="header">Weather Report For the lovely city of Seattle</header>
+ <nav class="white-boxes">
+ <div class="white">Temperature<br><br></div>
+ <div class="white">Sky<br><br></div>
+ <div class="white">City name<br><br></div>
+ </nav>
+ <div class="content">
+ <div class="garden">Weather Garden</div>
+ </div>
+ <footer> This is our web page </footer>
+
+
+ <!-- <div class="box">
+
+ </div> -->
+
+
+
+
+
+
+ <script src="./node_modules/axios/dist/axios.min.js"></script>
+ <script src="./src/index.js"></script>
</body>
</html>
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index e69de29bb..ad9a93a7c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -0,0 +1 @@
+'use strict';
diff --git a/styles/index.css b/styles/index.css
index e69de29bb..be72f3519 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -0,0 +1,48 @@
+
+body {
+ background-color: rgb(0, 106, 255);
+ /* color: #434344; */
+ font-family: "Montserrat", sans-serif;
+ font-weight: 400;
+}
+
+
+.container {
+ width: 60vw;
+ height: 100vh;
+ /* background-color: lightblue; */
+
+ display: grid;
+ grid-template: 15%
+ auto 20% /1fr 3fr;
+}
+ /* grid-template-columns: 100px 100px; */
+
+.header {
+ background-color: #d55e00;
+ grid-column: auto / span 2;
+ color: white;
+ font-size: 50px;
+}
+
+nav {
+ background-color: yellow;
+ grid-row: auto / span 2;
+}
+
+.content {
+ background-color: #009e73;
+ grid-row: auto;
+
+}
+
+footer {
+ background-color: red;
+ grid-column: auto / span 2;
+}
+
+/* .white {
+ background-color: white;
+ color: black
+} */
+
From 05d901098344c542e37ca5897147f0d18c8865a2 Mon Sep 17 00:00:00 2001
From: Masha <iiureva.mariia@gmail.com>
Date: Wed, 7 Dec 2022 23:47:42 -0800
Subject: [PATCH 02/13] Updated Wave1, added flex containers and some styling
---
index.html | 42 +++++++++++++++++++++++++++++++++++-------
package.json | 2 +-
styles/index.css | 38 +++++++++++++++++++++++++++++++-------
3 files changed, 67 insertions(+), 15 deletions(-)
diff --git a/index.html b/index.html
index 261f83079..935f93f80 100644
--- a/index.html
+++ b/index.html
@@ -10,16 +10,44 @@
<body>
<div class="container">
- <header class="header">Weather Report For the lovely city of Seattle</header>
- <nav class="white-boxes">
- <div class="white">Temperature<br><br></div>
- <div class="white">Sky<br><br></div>
- <div class="white">City name<br><br></div>
- </nav>
+ <header class="header">
+ Weather Report <span>For the lovely city of
+ <span id="headerCityName">
+ Seattle
+ </span>
+ </span>
+ </header>
+ <div class="white-boxes">
+ <div class="white" id="temperature_box">
+ <h2>Temperature</h2>
+ <div class="temperature_content">
+ <div class="change_temperature">
+ <span id="increaseTemp">⬆️</span>
+ <span id="temp">NUMBER</span>
+ <span id="decreaseTemp">⬇️</span>
+ </div>
+ <button id="getTemp">Get Realtime Temperature</button>
+ </div>
+ </div>
+ <div class="white" id="sky_box">
+ <h2>Sky</h2>
+ <select id="skySelect">
+ <option>Sunny</option>
+ <option>Cloudy</option>
+ <option>Rainy</option>
+ <option>Snowy</option>
+ </select>
+ </div>
+ <div class="white" id="city_name">
+ <h2>City name</h2>
+ <input type="text" id="cityNameInput" value="Seattle" />
+ <button id="cityNameReset" class="city-name__reset-btn">Reset</button>
+ </div>
+ </div>
<div class="content">
<div class="garden">Weather Garden</div>
</div>
- <footer> This is our web page </footer>
+ <footer> This is our Footer </footer>
<!-- <div class="box">
diff --git a/package.json b/package.json
index 9cf5ca65b..1cfcba810 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
{
"dependencies": {
- "axios": "^0.27.2"
+ "axios": "^1.2.1"
}
}
diff --git a/styles/index.css b/styles/index.css
index be72f3519..731afcde2 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -8,13 +8,12 @@ body {
.container {
- width: 60vw;
- height: 100vh;
+ width: 90vw;
+ height: 90vh;
/* background-color: lightblue; */
display: grid;
- grid-template: 15%
- auto 20% /1fr 3fr;
+ grid-template: 15% auto 20% /1fr 3fr;
}
/* grid-template-columns: 100px 100px; */
@@ -25,17 +24,42 @@ body {
font-size: 50px;
}
-nav {
+.white-boxes {
background-color: yellow;
- grid-row: auto / span 2;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+
+ /* grid-row: auto; */
+}
+
+.white {
+ background-color: white;
+ border-radius: 25px;
+ margin: 25px;
+ padding: 55px 52px;
+
+
}
.content {
background-color: #009e73;
- grid-row: auto;
+ /* grid-row: auto; */
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
}
+.garden {
+ background-color: white;
+ border-radius: 25px;
+ margin: 25px;
+ padding: 255px 52px;
+
+
+}
+
footer {
background-color: red;
grid-column: auto / span 2;
From 31d0c6064c23ddb260dc49d0a71bb43192a53c4f Mon Sep 17 00:00:00 2001
From: Masha <iiureva.mariia@gmail.com>
Date: Wed, 7 Dec 2022 23:50:00 -0800
Subject: [PATCH 03/13] Minor html change
---
index.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/index.html b/index.html
index 935f93f80..d835e120c 100644
--- a/index.html
+++ b/index.html
@@ -41,7 +41,7 @@ <h2>Sky</h2>
<div class="white" id="city_name">
<h2>City name</h2>
<input type="text" id="cityNameInput" value="Seattle" />
- <button id="cityNameReset" class="city-name__reset-btn">Reset</button>
+ <button id="resetCity" class="resetButton">Reset</button>
</div>
</div>
<div class="content">
From 6a6c3f1fc27a5084f6af8dc3c173feb75671658b Mon Sep 17 00:00:00 2001
From: Lindsey <lindseymarcea@icloud.com>
Date: Thu, 8 Dec 2022 11:50:59 -0500
Subject: [PATCH 04/13] Created temp +- event handlers & registered events
---
index.html | 2 ++
src/index.js | 30 ++++++++++++++++++++++++++++++
2 files changed, 32 insertions(+)
diff --git a/index.html b/index.html
index d835e120c..9b79f6c47 100644
--- a/index.html
+++ b/index.html
@@ -27,6 +27,8 @@ <h2>Temperature</h2>
<span id="decreaseTemp">⬇️</span>
</div>
<button id="getTemp">Get Realtime Temperature</button>
+ <section id="tempContainer"></section>
+ <!-- new code added in, grouping element to help with styling -->
</div>
</div>
<div class="white" id="sky_box">
diff --git a/src/index.js b/src/index.js
index ad9a93a7c..047ae3e54 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1 +1,31 @@
'use strict';
+
+// Build an event handler
+// Register the event handler on some HTML element(s)
+
+// An element that increases the temperature by one degree on click
+const increaseTemperature = () => {
+ const temperature = document.getElementbyId('increaseTemp');
+ temperature.textContent = parseInt(temperature.textContent) + 1;
+ // add in something later about when we change temp we change text color & layout- may add in elsewhere
+};
+
+// An element that decreases the temperature by one degree on click
+const decreaseTemperature = () => {
+ const temperature = document.getElementbyId('decreaseTemp');
+ temperature.textContent = parseInt(temperature.textContent) - 1;
+ // add in something later about when we change temp we change text color & layout
+};
+
+// register event handlers
+const registerEventHandlers = () => {
+ const increaseTemperature = document.querySelector('increaseTemp');
+ Temp.addEventListener('click', increaseTemperature);
+ // separate these two out?
+ const decreaseTemperature = document.querySelector('decreaseTemp');
+ Temp.addEventListener('click', decreaseTemperature);
+};
+
+document.addEventListener('DOMContentLoaded', registerEventHandlers);
+
+// missing state and maybe that's why it's not working?
From 82024be257009dbff90102d075b7cfccbfc81d3e Mon Sep 17 00:00:00 2001
From: Lindsey <lindseymarcea@icloud.com>
Date: Thu, 8 Dec 2022 14:43:10 -0500
Subject: [PATCH 05/13] Changed text color of temp & ability to change temp by
1
---
index.html | 4 ++--
src/index.js | 56 ++++++++++++++++++++++++++++++++----------------
styles/index.css | 24 +++++++++++++++++++++
3 files changed, 64 insertions(+), 20 deletions(-)
diff --git a/index.html b/index.html
index 9b79f6c47..198d7d822 100644
--- a/index.html
+++ b/index.html
@@ -23,7 +23,7 @@ <h2>Temperature</h2>
<div class="temperature_content">
<div class="change_temperature">
<span id="increaseTemp">⬆️</span>
- <span id="temp">NUMBER</span>
+ <span id="temp">80</span>
<span id="decreaseTemp">⬇️</span>
</div>
<button id="getTemp">Get Realtime Temperature</button>
@@ -62,6 +62,6 @@ <h2>City name</h2>
<script src="./node_modules/axios/dist/axios.min.js"></script>
- <script src="./src/index.js"></script>
+ <script src="/src/index.js"></script>
</body>
</html>
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 047ae3e54..0b23430c2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,31 +1,51 @@
'use strict';
+console.log('testing');
-// Build an event handler
-// Register the event handler on some HTML element(s)
+const state = {
+ city: 'Seattle',
+ temp: 80,
+};
-// An element that increases the temperature by one degree on click
const increaseTemperature = () => {
- const temperature = document.getElementbyId('increaseTemp');
- temperature.textContent = parseInt(temperature.textContent) + 1;
- // add in something later about when we change temp we change text color & layout- may add in elsewhere
+ state.temp += 1;
+ changeColor();
+ // const temperature = document.getElementById('temp');
+ // temperature.textContent = state.temp;
};
-// An element that decreases the temperature by one degree on click
const decreaseTemperature = () => {
- const temperature = document.getElementbyId('decreaseTemp');
- temperature.textContent = parseInt(temperature.textContent) - 1;
- // add in something later about when we change temp we change text color & layout
+ state.temp -= 1;
+ changeColor();
+ // const temperature = document.getElementById('temp');
+ // temperature.textContent = state.temp;
+};
+
+const changeColor = () => {
+ let temp = state.temp;
+ let color = 'red';
+ if (temp >= 80) {
+ color = 'red';
+ } else if (temp >= 70) {
+ color = 'orange';
+ } else if (temp >= 60) {
+ color = 'yellow';
+ } else if (temp >= 50) {
+ color = 'green';
+ } else {
+ color = 'teal';
+ }
+
+ const temperature = document.getElementById('temp');
+ temperature.className = color;
+ temperature.textContent = String(state.temp);
};
-// register event handlers
const registerEventHandlers = () => {
- const increaseTemperature = document.querySelector('increaseTemp');
- Temp.addEventListener('click', increaseTemperature);
- // separate these two out?
- const decreaseTemperature = document.querySelector('decreaseTemp');
- Temp.addEventListener('click', decreaseTemperature);
+ const increaseTemp = document.getElementById('increaseTemp');
+ increaseTemp.addEventListener('click', increaseTemperature);
+
+ const decreaseTemp = document.getElementById('decreaseTemp');
+ decreaseTemp.addEventListener('click', decreaseTemperature);
};
document.addEventListener('DOMContentLoaded', registerEventHandlers);
-
-// missing state and maybe that's why it's not working?
diff --git a/styles/index.css b/styles/index.css
index 731afcde2..d83c3592b 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -65,6 +65,30 @@ footer {
grid-column: auto / span 2;
}
+.red {
+ color: red;
+ }
+
+.orange {
+ color: orange;
+ }
+
+.yellow {
+ color: gold;
+ }
+
+.yellow-green {
+ color: yellowgreen;
+ }
+
+.green {
+ color: green;
+ }
+
+.teal {
+ color: teal;
+ }
+
/* .white {
background-color: white;
color: black
From 4b4086ffad1bdb3c2ae1fccf8907ad1c724e36e0 Mon Sep 17 00:00:00 2001
From: Lindsey <lindseymarcea@icloud.com>
Date: Thu, 8 Dec 2022 23:15:07 -0500
Subject: [PATCH 06/13] Working on adding weather garden/landscape code
---
index.html | 3 +++
src/index.js | 17 ++++++++++++++---
styles/index.css | 11 +++++++++++
3 files changed, 28 insertions(+), 3 deletions(-)
diff --git a/index.html b/index.html
index 198d7d822..7b3b37d43 100644
--- a/index.html
+++ b/index.html
@@ -48,6 +48,9 @@ <h2>City name</h2>
</div>
<div class="content">
<div class="garden">Weather Garden</div>
+ <!-- <div id ="weather-garden-container"></div> -->
+ <!-- <p id ="weather-garden-landscape"></div> -->
+ <div id ="garden_content" class="garden_content sunny"></div>
</div>
<footer> This is our Footer </footer>
diff --git a/src/index.js b/src/index.js
index 0b23430c2..e0bf04b67 100644
--- a/src/index.js
+++ b/src/index.js
@@ -8,39 +8,50 @@ const state = {
const increaseTemperature = () => {
state.temp += 1;
- changeColor();
+ changeColorAndGarden();
// const temperature = document.getElementById('temp');
// temperature.textContent = state.temp;
};
const decreaseTemperature = () => {
state.temp -= 1;
- changeColor();
+ changeColorAndGarden();
// const temperature = document.getElementById('temp');
// temperature.textContent = state.temp;
};
-const changeColor = () => {
+const changeColorAndGarden = () => {
let temp = state.temp;
let color = 'red';
+ // let garden = '🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂';
+
if (temp >= 80) {
color = 'red';
+ garden = '🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂';
} else if (temp >= 70) {
color = 'orange';
+ garden = '🦜🦜__😎_ 🌞__⛱⛱_ ';
} else if (temp >= 60) {
color = 'yellow';
+ garden = '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷';
} else if (temp >= 50) {
color = 'green';
+ garden = '🌱🌱__ 🌻 🌿__ 🌷🌷';
} else {
color = 'teal';
+ garden = '❄️🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲️';
}
+ const newgarden = document.getElementById('garden');
+ newgarden.textContent = garden;
const temperature = document.getElementById('temp');
temperature.className = color;
temperature.textContent = String(state.temp);
};
const registerEventHandlers = () => {
+ changeColorAndGarden();
+
const increaseTemp = document.getElementById('increaseTemp');
increaseTemp.addEventListener('click', increaseTemperature);
diff --git a/styles/index.css b/styles/index.css
index d83c3592b..469b00b1d 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -89,6 +89,17 @@ footer {
color: teal;
}
+
+/* weather-Garden-Container {
+ width: 600px;
+ height: 50px;
+ position:absolute;
+ text-align: center;
+
+} */
+
+
+
/* .white {
background-color: white;
color: black
From d9a5e8c1eb342812bedf7affae4b2a268453bd04 Mon Sep 17 00:00:00 2001
From: Masha <iiureva.mariia@gmail.com>
Date: Thu, 8 Dec 2022 21:06:22 -0800
Subject: [PATCH 07/13] Minor changes in html structure and updated changeColor
function in js
---
favicon.ico | Bin 0 -> 1150 bytes
index.html | 7 +++--
src/index.js | 8 +++--
styles/index.css | 75 ++++++++++++++++++++---------------------------
4 files changed, 41 insertions(+), 49 deletions(-)
create mode 100644 favicon.ico
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..62661dbde9acfa41be45d5d0d446d87fead5c70f
GIT binary patch
literal 1150
zcmd6nJqp4=6okK^V3}0bmi9S-*Ri*>v9?jXfLF2e8kS;VE20?RMn|4Y44Y2E?7W|u
z*+3wW*;5qQIbzy}Auu-B$R@A35!h~BWHsvEj;gBu24z`RiCD((o#^|@SBAXmQ`mca
zo#K@y_<Y?Z$Fy_r_c^M6aeR;O<GLxM>E58zTp41Y5zo|%y;hmpiDQlWuvZ<}`uxqG
z@9y`imD|SBwz2Myxy|Euu}{6%q}1Jf;U55p9_%vM-VG1f8(*%lxxsM;`2fx<SWMt#
I`hc6^3HR!v@c;k-
literal 0
HcmV?d00001
diff --git a/index.html b/index.html
index 198d7d822..776d9d5e1 100644
--- a/index.html
+++ b/index.html
@@ -23,7 +23,7 @@ <h2>Temperature</h2>
<div class="temperature_content">
<div class="change_temperature">
<span id="increaseTemp">⬆️</span>
- <span id="temp">80</span>
+ <span id="temp">70</span>
<span id="decreaseTemp">⬇️</span>
</div>
<button id="getTemp">Get Realtime Temperature</button>
@@ -46,8 +46,9 @@ <h2>City name</h2>
<button id="resetCity" class="resetButton">Reset</button>
</div>
</div>
- <div class="content">
- <div class="garden">Weather Garden</div>
+ <div class="content">
+ <div class = "garden_name">Weather Garden</div>
+ <div class="garden">information</div>
</div>
<footer> This is our Footer </footer>
diff --git a/src/index.js b/src/index.js
index 0b23430c2..518fb1c6b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,7 +3,7 @@ console.log('testing');
const state = {
city: 'Seattle',
- temp: 80,
+ temp: 70,
};
const increaseTemperature = () => {
@@ -36,8 +36,10 @@ const changeColor = () => {
}
const temperature = document.getElementById('temp');
- temperature.className = color;
- temperature.textContent = String(state.temp);
+ // temperature.className = color;
+ temperature.style.color = color;
+ // temperature.textContent = String(state.temp);
+ temperature.textContent = state.temp;
};
const registerEventHandlers = () => {
diff --git a/styles/index.css b/styles/index.css
index d83c3592b..a3cfb12d7 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -1,61 +1,78 @@
body {
- background-color: rgb(0, 106, 255);
- /* color: #434344; */
+ background-color: rgb(17, 129, 241);
font-family: "Montserrat", sans-serif;
font-weight: 400;
}
.container {
- width: 90vw;
- height: 90vh;
+ width: 80%;
+ height: 60%;
+ margin: auto;
/* background-color: lightblue; */
display: grid;
- grid-template: 15% auto 20% /1fr 3fr;
+ grid-template: 10% auto 5% /30% 70%;
}
/* grid-template-columns: 100px 100px; */
.header {
- background-color: #d55e00;
+
grid-column: auto / span 2;
color: white;
font-size: 50px;
}
.white-boxes {
- background-color: yellow;
+
display: flex;
flex-direction: column;
justify-content: space-around;
+
/* grid-row: auto; */
}
.white {
background-color: white;
- border-radius: 25px;
- margin: 25px;
- padding: 55px 52px;
+ border-radius: 10px;
+ margin: 15px;
+ padding: 5% 5%;
}
.content {
- background-color: #009e73;
+
/* grid-row: auto; */
display: flex;
flex-direction: column;
- justify-content: space-around;
+ justify-content: center;
+ align-items: center;
}
+#temp {
+ color: orange
+}
+
+.garden_name {
+ background-color: yellow;
+
+ width: 50%;
+ border-radius: 10px;
+ margin: 10px;
+ padding: 5px 22px;
+}
+
.garden {
background-color: white;
- border-radius: 25px;
- margin: 25px;
- padding: 255px 52px;
+
+ width: 50%;
+ border-radius: 10px;
+ margin: 10px;
+ padding: 55px 22px;
}
@@ -65,32 +82,4 @@ footer {
grid-column: auto / span 2;
}
-.red {
- color: red;
- }
-
-.orange {
- color: orange;
- }
-
-.yellow {
- color: gold;
- }
-
-.yellow-green {
- color: yellowgreen;
- }
-
-.green {
- color: green;
- }
-
-.teal {
- color: teal;
- }
-
-/* .white {
- background-color: white;
- color: black
-} */
From daa60237c2c679964048ef12df9d4a05f27fd104 Mon Sep 17 00:00:00 2001
From: Masha <iiureva.mariia@gmail.com>
Date: Fri, 9 Dec 2022 00:04:17 -0800
Subject: [PATCH 08/13] Wave 3 and 5 added
---
index.html | 9 ++++--
src/index.js | 79 ++++++++++++++++++++++++++++++++++++++++--------
styles/index.css | 7 ++---
3 files changed, 76 insertions(+), 19 deletions(-)
diff --git a/index.html b/index.html
index 662ae12b0..71aa6f993 100644
--- a/index.html
+++ b/index.html
@@ -33,7 +33,7 @@ <h2>Temperature</h2>
</div>
<div class="white" id="sky_box">
<h2>Sky</h2>
- <select id="skySelect">
+ <select id="selectSky">
<option>Sunny</option>
<option>Cloudy</option>
<option>Rainy</option>
@@ -48,10 +48,13 @@ <h2>City name</h2>
</div>
<div class="content">
<div class = "garden_name">Weather Garden</div>
- <div class="garden">information</div>
+ <div class="garden" id="weatherBox">
+ <div id="sky"></div>
+ <div id="garden"></div>
<!-- <div id ="weather-garden-container"></div> -->
<!-- <p id ="weather-garden-landscape"></div> -->
- <div id ="garden_content" class="garden_content sunny"></div>
+ <!-- <div id ="garden_content" class="garden_content sunny"></div> -->
+ </div>
</div>
<footer> This is our Footer </footer>
diff --git a/src/index.js b/src/index.js
index f04ffa023..2ec867ae7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,45 +1,46 @@
'use strict';
console.log('testing');
+// const BASE_URL = 'http://localhost:5000';
+
const state = {
city: 'Seattle',
temp: 70,
};
-const increaseTemperature = () => {
+const increaseTemperature = (event) => {
+ console.log('in increaseTemp:', event);
state.temp += 1;
changeColorAndGarden();
- // const temperature = document.getElementById('temp');
- // temperature.textContent = state.temp;
};
-const decreaseTemperature = () => {
+const decreaseTemperature = (event) => {
+ console.log('in decreaseTemp:', event);
state.temp -= 1;
changeColorAndGarden();
- // const temperature = document.getElementById('temp');
- // temperature.textContent = state.temp;
};
const changeColorAndGarden = () => {
let temp = state.temp;
let color = 'red';
- // let garden = '🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂';
+ let garden = '🦜🦜__😎_ 🌞__⛱⛱_ ';
if (temp >= 80) {
color = 'red';
garden = '🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂';
} else if (temp >= 70) {
color = 'orange';
- garden = '🦜🦜__😎_ 🌞__⛱⛱_ ';
+ garden = '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷';
+ // garden = '🦜🦜__😎_ 🌞__⛱⛱_ ';
} else if (temp >= 60) {
color = 'yellow';
- garden = '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷';
+ garden = '🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃';
} else if (temp >= 50) {
color = 'green';
- garden = '🌱🌱__ 🌻 🌿__ 🌷🌷';
+ garden = '❄️🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲️';
} else {
color = 'teal';
- garden = '❄️🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲️';
+ garden = '❄️❄️❄️❄️❄️⛄️⛄️⛄️⛄️⛄️⛄️❄️❄️❄️❄️❄️';
}
const newgarden = document.getElementById('garden');
@@ -51,7 +52,50 @@ const changeColorAndGarden = () => {
temperature.textContent = state.temp;
};
-const registerEventHandlers = () => {
+const modifySky = (event) => {
+ console.log('in Modify Sky name:', event);
+ let sky = document.getElementById('selectSky');
+ let color = 'lightblue';
+
+ let sky_visual = '😎😎😎😎😎🌞🌞🌞🌞🌞';
+ if (sky.value === 'Sunny') {
+ sky_visual = '😎😎😎😎😎🌞🌞🌞🌞🌞';
+ color = 'lightyellow';
+ } else if (sky.value === 'Cloudy') {
+ sky_visual = '☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️';
+ color = 'lightgray';
+ } else if (sky.value === 'Rainy') {
+ sky_visual = '🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧';
+ color = 'darkblue';
+ } else if (sky.value === 'Snowy') {
+ sky_visual = '❄️❄️❄️❄️🌨🌨🌨🌨❄️❄️❄️❄️';
+ color = 'white';
+ }
+
+ const skyInWeatherBox = document.getElementById('sky');
+ skyInWeatherBox.textContent = sky_visual;
+ const weatherBox = document.getElementById('weatherBox');
+ weatherBox.style.backgroundColor = color;
+};
+
+const modifyCityName = (event) => {
+ console.log('in Modify City name:', event);
+ const cityInput = document.getElementById('cityNameInput').value;
+ const headerCityName = document.getElementById('headerCityName');
+ state.city = cityInput;
+ headerCityName.textContent = state.city;
+};
+
+const resetCityName = (event) => {
+ console.log('in Reset City name:', event);
+ const cityInput = document.getElementById('cityNameInput');
+ cityNameInput.value = 'Seattle';
+ modifyCityName();
+};
+
+const registerEventHandlers = (event) => {
+ console.log('in registerEventHandlers:', event);
+
changeColorAndGarden();
const increaseTemp = document.getElementById('increaseTemp');
@@ -59,6 +103,17 @@ const registerEventHandlers = () => {
const decreaseTemp = document.getElementById('decreaseTemp');
decreaseTemp.addEventListener('click', decreaseTemperature);
+
+ // modifyCityName();
+ const cityNameInput = document.getElementById('cityNameInput');
+ cityNameInput.addEventListener('input', modifyCityName);
+
+ const cityResetButton = document.getElementById('resetCity');
+ cityResetButton.addEventListener('click', resetCityName);
+
+ modifySky();
+ const selectNewSky = document.getElementById('selectSky');
+ selectNewSky.addEventListener('change', modifySky);
};
document.addEventListener('DOMContentLoaded', registerEventHandlers);
diff --git a/styles/index.css b/styles/index.css
index 88fdd1524..49c4dac5f 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -13,12 +13,11 @@ body {
/* background-color: lightblue; */
display: grid;
- grid-template: 10% auto 5% /30% 70%;
+ grid-template: 15% auto 5% /30% 70%;
}
/* grid-template-columns: 100px 100px; */
.header {
-
grid-column: auto / span 2;
color: white;
font-size: 50px;
@@ -82,7 +81,7 @@ footer {
grid-column: auto / span 2;
}
-.red {
+/* .red {
color: red;
}
@@ -104,7 +103,7 @@ footer {
.teal {
color: teal;
- }
+ } */
/* weather-Garden-Container {
From 198753c93d40c4ff36624cb0571c09387986e9ba Mon Sep 17 00:00:00 2001
From: Lindsey <lindseymarcea@icloud.com>
Date: Fri, 9 Dec 2022 11:23:21 -0500
Subject: [PATCH 09/13] Wave 4, Location API Key
---
src/index.js | 24 +++++++++++++++++++++++-
styles/index.css | 2 +-
2 files changed, 24 insertions(+), 2 deletions(-)
diff --git a/src/index.js b/src/index.js
index 2ec867ae7..f876408bc 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,11 +1,13 @@
'use strict';
console.log('testing');
-// const BASE_URL = 'http://localhost:5000';
+const BASE_URL = 'http://localhost:5000';
const state = {
city: 'Seattle',
temp: 70,
+ lat: 47.6062,
+ lon: -122.3321,
};
const increaseTemperature = (event) => {
@@ -93,6 +95,26 @@ const resetCityName = (event) => {
modifyCityName();
};
+const getLatAndLon = () => {
+ // const lat =
+ // const lon =
+
+ const axios = require('axios');
+
+ axios
+ .get('http://localhost:5000/location', {
+ params: { q: state.city },
+ })
+
+ .then((response) => {
+ // state.lat = response
+ console.log(response);
+ })
+ .catch((error) => {
+ console.log('Error in get Lat & Lon');
+ });
+};
+
const registerEventHandlers = (event) => {
console.log('in registerEventHandlers:', event);
diff --git a/styles/index.css b/styles/index.css
index 49c4dac5f..0378fb282 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -24,7 +24,7 @@ body {
}
.white-boxes {
-
+
display: flex;
flex-direction: column;
justify-content: space-around;
From 8c3c4f47d4259163c504c6ed33dd90be32c35707 Mon Sep 17 00:00:00 2001
From: Lindsey <lindseymarcea@icloud.com>
Date: Sat, 10 Dec 2022 12:20:07 -0500
Subject: [PATCH 10/13] Working on adding current weather for each city
---
src/index.js | 41 ++++++++++++++++++++++++++++++++++++-----
1 file changed, 36 insertions(+), 5 deletions(-)
diff --git a/src/index.js b/src/index.js
index f876408bc..37f8596c2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,7 @@
'use strict';
+
+const { default: axios } = require('axios');
+
console.log('testing');
const BASE_URL = 'http://localhost:5000';
@@ -96,10 +99,7 @@ const resetCityName = (event) => {
};
const getLatAndLon = () => {
- // const lat =
- // const lon =
-
- const axios = require('axios');
+ // const axios = require('axios');
axios
.get('http://localhost:5000/location', {
@@ -108,17 +108,44 @@ const getLatAndLon = () => {
.then((response) => {
// state.lat = response
- console.log(response);
+ // console.log(response);
+ state.lat = response.data[0].lat;
+ state.lon = response.data[0].lon;
+ console.log(state);
})
+
.catch((error) => {
console.log('Error in get Lat & Lon');
});
};
+// add in lat and lon in the parameters below?
+
+const getWeather = () => {
+
+ axios
+ .get('http://localhost:5000/weather', {
+ params: {
+ lat: state.lat,
+ lon: state.lon,
+ },
+ })
+
+ .then((response) => {
+ const temperature = Math.round((9 / 5)) + 32);
+ // currentLocation.temp = temp.textContent;
+ })
+
+ .catch((error) => {
+ console.log('Error in Weather');
+ });
+};
const registerEventHandlers = (event) => {
console.log('in registerEventHandlers:', event);
changeColorAndGarden();
+ getLatAndLon();
+ getWeather();
const increaseTemp = document.getElementById('increaseTemp');
increaseTemp.addEventListener('click', increaseTemperature);
@@ -136,6 +163,10 @@ const registerEventHandlers = (event) => {
modifySky();
const selectNewSky = document.getElementById('selectSky');
selectNewSky.addEventListener('change', modifySky);
+
+ getWeather();
+ const getTemp = document.getElementById('getTemp');
+ getTemp.addEventListener('click', getWeather);
};
document.addEventListener('DOMContentLoaded', registerEventHandlers);
From 54aa63f1bee52413946d5701b20b8c5291123c02 Mon Sep 17 00:00:00 2001
From: Lindsey <lindseymarcea@icloud.com>
Date: Sat, 10 Dec 2022 18:01:40 -0500
Subject: [PATCH 11/13] Editing code for getting weather
---
src/index.js | 24 +++++++++++++++---------
1 file changed, 15 insertions(+), 9 deletions(-)
diff --git a/src/index.js b/src/index.js
index 37f8596c2..9f23c0ea1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,6 @@
'use strict';
-const { default: axios } = require('axios');
+// const { default: axios } = require('axios');
console.log('testing');
@@ -120,23 +120,29 @@ const getLatAndLon = () => {
};
// add in lat and lon in the parameters below?
-const getWeather = () => {
-
+const getWeather = (latitude, longitude) => {
axios
- .get('http://localhost:5000/weather', {
+ .get('http://127.0.0.1:5000/weather', {
+ // .get('http://localhost:5000/weather', {
params: {
- lat: state.lat,
- lon: state.lon,
+ lat: latitude,
+ lon: longitude,
+ units: 'imperial',
},
})
.then((response) => {
- const temperature = Math.round((9 / 5)) + 32);
- // currentLocation.temp = temp.textContent;
+ const temp = response.data.main.temp;
+ console.log(response.data.main.temp);
+ document.getElementById('getTemp').innerhtml = temp;
+ // state.temp = Math.round(weather.current.temp - 273.15);
+ // temp is in kelvin- convert to celsius
+ // Math.round((9 / 5)) + 32); convert celsius to farenheit
+ // changeColorAndGarden();
})
.catch((error) => {
- console.log('Error in Weather');
+ console.log('Error calling OpenWeather');
});
};
From 1ba919c7cb841a9780027470f0349f2baae62942 Mon Sep 17 00:00:00 2001
From: Lindsey <lindseymarcea@icloud.com>
Date: Sat, 10 Dec 2022 19:58:07 -0500
Subject: [PATCH 12/13] Completed Wave 4, get weather and edited CSS
---
index.html | 7 ++-----
src/index.js | 25 ++++++++---------------
styles/index.css | 53 +++++++-----------------------------------------
3 files changed, 18 insertions(+), 67 deletions(-)
diff --git a/index.html b/index.html
index 71aa6f993..ec263c763 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
<div class="container">
<header class="header">
- Weather Report <span>For the lovely city of
+ Weather Report <span>for the lovely city of
<span id="headerCityName">
Seattle
</span>
@@ -51,12 +51,9 @@ <h2>City name</h2>
<div class="garden" id="weatherBox">
<div id="sky"></div>
<div id="garden"></div>
- <!-- <div id ="weather-garden-container"></div> -->
- <!-- <p id ="weather-garden-landscape"></div> -->
- <!-- <div id ="garden_content" class="garden_content sunny"></div> -->
</div>
</div>
- <footer> This is our Footer </footer>
+ <footer> Lindsey & Masha's Weather Report © 2022 </footer>
<!-- <div class="box">
diff --git a/src/index.js b/src/index.js
index 9f23c0ea1..f8f4c6b46 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,5 @@
'use strict';
-// const { default: axios } = require('axios');
-
console.log('testing');
const BASE_URL = 'http://localhost:5000';
@@ -99,15 +97,12 @@ const resetCityName = (event) => {
};
const getLatAndLon = () => {
- // const axios = require('axios');
-
axios
.get('http://localhost:5000/location', {
params: { q: state.city },
})
.then((response) => {
- // state.lat = response
// console.log(response);
state.lat = response.data[0].lat;
state.lon = response.data[0].lon;
@@ -118,15 +113,15 @@ const getLatAndLon = () => {
console.log('Error in get Lat & Lon');
});
};
-// add in lat and lon in the parameters below?
-const getWeather = (latitude, longitude) => {
+const getWeather = () => {
+ getLatAndLon();
+ changeColorAndGarden();
axios
.get('http://127.0.0.1:5000/weather', {
- // .get('http://localhost:5000/weather', {
params: {
- lat: latitude,
- lon: longitude,
+ lat: state.lat,
+ lon: state.lon,
units: 'imperial',
},
})
@@ -134,11 +129,10 @@ const getWeather = (latitude, longitude) => {
.then((response) => {
const temp = response.data.main.temp;
console.log(response.data.main.temp);
- document.getElementById('getTemp').innerhtml = temp;
- // state.temp = Math.round(weather.current.temp - 273.15);
- // temp is in kelvin- convert to celsius
- // Math.round((9 / 5)) + 32); convert celsius to farenheit
- // changeColorAndGarden();
+ // document.getElementById('temp') = temp;
+ state.temp = Math.round((temp - 273.15) * 1.8 + 32);
+ const newTemp = document.getElementById('temp');
+ newTemp.textContent = state.temp;
})
.catch((error) => {
@@ -151,7 +145,6 @@ const registerEventHandlers = (event) => {
changeColorAndGarden();
getLatAndLon();
- getWeather();
const increaseTemp = document.getElementById('increaseTemp');
increaseTemp.addEventListener('click', increaseTemperature);
diff --git a/styles/index.css b/styles/index.css
index 0378fb282..d232110a2 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -20,7 +20,7 @@ body {
.header {
grid-column: auto / span 2;
color: white;
- font-size: 50px;
+ font-size: 40px;
}
.white-boxes {
@@ -57,67 +57,28 @@ body {
}
.garden_name {
- background-color: yellow;
-
width: 50%;
border-radius: 10px;
margin: 10px;
padding: 5px 22px;
+ font-size: large;
+ color: white;
+ text-align: center;
}
.garden {
background-color: white;
-
width: 50%;
border-radius: 10px;
margin: 10px;
padding: 55px 22px;
+ text-align: center;
}
footer {
- background-color: red;
grid-column: auto / span 2;
+ font-size: large;
+ color: white;
}
-
-/* .red {
- color: red;
- }
-
-.orange {
- color: orange;
- }
-
-.yellow {
- color: gold;
- }
-
-.yellow-green {
- color: yellowgreen;
- }
-
-.green {
- color: green;
- }
-
-.teal {
- color: teal;
- } */
-
-
-/* weather-Garden-Container {
- width: 600px;
- height: 50px;
- position:absolute;
- text-align: center;
-
-} */
-
-
-
-/* .white {
- background-color: white;
- color: black
-} */
-
From ad3d4802b0ef2441135000a8d4000e5a610d2351 Mon Sep 17 00:00:00 2001
From: Masha <iiureva.mariia@gmail.com>
Date: Mon, 12 Dec 2022 09:43:24 -0800
Subject: [PATCH 13/13] Fixed temprature color change and temperature update
---
src/index.js | 30 +++++++++++++-----------------
1 file changed, 13 insertions(+), 17 deletions(-)
diff --git a/src/index.js b/src/index.js
index f8f4c6b46..37e9a2f4c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -96,27 +96,22 @@ const resetCityName = (event) => {
modifyCityName();
};
-const getLatAndLon = () => {
- axios
- .get('http://localhost:5000/location', {
+const getLatAndLon = async () => {
+ try {
+ const response = await axios.get('http://localhost:5000/location', {
params: { q: state.city },
- })
-
- .then((response) => {
- // console.log(response);
- state.lat = response.data[0].lat;
- state.lon = response.data[0].lon;
- console.log(state);
- })
-
- .catch((error) => {
- console.log('Error in get Lat & Lon');
});
+ state.lat = response.data[0].lat;
+ state.lon = response.data[0].lon;
+ console.log(state);
+ } catch (error) {
+ console.log('Error in get Lat & Lon');
+ }
};
-const getWeather = () => {
- getLatAndLon();
- changeColorAndGarden();
+const getWeather = async () => {
+ await getLatAndLon();
+ // changeColorAndGarden();
axios
.get('http://127.0.0.1:5000/weather', {
params: {
@@ -133,6 +128,7 @@ const getWeather = () => {
state.temp = Math.round((temp - 273.15) * 1.8 + 32);
const newTemp = document.getElementById('temp');
newTemp.textContent = state.temp;
+ changeColorAndGarden();
})
.catch((error) => {