New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Broken state of the Todo App - needs regex escape step for "
on the id
#54524
Comments
This is nice finding. I wasn't able though to confirm single quote A little more context, after item with double quote is added - ie. <div class="task" id="" f"-1714051100417"="">
<p><strong>Title:</strong> "f"</p>
<p><strong>Date:</strong> </p>
<p><strong>Description:</strong> </p>
<button onclick="editTask(this)" type="button" class="btn">Edit</button>
<button onclick="deleteTask(this)" type="button" class="btn">Delete</button>
</div> With the messed up |
Hi @code-liana ! Thanks for reporting this I think it would be better to create a separate function for removing special characters and trim the ends for whitespace const removeSpecialChars = (val) => {
return val.trim().replace(/[^A-Za-z0-9\-\s]/g, '')
}
const addOrUpdateTask = () => {
addOrUpdateTaskBtn.innerText = "Add Task";
const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id);
const taskObj = {
id: `${removeSpecialChars(titleInput.value).toLowerCase().split(" ").join("-")}-${Date.now()}`,
title:removeSpecialChars(titleInput.value) ,
date: dateInput.value,
description: removeSpecialChars(descriptionInput.value),
}; As for checking for empty titles, I personally like showing an alert instead of creating a new error message and styling it const isTitleEmpty = (val) => !val.trim().length
taskForm.addEventListener("submit", (e) => {
e.preventDefault();
if(isTitleEmpty(titleInput.value)){
alert("Please provide a title")
return
}
addOrUpdateTask();
}); let's hear what the others think. Also, sidenote @naomi-lgbt and @Ksound22 the creation of these smaller functions would work well for what we were talking about early about updating how the breakdown of projects is done. |
@gikf Actually you are right, it doesn't happen with the single quotes in case if you have double quotes on you
WHERE:
In this case the error will be the same as in previous case. As a result I still would suggest to write a solution for both scenarios. HTML allows us to use double or single quotes. |
@jdwilkin4 For the white space and blank title I think it would be better to move it even into a separate enhancement(issue) as it seems to be completely unrelated |
@jdwilkin4 Title on the other hand is just a text value(content) that automatically handling the escape characters on the value string. I tried to reproduce the issue with the error you displayed, but not adding code change for the title field Side note: If you created broken task and then fixed the code, the task that is already created will be broken. |
if you want to create a separate issue for that then that is fine |
When reporting issues, you don't always need to have a solution in the issue. |
Single quote isn't causing it on my end too |
This is a great finding! We should open it up for contribution right away. |
Do we need a separate function to handle removing special characters at all? |
No You can see my reply here about the fix we are going with |
@jdwilkin4 Created a separate issue for the white space And actually found another one that related to "Add Task" and "Update Task". |
Hi @Ksound22 I think I already mentioned it somewhere above. It's reproduced if your HTML code in JS has single quotes and not double |
"
on the id
Describe the Issue
When the user creates or updates the title and adds special characters ( " || ' ) the app throws an error.
Uncaught TypeError: Cannot read properties of undefined (reading 'title')
STEPS TO REPRODUCE 1:
ACTUAL RESULT:
Nothing happens on the screen, the application entered broken state
Uncaught TypeError: Cannot read properties of undefined (reading 'title')
STEPS TO REPRODUCE 2:
ACTUAL RESULT:
Nothing happens on the screen
Uncaught TypeError: Cannot read properties of undefined (reading 'title')
Affected Page
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/learn-localstorage-by-building-a-todo-app/step-65
Your code
CODE FROM THE STEPS:
Expected behavior
EXPECTED RESULT 1:
User can add a "New Task"
For the simple solution we can add a step to add replace on id under taskObj ex. :
.replace(/[^A-Za-z0-9\-\s]/g, '') or .replace(/[^a-z0-9\-\s]/g, '')
EXPECTED RESULT 2:
User can modify the task
Screenshots
Without the fix:
With the fix:
System
User Agent is:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36
Additional context
There is other enhancement that can be made on the app, by trimming the title string to make sure it's not empty or blank spaced. Otherwise user can create an empty title even though the field is required on HTML.
This is what I did, but I'm not good in coding yet, so I don't feel confident to report it and give suggestions on the solution.
JS
HTML
The text was updated successfully, but these errors were encountered: