Skip to content
OverviewSolutions
16
Comments
3
Angélique D. Faye
@AngeliqueDF

All comments

  • Angélique D. Faye•390
    @AngeliqueDFPosted over 2 years ago

    Hi @SOKOUDJOU-LEOPOLD!

    You should change the name of your qr-code.html to index.html then push changes to the repository. The project's GitHub page should then be online and functioning. Or at least, you will see any bug on the live version.

    As for your code, start with:

    • Use semantic HTML elements. This will improve accessiblity and SEO.
    • Reduce CSS selectors specificity. In such a small app it might not be such a problem, but it's good to get into the habit of using more specific selectors only when necessary.
    • Use more adapted CSS rules for the job.

    Some resources to help you:

    • https://developer.mozilla.org/en-US/docs/Web/HTML, here you can find a list of HTML elements available to you to structure the HTML.
    • https://developer.mozilla.org/en-US/docs/Web/CSS, to find more adapted CSS rules to achieve the layout you're trying to reproduce.

    Some tools to help you: If you don't know where to start, you can use tools such as Lighthouse to scan the page (the live version or the one on localhost, use the Google chrome extension) and get tips on what to improve.

    Hope this helps!

    0
  • Cường•885
    @docuong0912Submitted over 2 years ago

    I haven't figure out how to deal with number of tasks if it exceeds the screen, any idea with that?

    Tell me if there's any problem with the solution or give me some advice in coding.

    Thank you for your time!

    Todo app using ReactJs and Sortable JS

    3
    Angélique D. Faye•390
    @AngeliqueDFPosted over 2 years ago

    Hi Nguyễn, this solution looks great!

    About your question, I think the best way to adapt the layout when there are a lot of tasks is to use CSS Grids for the layout.

    I would apply the background on the body element, give it a min-height: 100vh;. Then use display: grids; to create the layout. I haven't tried this yet but I think it could work.

    We have similar solutions and I didn't think of this case, so thanks!

    Small feedback: can you make it so that we can add tasks by pressing the Enter key? It might be more intuitive than pressing the button.

    Marked as helpful
    0
  • Abdulkerim Awad•120
    @AbdulkerimAwadSubmitted over 2 years ago

    Hi there...

    • The most challenging thing is that similar to the watermark (background), it took the most project time, and I'm not sure if I did it by good way, please tell me in your feedback if it is the best practice.
    • is the js file clear? always i feel writing the variables in the global scope is bad practice if it is, tell me the best practice for it. Thanks...

    Managey

    1
    Angélique D. Faye•390
    @AngeliqueDFPosted over 2 years ago

    Hi! I think you did great on this, the end result looks great!

    For the JavaScript code, I don't think it was an issue to declare global variables like you did because this project is very small. However I think in this case it's risky to declare your variables with the let keyword instead of const.

    Marked as helpful
    1