Frontend Mentor | Drstrange373's profile

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

Gift Amachree• 870

@jen67

Submitted 7 months ago

Hi Guys! 👋

I just finished this challenge. I was a bit difficult but at the end I finished. Your contributions and suggestions are invaluable. Thanks a bunch! 🌟

Responsive RestApi countries using HTML, CSS and JAVASCRIPT

Drstrange373• 180

@Drstrange373

Posted 6 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 .