Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
Karakas
SWP_SS24_Wetterdaten_sammeln
Commits
f1792a8c
Commit
f1792a8c
authored
Jun 09, 2024
by
EnesKarakas
Browse files
dw
parent
143f1062
Changes
2
Hide whitespace changes
Inline
Side-by-side
frontend/src/components/weather/currentData.css
View file @
f1792a8c
.filter
label
{
display
:
block
;
margin-bottom
:
5px
;
}
.filter
input
[
type
=
"text"
],
.filter
select
{
width
:
100%
;
padding
:
8px
;
margin-bottom
:
10px
;
border
:
1px
solid
#ccc
;
border-radius
:
5px
;
}
.filter
button
{
padding
:
10px
20px
;
background-color
:
var
(
--dl-color-theme-primary1
);
color
:
#fff
;
border
:
none
;
border-radius
:
5px
;
cursor
:
pointer
;
transition
:
background-color
0.3s
;
}
.filter
button
:hover
{
background-color
:
var
(
--dl-color-theme-primary2
);
}
.output
{
margin-top
:
40px
;
}
.checkBoxFilter
{
margin-bottom
:
10px
;
}
#weatherData
{
white-space
:
pre-wrap
;
/* Umbruch von langen Zeilen */
}
#apiUrl
{
margin-top
:
50px
;
}
#apiUrloutput
{
width
:
1250px
;
}
\ No newline at end of file
display
:
block
;
margin-bottom
:
5px
;
}
.filter
input
[
type
=
"text"
],
.filter
select
{
width
:
100%
;
padding
:
8px
;
margin-bottom
:
10px
;
border
:
1px
solid
#ccc
;
border-radius
:
5px
;
}
.filter
button
{
padding
:
10px
20px
;
background-color
:
var
(
--dl-color-theme-primary1
);
color
:
#fff
;
border
:
none
;
border-radius
:
5px
;
cursor
:
pointer
;
transition
:
background-color
0.3s
;
}
.filter
button
:hover
{
background-color
:
var
(
--dl-color-theme-primary2
);
}
.output
{
margin-top
:
40px
;
}
.checkBoxFilter
{
margin-bottom
:
10px
;
}
#weatherData
{
white-space
:
pre-wrap
;
/* Umbruch von langen Zeilen */
}
#apiUrl
{
margin-top
:
50px
;
}
#apiUrloutput
{
width
:
1250px
;
}
.list-container
{
width
:
300px
;
margin
:
20px
auto
;
font-family
:
Arial
,
sans-serif
;
}
.list-item
{
border
:
1px
solid
#ccc
;
margin
:
10px
0
;
padding
:
10px
;
border-radius
:
5px
;
transition
:
background-color
0.3s
;
cursor
:
pointer
;
}
.list-item
:hover
{
background-color
:
#f0f0f0
;
}
.title
{
font-size
:
18px
;
font-weight
:
bold
;
}
.subtitle
{
font-size
:
14px
;
color
:
#666
;
}
.APIButton
{
display
:
block
;
margin
:
10px
auto
;
padding
:
10px
20px
;
font-size
:
16px
;
cursor
:
pointer
;
}
frontend/src/components/weather/currentData.js
View file @
f1792a8c
import
React
from
"
react
"
;
import
React
,
{
useState
}
from
"
react
"
;
import
"
./currentData.css
"
;
const
Currentdata
=
(
props
)
=>
{
const
[
query
,
setQuery
]
=
useState
(
""
);
const
[
data
,
setData
]
=
useState
([]);
const
handleInputChange
=
(
e
)
=>
{
setQuery
(
e
.
target
.
value
);
if
(
e
.
target
.
value
.
trim
()
!==
""
)
{
searchAPI
(
e
.
target
.
value
.
trim
());
}
};
return
(
<
div
className
=
"
home-container
"
>
<
div
>
<
div
className
=
"
thq-grid-5
"
>
<
div
class
=
"
filter
"
>
<
label
for
=
"
location
"
>
Location
:
<
/label
>
<
input
type
=
"
text
"
id
=
"
city_text
"
placeholder
=
"
Location
"
/>
<
br
/>
<
label
for
=
"
region
"
>
Region
:
<
/label
>
<
input
type
=
"
text
"
id
=
"
region_text
"
placeholder
=
"
Region
"
/>
<
br
/>
<
label
>
Country
:
<
/label
>
<
input
type
=
"
text
"
id
=
"
country_text
"
placeholder
=
"
Country
"
/>
<
br
/>
<
label
>
Latitude
:
<
/label
>
<
input
type
=
"
text
"
id
=
"
latitude_text
"
placeholder
=
"
Latitude
"
/>
<
label
>
Longitude
:
<
/label
>
<
input
type
=
"
text
"
id
=
"
longitude_text
"
placeholder
=
"
Longitude
"
/>
<
br
/>
<
/div
>
<
div
>
<
input
type
=
"
checkbox
"
id
=
"
name
"
className
=
"
checkBoxFilter
"
/>
<
label
>
City
Name
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
region
"
className
=
"
checkBoxFilter
"
/>
<
label
>
Region
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
country
"
className
=
"
checkBoxFilter
"
/>
<
label
>
Country
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
lon
"
className
=
"
checkBoxFilter
"
/>
<
label
>
Longitude
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
lat
"
className
=
"
checkBoxFilter
"
/>
<
label
>
Latitude
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
tz_id
"
className
=
"
checkBoxFilter
"
/>
<
label
>
Timezone
Id
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
localtime_epoch
"
className
=
"
checkBoxFilter
"
/>
<
label
>
Localtime
Epoch
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
localtime
"
className
=
"
checkBoxFilter
"
/>
<
label
>
Localtime
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
last_updated_epoch
"
className
=
"
checkBoxFilter
"
/>
<
label
>
Last
Updated
Epoch
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
last_updated
"
className
=
"
checkBoxFilter
"
/>
<
label
>
Last
Updated
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
temp_c
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
temp_c
"
>
Temp
C
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
temp_f
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
temp_f
"
>
Temp
F
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
id_day
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
id_day
"
>
ID
Day
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
condition_text
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
condition_text
"
>
Condition
Text
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
condition_icon
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
condition_icon
"
>
Condition
Icon
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
condition_code
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
condition_code
"
>
Condition
Code
<
/label
>
<
input
type
=
"
checkbox
"
id
=
"
wind
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
wind
"
>
Wind
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
wind_degree
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
wind_degree
"
>
Wind
Degree
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
wind_dir
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
wind_dir
"
>
Wind
Direction
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
pressure
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
pressure
"
>
Pressure
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
precip
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
precip
"
>
Precip
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
humidity
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
humidity
"
>
Humidity
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
cloud
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
cloud
"
>
Cloud
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
feelslike
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
feelslike
"
>
Feelslike
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
windchill
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
windchill
"
>
Windchill
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
heatindex
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
heatindex
"
>
Heatindex
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
dewpoint
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
dewpoint
"
>
Dewpoint
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
vis
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
vis
"
>
Visibility
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
uv
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
uv
"
>
UV
Index
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
gust
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
gust
"
>
Gust
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
air_quality_co
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
air_quality_co
"
>
Air
Quality
CO
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
air_quality_no2
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
air_quality_no2
"
>
Air
Quality
NO2
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
air_quality_o3
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
air_quality_o3
"
>
Air
Quality
O3
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
air_quality_so2
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
air_quality_so2
"
>
Air
Quality
SO2
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
air_quality_pm2_5
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
air_quality_pm2_5
"
>
Air
Quality
PM2
.
5
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
air_quality_pm10
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
air_quality_pm10
"
>
Air
Quality
PM10
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
air_quality_us_epa_index
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
air_quality_us_epa_index
"
>
US
EPA
Index
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
air_quality_gb_defra_index
"
className
=
"
checkBoxFilter
"
<
div
className
=
"
thq-grid-3
"
>
<
div
class
=
"
filter
"
>
<
label
htmlFor
=
"
location
"
>
Location
:
<
/label
>
<
input
type
=
"
text
"
id
=
"
city_text
"
placeholder
=
"
Location
"
value
=
{
query
}
onChange
=
{
handleInputChange
}
/
>
{
data
.
map
((
item
)
=>
(
<
ListItem
key
=
{
item
.
id
}
name
=
{
item
.
name
}
country
=
{
item
.
country
}
region
=
{
item
.
region
}
lat
=
{
item
.
lat
}
lon
=
{
item
.
lon
}
/
>
<
label
for
=
"
air_quality_gb_defra_index
"
>
GB
DEFRA
Index
<
/label
>
<
br
/>
<
div
>
<
button
className
=
"
thq-button-filled
"
onClick
=
{
getData
}
>
Generate
<
/button
>
<
/div
>
<
br
/>
<
div
class
=
"
output
"
>
<
h2
>
Output
:
<
/h2
>
<
br
/>
<
pre
id
=
"
weatherData
"
><
/pre
>
<
/div
>
<
div
id
=
"
apiUrl
"
>
<
label
>
API
URL
:
<
/label
>
<
br
/>
<
input
className
=
"
input
"
type
=
"
text
"
id
=
"
apiUrloutput
"
readOnly
/>
<
/div
>
<
button
className
=
"
APIButton
"
onClick
=
{
searchAPI
}
>
City
api
))}
<
br
/>
<
label
for
=
"
region
"
>
Region
:
<
/label
>
<
input
type
=
"
text
"
id
=
"
region_text
"
placeholder
=
"
Region
"
/>
<
br
/>
<
label
>
Country
:
<
/label
>
<
input
type
=
"
text
"
id
=
"
country_text
"
placeholder
=
"
Country
"
/>
<
br
/>
<
label
>
Latitude
:
<
/label
>
<
input
type
=
"
text
"
id
=
"
latitude_text
"
placeholder
=
"
Latitude
"
/>
<
label
>
Longitude
:
<
/label
>
<
input
type
=
"
text
"
id
=
"
longitude_text
"
placeholder
=
"
Longitude
"
/>
<
br
/>
<
/div
>
<
div
>
<
input
type
=
"
checkbox
"
id
=
"
name
"
className
=
"
checkBoxFilter
"
/>
<
label
>
City
Name
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
region
"
className
=
"
checkBoxFilter
"
/>
<
label
>
Region
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
country
"
className
=
"
checkBoxFilter
"
/>
<
label
>
Country
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
lon
"
className
=
"
checkBoxFilter
"
/>
<
label
>
Longitude
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
lat
"
className
=
"
checkBoxFilter
"
/>
<
label
>
Latitude
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
tz_id
"
className
=
"
checkBoxFilter
"
/>
<
label
>
Timezone
Id
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
localtime_epoch
"
className
=
"
checkBoxFilter
"
/>
<
label
>
Localtime
Epoch
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
localtime
"
className
=
"
checkBoxFilter
"
/>
<
label
>
Localtime
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
last_updated_epoch
"
className
=
"
checkBoxFilter
"
/>
<
label
>
Last
Updated
Epoch
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
last_updated
"
className
=
"
checkBoxFilter
"
/>
<
label
>
Last
Updated
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
temp_c
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
temp_c
"
>
Temp
C
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
temp_f
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
temp_f
"
>
Temp
F
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
id_day
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
id_day
"
>
ID
Day
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
condition_text
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
condition_text
"
>
Condition
Text
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
condition_icon
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
condition_icon
"
>
Condition
Icon
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
condition_code
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
condition_code
"
>
Condition
Code
<
/label
>
<
input
type
=
"
checkbox
"
id
=
"
wind
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
wind
"
>
Wind
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
wind_degree
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
wind_degree
"
>
Wind
Degree
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
wind_dir
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
wind_dir
"
>
Wind
Direction
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
pressure
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
pressure
"
>
Pressure
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
precip
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
precip
"
>
Precip
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
humidity
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
humidity
"
>
Humidity
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
cloud
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
cloud
"
>
Cloud
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
feelslike
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
feelslike
"
>
Feelslike
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
windchill
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
windchill
"
>
Windchill
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
heatindex
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
heatindex
"
>
Heatindex
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
dewpoint
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
dewpoint
"
>
Dewpoint
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
vis
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
vis
"
>
Visibility
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
uv
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
uv
"
>
UV
Index
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
gust
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
gust
"
>
Gust
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
air_quality_co
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
air_quality_co
"
>
Air
Quality
CO
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
air_quality_no2
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
air_quality_no2
"
>
Air
Quality
NO2
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
air_quality_o3
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
air_quality_o3
"
>
Air
Quality
O3
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
air_quality_so2
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
air_quality_so2
"
>
Air
Quality
SO2
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
air_quality_pm2_5
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
air_quality_pm2_5
"
>
Air
Quality
PM2
.
5
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
air_quality_pm10
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
air_quality_pm10
"
>
Air
Quality
PM10
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
air_quality_us_epa_index
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
air_quality_us_epa_index
"
>
US
EPA
Index
<
/label
>
<
br
/>
<
input
type
=
"
checkbox
"
id
=
"
air_quality_gb_defra_index
"
className
=
"
checkBoxFilter
"
/>
<
label
for
=
"
air_quality_gb_defra_index
"
>
GB
DEFRA
Index
<
/label
>
<
br
/>
<
div
>
<
button
className
=
"
thq-button-filled
"
onClick
=
{
getData
}
>
Generate
<
/button
>
<
/div
>
<
br
/>
<
div
class
=
"
output
"
>
<
h2
>
Output
:
<
/h2
>
<
br
/>
<
pre
id
=
"
weatherData
"
><
/pre
>
<
/div
>
<
div
id
=
"
apiUrl
"
>
<
label
>
API
URL
:
<
/label
>
<
br
/>
<
input
className
=
"
input
"
type
=
"
text
"
id
=
"
apiUrloutput
"
readOnly
/>
<
/div
>
<
br
/>
<
br
/>
<
/div
>
<
/div
>
<
/div
>
...
...
@@ -424,10 +437,9 @@ const Currentdata = (props) => {
});
}
function
searchAPI
()
{
const
cityInput
=
document
.
getElementById
(
"
city
"
).
value
;
const
cityInput
=
document
.
getElementById
(
"
city
_text
"
).
value
;
const
apiKey
=
"
1244099aeaee4b179e6111803241304
"
;
const
apiUrl
=
`https://api.weatherapi.com/v1/search.json?key=
${
apiKey
}
&q=
${
cityInput
}
`
;
const
apiUrl
=
`http://localhost:8080/search?city=
${
cityInput
}
`
;
fetch
(
apiUrl
)
.
then
((
response
)
=>
{
...
...
@@ -438,12 +450,7 @@ const Currentdata = (props) => {
return
response
.
json
();
})
.
then
((
data
)
=>
{
// Wetterdaten anzeigen
document
.
getElementById
(
"
weatherData
"
).
innerText
=
JSON
.
stringify
(
data
,
null
,
2
);
setData
(
data
);
})
.
catch
((
error
)
=>
{
console
.
error
(
"
There was a problem with the fetch operation:
"
,
error
);
...
...
@@ -455,4 +462,21 @@ const Currentdata = (props) => {
}
};
const
ListItem
=
({
name
,
country
,
region
,
lat
,
lon
})
=>
{
const
handleClick
=
()
=>
{
alert
(
`Element geklickt:
${
name
}
`
);
};
return
(
<
div
className
=
"
list-item
"
onClick
=
{
handleClick
}
>
<
div
className
=
"
title
"
>
{
name
}
<
/div
>
<
div
className
=
"
subtitle
"
>
Country
:
{
country
}
<
br
/>
Region
:
{
region
}
<
br
/>
Lat
:
{
lat
},
Lon
:
{
lon
}
<
/div
>
<
/div
>
);
};
export
default
Currentdata
;
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment