Being a beginner, this was a challenging project but I managed to finish it. The hardest part for me was writing CSS since I didn't use any external library like Tailwind. CSS is not optimized. I need to improve to write clean and optimized CSS if someone have some guidelines how to wirte optimized CSS it would be much appreciated. I learned a lot of new things and for the first time I used libraries such as Formik, Yup and Framer Motion. Any constructive critique is welcome.
Hi there, congrats on completing this challenge! 🎉
It looks very nice and everything is working as exepcted. I also had a look at your code and I must admit, it's written in a really neat way and is easy to be read by another developer. Nice!
However, there is one minor thing that could be improved - the textarea element on the contact page can be resized horizontally and sticks out of the form layout.
You can fix it by restricting the resizing direction to only vertical axis (add resize: vertical to the textarea styles) or by setting the desired dimensions and block resizing entirely. Feel free to read more about this property on MDN.
Other than that, I this is a very strong project, keep it up!
Customising validation is a great thing. No one wants to see the browser's default message. The problem is that it's not as easy as it should be. Once again, Tailwind came to the rescue with some great handling of CSS pseudo classes like :invalid and :placeholder-shown. Let me know your thoughts :)
I really admire how the layout is almost identical to the design + I also appreciate the fact that the input validity is checked as soon as it loses focus. Cool!
One minor thing from my side - I would add a hover and focus effect on the button element, as on the design images. It would improve the UX even more.
Other then that, this is a very strong project, keep it up!
I need help with two things.
The first one is that I don't have an idea of how to create a button with a gradient effect and a color shadow. The second thing is that I read a warning message when I have developed the form, but I don't understand its meaning.
Thank u so much to helping me grow :)
Gradient background can be implemented with a help of the before or after pseudo element. Since you are using tailwind, add relative class to the button and create the pseudo element that will be positioned absolutely to the button and will take up 100% of its height and width, it can be coded inside the index.css file. Add an overflow-hidden class to the button or specify the same border radius for the pseudo element, so that the edges are not sticking out. For smooth transition, you can animate its opacity. Also, remember about setting up a higher z-index value on the button, so that its text will be always visible.
Gradient shadows can also be created using pseudo elements. I encourage you to visit this CSS Tricks article.
When it comes to the warning message, I think it can be caused by the noRecharge function - it's blocking the default form action but it also returns it at the same time. Try coverting it to this:
export const noRecharge = (event: React.FormEvent<HTMLFormElement> | undefined) => { if (event) { event.preventDefault(); } };.
Also, I would also suggest to perform the form validation in the function that is triggered on the onSubmit event - this way, the event is always recevied as an argument. The vaiidation check can be performed using a custom hook (here's an example). Based on what it returns, the error state/message can be stored by the useState hook and used to dynamically add classes/style the input element (there's no need to create and render two separate input elements).
I feel like this was my best attempt at using media queries. The issue I had was that I felt like I picked the best point to break it into a desktop view (min-width: 1000px). Is it generally okay to pick the min-width when you FEEL like the application should be breaking or is there pattern-like sizes that most devs use?
Is the use of fixed sizes (px vs rem) used appropriately here? What are general things that we used px for and rem for?
Thank you in advance for all of your help, it is greatly appreciated!
Hi there, congratulations on completing this challenge!
I have reviewed your code and it's nicely written and well organised. Keep it up!
When it comes to px vs. rem/em usage, the best practice is to use rem/em values for things like font size, padding, margins etc., so that the layout can be scaled up or down.
For breakpoints, I personally use values defined in the Bootstrap documentation, they seem to work in most cases. Here's the link.
Hello, everybody! I have done this challenge. Do you find my html accessible? I will definitely make some functions in JS to make my code look better, but for now let it be so. What could be improved? I appriciate any possible feedback.
I have reviewed your code and while I am able to interact with all of the element using only a keyboard, the code does not really support screen readers.
I would encourage you to exple the topic of aria attributes in HTML - you can start from this article.
Overall, I really like your approach. The code is clean, easy to read and the files structure is well organised. Keep it up!
I found it difficult to get the countries flags to be the same size and also some aspects of the countries details are missing. I'm unsure about that aspect. also i would like to know what areas can be improved about
Below you can find some minor suggestions from my side:
The Where in the world page title can be a Link element that takes the user back to the Homepage onClick.
You can add some space between the moon icon and the button text. Also, you can add flex to it and align the icon and the text to be on the same line vertically.
Detail pages for some countries are not found (see Antarctica or Western Sahara).
You can add a feedback message that no countries were found if the user types in an incorrect value.
No results appear if the user selects the America filter.
There are some issues with the detail fields, such as empty Currency and Languages and the Top Level Domain is always displayed as "none".
For the Population field, there is a method to automatically add comas to larger numbers - you can try implementing it!
I see that you are fetching the data inside the App component and then providing it to other components by props drilling. As an alternative, I would suggest Redux Toolkit for state management as this app is quite complex and for fetching the data you can use either Redux Thunk or React Router's loader functions.
As for the image size issue, you can set a width on the entire card element and then make the image container take 100% of this amount. Tried it in the browser and it seems to work.
Overall, I really like your approach. The code is well written and organised. Keep it up!
I have some minor suggestions on what could be improved:
It seems that you forgot to change the font so that it matches the design.
You can add transition property to the button element to smoothly change its background color on hover.
Once the form is submitted and the user is redirected to the confirmation page, the initial page almost instantly pops out. This could be fixed to improve the user experience.
Other than that, I really like your approach to this challenge.
There are vertical and horizontal scrollbars on the Filter by region dropdown and they cover the select options.
If the user hovers on the country card while the Filter by region dropdown is open, it is covered by the card.
For better UX, the Back button should take the user back to the main page. Also, the Where in the world logo can be a link that takes the user back to the main page.
You can change the input's background color to match the dark mode better.
You can limit the text width as it overflows for some countries (see Republic of Zimbabwe page).
That's all I've found when it comes to the page functionality and user experience. Overall, the code is nicely written and the project structure well organised.
I could not manage that blue floor to be hidden when it overflows the white container. The solution has to be simple. If anyone could share it would be awesome.
I had a look at the code and I think I have an idea how to solve the svg issue.
I would add another container with the same dimensions as the left column element and place the first image inside of it. Then, you just need to position it to match the design and add overflow: hidden to the container for desktop viewports (remember it should only contain the first image!). Once you're done with it, place the second svg (the orange box) outside of it. The orange box is not blocked by the overflow property, so it will stick out of its container.
Firstly, congratulations on completing this project! I hope you had a lot of fun while making it! :)
To answer your question, there are two possible ways to shorten the event functions code:
standard for loop:
for (let i = 0; i < rate.length; i++) { rate[i].addEventListener("click", () => { valor = rate[i].innerHTML; }); }
forEach loop - it can be used as elements returned by the getElementsByClassName method are stored in a HTML Collection, which behaves similarly to an array:
rate.forEach((element, i) => { element.addEventListener("click", () => { valor = rate[i].innerHTML; }); });
Congratulations on completing the project! 🎉 I hope you had fun while making it.
Please find some minor suggestions on what can be improved below:
Your HTML code is semantic and easy to read. The only thing that I would change is leaving alt attribute empty for images with icons only. It's not required in those situations.
Instead of importing the Google font inside the stylesheet, I would go for the option with linking it inside the <head> element. Importing fonts in most of the situation requires a lot of loading resources to be completly fetched.
When it comes to padding and margin, I would suggest using em and rem units to make the entire website more responsive.
On mobile viewports the app seems to be a little too wide - it is possible to scroll it horizontally.
If you open navigation on mobile viewport and then switch to desktop, the black overlay stays on the screen and you can't really interact with the app anymore.
For hover states, I would suggest adding some transition on the animated properties to give the website more snatched look.
Font for the dropdown lists seems to be a little bit too small on a desktop viewport.
Consider increasing the with of .hero-left element on a desktop viewport - the space in between left and right side is slighly too big.
You left one comment for the .hero class inside the CSS file 😛.
Speaking of CSS - consider using variables to store colors. It makes them easier to use and adjust their values throughout the code.
Overall, the project is very solid, keep going! I hope you find this comment helpful.
Firstly, congrats on completing this project! I hope you had fun while making it and you gained a lot of new experiece!
Please find some minor suggestions on what can be improved below:
If you enter a future date but still within 2023, the form is submitted sucessfully and the result shows up in negative numbers (I tried it with 27.09.2023).
In BEM technology, double dash -- suggest that the element is a modification. Therefore, instead of app-body__inputs__box--label-day I would use app-body__inputs__box-label--day and the same for app-body__results__box--result-years > app-body__results__box-result--years.
Please change the lang attribute inside the <html> tag to en since the app is written in English.
For better semantic, I would suggest using a <form> tag instead of a standard section as a container for inputs.
An optimal font size set inside the html selector should be 62.5% if you want to later use it to adjust elements' font size with rem or em units.
Instead of using separate margin-top and margin-bottom for the same element (the same goes with padding), you can use a shorthand property: margin: 6rem 0 4rem.
Since you are working with SASS, you can use variables to store the colors. It makes them easier to use throughout the code and adjust if needed.
Overall, good job and the project is pretty solid as it is. Still, I hope you find my comment helpful.
