Skip to content
OverviewSolutions
9
Comments
7

Nazar Holubovskyy

@HA3IK190 points

WebDev

Latest solutions

View more solutions

Latest comments

  • Nazar Holubovskyy•190
    @HA3IKPosted over 1 year ago

    About the “list”: I think that this is not a semantically correct solution.

    Even if the H2 outline, at the current position, extends to the entire SECTION correct. I don't see the point of making the title, in the markup, a list item. H2 should be just a heading for the UL, not an item of it.

    SECTION > H2 + UL > LI*5

    I also saw that you have a duplicate ID linearGradient#a. You can easily fix this by simply declaring a generic SVG[height=0] somewhere separately on the page, it should work:

    <svg height="0">
  <defs>
    <linearGradient id="a"> ... </linearGradient>
  </defs>
</svg>
    0
  • Nazar Holubovskyy•190
    @HA3IKPosted over 1 year ago

    Hello, About “hero-image”.

    But 1st: it's a very nice effect u got 👍 I'd leave it 😅

    If you want to control this image within its position, you just need to disable its absolut position (make it position:static) THEN or change object-fit to "contain", or add overflow:visible.

    IF you plan to center everything in one column (like on the mob.): .hero__body { margin:0 auto }

    ELSE IF you want to keep .hero__body and picture horizontally, just make the parent element Flexbox .hero__container { display:flex }

    0
  • Nazar Holubovskyy•190
    @HA3IKPosted over 1 year ago

    You don't need to listen to the same event on the same element for each function (DRY). You can call an anonymous function for all the functions you need:

    button.addEventListener("click", e => {
  newYear();
  newMonths();
  newDays();
});
    Marked as helpful
    0
  • Nazar Holubovskyy•190
    @HA3IKPosted over 1 year ago

    Hello,

    A few recommendations for your JS code.

    1. To insert simple text do not use innerHTML, for this task use InnerText or textContent.
    2. No need to create hidden class, use [hidden] attribute.
    3. DRY (Don't repeat yourself) - You have large chunks of repetitive code. Lines 21-24 and 26-29, 46-49 and 51-54, 69-73 and 75-77,79 are absolutely identical. In this case, it is necessary to create functions that will perform the same task, and pass references to input, output, error, etc. tags as arguments:
    const showError = (label, input, output, msg) => {
  msg.hidden = true; // instead of: msg.classList.remove("hidden");
  label.classList.replace("text-SmokeyGrey", "text-LightRed");
  input.classList.replace("border-LightGrey", "border-LightRed");
  output.textContent = "--"; // instead of: output.innerHTML = "--";
}

// showError(yearsText, inputYear, years, errorMsg3);
// showError(monthText, inputMonth, months, errorMsg2);
// showError(dayText, inputDay, days, errorMsg1);

    The same for hideError()

    Marked as helpful
    0
  • Nazar Holubovskyy•190
    @HA3IKPosted over 1 year ago

    Hello.You are using the HEADER tag incorrectly.

    Semantically correct, if you wrap the main content in the MAIN tag.

    And you can use FIGURE + FIGCAPTION for the card (picture + description).

    Marked as helpful
    0
  • Nazar Holubovskyy•190
    @HA3IKPosted almost 2 years ago

    Also, SECTION is tag of "Sectioning Content" category - creates a section that defines the scope of the heading (H1-6) content. That is, semantically, MAIN data (with FIGURE) is outside the context of H1.

    Marked as helpful
    0
View more comments