DEV Community

Street Community Programmer profile image Imam Ali Mustofa
Imam Ali Mustofa for Street Community Programmer

Posted on

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

#codenewbie #learning #webdev #jokes

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)