Satria Utama• 150
@satutama
Submitted
Does anybody actually read this? This is my third solution on FE mentor. But it seems no one paying attention. (please read this with curious intonation - no hate :D)
Tomás Pereira
@TomasPereira-Dev
All comments
- Tomás Pereira• 510
@TomasPereira-Dev
Posted
hey what's up, I get that feeling, sometimes people can't help with a solution to one of your problems, at the same time, if you want people to help in something that you found hard in the project the best way to get responses is to be presice, to ask for a solution to the specific problem, in my personal experience, when I see someone say "feedback will be appreciated" and notthing else I just ignore them because I found those post very lazy and don't know where to start, or where to give feedback in particular, maybe it's the same to other people as well
1 - Ronny Nieto• 270
@ranieto
Submitted
Not quite satisfied with this one. I couldn't figure out the animation of the numbers. I'll try again in the future. Feedback welcomed.
Tomás Pereira• 510@TomasPereira-Dev
Posted
Hey!, what's up?.
Glad to hear that you were brave enough to try to solve the bonus animation! it's quite tricky.
What you need to do is use the setInterval function, that every x miliseconds adds +1 to a state variable, if the state variable is bigger than the variable that you used to save the calculated date, the function should stop.
I did it this way in vanilla JS:
let dayNumber = 0; //this should be a state. let calculatedDays = 420 //this should be what you used for saving the aready calculated days const daysIntervalAnimation = setInterval((days) => { daysNumberParagraph.innerHTML = `<p>${dayNumber} <span>days</span></p>`; dayNumber += 1; if (dayNumber > days) clearInterval(daysIntervalAnimation); }, 30, calculatedDays);here's some info about how the setInterval method works
You can also check my code out if you want a more detail version .
Good luck!.
0 - acabrie• 170
@acabrie
Submitted
Hi All
Anyone willing to assist me with an issue, I couldn't seem to get the user email address to pull through to the thank you page. Any feedback will be appreciated.
Tomás Pereira• 510@TomasPereira-Dev
Posted
hey, what's up!, I'm not sure 100% if this might be the problem, but try changing the regex to this one:
const regex = [-A-Za-z0-9!#$%&'*+/=?^_`{|}~]+(?:\.[-A-Za-z0-9!#$%&'*+/=?^_`{|}~]+)*@(?:[A-Za-z0-9](?:[-A-Za-z0-9]*[A-Za-z0-9])?\.)+[A-Za-z0-9](?:[-A-Za-z0-9]*[A-Za-z0-9])?I used a regex generator for this because most of the time I try to write one by myself it end up with bugs, those are a pain to be honest, lol. Good Luck!Marked as helpful
0 - Adenuga Abubakr• 170
@abubakr01
Submitted
All reviews are welcome. Please comment to make me improve
Tomás Pereira• 510@TomasPereira-Dev
Posted
Hey, what's up?, congrats for completing this project!, I hope this tips help you to get better with some details.
For text, try adding max-width to the
<p>and<h1>tags, this mixed with the ch unit will make the line breaks.For the inputs try changeing the default borders from the inputs using the , like
border: 2px solid black;, they will look nicer.And for the shadows, this video will be useful, if you add too much the desing will look weird, shadows are a tricky thing hahaha.
Good luck!
Marked as helpful
0 - mohammed bentalb• 300
@MohammedBentalb
Submitted
It's not that accurate since I don't have the exact sizes / Figma design but it looks good and responsive ass it should be
Tomás Pereira• 510@TomasPereira-Dev
Posted
Hey!, what's up?, it was a close attempt! good for you. A way to improve this is adding a max-width to the texts using the ch unit, with that you can make the brakes of line that are in the original design, 1 ch = 1 zero(0) character in the font you choose, imagine every character like zeros when you use it, here is more info about it here is more info about it Good luck!
Marked as helpful
1 - Sahil Kumar• 190
@Vi-r-us
Submitted
Can someone suggest a Frontend Mentor project that would be suitable for building in React? I've already tried using React in this one.
Tomás Pereira• 510@TomasPereira-Dev
Posted
Hey! what's up?, most of the junior projects don't need React, some of them are good to learn how to do specific things with React that you can't do as in vanilla like how to do a dropdown menu and modals/pop-ups with React Portals, it might be a advanced concept tho. Try learn Portals with this 2 projects:
- https://www.frontendmentor.io/challenges/intro-section-with-dropdown-navigation-ryaPetHE5
- https://www.frontendmentor.io/challenges/newsletter-signup-form-with-success-message-3FC1AZbNrv
Others good projects to do with react are in the Intermediate to advanced levels, this are pretty nice:
- https://www.frontendmentor.io/challenges/ip-address-tracker-I8-0yYAH0
- https://www.frontendmentor.io/challenges/rest-countries-api-with-color-theme-switcher-5cacc469fec04111f7b848ca
good luck!
Marked as helpful
0 - NBD• 240
@bdal90
Submitted
Dear All,
Here is my first project using JavaScript which was challenging, but fun at the same time. Overall, I am not very satisfied with my CSS, it just ended up being rather messy (again) despite the fact that the outcome looks fine. Any suggestions?
Cheers,
Dalma
Tomás Pereira• 510@TomasPereira-Dev
Posted
Hey, what's up? I just read your code, hope this tips helps you a little.
1)The background from the container uses a gradient instead of a solid color, that's what makes that light-gray-to-black effect, here is more information about it.
2)You need to add a the max-width prop to the paragraph, that's what makes the brakes of line, when using it to limit text lines you need to use the ch unit, what it does is counting an amount of characters based on the space of a 0 in your font, for example 30 ch = 30 (0) characters.
3)Avoid absolute positioning, it makes everything more hard that it should be, in this case you only need to use flexbox, notice the amount of space between the star and the paragraph, notice how it's the same between the paragraph and the numbers, you can achieve this using the gap property for flexbox, what it does is adding a even gap between every element in a container, not margin needed, you will use it a lot.
This is all I got for now, good luck!.
Marked as helpful
0 - Anusha Fatima Ali• 100
@anusha-fatima
Submitted
- I face some difficulty to made it mobile responsive. Hope you all will like it and give your honest feedback for this. -As a beginner i learn a lot of things from this simple challange.
Tomás Pereira• 510@TomasPereira-Dev
Posted
Hey, what's up?, I just read your code, this tips will help you out.
1)Don't use absolute positioning unless you really need it, it makes everything more harder that it should be, you should'nt use it for laying out elements, it's useful for things like minor details, instead focus on how you position things with flexbox or grid. I reccomend you learning more about positioning with this freeCodeCamp course, it's fun, free and it gives you a free certification that you can use on linkedin to look for jobs in the future :), also this page is super useful, I learn a lot from it
2)Avoid "magic numbering"(trying random numbers in things like width, height, etc...) and using fixed widths/heights, this makes harder to make the page responsive, if you want to make a layout optimal for a lot of screens you need to have in mind that every screen is different, both flexbox and grid fix this problem making the layouts flexible to changes, the freeCodeCamp course that I mentioned before focus on teaching how to do precisely this.
A good way to learn is knowing first what are the most common problems with begginers, this video will be useful to understand better and discover some mistakes you might don't know you are doing
Sorry if it's too much text haha, I'm still learning how to teach or give feedback better :P, hope it helped a little, good luck!
Marked as helpful
1 - Patricia• 110
@Patixi
Submitted
Hello everyone! I Would like to know your opinions and suggestions about units. I try to use everything with "rem", but still having problems for doing it responsive. I mean that i have to change paddings, margins, etc. Is this normal or there is a easiest way to do it? About javascript code, if there is a better way to do validations let me know.
Thanks for reading!!😀
Tomás Pereira• 510@TomasPereira-Dev
Posted
Hey, what's up?. I just check your code and found a few things that can be improved. About padding, there is a really easy and cool property to create space between elements in a flex container, it's called gap, it will change your life, trust me :).
I saw that you added width to the img container, in this case you don't need it, think about the img as the main force that decides how big the container should be, that's why you had a very big white space at the right.
The last thing I would change is about how the alignment, I saw that you added width and height to the body to align the elements to the center, that's ok but it misses something important, if you are going to use the 100% method to center it, the parent element of that element needs to be 100% too!, think that when you are telling css that you will use height: 100%, css thinks "100% from what?", so it checks the parent element, if it doesn't have a declared height it will not work :/, so when you add it to the body, it should be like this:
body, html{ height:100%; }you don't need to add width: 100%; because the width will be always 100% by default
now if you want to align the container to the center, because you used flexbox you can do the following:
.main{ display: flex; justify-content: center; align-items: center; height: 100%; }with this now aligned you don't need the margin-top: 7rem, you should never use margin for things like aligment.
I really recommend you to use this chrome extension, it adds rulers to the screen, with this you can see things like paddings more clearly.
Check out my code for this challenge here if you want to see an example of this tips in action and also other cool things I didn't wrote here, good luck!.
Marked as helpful
0 - yeisonmoreno• 20
@yeisonmoreno
Submitted
feedbacks are welcomed
Tomás Pereira• 510@TomasPereira-Dev
Posted
Hey what's up?, a way that you can improve this challenge is adding line-height to the description of the product, a big part of graphic design is based on how we read things, so everytime you have more than 1 row of text is a good idea to add a little bit of it, another thing i would do is to center the prices, if you see the example the old price is at the center of the container, you can do that adding flexbox to the container of the prices and giving it an align-items: center; like this
.precio{ display: flex; align-items: center; }Marked as helpful
0 - zurnadurumm• 130
@zurnadurumm
Submitted
I have a question about empty forms. I don't know how to make an error state if a form is blank. Thanks.
Tomás Pereira• 510@TomasPereira-Dev
Posted
Hey what's up? I did this challenge last week and also struggle a little with that part. First there are a few small details that are important to change in this solution. If you watch closely to the example picture of the design you will notice that the subtitle (join 60.000+ ...etc) has a small space between text rows, in css the property that does that it's line-height, try to add a little of it everytime you have more than 1 row of text, a big part of design is based on how we read the text that's given to us, this being said you should probably add a small margin between the list items and maybe is for the same mistake. The second thing is that as you probably already saw the email imput is too close to the list, you can fix this easily using flexbox and adding a small gap between the elements, it's easier than adding margins and ends up being more even in my opinion.
Now about your question, if you want to show that the user is doing the things wrong, like not using a proper mail you will need to use a regular expression in JS and the .test method, what it does is that it compares the RegEx with a string(in this case the value of the input), if they match it will return true, if not false. so with this info you can know if the user is wrong and add some logic for when it happens, you don't have to use localStorage for this, all of this has to be done before you click on the submit button, so you'll need to do another function for that. This challenge needs you to know a little about how to manipulate the DOM for creating elements without touching the html, it's a good first project to learn all that, if you want an example of a lazy way to do it you can read my solutions code, but before you do it I have to tell you that's not the best way you show a popup/modal, I made it like that just because I wanted to work on positioning, not in DOM manipulation.
2 - Ajibade Paul• 260
@ajibade-dev
Submitted
I was not able to properly display the different images for different screens(desktop and mobile screens). Anybody on how they did theirs?
Tomás Pereira• 510@TomasPereira-Dev
Posted
I used the picture tag in html, this guide explain it better that me, so i leave you this link to read, good luck! https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/#aa-using-picture
Marked as helpful
0
