DEV Community

No Framework - Eps#0: Don't-Do List

Greetings, companions who find solace in the symphony of keyboard strokes! Today, I embark on a new series in the realm of the Street Community Programmer blog, titled "No Framework." I aim to craft a narrative that unfolds into a simplistic and accessible application without the reliance on frameworks. A touch of whimsy graces this endeavor, for it would be indeed humorous if, under the banner of "No Framework," I were to inadvertently employ one. The potential for such a paradoxical occurrence could indeed elicit a bemused smile.

I shall undertake the creation of a "Don't-Do List App," an endeavor encapsulated within a single .html file, woven with the threads of CSS and JavaScript.

Immersed in the Essence

The nomenclature bestowed upon this segment rests entirely within the bounds of my prerogative!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 400px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        h1 {
            text-align: center;
        }

        input[type="text"] {
            display: block;
            width: 90%;
            padding: 10px;
            margin: 10px auto;
        }

        button {
            display: block;
            margin: 10px auto;
            width: 100%;
            padding: 10px;
            background-color: #007BFF;
            color: #fff;
            border: none;
            cursor: pointer;
        }

        ul {
            list-style-type: none;
            padding: 0;
        }

        li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #ccc;
        }

        button.deleteButton {
            background-color: #FF4444;
            width: 30%;
        }
    </style>
    <title>Don't-Do List App</title>
</head>
<body>
    <div class="container">
        <h1>Don't-Do List</h1>
        <input type="text" id="taskInput" placeholder="Add a new task">
        <button id="addButton">Add</button>
        <ul id="taskList"></ul>
    </div>
    <script>
        const taskInput = document.getElementById('taskInput');
        const addButton = document.getElementById('addButton');
        const taskList = document.getElementById('taskList');

        addButton.addEventListener('click', addTask);

        function addTask() {
            const taskText = taskInput.value;
            if (taskText) {
                const listItem = document.createElement('li');
                listItem.innerHTML = `
                    <span>${taskText}</span>
                    <button class="deleteButton">Delete</button>
                `;
                taskList.appendChild(listItem);
                taskInput.value = '';

                const deleteButton = listItem.querySelector('.deleteButton');
                deleteButton.addEventListener('click', deleteTask);
            }
        }

        function deleteTask(event) {
            const listItem = event.target.parentElement;
            taskList.removeChild(listItem);
        }
    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

The Troupe of Artistry

The makeup artists poised before the grand stage.

<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
        margin: 0;
        padding: 0;
    }

    .container {
        max-width: 400px;
        margin: 20px auto;
        padding: 20px;
        background-color: #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    h1 {
        text-align: center;
    }

    input[type="text"] {
        display: block;
        width: 90%;
        padding: 10px;
        margin: 10px auto;
    }

    button {
        display: block;
        margin: 10px auto;
        width: 100%;
        padding: 10px;
        background-color: #007bff;
        color: #fff;
        border: none;
        cursor: pointer;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        border-bottom: 1px solid #ccc;
    }

    button.deleteButton {
        background-color: #ff4444;
        width: 30%;
    }
</style>
Enter fullscreen mode Exit fullscreen mode

Ahahaha, a playful jest indeed!

Another Ensemble You Know Well

The active mechanics are, as rumored, poised to be extracted from the browser! An endeavor considered unattainable, dear friend!

<script>
    const taskInput = document.getElementById("taskInput");
    const addButton = document.getElementById("addButton");
    const taskList = document.getElementById("taskList");

    addButton.addEventListener("click", addTask);

    function addTask() {
        const taskText = taskInput.value;
        if (taskText) {
            const listItem = document.createElement("li");
            listItem.innerHTML = `
                    <span>${taskText}</span>
                    <button class="deleteButton">Delete</button>
                `;
            taskList.appendChild(listItem);
            taskInput.value = "";

            const deleteButton = listItem.querySelector(".deleteButton");
            deleteButton.addEventListener("click", deleteTask);
        }
    }

    function deleteTask(event) {
        const listItem = event.target.parentElement;
        taskList.removeChild(listItem);
    }
</script>
Enter fullscreen mode Exit fullscreen mode

The Magnum Opus

<button id="addButton">Add</button>
<ul id="taskList"></ul>
Enter fullscreen mode Exit fullscreen mode

Goto Space 🚀

There you have it, a journey complete! Undoubtedly facile, wouldn't you say? The baton now passes to you, dear reader, to seize the limelight and share your creations to be woven into a tapestry that transcends judgment and shall sizzle in the crucible of creativity!

Top comments (0)