Are you looking to become a more effective developer by improving your fundamental math skills without reaching for NASA-level calculations? Look no further!

At Scrimba, we're are really excited to announce our new course 'Practical Math for Front-End Developers', which offers exactly that. In the course we build 3 projects:

1. A Shopping Cart, where we generate a list of products, calculate the total price of the products and apply a tax rate.
2. A Weekly Schedule, where we introduce the Date object, perform layout manipulation and learn about the reduce function.
3. A Monthly Expense Sheet, which brings together everything we've learned and gives us a few handy tips and tricks.

This course is brought to you by Ryan Gonyon, who has his own Twitch and YouTube channels.

With 5 years of Web Dev experience, a B.S. in Computer Science and experience tutoring K-12 and University-level math, Ryan is the perfect tutor for this course. Head over to Scrimba to see what he has in store!

App Layout and CSS calc() Introduction

Click the image to access the course.

In this screencast, Ryan shows us how to build the outer shell of our applications by correctly sizing the <header>, <footer> and <main> tags with CSS variables and the calc() function.

We use overflow-y: auto; to ensure that the contents of the <main> tag do not extend over the footer.

* {
    --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);
}

The roll() Function

At some point during your front-end journey, it will be useful to generate random data to test your layouts. The roll() function does exactly that. This cast also shows us how to use JavaScript's Math module and random() function.

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

Shopping Cart - Generate Data / Build Layout

Click the image to access the course.

Now we start building our first project, the Shopping Cart, using our newly written roll() function to generate prices. This shows us how much time we save using our new knowledge!

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),
    };
});

Shopping Cart - Calculate Total / Apply Tax Rate

In this screencast, we learn how to use .reduce to calculate the total price of the cart

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

We also see how to use roll() to generate a random tax rate and apply it.

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

Along the way, we practise parsing float values and rounding them to a specified number after a decimal point.

Shopping Cart (Bonus Challenge) - Weights

As a bonus challenge in this cast, we randomly generate the weight of each item in our shopping cart and calculate the total weight at the checkout. In the real world, this could be used to estimate the shipping cost for the buyer.

No spoilers here, so if you want to see the solution you'll have to click through to the course. 😜

A Brief Exploration of CSS Shapes

Click the image to access the course.

In this cast, we learn how to create a square, a circle, a diamond and a triangle with CSS shapes.

.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;
}

Weekly Schedule - Using Date() to Build Week / Generating Tasks

In this cast, we start work on our Weekly Schedule app. First up, we learn about JavaScript's Date object.

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

Next, we look at using the roll() function to test the layout and produce a list of tasks. Take a look at the course to see how it works

Weekly Schedule - Build Layout / Display Data

Click the image to access the course.

In this cast, Ryan shows us how to use the calc() function to display the data generated in the previous cast.

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

We also learn how to cross out completed tasks (click through to find out how.) The result is a clean, functional app that we can use in everyday life.

Monthly Expense Sheet - Generate and Display Month

Click the image to access the course.

Next, use the concepts from the previous casts to build something more complex - our expenses tracker. In this project we generate data, display months and draw up a grid.

function displayMonth(month) {
    // <div class="day">3</div>
    let monthHtml = month.reduce(function (accumulator, day) {
        return accumulator + `<div class="day">${day.date.getDate()}</div>`;
    }, "");
    document.getElementById("MonthlyExpenses").innerHTML = monthHtml;
}

Monthly Expense Sheet - Generate, Display, and Track Expenses

Click the image to access the course.

In the final cast, we perform budget calculations by writing functions to track our expenses, rent and utility bills. We then display the expenditures alongside the remaining available budget.

function displayMonth(month, budget, netValue) {
    let monthHtml =
        `<div class="monthly-summary">
        Budget: \$${budget.toFixed(2)} | Net Value: \$${netValue.toFixed(2)}
    </div>` +
        month.reduce(function (accumulator, day) {
            return accumulator + `<div class="day">${day.date.getDate()}</div>`;
        }, "");
    document.getElementById("MonthlyExpenses").innerHTML = monthHtml;
}

Conclusion

Well done for finishing this course, I really hope you have learned some useful tips and tricks that you can apply in your future coding adventures!

Happy learning ;)