Merge pull request #189 from MastersAcademy/4-js_basics_elena-ambitska

4-js_basics elena-ambitska
MastersAcademy · Oct 28, 2023 · 15adc6e · 15adc6e
2 parents 281a3f6 + 06c3231
commit 15adc6e
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 3 deletions.
diff --git a/homeworks/olena.ambitska_elena-ambitska/4-basics/basics.js b/homeworks/olena.ambitska_elena-ambitska/4-basics/basics.js
@@ -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);
+});
diff --git a/homeworks/olena.ambitska_elena-ambitska/4-basics/index.html b/homeworks/olena.ambitska_elena-ambitska/4-basics/index.html
@@ -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>
diff --git a/homeworks/olena.ambitska_elena-ambitska/4-basics/styles.css b/homeworks/olena.ambitska_elena-ambitska/4-basics/styles.css
@@ -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;
+}
diff --git a/homeworks/olena.ambitska_elena-ambitska/GamesProject/success.html b/homeworks/olena.ambitska_elena-ambitska/GamesProject/success.html
@@ -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>