Skip to content
OverviewSolutions
12
Comments
35
Mariusz Olszewski
@molszewski34

All comments

  • Ben•300
    @vBenTecSubmitted almost 3 years ago

    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.

    Responsive design, grid, flex-box, custom variables,

    2
    Mariusz Olszewski•360
    @molszewski34Posted almost 3 years ago

    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-codesSubmitted almost 3 years ago
    1. 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.

    1. How to center "left borders" in main statistics page? Did static and I know it is bad option. SOLVED

    2. Looking for coding buddy to review each others code and give constructive feedback. (once per week or so - will negotiate).

    Regards, Jaronimas

    Have 3 questions about this solution and looking for coding buddy.

    4
    Mariusz Olszewski•360
    @molszewski34Posted almost 3 years ago

    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-codesSubmitted almost 3 years ago
    1. 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.

    1. How to center "left borders" in main statistics page? Did static and I know it is bad option. SOLVED

    2. Looking for coding buddy to review each others code and give constructive feedback. (once per week or so - will negotiate).

    Regards, Jaronimas

    Have 3 questions about this solution and looking for coding buddy.

    4
    Mariusz Olszewski•360
    @molszewski34Posted almost 3 years ago
    1. 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.
    2. 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
  • Mariusz Olszewski•360
    @molszewski34Posted almost 3 years ago

    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
  • Mariusz Olszewski•360
    @molszewski34Posted almost 3 years ago

    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
  • Mariusz Olszewski•360
    @molszewski34Posted almost 3 years ago

    I don't know but i will check if there is any easy way to do it w/o js.

    Marked as helpful
    1
  • Mariusz Olszewski•360
    @molszewski34Posted almost 3 years ago

    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
    @JasonYuYangSubmitted almost 3 years ago

    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.

    tip-calculator-app,using webpack5 to bundle

    2
    Mariusz Olszewski•360
    @molszewski34Posted almost 3 years ago

    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
  • Mariusz Olszewski•360
    @molszewski34Posted almost 3 years ago

    Yes. I see that span when in position: absolute moves over input and block it.

    0
  • Mariusz Olszewski•360
    @molszewski34Posted almost 3 years ago

    List of issues.

    1. Both input number move below zero which can't be allowed.
    2. Instead of calculate button you can try to add addEventlistener for a whole form so it will react to changes in inputs.
    3. Reset button not working on firefox
    4. You should lower your media queries because right now it shows mobile view for desktop when typical standard for laptops is 1024px max.
    5. There is no alert when input is zero or lower.
    Marked as helpful
    1
  • Mariusz Olszewski•360
    @molszewski34Posted almost 3 years ago

    List of issues:

    1. 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.
    2. Input number when 0 or less should show alert.
    3. Calculations are not working for some reason on firefox. I checked it on chrome and it is ok.
    4. Custom input not working or working in way that is not intuitive for user.
    5. Reset button should show disabled status when used and active when there is any change.
    6. 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
  • Mariusz Olszewski•360
    @molszewski34Posted almost 3 years ago

    Yea. It is fine right now :)

    0