hw7 done

hw7/script.js

@@ -26,7 +26,7 @@ document.getElementById('mulTable').addEventListener('mouseover', (e)=> {
     
         e.target.closest('td').style.backgroundColor = 'yellow'
         e.target.closest('td').style.color = 'black'
-        e.target.closest('tr').style.backgroundColor = 'purple'
+        e.target.closest('tr').style.backgroundColor = 'magenta'
     }
 })
 
@@ -44,4 +44,101 @@ document.getElementById('mulTable').addEventListener('mouseout', (e)=> {
     }
 })
 
-//сalc
+//calc
+let inp1 = document.createElement('input')
+let inp2 = document.createElement('input')
+let res = document.createElement('input')
+res.disabled = true
+inp1.type = 'number'
+inp2.type = 'number'
+res.type = 'number'
+
+let title = document.createElement('h2')
+title.innerText = 'calc'
+
+let plus = document.createElement('span')
+plus.innerText= ' + '
+
+let equ = document.createElement('span')
+equ.innerText = ' = '
+
+let btn = document.createElement('button')
+btn.id = 'countBtn'
+btn.innerText = 'Count'
+
+document.body.appendChild(title)
+document.body.appendChild(inp1)
+document.body.appendChild(plus)
+document.body.appendChild(inp2)
+document.body.appendChild(equ)
+document.body.appendChild(res)
+document.body.appendChild(btn)
+
+btn.onclick = () => {
+    inp1.value || inp2.value? res.disabled = false : res.disabled = true 
+    res.value = (+inp1.value) + (+inp2.value)
+}
+
+//сalc live
+document.body.insertAdjacentHTML('beforeend', `
+    <h3>calc live</h3>
+    <div>
+        <div>
+            <select id="operation">
+                <option value="sell">SELL</option>
+                <option value="buy">BUY</option>
+            </select>
+            <input type="number" id="given">
+            <select id="currency">
+                <option value="eur">EUR</option>
+                <option value="usd">USD</option>
+            </select>
+        </div>
+        <br>
+        <label><span>You get: </span><input type="number" id="result"> HRN</label>
+    </div>
+`)
+
+let given = document.getElementById('given')
+let operation = document.getElementById('operation')
+let currency = document.getElementById('currency')
+document.getElementById('result').disabled = true
+    
+let ratios = {
+        sell: {
+            usd: 0.038,
+            eur: 0.033
+        },
+        buy: {
+            usd: 0.037,
+            eur: 0.032,
+        }
+    }
+
+    given.addEventListener('input', calculation)
+    operation.addEventListener('change', calculation)
+    currency.addEventListener('change', calculation)
+
+    function truncateFraction (number) {
+        try {
+            let strNum = String(number).split('.')
+            if(strNum[1].length > 2) {
+                strNum[1] = strNum[1].slice(0, 2)
+            }
+            return Number(strNum.join('.'))
+        } catch (e) {
+            return number
+        }
+    }
+
+    function calculation() {
+        operation.value === 'buy'? document.querySelector('label').children[0].innerText = 'You give: ':
+                                    document.querySelector('label').children[0].innerText = 'You get: '
+        if(+given.value <= 0 || given.value === '') {
+            document.getElementById('result').value = ''
+            document.getElementById('result').disabled = true    
+        } else {
+            document.getElementById('result').disabled = false
+            document.getElementById('result').value = truncateFraction(given.value / ratios[operation.value][currency.value])
+        }
+    }