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
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.
Please sign in to leave a comment.