diff --git a/.gitignore b/.gitignore index 4d29575..302b697 100644 --- a/.gitignore +++ b/.gitignore @@ -17,6 +17,7 @@ .env.development.local .env.test.local .env.production.local +*.env npm-debug.log* yarn-debug.log* diff --git a/src/App.css b/src/App.css index 74b5e05..7413559 100644 --- a/src/App.css +++ b/src/App.css @@ -36,3 +36,79 @@ 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: 0.4s; + transition: 0.4s; +} + +.slider:before { + position: absolute; + content: ""; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: white; + -webkit-transition: 0.4s; + transition: 0.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%; +} + +#head-row { + background-color: lightblue; + padding: 10px; +} + +#weather { + padding: 15px; + text-align: center; +} + +.weather-row { + text-align: center; +} diff --git a/src/App.js b/src/App.js index 3784575..7ffd3b9 100644 --- a/src/App.js +++ b/src/App.js @@ -1,23 +1,56 @@ -import logo from './logo.svg'; -import './App.css'; +import "./App.css"; +import "bootstrap/dist/css/bootstrap.css"; +import React, { useState, useEffect } from "react"; +import { Row, Col } from "reactstrap"; +import NasaComponent from "./Components/NasaComponent"; +import FoodComponent from "./Components/FoodComponent"; +import WeatherComponent from "./Components/WeatherComponent"; function App() { + const [lat, setLatitude] = useState(""); + const [lon, setLongitude] = useState(""); + + useEffect(() => { + if (navigator.geolocation) { + navigator.geolocation.getCurrentPosition(showPosition); + } + }, []); + + const showPosition = (position) => { + setLatitude(position.coords.latitude); + setLongitude(position.coords.longitude); + }; + return ( -
-
- logo -

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

- - Learn React - -
+
+ + +

Welcome to ajaa

+ + + + +

Lat: {lat}

+ + +

Lon: {lon}

+ + + + {lat && lon ? ( + <> + + + + + + + + + + + ) : null} +
); } diff --git a/src/Components/FoodComponent.jsx b/src/Components/FoodComponent.jsx new file mode 100644 index 0000000..3ab6a83 --- /dev/null +++ b/src/Components/FoodComponent.jsx @@ -0,0 +1,53 @@ +import React, { useState, useEffect } from "react"; +import { Table } from "reactstrap"; + +const FoodComponent = (props) => { + let apiKey = "61e3f579285d6f2b7d90dac41a2fdfd9"; + let lat = props.lat; + let lon = props.lon; + const [restNames, setRestNames] = useState([]); + + useEffect(() => { + fetch( + `https://developers.zomato.com/api/v2.1/geocode?lat=${lat}&lon=${lon}`, + { headers: { "user-key": apiKey, Accept: "application/json" } } + ) + .then((response) => { + return response.json(); + }) + .then((json) => { + console.log(json); + json.nearby_restaurants.forEach((restaurant) => { + setRestNames((restNames) => [...restNames, restaurant.restaurant]); + }); + }); + }, []); + const restMapper = () => { + return restNames.map((restaurant, index) => { + return ( + + + {index + 1} + {restaurant.name} + {restaurant.cuisines} + + + ); + }); + }; + return ( +
+

Restuarants Near You!

+ + + + + + + + {restMapper()} +
NameType
+
+ ); +}; +export default FoodComponent; diff --git a/src/Components/NasaComponent.jsx b/src/Components/NasaComponent.jsx index e69de29..9e08fde 100644 --- a/src/Components/NasaComponent.jsx +++ b/src/Components/NasaComponent.jsx @@ -0,0 +1,41 @@ +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 = () => { + console.log("lat:", props.lat); + console.log("lon:", props.lon); + console.log("url:", url); + fetch(url).then((response) => { + setImageUrl(response.url); + console.log("response:", response); + }); + }; + + useEffect(getImage, []); + + return ( +
+

You are here!

+ location image +
+ ); +}; + +export default NasaComponent; diff --git a/src/Components/WeatherComponent.jsx b/src/Components/WeatherComponent.jsx new file mode 100644 index 0000000..0678905 --- /dev/null +++ b/src/Components/WeatherComponent.jsx @@ -0,0 +1,87 @@ +import React, { useState, useEffect } from "react"; +import { Button, Col, Row } from "reactstrap"; + +const Weather = (props) => { + console.log(props.lat, props.lon); + + const [description, setDescription] = useState(""); + const [temperature, setTemperature] = useState(""); + const [pressure, setPressure] = useState(""); + const [humidity, setHumidity] = useState(""); + const [windSpeed, setWindSpeed] = useState(""); + const [units, setUnits] = useState("units=imperial"); + const [butText, setButText] = useState("Switch to Metric"); + + const key = "70d415361464c75295b5f22c9849e8c3"; + let url = `https://api.openweathermap.org/data/2.5/weather?lat=${props.lat}&lon=${props.lon}&appid=${key}&${units}`; + + const getWeather = () => { + fetch(url) + .then((res) => res.json()) + .then((data) => { + setDescription(data.weather[0].description); + setTemperature(data.main.temp); + setPressure(data.main.pressure); + setHumidity(data.main.humidity); + setWindSpeed(data.wind.speed); + }); + }; + + useEffect(getWeather, [units]); + + const changeUnits = (e) => { + if (units == "units=metric") { + setUnits("units=imperial"); + setButText("Switch to Metric"); + } else { + setUnits("units=metric"); + setButText("Switch to Imperial"); + } + }; + + return ( + <> +

Current Weather

+ + Set Imperial (default) or Metric: + +
+ +
+ + + + + Current weather: + {description} + + + + + Temperature: + {temperature} + + + + + Air pressure: + {pressure} + + + + + Humidity: + {humidity}% + + + + + Wind speed: + {windSpeed} + + + + ); +}; + +export default Weather; 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