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

All comments

  • Angélique D. Faye•390
    @AngeliqueDF

    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!

  • Angélique D. Faye•390
    @AngeliqueDF

    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
  • Angélique D. Faye•390
    @AngeliqueDF

    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