Our user is a traveller or language learner wants to find out the trending headlines in a country of interest. The app returns the top three headlines for the selected country.
The user can use one of the four quick search buttons, or select the country from a drop down menu.
If the user, does not select a country before clicking the search button, an alert message will pop up.
- Code written in ES6 + Always use ===
- Everyone needs to understand each step before moving on. -> That's why we start by mobbing until we arrived to the API call to all understand the construction of the project. Then, we set some task we could do in pairs and change regularly.
- BEM class naming / branches and mobile first
- Other pair reviews pull request
- Add alt text to images (> DOM manipulation)
- Change all vars to let
- Test pure functions
- Modularise Code
- Write Readme
- Add continuous integration and code coverage badges to readme
- Use CodeCov to track test coverage
- Create an svg map to select the country
- Working with TDD!
- We tried as much as we could, but we had few tests failing along the way that we had to commented out as we couldn't fix them.
- Adding the API key
- Readme - changing the master readme directly can cause issues.
We were not passing information back the callback, just the news articles.
Added code to pass back the status codes and display 'No data' if the call fails.
- dotenv works better than env2 (we learnt to always look at the weekly downloads - many downloads are a positive sign )
- Finally understood how the front-end talks to the back-end
- Network tab in Inspect
- great tags to work with dropdown lists
- do not push changes to readme via github (to master)
-
gives ability to embed custom data attributes on all HTML elements.
-
The stored (custom) data can then be used in the page's JS (without any Ajax calls or server-side database queries).
-
consist of: prefix "data-" + attribute name (no uppercase, at least one character & a string)
