Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Otters | Tori Shade #85

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Otters | Tori Shade #85

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fed5a1f
Sound Logic
ToriShade Jun 16, 2022
699d01b
Fuck me
ToriShade Jun 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 57 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,63 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather Report</title>
<link href="/styles/index.css" rel="stylesheet">
</head>
<body>

<header>
<h1 id = "main-title">Weather Report</h1>
<h2 id = "sub-title">For the lovely city of: </h2>
</header>
<main>
<section>
<!-- <div id = "star-wrap-open">✨ </div> -->
<span type = "text" id = "city-name"></span><!-- placeholder = "Seattle"-->
<!-- <div id = "star-wrap-close"> ✨</div> -->
</section>
<section class = "temperature">
<div id = "temperature-content-box"></div>
<h1 id = "temperature-content-box-header">Temperature</h1>
<button type = "button" id = "increase-temperature-button">🔼</button>
<p>
<span id = "temperature"></span>
</p>
<button type = "button" id = "decrease-temperature-button">🔽</button>
<button type = "button" id = "get-current-forecast-button">Get Current<br>Forecast</button>
</section>
<section class = "sky">
<div id = "sky-content-box"></div>
<h1 id = "sky-content-box-header">Sky</h1>
<select id = "sky-drop-down">
<option value="What's the Vibe?">--What's the Vibe?--</option>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is the vibe, indeed.

<option value="sunny">Sunny</option>
<option value="cloudy">Cloudy</option>
<option value="rainy">Rainy</option>
<option value="snowy">Snowy</option>
</select>
</section>
<aside class = "weather-garden">
<h1 id = "weather-garden-header">Weather Garden</h1>
<div id = "weather-garden-container"></div>
<p id = "weather-garden-containing-sky" placeholder = "🌧🌈⛈🌧💧🌧🌦⛈💧🌧🌧🌈🌧"></p>
<div id = "weather-garden-containing-landscape"></div>
</aside>
<section class = "city">
<div id = "city-name-content-box"></div>
<h1 id = "city-name-content-box-header">City Name</h1>
<input type = "text" id = "city-name-input" placeholder = "Input City for Specific Weather Report">
<!-- <button type = "button" id = "city-name-weather-details-button">Go</button> -->
<button type = "button" id = "city-name-reset-button">Reset</button>
</section>
<!-- <section>
<button id="addCrabButton">Add Crab</button>
</section>
<section id="crabContainer">
</section> -->
Comment on lines +55 to +59
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remember to remove any superfluous code! 😉

</main>

<footer>©2022 Tori Shade | Ada Developers Academy</footer>

<script src="src/index.js"></script>
<script src="node_modules/axios/dist/axios.min.js"></script>
</body>
</html>
</html>
187 changes: 187 additions & 0 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,187 @@
const currentLocation = {
city: "Seattle",
latitude: 47.6038321,
longitude: -122.3300624,
climate: temperature,
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What would be temperature here?

};

window.onload = () => {
displayCurrentLocation();
getCurrentForecast();
setTheMood();
changeTemperatureAndLandscapeStyling();
};
Comment on lines +8 to +13
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great job researching and implementing a window.onload function!



const displayCurrentLocation = () => {
const cityName = document.getElementById("city-name");
cityName.textContent = "✨ " + currentLocation.city + " ✨";
}


const updateDisplayForGivenCity = () => {
const cityNameInput = document.getElementById("city-name-input");
cityNameInput.addEventListener("keyup", () => {
currentLocation.city = cityNameInput.value;
displayCurrentLocation();
});
}
Comment on lines +23 to +28
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For ever cleaner code, consider moving this event listener down to registerEventHandlers and refactoring this function.



const resetLocation = () => {
const cityName = document.getElementById("city-name");
if (cityName != "Seattle"); {
currentLocation.city = "Seattle"
currentLocation.latitude = 47.6038321,
currentLocation.longitude = -122.3300624,
currentLocation.climate = temperature,
document.getElementById("city-name-input").value = "";
displayCurrentLocation();
getCurrentForecast();
};
}


const increaseTemperature = () => {
const temperature = document.getElementById("temperature");
temperature.textContent = (parseInt(temperature.textContent) + 1);
changeTemperatureAndLandscapeStyling();
}


const decreaseTemperature = () => {
const temperature = document.getElementById("temperature");
temperature.textContent = (parseInt(temperature.textContent) - 1);
changeTemperatureAndLandscapeStyling();
}


const getCurrentLocationCoordinates = () => {
axios
.get("http://127.0.0.1:5000/location", {
params: {
q: currentLocation.city,
},
})
.then((response) => {
latitude = response.data[0].lat;
longitude = response.data[0].lon;
currentLocation.latitude = latitude;
currentLocation.longitude = longitude;
console.log(`${currentLocation.city}'s coordinates: ${latitude}, ${longitude} have been found`);
getCurrentForecast();
})
.catch((error) => {
console.log(`Coordinates for ${currentLocation.city} Not Found ${error.response.data}`);
});
}


const getCurrentForecast = () => {
axios
.get("http://127.0.0.1:5000/weather", {
params: {
lat: currentLocation.latitude,
lon: currentLocation.longitude,
units: "imperial"
},
})
.then((response) => {
temperature.textContent = Math.round(response.data.current.temp);
currentLocation.climate = temperature.textContent;
console.log(`${currentLocation.city}'s current temperature of ${temperature.textContent} has been found`);
changeTemperatureAndLandscapeStyling();
})
.catch((error) => {
console.log(`Current Temperature for ${currentLocation.city} Not Found ${error.response.data}`);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good error handling message!

});
}


const changeTemperatureAndLandscapeStyling = () => {
temperature = document.getElementById("temperature");
landscape = document.getElementById("weather-garden-containing-landscape");
adjustedTemperature = parseInt(temperature.textContent);

if (adjustedTemperature >= 80) {
temperature.style.color = "red";
landscape.textContent = "🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂"
} else if (adjustedTemperature >= 70 && adjustedTemperature <= 79) {
temperature.style.color = "orange";
landscape.textContent = "🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷"
} else if (adjustedTemperature >= 60 && adjustedTemperature <= 69) {
temperature.style.color = "goldenrod";
landscape.textContent = "🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃"
} else if (adjustedTemperature >= 50 && adjustedTemperature <= 59) {
temperature.style.color = "green";
landscape.textContent = "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲"
} else if (adjustedTemperature <= 49) {
temperature.style.color = "teal";
landscape.textContent = "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲"
}
}


const setTheMood = () => {
const skyIcons = document.getElementById("weather-garden-containing-sky");
const choice = document.getElementById("sky-drop-down").value;

switch (choice) {
case "sunny":
skyIcons.textContent = "☀️☀️☀️☀️☀️☀️☀️☀️☀️☀️☀️☀️☀️";
break;
case "cloudy":
skyIcons.textContent = "☁️☁️☁️☁️☁️🌥⛅️🌥☁️☁️☁️☁️☁️";
break;
case "rainy":
skyIcons.textContent = "🌧🌈⛈🌧💧🌧🌦⛈💧🌧🌧🌈🌧";
break;
case "snowy":
skyIcons.textContent = "🌨❄️🌨❄️🌨❄️🌨❄️🌨❄️🌨❄️🌨";
break;
case "What's the Vibe?":
skyIcons.textContent = "🌧🌈⛈🌧💧🌧🌦⛈💧🌧🌧🌈🌧";
}
}


const registerEventHandlers = () => {
const cityNameInput = document.getElementById("city-name-input");
cityNameInput.addEventListener("keyup", updateDisplayForGivenCity);

const resetButton = document.getElementById("city-name-reset-button");
resetButton.addEventListener("click", resetLocation);

const increaseTemperatureButton = document.getElementById("increase-temperature-button");
increaseTemperatureButton.addEventListener("click", increaseTemperature);

const decreaseTemperatureButton = document.getElementById("decrease-temperature-button");
decreaseTemperatureButton.addEventListener("click", decreaseTemperature);

const choice = document.getElementById("sky-drop-down");
choice.addEventListener('change', setTheMood);

const getCurrentForecastButton = document.getElementById("get-current-forecast-button");
getCurrentForecastButton.addEventListener("click", getCurrentLocationCoordinates);
}


if (document.readyState !== 'loading') {
resetLocation();
increaseTemperature();
decreaseTemperature();
getCurrentLocationCoordinates();
getCurrentForecast();
changeTemperatureAndLandscapeStyling();
setTheMood();
registerEventHandlers();
} else {
document.addEventListener('DOMContentLoaded', resetLocation);
document.addEventListener('DOMContentLoaded', increaseTemperature);
document.addEventListener('DOMContentLoaded', decreaseTemperature);
document.addEventListener('DOMContentLoaded', getCurrentLocationCoordinates);
document.addEventListener('DOMContentLoaded', getCurrentForecast);
document.addEventListener('DOMContentLoaded', changeTemperatureAndLandscapeStyling);
document.addEventListener('DOMContentLoaded', setTheMood);
document.addEventListener("DOMContentLoaded", registerEventHandlers);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice use of the helper method registerEventHandlers! ✨

}
Loading