Página de pruebas 3

import React from 'react';

import WeatherIcon from '../components/WeatherIcon';
import {platform} from 'onsenui';

import {
    Page,
    ProgressCircular
  } from 'react-onsenui';

import {
    IonButtons,
    IonCard,
    IonCardContent,
    IonCardHeader,
    IonCardSubtitle,
    IonCardTitle,
    IonContent,
    IonHeader,
    IonIcon,
    IonItem,
    IonLabel,
    IonList,
    IonListHeader,
    IonMenuButton,
    IonPage,
    IonTitle,
    IonToolbar
    } from '@ionic/react';


const name: React.CSSProperties =  {
    textTransform: 'uppercase',
    fontSize: '24px',
    lineHeight: '24px'
}

const styles = {
    main: {
        fontFamily: platform.isIOS() ? 'Lato' : null,
        textAlign: 'center',
        color: '#4a4a4a',
        width: '100%',
        marginTop: '30px'
    } as React.CSSProperties,
    invalid: {
        color: 'red',
        fontSize: '20px'
    } as React.CSSProperties,
    progress: {
        width: '50px',
        height: '50px'
    } as React.CSSProperties,
    name: {
        textTransform: 'uppercase',
        fontSize: '24px',
        lineHeight: '24px'
    } as React.CSSProperties,
    country: {
        margin: '2px 0 0 0',
        textTransform: 'uppercase',
        fontSize: '12px',
        lineHeight: '12px'
    } as React.CSSProperties,
    icon: {
        fontSize: '100px',
        margin: '20px 0 0px 0'
    } as React.CSSProperties,
    data: {
        fontSize: '40px',
        fontWeight: 300,
        display: 'flex',
        margin: '40px 25px'
    } as React.CSSProperties,
    dataColumn: {
        flexGrow: 1,
        display: 'flex',
        flexDirection: 'column'
    } as React.CSSProperties,
    dataValue: {
        fontSize: '60px'
    } as React.CSSProperties,
    dataCaption: {
        fontSize: '14px',
        fontWeight: 400
    } as React.CSSProperties
};


interface Home2Props{

}

interface Home2State{
    result: any;
    num1: string;
    num2: string
}

export default class Home2 extends React.Component<Home2Props, Home2State> {
    public constructor(props: Home2Props){
        super(props)
        this.state = {
            result: "",
            num1: "",
            num2: ""
        };
    }
    public render(){
        return (
            <IonPage>
                <IonHeader>
                    <IonToolbar>
                        <IonButtons slot="start">
                        <IonMenuButton />
                        </IonButtons>
                        <IonTitle>Home1</IonTitle>
                    </IonToolbar>
                </IonHeader>
                <IonContent>
                    <IonCard className="welcome-card">
                        <img src="https://www.fodors.com/wp-content/uploads/2018/10/HERO_UltimateParis_Heroshutterstock_112137761.jpg" alt=""/>
                        <IonCardHeader>
                            <IonCardTitle>Paris</IonCardTitle>
                            <IonCardSubtitle>France</IonCardSubtitle>
                        </IonCardHeader>
                        <IonCardContent>
                            <div>
                                <input
                                    type="string"
                                    value={this.state.num1}
                                    onChange={e => this._onTodoChangeInput1(e.target.value)}
                                />
                                <input
                                    type="string"
                                    value={this.state.num2}
                                    onChange={e => this._onTodoChangeInput2(e.target.value)}
                                />
                                <button onClick={() => this._add()}>Add</button>
                                <div> {this.state.result} </div>
                                <Page>
                                <div style={styles.main}>
                                    <div style={styles.name}>
                                        Name
                                        {/* {name} */}
                                    </div>

                                    <div style={styles.country}>
                                        NAME
                                        {/* {countries[country.toUpperCase()].name} */}
                                    </div>

                                    <div style={{...styles.icon}}>
                                        <i  className="wi wi-owm-540" />
                                        {/* <WeatherIcon icon={"540"} className="" /> */}
                                    </div>
                                    {/* <div style={{...styles.icon, color: weatherColor}}>
                                        <WeatherIcon icon={icon} />
                                    </div> */}

                                    <div style={styles.data}>
                                        <div style={styles.dataColumn}>
                                            <div style={styles.dataValue}>
                                                Temperature
                                                {/* {temperature}&deg; */}
                                            </div>
                                            <div style={styles.dataCaption}>
                                                TEMPERATURE
                                            </div>
                                        </div>
                                        <div style={styles.dataColumn}>
                                            <div style={styles.dataValue}>
                                                Humidity
                                                {/* {humidity}% */}
                                            </div>
                                            <div style={styles.dataCaption}>
                                                HUMIDITY
                                            </div>
                                        </div>
                                    </div>
                                    {/* <Forecast days={forecast} /> */}
                                </div> 
                                </Page>                               
                            </div>
                        </IonCardContent>
                    </IonCard>
            
                    <IonList lines="none">
                    </IonList>
                </IonContent>
            </IonPage>
        );
    }
    private _add(){
        // The "+" before the variable conver is to convert from string to number
        const resultado = +this.state.num1  +  +this.state.num2;
        // this.setState({result: resultado.toString()})
        (async () => {
            const data = await getData();
            this.setState({result: data})
        })();
    }
    private _onTodoChangeInput1(value: string){
        this.setState({
             num1: value
        });
    }
    private _onTodoChangeInput2(value: string){
        this.setState({
             num2: value
        });
    }
}

async function getData(){
    const response = await fetch("http://www.apilayer.net/api/live?access_key=cb51ac5d62bd1e6713b4b6c6e015d6b6");
    const json = await response.json();
    console.log("hola!")
    console.log(json.quotes.USDEUR)
    return json.quotes.USDEUR as string;
}

async function getWeather(city: string){
    const API_KEY = '5a043a1bd95bf3ee500eb89de107b41e';
    const API_URL = 'http://api.openweathermap.org/data/2.5';
    const url = 'http://api.openweathermap.org/data/2.5/weather?q=dublin&appid=5a043a1bd95bf3ee500eb89de107b41e';
    const response = await fetch(`${API_URL}/weather?q=${city.trim()}&appid=${API_KEY}`);
    const json = await response.json();
    console.log(json.quotes.USDEUR)
    return json.quotes.USDEUR as string;
}