Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
document.addEventListener('DOMContentLoaded', () => {
const num1 = document.querySelector('#num1')
const num2 = document.querySelector('#num2')
const addBtn = document.querySelector('#add')
const subBtn = document.querySelector('#sub')
const output = document.querySelector('#output')
function getInputValues() {
const value1 = parseInt(num1.value)
const value2 = +num2.value
return [value1, value2]
}
function addHandler() {
const values = getInputValues()
// console.log(values)
const result = values[0] + values[1]
displayResult(result)
}
function subHandler() {
const values = getInputValues()
const result = values[0] - values[1]
displayResult(result)
}
function displayResult(result) {
output.closest('.card').style.display = 'block'
output.innerHTML = `Результат = ${result}`
console.trace()
}
// console.log('Test', addBtn)
addBtn.addEventListener('click', addHandler)
subBtn.addEventListener('click', subHandler)
})
// setTimeout(() => {
// fetch('https://jsonplaceholder.typicode.com/todos/1')
// .then(response => response.json())
// .then(json => console.log(json))
// }, 5000)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>JavaScript Debugging</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
/>
</head>
<body>
<div class="container">
<h1 style="text-align: center;">Калькулятор</h1>
<div class="row">
<div class="input-field col s6 offset-s3">
<input type="number" placeholder="Число 1" id="num1"/>
</div>
<div class="input-field col s6 offset-s3">
<input type="number" placeholder="Число 2" id="num2"/>
</div>
<div class="col s6 offset-s3" style="margin-bottom: 1rem;">
<button class="btn" id="add" style="background: #c2185b;">+</button>
<button class="btn" id="sub" style="background: #7b1fa2;">-</button>
</div>
</div>
<div class="row">
<div class="card col s6 offset-s3" style="display: none;">
<div class="card-content">
<div class="card-title" id="output"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment