Home Explore Help
Register Sign In
ZedKonstantin
/
Homework
Watch 1
Star 0
Fork 0
Files Issues 1 Pull Requests 0 Wiki
Browse Source

HW js07 done

Ivar 2 years ago
parent
6248085c95
commit
0492ae59dc
11 changed files with 264 additions and 0 deletions
Split View Show Diff Stats
  1. 22 0
      js/07/calc/index.html
  2. 75 0
      js/07/calc/index.js
  3. 12 0
      js/07/calc/style.css
  4. 0 0
      js/07/mult_table/index.html
  5. 68 0
      js/07/mult_table/index.js
  6. 13 0
      js/09/index.html
  7. 0 0
      js/09/index.js
  8. 13 0
      js/10/index.html
  9. 24 0
      js/10/index.js
  10. 13 0
      js/11/index.html
  11. 24 0
      js/11/index.js

+ 22 - 0
js/07/calc/index.html
View File 

@@ -0,0 +1,22 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+   <meta charset="UTF-8">
 
+   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+   <title>Document</title>
 
+   <link rel="stylesheet" href="./style.css">
 
+</head>
 
+<body>
 
+   <input type="number" id="input1"/>
 
+   <input type="number" id="input2"/>
 
+   <button id="plus">+</button>
 
+   <button id="min">-</button>
 
+   <button id="mul">*</button>
 
+   <button id="div">/</button>
 
+   <input id="res"/>
 
+   <button id="clear">clear all</button>
 
+   
+   <script src="./index.js"></script>
 
+</body>
 
+</html>

+ 75 - 0
js/07/calc/index.js
View File 

@@ -0,0 +1,75 @@
 
+
 
+
 
+// calcOnClick()
 
+function calcOnClick() {
 
+   const buttons = document.querySelectorAll('button')
 
+   for (const button of buttons) {
 
+      button.onclick = function() {
 
+         if (this === plus) {
 
+            res.value = +input1.value + +input2.value
 
+         }
 
+         if (this === min) {
 
+            res.value = input1.value - input2.value
 
+         }
 
+         if (this === mul) {
 
+            res.value = input1.value * input2.value
 
+         }
 
+         if (this === div) {
 
+            res.value = input1.value / input2.value
 
+         }
 
+         if (this === clear) {
 
+            res.value = ''
 
+            input1.value = ''
 
+            input2.value = ''        
+         }         
+      }
 
+   }
 
+}
 
+
 
+calcLive()
 
+function calcLive() {
 
+   const buttons = document.querySelectorAll('button')
 
+   let calc = () => {}
 
+   let prevBtn = null
 
+   function paintBtn(el, color = '') {
 
+      el.style.backgroundColor = color
 
+      if (prevBtn !== null && prevBtn !== el) {
 
+         prevBtn.style.backgroundColor = ''
 
+      }
 
+      prevBtn = el
 
+   }
 
+   for (const button of buttons) {
 
+      button.onclick = function() {
 
+         if (this === plus) {
 
+            calc = () => res.value = +input1.value + +input2.value
 
+            calc()    
+            paintBtn(this, 'red')          
+         }
 
+         if (this === min) {
 
+            calc = () => res.value = input1.value - input2.value
 
+            calc()
 
+            paintBtn(this, 'blue')
 
+         }
 
+         if (this === mul) {
 
+            calc = () => res.value = input1.value * input2.value
 
+            calc()
 
+            paintBtn(this, 'green') 
+         }
 
+         if (this === div) {
 
+            calc = () => res.value = input1.value / input2.value
 
+            calc()
 
+            paintBtn(this, 'yellow')
 
+         }
 
+         if (this === clear) {
 
+            calc = () => {}
 
+            res.value = ''
 
+            input1.value = ''
 
+            input2.value = ''  
+            paintBtn(this)     
+         }                 
+      }
 
+   }
 
+   input1.oninput = () => calc()
 
+   input2.oninput = () => calc()
 
+}
 
+

+ 12 - 0
js/07/calc/style.css
View File 

@@ -0,0 +1,12 @@
 
+input {
 
+   display: block;
 
+   margin: 1rem;
 
+} 
+
 
+button {
 
+   margin: 1rem;
 
+   min-height: 2rem;
 
+   min-width: 2rem;
 
+   user-select: none;
 
+   cursor: pointer;
 
+}

js/07/index.html → js/07/mult_table/index.html
View File


+ 68 - 0
js/07/mult_table/index.js
View File 

@@ -0,0 +1,68 @@
 
+
 
+tableMultDom()
 
+function tableMultDom() {
 
+   const body = document.querySelector('body')
 
+   let table = document.createElement("table")
 
+   table.style.cursor = 'pointer'
 
+   table.setAttribute('border', '1')
 
+   table.setAttribute('frame', 'void')
 
+   body.insertBefore(table, body.childNodes[0])
 
+   for (let rowIndex = 1; rowIndex < 10; rowIndex++) {
 
+      let tr = document.createElement("tr")
 
+      if (rowIndex % 2 === 0) {
 
+         tr.style.backgroundColor = '#CFCFCF'
 
+      }
 
+      table.appendChild(tr)
 
+       for (let colIndex = 1; colIndex < 10; colIndex++) {
 
+         let td = document.createElement("td")
 
+         td.setAttribute('align', 'center')
 
+         td.setAttribute('width', '40px')
 
+         td.setAttribute('height', '40px')
 
+         tr.appendChild(td)
 
+         td.innerText = `${rowIndex*colIndex}`
 
+       }
 
+   }
 
+}
 
+
 
+// tableMultDomHighlight()
 
+function tableMultDomHighlight() {
 
+   const cells = document.querySelectorAll('td')
 
+   for (const cell of cells) {
 
+      let currColor = null
 
+      cell.onmouseover = function() {
 
+         currColor = this.style.backgroundColor
 
+         this.style.backgroundColor = 'red'
 
+      }
 
+      cell.onmouseout = function() {
 
+         this.style.backgroundColor = currColor
 
+      }
 
+
 
+   }
 
+}
 
+
 
+tableMultDomHighlightRowCol()
 
+function tableMultDomHighlightRowCol() {
 
+   const cells = Array.from(document.querySelectorAll('td')) 
+   for (const cell of cells) {
 
+      let currColor = []
 
+      let currCells = []
 
+
 
+      cell.onmouseover = function() {
 
+         let cellIndex1 = this.cellIndex
 
+         let rowIndex1 = this.parentElement.rowIndex
 
+         currCells = cells.filter(item => item.cellIndex === cellIndex1 || item.parentElement.rowIndex === rowIndex1)
 
+
 
+         for (const el of currCells) {
 
+            currColor.push(el.style.backgroundColor)
 
+            el.style.backgroundColor = 'red'
 
+         }
 
+      }
 
+      cell.onmouseout = function() {
 
+         for (const el of currCells) {
 
+            let color = currColor.shift()
 
+            el.style.backgroundColor = color
 
+         }
 
+      }
 
+   }
 
+}
 
+

+ 13 - 0
js/09/index.html
View File 

@@ -0,0 +1,13 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+   <meta charset="UTF-8">
 
+   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+   <title>Document</title>
 
+</head>
 
+<body>
 
+   
+   <script src="./index.js"></script>
 
+</body>
 
+</html>

js/07/index.js → js/09/index.js
View File


+ 13 - 0
js/10/index.html
View File 

@@ -0,0 +1,13 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+   <meta charset="UTF-8">
 
+   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+   <title>Document</title>
 
+</head>
 
+<body>
 
+   
+   <script src="./index.js"></script>
 
+</body>
 
+</html>

+ 24 - 0
js/10/index.js
View File 

@@ -0,0 +1,24 @@
 
+htmlTree()
 
+function htmlTree() {
 
+
 
+}
 
+
 
+htmlTree()
 
+function htmlTree() {
 
+
 
+}
 
+
 
+htmlTree()
 
+function htmlTree() {
 
+
 
+}
 
+
 
+htmlTree()
 
+function htmlTree() {
 
+
 
+}
 
+
 
+htmlTree()
 
+function htmlTree() {
 
+
 
+}

+ 13 - 0
js/11/index.html
View File 

@@ -0,0 +1,13 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+   <meta charset="UTF-8">
 
+   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+   <title>Document</title>
 
+</head>
 
+<body>
 
+   
+   <script src="./index.js"></script>
 
+</body>
 
+</html>

+ 24 - 0
js/11/index.js
View File 

@@ -0,0 +1,24 @@
 
+htmlTree()
 
+function htmlTree() {
 
+
 
+}
 
+
 
+htmlTree()
 
+function htmlTree() {
 
+
 
+}
 
+
 
+htmlTree()
 
+function htmlTree() {
 
+
 
+}
 
+
 
+htmlTree()
 
+function htmlTree() {
 
+
 
+}
 
+
 
+htmlTree()
 
+function htmlTree() {
 
+
 
+}