Skip to content

Commit a7500fc

Browse files
committed
add one more exercise
1 parent f5e92b2 commit a7500fc

File tree

3 files changed

+22
-1
lines changed

3 files changed

+22
-1
lines changed

.github/styles/config/vocabularies/Docs/accept.txt

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,3 +94,4 @@ asyncio
9494
parallelization
9595
IMDb
9696
subwoofer
97+
Fandom's

sources/academy/webscraping/scraping_basics_python/03_devtools_extracting_data.md

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ In the next lesson, we'll start with our Python project. First we'll be figuring
7777

7878
<Exercises />
7979

80-
### Locate the top Movies wiki on Fandom
80+
### Extract the name of the top wiki on Fandom Movies
8181

8282
On Fandom's [Movies page](https://www.fandom.com/topics/movies), use CSS selectors and HTML elements manipulation in the **Console** to extract the name of the top wiki. Use JavaScript's [`trim()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trim) method to remove white space from around the name.
8383

@@ -96,3 +96,23 @@ On Fandom's [Movies page](https://www.fandom.com/topics/movies), use CSS selecto
9696
1. At the time of writing, this returns `"Pixar Wiki"`.
9797

9898
</details>
99+
100+
101+
### Extract the price of IKEA's most expensive artificial plant
102+
103+
At IKEA's [Artificial plants & flowers listing](https://www.ikea.com/se/en/cat/artificial-plants-flowers-20492/), use CSS selectors, and HTML elements manipulation in the **Console** to extract the price of the most expensive artificial plant (sold in Sweden, as we'll be browsing their Swedish offer). Before opening DevTools, use your wits to set the page to a state which is most favorable for you to complete the task with the least effort. In the end, use JavaScript's [`parseInt()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt) to turn the text to a number.
104+
105+
<details>
106+
<summary>Solution</summary>
107+
108+
1. Open the [Artificial plants & flowers listing](https://www.ikea.com/se/en/cat/artificial-plants-flowers-20492/).
109+
1. Sort the products by price, high to low, so that the most expensive plant appears first in the listing.
110+
1. Activate the element selection tool in your DevTools.
111+
1. Click on the price of the first and most expensive plant.
112+
1. Notice that it has a class `plp-price__integer`. In the markup the price is already structured into two elements, with the integer separate from the currency, which is convenient.
113+
1. In the **Console**, execute `document.querySelector('.plp-price__integer')`. It returns element representing the first list item. The selector is apparently used only inside product cards, and because `document.querySelector()` returns the first matching element, we're almost done.
114+
1. In the **Console**, execute `price = document.querySelector('.plp-price__integer')` to save the element in a variable.
115+
1. In the **Console**, execute `parseInt(price.textContent)` to get the price as a number.
116+
1. At the time of writing, this returns `699`, as in [699 SEK](https://www.google.com/search?q=699%20sek).
117+
118+
</details>
349 KB
Loading

0 commit comments

Comments
 (0)