Skip to content
OverviewSolutions
31
Comments
48
Adel
@Adel-Harrat

All comments

  • Cesar D.•400
    @ThatDevDiazSubmitted over 1 year ago

    First project using tailwind. Emphasis on the javascript as that is what i'm currently focusing on.

    Getting the app to work was not the hard part, the hard part was figuring out how to get the current date (probably would have been an API but I haven't learned how to utilize APIs yet) and then calculating the math utilizing this information. Even using a static date, it was hard to calculate the math because every month has a different amount of days and I wasn't sure how to calculate the exact date with the inconsistencies in this information. The calculator works, the math is just slightly wrong.

    Advice is always welcomed. I tried to make sure I didn't repeat any code. I will be jumping into react projects after this JS project.

    Age calculator App

    1
    Adel•820
    @Adel-HarratPosted over 1 year ago

    Hello, I used the moment library to calculate the date accurately, see my solution

    0
  • Jose Nectali•180
    @Necta-glitchSubmitted over 1 year ago

    Well it was not soo difficult for me but I made a mistake I forgot that when you are using Tailwind CSS you have to start coding in resolutions of mobile and I made it for desktop first so I have to code the mobile version in pure CSS in the index file with media screen and the other problem is that when I use Vercel or Netlify for web hosting the icons and image don't show I don't know why ;V

    React.js Tailwind CSS

    1
    Adel•820
    @Adel-HarratPosted over 1 year ago

    Hello, what is your github repo for this challenge ?

    I wanna help 🤗

    0
  • Oleg•80
    @mrJ0oSubmitted over 1 year ago

    Hi there, I hope you are well! I would really appreciate it if you could stick around and take a brief look at my solution

    Stats preview card with Flexbox

    1
    Adel•820
    @Adel-HarratPosted over 1 year ago

    Congratulation on completing this challenge 🎉

    It's responsive, typography and colors are all good

    have you tried this css property on .image__overlay ?

    .image__overlay {
mix-blend-mode: multiply;
}

    Good luck and happy coding 👋

    0
  • PatrickLee22•170
    @PatrickLee22Submitted over 1 year ago

    This challenged allowed me to reinforce what I've learned from tutorials about making fetch calls to an API and what to do with the JSON response.

    I've also had difficulties using the getting a new response from the advice API while using Firefox. Credit to an over year old post made by @KrzysztofLeczycki suggesting to add {cache: "no-cache"} to the fetch call that resolved this issue.

    Although my fetch call does work, I do feel like my function that's making the fetch call may not be using best practices. Any feedback on what is best practice would be greatly appreciated.

    Advice App w/ React & Typescript

    1
    Adel•820
    @Adel-HarratPosted over 1 year ago

    Hello and congratulations on completing this challenge! 🎉

    I did sent the request api like this:

    // Fetching the random advice data fetch(https://api.adviceslip.com/advice?t=${Math.random()})

    By appending ?t=${Math.random()} to the API URL, you add a random query parameter, which helps bypass any caching mechanisms on the server side. This ensures that each request is treated as unique, and you receive new advice every time you click the dice button.

    Marked as helpful
    1
  • Adel•820
    @Adel-HarratPosted over 1 year ago

    Perfect solution does not exists !

    after seeing this : 😮😍

    Marked as helpful
    1
  • Daniel•170
    @kadan-developSubmitted over 1 year ago

    Hello coder's, this is my first project with API, it was a little bit challenging, but worth of every minute, hours, weeks to pursue it. If you have any suggestion, advice, feel free to leave it. Thanks!

    Responsive Github Username Finder

    2
    Adel•820
    @Adel-HarratPosted over 1 year ago

    Congratulation on completing this challenge

    I felt happy when I saw my Github profile 😍

    UI bug: the content is not centered vertically (like theres so much margin-top and 0 margin-bottom)

    Other than that, great job 👌♥

    Marked as helpful
    1
  • Celine Tran•120
    @CelineTrannSubmitted over 1 year ago

    Is there a better way to style the red, yellow, green, and blue boxes so that the spacing remains more consistent with varying screen sizes?

    How do you determine what html tag to use with text (eg. p vs. h1 vs. div vs. etc...)?

    Summary Component Using Flexbox

    1
    Adel•820
    @Adel-HarratPosted over 1 year ago

    Hey there! Congrats on completing this challenge 😍

    When it comes to organizing my HTML content, I've got a specific way of doing things:

    First off, for the big, important title, I like to use the <h1> tag. It really stands out and shows that it's the main heading on the page.

    Next up, when I have secondary titles that aren't as crucial, I go with the <h2> tag. It helps give them a bit of importance but not as much as the main title.

    Now, when it's time for longer paragraphs, I turn to the trusty <p> tag. It's perfect for fitting in those chunks of text.

    But sometimes, I want to put emphasis on just a few words or phrases. That's when I bring in the <span> tag. It's great for highlighting those short bits.

    Oh, and one more thing! I try to stick to semantic HTML and make things accessible. So, unless I really need them for specific layouts, I tend to avoid using <div> tags.

    By sticking to this approach, I make sure my HTML looks good, stays organized, and is easy to understand. 😎👋

    0
  • CARLOS ALZATE•40
    @carlosalzatepSubmitted over 1 year ago

    Which areas of your code are you unsure of?

    Not sure about the H2 tags used for the last section titles. Neither sure about having 2 <ul><li>, one for Desktop and other for Mobile

    Landing page HTML/JS/CSS

    2
    Adel•820
    @Adel-HarratPosted over 1 year ago

    Congrats on completing this challenge 😍

    I typically utilize a JavaScript array to store links, which I then employ for both mobile and desktop applications, particularly when working with ReactJS.

    Happy coding 👋

    0
  • Adel•820
    @Adel-HarratPosted over 1 year ago

    Hello and congratulations on completing this challenge! 🎉

    Great job on creating a UI that is pretty identical. It seems you have encountered a small bug where clicking on the dice button does not fetch new advice. This issue is due to the server and not your code.

    To fix this problem, you can modify the API fetch request. Instead of using:

    // Fetching the random advice data
fetch("https://api.adviceslip.com/advice")

    You can use the following code:

    // Fetching the random advice data
fetch(`https://api.adviceslip.com/advice?t=${Math.random()}`)

    By appending ?t=${Math.random()} to the API URL, you add a random query parameter, which helps bypass any caching mechanisms on the server side. This ensures that each request is treated as unique, and you receive new advice every time you click the dice button.

    I hope this helps! Let me know if you have any further questions. 👋

    Marked as helpful
    0
  • BBualdo•540
    @BBualdoSubmitted over 1 year ago

    I'm pretty happy with it, but I can't fully understand something: 1. [FIXED] How to make site look nice when zooming in and out?

    2. Why 'object-fit' didn't work on desktop version?

    • I had to set up the height manually.

    Thank you!

    Mobile First Technique #2

    3
    Adel•820
    @Adel-HarratPosted over 1 year ago

    Hello and congratulations on completing this challenge! 🎉✨

    I have downloaded your code and made some modifications that I believe will make your solution even better. Here are the changes:

    • Change the <h1> tag to a <div> tag (line 33).

    • Comment out the attribution code because it is ruining the alignment of the card.

    • Remove the margin: 200px 400px; from the .main-page CSS.

    • Add the following CSS to the body:

    body {
display: grid;
place-items: center;
min-height: 100vh;
}
    • Add the following CSS to the top of the general.css file:
    * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
    • Change the width property to max-width in the .main-page CSS:
    .main-page {
max-width: 1087px;
}

    • Add the .image-wrapper class to the div that holds the images.

    • Add flex: 1; to the .image-wrapper CSS.

    • Remove the width property from the .page-text CSS.

    • Add flex: 1; to the .page-text CSS.

    I didn't know how to make the image more responsive or why object-fit doesnt work

    My github repo for this code : github.com

    These modifications should enhance your solution. Let me know if you need any further assistance! 🎈

    Marked as helpful
    1
  • C4rlos•410
    @solracssSubmitted over 1 year ago

    For this challenge I use pseudo-element ::before for applying overlay background effect on why us section. Also it was nice working with 2 columns with flexbox.

    Question for You:

    • is my semantic HTML good?
    • how about responsive display, is it ok?

    Also...

    I encourage you to leave any comments regarding my code as it is win-win.

    You practice code-review and I get feedback!

    Single price grid component with flexbox

    1
    Adel•820
    @Adel-HarratPosted over 1 year ago

    Hello and congratulations on completing this challenge!

    You've done an excellent job w🎉✨, and your solution closely matches the design. Well done! 🎊

    I particularly liked your approach to responsiveness!

    Regarding the UI, I have two minor observations: ⭕

    1. The "$29" should be in bold to make it stand out more.

    2. The "green/lime" title should be slightly larger than the accompanying text.

    Overall, your work is commendable. Keep up the great work! 👋

    Marked as helpful
    1
  • Adel•820
    @Adel-HarratPosted over 1 year ago

    Hello and congratulations on successfully completing this amazing challenge! 😍

    I must say, you've done an exceptional job with the user interface. The design is remarkably identical to the original concept, and you should be proud of your attention to detail. Great work! 🎉✨

    • Javascript bug 🔴

    I encountered a minor issue while using the application. It appears that when I click on the button to generate or fetch a new piece of advice, the content doesn't update as expected. It seems to be working fine for you, but for some reason, it's not working for me.

    Fortunately ❗, I have a simple solution that should resolve this problem. To ensure the button triggers the desired behavior and fetches new advice, please make this modification in the way you send the fetch request api:

    const response = await fetch(`https://api.adviceslip.com/advice?t=${Math.random()}`);

    By implementing this approach, you should be able to fetch and display new advice seamlessly. ✨✨

    • UI bug 🔴

    It seems that there is an issue with the image of the divider not loading properly. To resolve this problem, you can try removing the slash before the image source in the code. Here's how you can make the adjustment:

    Instead of:

    <img alt="" width="295" height="16" src="/images/pattern-divider-mobile.svg">

    Change it to:

    <img alt="" width="295" height="16" src="images/pattern-divider-mobile.svg" />

    Once again, congratulations 😍 on your impressive achievement, and I hope this solution resolves the issue you encountered. If you have any further questions or require additional assistance, please don't hesitate to ask. Best of luck ❗💥

    Marked as helpful
    0