JSFiddle - React, Tailwind, and code Playground

by cokolox

HTML

<div style="padding: 20px;">
    <h2>Destructive Overwrites in Action</h2>
    
    <button id="traditional">Run Traditional Function</button>
    <button id="destructive">Run Destructive Overwrites</button>
    <button id="fetch-data">Fetch Data</button>
    <button id="create-button">Create Button</button>
    <button id="load-settings">Load User Settings</button>
    
    <div id="button-container" style="margin-top: 10px;"></div>
</div>

CSS

button {
    padding: 10px;
    margin: 5px;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

#traditional {
    background-color: #ff5e57;
    color: white;
}

#destructive {
    background-color: #32d296;
    color: white;
}

#fetch-data {
    background-color: #007bff;
    color: white;
}

#create-button {
    background-color: #ff9f1a;
    color: white;
}

#load-settings {
    background-color: #576574;
    color: white;
}

JavaScript

// Example 1: Traditional way (messy)
function processItemTraditional(options) {
    let amount = options.amount !== undefined ? options.amount : 1;
    let termId = options.termId !== undefined ? options.termId : "default-term";
    let itemId = options.itemId !== undefined ? options.itemId : "default-item";
    console.log("Traditional:", amount, termId, itemId);
}

// Example 2: Destructive Overwrites (cleaner)
function processItemDestructive({ amount = 1, termId = "default-term", itemId = "default-item" } = {}) {
    console.log("Destructive Overwrites:", amount, termId, itemId);
}

// Example 3: API request handling with Destructive Overwrites
function fetchData({ endpoint = "/default-endpoint", method = "GET", headers = {} } = {}) {
    console.log(`Fetching data from ${endpoint} with method ${method}`);
}

// Example 4: UI Component with default values
function createButton({ label = "Click Me", color = "blue", size = "medium" } = {}) {
    return `<button style="color:${color}; font-size:${size};">${label}</button>`;
}

// Example 5: Managing User Preferences
function loadUserSettings({ theme = "light", fontSize = 14, language = "en" } = {}) {
    console.log(`Theme: ${theme}, Font: ${fontSize}px, Language: ${language}`);
}

// Event Listeners for UI Demonstration
document.getElementById("traditional").addEventListener("click", function() {
    processItemTraditional({ amount: 5, itemId: "item-123" });
});

document.getElementById("destructive").addEventListener("click", function() {
    processItemDestructive({ amount: 5, itemId: "item-123" });
});

document.getElementById("fetch-data").addEventListener("click", function() {
    fetchData({ endpoint: "/api/data", method: "POST" });
});

document.getElementById("create-button").addEventListener("click", function() {
    document.getElementById("button-container").innerHTML = createButton({ label: "Submit", color: "red" });
});

document.getElementById("load-settings").addEventListener("click", function()...