diff --git a/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md b/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md index 54c101193..a41b94dbb 100644 --- a/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md +++ b/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md @@ -1,64 +1,64 @@ -The core of the solution is a function that adds more dates to the page (or loads more stuff in real-life) while we're at the page end. +Основою рішення є функція, яка додає більше дат на сторінку (або завантажує більше речей у реальному житті), поки ми знаходимося в кінці сторінки. -We can call it immediately and add as a `window.onscroll` handler. +Ми можемо негайно викликати її та додати `window.onscroll` як обробник. -The most important question is: "How do we detect that the page is scrolled to bottom?" +Найважливіше запитання: "Як ми виявимо, що сторінка прокручується вниз?" -Let's use window-relative coordinates. +Скористаємось координатами, відносними до вікна. -The document is represented (and contained) within `` tag, that is `document.documentElement`. +Документ представлений (і міститься) у тегу ``, тобто `document.documentElement`. -We can get window-relative coordinates of the whole document as `document.documentElement.getBoundingClientRect()`, the `bottom` property will be window-relative coordinate of the document bottom. +Ми можемо отримати відносні до вікна координати всього документа як `document.documentElement.getBoundingClientRect()`, властивість `bottom` буде відносною до вікна координатою низа документа. -For instance, if the height of the whole HTML document is `2000px`, then: +Наприклад, якщо висота всього HTML-документа дорівнює `2000px`, тоді: ```js -// when we're on the top of the page -// window-relative top = 0 +// коли ми знаходимося вгорі сторінки +// top відносний до вікна дорівнює 0 document.documentElement.getBoundingClientRect().top = 0 -// window-relative bottom = 2000 -// the document is long, so that is probably far beyond the window bottom +// bottom відносний до вікна дорівнює 2000 +// документ великий, тому він, ймовірно, знаходиться далеко за нижньою частиною вікна document.documentElement.getBoundingClientRect().bottom = 2000 ``` -If we scroll `500px` below, then: +Якщо ми прокрутимо `500px` нижче, то: ```js -// document top is above the window 500px +// Верхня частина документа знаходиться над вікном на 500px document.documentElement.getBoundingClientRect().top = -500 -// document bottom is 500px closer +// Нижня частина документа на 500px ближче document.documentElement.getBoundingClientRect().bottom = 1500 ``` -When we scroll till the end, assuming that the window height is `600px`: +Коли ми прокручуємо до кінця, припускаючи, що висота вікна дорівнює `600px`: ```js -// document top is above the window 1400px +// Верхня частина документа знаходиться над вікном на 1400px document.documentElement.getBoundingClientRect().top = -1400 -// document bottom is below the window 600px +// Нижня частина документа знаходиться під вікном на 600px document.documentElement.getBoundingClientRect().bottom = 600 ``` -Please note that the `bottom` can't be `0`, because it never reaches the window top. The lowest limit of the `bottom` coordinate is the window height (we assumed it to be `600`), we can't scroll it any more up. +Зауважте, що `bottom` не може бути `0`, оскільки він ніколи не досягає верхньої частини вікна. Найнижча межа `bottom` координати -- це висота вікна (ми припустили, що це `600`), ми більше не можемо прокручувати вгору. -We can obtain the window height as `document.documentElement.clientHeight`. +Ми можемо отримати висоту вікна як `document.documentElement.clientHeight`. -For our task, we need to know when the document bottom is not no more than `100px` away from it (that is: `600-700px`, if the height is `600`). +Для нашого завдання нам потрібно знати, коли нижня частина документа знаходиться на відстані не більше ніж `100px` від неї (тобто: `600-700px`, якщо висота `600`). -So here's the function: +Отже, ось функція: ```js function populate() { while(true) { - // document bottom + // нижня частина документа let windowRelativeBottom = document.documentElement.getBoundingClientRect().bottom; - // if the user hasn't scrolled far enough (>100px to the end) + // якщо користувач не прокрутив достатньо далеко (>100px до кінця) if (windowRelativeBottom > document.documentElement.clientHeight + 100) break; - // let's add more data + // додамо більше даних document.body.insertAdjacentHTML("beforeend", `
Date: ${new Date()}
`); } } diff --git a/2-ui/3-event-details/8-onscroll/1-endless-page/solution.view/index.html b/2-ui/3-event-details/8-onscroll/1-endless-page/solution.view/index.html index 8dc1b2949..301ae6599 100644 --- a/2-ui/3-event-details/8-onscroll/1-endless-page/solution.view/index.html +++ b/2-ui/3-event-details/8-onscroll/1-endless-page/solution.view/index.html @@ -6,7 +6,7 @@ -Text and pictures are from https://wikipedia.org.
- -data-src
load when become visible.The Solar System is the gravitationally bound system comprising the Sun and the objects that - orbit it, either directly or indirectly. Of those objects that orbit the Sun directly, - the largest eight are the planets, with the remainder being significantly smaller objects, - such as dwarf planets and small Solar System bodies. - Of the objects that orbit the Sun indirectly, the moons, - two are larger than the smallest planet, Mercury.
- -The Solar System formed 4.6 billion years ago from the gravitational collapse of a giant - interstellar molecular cloud. The vast majority of the system's mass is in the Sun, with most - of the remaining mass contained in Jupiter. The four smaller inner planets, Mercury, Venus, - Earth and Mars, are terrestrial planets, being primarily composed of rock and metal. - The four outer planets are giant planets, being substantially more massive than the terrestrials. - The two largest, Jupiter and Saturn, are gas giants, being composed mainly of hydrogen and helium; - the two outermost planets, Uranus and Neptune, are ice giants, - being composed mostly of substances with relatively high melting points compared with hydrogen - and helium, called volatiles, such as water, ammonia and methane. - All planets have almost circular orbits that lie within a nearly flat disc called the ecliptic.
+Текст та картинки з https://wikipedia.org.
+ +data-src
завантажуються, коли стають видимими.Сонячна система — планетна система, що включає в себе центральну зорю — Сонце, + і всі природні космічні об’єкти (планети, астероїди, комети, потоки сонячного вітру тощо), + які об’єднуються гравітаційною взаємодією. Сонячна система є частиною значно більшого комплексу, + який складається із зірок і міжзоряної речовини — галактики Чумацький Шлях. Сонце складає ≈99,85% маси Сонячної системи; + газові планети-гіганти (Юпітер, Сатурн, Уран і Нептун) складають 99% залишкової маси. + Як і в інших зір, у надрах Сонця ефективно відбуваються термоядерні реакції з виділенням енергії.
+ +За сучасними уявленнями Сонце й Сонячна система утворилися близько 4,6 млрд років тому + внаслідок гравітаційного стискання хмари міжзоряного газу й пилу. Більша частина маси об’єктів, + пов’язаних із Сонцем гравітацією, міститься у восьми відносно відокремлених планетах, що мають майже кругові орбіти + й розташовані в межах майже плоского диска — площини екліптики. Чотири менші внутрішні планети: Меркурій, Венера, + Земля та Марс, котрі називаються також планетами земної групи, складаються здебільшого з силікатів та металів. + Чотири зовнішні планети: Юпітер, Сатурн, Уран та Нептун, звані також газовими гігантами, значною мірою складаються з + водню та гелію та набагато масивніші, ніж планети земної групи. + Шість із восьми планет та три карликові планети мають природні супутники. Кожна з зовнішніх планет оточена кільцями пилу та інших частинок. + Сонячний вітер (потік плазми від Сонця) утворює в міжзоряному середовищі «міхур», + який називається геліосферою і простягається до краю розсіяного диска. Гіпотетична хмара Оорта, що слугує джерелом довгоперіодичних комет, може сягати приблизно в тисячу разів більшої відстані.
The Sun is the Solar System's star and by far its most massive component. - Its large mass (332,900 Earth masses) produces temperatures and densities in its core - high enough to sustain nuclear fusion of hydrogen into helium, making it a main-sequence star. - This releases an enormous amount of energy, - mostly radiated into space as electromagnetic radiation peaking in visible light.
+Сонце — єдина зоря Сонячної системи та її головна складова. + Його маса (332 900 мас Землі) досить велика для підтримання термоядерних реакцій синтезу в його надрах, + внаслідок яких вивільняється велика кількість енергії, що випромінюється в простір здебільшого + у вигляді електромагнітного випромінювання, максимум якого припадає на діапазон хвиль довжиною 400—700 нм, + який відповідає видимому світлу.
Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet - in the Solar System (0.055 Earth masses). - Mercury has no natural satellites; besides impact craters, its only known geological features - are lobed ridges or rupes that were probably produced by a period of contraction early in - its history.[67] Mercury's very tenuous atmosphere consists of atoms blasted off its - surface by the solar wind.[68] Its relatively large iron core and thin mantle have not yet - been adequately explained. Hypotheses include that its outer layers were stripped off by a - giant impact; or, that it was prevented from fully accreting by the young Sun's energy.
+Меркурій є найближчою до Сонця (0,4 а. о.) й найменшою планетою системи (0,055 маси Землі). + У Меркурія немає супутників, а його найпомітнішими, після ударних кратерів, + деталями рельєфу є численні криволінійні уступи довжиною до сотень кілометрів і висотою до 3 км. + Ймовірно, вони виникли при стисканні планети внаслідок поступового остигання її надр. + Меркурій має вкрай розріджену атмосферу. Вона складається з атомів, «вибитих» із поверхні планети сонячним вітром. + Велике залізне ядро Меркурія та його тонка кора ще не отримали належного пояснення. Є гіпотеза, яка припускає, + що зовнішні шари планети, складені з легких елементів, зірвало внаслідок гігантського зіткнення, яке зменшило розміри планети, + а також запобігло повному поглинанню Меркурія молодим Сонцем.
Venus (0.7 AU from the Sun) is close in size to Earth (0.815 Earth masses) and, like Earth, - has a thick silicate mantle around an iron core, a substantial atmosphere, and evidence of - internal geological activity. It is much drier than Earth, and its atmosphere is ninety times - as dense. Venus has no natural satellites. It is the hottest planet, with surface temperatures - over 400 °C (752°F), most likely due to the amount of greenhouse gases in the atmosphere. - No definitive evidence of current geological activity has been detected on Venus, - but it has no magnetic field that would prevent depletion of its substantial atmosphere, - which suggests that its atmosphere is being replenished by volcanic eruptions.
+Венера близька за розміром і масою до Землі (її маса становить 0,815 земної). + Як і Земля, вона має потужну атмосферу та товсту силікатну оболонку навколо залізного ядра. + На поверхні Венери є яскраві ознаки колишньої геологічної активності, в першу чергу вулканізму. + Води в складі Венери майже немає, а її атмосфера в дев’яносто разів щільніша за земну. + Це найгарячіша планета: температура її поверхні перевищує 400 °C. Причиною цього є парниковий ефект у щільній, + багатій на вуглекислий газ атмосфері. Надійних ознак сучасної ендогенної геологічної активності на Венері + не виявлено, але, оскільки у неї немає магнітного поля, яке запобігло б виснаженню її наявної атмосфери, + це дозволяє припустити, що її атмосфера регулярно поповнюється вулканічними виверженнями. Природних супутників у Венери немає.
Earth (1 AU from the Sun) is the largest and densest of the inner planets, - the only one known to have current geological activity, and the only place where life - is known to exist. Its liquid hydrosphere is unique among the terrestrial planets, - and it is the only planet where plate tectonics has been observed. - Earth's atmosphere is radically different from those of the other planets, - having been altered by the presence of life to contain 21% free oxygen. - It has one natural satellite, the Moon, the only large satellite of a terrestrial planet - in the Solar System.
+Земля є найбільшою та найщільнішою серед внутрішніх планет. + У Землі є один природний супутник — Місяць, це єдиний великий супутник + планет земної групи. + Серед планет земної групи Земля є унікальною (насамперед — гідросферою). + Атмосфера Землі радикально відрізняється від атмосфер інших + планет — вона містить вільний кисень. + Питання про наявність життя де-небудь, крім Землі, + залишається відкритим.
Mars (1.5 AU from the Sun) is smaller than Earth and Venus (0.107 Earth masses). - It has an atmosphere of mostly carbon dioxide with a surface pressure of 6.1 millibars - (roughly 0.6% of that of Earth). Its surface, peppered with vast volcanoes, - such as Olympus Mons, and rift valleys, such as Valles Marineris, shows geological - activity that may have persisted until as recently as 2 million years ago. - Its red colour comes from iron oxide (rust) in its soil. - Mars has two tiny natural satellites (Deimos and Phobos) thought to be captured asteroids.
+Марс менший за Землю та Венеру (0,107 маси Землі). Він має атмосферу, що складається переважно з вуглекислого газу, + з поверхневим тиском 6,1 мбар (0,6 % від земного). На його поверхні є вулкани, найбільший із яких, + Олімп, перевищує розмірами всі земні вулкани, досягаючи висоти 21,2 км. + Рифтові западини (долини Марінера) свідчать про колишню тектонічну активність. + Сучасної тектонічної та вулканічної активності на Марсі не зареєстровано, але, за деякими оцінками, + Олімп востаннє вивергався не більше 2 млн років тому. Червоний колір поверхні Марса зумовлений великою кількістю оксиду заліза в його ґрунті. + Планета має два супутники — Фобос і Деймос. Припускається, що вони являють собою захоплені астероїди.
Jupiter (5.2 AU), at 318 Earth masses, is 2.5 times the mass of all the other planets put together. - It is composed largely of hydrogen and helium. - Jupiter's strong internal heat creates semi-permanent features in its atmosphere, - such as cloud bands and the Great Red Spot. Jupiter has 67 known satellites. - The four largest, Ganymede, Callisto, Io, and Europa, show similarities to the terrestrial planets, - such as volcanism and internal heating. - Ganymede, the largest satellite in the Solar System, is larger than Mercury.
+Юпітер має масу, в 318 разів більшу від земної, і є в 2,5 рази масивнішим + від усіх інших планет разом узятих. Він складається здебільшого з водню і гелію. + Висока внутрішня температура Юпітера викликає появу численних напівпостійних + вихрових структур в його атмосфері, таких як смуги хмар і Велика червона пляма. + Юпітер має 79 супутників. Чотири найбільших — Ганімед, Каллісто, Іо та Європа — подібні до планет земної + групи ендогенною активністю, зокрема тектонічною, а Іо — навіть вулканічною. + Ганімед, найбільший супутник в Сонячній системі, за розмірами перевищує Меркурій.
Saturn (9.5 AU), distinguished by its extensive ring system, - has several similarities to Jupiter, such as its atmospheric composition and magnetosphere. - Although Saturn has 60% of Jupiter's volume, it is less than a third as massive, - at 95 Earth masses. Saturn is the only planet of the Solar System that is less dense than water. - The rings of Saturn are made up of small ice and rock particles. - Saturn has 62 confirmed satellites composed largely of ice. - Two of these, Titan and Enceladus, show signs of geological activity. - Titan, the second-largest moon in the Solar System, is larger than Mercury - and the only satellite in the Solar System with a substantial atmosphere.
+Сатурн, відомий своєю системою кілець, має структуру атмосфери + і магнітосфери, дещо подібну до відповідних структур Юпітера. + Хоча об’єм Сатурна дорівнює 60 % об’єму Юпітера, маса (95 мас Землі) — менша + від третини маси Юпітера; таким чином, Сатурн — найменш щільна планета Сонячної системи + (його середня густина менша за густину води). + Сатурн має 82 підтверджених супутники; два з них — Титан і Енцелад — проявляють + ознаки геологічної активності. Ця активність, однак, не подібна до земної, + оскільки значною мірою обумовлена активністю льоду. Титан, який за розмірами більший + за Меркурій, — єдиний супутник в Сонячній системі, що має атмосферу.
Uranus (19.2 AU), at 14 Earth masses, is the lightest of the outer planets. - Uniquely among the planets, it orbits the Sun on its side; - its axial tilt is over ninety degrees to the ecliptic. - It has a much colder core than the other giant planets and radiates very little heat into space. - Uranus has 27 known satellites, the largest ones being Titania, - Oberon, Umbriel, Ariel, and Miranda.
+Уран з масою, в 14 разів більшою, ніж у Землі, є найлегшою із зовнішніх планет. + Унікальним серед інших планет його робить те, що він обертається «лежачи на боці»: + нахил осі його обертання до площини екліптики дорівнює приблизно 98°. + Якщо інші планети можна порівняти з дзиґою, що обертається, то Уран більше схожий на кульку, яка котиться. + Він має набагато холодніше ядро, ніж інші газові гіганти, і випромінює в космос дуже мало тепла. + Відкрито 27 супутників Урана; найбільші з них — Титанія, Оберон, Умбріель, Аріель і Міранда.
Neptune (30.1 AU), though slightly smaller than Uranus, is more massive (equivalent to 17 Earths) - and hence more dense. It radiates more internal heat, - but not as much as Jupiter or Saturn. - Neptune has 14 known satellites. The largest, Triton, is geologically active, - with geysers of liquid nitrogen. - Triton is the only large satellite with a retrograde orbit. - Neptune is accompanied in its orbit by several minor planets, termed Neptune trojans, - that are in 1:1 resonance with it.
+Нептун, хоча і дещо менший від Урана, але масивніший (17 мас Землі) + і тому щільніший. Він випромінює більше внутрішнього тепла, + але не так багато, як Юпітер чи Сатурн. + Нептун має 14 відомих супутників. Найбільший з них — Тритон, + є геологічно активним, з гейзерами рідкого азоту. + Тритон — єдиний великий супутник, що рухається в зворотному напрямку. + Також Нептун супроводжують астероїди, що називаються троянцями Нептуна, + які перебувають з ним в резонансі 1:1.