HW#7

HW#7/hw7.js

@@ -0,0 +1,305 @@
+// Таблица умножения ===========================================================================
+
+
+const table = document.createElement('table')
+    document.body.append(table)
+    Object.assign(table.style, {width: '435px', height: '385px'})
+
+for (let i=0; i<10; i++){
+    const tr = document.createElement('tr')
+    table.appendChild(tr)
+
+    
+for(let j=0; j<10; j++){
+    const td = document.createElement('td')
+    Object.assign(td.style, {border: '1px solid', borderColor: '#e1e1e3', textAlign: 'center', width: '20px'})
+    tr.appendChild(td)
+
+    let mTable = i*j
+    mTable= mTable? mTable: j||i
+    i%2? td.style.backgroundColor='#f8f8f8': td.style.backgroundColor='#ffffff'
+    td.innerText=mTable
+}
+}
+
+
+// Подсветить ячейку ===========================================================================
+
+
+const table = document.createElement('table')
+document.body.append(table)
+Object.assign(table.style, {width: '435px', height: '385px'})
+
+for (let i=0; i<10; i++){
+    const tr = document.createElement('tr')
+    table.appendChild(tr)
+
+    for(let j=0; j<10; j++){
+    const td = document.createElement('td')
+    Object.assign(td.style, {border: '1px solid', borderColor: '#e1e1e3', textAlign: 'center', width: '20px'})
+    tr.appendChild(td)
+
+    let mTable = i*j
+    mTable? mTable===0: mTable = j||i
+    i%2? td.style.backgroundColor='#f8f8f8': td.style.backgroundColor='#ffffff'
+    td.innerText=mTable
+
+    td.onmouseover = function(){
+        this.style.backgroundColor='#ffba00'
+    }
+    td.onmouseout = function(){
+        i%2? td.style.backgroundColor='#f8f8f8': td.style.backgroundColor='#ffffff'
+    }
+}
+}
+
+
+// Подсветить строку и столбец ===========================================================================
+
+
+const table = document.createElement('table')
+document.body.append(table)
+Object.assign(table.style, {width: '435px', height: '385px'})
+
+for (let i=0; i<10; i++){
+    const tr = document.createElement('tr')
+    table.appendChild(tr)
+
+    for(let j=0; j<10; j++){
+    const td = document.createElement('td')
+    Object.assign(td.style, {border: '1px solid', borderColor: '#e1e1e3', textAlign: 'center', width: '20px'})
+    tr.appendChild(td)
+
+    let mTable = i*j
+    mTable? mTable===0: mTable = j||i
+    i%2? td.style.backgroundColor='#e9e9e9': td.style.backgroundColor='#ffffff'
+    td.innerText=mTable
+
+    td.onmouseover = function(){
+        td.style.backgroundColor='#d0bf55'
+        tr.firstChild.style.backgroundColor='#6768ab'
+        table.firstChild.children[j].style.backgroundColor='#6768ab'
+    }
+    td.onmouseout = function(){
+        i%2? td.style.backgroundColor='#e9e9e9': td.style.backgroundColor='#ffffff'
+        i%2? tr.firstChild.style.backgroundColor='#e9e9e9': tr.firstChild.style.backgroundColor='#ffffff'
+        table.firstChild.children[j].style.backgroundColor='#ffffff'
+    }
+}
+}
+
+
+// Либо =================================
+
+
+const table = document.createElement('table')
+document.body.append(table)
+Object.assign(table.style, {width: '435px', height: '385px'})
+
+for (let i=0; i<10; i++){
+    const tr = document.createElement('tr')
+    table.appendChild(tr)
+
+    for(let j=0; j<10; j++){
+    const td = document.createElement('td')
+    Object.assign(td.style, {border: '1px solid', borderColor: '#e1e1e3', textAlign: 'center', width: '20px'})
+    tr.appendChild(td)
+
+    let mTable = i*j
+    mTable = mTable? mTable: j||i
+    i%2? td.style.backgroundColor='#e9e9e9': td.style.backgroundColor='#ffffff'
+    td.innerText=mTable
+
+    td.onmouseover = function(){
+    td.style.backgroundColor='#d0bf55'
+
+        for(let k=0; k<10; k++){
+            td.parentElement.children[k].style.backgroundColor='#6768ab'
+            td.style.backgroundColor='#d0bf55'
+        }
+
+        for(let l=0; l<table.children.length; l++){
+            table.children[l].children[td.cellIndex].style.backgroundColor='#6768ab'
+            td.style.backgroundColor='#d0bf55'
+        }
+    }
+
+    td.onmouseout = function(){
+    i%2? td.style.backgroundColor='#e9e9e9': td.style.backgroundColor='#ffffff'
+
+        for(let k=0; k<10; k++){
+            i%2?td.parentElement.children[k].style.backgroundColor='#e9e9e9': td.parentElement.children[k].style.backgroundColor='#ffffff'
+        }
+
+        for(let l=0; l<table.children.length; l++){
+            l%2? table.children[l].children[td.cellIndex].style.backgroundColor='#e9e9e9': table.children[l].children[td.cellIndex].style.backgroundColor='#ffffff'
+        }
+    }
+}
+}
+
+
+// Calc ===========================================================================
+
+
+const div = document.createElement('div')
+document.body.append(div)
+Object.assign(div.style, 
+    {
+        width:'500px',
+        height:'175px',
+        backgroundColor:'#e1ebf1',
+        display:'flex',
+        justifyContent:'center',
+        flexDirection: 'column',
+        alignItems:'center'
+    })
+
+const h1 = document.createElement('h1')
+div.appendChild(h1)
+h1.innerText= 'КОНВЕРТИРОВАНИЕ ЗНАЧЕНИЙ ИЗ PX В EM'
+Object.assign(h1.style,
+    {
+        fontSize:'17px',
+        textAlign:'center',
+        fontFamily:'Helvetica',
+        color:'#273648',
+        margin:'0'
+    })
+
+const inPut = document.createElement('input')
+inPut.id='input'
+inPut.type='number'
+inPut.placeholder='Введите значение в PX'
+div.appendChild(inPut)
+Object.assign(inPut.style,
+    {
+        width:'250px',
+        height:'25px',
+        border:'1px solid',
+        borderColor:'white',
+        marginTop:'15px',
+        textAlign:'center'
+    })
+
+const buttON = document.createElement('button')
+buttON.id='button'
+div.appendChild(buttON)
+Object.assign(buttON.style,
+    {
+        width:'100px',
+        height:'30px',
+        marginTop:'15px',
+        backgroundColor:'#273648',
+        border:'3px solid',
+        borderColor:'white',
+        cursor:'pointer',
+    })
+
+const paragraph = document.createElement('p')
+buttON.appendChild(paragraph)
+paragraph.innerText='КОНВЕРТИРОВАТЬ'
+Object.assign(paragraph.style,
+    {
+        fontSize:'9px',
+        textAlign:'center',
+        fontFamily:'Helvetica',
+        margin:'0',
+        color:'white'
+    })
+
+buttON.onclick = function(){
+    const inputValue = document.getElementById('input').value
+    const pixel = 16
+    let em = ((inputValue*100)/pixel)/100
+    inPut.type='text'
+    document.getElementById('input').value = inputValue + ' px' + ' = ' +  em +' em'
+    Object.assign(inPut.style,{fontWeight:'bold'})
+
+    const link = document.createElement('a')
+    const linkText = document.createTextNode('Еще конвертация?')
+    link.appendChild(linkText)
+    link.href = 'index.html'
+    div.appendChild(link)
+    Object.assign(link.style,
+    {
+        fontSize:'12px',
+        textDecoration:'underline',
+        marginTop:'15px',
+        color:'#273648',
+        fontWeight:'bold',
+        cursor:'pointer'
+    })
+    
+    this.onclick=null
+}
+
+
+// Calc Live ===========================================================================
+
+
+const div = document.createElement('div')
+document.body.append(div)
+Object.assign(div.style, 
+    {
+        width:'500px',
+        height:'175px',
+        backgroundColor:'#e1ebf1',
+        display:'flex',
+        justifyContent:'center',
+        flexDirection: 'column',
+        alignItems:'center',
+    })
+
+const h1 = document.createElement('h1')
+div.appendChild(h1)
+h1.innerText= 'КОНВЕРТИРОВАНИЕ ЗНАЧЕНИЙ ИЗ PX В EM'
+Object.assign(h1.style,
+    {
+        fontSize:'17px',
+        textAlign:'center',
+        fontFamily:'Helvetica',
+        color:'#273648',
+        margin:'0',
+    })
+
+const inPut = document.createElement('input')
+inPut.id='input'
+inPut.type='number'
+inPut.oninput = liveResult
+inPut.placeholder='Введите значение в PX'
+div.appendChild(inPut)
+Object.assign(inPut.style,
+    {
+        width:'250px',
+        height:'25px',
+        border:'1px solid',
+        borderColor:'white',
+        marginTop:'15px',
+        textAlign:'center',
+        color:'#273648',
+    })
+
+const inPutValues = document.createElement('input')
+inPutValues.id='inputValues'
+inPutValues.type='text'
+div.appendChild(inPutValues)
+Object.assign(inPutValues.style,
+    {
+        width:'250px',
+        height:'25px',
+        border:'1px solid',
+        borderColor:'white',
+        marginTop:'15px',
+        textAlign:'center',
+        fontWeight:'bold',
+        color:'#273648',
+        fontSize:'20px'
+    })
+
+function liveResult(){
+    const inputValue = document.getElementById('input').value
+    const pixel = 16
+    let em = ((inputValue*100)/pixel)/100
+    document.getElementById('inputValues').value = em + ' em'
+}

HW#7/index.html

@@ -0,0 +1,12 @@
+<!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="hw7.js"></script>
+</body>
+</html>