Счастливого четверга! Это была довольно напряженная неделя для меня в стране кода и на моей основной работе, но я все это время получал массу удовольствия. Я получил задание от компании, которая работает с некоммерческими организациями, создать виджет-счетчик с помощью CSS, HTML и jQuery. Честно говоря, я мало что знал о jQuery — мой буткемп активно советовал не использовать его, и нам было запрещено делать это в наших проектах. Так что, помимо веселой практики CSS, я также изучил несколько новых методов. В конце концов, у меня было хорошее маленькое приложение-счетчик, которым я был очень доволен!

Как я это сделал

Когда я начал челлендж, я начал гуглить «сделать инкрементный термометр» или «сделать термометр для сбора средств» и тому подобное и получил множество чрезмерно сложных идей из Stack Overflow и других блогов. Мало того, что они были излишне сложными, они также были не совсем тем, что мне было нужно для этой задачи. Поэтому я подумал, что я мог бы использовать, чтобы сделать что-то подобное с нуля? Я мог бы создавать разделы определенных размеров и использовать Javascript для изменения этих разделов. И в двух словах именно это я и сделал, но с помощью всемогущей библиотеки Bootstrap.

Я посетил getbootstrap.com и увидел, что у них уже есть компонент индикатор прогресса. Это было не совсем то, что мне было нужно, но было достаточно близко, чтобы я мог модифицировать его под свои нужды.

Проблема была в CodePen, поэтому я не мог физически установить Bootstrap, как обычно, но CodePen принял CDN начальной загрузки, поэтому, согласно документам Bootstrap, я добавил этот код в верхнюю часть окна HTML в ручке:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

CodePen не был в восторге от этого, поскольку их HTML-ручка на самом деле предназначена только для представления «тела» HTML-документа, а не «заголовка», но это отпустило меня с небольшим предупреждением и без серьезных ошибок, поэтому я согласился. .

Оттуда я использовал компонент «карточка» Bootstrap, с которым я хорошо знаком по своим собственным проектам; который сформировал тело виджета. Я добавил заполнители для изображения карты, названия карты и тела карты, которые будут автоматически заполняться с помощью запросов на выборку JavaScript. А также добавил кнопку, которая будет использоваться для увеличения счетчика и индикатора выполнения, а также кнопку сброса. После всего этого мой термометр вступил в игру.

Чтобы добавить индикатор выполнения, я использовал следующий код:

<div class="progress">
 <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
</div></div>

Прямо из бутстрапа. Из коробки их индикатор выполнения был слишком высоким для моего использования. Поэтому я добавил пользовательский CSS, чтобы исправить это:

.progress{
height: .4em !important
}

Я использовал здесь флаг !important, чтобы переопределить собственное программирование Bootstrap (возможно, не всегда лучшая практика, но удобный инструмент, когда пользовательский CSS ведет себя не так, как должен).

Атрибут «width» контролировал длину внутреннего блока div, фактического индикатора выполнения. Итак, это был атрибут, который мне приходилось модифицировать с помощью JavaScript каждый раз, когда нажималась кнопка. Для этого я написал следующую функцию:

function updateWidget(){
  fetch('http://mybackendexample.com/1')    
   .then(r => r.json())
   .then(json => {
      $pb.css('width', json.amount + '%') 
      $tally.text(`$ ${json.amount}`)
    })
   .catch(function(error) {
    console.log('error');
  });
 }

Здесь важно отметить одну важную вещь: изначально я поместил большую часть вышеприведенного кода в другую написанную мной функцию — запрос на выборку/исправление, который фактически обновляет серверную часть. Это привело к очень странному поведению просто потому, что я написал эту функцию как блок синхронного кода — один щелчок ничего не делал для CSS, но обновлял бэкенд. Два щелчка покажут правильный прогресс в CSS. Это было исправлено путем написания вышеуказанной функции — get fetch — и использования ее в качестве обратного вызова в функции с запросом исправления. Таким образом, я мог быть уверен, что виджет обновляется самыми последними данными из бэкенда. Всегда важно помнить об асинхронных проблемах при использовании fetch!

Таким образом, при щелчке первоначальный запрос на исправление был отправлен на серверную часть и выполнил необходимую работу. Затем моя программа запустила описанную выше функцию updateWidget(), которая выполнила работу по визуальному обновлению виджета — отображаемой суммы (переменная $tally) и индикатора выполнения (переменная $pb). Индикатор выполнения был изменен с помощью jQuery (хорошо, это была мешанина из vanilla JS и jQuery — за один уик-энд я могу научиться только так многому!), чтобы увеличить его ширину на один процент за клик (количество в бэкэнде). , плюс 1%), а фактическая сумма была увеличена просто за счет внутренних данных, которые будут обновлены запросом на исправление. Мой конечный результат выглядел примерно так:

Я подключил его к рудиментарному бэкэнду Rails API и — бац! Родился мой собственный виджет термометра для сбора средств.

Вывод

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