React

by Amir Danish

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

class TodoApp extends React.Component {
   constructor(props) {
        super(props);
        this.state = { World: [], Afghanistan: [], Pakistan: [], Iran: [] };
    }

    async componentDidMount() {

        // try {
        //     const { data_af } = await axios.get(`https://corona.lmao.ninja/v2/countries/afghanistan`);
        //     console.log(data);
        //     this.setState({
        //         Afghanistan: data
        //     })
        // } catch (err) {
        //     console.log(err.message)
        // };

        // try {
        //     const { data_world } = await axios.get(`https://corona.lmao.ninja/v2/all`);
        //     const { data_af } = await axios.get(`https://corona.lmao.ninja/v2/countries/afghanistan`);
        //     const { data_ir } = await axios.get(`https://corona.lmao.ninja/v2/countries/iran`);
        //     const { data_pk } = await axios.get(`https://corona.lmao.ninja/v2/countries/pakistan`);
        //     this.setState({
        //         World: data_world,
        //         Afghanistan: data_af,
        //         Iran: data_ir,
        //         Pakistan: data_pk
        //     })
        // } catch (err) {
        //     console.log(err.message)
        // };
        const urls = [
            'https://corona.lmao.ninja/v2/all',
            'https://corona.lmao.ninja/v2/countries/afghanistan',
            'https://corona.lmao.ninja/v2/countries/iran',
            'https://corona.lmao.ninja/v2/countries/pakistan'
        ];

        Promise.all(urls.map(url =>
            fetch(url)
                .then(checkStatus)
                .then(parseJSON)
                .catch(error => console.log('There was a problem!', error))
        ))
            .then(data => {
                const data_world = data[0];
                const data_af = data[1];
                const data_ir = data[2];
                const data_pk = data[3];
                this.setState({
                            World: data_world,
               ...