freecodecamp_quotes

Tutorials of (Freecodecamp_quotes) by Marek petak

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>freecodecamp_quotes</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <html ng-app="App">

<head>
	   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

     <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/paper/bootstrap.min.css" rel="stylesheet" />
		 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" / />
		 <link href='https://fonts.googleapis.com/css?family=Tulpen+One' rel='stylesheet' type='text/css'>
     <link href="style.css" rel="stylesheet" />

     <title>a quote thingy</title>
</head>

<body ng-controller="AppController">

	<div class="quote-holder">
		<div class="quote-holder-item quote-holder-item--fixed">
			<div class="quote-holder-data page-header">
				<br />
				<em>
					<p class="text-center quote-text">{{quote.text}}</p>
				</em>
				<p class="text-right">
					-- {{quote.author}} --
				</p>
				<p class="text-right">
					<button class="btn btn-lg btn-primary" ng-click="newQuote()">new</button>
				</p>

				<p class="text-left social-icons">
					<a href="https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text={{quote.text + ' ' + quote.author}}"><i class="fa fa-twitter-square fa-2x"></i></a>
					<a href="https://plus.google.com"><i class="fa fa-google-plus-square fa-2x"></i></a>
        </p>

			</div>
		</div>
	</div>

	<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.0/angular.min.js'></script>

	<script src="app.js"></script>
</body>
</html>
  
    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
body {
  font-size: 16px !important;
}

.quote-holder {
  display: flex;
  align-items: center;
  min-height: 24em;
  justify-content: center;
}

.quote-holder-item {
  flex: 1;
}

.quote-holder-item--fixed {
  flex: none;
  max-width: 50%;
}
.quote-holder-data {
  width: 800px;
  padding: .8em 1em 0;
  background: rgba(147,128,108,.1);
  font-family: Tahoma;
  font-size: 22px !important;
  border-radius: 5px
}

.quote-text {
  font-size: 26px;
}
/* Downloaded from https://www.codeseek.co/ */
(function() {
  'use strict';

  angular
    .module('App', [])
    .controller('AppController', ['$scope', 'DataService',
      function($scope, DataService) {
        $scope.quote = {
          text: 'empty text',
          author: 'empty'
        };

        $scope.newQuote = function() {
            DataService.getQuote(function(data, error) {
              if(error){
                console.log(error);
              }
              else {
                $scope.quote = data;
              }
            });
        }

        function init() {
          $scope.newQuote();
        }

        init();
      }
    ])
    .service('DataService', ['$http',
      function($http) {
        var _dataServiceFactory = {};

        function _getQuote(callback) {

          $http({
            method: 'GET',
            url: 'https://andruxnet-random-famous-quotes.p.mashape.com/?cat=',
            headers: {
              'X-Mashape-Key': 'OpJyf5G4TEmshtcqkiM7ewzowsikp1dJvHcjsnRdYleSwddNKI',
              'Content-Type': 'application/x-www-form-urlencoded',
              'Accept': 'application/json'
            }
          }).then(function(data) {

            if(callback) {
              var quote = {
                text: data.data.quote,
                author: data.data.author
              }

              callback(quote);
            }
          });
        }

        _dataServiceFactory.getQuote = _getQuote;

        return _dataServiceFactory;
      }
    ]);

})();

This awesome code ( freecodecamp_quotes ) is write by Marek Petak, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Marek Petak