Javascript 4 - Array

Part 1

Task 1.1: List the Fruits

Open HTML File

<!DOCTYPE html>
<html>
<head>
    <title>Task 1.1</title>
    <script>
        var fruit = [];
        function addFruit() {
            var s, i;
            fruit[fruit.length] = document.getElementById("textinput").value;
            s = "<ul>";
            for (i = 0; i < fruit.length; i++) {
                s += "<li>" + fruit[i] + "</li>";
            }
            s += "</ul>";
            document.getElementById("result").innerHTML = s;
        }
    </script>
</head>
<body>
    Input a fruit that you like:
    <input type="text" id="textinput" />
    <button id="button_add" onclick="addFruit();">Add</button>
    <h2>The fruits that you like</h2>
    <div id="result"></div>
</body>
</html>

Task 1.2: Calculate Fibonacci Numbers

Open HTML File

<!DOCTYPE html>
<html>
<head>
    <title>Task 1.2</title>
    <script>
        function generateFibonacci() {
            var F = [1, 1];
            var input, s, i, N;
            input = document.getElementById("textinput").value;
            
            if (isNaN(input) || input.trim() === "") {
                s = "Please enter a number!";
            } else {
                N = Number(input);
                if (N !== Math.floor(N)) {
                    s = "Please enter an integer!";
                } else if (N <= 0) {
                    s = "Please enter a positive integer!";
                } else {
                    for (i = 2; i < N; i++) {
                        F[i] = F[i-1] + F[i-2];
                    }
                    s = "The first " + N + " Fibonacci number(s): <br/>";
                    for (i = 0; i < N; i++) {
                        s += F[i] + "<br/>";
                    }
                }
            }
            document.getElementById("result").innerHTML = s;
        }
    </script>
</head>
<body>
    Enter a non-negative integer:
    <input type="text" id="textinput" />
    <button id="button_generate" onclick="generateFibonacci();">Generate</button>
    <div id="result"></div>
</body>
</html>

Task 1.3: Compute Distributions of Dice Throws

Open HTML File

<!DOCTYPE html>
<html>
<head>
    <title>Task 1.3</title>
    <script>
        function init() {
            var sum = [];
            var i, d, s;
            
            for (i = 1; i <= 6; i++) {
                sum[i] = 0;
            }
            
            s = "The outcomes of the dice throws: <br/>";
            for (i = 1; i <= 20; i++) {
                d = Math.floor(Math.random() * 6) + 1;
                sum[d]++;
                s += i + ". " + d + "<br/>";
            }
            
            s += "<br/> The distribution of the dice outcomes: <br/>";
            for (i = 1; i <= 6; i++) {
                s += i + ": " + sum[i] + "<br/>";
            }
            document.getElementById("result").innerHTML = s;
        }
    </script>
</head>
<body onload="init();">
    <div id="result"></div>
</body>
</html>

Part 2

Task 2.1: Array Ordering (FIFO/LIFO & Max 4)

Open HTML File

<!DOCTYPE html>
<html>
<head>
    <title>Task 2.1</title>
    <script>
        var fruit = [];
        
        function addFruit() {
            var inputVal = document.getElementById("textinput").value;
            if(inputVal.trim() !== "") {
                fruit.push(inputVal);
                document.getElementById("textinput").value = "";
                displayFruits(true);
            }
        }

        function displayFruits(isFIFO) {
            var s = "<ul>";
            var start = Math.max(0, fruit.length - 4); 
            var fruitsToDisplay = fruit.slice(start);
            
            if (!isFIFO) {
                fruitsToDisplay.reverse();
            }

            for (var i = 0; i < fruitsToDisplay.length; i++) {
                s += "<li>" + fruitsToDisplay[i] + "</li>";
            }
            s += "</ul>";
            document.getElementById("result").innerHTML = s;
        }
    </script>
</head>
<body>
    Input a fruit that you like:
    <input type="text" id="textinput" />
    <button id="button_add" onclick="addFruit();">Add</button>
    <br/><br/>
    <button onclick="displayFruits(true);">First In First Out</button>
    <button onclick="displayFruits(false);">Last In First Out</button>
    
    <h2>The fruits that you like</h2>
    <div id="result"></div>
</body>
</html>

Task 2.2: Frog in a Well (Array Simulation)

Open HTML File

<!DOCTYPE html>
<html>
<head>
    <title>Task 2.2</title>
    <script>
        function init() {
            var morningPositions = [];
            var eveningPositions = [];
            var currentHeight = 0;
            var day = 0;
            var s = "<b>Frog Escape Log:</b><br/><br/>";
            
            while (currentHeight < 30) {
                day++;
                
                currentHeight += 3;
                morningPositions.push(currentHeight);
                
                if (currentHeight >= 30) {
                    eveningPositions.push(currentHeight);
                    break;
                }
                
                currentHeight -= 2;
                eveningPositions.push(currentHeight);
            }
            
            for (var i = 0; i < day; i++) {
                s += "Day " + (i + 1) + ": ";
                s += "Morning position = " + morningPositions[i] + "m, ";
                if (i === day - 1 && morningPositions[i] >= 30) {
                    s += "Evening position = Escaped!<br/>";
                } else {
                    s += "Evening position = " + eveningPositions[i] + "m<br/>";
                }
            }
            s += "<br/><b>Total days to escape: " + day + "</b>";
            document.getElementById("result").innerHTML = s;
        }
    </script>
</head>
<body onload="init();">
    <div id="result"></div>
</body>
</html>

Task 2.3: Distribution of Two Dice Throws

Open HTML File

<!DOCTYPE html>
<html>
<head>
    <title>Task 2.3</title>
    <script>
        function init() {
            var sumDist = [];
            for (var i = 2; i <= 12; i++) {
                sumDist[i] = 0;
            }
            
            var allAppeared = false;
            var count = 0;
            var s = "The outcomes of the dice throws: <br/>";
            var d1, d2, currentSum;
            
            while (!allAppeared) {
                count++;
                d1 = Math.floor(Math.random() * 6) + 1;
                d2 = Math.floor(Math.random() * 6) + 1;
                currentSum = d1 + d2;
                sumDist[currentSum]++;
                
                s += count + ". Dice 1: " + d1 + ", Dice 2: " + d2 + " (Sum: " + currentSum + ")<br/>";
                
                allAppeared = true;
                for (var j = 2; j <= 12; j++) {
                    if (sumDist[j] === 0) {
                        allAppeared = false;
                        break;
                    }
                }
            }
            
            s += "<br/> The distribution of the sum of the dice: <br/>";
            for (var k = 2; k <= 12; k++) {
                s += "Sum " + k + ": " + sumDist[k] + " time(s)<br/>";
            }
            document.getElementById("result").innerHTML = s;
        }
    </script>
</head>
<body onload="init();">
    <div id="result"></div>
</body>
</html>