Last active
September 22, 2023 12:00
-
-
Save vladilenm/570b9c76907f9442ceed1b6f6390380a to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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) | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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