I am a passionate backend developer with a robust computer science foundation and solid full-stack skills. I specialize in building scalable, secure web applications using Django, Flask, and Node.js, while also leveraging modern front-end technologies like React and Next.
I’m currently learning...React, Next, and many frontend-related techs.
Latest solutions
- Submitted about 1 month ago
Todo-list app
#accessibility#next#postgres#styled-components#tailwind-css- HTML
- CSS
- JS
- Submitted about 2 months ago
Todo App using pure html, sass (css), and javascript
#sass/scss- HTML
- CSS
- JS
Nothing, I guess.
Latest comments
- @zahraabelluSubmitted 16 days ago@IbrahimMuradPosted 13 days ago
Nice job.
- Using a grid layout will make the components a bit nicer.
- Also,
body
element should consist of aheader
,main
, andfooter
. Usingmain
insidesection
is not ideal.main
should consist ofsection
s,section
should have a headerh1-h6
andarticle
s,article
may have a header, and a paragraphp
, and so on.
Marked as helpful0 - @saccoViolaSubmitted 24 days ago@IbrahimMuradPosted 16 days ago
Looks good. But you need some adjustments for better results.
- Add novalidation to the form since you are validating manually.
- Remove the action attribute; you are not making any requests.
- The event listener should be 'submit' on the form, not the 'click' on the button.
- aria-descripedby takes the id of the error element; you passed the id of the same element.
- Since you added required to the inputs, you just need to use
inputElement.validity.valid
to check if the value is valid (in this case, it will ensure that the value is provided and the email is a valid email). - Give each label for the radio input a unique
for
value (for example, the value itself - general or support-), then add anid
with the same value so that when you click on it, the value is selected. - I noticed that you, sometimes, uses
<br />
, it works but you can wrap the elements that you want in the same line and use CSS to style it to stay in the same line, and also with CSS make sure the next element is in its own line. - some other styles are missing, but I think its fine.
Let me know if you need more clarifications.
1 - @saccoViolaSubmitted about 1 month ago@IbrahimMuradPosted 29 days ago
You forgot to use the background color light-pink. Overall, nice work. Keep up.
Marked as helpful0 - @hebaahmedsalehSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
..
What challenges did you encounter, and how did you overcome them?..
What specific areas of your project would you like help with?..
- @mikewil245Submitted about 2 months agoWhat challenges did you encounter, and how did you overcome them?
Challenges i encountered was trying to figure out how to get the value from the custom tip input , and figured out that i had to add an event listener.
@IbrahimMuradPosted about 2 months agoI looked at you code again. It looks a lot better.
Here are some other suggestions for improvements:
-
You should remove
class="tip-btn"
from the custom tip input, this makes this input takes the styles of other buttons. Let it take the common style ofinput[type="number"]
, which you did, but the class ruins it when hovered. -
Add error messages to other inputs, same as number of customers, and for the style, do not be afraid of breaking everything, I found that all inputs of type number are the same, all labels are the same, and all error messages are the same, you will just add other error messages the same way you did with number of people.
-
number of people has more than probable bad inputs, zero, negative, and decimal. So, I would recommend leave it empty in the HTML and fill it based on the input, "can't be zero", "can't be negative", or "must be a whole number".
-
(I am not a js expert but in this project) I found that using
Number
to convert input value into number is much better, ParseFloat was not predictable for me. Numbers in js can be integers and floats, and the input with type number can not accept alphabets, so Number is more convenient. -
Use
const
instead oflet
. Any js styling checker will murder you if it sees your js script, they hate it.
let numOfPeopleValue = parseFloat(numOfPeople.value) || 1; // Default to 1 if invalid if (!numOfPeopleValue) { errorMessage.classList.remove("hidden"); tipTotal.textContent = "$0.00"; total.textContent = "$0.00"; return; }
Regardless of this project, the condition in if statement will always be false, because
parseFloat(numOfPeople.value)
has two boolean options, true if it is a value orfalse
if it isNaN
, but you did add|| 1
, so if it isNaN
, it will become 1, so!numOfPeopleValue
will always befalse
.Marked as helpful0 -
- @mikewil245Submitted about 2 months agoWhat challenges did you encounter, and how did you overcome them?
Challenges i encountered was trying to figure out how to get the value from the custom tip input , and figured out that i had to add an event listener.
@IbrahimMuradPosted about 2 months ago-
You need to add more validations to the inputs, for example,
number of people
can not be negative or decimal values,bill
can not be negative, andcustom tip
can not be negative and can not exceed100
. -
Some styles are not applied, such as the chosen tip button should have a different color to indicate it has been chosen.
Overall, great job. Keep up.
Marked as helpful0 -