Задание 2 выполненно.

4d617c54 · Гульняшкин Евгений · 43b795da · 4d617c54 · 4d617c54 · 4d617c54
Commit 4d617c54 authored Sep 26, 2023 by Гульняшкин Евгений
Hide whitespace changes
Inline Side-by-side

Showing with 161 additions and 0 deletions

style.css task_2/css/style.css +34 -0

index.html task_2/index.html +32 -0

script.js task_2/script.js +95 -0

No files found.
--- a/task_2/css/style.css
+++ b/task_2/css/style.css
+
+.loading{
+    position: fixed;
+    background-color: rgba(177, 177, 177, 0.8);
+    left: 0;
+    top: 0;
+    z-index: 1000;
+    width: 100vw;
+    height: 100vh;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    font-size: 50px;
+}
+
+.show {
+    display: none;
+}
+
+table {
+    border: 1px solid #000;
+    width: 900px;
+    box-sizing: border-box;
+    border-collapse: collapse;
+    margin: 50px auto;
+  }
+  
+  
+td {
+    text-align: center;
+    border: 1px solid #000;
+    box-sizing: border-box;
+    height: 25%;
+  }
\ No newline at end of file
--- a/task_2/index.html
+++ b/task_2/index.html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/style.css">
+    
+    <title>Document</title>
+</head>
+
+<body>
+    <div class="loading" id="loading">
+        <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="64px" height="64px" viewBox="0 0 128 128" xml:space="preserve"><rect x="0" y="0" width="100%" height="100%" fill="#FFFFFF" /><g><circle cx="16" cy="64" r="16" fill="#000000" fill-opacity="1"/><circle cx="16" cy="64" r="14.344" fill="#000000" fill-opacity="1" transform="rotate(45 64 64)"/><circle cx="16" cy="64" r="12.531" fill="#000000" fill-opacity="1" transform="rotate(90 64 64)"/><circle cx="16" cy="64" r="10.75" fill="#000000" fill-opacity="1" transform="rotate(135 64 64)"/><circle cx="16" cy="64" r="10.063" fill="#000000" fill-opacity="1" transform="rotate(180 64 64)"/><circle cx="16" cy="64" r="8.063" fill="#000000" fill-opacity="1" transform="rotate(225 64 64)"/><circle cx="16" cy="64" r="6.438" fill="#000000" fill-opacity="1" transform="rotate(270 64 64)"/><circle cx="16" cy="64" r="5.375" fill="#000000" fill-opacity="1" transform="rotate(315 64 64)"/><animateTransform attributeName="transform" type="rotate" values="0 64 64;315 64 64;270 64 64;225 64 64;180 64 64;135 64 64;90 64 64;45 64 64" calcMode="discrete" dur="720ms" repeatCount="indefinite"></animateTransform></g></svg>
+    </div>
+
+    <table id="table">
+        <tr>
+            <th>Code</th>
+          <th>Flag</th>
+          <th>Name</th>
+          <th>Capital</th>
+          <th>Population</th>
+        </tr>
+
+
+      </table>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
\ No newline at end of file
--- a/task_2/script.js
+++ b/task_2/script.js
+const loader = document.querySelector('.loading');
+const table = document.getElementById('table')
+const region = document.getElementById('region')
+const subregion = document.getElementById('subregion')
+const capital = document.getElementById('capital')
+const flag = document.getElementById('flag')
+const button = document.getElementById('show')
+const userInput = document.getElementById('country_name')
+const infoToshow = document.querySelector('.show');
+let name_to_find = 'Kazakhstan'
+
+
+const request = (config) => {
+    loader.style.display = 'flex'
+    const { method, path, success, error } = config;
+    const xml = new XMLHttpRequest();
+    console.log(name_to_find, config.path)
+    xml.addEventListener('load', () => {
+        if (xml.status < 200 || xml.status > 399) {
+            if (xml.status === 404) {
+                error('No country with such name!');
+            }
+            else {
+                error('bad response');
+            }
+            
+            return;
+        }
+        else if (xml.status === '404') {
+            console.log(xml.status);
+        }
+        const result = JSON.parse(xml.responseText);
+        success(result)
+    });
+    loader.style.display = 'none'
+    xml.addEventListener('error', () => {
+        error('network error');
+    })
+    xml.addEventListener('timeout', () => {
+        error('server response is late')
+    })
+    xml.open(method, path);
+    xml.send();
+}
+
+const processResult = (result) => {
+    console.log(result);
+    for (country of result) {
+        console.log(country);
+        const stroke = document.createElement('tr')
+        const cellAlfa = document.createElement('td')
+        cellAlfa.innerText = country['alpha2Code']
+        const cellFlag = document.createElement('td')
+        const flagImg = document.createElement('img');
+        flagImg.setAttribute('src', `${country.flag}`);
+        flagImg.style = 'max-width: 100px; max-height: 50px'
+        cellFlag.append(flagImg)
+        const cellName = document.createElement('td')
+        cellName.innerText = country['name']
+        const cellCapital = document.createElement('td')
+        cellCapital.innerText = country['capital']
+        const cellPopulation = document.createElement('td')
+        cellPopulation.innerText = country['population']
+
+
+        stroke.append(cellAlfa, cellFlag, cellName, cellCapital, cellPopulation)
+        table.append(stroke)
+    }
+    
+    loader.style.display = 'none'
+    
+}
+
+const errorHandler = (msg) => {
+    alert(msg)
+    console.error(msg)
+}
+
+
+
+
+
+
+const showInfo = () => {
+    const config = {
+        method: "GET",
+        path: `https://restcountries.com/v2/all?fields=alpha2Code,flag,name,capital,population`,
+        success: processResult,
+        error: errorHandler
+    }
+    request(config);
+
+}
+
+showInfo()
\ No newline at end of file