2. Returning to preview layout after clicking back multiple times

[ajay-dhangar]

Description:

Currently, when the "back" button is clicked multiple times to return to the preview layout in the to-do app, the "Add new task" button becomes invisible. This issue prevents users from adding new tasks after navigating back and forth between the preview layout and other sections of the app. It seems that the visibility of the button is affected by the repeated use of the "back" button.

Expected Behavior:

• The "Add new task" button should remain consistently visible regardless of the number of times the "back" button is clicked.
• Users should be able to add new tasks even after navigating back and forth between different sections of the app.

Steps to Reproduce:

1. Open the to-do app.
2. Click on a specific task or navigate to another section of the app.
3. Click the "back" button to return to the preview layout.
4. Repeat steps 2 and 3 multiple times.
5. Observe that the "Add new task" button becomes invisible after several repetitions.

Additional Information:

• The issue seems to be related to the visibility state of the "Add new task" button when navigating back to the preview layout.
• Inspecting the relevant code and debugging the event handling logic for the "back" button and the button's visibility toggling might help identify the root cause.
• Any relevant error messages, console logs, or code snippets related to the issue should be included to assist in troubleshooting.

By providing these additional details, you'll offer a clearer understanding of the problem, which can aid in addressing and resolving the issue effectively.

Example

<div id="task-details-layout" style="display: none;">
    <!-- Task details content -->
    <button id="back-button">Back</button>
  </div>

  <script>
    // Get references to the elements
    const previewLayout = document.getElementById('preview-layout');
    const taskDetailsLayout = document.getElementById('task-details-layout');
    const addTaskButton = document.getElementById('add-task-button');
    const backButton = document.getElementById('back-button');

    // Event listener for clicking on a task or item
    function handleTaskClick() {
      // Hide the preview layout
      previewLayout.style.display = 'none';
      // Show the task details layout
      taskDetailsLayout.style.display = 'block';
    }

    // Event listener for clicking the "back" button
    function handleBackClick() {
      // Show the preview layout
      previewLayout.style.display = 'block';
      // Hide the task details layout
      taskDetailsLayout.style.display = 'none';
    }

    // Event listener for clicking the "Add new task" button
    addTaskButton.addEventListener('click', handleTaskClick);

    // Event listener for clicking the "Back" button
    backButton.addEventListener('click', handleBackClick);
  </script>

[Mangemort60]

Hello,

I'm totally new in the open source world, and I am searching to level up my skills , your issue seems to be interesting for me, so I'll be glad to work on it.

[Mangemort60]

I don't see any issue after i repeated the steps :

Click on a specific task or navigate to another section of the app.
Click the "back" button to return to the preview layout.

I'm still seeing the add task button and i'm able to add a task .

Also why do you have an 2 index.html , one in public folder, another in root folder ?

[ajay-dhangar]

We need only one html file nd perform evrything in only one html file but I used two for different way like different to do app of testing purpose only.

And You can use only 3 files

• index.html (web view and some tags for required manage web)
• style.css (for styling and layout)
• main.js ( for logic perpose) using
  • Array
  • Array Object
  • Dom
  • Events (for Ex. addEventListener)
  • loops
  • conditions
  • And using some usefull method and logic for required in To Do App
  • apply Js advance Conceps

Because This App We are creating for Js Learning perpose anyone can be apply his logic and build it vey easy, understanding, UX/UI in very simple, and looking good.

[ajay-dhangar]

You can apply your logic, and if it proves to be effective, I will merge your commit.

[Mohak973]

is it solved or not?

[ajay-dhangar]

No, I recommend trying the following approach: First, visit the site using the host link provided. This will help you experience the issue firsthand. Once you've identified the issue, feel free to create a new GitHub issue detailing the problem you encountered. This way, you can work on addressing the specific issue and contribute to the improvement of the project. Your efforts will be greatly appreciated