Skip to content
OverviewSolutions
9
Comments
7

Nazar Holubovskyy

@HA3IK190 points

WebDev

Latest solutions

View more solutions

Latest comments

  • Nazar Holubovskyy•190
    @HA3IK

    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>
  • Nazar Holubovskyy•190
    @HA3IK

    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 }

  • Nazar Holubovskyy•190
    @HA3IK

    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
  • Nazar Holubovskyy•190
    @HA3IK

    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
  • Nazar Holubovskyy•190
    @HA3IK

    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
  • Nazar Holubovskyy•190
    @HA3IK

    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
View more comments