Responsive Dictionary Web App

Community feedback

• 

  Drstrange373•180

  @Drstrange373Posted 4 months ago

  Solution looks cool but a concern about toggling theme. its not actually toggling when you click "toggle-btn-container". Inside that you should explicitly click those two input filed. So for example, if i click "toggle-btn-container" on center of the element then theme wont change. My suggestion is add click event listener to "toggle-btn-container" itself.

  Navbar component line 60

    <div className="toggle-btn-container" onClick={()=>setTheme(!theme)}>
              <span className={`${theme && "dark"}`}></span>
              <input
                type="radio"
                name="theme"
                id="theme"
                defaultChecked={!theme}
  
              />
              <input
                type="radio"
                name="theme"
                id="theme"
                defaultChecked={theme}
              />
            </div>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="22"
              height="22"
              viewBox="0 0 22 22"
            >
              <path
                fill="none"
                stroke="#838383"
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="1.5"
                d="M1 10.449a10.544 10.544 0 0 0 19.993 4.686C11.544 15.135 6.858 10.448 6.858 1A10.545 10.545 0 0 0 1 10.449Z"
              />
            </svg>
          </div>
  

  Make those input fields readonly. And also hoping that change wont cause any bug😅

  Marked as helpful

  1

  ---

  

  P

  Abinandan A T•300

  @Abinandan1Posted 4 months ago

  @Drstrange373 Hi. What you suggested is absolutely right. I thought of toggling the theme on clicking the exact side where the white colored button is not present, so I attached the event listener on the input field. But yeah clicking the entire container for changing the theme seems like an easy to use (user friendly) solution. Thanks a lot for your feedback. 😄

  1