Sort web application -- 2

Job Description:

Hello I'm looking for a web developer to hire urgently

Create a simple application from scratch using Angular. We will use the Star Wars public API to make

a web on this theme.

First step

Note: It is an indispensable condition that the application has at least 2 modules.

The application will have a header in all the pages that it navigates. The following is the HTML of the

header to add (also attached css to add a series of styles):

Header: See Appendix 3.1 and 3.2

At the top of the main screen, put in Links the resources available in the API. To get the resources

you don't have to make a call, they have to be hardcoded.

[login to view URL]

If you need to do a search, check this link:

[login to view URL]

Each link should be clickable to load the information provided in a list. Additionally, 3 information

fields should be displayed (See example below).

Note: Implement people link is mandatory, and one other of your choice. All other links should

display a work in progress. This list will have to show by name the planet to which each person

belongs ("homeworld").

• "films": No attributes to map.

• "people":

o height: > 200 (high) // 100 - 200 (normal) // < 100 (low). Set these texts instead the

number value. Height is mandatory field.

o Resolve name of the planet of the property homeworld, is mandatory field.

• "planets": No attributes to map

• "species": No attributes to map

• "starships": length: > 1000 (large) // 100 - 1000 (normal) // < 100 (small). Set these texts

instead the number value. Length is mandatory field.

• "vehicles": No attributes to map

The list can by filtrable (in the header) and the last searched string (the last 4 minimum) must be

saved in the storage and proposed to reuse these with a buttons or links

IMPORTANT: It is not necessary to implement pagination, displaying the first 10 elements at most is

enough.

MAIN CSS

<link rel="stylesheet" href="[login to view URL]

awesome/4.7.0/css/[login to view URL]">

*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-

serif}.topnav{overflow:hidden;background-color:#e9e9e9}.topnav

a{float:left;display:block;color:#000;text-align:center;padding:14px 16px;text-

decoration:none;font-size:17px}.topnav a:hover{background-color:#ddd;color:#000}.topnav

[login to view URL]{background-color:#2196f3;color:#fff}.topnav .search-container{float:right}.topnav

input[type=text]{padding:6px;margin-top:8px;font-size:17px;border:none}.topnav .search-

container button{float:right;padding:6px 10px;margin-top:8px;margin-

right:16px;background:#ddd;font-size:17px;border:none;cursor:pointer}.topnav .search-

container button:hover{background:#ccc}@media screen and (max-width:600px){.topnav

.search-container{float:none}.topnav .search-container button,.topnav a,.topnav

input[type=text]{float:none;display:block;text-

align:left;width:100%;margin:0;padding:14px}.topnav input[type=text]{border:1px solid

#ccc}}

HEADER HTML

<div class="topnav">

<a>Search 1</a>

<a>Search 2</a>

<a>Search 3</a>

<div class="search-container">

<form>

<input type="text" placeholder="Search.." name="search">

<button><i class="fa fa-search"></i></button>

</form>

Kemahiran: Reka Bentuk Laman Web, Ujian Perisian, Ujian Laman Web, Pengehosan Web, Kejuruteraan Perisian

ID Projek: #35333597