Building a Simple Project with CoffeeScript

November 20, 2024

coffeescript

Building a Simple Project with CoffeeScript

In this final post, we will put everything we’ve learned into practice by building a simple project using CoffeeScript. This hands-on project will reinforce your knowledge and showcase the capabilities of CoffeeScript.

Project Overview

For our project, we will create a simple to-do list application. This app will allow users to add tasks, mark them as completed, and remove them from the list. We will use CoffeeScript to write our application logic and HTML for the user interface.

Setting Up the Project

First, create a new directory for your project and navigate into it:

mkdir todo-app
cd todo-app

Next, create two files: index.html for the HTML structure and app.coffee for our CoffeeScript code.

Creating the HTML Structure

In index.html, we will set up a basic structure for our to-do list app:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/coffeescript/2.5.1/coffeescript.min.js"></script>
    <script src="app.coffee"></script>
</head>
<body>
    <h1>My To-Do List</h1>
    <input type="text" id="taskInput" placeholder="Add a new task...">
    <button id="addTaskBtn">Add Task</button>
    <ul id="taskList"></ul>
</body>
</html>

Writing the CoffeeScript Code

Now, let’s write the CoffeeScript code in app.coffee to handle adding, completing, and removing tasks:

tasks = []

addTask = (task) ->
    tasks.push(task)
    renderTasks()

removeTask = (index) ->
    tasks.splice(index, 1)
    renderTasks()

completeTask = (index) ->
    tasks[index].completed = !tasks[index].completed
    renderTasks()

renderTasks = () ->
    taskList = document.getElementById('taskList')
    taskList.innerHTML = ''
    for task, index in tasks
        li = document.createElement('li')
        li.textContent = task.name
        if task.completed
            li.style.textDecoration = 'line-through'
        li.onclick = -> completeTask(index)
        taskList.appendChild(li)

document.getElementById('addTaskBtn').onclick = ->
    taskInput = document.getElementById('taskInput')
    taskName = taskInput.value.trim()
    if taskName
        addTask({name: taskName, completed: false})
        taskInput.value = ''

How the Code Works

1. We define an empty array tasks to store our task objects.
2. The addTask function adds a new task to the array and calls renderTasks to update the UI.
3. The removeTask function removes a task from the array and updates the UI.
4. The completeTask function toggles the completed state of a task.
5. The renderTasks function renders the list of tasks in the UI, applying a strikethrough style to completed tasks.
6. Finally, we set up an event listener on the ‘Add Task’ button to add a new task when clicked.

Running the Project

To run your project, simply open index.html in your web browser. You should see a simple interface where you can add tasks to your to-do list. Click on a task to mark it as completed, and refresh the page to reset the list.

Conclusion

Congratulations! You have built a simple to-do list application using CoffeeScript. This project has allowed you to apply the concepts you’ve learned throughout this course. CoffeeScript’s concise syntax and powerful features make it a great choice for writing JavaScript applications. Keep experimenting with CoffeeScript and explore more complex projects as you continue your coding journey!