├── api_corona.txt ├── mission1.png ├── style.css ├── js ├── coronaClass.js └── appCorona.js └── index.html /api_corona.txt: -------------------------------------------------------------------------------- 1 | https://coronavirus-19-api.herokuapp.com/countries -------------------------------------------------------------------------------- /mission1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/byarin90/corona/HEAD/mission1.png -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | .strip { 2 | min-height: 40vh; 3 | background-image: url(https://www.un.org/sites/un2.un.org/files/field/image/covid-19-variants.jpg); 4 | background-size: cover; 5 | background-position-x: 300px; 6 | } 7 | 8 | .box { 9 | min-height: 110px; 10 | } -------------------------------------------------------------------------------- /js/coronaClass.js: -------------------------------------------------------------------------------- 1 | class Corona { 2 | constructor(_parent, _item) { 3 | this.parent = _parent; 4 | this.country = _item.country; 5 | this.active = _item.active.toLocaleString(); 6 | 7 | this.recovered = _item.recovered.toLocaleString(); 8 | this.newCases = _item.todayCases.toLocaleString(); 9 | } 10 | 11 | 12 | 13 | 14 | 15 | 16 | render() { 17 | let div = document.createElement('div'); 18 | div.className = 'col'; 19 | document.querySelector(this.parent).append(div) 20 | div.innerHTML = ` 21 |
22 |

${this.country}

23 |

Active: ${this.active}

24 |

Today Cases:${this.newCases}

25 |

Recovered:${this.recovered}

26 |
27 | 28 | ` 29 | } 30 | 31 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | covid-19 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 |

COVID-19

22 |
23 |
24 |
25 | 26 |
27 |
28 | 29 | 30 |
31 | 35 | 36 |
37 | 38 |
39 |
40 | 41 |
42 | 43 |
44 | 45 |
46 |
47 |
48 | 49 | 57 | 58 |
59 |
60 |
61 | 62 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /js/appCorona.js: -------------------------------------------------------------------------------- 1 | let countries = ['Israel', 'France', 'UK']; //array of countries 2 | let allCounteries = []; 3 | window.onload = () => { 4 | declareEvnets(); 5 | doApi(); 6 | } 7 | 8 | 9 | 10 | 11 | 12 | const filterCountries = (json, arrCountries) => { //filter function to json by array countries 13 | let countries_ar = json.filter(item => { 14 | return (arrCountries.includes(item.country)); 15 | }) 16 | 17 | return countries_ar; 18 | } 19 | 20 | const setAllCountries = (json) => { 21 | allCounteries = json.map((item) => { 22 | return item.country; 23 | }) 24 | } 25 | 26 | const addCountry = (country) => { 27 | country = country.toLowerCase(); 28 | country = country.charAt(0).toUpperCase() + country.slice(1); 29 | countries.push(country); 30 | } 31 | 32 | const resetFilter = () => { 33 | countries = []; 34 | doApi(); 35 | } 36 | 37 | const declareEvnets = () => { 38 | let input_val = document.querySelector('#id_input'); 39 | let btn_filter = document.querySelector('#id_filter'); 40 | btn_filter.addEventListener('click', () => { 41 | addCountry(input_val.value); 42 | doApi(); 43 | }) 44 | 45 | let btn_reset = document.querySelector('#id_reset'); 46 | btn_reset.addEventListener('click', () => { 47 | resetFilter(); 48 | doApi(); 49 | }) 50 | 51 | 52 | 53 | } 54 | 55 | const createFilterSelection = () => { 56 | let select = document.querySelector('#id_select'); 57 | allCounteries.forEach(item => { 58 | let opt = document.createElement('option'); 59 | opt.value = item; 60 | opt.innerHTML = item; 61 | select.append(opt) 62 | }); 63 | 64 | select.addEventListener('change', (e) => { 65 | e.preventDefault(); 66 | countries.push(select.value); 67 | doApi() 68 | }) 69 | 70 | 71 | 72 | } 73 | 74 | 75 | const doApi = () => { // call to json 76 | let url = `https://coronavirus-19-api.herokuapp.com/countries`; 77 | let xhr = new XMLHttpRequest(); 78 | xhr.open('GET', url); 79 | xhr.addEventListener('readystatechange', () => { 80 | if (xhr.status == 200 && xhr.readyState == 4) { 81 | let json = JSON.parse(xhr.response); 82 | 83 | 84 | setAllCountries(json); 85 | console.log(allCounteries) 86 | allCounteries.sort(); 87 | createFilterSelection() 88 | 89 | 90 | 91 | json = filterCountries(json, countries); //filter json by countries array 92 | 93 | 94 | console.log('filter') 95 | console.log(json) 96 | 97 | createCorona(json) 98 | 99 | } 100 | 101 | }) 102 | xhr.send(); 103 | 104 | 105 | } 106 | 107 | 108 | 109 | const createCorona = (json) => { 110 | document.querySelector('#id_parent').innerHTML = ''; 111 | json.forEach(item => { 112 | let corona = new Corona('#id_parent', item); 113 | corona.render(); 114 | }); 115 | } --------------------------------------------------------------------------------