Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Done #10

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Done #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9daa1f4
Done
VlSal Jun 10, 2023
e39d35f
Add files via upload
VlSal Jan 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
91 changes: 87 additions & 4 deletions bjs/07_Number_and_string/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,12 @@
<meta charset="UTF-8">
<title>Калькулятор</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<!-- Создаем контейнеры -->
<div class="container">
<div class="row calc-row align-items-center">
<div class="col col-md-4 offset-md-4">
Expand All @@ -17,11 +18,93 @@
<div class="card-body">
<input class="form-control input-window" id="inputWindow" value="">
<div class="row no-gutters">
<div class="col">
<button class="btn btn-outline-danger form-control" id="btn_clr">C</button>
<!-- Кнопка сброса -->
<div class="col" id="col" >
<button class="btn btn-danger form-control" id="btn_clr">C</button> <!--класс указанный готовое решение кнопки с bootstrap-->
</div>
</div>
</div>


<div class="row no-gutters">
<!-- Кнопка 1 -->
<div class="col" id="col">
<button class="btn btn-primary form-control" id="btn_1">1</button> <!--класс указанный готовое решение кнопки с bootstrap-->
</div>
<!-- Кнопка 2 -->
<div class="col" id="col" >
<button class="btn btn-primary form-control" id="btn_2">2</button> <!--класс указанный готовое решение кнопки с bootstrap-->
</div>
<!-- Кнопка 3 -->
<div class="col" id="col">
<button class="btn btn-primary form-control" id="btn_3">3</button> <!--класс указанный готовое решение кнопки с bootstrap-->
</div>
<!-- Кнопка + -->
<div class="col" id="col">
<button class="btn btn-primary form-control" id="btn_sum">+</button>
</div>
</div>


<div class="row no-gutters">
<!-- Кнопка 4 -->
<div class="col" id="col">
<button class="btn btn-primary form-control" id="btn_4">4</button> <!--класс указанный готовое решение кнопки с bootstrap-->
</div>
<!-- Кнопка 5 -->
<div class="col" id="col">
<button class="btn btn-primary form-control" id="btn_5">5</button> <!--класс указанный готовое решение кнопки с bootstrap-->
</div>
<!-- Кнопка 6 -->
<div class="col" id="col">
<button class="btn btn-primary form-control" id="btn_6">6</button> <!--класс указанный готовое решение кнопки с bootstrap-->
</div>
<!-- Кнопка - -->
<div class="col" id="col">
<button class="btn btn-primary form-control" id="btn_def">-</button>
</div>
</div>


<div class="row no-gutters">
<!-- Кнопка 7 -->
<div class="col" id="col">
<button class="btn btn-primary form-control" id="btn_7">7</button> <!--класс указанный готовое решение кнопки с bootstrap-->
</div>
<!-- Кнопка 8 -->
<div class="col" id="col">
<button class="btn btn-primary form-control" id="btn_8">8</button> <!--класс указанный готовое решение кнопки с bootstrap-->
</div>
<!-- Кнопка 9 -->
<div class="col" id="col">
<button class="btn btn-primary form-control" id="btn_9">9</button> <!--класс указанный готовое решение кнопки с bootstrap-->
</div>
<!-- Кнопка * -->
<div class="col" id="col">
<button class="btn btn-primary form-control" id="btn_multiply">*</button>
</div>
</div>


<div class="row no-gutters">

<!-- Кнопка = (calc) при нажатии на которую будет результат -->
<div class="col" id="col">
<button class="btn btn-primary form-control" id="btn_calc">=</button>
</div>
<!-- Кнопка 0 -->
<div class="col" id="col">
<button class="btn btn-primary form-control" id="btn_0">0</button> <!--класс указанный готовое решение кнопки с bootstrap-->
</div>
<!-- Кнопка sqrt -->
<div class="col" id="col">
<button class="btn btn-primary form-control" id="btn_sqrt">&radic;</button> <!--класс указанный готовое решение кнопки с bootstrap-->
</div>
<!-- Кнопка / -->
<div class="col" id="col">
<button class="btn btn-primary form-control" id="btn_divide">/</button> <!--класс указанный готовое решение кнопки с bootstrap-->
</div>
</div>
</div>
</div>
</div>
</div>
Expand Down
121 changes: 118 additions & 3 deletions bjs/07_Number_and_string/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,127 @@
let lastOperand = 0;
let operation = null;
let lastOperand = 0; //последний операнд
let operation = null;//выбранная операция

const inputWindow = document.getElementById('inputWindow');
const inputWindow = document.getElementById('inputWindow'); //окно, где отображается число


// Кнопка 1. Добовляет к inputWindow 1 по клику
document.getElementById('btn_1').addEventListener('click', function () {
inputWindow.value += '1';
})
// Кнопка 2. Добовляет к inputWindow 1 по клику
document.getElementById('btn_2').addEventListener('click', function () {
inputWindow.value += '2';
})
// Кнопка 3. Добовляет к inputWindow 1 по клику
document.getElementById('btn_3').addEventListener('click', function () {
inputWindow.value += '3';
})
// Кнопка 4. Добовляет к inputWindow 1 по клику
document.getElementById('btn_4').addEventListener('click', function () {
inputWindow.value += '4';
})
// Кнопка 5. Добовляет к inputWindow 1 по клику
document.getElementById('btn_5').addEventListener('click', function () {
inputWindow.value += '5';
})
// Кнопка 6. Добовляет к inputWindow 1 по клику
document.getElementById('btn_6').addEventListener('click', function () {
inputWindow.value += '6';
})
// Кнопка 7. Добовляет к inputWindow 1 по клику
document.getElementById('btn_7').addEventListener('click', function () {
inputWindow.value += '7';
})
// Кнопка 8. Добовляет к inputWindow 1 по клику
document.getElementById('btn_8').addEventListener('click', function () {
inputWindow.value += '8';
})
// Кнопка 9. Добовляет к inputWindow 1 по клику
document.getElementById('btn_9').addEventListener('click', function () {
inputWindow.value += '9';
})
// Кнопка 0. Добовляет к inputWindow 1 по клику
document.getElementById('btn_0').addEventListener('click', function () {
inputWindow.value += '0';
})


// Кнопка суммы запоминает введенное число lastOperand, запоминается операция operation, очищается поле ввода
document.getElementById('btn_sum').addEventListener('click', function () {
lastOperand = parseInt(inputWindow.value); //чтобы исключить конкотенацию операнды переводим в числовой вид с помощью parseInt();
operation = 'sum';
inputWindow.value = '';
})

// Кнопка разности запоминает введенное число lastOperand, запоминается операция operation, очищается поле ввода
document.getElementById('btn_def').addEventListener('click', function () {
lastOperand = parseInt(inputWindow.value);
operation = 'def';
inputWindow.value = '';
})


// Кнопка умножения запоминает введенное число lastOperand, запоминается операция operation, очищается поле ввода
document.getElementById('btn_multiply').addEventListener('click', function () {
lastOperand = parseInt(inputWindow.value);
operation = 'btn_multiply';
inputWindow.value = '';
})

// Кнопка деления запоминает введенное число lastOperand, запоминается операция operation, очищается поле ввода
document.getElementById('btn_divide').addEventListener('click', function () {
lastOperand = parseInt(inputWindow.value);
operation = 'btn_divide';
inputWindow.value = '';
})

// Кнопка квадратного корня запоминает введенное число lastOperand, запоминается операция operation, очищается поле ввода
document.getElementById('btn_sqrt').addEventListener('click', function () {
lastOperand = parseInt(inputWindow.value);
operation = 'btn_sqrt';
inputWindow.value = '';
})

// Находим элемент по ID слушаем по клику если действие соответствует необходимому, а затем(ниже) применяем операцию к числу которое в памяти от числа котороое введено. Затем все очищаем и выводим результат
document.getElementById('btn_calc').addEventListener('click', function () {
if(operation==='sum'){
const result = lastOperand + parseInt(inputWindow.value);
operation = null;
lastOperand = 0;
inputWindow.value = result;
}
if(operation==='def'){
const result = lastOperand - parseInt(inputWindow.value);
operation = null;
lastOperand = 0;
inputWindow.value = result;
}
if(operation==='btn_multiply'){
const result = lastOperand * parseInt(inputWindow.value);
operation = null;
lastOperand = 0;
inputWindow.value = result;
}
if(operation==='btn_divide'){
const result = lastOperand / parseInt(inputWindow.value);
operation = null;
lastOperand = 0;
inputWindow.value = result;
}
if(operation==='btn_sqrt'){
const result = Math.sqrt(parseInt(inputWindow.value));
operation = null;
lastOperand = 0;
inputWindow.value = result;
}


})
// Очистка экрана с навесом на кнопку клик события
document.getElementById('btn_clr').addEventListener('click', function () {
lastOperand = 0;
operation = null;
// Ниже очищение поля
inputWindow.value = '';
})

8 changes: 8 additions & 0 deletions bjs/07_Number_and_string/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,17 @@

.calc-row {
height: 100vh;
font-family: 'Share Tech Mono', monospace;
}
.card{
background: black;
}


.input-window {
text-align: end;
font-size: x-large;
}
#col{
border: 1px solid;
}
Loading