Clash Calculator- Enter Max Slots and the numbers of each troop type Character S

Question

Clash Calculator- Enter Max Slots and the numbers of each troop type Character Slots Needed Elixir Needed Dark Elixir Needed Numb 10000 100 500 10000 32000 500 33000 R2 - Do the calculation on the fly: When the user enters a number automatically update the Total Elixir, Total Dark and Total slots they selected. For example, if select 5 giants: Total Elixir is 15000 (3000*5) and total slots is 25 (5*5) 10 90 50 b. When user changes 'max slots' automatically update all the totals. Generate an alert if their max Slots is LT the Number of units. 30 c. generate alert if user enters negative max slot:s tal Slotsd. generate alert if they enter more armies than lax Slots otal Dark Max slots' (For example they set max slots to 100 and enter 80 giants) e. generate an alert if user enters a negative

Explanation / Answer

clash-of- clan-calculator.js

var tempCharacterArray; //temp array to store previous calculations
var tempMaxSlots; //temp variable to store previous max slots value

//constructor for the creating a character object
var Character = function (characterType, slotsNeeded, elixirsNeeded, darkElixirsNeeded) {
    this.characterType = characterType;
    this.totalNumberOfUnits = document.getElementById(characterType).value;
    this.totalSlotsNeeded = this.totalNumberOfUnits * slotsNeeded;
    this.totalElixirsNeeded = this.totalNumberOfUnits * elixirsNeeded;
    this.totalDarkElixirsNeeded = this.totalNumberOfUnits * darkElixirsNeeded;

};

//creates all the character objects
function createCharacters() {
    var giant = new Character("giant", 5, 3000, 0);
    var healer = new Character("healer", 14, 10000, 0);
    var barb = new Character("barb", 1, 200, 0);
    var arch = new Character("arch", 1, 400, 0);
    var goblin = new Character("goblin", 1, 100, 0);
    var wizard = new Character("wizard", 4, 3500, 0);
    var bomber = new Character("bomber", 2, 3000, 0);
    var pekka = new Character("pekka", 25, 32000, 0);
    var balloon = new Character("balloon", 5, 3500, 0);
    var dragon = new Character("dragon", 20, 33000, 0);
    var minion = new Character("minion", 2, 0, 10);
    var hog = new Character("hog", 5, 0, 65);
    var lava = new Character("lava", 30, 0, 390);
    var witch = new Character("witch", 8, 0, 250);
    var gollum = new Character("gollum", 30, 0, 450);

    return [giant, healer, barb, arch, goblin, wizard, bomber, pekka, balloon, dragon, minion, hog,
        lava, witch, gollum];
}

function initialize() {

    var characterArray = createCharacters();
    var totalSlots = calculateTotalSlots(characterArray);
    var maxSlots = document.getElementById("max-slots").value;
    validate(maxSlots, totalSlots, characterArray);
}

//validates user input
function validate(maxSlots, totalSlots, characterArray) {
    var message = "";
    var checkValid = true;

    if (maxSlots > 250 || maxSlots < 0) {
        checkValid = false;
        message = " Max Slots must be positive and less than or equal to 250 ";
    }

    if (totalSlots > maxSlots) {
        checkValid = false;
        message = " Total slots must not be greater than max slots";
    }

    //checks if the user input a negative value for the number of units
    if (characterArray.some(function (e) {
            return e.totalNumberOfUnits < 0;
        })) {
        checkValid = false;
        message = " Number of units must not be negative"
    }

    //updates the DOM based on if the checkValid flag is true or false
    //also alerts the user of any errors and reverts input to previous value if the user input fails validation
    if (checkValid === false) {
        characterArray = tempCharacterArray.slice();
        maxSlots = tempMaxSlots;
        //generates error message
        alert(message);

        //reverts user input to previously entered value
        characterArray.forEach(function (e) {
            document.getElementById(e.characterType).value = e.totalNumberOfUnits;
        });

        document.getElementById("max-slots").value = maxSlots;
        //updates totals after user input was reverted
        calculateTotals(characterArray);
    }
    else {
        tempCharacterArray = characterArray.slice();
        tempMaxSlots = maxSlots;
        calculateTotals(characterArray);
    }
}

//calculates the totals for elixirs, dark elixirs, and slots
function calculateTotals(characterArray) {
    var totalElixirs = characterArray.reduce(function (a, b) {
        return a + b.totalElixirsNeeded
    }, 0);

    var totalDarkElixirs = characterArray.reduce(function (a, b) {
        return a + b.totalDarkElixirsNeeded
    }, 0);

    document.getElementById("total-slots").innerHTML = calculateTotalSlots(characterArray);
    console.log(document.getElementById("total-elixirs").innerHTML = totalElixirs);
    console.log(document.getElementById("total-dark-elixirs").innerHTML = totalDarkElixirs);
}

function calculateTotalSlots(characterArray) {
    return characterArray.reduce(function (a, b) {
        return a + b.totalSlotsNeeded
    }, 0);
}

clash-of-clan-calculator.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Our first responsive web page with HTML5 and CSS3</title>
</head>
<Style>

    #title {
        font-weight: bold;
        font-size: 18pt;
    }

    #title-description {
        font-size: 12pt;
        color: #554aff;
    }

    #totals {
        font-weight: bold;
        height: 85px;
    }

    table {
        background-color: darkgray;
    }

    body {
        background-color: cadetblue
    }

    img {
        height: 40px;
        width: 40px;
    }

    table {
        border-collapse: collapse;
    }

    td {
        min-width: 150px;
        max-width: 150px;
    }

    footer {
        font-size: 10pt;
        color: red;
    }

    input {
        width: 95%;
    }

</Style>
<body>
<span id="title">Clash Calculator</span> <span id="title-description">- Enter Max Slots and the numbers of each

troop type</span>

<table border='1'>

    <tr>
        <th> Character</th>
        <th> Slots Needed</th>
        <th> Elixir Needed</th>
        <th> Dark Elixir Needed</th>
        <th>Numb</th>
    </tr>
    <tr>
        <td><img src="img/giant.gif"></td>
        <td>5</td>
        <td>3000</td>
        <td>0</td>
        <td><label for="giant"></label><input id="giant" type="number" name="healer" min="1"
                                              max="30" size='3'></td>
    </tr>
    <tr>
        <td><img src="img/barb.gif"></td>
        <td>1</td>
        <td>200</td>
        <td>0</td>
        <td><input id="barb" type="number" name="healer" min="1" max="30" size='3'></td>
    </tr>
    <tr>
        <td><img src="img/arch.gif"></td>
        <td>1</td>
        <td>400</td>
        <td>0</td>
        <td><input id="arch" type="number" name="healer" min="1" max="30" size='3'></td>
    </tr>
    <tr>
        <td><img src="img/goblin.gif"></td>
        <td>1</td>
        <td>100</td>
        <td>0</td>
        <td><input id="goblin" type="number" name="healer" min="1" max="30" size='3'></td>
    </tr>
    <tr>
        <td><img src="img/wizard.gif"></td>
        <td>4</td>
        <td>3500</td>
        <td>0</td>
        <td><input id="wizard" type="number" name="healer" min="1" max="30" size='3'></td>
    </tr>
    <tr>
        <td><img src="img/bomber.gif"></td>
        <td>2</td>
        <td>3000</td>
        <td>0</td>
        <td><input id="bomber" type="number" name="healer" min="1" max="30" size='3'></td>
    </tr>
    <tr>
        <td><img src="img/healer.gif"></td>
        <td>14</td>
        <td>10000</td>
        <td>0</td>
        <td><input id="healer" type="number" name="healer" min="1" max="30" size='3'></td>
    </tr>
    <tr>
        <td><img src="img/pekka.gif"></td>
        <td>25</td>
        <td>32000</td>
        <td>0</td>
        <td><input id="pekka" type="number" name="healer" min="1" max="30" size='3'></td>
    </tr>
    <tr>
        <td><img src="img/balloon.gif"></td>
        <td>5</td>
        <td>3500</td>
        <td>0</td>
        <td><input id="balloon" type="number" name="healer" min="1" max="30" size='3'></td>
    </tr>
    <tr>
        <td><img src="img/dragon.gif"></td>
        <td>20</td>
        <td>33000</td>
        <td>0</td>
        <td><input id="dragon" type="number" name="healer" min="1" max="30" size='3'></td>
    </tr>
    <tr>
        <td><img src="img/minnion.gif"></td>
        <td>2</td>
        <td>0</td>
        <td>10</td>
        <td><input id="minion" type="number" name="healer" min="1" max="30" size='3'></td>
    </tr>
    <tr>
        <td><img src="img/hogs.gif"></td>
        <td>5</td>
        <td>0</td>
        <td>65</td>
        <td><input id="hog" type="number" name="healer" min="1" max="30" size='3'></td>
    </tr>
    <tr>
        <td><img src="img/lava.gif"></td>
        <td>30</td>
        <td>0</td>
        <td>390</td>
        <td><input id="lava" type="number" name="healer" min="1" max="30" size='3'></td>
    </tr>
    <tr>
        <td><img src="img/witch.gif"></td>
        <td>8</td>
        <td>0</td>
        <td>250</td>
        <td><input id="witch" type="number" name="healer" min="1" max="30" size='3'></td>
    </tr>
    <tr>
        <td><img src="img/gollum.gif"></td>
        <td>30</td>
        <td>0</td>
        <td>450</td>
        <td><input id="gollum" type="number" name="healer" min="1" max="30" size='3'></td>
    </tr>
    <tr id="totals">
        <td><img src="img/total.gif"></td>
        <td>Max Slots<br/><input id="max-slots" type="number"

name="max" min="1" max="250"
                                 size='3' maxlength="3" value="220">
        </td>
        <td>Total Elixir <br><span id="total-elixirs">0</span></td>
        <td>Total Dark <br/><span id="total-dark-elixirs">0</span></td>
        <td>Total Slots<br/><span id="total-slots">0</span></td>
    </tr>
</table>
</body>
<script src="js/clash-of-clan-calculator.js"></script>
</html>

Related Questions

Navigate

• Browse (All)
• Browse C
• Subjects

---