All comments

• 

  Caelus•520

  @Caelus111Submitted 6 months ago

  What are you most proud of, and what would you do differently next time?

  I am proud of this project in general because this is the first time I make a multiple inputs validation, this IS the hardest one so far, it took more than any other project. next time I should work more on managing how to make the project then make rather than getting stuck not knowing what to do. 😂

  What challenges did you encounter, and how did you overcome them?

  I had to do some research on how to do this validation, with some searching on youtube, I got a general idea on the way of thinking to make it, and I did. I tryied not to copy but rather do it my way because knowing how to do it is the key not the exact code of the project.

  What specific areas of your project would you like help with?

  I have a small issues with the error message sticking up and pushing the input up with it, so If you YOU know how to fix it, please tell me I would be delighted to know how... and for the success message at the end I cant think of a way to make it show up after validating everything so that too... 😢👍

  

  A Contact form with validation

  1

  10
  

  Roksolana•910

  @RoksolanaVeresPosted 6 months ago

  Hi, I played a bit with your solution and came up with an idea of how to make it work. The problem is that you are using .checkValidity() method to find out whether the form is valid but it doesn't work as you expect, because this method validates the form based on the attributes you use in inputs, like required or min / max. But since you don't use any of them (and for this particular project you don't need to use them), checkValidity() doesn't actually validate anything. So, you need to create your own validation logic for this.

  So, here is how I solved it: first, I deleted your validation if statement (this one):

   if (form.checkValidity()) {
      showSuccess()
    }
  

  and wrote the checkFormValidity function which loops through your error messages and sets formIsValid to true if all the error messages have "hide" class (thus they're all valid), and false if even one of the messages doesn't have the "hide" class. It also resets the form in case it is valid (according to the challenge requirements)

  const errorMessages = document.querySelectorAll(".error-message");
  let formIsValid = false;  // these should go to the global scope at the top of the page
  
  function checkFormValidity() {
    for (let message of errorMessages) {
      if (!message.className.includes("hide")) {
        formIsValid = false;
        break;
      }
      formIsValid = true;
    }
    if (formIsValid) {
      form.reset();
    }
  }
  

  also I deleted your showSuccess function and instead made showSuccessIfFormIsValid which shows the message if the form is valid and hides it otherwise:

  const success = document.querySelector(".success"); // this should go to the global scope at the top of the page
  
  function showSuccessIfFormIsValid() {
    if (formIsValid) {
      success.style.display = "flex";
    } else {
      success.style.display = "none";
    }
  }
  

  Now you include checkFormValidity() and showSuccessIfFormIsValid() to form submission event and it should work:

  form.addEventListener("submit", (e) => {
    e.preventDefault();
    validateInputs();
    checkFormValidity();
    showSuccessIfFormIsValid();
  });
  

  As to the problem with inputs being pushed up by the error messages: you can just use position absolute for the messages, thus they won't influence the layout.

  I tried to be as detailed as possible, but if my explanation is not good enough, you can always ask additional questions. Good luck!

  Marked as helpful

  0

  This comment has received 7 repliesShow
• 

  dewyrag•210

  @dewyragSubmitted 6 months ago

  What are you most proud of, and what would you do differently next time?

  was easy

  What challenges did you encounter, and how did you overcome them?

  no challenges

  What specific areas of your project would you like help with?

  does anyone know why my summary card border-radius wont change? I set the border radius in media queries but it wont change

  please give feedback

  

  Results summary component

  1

  10
  

  Roksolana•910

  @RoksolanaVeresPosted 6 months ago

  Hi! Great job!

  Concerning your problem with the borders: first of all, in your media queries you're currently applying border-radius: 1.5rem 0 0 1.5rem; to your summary card. But you're rounding the wrong borders (top left and bottom left borders instead of top right and bottom right).

  Borders are set in this direction: 1.top-left; 2.top-right; 3.bottom-right; 4.bottom-left.

  Thus, the correct code would be border-radius: 0 1.5rem 1.5rem 0;

  But to make it work you also need to set rounded borders to the .container class.

  @media (min-width: 48rem) {
      .container {
          border-radius: 1.5rem;
      }
  }
  

  Note: if all your borders should have the same radius you can write the radius value only once instead of four times.

  1

  This comment has received 1 replyShow
• 

  P

  Mukarram Haq•290

  @MukarramHaqSubmitted 6 months ago

  What are you most proud of, and what would you do differently next time?

  I was able to practice grid and did it in less time than usual. I feel like i'm finally getting the hang of it slowly.

  What challenges did you encounter, and how did you overcome them?

  I think the only challenge I encountered was again converting from a mobile layout to a desktop layout lol. But, I ended up doing it so that's something that's very cool

  What specific areas of your project would you like help with?

  When I increase the width of the screen slowly the buttons don't move together. They instead move with the paragraph getting longer and shorter. Any help on that would be highly appreciated. I did get away with this one lol

  

  3 Columns Grid using HTML and CSS

  2

  30
  

  Roksolana•910

  @RoksolanaVeresPosted 6 months ago

  Hi, first of all your code is super clean and structured, great job!

  Regarding your problem with the buttons: I've just checked my solution of this challenge and found the same issue there 😅 but I've also come up with an idea of how to fix it.

  This occurs because we're applying a large margin to the buttons to position them at a specific distance from the text. Since the length of the text on each card varies, the buttons are pushed to different distances, causing them not to align.

  The simplest way to fix it is to give smaller margin to buttons and instead set a fixed height to the paragraphs with car description. This height should be large enough to hold the longest text when the width of the card is the smallest.

  Here is how I see it:

  HTML (for each of the card)

   <div class="cols sedan flow bg-primary-orange">
            <img alt="sedan icon" src="images/icon-sedans.svg" />
            <h1>Sedans</h1>
            <p class="car-description">
              Choose a sedan for its affordability and excellent fuel economy.
              Ideal for cruising in the city or on your next road trip.
            </p>
            <button class="btn text-secondary-orange">Learn More</button>
          </div>
  

  CSS

  @media (min-width: 800px) {
        ...
  
     .flow button {
          margin-top: 2rem;
      } 
  
      .car-description {
          height: 10rem
      }
  

  That's all. Happy coding!

  0
• 

  P

  Øystein Håberg•11,010

  @Islandstone89Submitted 7 months ago

  What are you most proud of, and what would you do differently next time?

  With some work, I managed to get it mostly right.

  What challenges did you encounter, and how did you overcome them?

  The biggest challenges were styling the buttons, and figuring out how to get the values.

  What specific areas of your project would you like help with?

  The only issue now is that when you click right in the middle of the buttons, you get "You have selected undefined out of 5" on the thank you card. Each button is a ```` with a label and an input inside. I get the values from a data-value attribute set on the divs. I increased the padding on the mobile version to get a bigger target size.

  

  Interactive Rating Component

  2

  60
  

  Roksolana•910

  @RoksolanaVeresPosted 7 months ago

  Hi! I have a simpler solution. You don't need a separate wrapper for label and input, instead you can wrap your input by the label itself:

  HTML:

  <label class="rating-btn-wrapper">
    <input type="radio" name="rating" value="1" class="rating-btn" />
          1
  </label>
  
  <label class="rating-btn-wrapper">
    <input type="radio" name="rating" value="2" class="rating-btn" />
          2
  </label>
  ...
  

  Now you don't need to use id and for attributes. Here you can read more about it:

  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

  Now your button styles are broken. To make rating buttons completely round, just remove paddings and add fixed width and height for buttons:

  CSS:

  .rating-btn-wrapper {
      background-color: var(--clr-dark-blue);
      height: 45px;
      width: 45px;
      border-radius: 50%;
      ...
  

  Marked as helpful

  1

  This comment has received 2 repliesShow
• 

  P

  Øystein Håberg•11,010

  @Islandstone89Submitted 7 months ago

  What are you most proud of, and what would you do differently next time?

  Managed to get most of it done.

  What challenges did you encounter, and how did you overcome them?

  I couldn't figure out the backgrounds on the header and the "State of the Art" section. I changed the header gradient because of contrast issues with the text, so I'm not sure the background circles would fit for those colors. The trouble with the "State of the Art" section was that the circle was either on top of everything or not showing. My disdain for background "decorations" continues xD

  What specific areas of your project would you like help with?

  I also couldn't figure out how to make the menu dropdowns independent. The functionality works, the dropdowns show when the button is clicked, and disappear when the button is clicked again. But every time I click one of them, all the others also show/disappear.

  

  Blogr Landing Page

  3

  81
  

  Roksolana•910

  @RoksolanaVeresPosted 7 months ago

  Hey, your solutions often give me enough food for thought but this one was probably the most challenging one 😅

  So I had been trying to solve the problem with all three menus getting open simultaneously for almost an hour, messing with the JS part and wondering why it didn't work as it was expected. Then when I almost gave up I decided to check HTML. When I changed aria-expanded in one of the navbar__item-s from "false" to "true" ... all three menus got open (even though the rest two had aria-expanded="false") ... interesting!

  Long story short: the problem is in your CSS, this part:

  .header:has(.navbar__button[aria-expanded="true"]) {
      .navbar__icon {
          transform: rotate(180deg);
      }
  
      .navbar__list-wrapper {
          display: block;
      }
  }
  
  .header:has(.open-menu-btn[aria-expanded="true"]) {
  
      .header-top {
          position: relative;
          flex-direction: column;
          align-items: initial;
      }
         ...
  

  in HTML .header is above all three menu buttons, thus if even one of the button has aria-expanded="true", .header:has(.navbar__button[aria-expanded="true"]) becomes true and CSS from that block is applied to all three menu buttons.

  You should just change .header:has... to .navbar__item:has... and everything works fine :)

  .navbar__item:has(.navbar__button[aria-expanded="true"]) {
     ...
  }
  
  .navbar__item:has(.open-menu-btn[aria-expanded="true"]) {
  ...
  }
  

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  Talika Bajaj•650

  @Talika-BajajSubmitted 7 months ago

  What specific areas of your project would you like help with?

  My project is working correctly; however, I am able to select multiple rating buttons, and the rating from the last pressed button is passed to the display section of the rating.

  For example, if I have pressed 4 and 3. Then 3 out of 5 will be displayed.

  I think one should not be able to select multiple ratings but I could not figure it out. If anyone could review my code and provide me with feedback, I would be really grateful.

  

  Interactive Rating Component

  1

  50
  

  Roksolana•910

  @RoksolanaVeresPosted 7 months ago

  Hi, great job! About your problem with multiple ratings: you could slightly modify your JS so that each time a user clicks a button you first remove the "active" class from all the buttons and then apply it only to the button that was clicked. You can do something like this:

    element.addEventListener("click", (e) => {
      Array.from(buttons).forEach((button) => button.classList.remove("active"));
      document.getElementById("submit").disabled = false;
      e.target.classList.add("active");
      let text = e.target.innerText;
      document.getElementById("rate").innerHTML = `You selected ${text} out of 5`;
    });
  }
  

  Marked as helpful

  1

  This comment has received 2 repliesShow
• 

  P

  Øystein Håberg•11,010

  @Islandstone89Submitted 7 months ago

  What are you most proud of, and what would you do differently next time?

  I used Subgrid for the first time!

  What challenges did you encounter, and how did you overcome them?

  The most challenging part was the mobile menu.

  What specific areas of your project would you like help with?

  I couldn't figure out how to make the dark overlay when the mobile menu is open.

  

  News Homepage

  1

  100
  

  Roksolana•910

  @RoksolanaVeresPosted 7 months ago

  Hey, great job! The responsiveness of your project is just awesome!

  Regarding your issue with dark overlay, there is nothing too complicated.

  First in your html you create an empty div with class "overlay" for example:

    <body>
      <div class="overlay"></div>
  
      <h1 class="visually-hidden">News Homepage Challenge</h1>
        ...
    </body>
  

  Then you need to style it so that it stretches on the whole page and is hidden initially (until we open the menu):

  .overlay {
    position: absolute;
    background-color: rgba(23, 24, 44, 0.6);
    height: 100%;
    width: 100%;
    display: none;
  }
  

  You also need to create another class in css, for example, "active" which will override display: none;with display: block; to show the overlay when the menu is open:

  .active {
    display: block;
  }
  

  Now in your JS you select the overlay and add the "active" class to it when the menu is open and remove this class when the menu is closed:

  let overlay = document.querySelector(".overlay");
  
  menuBtnOpen.addEventListener("click", () => {
    menuBtnOpen.setAttribute("aria-expanded", "true");
    menuBtnClose.setAttribute("aria-expanded", "true");
    overlay.classList.add("active");
  });
  
  menuBtnClose.addEventListener("click", () => {
    menuBtnOpen.setAttribute("aria-expanded", "false");
    menuBtnClose.setAttribute("aria-expanded", "false");
    overlay.classList.remove("active");
  });
  

  That's all. You can also add an event listener to the overlay and make the menu close when the overlay is clicked (typical behavior in most websites)

  overlay.addEventListener("click", () => {
    menuBtnOpen.setAttribute("aria-expanded", "false");
    menuBtnClose.setAttribute("aria-expanded", "false");
    overlay.classList.remove("active");
  });
  

  Marked as helpful

  1

  This comment has received 2 repliesShow
• 

  ramneekdev089•30

  @ramneekdev089Submitted 9 months ago

  What are you most proud of, and what would you do differently next time?

  I am proud of the thing that I made this on my own and took no help from youtube or google, I faced difficulties, but I did it. I am getting good at this, but I have more to learn.

  What challenges did you encounter, and how did you overcome them?

  The most problem I faced in image, The browser was not loading my image and there was a error like "not allowed to load local resources" so I copied the link of other people who have already done this project. If you know how to solve this error. please let me know.

  What specific areas of your project would you like help with?

  you can see that the .container is not centered properly, I tried margin auto but it didn't leave any space on top but was centered from all the other directions, I would really like to know how to center it properly.

  

  Social media links page using HTML and CSS

  1

  60
  

  Roksolana•910

  @RoksolanaVeresPosted 9 months ago

  Hi! Concerning your problem with centering the .container: you did everything right by assigning the display: flex; justify-content: center; align-items: center; properties to the body (parent of .container), but unless you set the height to the parent element, the child container won't be centered vertically. Thus you need to set some height (or min-height) to the body to center the .container element vertically, for example you can do this:

  body {
       ...
      min-height: 100vh; 
  }
  

  now you don't need to give any top margins to the container, and it is perfectly centered

  0

  This comment has received 1 replyShow
• 

  Darshan•210

  @its-subhashSubmitted 9 months ago

  Actully I have completed this assignment using react also but because of some error, i can not make it live, but you can checkout repo at GitHub Repo code is working but not it's live page, so yaa you can check it out and also am eagerly waiting for your comments and suggestions on this solution.

  also thank you so much @RoksolanaVeres for helping me out during this project, I owe you one.

  

  Responsive landing page with curved Sections using vanilla CSS

  1

  50
  

  Roksolana•910

  @RoksolanaVeresPosted 9 months ago

  Hey, @Darshan, congratulations on completing the challenge! Awesome job. Actually, I didn't help you much, but anyway you're always welcome :)

  1
• 

  Nicolás Ortiz•170

  @nico-ortizSubmitted 10 months ago

  Hi! I have an error with styles, when you click to enter a bill value or a number of people, the height of container increases, if you can help me send your feedback. Any feedback is welcome!

  

  Response Tip Calculator App using CSS Grid

  1

  50
  

  Roksolana•910

  @RoksolanaVeresPosted 10 months ago

  Hey, nice job! To solve your issue with styles you can just set the fixed height for your inputs, so that the border that they get in the focus state does not increase their size and doesn't create this small shift in the layout you currently have, for example:

  .main-container .values-container .item-values-container .inputs {
      height: 40px;
  }
  

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  Thomas Burette•190

  @tburetteSubmitted 10 months ago

  How to avoid duplication when multiple BEM modifiers must undo declarations?

  I used BEM for the three cards : .card, .card--sedan, .card--suv and .card--luxury.

  A problem I have is that there are declarations in the .card that must be undone by the modifiers.

  I end up with duplication:

  .card--sedan {
    /* a bunch of declarations that undo declarations in .card {} */
  }
  
  .card--suv {
    /* a bunch of declarations that undo declarations in .card {} */
  }
  
  .card--luxury {
    /* a bunch of declarations that undo declarations in .card {} */
  }
  

  How to avoid that duplication?

  

  3-column preview card component solution with fluid resizing

  1

  40
  

  Roksolana•910

  @RoksolanaVeresPosted 10 months ago

  Hey, I've looked at your code and attempted to organize your css better to avoid duplication of the properties.

  First of all, you don't have to specify in .card those values that are unique for each card and which you still need to define for every card separately. Thus in this piece of code:

      .card {
        padding: 3em;
        display: flex;
        flex-direction: column;
        align-items: start;
        row-gap: 1rem;
        background-color: black;
      }
  

  you'd better delete the background-color property, since it will be unique for each of the cards. And here:

      .card::before {
        content: "";
        background-color: hsl(0, 0%, 31%);
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 100vw;
      }
  

  we can get rid of content and background-color and just specify these properties for each card separately, like:

    .card--sedan {
          background-color: var(--color-bright-orange);
        }
  
        .card--suv {
          background-color: var(--color-dark-cyan);
        }
  
        .card--luxury {
          background-color: var(--color-very-dark-cyan);
        }
  

   .card--sedan::before {
          content: url(./images/icon-sedans.svg);
        }
  
        .card--suv::before {
          content: url(./images/icon-suvs.svg);
        }
  
        .card--luxury::before {
          content: url(./images/icon-luxury.svg);
        }
  

  By the way, this is all code you need for each card, cause all the other properties you already have in your general .card class. I mean, previously you had this:

      .card--luxury::before {
        content: url(/images/icon-luxury.svg);
        background-color: unset;
        width: auto;
        height: auto;
      }
  

  But since your general class .card::before already has a specified width and height you don't have to define them again for each of the cards.

  One more thing that I've noticed: your paths to the images don't work as they are intended to. The images didn't open on my computer. To fix it you need to add a dot before the first slash: content: url(./images/icon-sedans.svg);

  That's all, have a nice day and happy coding :)

  1

  This comment has received 4 repliesShow
• 

  Levis Kim•1,200

  @Orekihotarou-kSubmitted 11 months ago

  Hi there. I have a bit of an issue with the JavaScript. Everything works well only after clicking the toggle button twice. I don't understand why its behaving like it is. I'd appreciate any help I can get.

  

  Responsive pricing component with toggle

  1

  60
  

  Roksolana•910

  @RoksolanaVeresPosted 11 months ago

  Hey, I got a little curious about your issue with the toggle button and I think I've found the problem.

  I saw that initially, you set the properties display:block and display:none to your .card-price and .card-price-monthly classes in a separate css file and when a user clicks the toggle button the priceChange() function is supposed to apply style.display = none to the elements that are displayed as blocks and style.display=block to those with position:none.

  But the thing is that style.display looks for the inline styles of the elements, not in your css file. Thus, when you click the toggle button for the first time, the condition element.style.display === "none" ? "block" : "none" will always return "none" even if in the css file this particular element also has position:none and was supposed to change it to position:block .

  To solve the problem you can either specify these inline styles in your html for each price span, like:

  <span class="card-price-monthly text-white" style="display: none"
              >&dollar;249.99
  </span>
  <span class="card-price text-white" style="display: block"
              >&dollar;24.99
  </span>
  

  Or you can create an init function in your js file, where you set the initial inline styles for the price spans and then call this function.

  function init() {
    monthPriceElements.forEach((element) => {
      element.style.display = "none";
    });
  
    yearPriceElements.forEach((element) => {
      element.style.display = "block";
    });
  }
  
  init();
  

  I hope you've got the idea, but if my explanation doesn't make any sense, feel free to ask additional questions)

  Marked as helpful

  0

  This comment has received 2 repliesShow