MrXploder/FinvoxTest.html

## FinvoxTest.html
<!DOCTYPE html>
<html>
  <head>
    <title>Simple JavaScrip Test</title>
  </head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  <style type="text/css">

  </style>
  <body>
    <div id="app"></div>
    <script>
      /*
         Please put inside the div with id 'app' the last 10 posts (ordered by id)
         from this endpoint https://jsonplaceholder.typicode.com/posts
         Add to the DOM just items with the post title.

        2. Once this request is finished succesfully get the 3 last comments asociated with the first
        post of the list using this endpoint https://jsonplaceholder.typicode.com/comments
        For this test just request them, you don't need to add them to the DOM.

        3. Include a console.error if any request returns an error.

        4. About styles, don't think about look & feel, but set the div with id 'app' centered vertical and horizontal
        to the window with a max-width of 320px.

        Please use ES6. Besides, you are allowed to use React, Angular or Vue, but it isn't mandatory.

        Send your answer using a static GitHubGist or any web service like https://codepen.io/

        If you have any doubts, write a comment here or send a message throgh Get on Board.
      */
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.js"></script>
    <script type="text/javascript">
      class appController {
        constructor($http){
          this.$http = $http;
          this.Posts = [];
          this.Comments = [];
        }

        $onInit() {
          this.$http
            .get("https://jsonplaceholder.typicode.com/posts")
            .then(response => {
              this.Posts = response.data.sort((current, previous) => current.id - previous.id);
              return this.$http.get("https://jsonplaceholder.typicode.com/comments");
            })
            .then(response => {
              this.Comments = response.data.filter(comment => comment.postId === this.Posts[0].id).slice(-3);
              console.log(this.Comments);
            })
            .catch(() => {
              console.error("Error al conectar con la API");
              this.Posts = [];
              this.Comments = [];
            })
        }
      }

      angular
        .module("Finvox", [])
        .component("app", {
          controller: appController,
          template: `<div class="row justify-content-center">
                      <div class="col-10 col-md-8 col-xl-5">
                        <div class="card shadow" style="/*max-width: 320px*/">
                          <table class="table">
                            <thead class="bg-info">
                              <tr>
                                <th>#</th>
                                <th>userId</th>
                                <th>id</th>
                                <th>title</th>
                                <th>body</th>
                              </tr>
                              </thead>
                              <tbody>
                                <tr ng-repeat="post in $ctrl.Posts | limitTo: 10">
                                  <td>{{ $index + 1}}</td>
                                  <td>{{ post.userId }}</td>
                                  <td>{{ post.id }}</td>
                                  <td>{{ post.title }}</td>
                                  <td>{{ post.body }}</td>
                                </tr>
                              </tbody>
                          </table>
                        </div>
                      </div>
                    </div>`,
        });

      angular.element(document.getElementById("app")).append("<app/>")
      angular.bootstrap(document.getElementById("app"), ["Finvox"]);
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Simple JavaScrip Test</title>
	</head>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
	<style type="text/css">

	</style>
	<body>
	<div id="app"></div>
	<script>
	/*
	Please put inside the div with id 'app' the last 10 posts (ordered by id)
	from this endpoint https://jsonplaceholder.typicode.com/posts
	Add to the DOM just items with the post title.

	2. Once this request is finished succesfully get the 3 last comments asociated with the first
	post of the list using this endpoint https://jsonplaceholder.typicode.com/comments
	For this test just request them, you don't need to add them to the DOM.

	3. Include a console.error if any request returns an error.

	4. About styles, don't think about look & feel, but set the div with id 'app' centered vertical and horizontal
	to the window with a max-width of 320px.

	Please use ES6. Besides, you are allowed to use React, Angular or Vue, but it isn't mandatory.

	Send your answer using a static GitHubGist or any web service like https://codepen.io/

	If you have any doubts, write a comment here or send a message throgh Get on Board.
	*/
	</script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.js"></script>
	<script type="text/javascript">
	class appController {
	constructor($http){
	this.$http = $http;
	this.Posts = [];
	this.Comments = [];
	}

	$onInit() {
	this.$http
	.get("https://jsonplaceholder.typicode.com/posts")
	.then(response => {
	this.Posts = response.data.sort((current, previous) => current.id - previous.id);
	return this.$http.get("https://jsonplaceholder.typicode.com/comments");
	})
	.then(response => {
	this.Comments = response.data.filter(comment => comment.postId === this.Posts[0].id).slice(-3);
	console.log(this.Comments);
	})
	.catch(() => {
	console.error("Error al conectar con la API");
	this.Posts = [];
	this.Comments = [];
	})
	}
	}

	angular
	.module("Finvox", [])
	.component("app", {
	controller: appController,
	template: `<div class="row justify-content-center">
	<div class="col-10 col-md-8 col-xl-5">
	<div class="card shadow" style="/max-width: 320px/">
	<table class="table">
	<thead class="bg-info">
	<tr>
	<th>#</th>
	<th>userId</th>
	<th>id</th>
	<th>title</th>
	<th>body</th>
	</tr>
	</thead>
	<tbody>
	<tr ng-repeat="post in $ctrl.Posts \| limitTo: 10">
	<td>{{ $index + 1}}</td>
	<td>{{ post.userId }}</td>
	<td>{{ post.id }}</td>
	<td>{{ post.title }}</td>
	<td>{{ post.body }}</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>
	</div>`,
	});

	angular.element(document.getElementById("app")).append("<app/>")
	angular.bootstrap(document.getElementById("app"), ["Finvox"]);
	</script>
	</body>
	</html>