Hi there! I feel like the result of my challenge is pretty good, however I guess there are still a lot of best practices I don't know about, so if you'd like to review my code and give me a feedback about stuff I could improve to be more efficient I'd be gratefull :)
Hello Melody, great job on the challenge! The design is on point and the responsiveness works pretty well for most of the widths. However between 1000px and 900px the design is a bit off (the picture doesn't fill the whole space and is aligned to the top of the container).
I took a quick look at your code and everything seems fine. Very clean code and easy to understand, awesome! I would just suggest using Regular Expressions to validate the email, as checking if it includes "@" is not strong enough.
Here is an example of how to do it:
const regex =
/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return regex.test(email);
};
validateEmail('example@email.com'); //returns true
validateEmail('example@email'); //returns false
Hope this helps! Happy coding ✨
Hey, great job on your pricing component. The design is on point and it looks very sleek :D If there is just one thing I suggest you could change, is to add a transition when you change states (eg.: hover buttons), that way we don't get that "jumpy" effect when you hover over it. Other than that, great job. Happy coding ✨
Hi, This is Abhishek, while making this project I found the following things difficult. Can you tell me how I can Improve them.
Hello Abhishek, great job the the project :D Quick design tip: add some padding to both of your containers, the text is way to close to the edges. As the for two question you asked, I can help you with the first one: there are two easy ways in which you can use the json files. The first one is with a simple fetch request:
fetch('data.json') .then((response) => response.json()) .then((data) => console.log(data));
Or if you are familiar with asynchronous JS, you can use async/await to fetch you data.
const getData = async function () { const request = await fetch('data.json'); const data = await request.json(); console.log(data); //Data is available to use as if this was synchronous code };
Hope my comment is of any help. Happy coding ✨
Hello, my name is Mohamed. I used Flex-box to create this design. Could you please provide me with feedback on how to improve it? Thank you.
Hello Mohammed, great job at completing the challenge! You mentioned you used flexbox to design the layout, however I'd suggest using display:grid instead. By doing so, you would not need to wrap the cards in parent containers in order to create the flexbox containers. And with the spanning properties of grid, creating two dimensional layouts are super simple, once you don't need to define individual properties for each card (eg. height margins etc..).
I have also completed this challenge using CSS Grids, feel free to check it out. :) Happy coding ✨
Hello :)
Any feedback and comments are welcome.
Happy coding!
Maybe it only happens to me because of my screen size, and it's not a big deal at all since the container is visible if I scroll up. However I thought I'd let you know :D
I don't know if there is a way to upload images directly here, so I have a link for the screenshot.
Hello :)
Any feedback and comments are welcome.
Happy coding!
Hello Monika, good job on your project 😎 I have just one remark for you: when you click on the zoom control buttons on the left side of the app, the map expands to occupy the entire viewport(which I am sure it is what you intended, I haven't looked at your code), however the container with the IP address info gets pushed to the top and its content gets partially hidden. That's my only remark, other than it looks awesome. Happy coding! ✨
I tried my absolute best to get the images well on desktop view, but kinda gave up lol. The javascript part was tricky at first but figured it out eventually. Though, in the js there is a bug when you click an accordion and it drops down, once you click it again, the hover ability disappears.
Hey, great job! Your app is looking very neat, even if the images are exactly like the design. I have a suggestion to fix the bug event, although I don't know if it best the way to do it, but that's how I would have tackled the hover bug. Instead of styling the question color on hover, you could perhaps style it on a mouseenter/mouseleave event in JS?
