andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[FEATURE] Add getImages snippet (#806)

Browse Source 
<!-- Use a descriptive title, prefix it with [FIX], [FEATURE] or [ENHANCEMENT] if applicable (use only one) -->

## Description
<!-- Write a detailed description of your changes/additions here -->
Adding a snippet to fetch all images from within a desired element.
<!-- If your PR resolves an issue, please state "Resolves #(issue number)" to help maintainers process it faster -->
<!-- If you think your PR will cause breaking changes, require changes in the documentation etc, please be so kind as to explain what, where and how -->

## PR Type
- [x] Snippets, Tests & Tags (new snippets, updated snippets, re-tagging of snippets, added/updated tests)
- [ ] Scripts & Website & Meta (anything related to files in the [scripts folder](https://github.com/30-seconds/30-seconds-of-code/tree/master/scripts), how the repository's automated procedures work and the website)
- [ ] Glossary & Secondary Features (anything related to the glossary, such as new or updated terms or other secondary features)
- [ ] General, Typos, Misc. & Meta (everything else, typos, general stuff and meta files in the repository - e.g. the issue template)

## Guidelines
- [x] I have read the guidelines in the [CONTRIBUTING](https://github.com/30-seconds/30-seconds-of-code/blob/master/CONTRIBUTING.md) document.
This commit is contained in:
Gravity_Salad
2018-10-07 06:24:36 -07:00
committed by Felix Wu
parent 3780653a46
commit 77ddd8a7e8
4 changed files with 41 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
snippets/getImages.md Normal file
View File

@ -0,0 +1,17 @@
### getImages
Fetches all images from within an element and puts them into an array
Use `Element.prototype.getElementsByTagName()` to fetch all `<img>` elements inside the provided element, `Array.prototype.map()` to map every `src` attribute of their respective `<img>` element, then create a `Set` to eliminate duplicates and return the array.
```js
const getImages = (el, includeDuplicates = false) => {
const images = [...el.getElementsByTagName("img")].map(img => img.getAttribute("src"));
return includeDuplicates ? images : [...(new Set(images))];
};
```
```js
getImages(document, true); // ['image1.jpg', 'image2.png', 'image1.png', '...']
getImages(document, false); // ['image1.jpg', 'image2.png', '...']
```

1
tag_database
View File

@ -96,6 +96,7 @@ geometricProgression:math,intermediate
get:object,intermediate get:object,intermediate
getColonTimeFromDate:date,intermediate getColonTimeFromDate:date,intermediate
getDaysDiffBetweenDates:date,intermediate getDaysDiffBetweenDates:date,intermediate
getImages:browser,beginner
getMeridiemSuffixOfInteger:date,beginner getMeridiemSuffixOfInteger:date,beginner
getScrollPosition:browser,intermediate getScrollPosition:browser,intermediate
getStyle:browser,css,beginner getStyle:browser,css,beginner

5
test/getImages/getImages.js Normal file
View File

@ -0,0 +1,5 @@
const getImages = (el, includeDuplicates = false) => {
const images = [...el.getElementsByTagName("img")].map(img => img.getAttribute("src"));
return includeDuplicates ? images : [...(new Set(images))];
};
module.exports = getImages;

18
test/getImages/getImages.test.js Normal file
View File

@ -0,0 +1,18 @@
const expect = require("expect");
const getImages = require("./getImages.js");
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const TEST_HTML = new JSDOM("<!DOCTYPE html><p>Hello world</p><img src=\"https://upload.wikimedia.org/wikipedia/en/1/12/Yellow_Smiley_Face.png\"></img>").window.document;
test("getImages is a Function", () => {
expect(getImages).toBeInstanceOf(Function);
});
test("getImages returns an Array", () => {
expect(getImages(TEST_HTML)).toBeInstanceOf(Array);
});
test("getImages removes duplicates from images Array", () => {
expect(getImages(TEST_HTML, false).length).toBeLessThanOrEqual(getImages(TEST_HTML, true).length);
expect(getImages(TEST_HTML, true)).toEqual(expect.arrayContaining(getImages(TEST_HTML, false)));
});\n