diff --git a/README.md b/README.md index db45e85..447a944 100644 --- a/README.md +++ b/README.md @@ -1,26 +1,7 @@ -Teste para processo seletivo para desenvolvedor front-end da Editora Positivo. +A solução se baseia em gerenciar o 'body' do documento HTML com a diretiva do AngularJS. Dentro do arquivo app.js existe o controller 'heroListCtrl' que controla os bindings, os filtros, a renderização dos componentes dinâmicos e chamada à API da MARVEL. -Teste Front-End - Editora Positivo -Usando a API da Marvel (https://developer.marvel.com), crie uma Single Page Application mostrando uma listagem dos personagens para o usuário consultar. O usuário tem que poder filtrar os personagens com base no nome, inicial ou data de modificação (ano), sendo que a seleção de um filtro afeta o outro. A aplicação tem que ser feita em AngularJS e fazer uso de pelo menos uma das diretivas padrão do framework. O layout (cores, ícones, imagens) fica a seu cargo. +Foi usada a biblioteca Materialize para aplicar estilos. Como não a mesma não foi extendida, não foi usado SASS, somente a inclusão da biblioteca CSS e JS via CDN. -Observação: No arquivo README do projeto explique o funcionamento e a solução adotada na sua implementação do desafio. +Para completo funcionamento, no arquivo app.js é necesário informar as chaves pública e privada da API, basta colocar os valores nas variáveis $scope.pukey (Pública) e $scope.prkey (Privada). -Frameworks/Bibliotecas: - -* AngularJS -* SASS ou LESS -* Material Design - -Diferenciais: - -* Responsividade -* Componentização -* Orientação a objeto - Critérios: - -* Performance -* Usabilidade -* Criatividade -* Clean code (código limpo e organizado) -* Semântica do HTML -* Estruturação do CSS +A chamada da API solicita os primeiros 50 heróis da lista. Por única chamada o limite é 100, mas para fins de melhor performance foi restringido à 50. E sobre essa lista os filtros por nome e ano de modificação podem ser feitos. A lista informa um avatar com a imagem do herói, o nome e a data da ultima modificação. diff --git a/app.js b/app.js new file mode 100644 index 0000000..9cba240 --- /dev/null +++ b/app.js @@ -0,0 +1,34 @@ +angular. + module('app', ['angular-md5']) + .controller('heroListCtrl', + function ($scope, $http, md5) { + $scope.pukey = ''; //INFORM HERE THE PUBLIC API KEY + $scope.prkey = ''; //INFORM HERE THE PRIVATE API KEY + $scope.ts = new Date().getTime(); + $scope.hash = md5.createHash(`${$scope.ts}${$scope.prkey}${$scope.pukey}`); + $scope.url = `http://gateway.marvel.com/v1/public/characters?limit=50&ts=${$scope.ts}&apikey=${$scope.pukey}&hash=${$scope.hash}`; + $scope.years = [ + '2019', '2018', '2017', '2016', '2015', '2014', '2013', '2012', '2011', '2010', + '2009', '2008', '2007', '2006', '2005', '2004', '2003', '2002', '2001', '2000', + '1999', '1998', '1997', '1996', '1995', '1994', '1993', '1992', '1991', '1990', + '1989', '1988', '1987', '1986', '1985', '1984', '1983', '1982', '1981', '1980', + '1979', '1978', '1977', '1976', '1975', '1974', '1973', '1972', '1971', '1970', + '1969', '1968', '1967', '1966', '1965', '1964', '1963', '1962', '1961', '1960', + '1959', '1958', '1957', '1956', '1955', '1954', '1953', '1952', '1951', '1950', + '1949', '1948', '1947', '1946', '1945', '1944', '1943', '1942', '1941', '1940' + ]; + $scope.dateFilter = function (hero) { + if ($scope.yearF !== undefined && $scope.yearF !== null) { + let date1 = new Date(`${$scope.yearF}-01-01T00:00:00-0400`).getTime(); + let date2 = new Date(`${$scope.yearF}-12-31T23:59:59-0400`).getTime(); + let compD = new Date(hero.modified).getTime(); + return ( compD >= date1 && compD <= date2 ); + } else { + return true; + } + } + + $http.get($scope.url).then(function(response){ + $scope.resp = response.data; + }); + }); diff --git a/index.html b/index.html new file mode 100644 index 0000000..476f73c --- /dev/null +++ b/index.html @@ -0,0 +1,62 @@ + + + + + + + + Marvel Heroes + + + + + + + +

MARVEL's Hero List

+ +
+
+
+
+ + +
+
+ + +
+
+
+
+ + + + + + + + + + + + +