Рубрики
Без рубрики

Вот бесплатный курс, чтобы помочь разработчикам переднего конца учиться Математика

Вы хотите стать более эффективным разработчиком, улучшая ваши фундаментальные математические навыки, не достигая расчетов уровня NASA? Не посмотрите дальше! В Scrimba мы действительно рады объявить о нашей новой курсовой практической математике для передних разработчиков, которые именно предлагают именно это. В курсе мы строим 3 проекта:

Автор оригинала: Per Harald Borgen.

Вы хотите стать более эффективным разработчиком, улучшая ваши фундаментальные математические навыки, не достигая расчетов уровня NASA? Не посмотрите дальше!

В Scrimba мы действительно рады объявить о нашем новом курсе «Практическая математика для интерфейсных разработчиков» Что именно предлагает именно это. В курсе мы строим 3 проекта:

  1. Корзина, где мы генерируем список продуктов, рассчитайте общую цену продуктов и применяем налоговую ставку.
  2. Еженедельное расписание, где мы представляем Дата Объект, выполнять манипуляцию макета и узнать о Уменьшить функция.
  3. Ежемесячный расход, который объединяет все, что мы узнали и дали нам несколько удобных советов и трюков.

Этот курс доставлен вам Райаном Гононом, у которого есть свой Подергивание и YouTube каналы.

С 5 лет опыта Web Dev, B.S. В информатике, а также опыт обучения K-12 и Университет-уровень Math, Ryan – идеальный репетитор на этот курс. Перейти к Scrimba чтобы увидеть, что он в магазине!

Нажмите на изображение, чтобы получить доступ к курсу.

На этом скринкасте Райан показывает нам, как построить внешнюю оболочку наших приложений, правильно размером <заголовок> ,

и <Главная> Теги с переменными CSS и Calc () функция.

Мы используем Overflow-Y: Auto ; Чтобы обеспечить, чтобы содержание <Главная> Тег не простирается над нижним колонтитулом.

* {
	--headerFontSize: 2rem;
	--headerPadding: 0.5rem;
	--footerFontSize: 1rem;
	--footerPadding: 1rem;
}

header {
	font-size: var(--headerFontSize);
	padding: var(--headerPadding);
}

main {
	font-size: 1.5rem;
	height: calc(
		100vh - var(--headerFontSize) - (2 * var(--headerPadding)) - var(
				--footerFontSize
			) - (2 * var(--footerPadding))
	);
	overflow-y: auto;
}

footer {
	font-size: var(--footerFontSize);
	padding: var(--footerPadding);
}

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

function roll(min, max, floatFlag) {
	let r = Math.random() * (max - min) + min;
	return floatFlag ? r : Math.floor(r);
}

Нажмите на изображение, чтобы получить доступ к курсу.

Теперь мы начинаем строить наш первый проект, корзину, используя нашу недавно написанную Roll () Функция для создания цен. Это показывает нам, сколько времени мы сохраняем, используя наши новые знания!

let products = [...Array(5)].map((_, i) => {
	return {
		index: i,
		title: possibleProducts[roll(0, possibleProducts.length)],
		price: roll(1, 10, 1).toFixed(2),
		count: roll(1, 6),
	};
});

На этом скринкасте мы узнаем, как использовать .Расмейте рассчитать общую цену тележки

let cartTotal = products
	.reduce(function (accumulator, product) {
		console.log(accumulator, product);
		return accumulator + parseFloat(product.price) * product.count;
	}, 0)
	.toFixed(2);

Мы также видим, как использовать Roll () генерировать случайную налоговую ставку и применить ее.

let taxRate = roll(5, 9, 1).toFixed(1);

По пути мы практикуем разбирающиеся значения поплавка и округление их до указанного числа после десятичной точки.

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

Здесь нет спойлеров, поэтому, если вы хотите увидеть решение, вам придется нажать через к курсу. ?

Нажмите на изображение, чтобы получить доступ к курсу.

В этом отлив мы узнаем, как создать квадрат, круг, алмаз и треугольник с фигурами CSS.

.triangle {
	height: 0;
	width: 0;
	border-left: 5.5rem solid transparent;
	border-right: 5.5rem solid transparent;
	border-bottom: 5.5rem solid black;
	margin: 1rem;
	position: relative;
}

.triangle:after {
	content: "";
	position: absolute;
	height: 0;
	width: 0;
	border-left: 4.5rem solid transparent;
	border-right: 4.5rem solid transparent;
	border-bottom: 4.5rem solid red;
	left: -4.5rem;
	top: 0.6rem;
}

В этом отлив мы начинаем работать в нашем еженедельном приложении расписания. Во-первых, мы узнаем о JavaScript’s Дата объект.

function getNextDay(day) {
	let nextDay = new Date(day);
	nextDay.setDate(day.getDate() + 1);
	return nextDay;
}

Далее мы смотрим на использование Roll () Функция для проверки макета и создавать список задач. Посмотрите На курсе чтобы увидеть, как это работает

Нажмите на изображение, чтобы получить доступ к курсу.

В этом актеры Райан показывает нам, как использовать Calc () Функция для отображения данных, создаваемых в предыдущем литье.

--mainHeight: calc(
	100vh - var(--headerFontSize) - (2 * var(--headerPadding)) - var(
			--footerFontSize
		) - (2 * var(--footerPadding))
);

Мы также узнаем, как вычеркивать выполненные задачи ( Нажмите через , чтобы узнать, как.) Результатом является чистое функциональное приложение, которое мы можем использовать в повседневной жизни.

Нажмите на изображение, чтобы получить доступ к курсу.

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

function displayMonth(month) {
	// 
3

	let monthHtml = month.reduce(function (accumulator, day) {
		return accumulator + `
${day.date.getDate()}
`;
	}, "");
	document.getElementById("MonthlyExpenses").innerHTML = monthHtml;
}

Нажмите на изображение, чтобы получить доступ к курсу.

В финальном лиделении мы выполняем расчеты бюджета, написав функции для отслеживания наших расходов, арендных и коммунальных услуг. Затем мы демонстрируем расходы наряду с оставшимся доступным бюджетом.

function displayMonth(month, budget, netValue) {
	let monthHtml =
		`

        Budget: \$${budget.toFixed(2)} | Net Value: \$${netValue.toFixed(2)}
    
` +
		month.reduce(function (accumulator, day) {
			return accumulator + `
${day.date.getDate()}
`;
		}, "");
	document.getElementById("MonthlyExpenses").innerHTML = monthHtml;
}

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

Счастливое обучение;)

Оригинал: “https://www.freecodecamp.org/news/want-to-learn-practical-math-for-front-end-developers-heres-our-free-11-part-course-by-radical-coder/”

Читайте ещё по теме: