Цель:

Создайте приложение CodePen.io, которое успешно реконструирует вот это: Случайные цитаты переписаны.

Обратите внимание, что вы можете либо поместить свои котировки в массив и показывать их случайным образом, либо использовать API для получения котировок, например http://forismatic.com/en/api/.

Мои фрагменты кода HTML

Раздел body использует один раздел и нижний колонтитул. Ничего нового. Разделы настроены таким образом, чтобы весь сайт был отзывчивым. Я использовал кнопку twitter-share-button, которая является частью API и кода, но мне не нужна кнопка Twitter по умолчанию, поэтому я создал свою собственную. Вы можете проверить документацию здесь: https://dev.twitter.com/web/tweet-button

<section class="container-fluid">
  <h1 class='text-primary'>Random Quotes!</h1>
  <p> This site will display random quotes using the <a href="http://forismatic.com/" target="_blank">Forismatic</a> API. I hope you enjoy them as I learn to work with API and front end. If you want, you can tweet the quotes, it will take you to a new page
    where you might need to edit the post if the quote is too long.</p>
  <div class="well">
    <p class="quote-text"></p>
    <p class="author-text"></p>
  </div>
  <button type="button" class="btn btn-primary" id="quote">New Quote</button>
  <a class="twitter-share-button" href="https://twitter.com/intent/tweet" data-size="large" target="_blank">
    <button type="button" class="btn btn-primary">Tweet it!</button>
  </a>
</section>

<footer>
  <p>Copyright © Rafael J. Rodriguez 2015. All Rights Reserved</p>
</footer>

Мои фрагменты кода CSS

Здесь не используется много CSS. Сначала я использовал этот сайт http://colorsafe.co/ для подбора цветов, размеров и шрифтов. Я также проверил этот сайт http://www.w3schools.com/cssref/css_websafe_fonts.asp для семейных шрифтов по умолчанию.

  • Я дал новое семейство шрифтов для всех абзацев и всего, что относится к классу container-fluid.
  • Выровнял все по центру.
  • дал им соответствующие поля по бокам для стилизации.
  • Я дал новый цвет шрифта и цвет фона для тела и нижнего колонтитула.
  • Я поэкспериментировал с элементами раздела и нижним колонтитулом, чтобы он занимал всю страницу, чтобы нижний колонтитул был внизу.

Хотя стиль очень прост, его можно легко улучшить, и он выполняет свою работу.

p, .container-fluid {
  margin-right: 10%;
  margin-left: 10%;
  padding-bottom: 20px;
  text-align: center;
  color: #e4f1fe;
  font-family: 'Comic Sans MS';
}
body {
  position: relative;
  background-color: #0d493b;
}
.well {
  margin-right: 3%;
  margin-left: 3%;
  background-color: #0d493b;
}
footer {
  min-height: 8vh;
  padding-top: 20px;
  padding-bottom: 1px;
  background-color: black;
}
section {
  min-height: 91.8vh;
  font-size: 18px;
  font-weight: 300;
}

Мой код JavaScript

  • Мне нужно получить URL в правильном формате.
  • создайте функцию для получения объекта из API, а затем используйте данные.
  • Он получит цитату, затем проверит, не являются ли авторы пустой строкой, если это так, измените ее на Неизвестно
  • Верните этого автора.
  • У меня также есть случайная цитата, когда страница загружается.
  • Когда вы нажимаете кнопку, появляется функция, которая вызывает API для получения данных.
  • Данные передаются двум классам, которые на самом деле являются тегами ‹p› для изменения текста.
  • Для части твиттера я создал переменную quot, которая будет содержать строку, которая будет проанализирована как строка URL. У него будет URL-адрес API и дополнительные параметры, такие как текст цитаты, с меткой «Автор» и именем автора. Я также добавил немного саморекламы, и поэтому я знаю, когда люди используют его, поскольку они отмечают меня. Тем не менее, пользователь имеет полный контроль над тем, что на самом деле публикуется, поскольку он должен отредактировать и щелкнуть публикацию, прежде чем твит будет отправлен.
  • .attr — это то, что позволило мне изменить ссылку тега a.
var url = "http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=jsonp&lang=en&jsonp=?";
var getQuote = function(data) {
  $(".quote-text").text(data.quoteText);
  var quot = 'https://twitter.com/intent/tweet?text=' + data.quoteText + ' Author ' + data.quoteAuthor +' @Rafase282 goo.gl/2h0NHo';
  if (data.quoteAuthor === '') {
    data.quoteAuthor = 'Unknown';
  }
  $(".author-text").text('Author: ' + data.quoteAuthor);
  $(".twitter-share-button").attr("href", quot);
};
$(document).ready(function() {
  $.getJSON(url, getQuote, 'jsonp');

});
$("#quote").click(function() {
  $.getJSON(url, getQuote, 'jsonp');
});

Первоначально опубликовано на github.com.

В целом, я многому научился на этом вызове. Когда я пишу этот пост, у меня есть навыки, чтобы приложение выглядело намного лучше, но кое-что, что я сделал, это сохранил мой старый код, как это было, за исключением исправлений ошибок, чтобы показать мой прогресс по сравнению с предыдущими проектами.