Skip to content

T
task_33
Commit 84ebf1e3 authored by Гульняшкин Евгений's avatar Гульняшкин Евгений
Browse files
Options

Базовая верстка с 31 задания

parents
Show whitespace changes
Inline Side-by-side
Showing with 178 additions and 0 deletions
task_1/css/style.css 0 → 100644
View file @ 84ebf1e3
.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;
}
\ No newline at end of file
task_1/index.html 0 → 100644
View file @ 84ebf1e3
<!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>
<div class="show" >
</div>
<input id="country_name" type="text">
<button id="show">Show information</button>
<script src="script.js"></script>
</body>
</html>
\ No newline at end of file
task_1/script.js 0 → 100644
View file @ 84ebf1e3
const loader = document.querySelector('.loading');
const countryName = document.getElementById('name')
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) => {
const items = createTree(result[0])
infoToshow.append(items)
loader.style.display = 'none'
}
const errorHandler = (msg) => {
alert(msg)
console.error(msg)
}
const createTree = (data) => {
console.log(data);
const ul = document.createElement('ul')
for (item in data) {
const li = document.createElement('li')
if (false) {
const flagImg = document.createElement('img');
flagImg.setAttribute('src', `${item.flag}`);
flagImg.style = 'width: 150px'
li.append(flagImg)
}
else {
if (Array.isArray(data)) {
if (typeof data[item] === 'object') {
const innerUl = createTree(data[item])
li.append(innerUl)
} else {
li.append(`${data[item]}`)
}
} else {
if (Array.isArray(data[item])) {
li.innerHTML = `<b>${item}:</b> \n`
const innerUl = createTree(data[item])
li.append(innerUl)
} else {
if ((typeof data[item] === 'object')) {
li.innerHTML = `<b>${item}:</b> \n`
const innerUl = createTree(data[item])
li.append(innerUl)
} else {
li.innerHTML = `<b>${item}:</b> ${data[item]}`
}
}
}
}
ul.append(li)
}
return ul
}
const createTreefromObject = (data) => {
const ul = document.createElement('ul')
for (item in data) {
const li = document.createElement('li')
if (Array.isArray(data[item])) {
li.append(`${item}: `)
const innerUl = createTree(data[item])
li.append(innerUl)
} else {
li.append(`${item}: ${data[item]}`)
}
ul.append(li)
}
return ul
}
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)
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment