diff --git a/index.html b/index.html index c7f4b58..688d809 100644 --- a/index.html +++ b/index.html @@ -23,18 +23,18 @@

- - - - - - - - + + + + + + + + - - - + + + @@ -46,4 +46,4 @@

- \ No newline at end of file + diff --git a/js/dom.js b/js/dom.js index 3d29e14..fb69df9 100644 --- a/js/dom.js +++ b/js/dom.js @@ -1,24 +1,24 @@ -( function() { - var render = function( resultsObj ) { - var lineTitleSelector = document.getElementsByClassName('selected-line')[0]; - var imageSelector = document.getElementsByClassName('giphy')[0]; - var captionSelector = document.getElementsByClassName('status-severity')[0]; +var render = function( resultsObj ) { + var lineTitleSelector = document.getElementsByClassName('selected-line')[0]; + var imageSelector = document.getElementsByClassName('giphy')[0]; + var captionSelector = document.getElementsByClassName('status-severity')[0]; - imageSelector.src = resultsObj.url; - imageSelector.setAttribute('alt', resultsObj.status); - imageSelector.setAttribute('title', resultsObj.status); - captionSelector.textContent = resultsObj.status; - lineTitleSelector.style.padding = '1%'; - lineTitleSelector.style.backgroundColor = linesColours[resultsObj.line][0]; - lineTitleSelector.style.color = linesColours[resultsObj.line][1]; - lineTitleSelector.textContent = resultsObj.lineName; + imageSelector.src = resultsObj.url; + imageSelector.setAttribute('alt', resultsObj.status); + imageSelector.setAttribute('title', resultsObj.status); + captionSelector.textContent = resultsObj.status; + lineTitleSelector.style.padding = '1%'; + lineTitleSelector.style.backgroundColor = linesColours[resultsObj.line][0]; + lineTitleSelector.style.color = linesColours[resultsObj.line][1]; + lineTitleSelector.textContent = resultsObj.lineName; - }; + }; +( function() { var tubeLines = document.getElementsByName('tube-lines'), chooseLine = document.getElementsByClassName('choose-your-line')[0]; chooseLine.addEventListener( 'click', function( e ) { - logicObj.init( e.target.value, e.target.textContent, render); + logicObj.init( e.target.value, e.target.textContent); }); }() ); diff --git a/js/logic.js b/js/logic.js index 187467a..4807e28 100644 --- a/js/logic.js +++ b/js/logic.js @@ -42,7 +42,7 @@ var logicObj = { logicObj.resultsObj.url = gifSrc; }, - waterfall: function(tasksArray, urlsArray, render) { + waterfall: function(tasksArray, urlsArray) { if (tasksArray.length > 0) { var task = tasksArray[0]; @@ -52,7 +52,7 @@ var logicObj = { logicObj.apiCall(url, function(data) { task(data); - logicObj.waterfall(remainingTasks, remainingUrls, render); + logicObj.waterfall(remainingTasks, remainingUrls); }) } @@ -61,10 +61,10 @@ var logicObj = { } }, - init: function(line, lineName, render) { + init: function(line, lineName) { logicObj.resultsObj.line = line; logicObj.resultsObj.lineName = lineName; - logicObj.waterfall([logicObj.tflCb, logicObj.giphyCb], [logicObj.makeTflUrl, logicObj.makeGiphyUrl], render); + logicObj.waterfall([logicObj.tflCb, logicObj.giphyCb], [logicObj.makeTflUrl, logicObj.makeGiphyUrl]); } } diff --git a/resources/London-Tube.ttf b/resources/London-Tube.ttf new file mode 100755 index 0000000..e5d733c Binary files /dev/null and b/resources/London-Tube.ttf differ diff --git a/resources/fire-tunnel.jpg b/resources/fire-tunnel.jpg deleted file mode 100644 index 031b156..0000000 Binary files a/resources/fire-tunnel.jpg and /dev/null differ diff --git a/resources/fire.jpg b/resources/fire.jpg deleted file mode 100644 index fde46b7..0000000 Binary files a/resources/fire.jpg and /dev/null differ diff --git a/resources/underground-symbol.png b/resources/underground-symbol.png deleted file mode 100644 index aae4ac8..0000000 Binary files a/resources/underground-symbol.png and /dev/null differ diff --git a/style.css b/style.css index bd08326..90b3a2d 100644 --- a/style.css +++ b/style.css @@ -32,6 +32,11 @@ body { line-height: 1; } +@font-face { + font-family: "London Tube"; + src: url(./resources/London-Tube.ttf); +} + body { font-family: "London Tube", sans-serif; background-color: black; @@ -67,14 +72,14 @@ button { display: inline-block; font-size: 1rem; width: 30%; - height: 50px; + height: 60px; text-align: center; + white-space: nowrap; opacity: 0.8; padding: 1%; - margin: 0; - position: relative; + margin: 0.1rem 0; border: none; - overflow: hidden; + text-overflow: hidden; } .choose-your-line {