Skip to content
OverviewSolutions
9
Comments
3
Drstrange373
@Drstrange373

All comments

  • Drstrange373•180
    @Drstrange373Posted 2 months ago

    Nice Work bruh, Keep it up!!!

    Marked as helpful
    1
  • Drstrange373•180
    @Drstrange373Posted 3 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
  • Drstrange373•180
    @Drstrange373Posted 8 months ago

    This was awesome! knowing you didn't used js framework. Js code was so clean and easy to understand. But I didn't understand the significance of data.json file and update.mjs .

    1