erikpantzar/flickrApp.js

## flickrApp.js
<html>
<script>
 // step1 create application on flickr
const API_KEY = 'd1353a0c57b83a6dff262ea9de1c3a9c'; // 0175b82863673a7b456a7bbd08235496
const USER_ID = '150531487%40N08'
// const SECRET = 'fc60f66a99c9b170'

// getPhotos
const apiCall = `https://api.flickr.com/services/rest/?method=flickr.people.getPhotos&api_key=${API_KEY}&user_id=${USER_ID}&format=json&nojsoncallback=1`

// how to get url
// https://www.flickr.com/services/api/misc.urls.html
const json = fetch(apiCall)
    .then(data => data.json())
    .then(json => {
        let urls = json.photos.photo.map( photo => {
            const { farm, server, id, secret } = photo
            // {id: "34458582484", owner: "150531487@N08", secret: "13c9aedd1e", server: "4215", farm: 5, …}
            // s	small square 75x75
            // q	large square 150x150
            // t	thumbnail, 100 on longest side
            // m	small, 240 on longest side
            // n	small, 320 on longest side
            // -	medium, 500 on longest side
            // z	medium 640, 640 on longest side
            // c	medium 800, 800 on longest side†
            // b	large, 1024 on longest side*
            // h	large 1600, 1600 on longest side†
            // k	large 2048, 2048 on longest side†
            // o	original image, either a jpg, gif or png, depending on source format
            return `https://farm${farm}.staticflickr.com/${server}/${id}_${secret}_c.jpg`
        })

        console.log(urls)
        imageToDom(urls)
    })

const imageToDom = (urls) => {
    const d = document.createElement('ul')

    urls.forEach(url => {
        const l = document.createElement('li')
        const img = document.createElement('img')
        img.src = url
        l.appendChild(img)
        d.appendChild(l);

    })

    document.body.appendChild(d);
}

</script>
</html>
	<html>
	<script>
	// step1 create application on flickr
	const API_KEY = 'd1353a0c57b83a6dff262ea9de1c3a9c'; // 0175b82863673a7b456a7bbd08235496
	const USER_ID = '150531487%40N08'
	// const SECRET = 'fc60f66a99c9b170'

	// getPhotos
	const apiCall = `https://api.flickr.com/services/rest/?method=flickr.people.getPhotos&api_key=${API_KEY}&user_id=${USER_ID}&format=json&nojsoncallback=1`

	// how to get url
	// https://www.flickr.com/services/api/misc.urls.html
	const json = fetch(apiCall)
	.then(data => data.json())
	.then(json => {
	let urls = json.photos.photo.map( photo => {
	const { farm, server, id, secret } = photo
	// {id: "34458582484", owner: "150531487@N08", secret: "13c9aedd1e", server: "4215", farm: 5, …}
	// s small square 75x75
	// q large square 150x150
	// t thumbnail, 100 on longest side
	// m small, 240 on longest side
	// n small, 320 on longest side
	// - medium, 500 on longest side
	// z medium 640, 640 on longest side
	// c medium 800, 800 on longest side†
	// b large, 1024 on longest side*
	// h large 1600, 1600 on longest side†
	// k large 2048, 2048 on longest side†
	// o original image, either a jpg, gif or png, depending on source format
	return `https://farm${farm}.staticflickr.com/${server}/${id}_${secret}_c.jpg`
	})

	console.log(urls)
	imageToDom(urls)
	})

	const imageToDom = (urls) => {
	const d = document.createElement('ul')

	urls.forEach(url => {
	const l = document.createElement('li')
	const img = document.createElement('img')
	img.src = url
	l.appendChild(img)
	d.appendChild(l);

	})

	document.body.appendChild(d);
	}

	</script>
	</html>