sergeyKa73/JavaScript - Отладка и Дебаг.html

## app.js
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)


## JavaScript - Отладка и Дебаг.html
<!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>
	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>