Working with json file, was the main challenge I faced. The second challenge I faced was the overlapping of the boxes, I had to learn z-index and really understand positioning in css.
What specific areas of your project would you like help with?How to get the element active with a color of white when clicked.
The reason why the text won't turn white when clicked is because of the opacity that the 'daily-list' has. It basically darkens the color you placed on the timeframes. The easiest fix I can think of is adding the opacity based on what's selected and not selected. Also, I did create a pull request on your Github page if you want to see the solution.
The only difficulty was centering the button according to the board sizes.
If you have any tips to show me how to do it that would be great.
Not sure if you noticed but you seem to be getting duplicate responses from your API call especially if you preview the site on Firefox. To prevent that, you'll have to disable caching in your code.
I was wondering how to get rid of the space between the top text and the bottom text. I also had questions about best practices and if I organized my HTML correctly (having two "p tags" be the separate lines of text).
For the best coding practice, I'd take a look at this link and as for the issue about the space between the top text and bottom one, you'll have to make the margin of the first text to be 0 instead of none or something like this
.container > .header{
margin-bottom: 0px;
}
Hi this is Fejiro, and this is my solution to the Advice Generator
Any suggestions on how I can improve are welcomed
Not sure if you noticed but you seem to be getting duplicate responses from your API call. to prevent that, you'll have to disable caching. Also I'd suggest that you put your call in a try catch methods. That way, you can log any error you get.
I had a hard time keeping the elements within the limit of their space, I ended up letting a padding pop out of the box
Hi.
When I looked at your css file, I saw a lot of hard coded sizes which make life harder when you want to make the website responsive. A quick fix would be to use "em", "rem", "vh" or "%" when defining sizes. In some place instead of using height or width to define the length of your container, use margin or padding to set the limits. You can also use "calc()". Use "px" sparingly.
This is my first frontend mentor challenge (i've been studying html+css recently)
Hi,
Congratulation on completing this challenge. Overall, you did well especially since you just started. Allow me to give you some tips on improving your code.
1.Instead of writing your CSS (style section) inside your HTML file, you should create a separate CSS file and link it in your HTML file underneath the title tag inside the head tag.
<link rel="stylesheet" href="./public/css/main.css">
2.I usually start off my styling by remove all the default browser styles and adding my own.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Overpass', sans-serif;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
scroll-behavior: smooth;
overflow: hidden;
background: $very-dark-blue;
}
3.I also try to stay away from hard coding size (depends on the situation) and instead use rem or em. This way, you can easily have your website responsive.
4.Use @media to style your website for different devices
@media screen and (min-width: 370px) {
.container {
width: 370px;
}
}
5.I'll also learn about display: flex and grid. Here are some links that I look at when I forget some stuff about them. Flexbox, Grid
6.Finally I learn SCSS/SASS when you have a good understanding of CSS. It's easy and it make styling a lot simpler in my opinion.
Here's a link to my version of the QR Code Component : QR-Code
Hope this helps
Happy coding
can I have feedback about this solution?
Hi,
I took some time to look at your solution and you did a great job!
The only thing I would have done differently would be grabbing the p tag using
p:first-of-type and p:last-of-type. Instead, I would have used a span tag and given them a class name (or given the p tag a class name)
That way when I go back to my CSS file, I know the exact tag I targeting but that's just my personal preference
Another thing is that I'll take a look at the Semantics in HTML when structuring your HTML content
Have a nice day & Happy coding!
I used @media (orientation: landscape) instead of fixed pixels to show the desktop layout, I'm not sure if that's bad practice, also I think my CSS is too messy
Hi,
Let me begin by saying congratulation for completing this challenge. As for your question about organizing your CSS file, I believe that you can do two thing (speaking from personal experience):
The link below is an old portfolio project of mine that shows what I mean by sectioning off your file into components using comments and also the issue that I mentioned above
https://github.com/StormKing969/Personal-Portfolio/blob/main/assets/css/styles.css
The link below is an example on how I used SCSS to style my project
https://github.com/StormKing969/Personal-Portfolio-Version-2/tree/main/scss
How do I go about the @media to use when it requires a screen display for both mobile and desktop view?
So in your CSS file at the bottom include this line of code
@media only screen and (min-width: 645px) {
// Things you want to change goes here
}
The example above uses min-width because I usually do a mobile first approach whenever I build something. Anything inside the @media will change at the given width which in this case is once the width exceeds 645px
how you import local json file ? Feedbacks Appriciated !
Hi Anurag, I took some time to look at your solution and you did a great job!
However, I'm not sure if you noticed but your button doesn't seem to work as intended. And the reason for it is that after your first fetch, the info you get from the API gets cached. The way I fixed that issue in my solution was by disabling the cache.
Overall you did well :)
Hope this help and happy coding!
Hello everyone. Thanks to the amazing people who helped me about this project in the platform i could improve it's layout and make the logical part work using the JSON file. By doing that, i feel more confident now. Thank you very much!
Hi VINÍCIUS, I took some time to look at your solution and you did a great job!
Also I have some tips for improving your code:
I'd recommend that you try to learn SASS/SCSS as I believe that i makes life easier when write css. And its easy to learn
Overall you did well :)
Hope this help and happy coding!
Can anyone tell me how I can make it so that the api doesn't require 2 seconds before a refresh? The api endpoint says that it needs 2 seconds or it will not run but I've seen a solution where they got it to update rapidly.
The reason why you need to wait 2 seconds is because the response gets cached and if you make a call faster than that, then you end up with the same response as before. So if you disable your cache, you should be able to rapidly update your quotes.
Hope that helps :)
