Skip to content
OverviewSolutions
11
Comments
4
Musaddique Ali
@MusaddiqueAli

All comments

  • Musaddique Ali•140
    @MusaddiqueAli

    For the first question: On Mac OS, I think you already have a screen ruler pre-installed. You can google search on how to toggle it. On Windows OS, nothing such is pre-installed but you can download and install something called "PowerToys" from the web, and after installation, toggle it using "Windows Key + Shift + M". But, make sure the PowerToys tool is working, or is showing in the Windows Task bar tray, otherwise, "Windows Key + Shift + M" won't work.

    For the second question: To style the list marker font-weight and font-family, you should be able to use the same selectors like:

    ol li::marker { font-weight: bold; font-family: ______; }

    What I did with my code for this challenge is that I applied "Outfit" font to the whole page, as majority of the text (including the ordered list markers) in the page are to be styled using that font. And applied specific font-family: Young Serif; styling to only those which needed Young Serif font styling.

    As you may have noticed, Outfit is a sans-serif type font, but still, for some unknown reason, the ordered list marker for list number "1" still has serif. And the other list markers "2" though "6" are sans-serif. This happened to me as well, and I left it that way.

    Marked as helpful
  • Musaddique Ali•140
    @MusaddiqueAli

    I don't understand why implementing that can be a problem. In my case, I didn't specifically care about that, but still to check the correctness of my code, I used this other website called timeanddate (dot) com. In the homepage, there is a section called "Calculators & Timers", with the option "Date to Date Calculator", I get the same results. By the way, to code the JS, I took a lot of help from ChatGPT. It helped me a lot.

    Marked as helpful
  • Musaddique Ali•140
    @MusaddiqueAli

    Nothing major to improve, but you can remove the arrows within the input fields, called spinners by adding the following lines in your main CSS:

    /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

  • Musaddique Ali•140
    @MusaddiqueAli

    I think you should check after you post your solution.