@MelodyPatin
Latest solutions
Responsive dictionary app with theme toggle built with SASS/Vanilla JS
#sass/scssSubmitted over 1 year ago
Latest comments
- @anacarolinabmv
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 falseHope this helps! Happy coding ✨
Marked as helpful - @MaximilianoDanielGarcia@anacarolinabmv
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 ✨
Marked as helpful - @Abhishek123a45@anacarolinabmv
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 ✨
Marked as helpful - @mohamed-fm@anacarolinabmv
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 ✨
Marked as helpful - @Mooonika90@anacarolinabmv
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.
- @Mooonika90@anacarolinabmv
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! ✨
