I am a full stack web developer. I am still getting familiar with all the different technologies and tools out there. However, I am excited to learn more and build my skills so that I can create amazing websites and web applications.
I’m currently learning...c# and .net
Latest solutions
Room homepage
#react#typescript#tailwind-cssSubmitted 8 months agoI'd love to hear your thoughts! Your feedback is greatly appreciated and helps me improve.
Space tourism website
#react#react-router#typescript#tailwind-cssSubmitted 8 months agoI'd love to hear your thoughts! Your feedback is greatly appreciated and helps me improve.
Interactive comments section
#react#tailwind-css#typescript#react-routerSubmitted 10 months agoHey everyone!
I’m excited to share my solution! 🎉
I’ve implemented some extra cool features, and I’d love for you to explore it and share your thoughts. Your feedback would be invaluable in helping me improve!
Thanks so much for your time, and I hope you enjoy checking it out! Looking forward to hearing what you think!
REST Countries API with color theme switcher
#react#react-router#tailwind-css#typescript#shadcnSubmitted 10 months ago
Latest comments
- @Davee89@AhmedLebda
Hi @Davee89 Great Code !
You just need to add some validations for input fields , for example:
- users shouldn't be able to enter negative values (since you use a number type input this can be easily done with a
min="0"
attribute to the input element). - users shouldn't be able to enter anything but numbers in the input fields.
- just a plus point you can make result calculated whenever user changes any setting ( input values - or button clicks )
This is my Solution To this challenge, a review is really appreciated.
Happy Coding
Marked as helpful - users shouldn't be able to enter negative values (since you use a number type input this can be easily done with a
- @Bingolast@AhmedLebda
Hi @Bingolast Congratulations on solving this challenge.
You just need some modifications for your CSS file:
-
You need to put your media queries at the end of your CSS files (after the main styles) because by putting them before your main styles you overwrite them again with the main styles that is the main reason your media styles don't work.
-
Your
.card:nth-of-type(3)
have agrid-column: 4;
you only want 1 column with 100% width but you tell the browser you want this card to be on the 4th column so the browser will translate this as if there were 4 columns even if you already defined thegrid-template-columns: 1fr
in the parent element, so by changing that togrid-column: 1;
you will get your wanted result.
- Worth mentioning resource : Kevin Powell video on CSS grid , he teaches grid easily with this same challenge example , I really recommend to watch it, you will definitely learn a lot from it.
Happy Coding
-
- @wanderstweek@AhmedLebda
Hi @wanderstweek great start, congrats on completing the challenge
To get the heading like the preview you just need some simple modifications to your code:
- you don't need to break the line with
<br>
tag the text will automatically wrap when the heading exceeds it's container width. - you don't need the
margin:15px
on theh3
it adds unnecessary 15px on left and write of the heading - you will just need to decrease the
h3
tofont-size:1.2rem
.
Now you have the heading just like the preview
- Last tip you need to add a space after (front-end) in the heading 😉
Good job , and Happy Coding
Marked as helpful - you don't need to break the line with
- @payalpagaria@AhmedLebda
Hi @payalpagaria Great job,
I am still working on this challenge too,
just a little thing that I have noticed the total/person doesn't add the tip amount , and the tip/total only gets calculated when user enters the (number of people) field, I think it will be more convenient to calculate when user selects a tip%
- @ASH2001prince@AhmedLebda
to prevent submitting the rate if the user didn't choose a rate, you can simply add a condition in your event handler for the submit button event, for example :
btn.addEventListener("click", () => { if(!finalValue) { return false } else { valueS.textContent = finalValue; secondCard.style.display = "flex"; firstCard.style.display = "none"; } });
The condition means if the user didn't choose a rate so the
finalValue
variable is equal toundefined
(undefined values === false) the function will just return false otherwise the button submits the rate (when user choose a rate)Marked as helpful - @stwslim83@AhmedLebda
Hi @stwslim83, congrats on completing this one
- You can use
<main>
instead of<div>
to improve the accessibility of your page. - Adding
max-width: 1440px
andmin-width: 375px
to the body element won't make the content centered properly in screens larger than 1440px or lower than 375px , you can remove those styles and replace it with amargin: 20px
for the wrapper div to avoid card touching screen edges in smaller screens
Marked as helpful - You can use