freecodecamp_quotes

In this example below you will see how to do a freecodecamp_quotes with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by marekpetak, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright marekpetak ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!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/marekpetak/freecodecamp_quotes-aBaWvo */
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/marekpetak/freecodecamp_quotes-aBaWvo */
(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;
      }
    ]);

})();

Comments