<--! Put the twit text entered by the user here. -->
<--! Put the twit author entered by the user here. -->
**Importantly, you should not use `innerHTML` to generate DOM content directly from user-input content, since this opens up a vulnerability to cross-site scripting attacks. You must ensure that user-input content is safely added into the DOM.**
When the new twit is created and the modal is closed, the values of all of the input fields should be cleared so they don’t appear the next time the modal is opened.
4. If the user clicks the modal accept button while either of the input fields is blank, the user should be alerted (using the [`alert()` function](https://developer.mozilla.org/en-US/docs/Web/API/Window/alert)), and the modal should be kept open until the user either closes/cancels it or provides values for both input fields. A new twit should not be created if the user hasn’t specified values for both fields.
## 2. Support twit searches
When the user enters a search query into the search box in the navbar and clicks the search button (the little magnifying glass in the navbar), any twits whose text or author don’t contain the specified search query should be removed from the DOM (*completely* removed from the DOM, not just hidden), leaving only the ones that match the search query being displayed. Importantly, your search should be case insensitive. For example, if the user enters the string “abc” in the search box, twits containing all of the following substrings should be considered as matching the search query: “abc”, “ABC”, “Abc”, “aBC”, etc. In addition, the search query should be matched all text within the twits, including both the twit text and the twit author.
In addition, for full credit, you must implement both of the following features:
* **Enable re-searching** – If the user changes the search query and hits the search button, the search should be performed over all of the original twits and any newly added ones. This means that twits that were removed from the DOM because of a previous search might have to be re-added back into the DOM. If the user clears the search term completely, all of the original twits and any newly added ones should be displayed again. In all cases, the twits should always remain in the same order relative to each other.
* **Enable “live search”** – Hook the search box up so that the search results are updated with each character the user types, even without hitting the search button. In this case, the search results should behave as described just above, with twits being re-added into and removed from the DOM as appropriate. In other words, each new character inserted or deleted could potentially result in a change to the displayed twits.
## Code Blog
Add an entry to your Code Blog reflecting on your experience with this assignment. Here are some questions you could answer (though these aren’t the only ones):
* What was challenging about the assignment, and what specific kinds of problems did you have. How did you solve those problems?
* What did you learn from the assignment? Were there any special insights you had? What did you find that you already knew?
* What kinds of resources were helpful for completing the assignment? Specific websites? Lectures? The class Piazza forum? The TAs? How did you use each of these resources?
* What are one or two things you had to Google to complete the assignment?
## Grading criteria
This assignment will be graded based only your `index.js` file, and any changes you make to `index.html` or `style.css` will be ignored.
The assignment is worth 100 points total:
* New twit creation: 65 points:
* 10 points: clicking the red “create twit” button displays the modal and its backdrop
* 10 points: clicking either the modal’s close button or the modal’s cancel button hits the modal and backdrop
* 30 points: clicking the modal’s accept button adds a correctly-formatted new twit to the end of the page if the user has specified values for the required input fields
* 5 points: when creating a new twit, the page is not vulnerable to a cross-site scripting attack via user-supplied values
* 5 points: clicking the modal’s accept button when a value is not specified by the user for any one of the input fields results in the user being alerted and the modal remaining open
* 5 points: whenever the modal is closed (either when a twit is created or not), any input values the user specified are cleared so they do not appear when the modal is opened the next time
* Twit search: 35 points
* 5 points: client-side JS correctly reads search term input by the user
* 15 points: user-supplied search term is correctly applied to filter the twits when the user clicks the “search” button, with non-matching twits removed completely from the DOM (not just hidden)
* 10 points: re-searching is enabled, i.e. when the user changes the search query and hits the search button, all matching twits are displayed, even ones that were removed from the DOM based on a previous search
* 5 points: “live” search is enabled, i.e. search results update as the user types, as described above
程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com