Submitted about 2 years ago

Todo-app using css and vanilla javascript

Pranshu Sahu•770

@Pranshu-Sahu

Preview site View code

This is a solution for...Todo app

HTML
CSS
JS

3intermediate

Design comparison

SolutionDesign

Solution retrospective

completing bonus part , that is , drag and drop functionality was quite difficult but learnt a lot in the process.

I hope to receive help so that I can remove accessibility issue. All suggestion and feedback are welcome.

Community feedback

Ajayi Michael•400

@Michaelajayi150Posted about 2 years ago

Hi there @Pranshu-Sahu.... Concerning your accessibility issues

There must be an "h1" tag in your project... Headers tags are not just for font customization only, they serve greater purpose to screen readers... I'd advice your text "TODO" place it in an h1 tag

<h1 class="heading-tag">TODO</h1>

then style it to fit the font size and weight you want

.heading-tag {
   font-size: blah blah
   font-weight: blah blah blah
}

Organize your div's properly into main tags, header tags and footer tags... The order must be:

<body>
    <header>
        All other elements/tags must be a sub element of either of this three element
    </header>
    <main>
        All other elements/tags must be a sub element of either of this three element
    </main>
    <footer>
        All other elements/tags must be a sub element of either of this three element
    </footer>
</body>

Then the HTML issue...

Remove the role attribute you placed in the img tag, role is not needed as soon as you have an alt attribute already

    <img src="blah blah" alt="description of blah blah" />

Glad to help 😊 Kindly mark if this was helpful to you 🤗

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord