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

4-js_basics elena-ambitska #189

Merged
merged 6 commits into from
Oct 28, 2023
Merged

4-js_basics elena-ambitska #189

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
fb3decf
fix: changed content of btn, changed page for return
elena-ambitska Oct 26, 2023
2f47cc5
feat: added basics operations
elena-ambitska Oct 26, 2023
6f93940
fix: added values
elena-ambitska Oct 26, 2023
3557d51
feat: added a bit of an interactive
elena-ambitska Oct 28, 2023
a6a5517
feat: checked on empty values
elena-ambitska Oct 28, 2023
06c3231
feat: added styles
elena-ambitska Oct 28, 2023
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
30 changes: 30 additions & 0 deletions homeworks/olena.ambitska_elena-ambitska/4-basics/basics.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
const FIELD = document.getElementById('field');
const FORM_SUBMIT = document.querySelector('.count__button');

function updateTemplate(num1, num2) {
const TEMPLATE = `
<ul class="counter__template">
<li><b>Additional operation: </b>${num1} + ${num2} = ${Math.round(num1 + num2)};</li>
<li><b>Substract operation: </b>${num1} - ${num2} = ${num1 - num2};</li>
<li><b>Multiplication operation: </b>${num1} * ${num2} = ${Math.round(num1 * num2)};</li>
<li><b>Division operation: </b>${num1} / ${num2} = ${(num1 / num2).toFixed(2)};</li>
<li><b>Modulo: </b>${num1} % ${num2} = ${num1 % num2};</li>
<li><b>Exponentiation operation: </b>${num1} ** ${num2} = ${num1 ** num2};</li>
</ul>
`;

FIELD.innerHTML = '';
FIELD.insertAdjacentHTML('beforeend', TEMPLATE);
}
FORM_SUBMIT.addEventListener('click', (e) => {
e.preventDefault();
const num1 = document.querySelector('.counter__input--first').value;
const num2 = document.querySelector('.counter__input--second').value;

if (num1 === '' || num2 === '') {
FIELD.innerHTML = '<p class="warning">Fill fields by numbers</p>';
return;
}

updateTemplate(+num1, +num2);
});
31 changes: 31 additions & 0 deletions homeworks/olena.ambitska_elena-ambitska/4-basics/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../GamesProject/styles/styles.css">
<link rel="stylesheet" href="styles.css">
<title>Basic JS</title>
</head>
<body>
<main class="counter__section">
<h1 class="section__title">Basic math operation</h1>
<form class="counter">
<div class="form-group">
<label for="value-first"></label>
<input type="number" id="value-first" placeholder="Add the first number" class="counter__input--first input__field" value="">
</div>

<div class="form-group">
<label for="value-second"></label>
<input type="number" id="value-second" placeholder="Add the second number" class="counter__input--second input__field" value="">
</div>

<div class="form-group">
<input type="submit" value="Count" class="count__button primary__button">
</div>
</form>
<div id="field"></div>
</main>
<script src="./basics.js"></script>
</body>
</html>
25 changes: 25 additions & 0 deletions homeworks/olena.ambitska_elena-ambitska/4-basics/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
.counter__section {
margin: 0 auto;
padding: 60px;
}

.counter__section .section__title {
text-align: center;
}

.count__button {
margin-top: 22px;
}

.warning {
margin-top: 24px;
font-size: 26px;
line-height: 1.2;
}

.counter__template {
margin: 20px auto;
display: flex;
flex-direction: column;
row-gap: 8px;
}
6 changes: 3 additions & 3 deletions homeworks/olena.ambitska_elena-ambitska/GamesProject/success.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@
<main class="main login">
<section class="success__page">
<button type="button" class="primary__button">
<a href="login.html" class="back__link">
<img src="././images/arrow-left-min.svg" width="22px" height="22px" alt="go back icon" class="left__arrow">
Go Back</a>
<a href="index.html" class="back__link">
<img src="././images/arrow-left-min.svg" width="22px" height="22px" alt="return to main page icon" class="left__arrow">
Return to homepage</a>
</button>
<img src="./images/unicorn.gif" alt="success unicorn image" class="success__image">
</section>
Expand Down
Loading