|
|
@@ -0,0 +1,67 @@
|
|
|
+// Напилить код, который:
|
|
|
+
|
|
|
+// вставляет кнопку на страницу
|
|
|
+// добавляет обработчика события click кнопки
|
|
|
+// Обработчик события click:
|
|
|
+
|
|
|
+// вычисляет случайное целое число от 1 до 20000 и помещает его в переменную winner
|
|
|
+// добавляет :point_right: картинку
|
|
|
+// ждет 4 секунды
|
|
|
+// плавно изменяет непрозрачность картинки до 0, в процессе изменяя src картинки на :point_right: новое значение
|
|
|
+// плавно изменяет непрозрачность картинки до 1
|
|
|
+// ждет еще 2 секунды, и делает fetch-запрос на гитхабовский API, чтобы получить данные юзера под номером winner
|
|
|
+// при получении ответа изменяет src картинки на аватарку юзера, а так же вставляет логин юзера под фотографией
|
|
|
+// ждет еще 10 секунд и удаляет картинку и подпись
|
|
|
+// На время показа картинок кнопку лучше прятать
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+var addElem = ( tagName, container ) =>
|
|
|
+ ( container ? container : document.body )
|
|
|
+ .appendChild (
|
|
|
+ document.createElement ( tagName )
|
|
|
+ );
|
|
|
+
|
|
|
+var timeOut = time => new Promise (
|
|
|
+ resolve => setTimeout ( () => resolve(), time )
|
|
|
+);
|
|
|
+
|
|
|
+var container = addElem ( "div" )
|
|
|
+container.className = "flex-container";
|
|
|
+var startButton = addElem ( 'button', container );
|
|
|
+startButton.innerText = 'Крутить рулетку';
|
|
|
+
|
|
|
+startButton.onclick = event => {
|
|
|
+ var winnwer = Math.round ( Math.random() * 20000 );
|
|
|
+ var user;
|
|
|
+ event.target.style.display = "none";
|
|
|
+ function show( photoURL, login ) {
|
|
|
+ img.src = photoURL;
|
|
|
+ user = addElem ( "h4", container );
|
|
|
+ user.innerText = `winner: ${login}`;
|
|
|
+ }
|
|
|
+ var img = addElem( "img", container );
|
|
|
+ img.height = "200";
|
|
|
+ img.src = "https://thumbs.gfycat.com/LivelyObviousAnhinga-size_restricted.gif";
|
|
|
+ img.style.transition = "all 0.5s";
|
|
|
+ timeOut ( 2500 )
|
|
|
+ .then ( () => img.src = "https://thumbs.gfycat.com/OddWideHookersealion-small.gif" );
|
|
|
+ timeOut ( 1800 )
|
|
|
+ .then ( () => img.style.opacity = 0 );
|
|
|
+ timeOut ( 2500 )
|
|
|
+ .then ( () => img.style.opacity = 1 );
|
|
|
+ timeOut ( 2500 )
|
|
|
+ .then (
|
|
|
+ () => fetch ( `https://api.github.com/users?since=${winnwer}` )
|
|
|
+ .then ( response => response.json()
|
|
|
+ .then ( users => show ( users[0].avatar_url, users[0].login ) )
|
|
|
+ )
|
|
|
+ )
|
|
|
+ timeOut ( 10000 )
|
|
|
+ .then ( () => {
|
|
|
+ img.remove();
|
|
|
+ user.remove();
|
|
|
+ event.target.style.display = "block";
|
|
|
+ })
|
|
|
+};
|
