Техническое руководство по HTML/CSS/JAVASCRIPT, используемому для lifeTrack.

Если вас интересует сам код, загляните на мой GitHub.

HTML/CSS

Быстрая прогулка по HTML, CSS.

lifeTrack предназначен в первую очередь для смартфонов, поэтому я использовал следующее окно просмотра:

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0;”>

В целом, body состоит из набора контейнеров ‹div›, которые упорядочивают содержимое в виде визуальных карточек. Вот пример моего базового HTML и CSS для карточек, который изменяется для каждой карточки:

HTML: 
<div id="info">
  <h2 id="subtitles">My Life</h2>
  <ul id="myInfo">
  </ul>
</div>
CSS:
#info {
width: 70%;
margin: auto;
border: 1px solid #333;
background: rgba(255,255,255,0.75);
padding: 15px 20px 18px 18px;
border-radius: 10px;
box-shadow: 2px 5px 5px rgb(160, 159, 159);
}

Два из ‹div› используют более сложный HTML/CSS.

  1. Первый ‹div› содержит ‹форму›, содержащую главную фишку lifeTrack: калькулятор, который переводит ваш годовой возраст в месяцы. Он использует ‹input type=”date” . . . ›с ограниченным диапазоном дат,чтобы пользователь мог легко вводить календарные даты. Кроме того, ‹input type=”submit” . . . ›активирует функцию калькулятора (см. JavaScript ниже).
  2. Второй использует ‹input type="textarea"…›, чтобы предложить пользователю пустое текстовое поле, чтобы он мог заполнить его собственными целями и идеями на месяц, своего рода я -планировщик. Это одна из рефлексивных, самомотивационных функций lifeTrack, и ее максимальная длина составляет 180 символов, чтобы пользователь оставался сосредоточенным и лаконичным.

Кроме того, HTML является голым, чтобы заложить основу, на которой построен Javascript.

ЯВАСКРИПТ

Javascript для lifeTrack начинается с eventListener, DOMContentLoaded, который____.

Внутри него выполняется функция, которая развертывает еще два прослушивателя событий, соответствующих 1. ‹форме›, которая нацелена на два входа функции расчета месяца (todayDate и birthDate ) и 2. сообщение ‹msg›, предназначенное для функции самопланирования. Оба этих eventListener запускают соответствующие функции, подробно описанные ниже.

Первая функция — monthCalc() — принимает два параметра/аргумента: todayDate и birthDate. Он запускает очень простую математику преобразования. См. ниже:

function monthCalc(todayDate, birthDate){
  //the date inputs are formatted: YYYY-DD-MM
  //first they sliced into the appropriate data, and given their own  
    variable.
const todayYear = todayDate.slice(0, 4)
const todayMonth = todayDate.slice(5, 7)
const birthYear = birthDate.slice(0, 4)
const birthMonth = birthDate.slice(5,7)
  //then the conversion calculator, which converts their lifetime 
    into month slots:
monthsByYear = (todayYear — birthYear) * 12
monthsByYearAdjust = monthsByYear — birthMonth
monthAge = monthsByYearAdjust + parseInt(todayMonth)
  //then and added piece of data, which offers the percentage of  
    their time relative to 1000 months, an average lifespan:
percentage = monthAge / 10
  //finally the values are appended to the DOM in plain English.
let p = document.createElement(‘p’)
p.textContent = “You have lived “ + monthAge + “ months. That is “ + percentage + “% of your 1000 months here on Earth.”
document.querySelector(‘#myInfo’).appendChild(p)
}

Достаточно просто.

Следующая функция является асинхронной и извлекает данные с локального сервера, связанные с файлом JSON, загруженным из Центра контроля заболеваний. Данные предлагают ожидаемую продолжительность жизни в США в годах, по штатам, как для мужчин, так и для женщин, а также «общее» среднее значение между ними.

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

async function fetchData() {
//first, fetches the data from the JSON database, and converts it to a readable object format in Javascript
const response = await fetch(‘/db.json’);
const lifeExpt = await response.json();
return lifeExpt
}
//then accesses the particular parent folder (data) and splices the first 51 indexes (corresponding to the states and their total life expectancy data) from the list of 199 indexes (corresponding to data divided by sex).
fetchData().then(lifeExpt => {
const data = lifeExpt.data.splice(0,51) 
data.map(datum => {
//then creates two variables for the two specific data points I want to use. averageMonths converts the year to months.
const averageMonths = Math.ceil(datum[10] * 12) 
const state = datum[8]
//finally, attaches the data to the Dom, in the form of a list. (At the time of writing this, the list is currently unordered). 
const ul = document.querySelector(‘#specDatum’)
const li = document.createElement(‘li’)
li.textContent = state + “: “ + averageMonths + “ months”
ul.append(li)
})
})

Последние две возможности lifeTrack — это простые функции.

Одна функция — activity() — использует API, который генерирует случайное предложение о том, что делать. Это минимальный JSON, содержащий только несколько индексов. Посмотрите это здесь.

После извлечения API по его URL-адресу и последующего преобразования из JSON в объект Javascript функция просто считывает первый индекс [0], и затем добавляет его в DOM.

Последняя функция — myMsg() — использует текст, отправленный из EventListener, который нацелен на пустой ‹input type=textarea› в HTML. После того, как пользователь нажмет «Отправить», он берет значение текстового поля, преобразует его в свою собственную переменную, а затем добавляет его в DOM, чтобы пользователь мог сохранить свои планы.

Для получения подробной информации об этих функциях и коде в целом посетите мой GitHub!