<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>SWAPI With AngularJS</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<body ng-app="app" ng-controller="mainCtrl">
<div id="wrapper">
<div id="character">
<img ng-src="{{characterImg}}">
</div>
<div id="info">
<h1>{{character.name}}</h1>
<ul>
<li>height: {{character.height}}</li>
<li>mass: {{character.mass}}</li>
<li>skin color: {{character.skin_color}}</li>
<li>eye color: {{character.eye_color}}</li>
<li>birth year: {{character.birth_year}}</li>
<li>gender: {{character.gender}}</li>
<li>homeworld: {{characterHomeWorld.name}}</li>
</ul>
</div>
</div>
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/-J0hn-/swapi-with-angularjs-wJvXgE */
@import url('https://fonts.googleapis.com/css?family=Share+Tech+Mono');
body{
background:rgb(210,210,210);
height:100vh;
overflow:hidden;
color:red;
font-family: 'Share Tech Mono', monospace;
}
#wrapper{
margin:5em auto;
box-shadow:0 0 40px black;
width:650px;
height:400px;
background:url('https://images.alphacoders.com/107/thumb-1920-107763.jpg')no-repeat center center;
background-size:cover;
display:flex;
justify-content:flex-start;
}
#character{
flex:2;
}
#character img{
width:100%;
height:100%;
}
#info{
flex:3;
text-transform:uppercase;
text-align:center;
color:red;
text-shadow:0 0 20px red;
}
ul{
list-style:none;
padding:1em 2em;
text-align:left;
}
ul li{
margin:.50em 0;
}
/*Downloaded from https://www.codeseek.co/-J0hn-/swapi-with-angularjs-wJvXgE */
angular.module('app',[])
.controller('mainCtrl',['$scope','$http',function($scope,$http){
$http({
method: 'GET',
url: 'https://swapi.co/api/people/4/?format=json'
})
.then(function(response){
$scope.characterImg = 'http://vignette1.wikia.nocookie.net/deathbattle/images/f/f6/Darth_vader_9_render_by_aracnify-d92wamu.png/revision/latest?cb=20151211080755';
$scope.character = response.data;
})
$http({
method:'GET',
url:'https://swapi.co/api/planets/1/?format=json'
})
.then(function(response){
$scope.characterHomeWorld = response.data;
})
}]);
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
AngularJS
v1.6.1
