Any better, more efficient ways to solve this? is my code clean? Best practices?
how could I refactor my javascript? I know there are ways I just didn't attempt to
How can I write cleaner code. Any redundancies? any tips on the infinite scrolling? mine is buggy
How can I make this code cleaner? Especially with my media queries and javascript
per usual, is my code clean, or are there better and more efficient ways to handle things? Any redundancies?
I'm proud of becoming more familiar with regular expressions for inputs.
What challenges did you encounter, and how did you overcome them?Extracting the value of the percentage value seemed to so difficult, but attaching a value attribute to the buttons helped me overcome it
What specific areas of your project would you like help with?Is my code as clean as it could be?
Hi,
Nice job on this project, it looks very nice and functions well.
One thing I could suggest is to add the event listeners into a single initEventHandlers function where you then can handle all of the event listeners instead of in multiple different functions. This could make the code more readable.
I also noticed some bugs like:
These are just things I noticed when testing. It's worth testing every case scenario to make sure there are no bugs.
Keep it up, good luck on your coding journey
everything, will do the same thing next time. am proud that if you look close at the site and the daily stats everywhere the stats is 1hrs i make it display 1hr without the s just a few more lines of js allow me to do that. I figured it made more sense even if it is not a requirement from frontendmentor
What challenges did you encounter, and how did you overcome them?the json was not loading on the page, found a way around it with google.
What specific areas of your project would you like help with?all is fine
Hello Makha,
You did a good job on this challenge! I didn't even think about the 1hr vs 1hrs. That's some good attention to detail, one which I overlooked. Good catch
One thing that I added that you might want to add is setting the weekly button to white on the initial render. You can do that with one line of code by setting the button to active. It's a small thing but it will show the user that they are on the weekly tab by default. Just a little thing that can go a long way.
I don't have much else to say besides that. Really good job!
During this project, I learned about form validations and handling form data. Here's a snippet of the JavaScript code I used for email validation:
What challenges did you encounter, and how did you overcome them?const validateEmail = (email) => { const re = /\S+@\S+\.\S+/; return re.test(email) && email.length > 0; };
Nothing major.
What specific areas of your project would you like help with?Nothing for now, any tips on how to improve are welcome!!!
Good job on this project, it looks super close to the original design
I don't have anything really to critique you on tbh, great job
Unfortunately I cannot see your live site or your code (both giving 404 error) so I cannot give feedback. But judging by the solution vs design comparison window, it looks like you styled it well at least.
Hi Arthur, nice job on this challenge!
Here are a couple of things to consider:
- For your Hero section:
- Add a padding to the top
- Try using grid in order to place the content between the two hero images.
- Here's what mine looked like:
.hero {
display: grid;
column-gap: 1rem;
overflow: hidden;
grid-auto-columns: 1fr;
align-items: center;
text-align: center;
justify-content: center;
grid-template-areas:
"logo logo"
"faces1 faces2"
"textcontent textcontent";
}
.hero > .logo {
grid-area: logo;
justify-self: center;
width: 119px;
padding-block: 3rem 3.375rem;
}
.hero > img:nth-child(2) {
grid-area: faces1;
}
.hero > img:nth-child(3) {
grid-area: faces2;
}
.hero-content {
grid-area: textcontent;
justify-self: center;
display: flex;
flex-direction: column;
place-items: center;
text-align: center;
padding-inline: 1.5rem;
max-width: 30rem;
padding-top: 3rem;
}
- For the footer:
- I don't know why your image is so zoomed in but here's what mine looks like:
footer {
background-image: linear-gradient(
hsl(195, 37%, 48%, 0.8),
hsl(195, 37%, 48%, 0.8)
),
url(./assets/desktop/image-footer.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 428px;
position: relative;
margin-top: 11rem;
padding-top: 5.75rem;
padding-inline: 1.5rem;
}
Also consider using custom variables. It will save you time and look cleaner.
I hope this helps at least a little bit. Again, great job on the challenge and good luck
I am most proud of completing a grid section. This was a challenge as I typically use flex. Next time I will attempt the layout using grid areas instead of manually spanning the content.
What challenges did you encounter, and how did you overcome them?The entire grid system was a challenge. I am not familiar with the terminology associated with it. I had to watch videos on how to implement grid.
What specific areas of your project would you like help with?I would definitely like to dive deeper into grid! I think that it is a great system with a great purpose!
Hi Jarrod,
You did a good job with this project, our code looks very similar. You had mentioned using grid-template-areas next time and I think that's a great idea. I just learned how to use grid-template-areas and it was a lot better in my opinion. Specifically, it made my media queries so much cleaner and I had way less code. I would 100% recommend you look into it and try to get comfortable with it.
Your sizing looks like it may be a little bit off as well but that isn't a huge deal. I would just suggest playing with max-widths to get those fixed.
The last minor thing I would suggest is to be careful with the breakpoints. I noticed that you set the breakpoint to a very large number. This means that on larger screens the testimonials are stretching far and staying in the 1 column layout. I would suggest trying to make sure it looks good on tablets and large tablets too. (grid-template-areas make this a lot easier btw)
