redesigned the Rate Music page #315
Conversation
✅ Deploy Preview for mogulchristmas ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
![accesslint[bot]](https://avatars.githubusercontent.com/in/1502?s=60&v=4){kind=small}
| <form name="rating" netlify> | ||
|
|
||
| <label class="song-name">Song Name:</label><br/><br/> | ||
| <select class="select" name="song[]"> |
There was a problem hiding this comment.
Looks like this element is missing an accessible name or label. That makes it hard for people using screen readers or voice control to use the control.
rating/index.html
Outdated
|
|
||
|
|
||
| <label class="">Rating - Out of 10 : <span id="demo"></span></label><br/><br/> | ||
| <input type="range" id="rating" class="rating" max="10" step="1" onchange="handleChange()" required/><br/><br/> |
There was a problem hiding this comment.
Looks like this element is missing an accessible name or label. That makes it hard for people using screen readers or voice control to use the control.
|
tell me if the design sare cool enough,then maybe you can provide a pattern I can follow |
rating/index.js
Outdated
| @@ -0,0 +1,8 @@ | |||
| // get the input | |||
| let rating = document.getElementById('rating') | |||
There was a problem hiding this comment.
[ESLint] 'rating' is never reassigned. Use 'const' instead. (view)
| Rule | Severity | Recommended |
|---|---|---|
prefer-const |
warn |
No |
References:
You can close this issue if no need to fix it. Learn more.
rating/index.js
Outdated
|
|
||
| // handles changes in the input and renders values to the screen | ||
| function handleChange(){ | ||
| let res = document.getElementById('demo') |
There was a problem hiding this comment.
[ESLint] 'res' is never reassigned. Use 'const' instead. (view)
| Rule | Severity | Recommended |
|---|---|---|
prefer-const |
warn |
No |
References:
You can close this issue if no need to fix it. Learn more.
There was a problem hiding this comment.
Perfect! But there's only one problem.. Right now the slider of rating sets to the middle, so people may consider that as half, but it actually doesn't rate anything, so it's "0" so I don't want the user to be able to submit if they haven't used to slider at all/to rate.
| <form name="rating" id="submit" netlify> | ||
|
|
||
| <label class="song-name">Song Name:</label><br/><br/> | ||
| <select class="select" name="song[]"> |
There was a problem hiding this comment.
Looks like this element is missing an accessible name or label. That makes it hard for people using screen readers or voice control to use the control.
|
Thanks a lot for your contribution... I really like the design and am sure this took you lots of time to put together @wyenelle |
|
@all-contributors please add @wyenelle to the doc |
|
I've put up a pull request to add @wyenelle! 🎉 |
🛠️ Added a new Rating Page
📄 Note to reviewers
📷 Screenshots