I want to highlight the PR I did in Week 3 of hacktoberfest! This time I decided to test some different apps and find an issue to raise myself. I'm happy to report that my enhancement was approved by the repo owner and later my Pull Request was as well :)

Background on the Project

Checklist is a website which students and professionals can used to mark their progress in learning tech concepts such as Web Application Fundamentals, Object Oriented Programming, and more. For example, if you open up the C++ page, you get a list of items you should learn for C++. You can check or uncheck items in the list, and your selections will be stored in localStorage. Unfortunately there is currently a bug in the storage functionality, but my UI enhancement was not related or affected by this.

Set Up

There was almost no set up I needed to do, since this is a simple website with some HTML files, script files and style sheet files. I just forked the repo and cloned it on my Local.

The Issue

Enhancement: Allow sections to be expanded by clicking on highlighted section #24

kliu57 posted on Oct 12, 2023

I have a proposed enhancement for the C++ and OOP pages, to allow users to expand sections by clicking on the highlighted section rather in addition to clicking on the arrow. I feel it is more intuitive for first-time users; also because the highlighting of the section makes the user think that it is a clickable element. See images below:

@ujjwalsharma01 If you are ok with this enhancement, could you please assign it to me? Thank you.

View on GitHub

After testing the website on my Local, I found an enhancement that could be made. I proposed that the sections could be expanded by clicking on the highlighted section title rather than with the small arrow at the side. I provide screenshots and a more detailed explanation in the issue.

The Fix

It turned out to be a more difficult enhancement that I anticipated, because I realized that the checkbox was nested inside the section title label tag and the default behavior of the parent label tag was to toggle the checkbox. To circumvent this, I edited the HTML pages so that the checkbox is no longer a child of the title label (They are in separate div tags now).

Old code: (checkbox is nested inside label)

        <label>
          <input type="checkbox" ...>
          ...
          Section Title
          ...
        </label>

New code: (checkbox is no longer nested inside label)

        <div class="section">
          <div class="section-box">
            <label class="section-box-label">
              <input type="checkbox" ...>
              ...
            </label>
          </div>
          <div class="section-title">
            <label class="section-title-label">
              Section Title
              ...
            </label>
          </div>
        </div>

After making this change however, the title and the checkbox were not lining up well. I had to go into the CSS stylesheet file to add styling to the new div tags I created to contain these two elements.

Lastly, I added an event handler in the scripts.js file to expand or collapse the section when the user clicks on the section title (and also update the arrow image). I also commented out code that was made obsolete by my enhancement (such as the event handler for the arrow).

See behavior prior to enhancement
See behavior after enhancement

The Pull Request

I detailed my code changes and the resulting behavior in my Pull Request and it was merged with no issues! The owner also commented that he found it was a valuable PR with great explanation and references.

Issues I Encountered

• I took a while to try and figure out how to stop the default behavior of the label toggling the checkbox. I did a lot of research on google and Stack Overflow. I first tried the preventDefault() method but it was not working. Eventually I came across the solution I am using now, with them nested into separate div tags.
• I had to do some tweaking in the CSS style sheets before I could get the elements to line up properly

Even though it seemed like an easy fix, I had to do a lot of research online to fix these UI issues. In the end, I'm glad to say my enhancement has created a better user experience.

Thank you for reading my blog! And stay tuned for my next post about my fourth hacktoberfest PR, where I work with web APIs.