Using Sandbox module of the Resource Center

Hi all,

We want to implement a custom-created Resource Center. Essentially, we’re aiming to create a checklist that allows us to track the tasks our clients have accomplished, functioning more like a roadmap. It looks something like this:

I’m wondering if anyone has implemented something similar before? I tried to set it up, but it seems the data isn’t being saved. When the client moves to a different window and then returns, all the checkboxes that were selected are refreshed and unchecked again.

 

Below is the code i created.

Could someone please review this and provide feedback on whether it's possible to persist checkbox data in this setup?

 

HTML

<!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>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="todo-container">
        <h1>FP&A Value Roadmapping</h1>
        <ul id="todo-list">
            <li class="todo-header">
                <span>Task</span>
                <span>Tentative Date</span>
            </li>
            <li>
                <input type="checkbox" id="dashboard" class="todo-checkbox">
                <label for="dashboard">Dashboard</label>
                <span class="todo-date"></span>
            </li>
            <li>
                <input type="checkbox" id="cashflow" class="todo-checkbox">
                <label for="cashflow">Cashflow Statement</label>
                <span class="todo-date"></span>
            </li>
            <li>
                <input type="checkbox" id="personnel" class="todo-checkbox">
                <label for="personnel">Personnel Planning</label>
                <span class="todo-date"></span>
            </li>
        </ul>
        <div class="add-item-container">
            <input type="text" id="new-item-input" placeholder="Add new item..." />
            <input type="date" id="new-item-date">
            <button id="add-item-button">Add</button>
        </div>
    </div>

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

 

CSS

 

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.todo-container {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 400px;
}

h1 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 24px;
}

ul {
    list-style-type: none;
    padding: 0;
    margin-bottom: 20px;
}

li {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.todo-header {
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.todo-checkbox {
    margin-right: 10px;
}

label {
    font-size: 18px;
    flex-grow: 1;
}

.todo-date {
    font-size: 14px;
    color: #555;
    margin-left: 10px;
}

.add-item-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#new-item-input {
    width: 50%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}



JS

document.addEventListener('DOMContentLoaded', () => {
    const checkboxes = document.querySelectorAll('.todo-checkbox');
    const todoList = document.getElementById('todo-list');
    const newItemInput = document.getElementById('new-item-input');
    const newItemDate = document.getElementById('new-item-date');
    const addItemButton = document.getElementById('add-item-button');

    // Function to handle checkbox change
    function handleCheckboxChange(event) {
        const checkbox = event.target;
        const label = checkbox.nextElementSibling;
        if (checkbox.checked) {
            label.style.textDecoration = "line-through";
            label.style.color = "#999";
        } else {
            label.style.textDecoration = "none";
            label.style.color = "#000";
        }
    }

    // Function to format date
    function formatDate(dateString) {
        const options = { month: 'short', day: 'numeric', year: '2-digit' };
        const date = new Date(dateString);
        return date.toLocaleDateString('en-US', options);
    }

    // Add event listeners to existing checkboxes
    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', handleCheckboxChange);
    });

    // Add new item to the list
    addItemButton.addEventListener('click', () => {
        const newItemText = newItemInput.value.trim();
        const newItemStartDate = newItemDate.value;

        if (newItemText !== "") {
            // Create a new list item
            const li = document.createElement('li');
            const checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.className = 'todo-checkbox';
            const label = document.createElement('label');
            label.textContent = newItemText;
            const dateSpan = document.createElement('span');
            dateSpan.className = 'todo-date';
            if (newItemStartDate) {
                dateSpan.textContent = formatDate(newItemStartDate);
            }

            // Append the checkbox, label, and date span to the list item
            li.appendChild(checkbox);
            li.appendChild(label);
            li.appendChild(dateSpan);
            todoList.appendChild(li);

            // Clear the input fields
            newItemInput.value = '';
            newItemDate.value = '';

            // Add event listener to the new checkbox
            checkbox.addEventListener('change', handleCheckboxChange);
        }
    });

    // Allow pressing Enter to add the item
    newItemInput.addEventListener('keypress', (event) => {
        if (event.key === 'Enter') {
            addItemButton.click();
        }
    });
}); 





Thanks for the help!

 

-Aakash

0

Comments

1 comment
  • The simplest way I can think of to store the status of the checkboxes would be to store this in session or local storage of the browser. You'd then need to check this source when rendering the guide so it's up-to-date.

    0

Please sign in to leave a comment.

Didn't find what you were looking for?

New post