Ben• 300
@BenChis
Submitted
Hey there, Here is my solution for the product landing page. Please if you are interested in my experience reading my markdown.
Thanks for your everyone who want to spend some time giving me some feedback.
Mariusz Olszewski
@molszewski34
All comments
- Mariusz Olszewski• 360
@molszewski34
Posted
Hey i see few problems.
Only first 2 menu links have hover effect. Hover effect can look better if you lower transition time. Cart when empty change side. I had the same problem and for me the best and easy solution was to make a container with button and sum visibility:hidden; Cart in mobile view has big white space. Plus and minus buttons are too small. You can make them small but it is a good thing to put them in span so area in which you can click is bigger. I didn't test it on smartphone but buttons can be hard to push. Same thing with slider buttons. Button in cart do not always hover when i move cursor. Input number should keep the value visible when submit.
Marked as helpful
0 - Jaronimas• 375
@jaronimas-codes
Submitted
- How to connect "main page project left" numbers with "modal project left" numbers (pink in main page). SOLVED
1.1 NEW PROBLEM - how to apply style when 'left' is 0. Should I redesign structure of page as an array of object and then render it with different information? NEED HELP WITH THIS.
-
How to center "left borders" in main statistics page? Did static and I know it is bad option. SOLVED
-
Looking for coding buddy to review each others code and give constructive feedback. (once per week or so - will negotiate).
Regards, Jaronimas
Mariusz Olszewski• 360@molszewski34
Posted
You can try update it with parseInt method and use toLocaleString to give value a proper format.
sumOutput.innerHTML = "$" + (sumOutput + parseInt(noRewardInput.value)).toLocaleString("en-us"); sumOfBacker.innerHTML = (sumOfBacker + 1).toLocaleString("en-us");
let sumOutput = 89914; let sumOfBacker = 5007;
Marked as helpful
0 - Jaronimas• 375
@jaronimas-codes
Submitted
- How to connect "main page project left" numbers with "modal project left" numbers (pink in main page). SOLVED
1.1 NEW PROBLEM - how to apply style when 'left' is 0. Should I redesign structure of page as an array of object and then render it with different information? NEED HELP WITH THIS.
-
How to center "left borders" in main statistics page? Did static and I know it is bad option. SOLVED
-
Looking for coding buddy to review each others code and give constructive feedback. (once per week or so - will negotiate).
Regards, Jaronimas
Mariusz Olszewski• 360@molszewski34
Posted
- Why you want to connect them when they are totally separate things? Things that should connect are modal number input and sum of pledged money and counter of backers which add +1 every time value of input is added to the sum. You can also try to update progress bar when sum is updated. I used <progress> but it seems to not look properly (no styling) on android devices (atleast mine) but value is updated. Another option is to connect pledge options with modal options so when you click button an option in modal is also checked.
- You can try use a grid but there is also a way to use it with flex. Instead of <ul> you can make 3 separate divs with content and give them 33% width and then give them proper borders or even give borders to middle box.
Marked as helpful
0 - Aylla• 170
@AyllaChristinne
Submitted
I know there's a lot undone, but that's what i've got until now. When I master more of frontend, the solution will be upgraded.
Mariusz Olszewski• 360@molszewski34
Posted
Hey. Solution works. Every calculations works as intended. You missing two things. When "person input" is 0 or less it should show alarm state - red border and text. Second is button which must show disabled and active status.
In matter of responsivness you could consider use of grid. This should help you a lot.
Good job!
0 @luizclaudiocosta
Submitted
I spent some time learning more about masking currency. Please, comments and reviews are always welcome.
Mariusz Olszewski• 360@molszewski34
Posted
Still didn't get an answer about this, but one thing concerns me right now. Is us-eu currency format for input even a good thing to set in hmtl. Comma is another sign for javascript which can disrupt a whole calculation when not used with some methods. So you probably need javascript for this anyway which is not an answer for question :)
Marked as helpful
0@luizclaudiocosta
Submitted
I spent some time learning more about masking currency. Please, comments and reviews are always welcome.
Mariusz Olszewski• 360@molszewski34
Posted
I don't know but i will check if there is any easy way to do it w/o js.
Marked as helpful
1@luizclaudiocosta
Submitted
I spent some time learning more about masking currency. Please, comments and reviews are always welcome.
Mariusz Olszewski• 360@molszewski34
Posted
Hey. It is one of better aproaches to what should be provied inside input. Most of solutions goes with step="1" which is not real in every scenario when someone pays with cents.
But why you don't used input type number with step="0.1" which gives you the same thing with less effort and you can also edit those numbers in easier way ?
Also it is not must have but reset button should look active when there is any change in status.
Marked as helpful
1- Yu-Yang• 20
@JasonYuYang
Submitted
This challenge is pretty easy so I use this to practice webpack and setup prettier,eslint...Trying to understand how to setup development environment closer to real work scenario, can you guys share how your setup was? Or give me some feedback about my setup.
Mariusz Olszewski• 360@molszewski34
Posted
Hey. You miss one small feature. It is not so important but without it project is not complete. When reset button is used it should change style to darker to look as it is disabled and when there is any change it should look active again.
0 - Michael Morrison• 500
@mjmorrison10
Submitted
Any tips or suggestions highly appreciated.
Mariusz Olszewski• 360@molszewski34
Posted
Yes. I see that span when in position: absolute moves over input and block it.
0 - Paras Sharma• 700
@imparassharma
Submitted
Any feedback is appriciated.
Mariusz Olszewski• 360@molszewski34
Posted
List of issues.
- Both input number move below zero which can't be allowed.
- Instead of calculate button you can try to add addEventlistener for a whole form so it will react to changes in inputs.
- Reset button not working on firefox
- You should lower your media queries because right now it shows mobile view for desktop when typical standard for laptops is 1024px max.
- There is no alert when input is zero or lower.
Marked as helpful
1 @kevinvan1989
Submitted
I think my JS is too complex / big ...???
Any ideas or suggestions?
Mariusz Olszewski• 360@molszewski34
Posted
List of issues:
- Input number can't be allowed to move into minus. It is possible in bill case if someone has debt but there is no way for -9 persons.
- Input number when 0 or less should show alert.
- Calculations are not working for some reason on firefox. I checked it on chrome and it is ok.
- Custom input not working or working in way that is not intuitive for user.
- Reset button should show disabled status when used and active when there is any change.
- No hover effect over any button.
Code isn't too big and too complex. You code the way you can and with time you find better practice or way to make it shorter but it come with time... so don't worry and keep coding.
Marked as helpful
0- Katherine Ebel• 180
@KatherineEbel
Submitted
Any feedback welcome.
Mariusz Olszewski• 360@molszewski34
Posted
Yea. It is fine right now :)
0 - Katherine Ebel• 180
@KatherineEbel
Submitted
Any feedback welcome.
Mariusz Olszewski• 360@molszewski34
Posted
Hey. Almost everything is fine. The only issue is found is that when you change custom input from any value to 0 it keeps old value when it should show default value mb. 5% ? It is not so important but keeps this project from perfection :)
Marked as helpful
0 - Michael Morrison• 500
@mjmorrison10
Submitted
Any tips or suggestions highly appreciated.
Mariusz Olszewski• 360@molszewski34
Posted
Hey. Calculation part works but there are few issues you should work with.
- Output should show .toFixed(2). This is required to show proper amount of currency. Right now when user provide 100$ for 3 persons it shows 33.333333.
- Reset button should show active status when user use number input and be disabled after use of reset function.
- Alert must be shown for person input and has red border when condition is false. 4.There are problems with responsiveness. Some elements as reset btn and output move out of fields and tip amount is not shown on lower resolutions. Especialy with big output. Fixing issue number 1 should also fix some of problems.
- It is ok to start function by clicking option button but its better to start it with one of inputs - person field or bill.
Checked on firefox and chrome.
Marked as helpful
0 @bjaneczko
Submitted
Hello! Simple tip calculator using HTML, SCSS and JavaScript, comments and suggestions are greatly appreciated! :)
Mariusz Olszewski• 360@molszewski34
Posted
Looks good. The only thing i would suggest is to change reset button so it does not show "disabled" status non stop. Reset button should look active only when any input has been provided and disabled after you use reset and not provided any input.
1- Mariusz Olszewski• 360
@molszewski34
Submitted
Hey. Feel free to comment about errors i made during this challange.
Mariusz Olszewski• 360@molszewski34
Posted
You mean that lower background picture in mobile view or something else?
0 - Hanif Adams• 150
@omeizahanif
Submitted
How do you set input validation to display border and a warning text?
Feedback is welcome!
Mariusz Olszewski• 360@molszewski34
Posted
I hope this aproach will give you some insight. There are better ways to make it but it is one of simpler to understand.
form.addEventListener("input", () => { if (numPeople.value <= 0) { document.querySelector(".people__error").style.display = "block" numPeople.style.borderColor = "red" } else if (bill.value <= 0) { document.querySelector(".error").style.display = "block" bill.style.borderColor = "red" } else { document.querySelector(".error").style.display = "none" numPeople.style.borderColor = "green" document.querySelector(".people__error").style.display = "none" bill.style.borderColor = "green" } })
Marked as helpful
0 - Menna Rashad• 90
@Menna-Rashad
Submitted
Is there any notes about the styling? the JS part? Any helpful notes are welcome ^^.
Mariusz Olszewski• 360@molszewski34
Posted
In my aproach i used it for form. If you use input instead of submit it use functions anytime you pass the numbers so this way you get a real time calculation like in normal calculator.
If you are worried about alert msg you can try to give your input in html vallue=1 or give min=1 so this way it should never show alert msg at the start but keep in mind this is reserve for input type number. I used input type number.
I checked alerts again and now it works.
Marked as helpful
0 - Menna Rashad• 90
@Menna-Rashad
Submitted
Is there any notes about the styling? the JS part? Any helpful notes are welcome ^^.
Mariusz Olszewski• 360@molszewski34
Posted
Hey. There are few issues. First is that you not included method .toFixed(2) so output gives big numbers after dot. Second is less important but still worth mention. The way you need to confirm input by "submit" can confuse user that output is not showing. I propose to change it for "input". Third is that your "alert" function not working when user provide 0.
Checked on Firefox browser.
Marked as helpful
0 I'm pretty happy with this one. There were a lot of subtle challenges here to make sure it was fully responsive and accessible.
It was my first time building a purpose built design system for a project, and that's something that I hope to re-use.
It might seem like using React and so many re-usable components was a bit overkill. However, I think it was great to be able to concentrate on building out a good design-system api without having massive scope.
Calculator using react-hook-form and vanilla-extract
#accessibility#react#react-testing-library#vanilla-extract#nextMariusz Olszewski• 360@molszewski34
Posted
No problem. Finding bugs and trying to figure when and how they happend is also some way of better understanding a code for me. So if you post solution of problem it is also some benefit for me :)
0- Nadya Mumtazah• 245
@NadyaMumtazah
Submitted
Love to hear your feedbacks!
Mariusz Olszewski• 360@molszewski34
Posted
You miss function which check if number of people is greater than zero and show alert. Also "reset button" not showing disabled status. It works but not fully as intended in challange.
Beside that, everything is fine. Good work.
0 I'm pretty happy with this one. There were a lot of subtle challenges here to make sure it was fully responsive and accessible.
It was my first time building a purpose built design system for a project, and that's something that I hope to re-use.
It might seem like using React and so many re-usable components was a bit overkill. However, I think it was great to be able to concentrate on building out a good design-system api without having massive scope.
Calculator using react-hook-form and vanilla-extract
#accessibility#react#react-testing-library#vanilla-extract#nextMariusz Olszewski• 360@molszewski34
Posted
I checked it on chrome, firefox and opera. This bug appears only on firefox. When i reset, the default option is 15%. If i change to some "reset button" stops to be disabled, but when i go back to 15% even with number put into, button starts to be disabled again. https://freeimage.host/i/zrzut-ekranu-z-2021-11-09-o-100015.5Gkw1j
Works fine on other platforms. I am just curious why this bug happens and mb i will learn how to avoid it.
Marked as helpful
0I'm pretty happy with this one. There were a lot of subtle challenges here to make sure it was fully responsive and accessible.
It was my first time building a purpose built design system for a project, and that's something that I hope to re-use.
It might seem like using React and so many re-usable components was a bit overkill. However, I think it was great to be able to concentrate on building out a good design-system api without having massive scope.
Calculator using react-hook-form and vanilla-extract
#accessibility#react#react-testing-library#vanilla-extract#nextMariusz Olszewski• 360@molszewski34
Posted
Did you tried on some other device, mb smartphone?
Marked as helpful
0- Spencer Runde• 640
@spencerrunde
Submitted
Tried something new while working on this one! First time using SCSS, and I really enjoyed it. Any feedback is welcome, as always! Thank you!
Mariusz Olszewski• 360@molszewski34
Posted
Hey. Good solution.
If you want you can change a bit mobile view. Right now is a bit too large for mobile devices as phone.
0
