홈 탐색 도움말
로그인
olga_pushkar
/
javascript
Watch 1
Star 0
포크 0
파일 이슈 0 풀 리퀘스트 0 위키
소스 검색

12

Olga1108 4 년 전
부모
e03a0895cc
커밋
e950650a84
5개의 변경된 파일과 172개의 추가작업 그리고 0개의 파일을 삭제
통합 보기 변경상태 보기
  1. 35 0
      js12.3/all.css
  2. 13 0
      js12.3/index.html
  3. 67 0
      js12.3/index.js
  4. 12 0
      js12/index.html
  5. 45 0
      js12/index.js

+ 35 - 0
js12.3/all.css
파일 보기 

@@ -0,0 +1,35 @@
 
+* { font-family: "Poppins", "Montserrat", "Roboto", "Arial"; outline: none; }
 
+body {
 
+    position: fixed;
 
+    top: 0;
 
+    bottom: 0;
 
+    left: 0;
 
+    right: 0;
 
+    z-index:-1;
 
+    background-color: #000;
 
+    color: rgb(252, 230, 205);
 
+  }
 
+  button {
 
+    padding: 5px 10px;
 
+    background-color: transparent;
 
+    border: none;
 
+    color: #993000;
 
+    font-size: 40px;
 
+    font-weight: bold;
 
+    user-select: none;
 
+    cursor: pointer;
 
+    transition: all 0.5s;
 
+  }
 
+  button:hover {
 
+    color: #bb1c00;
 
+    margin-left: 10px;
 
+  }
 
+  
+  .flex-container {
 
+    width: 100%;
 
+    box-sizing: border-box;
 
+    display: flex;
 
+    flex-direction: column;
 
+    align-items: center;
 
+    justify-content: center;
 
+  }

+ 13 - 0
js12.3/index.html
파일 보기 

@@ -0,0 +1,13 @@
 
+!DOCTYPE html>
 
+<html lang='en'>
 
+    <head>
 
+        <meta charset='UTF-8' />
 
+        <meta name='viewport' content='width=device-width, initial-scale=1.0' />
 
+        <title>Home Work 12.3 JS</title>
 
+        <link rel='stylesheet' href='all.css'>
 
+    </head>
 
+    <body>
 
+        <h1>Home Work 12.3</h1>
 
+        <script src='index.js'></script>    
+    </body>
 
+</html>

+ 67 - 0
js12.3/index.js
파일 보기 

@@ -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";
 
+        })
 
+};

+ 12 - 0
js12/index.html
파일 보기 

@@ -0,0 +1,12 @@
 
+!DOCTYPE html>
 
+<html lang='en'>
 
+    <head>
 
+        <meta charset='UTF-8' />
 
+        <meta name='viewport' content='width=device-width, initial-scale=1.0' />
 
+        <title>Lesson 11 JS</title>
 
+    </head>
 
+    <body>
 
+        <h1>Lesson 11</h1>
 
+        <script src='index.js'></script>    
+    </body>
 
+</html>

+ 45 - 0
js12/index.js
파일 보기 

@@ -0,0 +1,45 @@
 
+// Захостить на гитхабе приложение, которое:
 
+
 
+// читает куки на клиенте, и если там есть дата последнего посещения, выводит ее на страницу
 
+// пишет в куки на клиенте текущую дату посещения
 
+
 
+let p = document.body.appendChild(document.createElement('p'));
 
+var res = document.cookie
 
+    .split ( "; " )
 
+    .map ( x =>  {
 
+        var tmp = x.split ( "=" );
 
+        tmp[0] === 'Your last visit' ? p.innerText = tmp[0] + ' : '+ tmp[1].split( 'GMT' )[0]: p.innerText ='Hello! Your first visit!';
 
+})
 
+ document.cookie =`Your last visit = ${new Date()}`
 
+
 
+
 
+//  localStorage
 
+// Объявить функцию, которая будет вызываться в момент изменения хэш-части адреса страницы
 
+
 
+// и сохранять в localStorage клиента hash-часть адреса страницы как pageId
 
+// и время входа ( в секундах ) как startTime
 
+
 
+// Назначить эту функцию обработчиком события hashchange объекта window
 
+
 
+// Желательно, чтобы при изменении хеш-части адреса происходило обновление контента страницы без перезагрузки
 
+// ( например, изменялся заголовок и картинка, чтобы создать иллюзию перехода на новую страницу )
 
+
 
+// Отслеживать в панели разработчика изменения в localStorage
 
+
 
+
 
+
 
+
 
+let text =document.body.appendChild(document.createElement('p'));
 
+document.body.style.backgroundImage=`url(https://picsum.photos/900/900/?random)`;
 
+document.body.style.backgroundSize= 'cover';
 
+document.body.style.fontSize = '40px';
 
+const historyArr = [];
 
+change = function() {
 
+    historyArr.push( { 'pageId': location.hash, 'startTime': Math.round(new Date().getTime()/1000)});
 
+    localStorage.setItem ( 'history', JSON.stringify(historyArr));
 
+    document.body.style.backgroundImage=`url(https://picsum.photos/900/900/?random/${Math.round((Math.random())*1000)})`;
 
+    
+    text.innerHTML = 'This is page number :' + location.hash.substring(1);
 
+};
 
+
 
+window.addEventListener('hashchange', change());