|
|
@@ -0,0 +1,144 @@
|
|
|
+// таблица умножения
|
|
|
+let table = document.createElement('table')
|
|
|
+table.id = 'mulTable'
|
|
|
+for(let i = 1; i < 10; i++) {
|
|
|
+ let tr = document.createElement('tr')
|
|
|
+ for(let j = 1; j < 10; j++) {
|
|
|
+ let td = document.createElement('td')
|
|
|
+ td.style.textAlign = 'center'
|
|
|
+ td.style.padding = '5px'
|
|
|
+ td.style.border = '1px solid dimgrey'
|
|
|
+ td.innerText = `${i * j}`
|
|
|
+ tr.appendChild(td)
|
|
|
+ }
|
|
|
+ table.appendChild(tr)
|
|
|
+}
|
|
|
+
|
|
|
+document.getElementsByTagName('body')[0].appendChild(table)
|
|
|
+
|
|
|
+// подсветить ячейку и строку и колонку
|
|
|
+document.getElementById('mulTable').addEventListener('mouseover', (e)=> {
|
|
|
+ if(e.target.closest('td')) {
|
|
|
+ for(let i of e.currentTarget.children) {
|
|
|
+ i.children[e.target.cellIndex].style.backgroundColor = 'black'
|
|
|
+ i.children[e.target.cellIndex].style.color = 'white'
|
|
|
+ }
|
|
|
+
|
|
|
+ e.target.closest('td').style.backgroundColor = 'yellow'
|
|
|
+ e.target.closest('td').style.color = 'black'
|
|
|
+ e.target.closest('tr').style.backgroundColor = 'magenta'
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+document.getElementById('mulTable').addEventListener('mouseout', (e)=> {
|
|
|
+ if(e.target.closest('td')) {
|
|
|
+ for(let i of e.currentTarget.children) {
|
|
|
+ for(let j of i.children) {
|
|
|
+ j.style.backgroundColor = 'transparent'
|
|
|
+ j.style.color = 'black'
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ e.target.closest('td').style.backgroundColor = 'transparent'
|
|
|
+ e.target.closest('tr').style.backgroundColor = 'transparent'
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+//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])
|
|
|
+ }
|
|
|
+ }
|
