April Fools Challenge Winners Announced: Top Developers Take Home the Prize

#devchallenge #418challenge #jokes #webdev

April Fools Challenge Winners Announced: Top Developers Take Home the Prize

Every year, the Dev.to community celebrates April Fools’ Day with a lighthearted coding challenge—part puzzle, part prank, and 100% fun. This year’s theme? "Build a Self-Destructing To-Do List"—a hilarious twist on productivity apps where every task vanishes after 5 seconds.

Hundreds of developers participated. Only a few cracked the code (literally). Today, we’re announcing the winners—and walking through how they built their winning entries, step by step.

Let’s dive into the code and learn how to create your own self-destructing to-do list using vanilla JavaScript, HTML, and CSS.

🏆 Meet the Winners

@codeclown99 – Used Web Animations API for smooth fade-out effects.
@devjester – Added sound effects and confetti on deletion.
@nullpointerfun – Built it as a progressive web app with offline mode (even the self-destruction works offline!).

All entries were open-source. Let’s reverse-engineer the core logic.

🛠️ Step 1: Set Up the HTML

Start with a minimal structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Self-Destructing To-Do</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="container">
    <h1>🔥 Self-Destructing To-Do List</h1>
    <p>Tasks vanish in 5 seconds. Good luck!</p>

    <form id="taskForm">
      <input type="text" id="taskInput" placeholder="Enter a task..." required />
      <button type="submit">Add Task</button>
    </form>

    <ul id="taskList"></ul>
  </div>

  <script src="script.js"></script>
</body>
</html>

🎨 Step 2: Style It with CSS

Make it look fun and chaotic—after all, it’s April Fools!

/* style.css */
body {
  font-family: 'Comic Sans MS', cursive, sans-serif;
  background: #ffefef;
  color: #333;
  text-align: center;
}

.container {
  max-width: 600px;
  margin: 40px auto;
  padding: 20px;
}

h1 {
  color: #e74c3c;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

#taskInput {
  padding: 10px;
  width: 70%;
  margin-right: 10px;
  border: 2px dashed #e74c3c;
  border-radius: 4px;
  font-size: 16px;
}

button {
  padding: 10px 15px;
  background: #e74c3c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}

button:hover {
  background: #c0392b;
}

#taskList {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

.task-item {
  background: white;
  margin: 10px auto;
  padding: 12px 20px;
  width: 80%;
  max-width: 400px;
  border-left: 5px solid #f39c12;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  animation: fadeIn 0.5s ease-in;
  position: relative;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(10px); }
}

.task-item.removing {
  animation: fadeOut 0.5s ease-out;
}

💥 Step 3: Add JavaScript Logic

Now for the self-destruction magic.


javascript
// script.js
const form = document.getElementById('taskForm');
const input = document.getElementById('taskInput');
const taskList = document.getElementById('taskList');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  const taskText = input.value.trim();

  if (taskText) {
    addTask(taskText);
    input.value = '';
  }
});

function addTask(text) {
  const li = document.createElement('li');
  li.className = 'task-item';
  li.textContent = text;
  taskList.appendChild(li);

  // Set self-destruct timer
  const timer = setTimeout(() => {
    li.classList.add('removing');
    setTimeout(() => {
      li.remove();
    }, 500); // Match CSS animation duration
  }, 5000); // 5 seconds

  // Optional: Allow manual cancellation (for testing)
  li.addEventListener('click', () => {
    clearTimeout(timer);
    li.classList.add('removing');
    setTimeout(() => li.remove(), 500

---

☕ **Community-Focused**