From 2594bd7c9a0d0512912345c3ac2f1918e84c78b5 Mon Sep 17 00:00:00 2001 From: Jonathan Ingersoll Date: Mon, 26 Oct 2020 16:56:51 -0400 Subject: [PATCH 01/21] Created WeatherComponent.jsx; imported and linked to component in App.js; scaffolded out todo items --- src/App.js | 2 ++ src/Components/WeatherComponent.jsx | 36 +++++++++++++++++++++++++++++ 2 files changed, 38 insertions(+) create mode 100644 src/Components/WeatherComponent.jsx diff --git a/src/App.js b/src/App.js index 3784575..24614ce 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,6 @@ import logo from './logo.svg'; import './App.css'; +import WeatherComponent from './Components/WeatherComponent'; function App() { return ( @@ -18,6 +19,7 @@ function App() { Learn React + ); } diff --git a/src/Components/WeatherComponent.jsx b/src/Components/WeatherComponent.jsx new file mode 100644 index 0000000..9cd8b30 --- /dev/null +++ b/src/Components/WeatherComponent.jsx @@ -0,0 +1,36 @@ +import React from 'react'; + +// API key: 70d415361464c75295b5f22c9849e8c3 +// let lat = ? +// let long = ? + +// api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API key} +// api.openweathermap.org/data/2.5/weather?lat=39.770639&lon=-86.285116&appid=70d415361464c75295b5f22c9849e8c3 + +// Your location coordinates: +// Weather: +// Description: +// Temperature: +// Feels like: +// Air pressure: +// Humidity: +// Wind speed: + +const Weather = (props) => { + + let key = "70d415361464c75295b5f22c9849e8c3"; + let lat = props.lat; + let lon = props.lon; + let url = `api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${key}`; + + + // TODO: FETCH HERE + + return( +
+ +
+ ); +} + +export default Weather; \ No newline at end of file From ede0f24ed02e43dddf54e2f054547d01c434338e Mon Sep 17 00:00:00 2001 From: ashtonsprunger Date: Mon, 26 Oct 2020 16:57:10 -0400 Subject: [PATCH 02/21] ashton-10/26 --- src/App.js | 25 +++++------------------ src/Components/NasaComponent.jsx | 34 ++++++++++++++++++++++++++++++++ src/index.js | 12 +++++------ 3 files changed, 45 insertions(+), 26 deletions(-) diff --git a/src/App.js b/src/App.js index 3784575..b2fb71f 100644 --- a/src/App.js +++ b/src/App.js @@ -1,25 +1,10 @@ -import logo from './logo.svg'; -import './App.css'; +import "./App.css"; +import "bootstrap/dist/css/bootstrap.css"; + +import NasaComponent from "./Components/NasaComponent"; function App() { - return ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
- ); + return ; } export default App; diff --git a/src/Components/NasaComponent.jsx b/src/Components/NasaComponent.jsx index e69de29..015d6f5 100644 --- a/src/Components/NasaComponent.jsx +++ b/src/Components/NasaComponent.jsx @@ -0,0 +1,34 @@ +import React, { useEffect, useState } from "react"; +import { Button } from "reactstrap"; + +const NasaComponent = (props) => { + const [imageUrl, setImageUrl] = useState( + "https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif" + ); + // const [latitude, setLatitude] = useState(props.latitude); + // const [longitude, setLongitude] = useState(props.longitude); + const apiKey = "Wy1wADvYUr6cNdNhe7aFJzcWT9Zk9J5hyEbIPuR4"; + const baseUrl = "https://api.nasa.gov/planetary/earth/imagery"; + + let url = `${baseUrl}?lon=${props.lon}&lat=${ + props.lat + }&api_key=${apiKey}&dim=${0.03}`; + + const getImage = () => { + fetch(url).then((response) => setImageUrl(response.url)); + }; + + useEffect(getImage, []); + + return ( +
+ location image +
+ ); +}; + +export default NasaComponent; diff --git a/src/index.js b/src/index.js index ef2edf8..ad9cbbb 100644 --- a/src/index.js +++ b/src/index.js @@ -1,14 +1,14 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import './index.css'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; +import React from "react"; +import ReactDOM from "react-dom"; +import "./index.css"; +import App from "./App"; +import reportWebVitals from "./reportWebVitals"; ReactDOM.render( , - document.getElementById('root') + document.getElementById("root") ); // If you want to start measuring performance in your app, pass a function From d0681a62d56d4a56cc273777df5c05b88c7cd4f3 Mon Sep 17 00:00:00 2001 From: afrankowork Date: Mon, 26 Oct 2020 19:59:55 -0400 Subject: [PATCH 03/21] fix .jsx --- src/App.css | 62 +++++++++++++++++++++++++++++++++++++++++++++++++++++ src/App.js | 43 ++++++++++++++++++++++++++++++++++--- 2 files changed, 102 insertions(+), 3 deletions(-) diff --git a/src/App.css b/src/App.css index 74b5e05..7dff7f5 100644 --- a/src/App.css +++ b/src/App.css @@ -36,3 +36,65 @@ transform: rotate(360deg); } } + +.switch { + position: relative; + display: inline-block; + width: 60px; + height: 34px; +} + +/* Hide default HTML checkbox */ +.switch input { + opacity: 0; + width: 0; + height: 0; +} + +/* The slider */ +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: .4s; + transition: .4s; +} + +.slider:before { + position: absolute; + content: ""; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: white; + -webkit-transition: .4s; + transition: .4s; +} + +input:checked + .slider { + background-color: #2196F3; +} + +input:focus + .slider { + box-shadow: 0 0 1px #2196F3; +} + +input:checked + .slider:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); +} + +/* Rounded sliders */ +.slider.round { + border-radius: 34px; +} + +.slider.round:before { + border-radius: 50%; +} diff --git a/src/App.js b/src/App.js index b2fb71f..0b7e7ee 100644 --- a/src/App.js +++ b/src/App.js @@ -1,10 +1,47 @@ import "./App.css"; import "bootstrap/dist/css/bootstrap.css"; - +import React, {useState, useEffect} from 'react' import NasaComponent from "./Components/NasaComponent"; -function App() { - return ; +unction App() { + + const [latitude, setLatitude] = useState(''); + const [longitude, setLongitude] = useState(''); + const [temperatureType, setTemperature] = useState(''); + useEffect(() => { + if(navigator.geolocation) { + navigator.geolocation.getCurrentPosition(showPosition) + } + }, []) + + const showPosition = (position) => { + setLatitude(position.coords.latitude); + setLongitude(position.coords.longitude); + + } + + const setTemperatureType = (event) => { + if(event.target.value == 'on') { + setTemperature(true); + console.log('f') + } + } + + +return ( +
+

{latitude}

+

{longitude}

+

{temperatureType}

+
+ +
+
+ ); } export default App; From c013d391e5ec591f4d4813b5bb0c885f5d9b15a8 Mon Sep 17 00:00:00 2001 From: Addy Monger Date: Mon, 26 Oct 2020 20:00:51 -0400 Subject: [PATCH 04/21] addy 10/26 --- src/Components/FoodComponent.jsx | 37 ++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 src/Components/FoodComponent.jsx diff --git a/src/Components/FoodComponent.jsx b/src/Components/FoodComponent.jsx new file mode 100644 index 0000000..0ee1831 --- /dev/null +++ b/src/Components/FoodComponent.jsx @@ -0,0 +1,37 @@ +import React from 'react'; + + +const Food = (props) => { + + let apiKey = "Wy1wADvYUr6cNdNhe7aFJzcWT9Zk9J5hyEbIPuR4"; + let latitude = props.latitude; + let longitude = props.longitude; + let url = `https://developers.zomato.com/api/v2.1/search?lat=${latitude}&lon=${longitude}&appikey=${apiKey}`; + +}; + +getLocation(); + + navigator.geolocation.getCurrentPosition ( + (position) => { + console.log("Latitude is :", position .coords.latitude); + console.log("Longitude is :", position.coords.longitude); + this.setState({ + latitude: position.coords.latitude, + longitude: position.coords.longitude + }) + this.Food(); + }, + function(error) { + console.error("Error code =" + error.code + "-" + error.message); + }, + { + enableHighAccuracy: false, + timeout: 10000 + } + + ); + + + +export default Food; From c906fc0f055c26ba88f3bdb3818ebf3d7fd80ce0 Mon Sep 17 00:00:00 2001 From: Jonathan Ingersoll Date: Mon, 26 Oct 2020 20:09:50 -0400 Subject: [PATCH 05/21] Adding Fetch stuff and useState variables to weather component --- src/Components/WeatherComponent.jsx | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/src/Components/WeatherComponent.jsx b/src/Components/WeatherComponent.jsx index 9cd8b30..dfcc276 100644 --- a/src/Components/WeatherComponent.jsx +++ b/src/Components/WeatherComponent.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; // API key: 70d415361464c75295b5f22c9849e8c3 // let lat = ? @@ -18,13 +18,25 @@ import React from 'react'; const Weather = (props) => { - let key = "70d415361464c75295b5f22c9849e8c3"; + const key = "70d415361464c75295b5f22c9849e8c3"; let lat = props.lat; let lon = props.lon; let url = `api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${key}`; - - // TODO: FETCH HERE + const [ weather, setWeather ] = useState(''); + const [ description, setDescription] = useState(''); + const [ temperature, setTemperature] = useState(''); + const [ feels, setFeels ] = useState(''); + const [ pressure, setPressure ] = useState(''); + const [ humidity, setHumidity ] = useState(''); + const [ windSpeed, setWindSpeed ] = useState(''); + + const weather = () = { + fetch(url).then((res) => { + setWeather(res.weather.main) + setDescription(res.weather.description) + }) + } return(
From 103af1e0d6ee354bea106a8e70f07e6cd490de36 Mon Sep 17 00:00:00 2001 From: Jonathan Ingersoll Date: Mon, 26 Oct 2020 20:31:58 -0400 Subject: [PATCH 06/21] Weather GET Fetch cleaned up --- src/Components/WeatherComponent.jsx | 47 ++++++++++++++++++++--------- 1 file changed, 33 insertions(+), 14 deletions(-) diff --git a/src/Components/WeatherComponent.jsx b/src/Components/WeatherComponent.jsx index dfcc276..9a12f24 100644 --- a/src/Components/WeatherComponent.jsx +++ b/src/Components/WeatherComponent.jsx @@ -1,4 +1,8 @@ import React, { useState, useEffect } from 'react'; +import { + Col, + Row +} from 'reactstrap'; // API key: 70d415361464c75295b5f22c9849e8c3 // let lat = ? @@ -7,15 +11,6 @@ import React, { useState, useEffect } from 'react'; // api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API key} // api.openweathermap.org/data/2.5/weather?lat=39.770639&lon=-86.285116&appid=70d415361464c75295b5f22c9849e8c3 -// Your location coordinates: -// Weather: -// Description: -// Temperature: -// Feels like: -// Air pressure: -// Humidity: -// Wind speed: - const Weather = (props) => { const key = "70d415361464c75295b5f22c9849e8c3"; @@ -23,7 +18,6 @@ const Weather = (props) => { let lon = props.lon; let url = `api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${key}`; - const [ weather, setWeather ] = useState(''); const [ description, setDescription] = useState(''); const [ temperature, setTemperature] = useState(''); const [ feels, setFeels ] = useState(''); @@ -31,16 +25,41 @@ const Weather = (props) => { const [ humidity, setHumidity ] = useState(''); const [ windSpeed, setWindSpeed ] = useState(''); - const weather = () = { + const getWeather = () => { fetch(url).then((res) => { - setWeather(res.weather.main) - setDescription(res.weather.description) + setDescription(res.weather.description); + setTemperature(res.main.temp); + setFeels(res.main.feels_like); + setPressure(res.main.pressure); + setHumidity(res.main.humidity); + setWindSpeed(res.wind.windSpeed); }) } + useEffect(getWeather, []); + return(
- + + + Current weather: {description} + + + Temperature: {temperature} + + + Feels like: {feels} + + + Air pressure: {pressure} + + + Humidity: {humidity} + + + Wind speed: {windSpeed} + +
); } From a9add24180eac34e8f60f268185954044fe63256 Mon Sep 17 00:00:00 2001 From: afrankowork Date: Mon, 26 Oct 2020 20:36:39 -0400 Subject: [PATCH 07/21] added layout --- src/{App.js => App.jsx} | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) rename src/{App.js => App.jsx} (68%) diff --git a/src/App.js b/src/App.jsx similarity index 68% rename from src/App.js rename to src/App.jsx index 0b7e7ee..44c5b94 100644 --- a/src/App.js +++ b/src/App.jsx @@ -3,10 +3,10 @@ import "bootstrap/dist/css/bootstrap.css"; import React, {useState, useEffect} from 'react' import NasaComponent from "./Components/NasaComponent"; -unction App() { +function App() { - const [latitude, setLatitude] = useState(''); - const [longitude, setLongitude] = useState(''); + const [lat, setLatitude] = useState(''); + const [lon, setLongitude] = useState(''); const [temperatureType, setTemperature] = useState(''); useEffect(() => { if(navigator.geolocation) { @@ -30,9 +30,18 @@ unction App() { return (
-

{latitude}

-

{longitude}

-

{temperatureType}

+

Welcome to ajaa

 + +

Lat: {lat}

+

Lon: {lon}

+ + + + + + + +