Skip to content
OverviewSolutions
27
Comments
41
solitary_coder
@kabir-afk

All comments

  • Zup•1,370
    @xup60521
    What are you most proud of, and what would you do differently next time?

    drop down animation GSAP conveniently provides a way to animate the height change, which is not trivial when it comes to vanilla js & css keyframes.

    if (mobileNavCompanyAccordian.style.height === "1.5rem") {
        arrowImg.src = ArrowUpImg
        gsap.to(mobileNavCompanyAccordian, {height: "auto", duration: 0.5, ease: "power2.out"})
    } else {
        arrowImg.src = ArrowDownImg
        gsap.to(mobileNavCompanyAccordian, {height: "1.5rem", duration: 0.5, ease: "power2.out"})

    }

    html + tailwindcss + typescript + gsap animation

    #gsap#typescript#vite#tailwind-css
    1
    solitary_coder•1,000
    @kabir-afk

    Hey !! Congrats on clearing the challenge! Great page. I had some concerns regarding your code and thought I should address them.

    • Reducing verbosity : Instead of making separate functions for opening and closing each accordion element , you could have declared classes inside your custom CSS and then later used classlist.toggle to add/remove them depending on the state of your variable, which you could have changed when user clicks the particular element. It reduces verbosity and makes for an efficient code. Then, based on the conditions of your state, you could have integrated gsap accordingly.

    • Breakpoint too high : You could have settled for a lower breakpoint , somewhere around 748px , instead of 1024px. I mean, it still looks good, but when you open the sidebar menu, it feels too wide. You can ignore this point if you wish. I guess it's subjective.

    Everything else feels top notch . . .hope this helps you. Cheers !! 🥂

  • P
    Kamran Kiani•2,780
    @kaamiik
    What are you most proud of, and what would you do differently next time?

    Start to using more and more preprocessors. Please give me feedbacks about BEM and SASS styling.

    What challenges did you encounter, and how did you overcome them?
    • I've used a lot absolute positioning on this challenge. It was tough for me.
    • There is some difference on mobile and desktop view when you click the share icon. This was really challenging.
    What specific areas of your project would you like help with?
    • Is my css on main image is true. It is not as same as the design.
    • Is my html structure true? how can I improve it?
    • For mobile view when I click the share icon I've used visually hidden class to disappear a default div and appear another div. For desktop I've used absolute positioning to show the div at the top of the share icon. Do you think It is a right approach?
    • Any comments on my JS?
    • Is there any accessibility classes that I should use here? I mean aria attributes.

    Article Preview Component

    #bem#sass/scss
    2
    solitary_coder•1,000
    @kabir-afk

    Uploaded , you can check my soln out through my profile...feeel free to ask any question that comes to your mind , or any advice as well , I'll clear them if I can

  • solitary_coder•1,000
    @kabir-afk

    Heyyy, its been a while , you wrote some amazing css btw , like it flew over my head since I havent used those practices in a while, altho I did want to comment on your JS.

    1. Font-family inside input tags : Your input.target.value dont seem to inherit the font-family as rest of the elements making it look awkward wrt rest of the page...you must've forgotten , nvm , a simple font-family:inherit would have accounted for that easily.

    2.User Form Validation: Nothing happens when we click on Send Message btn , like you could have added a success page as an indicator to make sure the message has been submitted . Even if it is not given in the design , some form of indication would have been nice . . . would have made for a good UX. You could have simply reset the state values and added a toast notification with a message Message Sent when the user submits the form , instead of hanging user in the middle.

    I AM SURE YOU ARE AWARE OF THINGS I AM GOING TO SAY DOWN BELOW,BUT IF NOT THEN . . .

    3. Validation Logic : I am not really good in regex , but I'd still recommend that if you find it difficult to write valid regex , just copy it from the net , its ABSOLUTELY FINE. Because there will always be cases you didn't account for/ escaped your mind at the moment. For example in

    function validateName(name) {
    return name.length > 0;
}

    you are just checking the length of name , when you should have accounted for other cases as well like the user's name doesn't contain numbers/special characters . . . or simply saying it contains only letters. Something like /[a-zA-Z]/ would have been better . . . this is not the exact regex , but I hope that you get my point .Also it's not like these things came in my mind when I first did them , but the exp I gained after googling what a valid name/email regex should look like allowed me to use it later in the future as well . . .google/GPT the regex when you can.

    function validateEmail(email) {
    const re = /\S+@\S+\.\S+/;
    return re.test(email);
}

    Here as well , you are not checking whether the extension is correct or not, so something like a@g.commmmmmmmmmmmmmmmmmmmmmmm turns out to be a valid email address. For extension you should have limited to 2-3 characters.

    Disclaimer: This might not be right , since I have forgotten as well

    Something like : /\S+@\S+\.\S+{2,3}/ would have been appropriate . . .again google it

    Why should we do all this? Because it allows us to validate user in a better way and also makes for a good user experience. Everything else was great , again great CSS, seemed reusable , also you avoided use of unnecessary declaration of classNames . . . . cheers 🥂🥂

  • P
    Kamran Kiani•2,780
    @kaamiik
    What are you most proud of, and what would you do differently next time?

    Start to using more and more preprocessors. Please give me feedbacks about BEM and SASS styling.

    What challenges did you encounter, and how did you overcome them?
    • I've used a lot absolute positioning on this challenge. It was tough for me.
    • There is some difference on mobile and desktop view when you click the share icon. This was really challenging.
    What specific areas of your project would you like help with?
    • Is my css on main image is true. It is not as same as the design.
    • Is my html structure true? how can I improve it?
    • For mobile view when I click the share icon I've used visually hidden class to disappear a default div and appear another div. For desktop I've used absolute positioning to show the div at the top of the share icon. Do you think It is a right approach?
    • Any comments on my JS?
    • Is there any accessibility classes that I should use here? I mean aria attributes.

    Article Preview Component

    #bem#sass/scss
    2
    solitary_coder•1,000
    @kabir-afk

    hey , I came up across your query on discord . . . the challenge only required of you to use javascript to toggle share button, but you went on to over-engineer it by adding and removing classes that could have been easily executed with css..there is nothing wrong with using js . but why make it complicated when it can be achieved with css alone...read up on responsive layout. You should have used media queries differently, like using flex-diection:row in desktop layout and flex-diection:column in mobile layout.So to answer your question For mobile view when I click the share icon I've used visually hidden class to disappear a default div and appear another div. For desktop I've used absolute positioning to show the div at the top of the share icon. Do you think It is a right approach? NO it wasn't the right approach . Your BEM nomeclature was great as well as the way you wrote scss was also top notch , but still felt overdone at some places....the hover states have not been taken care of as well.

  • solitary_coder•1,000
    @kabir-afk

    Hey man , great site , but there seems to be an issue with cart functionality., the state isn't resetting itself whenever the user is adding or removing something from the cart .. I don't know anything about Vue otherwise I'd have been able to help . . . hope you look into this issue

  • solitary_coder•1,000
    @kabir-afk

    Hey, can't really help with testing the site since it doesn't open at first place ,but you can try changing the repo name to something diff since interactive-card-details in the URL does make it look like a phishing site....rename it to something diff like details-form and then maybe we can work on your so called potential hiccups

  • solitary_coder•1,000
    @kabir-afk

    Was working on the same challenge , would be helpful to compare our codes when I'm done

  • solitary_coder•1,000
    @kabir-afk

    Well the design images provided to us have a desktop resolution of 1440 x 900, height can vary in some designs but majority of the times it is somewhere around 800 and 900 . . . in order to match the design and generate a pixel perfect screenshot, you can check out this article here. It'll give you a step-by-step guide on how to achieve design accurate web page.

    But that's just the first part . . . in order to achieve pixel perfection , you'll need to get the dimensions of your components right as well. Mere eyeballing isn't gonna get you anywhere. You can check the dimensions in your design using photoshop and reassure those dimensions in your webpage either by inspecting the element or using extensions like Meausre It. Since we have to make our sites responsive , we obviously need to use relative units , and inspecting the element again and again only slows us down , so I prefer using the extension . This'll help you be more accurate . . . hope I was able to help , keep grinding!! 💪💪

  • solitary_coder•1,000
    @kabir-afk

    hey, not much fluent in tailwind CSS, but this might help

    <li className="link capitalize text-Dark-grayish-blue text-lg border-b-4 border-transparent  hover:border-blue-500">
     <a href="#">collections</a>
</li>

    what this'll do is add blue border in the bottom of link when hovered on... you can change it to whatever the design requires it to be....with some py and transition it'll look clean and smooth . . . hope I was able to help . . .keep the grind !! 💪💪

    Marked as helpful
  • solitary_coder•1,000
    @kabir-afk

    Hey , I saw your code and there were some issue that I'd like to address . . .

    Unnecessary JS . . .

    for (li of btns){
    li.addEventListener("click", function(){
        if (this.classList.contains('inactive')){
            this.classList.remove('inactive');
        } else if (this.classList.contains('active')){
            this.classList.remove('active');
            this.classList.add('inactive');
        } else {
            this.classList.add('active');
        }
    });
}

    The reason why user was able to select multiple buttons was the unnecessary JS that was working alongside your CSS. You had already declared hover,active, target states for your buttons in CSS which were then being overridden by JS . . .by removing this your btns would work properly and you won't also need to declare the .active and .inactive classes as well !

    The HTML at work . . .

        <li class="rate" onclick="pickRating(value)" id="rating1" value="1">1</li>
    <li class="rate" onclick="pickRating(value)" id="rating2" value="2">2</li> 
    <li class="rate" onclick="pickRating(value)" id="rating3" value="3">3</li>
    <li class="rate" onclick="pickRating(value)" id="rating4" value="4">4</li>
    <li class="rate" onclick="pickRating(value)" id="rating5" value="5">5</li>

    You can't use value attribute with something that is not an input element . . . a better pick would have been to do it something like . . .

        <li><input type="button" class="rate" onclick="pickRating(value)" id="rating1" value="1"></input></li>
    <li><input type="button" class="rate" onclick="pickRating(value)" id="rating2" value="2"></input></li> 
    <li><input type="button" class="rate" onclick="pickRating(value)" id="rating3" value="3"></input></li>
    <li><input type="button" class="rate" onclick="pickRating(value)" id="rating4" value="4"></input></li>
    <li><input type="button" class="rate" onclick="pickRating(value)" id="rating5" value="5"></input></li>

    By using <input type="button"> or button , allows you to select one option at a time , you see this would have made your code a lot easier and would have also allowed you to skip the unnecessary JS I mentioned earlier...also in terms of accessibility this would have been a better approach since the user would have known that he/she is dealing with form buttons and not list items . . ., you can then later apply the required styling on buttons to make it more design accurate... hope I was able to help!! 🥂🥂

    Marked as helpful
  • solitary_coder•1,000
    @kabir-afk

    Hey good job on completing the challenge , in terms of responsiveness, it is ok , but there are still some issues that I'd like to address . . .

    Regarding Icons

    As this was an intermediate challenge , which had to be done using only HTML and CSS, the icons had to made that way as well . . . 😅😅

    Regarding paragraph and gap issue

    I'm not exactly sure of the gap issue you are mentioning , if you'll elaborate then I might be able to help further, but I noticed that your p-container needs a line-height as well as , you need to increase it's width for a more accurate design . . good job otherwise!! 👍👍

    Marked as helpful
  • solitary_coder•1,000
    @kabir-afk

    Hey, can you explain about your query a bit more so that it is easier for us to help. . . also it would be better if you use external CSS , makes for better readability.

  • solitary_coder•1,000
    @kabir-afk

    hey , nice project ,so I fixed your "%" query , it took me a while . . . took the help of gpt for taking the exact file size as input... but readjusted the updateDataAnimation() on my own... you can see the updated js down below . . .

    const fileField = document.querySelectorAll("input");
const Bar = document.querySelector(".container-data__bar");
const loaderBar = document.querySelector(".container-data__loader");
const leftData = document.querySelector(".mb");
const usedMBLabel = document.querySelector(".used-mb");

const updateDataAnimation = (sizeInMB) => {
  let finalLeftData = parseInt(leftData.textContent) - sizeInMB;

  const animation = setInterval(() => {
    leftData.textContent--;
    usedMBLabel.textContent++;

    if (leftData.textContent == finalLeftData) {
      clearInterval(animation);
    }
  }, 10);
  let completedMBPercentage = (parseInt(usedMBLabel.textContent) / 1000) * 100;
  // console.log(Bar.offsetWidth);
  loaderBar.style.width =
    (completedMBPercentage / 100) * Bar.offsetWidth + "px";
};

fileField.forEach((field) => {
  field.addEventListener("change", () => {
    const selectedFile = field.files[0];

    // Get the size of the selected file in bytes
    const fileSizeInBytes = selectedFile.size;

    // Convert file size to kilobytes, megabytes, etc. if needed
    const fileSizeInKilobytes = fileSizeInBytes / 1024;
    const mb = fileSizeInKilobytes / 1024;

    updateDataAnimation(Math.floor(mb));
  });
});

    Hope I was able to help, happy coding!!! 🥂🥂

    Marked as helpful
  • solitary_coder•1,000
    @kabir-afk

    Heyyy, you can try looking up videos on BEM nomenclature CSS, or you can visit here; , hope I was able to help . . . 🥂🥂

    Marked as helpful
  • solitary_coder•1,000
    @kabir-afk

    Hey!!, nice page , altho I'd recommend that if you are already using these technologies then you should try leveling up in your animations as well . . . .I noticed that you were using @keyframes in your page for animations , not that they don't look appealing, they're great , but they don't provide you with much diversity . . . since you are already using react , don't you think that Framer is a better choice ? If you prefer not to use Framer Motion, you can also explore GSAP. It has a really similar syntax to @keyframes. I highly recommend giving it a try in your upcoming projects . . .hope you find it helpful . . . and as always , keep the grind 💪💪

    Marked as helpful
  • solitary_coder•1,000
    @kabir-afk

    hey ,can you like review the changes I made earlier , and close the PR . . . would really appreciate it . . .

  • solitary_coder•1,000
    @kabir-afk

    Hey , I think @RalfiSlask rectified your errors regarding JS , I saw some problems with CSS and thought I should help . . .

    • In your submit button as well .rate you should set font-family:inherit so that it goes along with the rest of the page , buttons and other input elements do not generally inherit it directly but rather have to be specified otherwise they display default font i.e., Arial

    • NOT using commas to add styles to multiple elements/hover states . . . like this might function properly but shows error in editor so yea . . . .

    .submit:visited{}
.submit:hover {background-color: hsl(0, 0%, 100%); color: hsl(25, 97%, 53%);}
.submit:active {}

    The code should have been

    .submit:link ,
.submit:visited,
.submit:active ,
.submit:hover {background-color: hsl(0, 0%, 100%); color: hsl(25, 97%, 53%);}

    The site is ok otherwise . . .Hope I was able to help, happy coding!!! 🥂🥂

    Marked as helpful
  • solitary_coder•1,000
    @kabir-afk

    Hey broo, noice job persisting the data when user reloads the page , I tried working on it as well using localStorage but was unsuccessful for some reason . . . will definitely refer to your code . . .altho I had some concerns regarding your code . . .

    • Instead of
      if (!userNameValidation.test(username)) {
    allFieldsValid = false;
    console.log('Username not valid');
  }

  if (!cardNumberValidation.test(cardnumber)) {
    allFieldsValid = false;
  }

  if (!monthValidation.test(monthnumber)) {
    allFieldsValid = false;
  }

  if (!yearValidation.test(yearnumber)) {
    allFieldsValid = false;
  }

  if (!cvcValidation.test(cvcnumber)) {
    allFieldsValid = false;
  }

  if (allFieldsValid) {
    form.style.display = 'none';
    cardThankYou.style.display = 'flex';
  }

    you could have done something like

    if(!userNameValidation.test(username) || (!cardNumberValidation.test(cardnumber)) || (!monthValidation.test(monthnumber)) || (!yearValidation.test(yearnumber)) || (!cvcValidation.test(cvcnumber))){
  allFieldsValid  = false;
}
    • Instead of
    continueBtn.addEventListener("click", () => {
  localStorage.removeItem('username-data');
  localStorage.removeItem('cardnumber-data');
  localStorage.removeItem('month-data');
  localStorage.removeItem('year-data');
  localStorage.removeItem('cvc-data');
  form.reset();
  window.location.reload();
});

    you could have simply done

    continueBtn.addEventListener("click", () => {
  localStorage.clear();
  form.reset();
  window.location.reload();
});

    Makes for efficient code I guess . . .also this line

    <p class="card-holder" id="credit-card-holder" pattern="[A-Za-z]*">Jane Appleseed</p>

    shows error in console for pattern attribute . . . .needs some correction with regex. Also you could have added error messages on invalid form by adding empty divs and manipulating their innerText on invalid input. That's all ,I guess the key to persisting data was adding window.onload() eventlistener and calling addDataToInput(), Hope I was able to help , happy coding !!! 🥂🥂

    Marked as helpful