<div id="container"><div>

<script src="26b39.js"></script>
<script src="26b41.js"></script>

<script>
// Instantiate containers, output textarea, and buttons
const cnt = getContainer("container");
const txa = createTextarea("text-output");
const btnDiv = createDiv("button-container");
const oBtn = createButton("o-button", "Octopus");
const rBtn = createButton("r-button", "Rabbit");
const sBtn = createButton("s-button", "Snail");
const tBtn = createButton("t-button", "Turtle");
const xBtn = createButton("x-button", "Newline");

// Append textarea to container
cnt.append(txa);
cnt.append(btnDiv);
btnDiv.append(oBtn);
btnDiv.append(rBtn);
btnDiv.append(sBtn);
btnDiv.append(tBtn);
btnDiv.append(xBtn);

// Change elements flex value
changeElementsFlex(
  ["text-output", "3"],
  ["button-container", "1"]  
);

// Bind consolex output to textarea and set EOL character
consolex.setOutput(txa);
consolex.setEOL("");

// Define list of animal icons
const animals = ["🐙", "🐇", "🐌", "🐢"];

// Set onclick event to each button
oBtn.addEventListener("click", () => {consolex.log(animals[0]);});
rBtn.addEventListener("click", () => {consolex.log(animals[1]);});
sBtn.addEventListener("click", () => {consolex.log(animals[2]);});
tBtn.addEventListener("click", () => {consolex.log(animals[3]);});
xBtn.addEventListener("click", () => {consolex.log("\n");});
</script>

/**
 * 26b41.js
 * Helper functions for butiran-x/26b41 note.
 *
 * Author: Sparisoma Viridi (https://github.com/dudung)
 * Created: 2026-02-17
 *
 * Exports:
 * - createDiv(id)
 * - changeElementsFlex(...args)
 * - createButton(id, caption)
 */


/**
* Creates div element for container of other elements and applies standardized container styling.
*
* @param {string} id - The id of the div element.
* @returns {HTMLDivElement} The styled div element.
*
* @example
* const btnDiv = createDiv("button-container");
*/
function createDiv(id) {
  /** @type {HTMLDivElement} */
  const el = document.createElement("div");
  
  el.id = id;
  
  const styles = {
    flex: "1",
    background: "var(--box-bg)",
  };
  
  Object.assign(el.style, styles);
  
  return el;
}


/**
 * Changes flex value of some elements.
 * @param {...any} args - [string, string] Pairs of element id and flex value.
 * @returns {void}
 *
 * @example
 * changeElementsFlex(["el-1", "2"], ["el-2", "5"]);
 */
function changeElementsFlex(...args) {
  for(arg of args) {
    const el = document.getElementById(arg[0]);
    const flex = arg[1];
    el.style.flex = flex;
  }
}


/**
 * Creates button element and applies standardized button styling.
 *
 * @param {string} id - The id of the button element.
 * @param {string} caption - The caption of the button element.
 * @returns {HTMLButtonElement} The styled button element.
 *
 * @example
 * const btn = createButton("start-btn", "Start");
*/
function createButton(id, caption) {
  /** @type {HTMLButtonElement} */
  const el = document.createElement("button");
  
  el.id = id;
  el.innerHTML = caption;
  
  const styles = {
    display: "block",
    width: "100%",
    boxSizing: "border-box",
  };
  
  Object.assign(el.style, styles);
  
  return el;
}


// marker: 26b41.js
(() => {
  console.log("[marker] 26b41.js loaded");
})();