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.
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.
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;
}
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.
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.
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
