My first time fetching API's, please any feedback would be appreciated :) Thank you !!
Abhilashpandey
@freakyjonesAll comments
- @SimplyvodaSubmitted about 2 years ago@freakyjonesPosted about 2 years ago
Hi Vodina,
** congrats on fetching data through API 🎉🎉🎉**
I just saw your code and here is one suggestion for you. Always handle errors on your API calls
fetch('https://api.adviceslip.com/advice').then((data) => { // console.log(data); return data.json(); }).then((adviceData) => { // console.log(adviceData.slip.id); document.getElementById('advice-id').innerHTML = adviceData.slip.id; // console.log(adviceData.slip.advice); document.getElementById('advice-box').innerHTML = adviceData.slip.advice; }).catch((err)=>{ console.log("do whatever you want with this error", err) })
Hope this helps, Thanks Happy coding :)
Marked as helpful0 - @rimshubSubmitted about 2 years ago
Hi Frontend Mentor community! Here is my solution to the rest countries api challenge with dark and light theme.
Difficult part Fetching borders data and integrating with existing country data was a hard part for me in this challenge. I should have used routers from start for that but still I have done it without react router dom. Please give your suggestions on improving my code or any advice.
Built With
- React
- Bootstrap v5 (It turns out to be a great choice for this challenge)
Thank you. Looking forward for your feedbacks✨
@freakyjonesPosted about 2 years agoHi Rimsha congrats on completing the challenge 🎉🎉
your website looks just like the design. while reviewing your website, one mistake caught my eye, the filter by region dropdown list item cursor is not a pointer.
Happy coding :)
1 - @Fran-SanabriaSubmitted about 2 years ago
Hello, this is my second challenge, I am still improving day by day, all the feedback received
@freakyjonesPosted about 2 years agoHi Fran,
congratulation on completing the challenge
I just saw your code and like to give my one suggestion with your permission,
- Rather than using media queries throughout your CSS file you can put all your code related to that responsiveness in one place, It will be much cleaner and you have your particular device code in place.
@media screen and (min-width:950px) { img{ height: 268px; width: 268px; }, h1{ font-size: 21px; } }
I hope it helps, Thanks. Happy coding :)
0 - @MrEasty94Submitted about 2 years ago
Found this one quite a simple build. Had questions around whether or not to use background images as the source of the image for the perfume bottle (decided to go with bg images so I could change it based on a media query).
Really going hard on coding mobile first, as I'm finding the media queries are becoming much smaller.
Probably could do with tidying up the CSS a little bit, and maybe changing a couple of the class names so that they better represent the content but overall pretty happy with how this one turned out.
@freakyjonesPosted about 2 years agoHi Michael,
congratulation on completing the challenge
I just saw your code and like to give you one suggestion
- instead of using an anchor tag on add cart, a button tag will be a better option for accessibility.
I hope it helps, Thanks Happy coding :)
0 - @Paula-CarlechSubmitted about 2 years ago
My difficulty was about creating the chart, I cound´t find a way to change the colors and fonts so I can build something like the original design. Any suggestion are welcome.
@freakyjonesPosted about 2 years agoHi Paula,
congratulation on completing the challenge
I just saw your code and like to give some suggestions with your permission,
-
you can add another key to every object in the data.json and then map it for every bar so that you can change the color of the bars.
-
Start using semantic HTML in your code. Here is a blog for you to get started with semantic HTML. https://www.simplilearn.com/tutorials/html-tutorial/html-semantics
If you want to know how to do this with only Js you can check out my solution.
I hope it helps, Thanks happy coding :)
Marked as helpful0 -
- @casserole27Submitted about 2 years ago
I'm happy with my solution, but if anyone has any suggestions, I'm continually looking for ways to make my CSS more efficient and seamless between mobile and desktop. Thank you!
@freakyjonesPosted about 2 years agoHello Clewis,
congratulation on completing the challenge. I just saw your code, Here is my one suggestion that may help you in the future.
Use of universal operator to get rid of the default browser Style instead of using margin:0, padding:0 for every device
*{ margin:0; padding:0; box-sizing:border-box }
I hope it helps, Thanks Happy coding :)
Marked as helpful1 - @JetyunSubmitted over 2 years ago
What I learned
- I learned on how to greyed out a website, by using an absolute positioned div with bg color and opacity
- I reinforced my JS skill on onclick function, if statement and create variable with get element by ID and class
- First time using CSS custom properties to improve the readability of my code.
Continued development
-I would like to learn a faster way to code since it took me more than 6 hours to finish this. -I would like to learn more on responsive website, so that my image and text will be more responsive as the width getting bigger
Useful resources
- (https://www.w3schools.com/cssref/css3_pr_box-shadow.asp) - Remind me on what to do with box shadow
- (https://www.youtube.com/watch?v=PHO6TBq_auI) - Learned CSS Custom Properties in this video
- (https://www.youtube.com/watch?v=9M58urr1CVQ) - Learned VS code shortcut from here.
You guys can go to the README at my github in the respository for more info.
Please criticize my work (especially the responsive part), thanks. If there's some tips on faster coding, please help.
@freakyjonesPosted over 2 years agoHi Jetyun, congratulation on completing the challenge
I just saw your code, and here are my suggestion,
- Using responsive units (rem, em,vh,vw) in your code will help you to make a responsive website.
- Using min and max will also help you to make a responsive website.
Here is one of my favorite videos regarding website responsiveness (https://www.youtube.com/watch?v=srvUrASNj0s).
I hope it helps. Happy coding :)
Marked as helpful1 - @lhpellizzonSubmitted over 2 years ago
First time out of Tutorial Hell =)
@freakyjonesPosted over 2 years agoAwesome, More power to you Luis Pellizzon.
Happy coding :)
0 - @abymaniSubmitted over 2 years ago
Setting navigational menu was difficult for me . I think my javascript code is not optimal it does work but there must be a way to do it better. any suggestions will be appreciated.
@freakyjonesPosted over 2 years agoHi Abdul,
congrats on completing the challenge
I just saw your code, I would like to give some suggestions with your permission
- start using data attributes in your code, It will be much more efficient to change open and hide the nav and reduce the use of excessive javascript.
- try using a z-index while stacking multiple components in one place . Here is one of my favorite videos regarding z-index (https://www.youtube.com/watch?v=uS8l4YRXbaw).
hope it helps, Thanks Happy coding :)
0 - @fsuropatySubmitted over 2 years ago
I'm struggling on how to change the picture depending on the screen size, Does using the <picture> tag is the best way to change the image or are there any better methods to do this task?
Thank You
@freakyjonesPosted over 2 years agoHi, fsuropaty,
congratulation on completing the challenge.
There is two way you can handle image responsiveness
- use it as a background image as per your code it will be like
#image-section{ background-image:URL(image path); background-position:center; background-size:cover; background-repeat:no-repeat; }
My solution also uses this method.
- The second method will be when we make img take a width of 100% so that it can inherit the parent container responsive property. The code will be something like
#imagesection{ width: 10rem; } #imagesection img{ width:100% }
I hope this helps. Happy coding:)
Marked as helpful1 - @Kapil101527Submitted over 2 years ago
Suggestions are well apreciated.
@freakyjonesPosted over 2 years agoHi, Kapil,
congrats on completing the challenge.
I just saw your solution, Here is my one suggestion
Wrap your mobile-bg and parent-bg images inside the individual parent div and give them 100% width of the parent. That can make your image responsive. Check my solution for reference.
Hope this helps. Thanks, and happy coding :).
Marked as helpful0 - @iOwslaSubmitted over 2 years ago
I had a problem placing my project in the middle of the page, other than that, I didn't have any problems.
@freakyjonesPosted over 2 years agoHi Owsla,
congrats on completing the challenge.
I just review your solution and it almost looks like the design, Here is some tips that can improve your solution
- Change the width of box content and box image div to 100%. It will make two div equal width.
- instead of using a margin for giving space between parent div and inside elements, padding will be an awesome choice.
Hope it helps, Thanks, Happy coding :)
Marked as helpful0