代做 program、代写 java/Python 程序
Assignment 4: Wikipedia Search Page
2025/4/21
5 Points Possible
In Progress
NEXT UP: Submit Assignment
Unlimited Attempts Allowed
Attempt 1 Add Comment
Details
For this assignment, you are tasked with developing an interactive webpage that lets the user enter
a search query, fetches data matching said query from the Wikipedia search results external API,
and displays them as a list of results.
As an example of a similar task, take a look at the code below:
Assignment 4: Wikipedia Search Page
1/4
Here, the example searchWikipedia() function fetches data from Wikipedia's API endpoint for an
individual entry, and then visualizes the result in the DOM. The crucial part here is the data object;
after fetching from the API endpoint, we parse it from the JSON output, which yields a JavaScript
object, which ultimately we interact with in our script.
For this assignment, you will be building a similar functionality, but with a different API endpoint:
Instead of Wikipedia data for a single entry, we you will be working with an API endpoint that
returns the search results of a certain query, in JSON, as an array of objects.
Here is how Wikipedia's own website visualizes search results:
https://en.wikipedia.org/w/index.php?fulltext=1&search=Chicago&ns0=1
(https://en.wikipedia.org/w/index.php?fulltext=1&search=Chicago&ns0=1)
And, here is the API endpoint they are using: https://en.wikipedia.org/w/api.php?
action=query&origin=*&format=json&list=search&srsearch=Chicago
(https://en.wikipedia.org/w/api.php?
action=query&origin=*&format=json&list=search&srsearch=Chicago)
You will be utilizing this exact API endpoint. Similar to last week, we are providing you with some
starter code, where the the JavaScript code already takes care of building the API URL for the
fetch() function call. You need to take the data from the API response and build a search results
page.
Below are the tasks:
1. Add Wikipedia logo as an image. You can find it at:
https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/263px?Wikipedia-logo-v2.svg.png (https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia?logo-v2.svg/263px-Wikipedia-logo-v2.svg.png)
2. Validate the search query. This time around, we are leaving the input query validation to you.
The search query must not be empty and must be at least 3 characters long.
3. Display the search results on the page. You need to create a list of search results, where
each result is a link to the Wikipedia article and contains a short snippet of the article.
Note: Only the title should be a link, the snippet should be plain text. The link should point to
the Wikipedia article, e.g.: https://en.wikipedia.org/wiki/Chicago
(https://en.wikipedia.org/wiki/Chicago) . The link should open in a new tab.
4. Write some CSS to style the HTML elements.
The HTML should have a font family of Arial or sans-serif.
The body should have a different background color and center the content.
The search input should be an appropriate (wider) width.
The submit button should have a background color, and change color on hover.
Each list item should have a background color, padding, and margin.
Assignment 4: Wikipedia Search Page
2/4
Here is an example of how the page could look in the end:
NOTE: We do not expect your page to look identical to this; I took some time to style it with a dark
theme and more advanced properties, but all we expect from your CSS is to follow the tasks listed
above. Of course, that all said, if you would like to do more, please feel free!
To begin your work, go to the Files section and download the file named "assignment4.zip" inside
the Week 4 folder. You are provided with some starter code: an HTML file, a CSS file, and a JS file,
all with some comments to guide you. Only fill in the sections that contain the "YOUR CODE
HERE" comment (this is more relevant for the JS file, as there are helper functions that you do not
need to modify; they are there for you to directly use in your code, as-is).
Assignment 4: Wikipedia Search Page
3/4
Choose a submission type
Make sure to keep your code limited to the scope of what we have covered thus far in class. As
always, If you use any outside resources (online or AI tools) for a small section of your assignment,
you must leave a comment (inside your HTML, CSS, or JS file) right above the relevant piece of
code that you learned/adapted from an outside source.
Submission: Upload your index.html, style.css, and script.js files to the file uploader below.
Upload More
Choose a file to upload
File permitted: HTML, CSS, JS, ZIP
Canvas Files
Submit Assignment
or
Assignment 4: Wikipedia Search Page
4/4