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

7.2 and 7.3 add

Olga1108 4 년 전
부모
8e741ee0cb
커밋
97627b2a78
5개의 변경된 파일과 92개의 추가작업 그리고 19개의 파일을 삭제
통합 보기 변경상태 보기
  1. 0 16
      js05/index.js
  2. 16 0
      js7.2/index.html
  3. 36 0
      js7.2/index.js
  4. 4 3
      js05/index.html
  5. 36 0
      js7.3/index.js

+ 0 - 16
js05/index.js
파일 보기 

@@ -1,16 +0,0 @@
 
-// Task 6.1
 
-let body = document.body;
 
-let tags = ['div', 'ul', 'section', 'a', 'li'];
 
-let classes = ['list', 'item', 'gallery', 'holder', 'box'];
 
-let style = document.createElement ('style')
 
-document.head.appendChild ( style )
 
-style.innerText = `.list {color: red;}
 
-                    .item {list-style: none;}
 
-                   .gallery {background: #5363db;}
 
-                    .holder {cursor: pointer;}
 
-                    .box {color: #555;}`
 
-for(let i = 0; i < tags.length; i++) {
 
-    let result = document.createElement(tags[i]);
 
-    result.classList.add(classes[i]);
 
-    document.body.appendChild(result)
 
-}

+ 16 - 0
js7.2/index.html
파일 보기 

@@ -0,0 +1,16 @@
 
+!DOCTYPE html>
 
+<html lang='en'>
 
+    <head>
 
+        <meta charset='UTF-8' />
 
+        <meta name='viewport' content='width=device-width, initial-scale=1.0' />
 
+        <title>Home Work 7.2 JS</title>
 
+    </head>
 
+    <body>
 
+        <h1>Home Work 7.2</h1>
 
+        <ul>
 
+            <li>dog</li>
 
+            <li>cat</li>
 
+        </ul>
 
+        <script src='index.js'></script>    
+    </body>
 
+</html>

+ 36 - 0
js7.2/index.js
파일 보기 

@@ -0,0 +1,36 @@
 
+let collection = []
 
+
 
+function over ( event ) {
 
+    event.target.style.backgroundColor = '#ffff0050';
 
+    event.stopPropagation();
 
+}
 
+function out ( event ) {
 
+    event.target.style.backgroundColor = '#ff00ff50';
 
+}
 
+function clickHandler ( event ) {
 
+    event.target.remove();
 
+    event.stopPropagation();
 
+}
 
+['first', 'second', 'third', 'fourth'].forEach (
 
+    function ( tag, index, arr ) {
 
+       index === 0 ? (elem = document.body.appendChild(document.createElement('div')),
 
+        elem.style = `width: 700px;
 
+                      height: 700px;
 
+                      position: relative;
 
+                      background-color: #ff00ff50;
 
+                      border: dotted 1px yellow;`,
 
+        elem.title = tag) : (elem = document.getElementById(arr[index - 1]).appendChild(document.createElement('div')),
 
+        elem.style = `background-color: #ff00ff50;
 
+                      border: dotted 1px yellow;
 
+                      position: absolute;
 
+                      top: 50px;
 
+                      left: 50px;`,
 
+        elem.style.width = parseInt(elem.parentElement.style.width) - 100 ,
 
+        elem.style.height = parseInt(elem.parentElement.style.height) - 100 ,
 
+        elem.title = tag);
 
+        elem.id = tag;
 
+        elem.addEventListener('mouseover', over);
 
+        elem.addEventListener('mouseout', out);
 
+        elem.addEventListener('click', clickHandler);
 
+        collection.push(elem);
 
+    }, collection);

+ 4 - 3
js05/index.html
파일 보기 

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

+ 36 - 0
js7.3/index.js
파일 보기 

@@ -0,0 +1,36 @@
 
+let collection = []
 
+
 
+function over ( event ) {
 
+    event.target.style.backgroundColor = '#ffff0050';
 
+    event.stopPropagation();
 
+}
 
+function out ( event ) {
 
+    event.target.style.backgroundColor = '#ff00ff50';
 
+}
 
+function clickHandler ( event ) {
 
+    event.target.replaceWith(event.target.children[0]);
 
+    event.stopPropagation();
 
+}
 
+[1, 2, 3, 4, 5, 6, 7].forEach (
 
+    function ( tag, index, arr ) {
 
+       index === 0 ? (elem = document.body.appendChild(document.createElement('div')),
 
+        elem.style = `width: 900px;
 
+                      height: 900px;
 
+                      position: relative;
 
+                      background-color: #ff00ff50;
 
+                      border: dotted 1px yellow;`,
 
+        elem.title = tag) : (elem = document.getElementById(arr[index - 1]).appendChild(document.createElement('div')),
 
+        elem.style = `background-color: #ff00ff50;
 
+                      border: dotted 1px yellow;
 
+                      position: absolute;
 
+                      top: 50px;
 
+                      left: 50px;`,
 
+        elem.style.width = parseInt(elem.parentElement.style.width) - 100 ,
 
+        elem.style.height = parseInt(elem.parentElement.style.height) - 100 ,
 
+        elem.title = tag);
 
+        elem.id = tag;
 
+        elem.addEventListener('mouseover', over);
 
+        elem.addEventListener('mouseout', out);
 
+        elem.addEventListener('click', clickHandler);
 
+        collection.push(elem);
 
+    }, collection);