4 years ago · 750fd34490
--- a/11-EX05/index.html
+++ b/11-EX05/index.html
@@ -3,13 +3,33 @@
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="styles/main.css" type="text/css" />
        <title>11-EX05</title>
    </head>
    <body>
        <form action="#">
            <input type="text" name="" id="" />
            <input type="text" name="" id="" />
            <input type="submit" name="calculate" id="" />
        <header>
            <h1>Calculator</h1>
        </header>

        <form action="#" id="input">
            <div id="input-container">
                <div class="input-field">
                    <input type="number" /><input type="button" value="X" />
                </div>
                <div class="input-field">
                    <input type="number" /><input type="button" value="X" />
                </div>
            </div>
            <div id="submit-container">
                <input type="button" name="calculate" value="calculate" />
                <input type="button" name="add-input" value="add input" />
            </div>
        </form>

        <div class="container" id="result">
            <p id="sum">sum:</p>
            <p id="product">product:</p>
        </div>
        <script src="scripts/main.js"></script>
    </body>
 </html>
--- a/11-EX05/scripts/main.js
+++ b/11-EX05/scripts/main.js
@@ -0,0 +1,59 @@
 const form = document.getElementById('input');
 const inputContainer = document.getElementById('input-container');
 const submitContainer = document.getElementById('submit-container');
 let sumResult = document.getElementById('sum');
 let productResult = document.getElementById('product');
 let input = form.querySelectorAll('.input-field');

 function addInputField(event) {
    let newField = document.createElement('div');
    newField.classList.add('input-field');
    newField.innerHTML =
        '<input type="number" /><input type="button" value="X" />';
    inputContainer.appendChild(newField);
 }

 function removeInputField(event) {
    if (event.target.matches('input[type=button]')) {
        let element = event.target.closest('div');
        if (element.parentNode.childElementCount > 2) {
            // https://www.w3schools.com/jsref/prop_element_childelementcount.asp
            element.parentNode.removeChild(element);
            // https://www.abeautifulsite.net/adding-and-removing-elements-on-the-fly-using-javascript
        }
    }
 }

 function calculateSum(array) {
    let result = 0;
    array.forEach(element => {
        result += parseInt(array[element].value);
    });
    sumResult.innerHTML = 'sum: ' + result;
 }

 function calculateProduct(array) {
    let result = 0;
    array.forEach(element => {
        result *= parseInt(array[element].value);
    });
    productResult.innerHTML = 'product: ' + result;
 }

 function updateResults(event) {
    if (
        event.target.matches('input[type="number"]') ||
        event.target.matches('input[name="calculate"]')
    ) {
        let input = form.querySelectorAll('.input-field');
        calculateSum(input);
        calculateProduct(input);
    }
    if (event.target.matches('input[name="add-input"]')) {
        addInputField();
    }
 }

 form.addEventListener('input', updateResults);
 form.addEventListener('click', updateResults);
 submitContainer.addEventListener('click', removeInputField);
--- a/11-EX05/styles/main.css
+++ b/11-EX05/styles/main.css
@@ -0,0 +1,36 @@
 html {
    font-family: sans-serif;
    margin: 0;
    width: 100%;
 }

 header {
    background-color: rgb(255, 120, 0);
    margin: 0 0 2rem 0;
    height: 6rem;
 }

 h1 {
    padding: 2rem;
    color: blue;
 }

 p {
    margin 0;
 }

 form {
    display: flex;
    flex-direction: column;
    width: 30%;
 }

 input {
    margin: 2px;
 }

 .container {
    padding: 0 0 0 5px;
    margin-top: 5px;
    border: 1px solid black;
 }