Skip to content
OverviewSolutions
21
Comments
5
P
ifaronti
@ifaronti

All comments

  • ifaronti•580
    @ifarontiPosted 11 months ago

    I think your solution is excellent!! The mobile menu issue doesn't appear when I used my phone to visit the page. I don't It's a bug to be fixed. You are only seeing it because you are resizing same device width. I saw it while resizing on my PC but not my phone. Your solution is Amazing! Keep it up!

    On the other hand, I think it has to do with transition in case you are worried about it. Same thing worried me for a while durring this challenge.

    Great work!

    Marked as helpful
    0
  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarSubmitted about 1 year ago

    Hi there 👋, I’m Melvin, and this is my solution for this challenge. 🚀

    🎁 Features:

    • Progressive Web App (PWA) support. 📱🌐
    • Achieved 100% in Lighthouse score for performance, accessibility, best practices, and SEO. 📊
    • Utilized TailwindCSS for responsive styling. 🎨
    • Codebase is well-maintained and formatted using Prettier. 💻
    • Resemblance with the original design. 🎨

    🛠️ Built With:

    • TailwindCSS. 🎨
    • npm - Prettier. 💻

    Any suggestions on how I can enhance this solution or achieve even better performance are welcome!

    Thank you. 😊✌️

    Four card feature section (Tailwind CSS)

    6
    ifaronti•580
    @ifarontiPosted 11 months ago

    I've gone through most of your projects and I'm amazed at your skills expecially with CSS. I find myself going through your CSS to learn a lot of tricks. One of your comments led me to pixel-perfect which has greatly peaked my interest in improving my CSS. Thanks!! Thanks!! Thanks!!

    1
  • Victor Chacin•110
    @ViktorChsSubmitted 12 months ago

    This is the first page I do with react was a good challenge but there are things that I do not know if it is quite right as would be to use a function with a state to measure the width of the screen to switch between one image or another among other doubts

    first page made with react On planets!!!!

    1
    ifaronti•580
    @ifarontiPosted 12 months ago

    If you are talking about the background-Images or <img/> :

    in CSS, use background-image: url(location of image) then in your media query (e.g @media only screen and (max-width: 375px){}), change the image location.

    If you are using inline CSS or using <img/>, declare a variable in state(e.g large) whose value depends on screen size so when you are choosing the location of the image, use ternary like this: (directory/{large > 500 ? 'largeImage.jpg' : 'small.jpg'}) or <img src={directory/{large > 500 ? 'large.jpg' : 'small.jpg'}} alt=''" /> That will automatically tell the browser which image to choose depending on screen size.

    Also, use useEffect to make it responsive

    React.useEffect(()=>{ setLarge(window.innerwidth) }, [window.innerWidth])

    Marked as helpful
    0
  • ifaronti•580
    @ifarontiPosted about 1 year ago

    Hey!! Nice project.. great layout.

    A suggestion, when you click border countries, the currency doesn’t change it stays same as that of the first country clicked from home page.

    Nice work..

    0
  • Szidelo•150
    @SzideloSubmitted over 1 year ago

    Calculating age where the day of birth value is higher than the current day value.

    I was struggling to get a valid age when the day of birth was bigger than the current day value. Ex: if current day is 27 and the day of birth was 28 I was getting -1 days as result, if 29 result -2, if 30 result -3 etc. How did you managed this issue if you had it? The way I resolved it is to get the last day from the previous month and to subtract the day value that initially resulted.

    if (ageInDays < 0) {
// Adjusting the age in months and days when the birthdate's day is greater than the current date's day
ageInMonths -= 1;
const lastMonthDate = new Date(
currentDate.getFullYear(),
currentDate.getMonth(),
0
); // This gets the last day from the previous month by adding 0 as para for day
ageInDays += lastMonthDate.getDate();

    Age Calculator App using HTML CSS and JS

    1
    ifaronti•580
    @ifarontiPosted over 1 year ago

    I just subtracted 1 month from the month input and then add: 30 days to day input if month input is April, June, September, November, 28 days if month February, 29 if day and month is 29 and February respectively, 31 if any other month. Your solution is really good too.

    Marked as helpful
    0