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

css/style.css → task_1/css/style.css

@@ -7,8 +7,12 @@
     z-index: 1000;
     width: 100vw;
     height: 100vh;
-    display: flex;
+    display: none;
     align-items: center;
     justify-content: center;
     font-size: 50px;
+}
+
+.show {
+    display: none;
 }
\ No newline at end of file

index.html → task_1/index.html

@@ -13,7 +13,8 @@
     <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>
-    <p><b>Name: </b><span id="name">sdf</span></p>
+    <div class="show" >
+    <p><b>Name: </b><span id="name"></span></p>
 
     <p><b>Region: </b><span id="region"></span></p>
 
@@ -22,6 +23,11 @@
     <p><b>Capital: </b><span id="capital">  </span></p>
 
     <p><b>Flag: </b><span id="flag"> </span></p>
+</div>
+
+    <input id="country_name" type="text">
+
+<button id="show">Show information</button>
     <script src="script.js"></script>
 </body>
 

script.js → task_1/script.js

@@ -4,19 +4,35 @@ 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) {
-            error('bad response');
+            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)
-        console.log(result);
     });
+    loader.style.display = 'none'
     xml.addEventListener('error', () => {
         error('network error');
     })
@@ -28,7 +44,6 @@ const request = (config) => {
 }
 
 const processResult = (result) => {
-    console.log(result);
     countryName.innerText = result[0].name
     const flagImg = document.createElement('img');
     flagImg.setAttribute('src', `${result[0].flag}`);
@@ -40,15 +55,27 @@ const processResult = (result) => {
     loader.style.display = 'none'
 }
 
-const errorHandler = () => {
+const errorHandler = (msg) => {
+    alert(msg)
     console.error(msg)
 }
 
-const config = {
-    method: "GET",
-    path: "https://restcountries.com/v2/name/kz",
-    success: processResult,
-    error: errorHandler
-}
 
-request(config)
\ No newline at end of file
+
+
+
+
+const showInfo = () => {
+    if (userInput.value) {
+        name_to_find = userInput.value
+    }
+    const config = {
+        method: "GET",
+        path: `https://restcountries.com/v2/name/${name_to_find}`,
+        success: processResult,
+        error: errorHandler
+    }
+    request(config);
+    infoToshow.style.display = 'block'
+}
+button.addEventListener('click', showInfo)