corinamurg / html-tag-quiz Goto Github PK

View Code? Open in Web Editor NEW

8.0 0.0 10.0 95 KB

A quiz that shows you how many semantic HTML tags you actually know.

Home Page: https://html-tag-quiz.netlify.app/

License: MIT License

HTML 2.53% JavaScript 94.95% CSS 2.53%

a11y accessibility html html-tags javascript semantic-html hacktoberfest women-in-tech css community

html-tag-quiz's Introduction

Hello, I'm Corina!

A self-taught frontend developer with a background in math teaching and a passion for accessibility.

✔️ I'm an Accessibility Specialist with a DHS Trusted Tester certification.

✔️ I created Web for Everyone, an initiative dedicated to teaching junior developers to actively embrace accessibility. The project is a beginner-friendly source of

articles on accessibility essentials;
techniques to avoid common accessibility bugs in portfolio sites or projects.

✔️ I'm a frontend developer and maintainer with the Yuris Coding Club, an open-source community focused on inclusion and accessibility. Tagged! The Html Quiz is a current project whose goal is threefold:

engage developers and designers from around the globe in conversations about accessibility
raise awareness about the importance of semantic HTML in creating accessible websites
test developers' knowledge on HTML tags

🏆 Accolades:

✔️ Awarded the Hacktoberfest 2023 badge for contributing 4+ high-quality pull/merge requests

✔️ Received high praise for the quality of my PRs

🛠 Languages and tools:

📝 Latest Blog Posts

I love to learn and share!
Please checkout my latest posts:

👷 I am open to collaborating on a11y / JavaScript / React projects.

html-tag-quiz's People

Contributors

Stargazers

Forkers

sakshi-75 saffi-786 srv228 freemrl medinamohamed master-keshav arslanym mr-unforgettable muskan2404 galbrush

html-tag-quiz's Issues

[FEATURE] Only add tags from the list

Description

As a user I want to only be able to add tags which are contained in the list.

Acceptance Criteria (AC)

When hitting the submit button, the tag only gets added to the list if it part of the array from the index.js file

Screenshots

No response

Additional information

No response

[ENHANCEMENT] create import for tags to use them in the function

Description

To ensure code quality let's keep the files neat and clean.

Acceptance criteria

Remove the tag list from the index.js file
import the tag array to use it in the function

Screenshots

No response

Additional information

No response

[FEATURE] Refactoring the Code html/CSS/structure

Description

To assure code quality and a good DX (Developer Experience), the code has to be refactored

Acceptance Criteria

move lang="en" from <head> to <html>
no DRY
assure consistency
deletion of unused code

💡 Note: comments should stay for learning purpose!

Screenshots

No response

Additional information

No response

[DOCS] Add content to PR Tempalte

Description

Currently, the PR Template is empty.

Add following content to the template to make it work:

<!-- _For an example of how to fill this template out, [see this Pull Request in the Wiki](https://github.com/YurisCodingClub/DevCV/wiki/How-to-create-a-pull-request)._ -->

## Description

<!-- What does this code change? Why did I choose this approach? Did I learn anything worth sharing? Reminder: This will be a publicly facing representation of your work (READ: help you land that sweet dev gig). -->

## Related Issue

<!-- If you write "closes" followed by the Github issue number, it will automatically close the issue for you when the PR merges -->

Closes #

## Acceptance Criteria

<!-- Include AC from the Github issue -->

## Type of Changes

<!-- Add another type if needed and put an `✓` for the applicable box: -->

|     | Type                       |
| --- | -------------------------- |
|     | :bug: Bug fix              |
|     | :sparkles: New feature     |
|     | :hammer: Refactoring       |
|     | :100: Add tests            |
|     | :link: Update dependencies |
|     | :scroll: Docs              |

## Updates

### Before

<!-- If UI feature, take provide screenshots -->
<!-- Provide links to documentation for further reading if needed -->

### After

<!-- If UI feature, take provide screenshots -->
<!-- Provide links to documentation for further reading if needed -->

## Checklist before requesting a review

- [ ] I have performed a self-review of my code.
- [ ] Followed the repository's [Contributing Guidelines](/CONTRIBUTING.md).
- [ ] I ran the app and tested it locally to verify that it works as expected.
- [ ] I have checked my code with an automatic accessibility tool such as Axe Dev Tools or Wave
      and it shows no errors.

## Testing Steps / QA Criteria

<!-- Provide steps the reviewers need to follow to properly test your additions. -->

Screenshots

No response

Additional information

No response

[FEATURE] Add linting to project

Description

To keep the code style consistent, linting or certain rules should be added to force users to keep the style guide.

(Possible) Rules

CSS props within a declaration are alphabetically sorted
Indent using Spaces is set to 2

Screenshots

No response

Additional information

No response

[UPDATE] <Update tags data>

Description

Currently, the app uses the tags data from the W3 website. The data is stored in an array that contains 124 tags, including deprecated ones. Compared to the tags list provided by MDN, there are several tags included in the MDN list but missing from the W3 list.

We need to combine the tags from both lists. We also want to make available to users (maybe when clicking on the tag's name) the following information about each tag:

a description
whether or not the tag is deprecated
whether or not it has specific semantic importance

Having all this data available will allow for a lot more flexibility when deciding about certain features of the app. For example, we could allow users to exclude the deprecated tags from the quiz.

Acceptance Criteria

Combine tags data from W3 and MDN
Stored the data in an object with each key representing a tag name, and the value representing extra info about the tag
The value of each key will contain: 1) a description of the tag 2) whether the tag is deprecated or not 3) whether the tag has specific semantic importance

Screenshots

No response

Additional information

No response

[Enhancement] Color of the app

Description

As a user, I want the design to be clear and welcoming. It has to meet color contrast and be easy to understand.

ToDo

Implement style using HTML and CSS regarding following prototype

Conversation on this issue

Just a quick question regarding our design: will we have a dark/light toggle? 🙏
Full confession: I am asking for very selfish reasons.
I had to do some research last year because of my experience as a user with dark mode designs. I had noticed that unless an app’s content was the only way to access particular info, I would otherwise shy away from them. I just find them hard to focus on. But knowing how popular dark/light themes had become, I was just curious what makes a user prefer one over the other.

At least according to research done in Germany in 2020, my experience is not that uncommon. While dark is certainly beneficial and recommended for some users, for the majority the so-called, ‘positive contrast polarity” was better with light mode. Here’s the article I saved last year: Dark Mode vs. Light Mode: Which Is Better? Happy to explore more to see if this is still relevant ! And greatly appreciate your patience with me. 🙏

Originally posted by @CorinaMurg in #18 (comment)

### Tasks

[FEATURE] <Add Favicon for Website to help distinguish it>

Description

Please consider adding a favicon to the Website. So that when the website tab is amongst several open tabs, it can be easily distinguished. There currently is none.
Favicon is an essential part of a website's branding, and having one will improve the site's appearance and user recognition in browser tabs. It would be great if the favicon could reflect the normal recommended dimensions.
The Website's branding logo would decide the design of the favicon.
For evidence of the issue, I have attached a screenshot of the current UI display without a favicon, next to a tab that has one.

Thank you!"

Screenshots

Additional information

No response

[FEATURE] Create an input field

Description

As a user I want to see an input field of type text where I can write into it and click a submit button which saves the input to localStorage as well as under the input field.

Acceptance criteria

Create a <form> with an <input type="text"> and a <button type="submit"> in the index.html file
Create a submit function in the index.js file which saves the input to localStorage as well as showing it under the form as a list
No styling

Screenshots

No response

Additional information

If you are not familiar with localStorage yet, it is fine to not implement the functionality yet. I will migrate it to another issue later on.

[BUG]Missing language declaration

Description

As a screen reader user, I want to listen to the correct pronunciation of the apps content. Each index.html should have set a language for its content in the corresponding language inside the html tag.

Acceptance Criteria (AC)

a language attribute is set to english in the html tag

Screenshots

No response

Additional information

Useful link: https://www.w3schools.com/tags/att_lang.asp

[ENHANCEMENT] Tags are sorted alphabetically

Description

As a user, I could benefit from enhanced readability of the list.

An organized list is much easier to read and navigate than a random one. If the list becomes long, I can quickly scroll to a particular section knowing that tags are sorted. A neatly organized list is also more visually appealing.

Acceptance Criteria (AC)

The list is sorted alphabetically each time an item is added.
The list is sorted alphabetically at each render
Groups of tags starting with the same letter are separated by a space

Screenshots

Before:

After:

Additional information

No response

[ENHANCEMENT] Refactoring JS code

What would you like to share?

Description

To assure code quality and a good DX (Developer Experience), the JavaScript code has to be refactored

Acceptance Criteria

no console.log
no DRY
each function should stand on its own
deletion of unused code

💡 Note: comments should stay for learning purpose!

Additional information

No response

### Tasks
- [ ] check of `let` and `const` usage

[ENHANCEMENT] Clear input field

Description

As a user, I want the input field to be cleared after adding a new tag. In case, the tag is already in the list, the input field should not be cleared but the content should stay to show the user that the input cannot be added to the list.

Screenshots

No response

Additional information

The issue may interferes with issue #12

About page

Description

The about page talks briefly about the importance of semantic HTML. I may also contains a guide on how to use the app.
By adding this, the subtitle might change since important details are not shown in the about page.

Reference

Originally posted by @CorinaMurg in #23 (comment)

### Tasks
- [x] Browser Support `<details><summary>` [Julia]
- [x] Convenience of having all information on one page vs navigating between pages [Julia]

[FEATURE] Progress bar

Description

For every right tag the user writes in the input field, a progress bar should show their progress.

Calculation (if I am not mistaken - I am bad at math 😅 )
Tags: 124
Max: 100%
Calc simplified: 100 x 1 / 124

Screenshots

No response

Additional information

💡 Usage of semantic HTML. Watch out for helpful aria attributes.

Resources:

[FEATURE] Add delete icon to input field

Description

As a user, I want to clear the input field by clicking on a clear button inside the input field.

Screenshots

Additional information

After the issue #35 is closed, this issue will be ready for dev.

[BUG] Missing document title element

Description

As a sighted user, I rely on the title element to quickly identify the purpose of a page. The content of the title element is displayed in the browser tab or window title bar and helps me identify and switch between open pages/tabs.

As a screen reader user, the title of a page will be announce when navigating to it, and it provides me with an immediate overview of the page’s content.

Acceptance Criteria (AC)

The title element is placed within the head section of the HTML document.
There is only one title element per HTML document.
The title contains text relevant to the content of the page.

Screenshots

No response

Additional information

Useful link: MDN Documentation on title element

[FEATURE] ReadMe file

Description

Currently, the readme file contains general information on how to fork the repository. Since this guide is used in every project and stays the same, it should be moved, e.g. to a support repo.

Acceptance criteria

Remove the "How to contribute" section
Remove the "Where to go from here?" section
Store these section in the general discussion for further usage https://github.com/orgs/YurisCodingClub/discussions/34

Screenshots

Additional information

No response

[BUG] Missing label for input element

Description

As a user I want to understand what data I should enter in the input field.

Each input should have a label that provides information about the input. This also helps users of assistive technologies identify the purpose of the input.

Acceptance Criteria (AC)

Provide a label for the existing input element.
The label wraps the input OR contains a for attribute attached to the id of the input.
If the label description is very short, provide a more descriptive aria label attribute to help screen reader users.

Screenshots

No response

Additional information

Useful link: MDN documentation on label element

[BUG]Document type missing in index.html

Description

As a developer I want to find the html code starting with a doctype

Acceptance Criteria (AC)

Doctype declared in line 1

Screenshots

No response

Additional information

No response

[ENHANCEMENT] Simple Regex - Follow Up #14

Description

As suggested by @CorinaMurg in PR#14 following enhancement should be made to the user input:

Trimming unnecessary white spaces at the beginning and/or end of the input.
Ensuring case-insensitive matching.
Stripping off any inclusion of angle brackets, or non-alphabetic characters in general.

Screenshots

No response

Additional information

No response

[BUG]Update list of html tags

Description

In the index.js file is a const holding html tags. This list is incomplete and there are spelling errors.

Acceptance Criteria (AC)

All tags are written correctly
All tag strings only consist of words, no open close arrows
All html tags are in the list, current and outdated

Screenshots

No response

Additional information

Useful link: https://www.w3schools.com/tags/default.asp

[FEATURE] Prevent duplication of tags

Description

As a user, I want to add an html tag only once.

Acceptance criteria (AC)

When I want to submit a tag which is already in the list, the tag should not be added to the list

Screenshots

Additional information

Future task could be adding an error message. But will be decided when the app progresses.

[BUG] h1-h6 not added to list

Description

When trying to add h1, h2, h3, h4, h5, h6 to the list, they do not show up in the list.

AC

I expect these tags to be added to the list.

Screenshots

Local test

Additional information

👉🏽 Reference: in index.js the tags from the w3schools tag list are used. These tags are part of the list.

💡 Note: They are not part of the MDN tags list, which seems not quite right for me since these are different tags.

[FEATURE] Add error handling

Description

As a user I want to perceive visually as well as acoustically that the tag I wanted to enter is not right or already in the list.

Screenshots

Color: B3261E

Additional information

No response

[FEATURE] Heading and Subheading

Description

As a user, I want to understand what the application is about by reading the heading and subheading.

Acceptance criteria

Create a clear heading that makes clear what the app is about
Create a short introduction as a subheading to explain what the user has to do

Note: The app is a quiz. The user adds all html tags which they know. The tags list contains outdated ones as well.

Screenshots

Additional information

No response

[FEATURE] Design the app

Description

For the now the app has its default style. Since the app is in its final stage we will need a design which makes it appealing for developers to use. I guess a fun 👻 style would make sense.

Acceptance criteria

The styling is appealing for users
the styling is accessible (font-size, color contrast,..)
The app is centered horizontally with a decent spacing to the top

Let's discuss themes before we move further with it.

Screenshots

No response

Additional information

No response

[FEATURE] Added content stays after refresh

Description

As a user I want the added input to be shown in the list even when refreshing the page.

Acceptance Criteria (AC):

When adding a new tag in the list, the tag is still visible in the list after refreshing the page

Screenshots

Adding some tags

After hitting the refresh button

Additional information

No response

[FEATURE] Create array with all html tags

Description

In the index.js file create an array with all html tags and store the value to a variable called tags.

Example:

const tags = ["section", "h1", "p", ...]

[FEATURE] Congrats message

As a user, I would like to receive feedback on my progress.

Acceptance Criteria

A congrats message is displayed/announced if

the user has entered all the tags that start with a certain letter
the user has entered 50% of all tags
the user has entered 100% of all tags
there are 3 tags remaining
there are 2 tags remaining
there is 1 tag remaining

[FEATURE] Create Hint Button

Description

As a User I want to see a button with the text HINT in it. The button should be fully accessible.
The button should appear beneath the container which surrounds the current app.
The button should keep its default styling (no extra CSS needed).
The button does not need functionality (no JavaScript needed).

Useful resources

MDN documentation on button: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
MDN documentation on text-transform: https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform

### Tasks
- [ ] Add a button beneath the container element (`<div class="container"></div>`)
- [ ] Use semantic HTML to create the button
- [ ] Give the button a type
- [ ] The uppercase text **HINT** should be created using CSS
- [ ] Add CSS to `style.css` and give the button the class `button-hint`

### SUGGESTED FEATURES

4. Hints that are revealed when the user clicks a button. (I know, it’s a quiz, so maybe we should not help, but sharing the idea anyway in case it might inspire related features.) For example: total number of tags, number of tags that start with a certain letter, which letters of the alphabet are NOT used to start a tag, etc.

Originally posted by @CorinaMurg in #20 (comment)