techeverri · July 20, 2019 22:04 · techeverri · Jul 20, 2019
diff --git a/.eslintrc.json b/.eslintrc.json
 {
    "env": {
        "browser": true
    },
    "extends": "eslint:recommended",
    "rules": {
        "indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "error",
            "windows"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
 }
diff --git a/flickr-spinner.css b/flickr-spinner.css
 #flickr-spinner .loader {
    position: relative;
    width: 40px;
    height: 20px;
    border-radius: 10px;
    border: 15px solid transparent;
    background: #1f1f21;
    margin: 0 auto;
 }

 #flickr-spinner .dot-pink, .dot-blue {
    position: absolute;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    animation: pink-dance 1.05s ease-in-out infinite;
 }

 #flickr-spinner .dot-pink {
    background: #ff0084;
    left: -2px;
 }

 #flickr-spinner .dot-blue {
    animation-name: blue-dance;
    background: #0063dc;
    right: -2px;
 }

 @keyframes pink-dance {
    0% {
        z-index: 1;
    }
    50% {
        transform: translateX(24px);
    }
 }

 @keyframes blue-dance {
    50% {
        transform: translateX(-24px);
    }
 }
diff --git a/index.html b/index.html
 <!doctype html>
 <html lang="en">

 <head>
    <meta charset="utf-8">
    <title>Popular Words on Flickr</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="flickr-spinner.css">
 </head>

 <body>
    <div id="nav">
        <div id="wrap">
            <div id="logo">Popular Words on Flickr</div>
        </div>
    </div>
    <div id="main">
        <div id="flickr-spinner">
            <div class="loader">
                <i class="dot-pink"></i>
                <i class="dot-blue"></i>
            </div>
        </div>
        <div id="we-have-a-problem">
            Houston, we've had a problem here :(
        </div>
        <div id="popular-words" class="word-list-view"></div>
    </div>
    <script src="script.js"></script>
 </body>

 </html>
diff --git a/script.js b/script.js
 (function () {

    'use strict';

    var FLICKR_API_BASE = 'https://api.flickr.com/services/rest/?';
    var FLICKR_API_KEY = 'd8a1a019737172aba51af49b58ca8817';

    var query = {
        method: 'flickr.photos.getRecent',
        api_key: FLICKR_API_KEY,
        format: 'json',
        per_page: 500,
        page: 1,
        nojsoncallback: 1
    };

    var EXPECTED_SAMPLE = 2e3;
    var WORD_LIMIT = 10;
    var HASHTAG_ONLY = false;
    var wordsHashMap = [];
    var pictureTitles = [];
    var start = new Date().getTime();

    getPhotos();

    function getPhotos() {
        var href = FLICKR_API_BASE + getQueryString(query);
        var xhr = new XMLHttpRequest();
        xhr.open('GET', href, true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState != 4 || xhr.status != 200) return;
            var response = JSON.parse(xhr.responseText);
            if (response.stat != 'ok') return;
            var pictures = response.photos.photo;
            pictureTitles = pictureTitles.concat(pictures.map(function (picture) {
                return picture.title;
            }));
            whatsNext();
        };
        xhr.send();
    }

    function getQueryString(query) {
        var queryString = Object.keys(query)
            .map(function (key) {
                return key + '=' + query[key];
            })
            .join('&');
        return queryString;
    }

    function whatsNext() {
        if (pictureTitles.length < EXPECTED_SAMPLE) {
            query.page += 1;
            getPhotos();
        } else {
            getMostUsedWords();
        }
    }

    function getMostUsedWords() {
        var words = [];
        words = getWords(pictureTitles);
        var count = getCount(words);
        wordsHashMap = Object.keys(count)
            .map(function (key) {
                return { word: key, count: count[key] };
            })
            .sort(function (a, b) {
                return b.count - a.count;
            });
        showMostUsedWords();
    }

    function getWords(titles) {
        var words = titles
            .join(' ')
            .split(/[\s,]+/)
            .filter(function (word) {
                return !/^[\s|#|•|*|!|.|:|\/|\-|\–|\|]$/.test(word);
            })
            .filter(function (word) {
                return !HASHTAG_ONLY || /^#/.test(word);
            })
            .map(function (word) {
                return word.toLowerCase();
            });
        return words;
    }

    function getCount(words) {
        var count = {};
        words.forEach(function (word) {
            count[word] = (count[word] || 0) + 1;
        });
        return count;
    }

    function showMostUsedWords() {
        showDebugInfo();
        var flickrSpinner = document.getElementById('flickr-spinner');
        flickrSpinner.style.display = 'none';
        var doWeHaveAProblem = wordsHashMap.length < WORD_LIMIT;
        var weHaveAProblem = document.getElementById('we-have-a-problem');
        weHaveAProblem.style.display = doWeHaveAProblem ? 'block' : 'none';
        var popularWordsElement = document.getElementById('popular-words');
        popularWordsElement.style.display = doWeHaveAProblem ? 'none' : 'block';
        wordsHashMap
            .slice(0, WORD_LIMIT)
            .map(function (wordHashMap) {
                var wordListElement = document.createElement('div');
                wordListElement.className = 'word-list';
                var overlayElement = document.createElement('div');
                overlayElement.className = 'overlay';
                var wordElement = document.createElement('div');
                wordElement.className = 'word';
                wordElement.innerText = wordHashMap.word + '\n(' + wordHashMap.count + ')';
                overlayElement.appendChild(wordElement);
                wordListElement.appendChild(overlayElement);
                popularWordsElement.appendChild(wordListElement);
            });
    }

    function showDebugInfo() {
        var end = new Date().getTime();
        var elapsedTime = end - start;
        console.log('Elapsed time: ' + elapsedTime / 1e3 + ' s');
        console.log('Sample size: ' + pictureTitles.length + ' recent photos');
    }

 })();
diff --git a/styles.css b/styles.css
 html, body {
    font-family: "Proxima Nova", "helvetica neue", helvetica, arial, sans-serif;
    margin: 0px;
    padding: 0px;
 }

 html {
    background-color: #f3f5f6;
 }

 body {
    padding-top: 50px;
 }

 #nav {
    color: #000;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    height: 50px;
    width: 100%;
    margin: auto;
    padding: 0;
    text-align: left;
    background-color: #1f1f21;
 }

 #wrap {
    position: relative;
    max-width: 80%;
    margin: 0 auto;
    height: 100%;
 }

 #logo {
    color: white;
    display: block;
    height: 50px;
    line-height: 50px;
    font-size: 150%;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
 }

 #main {
    margin: 0 auto;
    margin-top: 40px;
    max-width: 1100px;
 }

 #we-have-a-problem {
    color: black;
    font-size: 24px;
    text-align: center;
    display: none;
 }

 .word-list-view {
    font-size: 0px;
    margin: 0 auto;
    text-align: center;
 }

 .word-list {
    width: 200px;
    height: 200px;
    display: inline-block;
    background-color: #018a7b;
    margin-right: 20px;
    margin-bottom: 20px;
 }

 .overlay {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
 }

 .word {
    color: #fff;
    font-size: 24px;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    font-weight: 600;
    text-align: center;
 }
	{
	"env": {
	"browser": true
	},
	"extends": "eslint:recommended",
	"rules": {
	"indent": [
	"error",
	4
	],
	"linebreak-style": [
	"error",
	"windows"
	],
	"quotes": [
	"error",
	"single"
	],
	"semi": [
	"error",
	"always"
	]
	}
	}
	#flickr-spinner .loader {
	position: relative;
	width: 40px;
	height: 20px;
	border-radius: 10px;
	border: 15px solid transparent;
	background: #1f1f21;
	margin: 0 auto;
	}

	#flickr-spinner .dot-pink, .dot-blue {
	position: absolute;
	top: 0;
	width: 20px;
	height: 20px;
	border-radius: 100%;
	animation: pink-dance 1.05s ease-in-out infinite;
	}

	#flickr-spinner .dot-pink {
	background: #ff0084;
	left: -2px;
	}

	#flickr-spinner .dot-blue {
	animation-name: blue-dance;
	background: #0063dc;
	right: -2px;
	}

	@keyframes pink-dance {
	0% {
	z-index: 1;
	}
	50% {
	transform: translateX(24px);
	}
	}

	@keyframes blue-dance {
	50% {
	transform: translateX(-24px);
	}
	}
	<!doctype html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<title>Popular Words on Flickr</title>
	<link rel="stylesheet" href="styles.css">
	<link rel="stylesheet" href="flickr-spinner.css">
	</head>

	<body>
	<div id="nav">
	<div id="wrap">
	<div id="logo">Popular Words on Flickr</div>
	</div>
	</div>
	<div id="main">
	<div id="flickr-spinner">
	<div class="loader">
	<i class="dot-pink"></i>
	<i class="dot-blue"></i>
	</div>
	</div>
	<div id="we-have-a-problem">
	Houston, we've had a problem here :(
	</div>
	<div id="popular-words" class="word-list-view"></div>
	</div>
	<script src="script.js"></script>
	</body>

	</html>
	(function () {

	'use strict';

	var FLICKR_API_BASE = 'https://api.flickr.com/services/rest/?';
	var FLICKR_API_KEY = 'd8a1a019737172aba51af49b58ca8817';

	var query = {
	method: 'flickr.photos.getRecent',
	api_key: FLICKR_API_KEY,
	format: 'json',
	per_page: 500,
	page: 1,
	nojsoncallback: 1
	};

	var EXPECTED_SAMPLE = 2e3;
	var WORD_LIMIT = 10;
	var HASHTAG_ONLY = false;
	var wordsHashMap = [];
	var pictureTitles = [];
	var start = new Date().getTime();

	getPhotos();

	function getPhotos() {
	var href = FLICKR_API_BASE + getQueryString(query);
	var xhr = new XMLHttpRequest();
	xhr.open('GET', href, true);
	xhr.onreadystatechange = function () {
	if (xhr.readyState != 4 \|\| xhr.status != 200) return;
	var response = JSON.parse(xhr.responseText);
	if (response.stat != 'ok') return;
	var pictures = response.photos.photo;
	pictureTitles = pictureTitles.concat(pictures.map(function (picture) {
	return picture.title;
	}));
	whatsNext();
	};
	xhr.send();
	}

	function getQueryString(query) {
	var queryString = Object.keys(query)
	.map(function (key) {
	return key + '=' + query[key];
	})
	.join('&');
	return queryString;
	}

	function whatsNext() {
	if (pictureTitles.length < EXPECTED_SAMPLE) {
	query.page += 1;
	getPhotos();
	} else {
	getMostUsedWords();
	}
	}

	function getMostUsedWords() {
	var words = [];
	words = getWords(pictureTitles);
	var count = getCount(words);
	wordsHashMap = Object.keys(count)
	.map(function (key) {
	return { word: key, count: count[key] };
	})
	.sort(function (a, b) {
	return b.count - a.count;
	});
	showMostUsedWords();
	}

	function getWords(titles) {
	var words = titles
	.join(' ')
	.split(/[\s,]+/)
	.filter(function (word) {
	return !/^[\s\|#\|•\|*\|!\|.\|:\|\/\|\-\|\–\|\\|]$/.test(word);
	})
	.filter(function (word) {
	return !HASHTAG_ONLY \|\| /^#/.test(word);
	})
	.map(function (word) {
	return word.toLowerCase();
	});
	return words;
	}

	function getCount(words) {
	var count = {};
	words.forEach(function (word) {
	count[word] = (count[word] \|\| 0) + 1;
	});
	return count;
	}

	function showMostUsedWords() {
	showDebugInfo();
	var flickrSpinner = document.getElementById('flickr-spinner');
	flickrSpinner.style.display = 'none';
	var doWeHaveAProblem = wordsHashMap.length < WORD_LIMIT;
	var weHaveAProblem = document.getElementById('we-have-a-problem');
	weHaveAProblem.style.display = doWeHaveAProblem ? 'block' : 'none';
	var popularWordsElement = document.getElementById('popular-words');
	popularWordsElement.style.display = doWeHaveAProblem ? 'none' : 'block';
	wordsHashMap
	.slice(0, WORD_LIMIT)
	.map(function (wordHashMap) {
	var wordListElement = document.createElement('div');
	wordListElement.className = 'word-list';
	var overlayElement = document.createElement('div');
	overlayElement.className = 'overlay';
	var wordElement = document.createElement('div');
	wordElement.className = 'word';
	wordElement.innerText = wordHashMap.word + '\n(' + wordHashMap.count + ')';
	overlayElement.appendChild(wordElement);
	wordListElement.appendChild(overlayElement);
	popularWordsElement.appendChild(wordListElement);
	});
	}

	function showDebugInfo() {
	var end = new Date().getTime();
	var elapsedTime = end - start;
	console.log('Elapsed time: ' + elapsedTime / 1e3 + ' s');
	console.log('Sample size: ' + pictureTitles.length + ' recent photos');
	}

	})();
	html, body {
	font-family: "Proxima Nova", "helvetica neue", helvetica, arial, sans-serif;
	margin: 0px;
	padding: 0px;
	}

	html {
	background-color: #f3f5f6;
	}

	body {
	padding-top: 50px;
	}

	#nav {
	color: #000;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	height: 50px;
	width: 100%;
	margin: auto;
	padding: 0;
	text-align: left;
	background-color: #1f1f21;
	}

	#wrap {
	position: relative;
	max-width: 80%;
	margin: 0 auto;
	height: 100%;
	}

	#logo {
	color: white;
	display: block;
	height: 50px;
	line-height: 50px;
	font-size: 150%;
	font-weight: bold;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	}

	#main {
	margin: 0 auto;
	margin-top: 40px;
	max-width: 1100px;
	}

	#we-have-a-problem {
	color: black;
	font-size: 24px;
	text-align: center;
	display: none;
	}

	.word-list-view {
	font-size: 0px;
	margin: 0 auto;
	text-align: center;
	}

	.word-list {
	width: 200px;
	height: 200px;
	display: inline-block;
	background-color: #018a7b;
	margin-right: 20px;
	margin-bottom: 20px;
	}

	.overlay {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.word {
	color: #fff;
	font-size: 24px;
	text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
	font-weight: 600;
	text-align: center;
	}