Looking to hire developers?
@abdullah43577
@SaeM843
Submitted
Hi there, I’m Sae and this is my solution for this challenge👋
I am strugglig with a media query. I am trying to centre the texts but as there are padding and margin inherited from a desk top version and it won't be centred. Your feedbacks are more than welcome!
Thanks:)
@abdullah43577
Posted
Hey there, I don't fully understand the issue with the code you said you're having, but I can suggest a fix as I got some key points out from the issue you highlighted, you're trying to center some texts and for some reasons on mobile screen sizes it won't center because of a padding inherited from the desktop screen version?
if this is the issue, using media query could solve this issue, you could just use the media query to remove the padding instead or reduce the padding to achieve what you want and that should work.
let's take this as an example:
desktop version:
.container{padding: 5px 16px}
using media query, I can remove the padding from the container element completely or reduce the padding as I'd wanted
@media (max-width:400px) {.container{padding: 2px 4px}}
let me know if this did solve the issue you're having with your code. Happy coding.
@chukwudobe-Micah
Submitted
Had fun building this, I'll like to hear your reviews. You'll love playing this game, added some random funny(mean) comment on the game, check it out!
@abdullah43577
Posted
Great Job, taking on this challenge, Micah
This is really fantastic. You've motivated me actually to build this game. You did a great job.
Keep up the good work. I might take on this as my next challenge.
@Ekene-Azubuko
Submitted
This is my solution please any tip that can improve my code would be appreciated. Thank you.
@abdullah43577
Posted
Hey Ekene, great job taking on this challenge,
After I've read what the other user-posted earlier, then what I've got to tell you is little. using display: grid; for websites like this, makes your styling much easier and faster.
These kinds of websites are best built using grid.
There is a lot of documentation online talking about how grid works and tutorials on youtube as well. You could try implementing it in one of your future projects and see which works best for you.
Happy coding
@bnm3223
Submitted
Please suggest me if you have a better way to do this.
@abdullah43577
Posted
Hey there, I just checked out your challenge, you must be joking saying that people should suggest you a better way of doing this challenge, you nailed it!
keep up the good work.
Marked as helpful
@frank1003A
Submitted
In this project, my main objective was to make the code more accessible and conform to semantic standards. I initially considered using the "eval" function, but realized that it could be dangerous and is generally not recommended. As a result, I had to come up with a new approach for implementing the calculator's functionality, which I found quite enjoyable. Additionally, I was able to apply my recently acquired skills in regular expressions to the project.
@abdullah43577
Posted
Hello Frank,
Great job taking on this challenge, using the eval() method isn't entirely bad, you can make your use of eval() safe by using strict mode, this means that you can add a piece of code at the top of every js file you would be using eval() for use strict this avoids some of the most dangerous use of eval().
The eval() function evaluates JavaScript code represented as a string and returns its completion value. The source is parsed as a script.
But it's great seeing that you got the challenge completed already without using eval(). That's very nice. I used eval() in my project and it saved me tons of lines of code.
Marked as helpful
@catherineisonline
Submitted
Hello, Frontend Mentor community! This is my solution to the Crowdfunding product page.
I appreciate all the feedback you left that helped me to improve this project. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.
You are free to download or use the code for reference in your projects, but I no longer update it or accept any feedback.
Thank you
@abdullah43577
Posted
Hello there, great job taking on this challenge, I wanted to point out a few things as I just also completed this challenge recently.
Firstly, I like the fact that the number values count up to their expected values on the scroll. but I think, according to the challenge we were supposed to make the range div also dynamically increase when a user clicks and the pop modal appears and the user inputs a value. the input entered should be added to the number of backed amounts and also +1 should be added to the total number of backers.
Also, one final check, is to make the give the disabled div element an attribute of cursor-not-allowed
this would be a sign for desktop users that the div isn't clickable even if it looks disabled already.
Other than these few points you've done a nice job.
@Olaitan01
Submitted
This Project would be my first real work with javaScript aside toggle menu cause i was able to learn how to make a progress bar, modal and also learn about DOM Manipulation and State Management although I am still working on the DOM manipulation and I would love to ask how to combine numbers with characters in my DOM manipulation. Thank you so much as you review and give a honest feedback on how I could better my code and . I really appreciate the help.
@abdullah43577
Posted
Hello there,
great job taking on this challenge.
You can use the .toLocaleString() method to format numbers just the way you want it to appear. Using this you're good to go sir. Let me know if you've got any more questions.
@chukwudobe-Micah
Submitted
My first Js challenge here!🚀🎊 Let me know what you think. What I found difficult here was implementing a logic that closes one when another one open but it doesn't work out. Another thing I found difficult was html and css and also how to structure and plan them, I've left them for a while now to learn js and they came back to hunt me.
@abdullah43577
Posted
Great Job taking on this challenge sir, Keep up the good work.
@davislocs
Submitted
Hey. Made this project with css grid. I think i did a good job, but if not , I will appreciate any advice. Thanks! :)
@abdullah43577
Posted
Great Job
@Gbbie-l
Submitted
Do you have a good way to instantly display error messages for form submission?
@abdullah43577
Posted
Hello there, Great job completing this challenge.
If I understood your question correctly, you want to display an error message for all inputs that are not valid, right?
Well, if that's the case, please take a look at my solution over here to see how mine works, maybe you'd understand how I did mine rather than explaining.
If you feel you don't still understand or you're lost, let me know so I can explain it to you. We are all here to help each other.
Marked as helpful
@OpenWorldProjectOWP
Submitted
I found that the hardest part of this challenge was deciding what the most efficient way to write my code was. This is the first "challenge" I've done and that made it intimidating and I found myself stressing over making sure my code could be understood (which is a good thing). I have a lot of uncertainties with my code i.e. what is the better way of formatting my CSS? I used flex to do the formatting, but did that maybe make my code messy? What about my HTML? Is nesting that many divs even necessary for what I was trying to accomplish? I'm self-taught so finer details of coding are lost in the teachings and I'd appreciate any and all feedback anyone takes the time to give me about this first try. Please go over the README.md in the repo for more info on my process.
@abdullah43577
Posted
"Hello! You did a good job tackling this challenge. I have some suggestions to improve your solution. It looks like you used a lot of div elements, but there is a simpler way to approach the problem. You can check out my live solution for inspiration and see how I solved it. Click here
Marked as helpful
@danyelcid
Submitted
overlapping the images was very hard, any suggestion would be nice
@abdullah43577
Posted
Hello Danny, great job taking on this challenge. I have a few recommendations that might help improve your code.
I noticed that the FAQ section just toggles the answer open and does not hide it back on click again. It's supposed to open on clicking the icon and close back on clicking the same icon.
you can check out my live solution to see how mine works, so you can make that fix as well. FAQ Accordion
@juan-galdino
Submitted
My first Junior submission on here. This is the "Tips Calculator" developed with Angular.
Hello! For this challenge, I used Angular just to make sure I'm getting used to the basics of this framework.
Something I'm still working on in this submission is that I currently have no idea how to prevent the user from breaking the layout if the input values are greater than 5 digits. I would appreciate some ideas or suggestions.
Thanks!
( Edit: Thanks for all the feedback given, I just updated new fixes, inputs now have a maxlength attribute. I had some trouble handling numbers in text input correctly, so I got some help from the Stack Overflow community, and with a lot of learning, this is the best I could get. If you come across the same problem, just call me and I won't spare no effort to help you find a solution that fits your project perfectly. Cheers! )
Most of the HTML reports are stuff from Webpack and Babel. The next step I'll be looking forward to get rid to most of them. Any feedbacks or tips, I'm all ears!
@abdullah43577
Posted
I also have one more thing to add to make your code actually look better. I see that you've restricted users from inputting text, which is very correct. But I'll also like you to look into using placeholders as the default values in the input rather than actual numbers.
For example, you could do:
<input type="text" maxlength="5" placeholder="0">
<input type="text" maxlength="5" placeholder="1">
I really do hope you find this useful, Cheers.
@juan-galdino
Submitted
My first Junior submission on here. This is the "Tips Calculator" developed with Angular.
Hello! For this challenge, I used Angular just to make sure I'm getting used to the basics of this framework.
Something I'm still working on in this submission is that I currently have no idea how to prevent the user from breaking the layout if the input values are greater than 5 digits. I would appreciate some ideas or suggestions.
Thanks!
( Edit: Thanks for all the feedback given, I just updated new fixes, inputs now have a maxlength attribute. I had some trouble handling numbers in text input correctly, so I got some help from the Stack Overflow community, and with a lot of learning, this is the best I could get. If you come across the same problem, just call me and I won't spare no effort to help you find a solution that fits your project perfectly. Cheers! )
Most of the HTML reports are stuff from Webpack and Babel. The next step I'll be looking forward to get rid to most of them. Any feedbacks or tips, I'm all ears!
@abdullah43577
Posted
Hello There,
Great job taking on this challenge, regarding limiting the number of inputs, you can easily do that using an HTML attribute.
There's an HTML attribute called "maxlength" which limits a certain value an input can render while typing.
For example to limit input to just 5 numbers you could do this <input type="text" maxlength="5">
I hope you find this useful in making your code look better and stopping users from breaking your code when not following rules. 😂😂
Happy coding
Marked as helpful
@tiobista
Submitted
Do you have any questions about best practices? How can I write a best and compelling Readme.md for the projects?
@abdullah43577
Posted
hello there,
great job taking on this challenge. Here is the link to the README.md file of this same project I did similar to yours. You can take a look at it and see which needs adjustment from yours. Feel free to reply to this message if you've got any more questions.
https://github.com/abdullah43577/interactive-rating-component-main/blob/master/README.md
@Kemorave
Submitted
@abdullah43577
Posted
Hello there,
Great job taking on this challenge. There's a better way to write much cleaner and readable codes instead of using divs all the time.
Have you heard of HTML5 semantic tags?
If you haven't I'd recommend reading about them via this URL: https://www.w3schools.com/html/html5_semantic_elements.asp
You'd understand by reading the documentation I sent above. It helps give meaning to your code. One thing you need to note is that when writing HTML code, you aren't just writing for readability for you as a human only. You write code so that search engines like google knows what part of your code does what. For example, the google search engine wants to know what part of your code is the body, what part of your code is a/an article, section, footer, main e.t.c and so on. some of the few semantic tags I mentioned here give meaning to your code.
Read more about it via the URL above
Marked as helpful
@thaiscode
Submitted
Could you validate my code? How could I improve it?
There are some layout issues that will be fixed later.
@abdullah43577
Posted
Hey there,
Great job, taking on this challenge. This challenge also did give me a tough time before finalizing the code.
I found some little problems with the live solution you've written so far.
firstly, you didn't space out the chunks of input in the input box of the card number. so instead of:
1234567890should be 1234 5678 910.... ( I hope you get the whole gist here).
Also before submitting the form, I'll recommend actually validating the form to check to see if all inputs are filled and valid as well. That would be better.
I think that's all I can point out for now. well for the spacing out of numbers into 4 chunks of chars. This is a little trick I used, hopefully, it works for you as well.
// using this with the change addEventListener method for inputs
const formatInput = (value) => {
if(!value) return value;
return `${value.slice(0, 4)} ${value.slice(4, 8)} ${value.slice(8, 12)} ${value.slice(12, 16)}`;
}
const answer = formatInput('1234567890123456');
console.log(answer);
you can use the above function I wrote and test it out and see if it works. But to integrate it with your code, you'll need to use the 'change' event listener. What I mean by this is:
input.addEventListener('change', () => {})
@YousefKhalid-iq
Submitted
Hey, I have some questions about my solution,
Thank you for checking my answer.
@abdullah43577
Posted
Hello there,
It's really great you took on this challenge, I must say this is probably the toughest challenge I've embarked upon ever since I started taking frontendmentor challenges.
After testing your live result, I found some weird things happening. The first one was, in the card input ( where I input the numbers you want to space out into 4 chunks)
I found something really buggy there, If I type random numbers fast in the input, it formats the inputs wrongly. but if I type it slowly it formats it just as expected. I don't know if this has to do with the code you wrote but if you can fix that please do.
Also, you're using the input addEventListener() which isn't bad. But it seems you forgot to change the DOM when you click that continue button to render the Thank you message (taking into consideration that all the inputs are valid and filled)
Finally, it seems you also forgot the purple background where those cards are just floating above to the right and to the left. ( I hope you understand what I mean here)
After doing all this, you should be fully done with the project. Good luck. Just in case my result could help inspire some changes in your code, please take a look here:
https://github.com/abdullah43577/interactive-card-details
Mine isn't perfect as well. but I hope it helps you one way or the other.
@DEEPAK-tech40
Submitted
I found this project to be more challenging than I expected, particularly the navigation bar. I couldn't find a way to make it and ended up using online navbar generator. This was a great project for practising CSS grid and I learned a lot through this project. Please feel free to provide me with any feedback.
@abdullah43577
Posted
Hello there,
Great job taking on this challenge.
You said you had an issue creating a navbar for the mobile users right? I can give you a step-by-step guide that MIGHT help you if you're interested. Here's how it goes:
I would like to note that you'll need to use Javascript for this. And you don't need to be scared, it's easy.
just follow these steps and try it out and see if it works. If it doesn't you can always reply this thread.
step 1: get your hamburger menu ready. (you can get one from sites like fontawesome.com) placing the hamburger menu just below the nav menu items
step 2: by default most people use the display flex for nav items. I'm also assuming you used that or maybe you used the display inline-block; whichever way you just need to set all the items to a display: block; so each item stacks on top of the other. Something like this:
Home
New
Popular
Trending
Categories
Instead of:
Home New Popular Trending Categories
step 3: the container holding those elements should be given a background color and style it in such a way that it fills up the screen 100vh and width of 100% making sure that all the elements are centered as well. You could also give some margin-top to give space for the hamburger menu and the W logo as well. (make sure you've configured the mobile view section in your chrome dev console while styling all of this).
You can then give the hamburger menu's container or the menu itself depending on the way you want yours a position absolute. making sure that the hamburger menu is nested in some sort of container the nav elements are part of as well. Giving that container a position: relative; and the hamburger menu position: absolute; and styling it in such a way that it stays in the position as desired.
just a little note: at this point you should already give the class holding those nav elements a display: none; so it hides them and then the hamburger should have the CSS property of display: block; so it becomes visible.
In short what I mean is. you should have styled it in such a way that the nav menu are no longer visible and the hamburger is visible.
once you understand it up until this point, please let me know so I can update this thread. The javascript aspect remains from this point.
I know it can be quite confusing, please do let me know if there's any issue you want me to expatriate further.
Marked as helpful
@rezajaber
Submitted
Hey! I am Reza 🙂 I just recently started to learn web-development and would like to get every little help out there. So if you have the time, feel free to look over my project/projects and give me some advice to get better as fast as possible.
Project #5: Some questions for this "Stats-Card" project:
I appreciate it✌️
@abdullah43577
Posted
Hello there,
You did a very great job as a beginner taking on this challenge.
I'd be glad to share with you some little info that might help you finish this project just in time. What you've done so far is outstanding for a learner (as you've told me).
First of all, you don't need to use the URL() for that hover effect. Create a div element and then make sure the div overlay over the image you want that hover effect to take effect upon. Then set the z-index to -1; it goes back behind the previous image there. So on hover of the main image. Set the image z-index property to -1 or -2 depending on the one you want to be ahead of the other.
Your HTML looks structured well so far that I can tell.
The way you also centred the element is very much valid. You can also use
display: grid;
place-content: centre; // this does the same job as the flexbox command you used
So far that's all I can point out in this project
I hope you understand this better than I wrote it. Keep coding, you're one step away from achieving your goal
Marked as helpful
@yishak621
Submitted
these helps me to practice a basics of javascript methods specially forEach method ,by selecting the parent container and then accessing each and every elment of that item .and also displaying the dataset-id in the result section of card. the parent container for rating btns is
<div class="rating-container">
<button class="btn btn-rating" data-id="1">1</button>
<button class="btn btn-rating" data-id="2">2</button>
<button class="btn btn-rating" data-id="3">3</button>
<button class="btn btn-rating" data-id="4">4</button>
<button class="btn btn-rating" data-id="5">5</button>
</div>
and the result card should be set like these by default when we acess the DOM we remove these classlist and then add it to the rating card thats the whole logic in the css
.hidden {
opacity: 0;
display: none;
}
the main logic in the js is printing the data-set id of the given btn and then print it to the result card
//remove active state from btns
eachBtns.forEach((btn) => {
btn.classList.remove('btn-active');
e.target.classList.add('btn-active');
textResult.innerHTML = `You selected ${id} out of 5`; //printing the selected value to result
});
and also i added a little bit of code for to go back home page and to clear the rating buttons active class .
@abdullah43577
Posted
This is really nice, you having to put that back button on the page to let the user navigate back to the previous version of the code is really nice. Keep up the good work bro.
@DatBoiDarius31
Submitted
Having some problems with the mobile view. On Live Server, everything works correctly, however, on google things start to mess up. For example, the cart logo and image on mobile disappear. I tried to make it as responsive as possible. First time trying so please leave feedback, Thank You.
@abdullah43577
Posted
After viewing your website, I've got some tips to help your website look much better. Everything is just as expected but don't you think the content is too large? why not make it small and centralise it at the centre of the screen on both mobile and desktop. If you do that, the website will look so much better.
@anhtuanbui
Submitted
Leave me the best practice for the solution of this challege. Best
@abdullah43577
Posted
Hello there, this is a very gridy website. And what I mean by that is you'll find it much easier if you used CSS grids to style this webpage. It comes in really handy.
If you don't know what CSS Grid is, then CSS grid is just like flexbox. But flexbox is one-dimensional (can only style in either row or column at once) but CSS grid is multi-dimensional (can style in both row and column at the same time) all you just have to do if you don't have an prior knowledge of CSS grid is to watch a tutorial on youtube.
@Webdevsonu
Submitted
Here I tried to create this website, which I did make exactly alike , but as I am still learning web development I find it little difficult make this website flexible to small screen devices. And that closing menu on mobile device I think I needed to implement some JavaScript to it to function it like that. The side menu was a little bit difficult to set there as I have to use "position" to put it in its place .Any suggestion to do this efficient way.
@abdullah43577
Posted
Hello there, great job taking on this challenge. I have a tip that would help simplify your job. It must have been really hard doing this hard way. But don't worry, you'll find this very beneficial.
Have you heard of CSS Grid?
They are very powerful styling weapons. And I think if you used it in this project you wouldn't find the styling that very hard. All you just have to do is to wrap the complex elements you want to layout and give it a display of grid. It works just like flexbox. but unlike flexbox grid is even more powerful.
I can't explain how powerful it is in words, but I hope you'll find this tutorial on youtube useful as much as I found it useful.
https://youtu.be/rg7Fvvl3taU
It was taught by one of the best CSS programmers Kevin Powell. He's very good. I hope you'll find that helpful.
I also saw that you haven't implemented the styling on mobile devices. That could be a bit tricky as well. So I'd recommend watching a youtube tutorial for that as well. All you just have to search for is "Media Queries" on youtube and you should find relevant information on your feeds.
Happy Coding
Marked as helpful
