Цель:
Создайте приложение 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.
В целом, я многому научился на этом вызове. Когда я пишу этот пост, у меня есть навыки, чтобы приложение выглядело намного лучше, но кое-что, что я сделал, это сохранил мой старый код, как это было, за исключением исправлений ошибок, чтобы показать мой прогресс по сравнению с предыдущими проектами.