Skip to content
OverviewSolutions
9
Comments
3
Mike Oram
@SlothSan

All comments

  • Kyrie•70
    @KyrieeWenSubmitted almost 2 years ago

    Hey guys.. new guy here, few questions wanna to ask

    1. Not sure what is the correct name convention for css class names, is there any recommendation?

    2. is there anything that I can refactor to keep it DRY

    Thanks

    Responsive QR Code with plain HTML and CSS

    4
    Mike Oram•230
    @SlothSanPosted almost 2 years ago

    Hello,

    Your CSS class names seem fine to me, they are descriptive and are in kebab case.

    As the other person pointed out, look at SCSS and then you can re-use parts of your CSS so that you don't end up repeating yourself.

    It will also allow you to nest selectors inside of other selectors to clean up the code.

    Looks great, good work!

    0
  • ayush•300
    @ayush111222Submitted about 2 years ago

    when i am submiting the form cant hide the form so i used return false so the form cannot get submited so i want the solution for that the form also get submited and it will hide. and i cant give border radius in the focus and tell me about the real time updating and cards css your feedback will be very very appriciated sorry form my English but hope you getted my point thanks please leave me some feedbacks and am also new to javaScript.

    #flex-box #css #javaScript

    1
    Mike Oram•230
    @SlothSanPosted about 2 years ago

    Hey,

    Looks great,

    You can get the values out from the inputs on the form by using this.

    for example for the CVC Number, you can have this event handler on the input cvcInput.addEventListener('input', inputHandlerCVC); that will listen for any inputs in the cvcInput.

    you can then have a function similar to this to handle the input and update the text on the card.

    const inputHandlerCVC = (event) => { sanitizeInputLength(event.target.value, cvcInput, 3); cvcOnCardBack.innerHTML = event.target.value; }

    You will also wan't to probably validate it as its entered so the user cannot enter a CVC that is longer than 3 digits / check that the user hasn't removed the number tag from the input and entered text, that said its not in the spec but the more validation the better !

    In reality the validation would be performed on submit to the backend and rejected if it wasn't in the right format.

    Marked as helpful
    1
  • mttmene•20
    @mttmeneSubmitted about 2 years ago

    What did you find difficult while building the project? -Align the boxes Which areas of your code are you unsure of? -Css directly on attributes

    Responsive page using CSS FLEX

    2
    Mike Oram•230
    @SlothSanPosted about 2 years ago

    Hey,

    CSS is best to be split onto another file, you can then link it in the head of your HTML as so.

    <link ref="stylesheet" type="text/css" href="style.css" />

    When it comes to flexbox and centering / moving things please see the guide here : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Loosk great tho, well done!

    Marked as helpful
    1