Feedback #1
Feedback #1
Conversation
![github-classroom[bot]](https://avatars.githubusercontent.com/in/68187?s=60&v=4){kind=small}
added home.js file and edited some other parts fixes #23
| // create the "about us" description text | ||
| function renderAboutUsText() { | ||
| const aboutUs = document.createElement("div"); | ||
| aboutUs.classList.add(".about-us"); |
There was a problem hiding this comment.
When adding classes to elements using classList.add, you should not include the dot (.) before the class name. For example, change aboutUs.classList.add(".about-us"); to aboutUs.classList.add("about-us");.
| card.innerHTML = `<div class="image-content"> | ||
| <span class="overlay"></span> | ||
| <div class="card-image"> | ||
| <img src=${member.image} alt=${member.fullname} class="card-img" title=${member.fullname} /> |
There was a problem hiding this comment.
I'm not sure how the data is coming from the db but I think it good to wrap attribute values in quotes. For example src=${member.image} to src="${member.image}". This ensures proper HTML syntax.
| { | ||
| "id": 1, | ||
| "fullname": "Riadh Mouamnia", | ||
| "image": "./assets//riadh.png", |
There was a problem hiding this comment.
Is there a specific reason for having double slashes here?
I think it is better to have a single slash.
| illustrationContainer.classList.add("illustration"); | ||
| const img = document.createElement("img"); | ||
| img.setAttribute("src", "assets/illustration.png"); | ||
| img.setAttribute("alt", "illustration"); |
There was a problem hiding this comment.
I love that you thought about adding alt attribute as well!
There was a problem hiding this comment.
You can make the alt text in capital letter like: Illustration
| <meta name="viewport" content="width=device-width" /> | ||
| <title>madlibz</title> | ||
| <link | ||
| href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;700;800&display=swap" |
There was a problem hiding this comment.
It's generally better to add Google Fonts to your CSS file rather than directly in your HTML file.
| </article> | ||
| <section id="about"></section> | ||
| <!-- scripts --> | ||
| <script src="home.js"></script> |
There was a problem hiding this comment.
It's nice you thought about adding multiple files.
|
|
||
| processedStory.forEach((word) => { | ||
| if (word.word === "." || word.word === ",") { | ||
| createPunctuationText(word, previewContainer, editContainer); |
There was a problem hiding this comment.
Great job having different functions and organizing the code.
| inputFields.forEach((input, i) => { | ||
| input.addEventListener("keypress", (e) => { | ||
| if (e.key === "Enter") { | ||
| const nextIndex = (i + 1) % inputFields.length; |
There was a problem hiding this comment.
It's amazing that you thought about this!
👋! GitHub Classroom created this pull request as a place for your teacher to leave feedback on your work. It will update automatically. Don’t close or merge this pull request, unless you’re instructed to do so by your teacher.
In this pull request, your teacher can leave comments and feedback on your code. Click the Subscribe button to be notified if that happens.
Click the Files changed or Commits tab to see all of the changes pushed to
mastersince the assignment started. Your teacher can see this too.Notes for teachers
Use this PR to leave feedback. Here are some tips:
mastersince the assignment started. To leave comments on specific lines of code, put your cursor over a line of code and click the blue + (plus sign). To learn more about comments, read “Commenting on a pull request”.master. Click a commit to see specific changes.For more information about this pull request, read “Leaving assignment feedback in GitHub”.
Subscribed: @breezyback @riadhmouamnia @liliumorion @mohamed70601 @SaraBegache