· 5 years ago · Nov 01, 2020, 02:34 AM
1// import logo from './logo.svg';
2
3import './App.css';
4import React from 'react'
5import NavBar from './components/NavBar';
6// import 'bootstrap/dist/css/bootstrap.min.css';
7// import Cards from './components/Prayertimes';
8import ParticleContainer from './components/ParticleContainer';
9import Containers from './components/Containers'
10
11
12import Axios from 'axios';
13
14
15const key_api = '7e8f249b6b0a8c12bf5aa8d0f114e7a5'
16class App extends React.Component{
17
18
19 state = {
20 coords:{
21 latitude:43,
22 longitude:200
23 }
24
25 }
26
27 componentDidMount() {
28 if(navigator.geolocation)
29 {
30
31 // get latitude and longitude
32 navigator.geolocation.getCurrentPosition((position) => {
33 // console.log(position.coords.latitude);
34 // console.log("successfull");
35
36 let newCoords = {
37 latitude:position.coords.latitude,
38 longitude:position.coords.longitude
39 }
40
41 var mylat = position.coords.latitude;
42 var mylon = position.coords.longitude;
43
44 this.setState({coords:newCoords});
45 console.log({mylat}, {mylon})
46
47 // CAll the API key
48
49
50
51 // let urlkey = 'http://api.openweathermap.org/data/2.5/weather?lat={mylat}&lon={mylon}&appid=7e8f249b6b0a8c12bf5aa8d0f114e7a5'
52
53 Axios.get('http://api.openweathermap.org/data/2.5/weather?lat={mylat}&lon={mylon}&appid=7e8f249b6b0a8c12bf5aa8d0f114e7a5').
54 then(res => {
55 console.log(res)
56 })
57
58
59 })
60 }
61
62 else{
63 console.log('unsupported');
64 }
65
66 }
67 // componentDidMount(){
68 // if(navigator.geolocation){
69 // // console.log("supported");
70 // navigator.geolocation.getCurrentPosition((position) =>
71 // console.log(position.coords.latitude)
72
73
74 // )
75 // }
76 // else{
77 // console.log('unsupported');
78 // }
79 // }
80
81 // }
82 render() {
83 return(
84
85 <div className="App">
86 <ParticleContainer/>
87 <NavBar/>
88 <Containers/>
89
90 </div>
91
92 );
93 }
94
95}
96
97
98export default App;
99