NW-6 | AREEB-SATTAR | JS2| [TECH ED] Reading List| WEEK-3 #221
Conversation
✅ Deploy Preview for cute-gaufre-e4b4e5 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| for (const item of books) { | ||
| const list = document.createElement("li"); | ||
|
|
||
| list.setAttribute("class", item.alreadyRead ? "teal" : "red"); |
There was a problem hiding this comment.
I'm going to be really picky, but hopefully this is a useful note!
As much as possible, it's good to keep your styling separate from logic. You could use class names like "read" and "unread", then only use CSS to decide what the colour should be.
This is really useful for modifying your site in the future, as all colour choices are together in the CSS. There is also a scenario where your site might have different themes, for example, a light and dark mode. The colours for read and unread books might not always be the same in each mode.
There was a problem hiding this comment.
That makes sense, I will keep that in mind, Thank you
| <meta charset="utf-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <link rel="stylesheet" href="style.css" /> | ||
| <script defer src="script.js"></script> |
There was a problem hiding this comment.
Nice use of the defer attribute!
Learners, PR Template
Self checklist
Changelist
I have created the reading list app
Questions