Anna's calorie meter on Makeine's website was such a fun gag and I wanted to build it.
First published on 2025-02-04. Last updated on 2025-02-04.
Toooooo Many Losing Heroines (負けヒロインが多すぎる！, Make Heroine ga Oosugiru!) was the anime adaptation of the light novel series of the same name
that aired back in July 2024. It was one of the most popular slice of life anime series of 2024 and in my opinion has an amazing official site. It features
a lot of characters going through the struggles of romance in a high school in Toyohashi. Anna Yanami is one of these losing heroines and one of the main
focus of the show. She also loves to eat so much so that the production team decided to create a calorie meter for all the food she ate during the show.
They even went so far as to make the meter itself highly interactive with animations. You can select the episode and see the calories Anna ate during that
episode. The list of food she ate during the episode is also revealed. I'll just focus on the calorie meter for now but there is so much to gush over
their website. In this article, I will try my best to replicate the calorie meter animation from the official website.
For this tutorial, I will be using Vanilla JS because I wanted to be as agnostic as possible for easy adaptability to JS frameworks.
We will be using Vite CLI to create the boilerplate for our project. I chose to use Vite because it is relatively easy to set up and deployable to cloud platforms.
I will provide the code and a CodeSandbox link for you to experiment at the end.
The Vite CLI does not automatically install the dependencies. This gives us the freedom to choose the package manager we want to use for our project.
I used the vanilla-ts template for this tutorial. But, it is easy to transfer to JS since
I am going to use implicit typing for our Typescript code. Only one line of code defined types.
After running the above command, you should see the output below. This depends on the package manager you chose. For this tutorial, I used pnpm.
Then, you can follow the commands to install the needed dependencies. Then, you can run the project to make sure everything is working as
expected.
Done. Now run: cd makeine-calorie-meter pnpm install pnpm run dev
The webpage should look this this after running the above commands.
[1] Vite + Typescript boilerplate
From this, we can start removing the boilerplace code so we can properly start with the project.
After creating the project, the file structure should look like this:
makeine-calorie-meter
public
vite.svg
src
counter.ts
main.ts
style.css
typescript.svg
vite-env.d.ts
.gitignore
index.html
package.json
tsconfig.json
After removing the boilerplate code, the file structure should look like this:
makeine-calorie-meter
public
src
main.ts
style.css
vite-env.d.ts
.gitignore
index.html
package.json
tsconfig.json
We will remove all the content of main.ts except the CSS import.
The entry point of the project is main.ts, which will initially contains the following code:
src/main.ts
import './style.css';// We will remove everything under this line.import typescriptLogo from './typescript.svg';import viteLogo from '/vite.svg';import { setupCounter } from './counter.ts';document.querySelector<HTMLDivElement>('#app')!.innerHTML = ` <div> <a href="https://vite.dev" target="_blank"> <img src="${viteLogo}" class="logo" alt="Vite logo" /> </a> <a href="https://www.typescriptlang.org/" target="_blank"> <img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" /> </a> <h1>Vite + TypeScript</h1> <div class="card"> <button id="counter" type="button"></button> </div> <p class="read-the-docs"> Click on the Vite and TypeScript logos to learn more </p> </div>`;setupCounter(document.querySelector<HTMLButtonElement>('#counter')!);
That's it for the set-up! Let's us start building the calorie meter.
Lucky for us, the fonts used by Makeine's calorie meter are open source from Google Fonts. We will be using Quantico
as the font. For the Japanese characters, we will be using Noto Sans JP. Let us import the
font inside the <head> tag.
<div id="calorie_container"> is where we will put the calorie meter.
<div class="no">最終話まで</div> is the episode number, shown when an episode is selected.
<div class="kcal with-comma"> is where we will contain the total number of calories this is where the meter animation will take place
while the with-comma class is used to add a comma after the thousands digit. This is where we will contain each digit of Anna Yanami's
calories per episode or in the whole run of the anime.
<div class="unit">kcal</div> is self-explanatory.
We should also have the ability to see the number of calories Anna consumed per episode and also the Anna's cumulative calories for the entire show.
For now, let's add the buttons to allow episode selection for the calorie meter.
Doesn't look great? Now, let's spray some paint! We will be using a lot of nested CSS here. This is different from using
CSS preprocessors such as LESS or SASS in that it is read by the browser instead of being pre-compiled. If you are new to
nesting CSS, here is the documentation provided by mdn Using CSS nesting.
After applying the styles for the meter, it should look like this.
[2] Meter styles without the episode selection
src/styles.css
. . ..unit { width: 100%; display: flex; justify-content: end; align-items: center; font-size: 24px; font-weight: 700; font-style: normal; letter-spacing: 0; margin-top: 4px; }}/* Container for our episode selection#episode_select_list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; } /* Style for each episode selection buttonbutton.select_item { display: block; width: 100%; background: var(--color-white); border: 1.5px solid var(--color-orange); color: var(--color-orange); padding: 7px 10px; border-radius: 20rem; font-family: "Noto Sans JP", sans-serif; font-weight: 600; font-size: 17px; cursor: pointer; /* Hover styles for each button &:hover { background-color: var(--color-orange); color: var(--color-white); } } /* Different styles for the total button#episode_total { width: 360px; margin: 20px auto 0; margin-bottom: 52px; } /* Adds transitions to each button when media allows hover and fine pointer events.@media (hover: hover) and (pointer: fine) { button.select_item { transition: color 0.4s var(--ease-out), background-color 0.4s var(--ease-out); } }
After these changes, the calorie meter should look like this. I think we are done with the styles for the calorie meter. Now, it is time to start making our calorie meter interactive!
Let's start by installing GSAP, a powerful animation library for Javascript. It is also framework agnostic so it can be used with React, Vue and other Javascript frameworks.
We can install GSAP using any package manager.
Before adding our animations, we need to get Anna's calorie data from the official calorie meter.
Episode
JP
kcal
1
第1話
5043
2
第2話
4938
3
第3話
4420
4
第4話
1424
5
第5話
46145
6
第6話
4303
7
第7話
327
8
第8話
2311
9
第9話
1655
10
第10話
1850
11
第11話
6217
Finale
最終話
7185
Total
合計
85818
We add the data to the src/main.ts file by creating a variable called meterData and setting it to an array of objects. The cap
is the caption for each episode selected with the caption followed by の総摂取カロリー (total calorie intake) and the total is
the number of calories. Each index of the array corresponds to an episode except the total, which is assigned to the zeroth index.
Time to initialize the meter by adding the following code to the src/main.ts file. You can add a load document event depending
on where you called the script tag.
src/main.ts
import "./style.css";import gsap from "gsap"; // Only if you use modulesconst meterData = [ . . .];function episodeSelect(episodeNumber: number) { const meter = meterData[episodeNumber]; console.log("meterData", meter); } function initializeMeter() { episodeSelect(0); const buttons = document.querySelectorAll<HTMLButtonElement>("button.select_item"); buttons.forEach((button) => { button.addEventListener("click", () => { const episodeNumber = parseInt(button.dataset.episodenumber ?? "0"); episodeSelect(episodeNumber); }); }); } initializeMeter();
We add event listeners to each button with the class select_item by using addEventListener. We will assign data attribute
data-episodenumber to each episode button. Currently, we have do not have data attributes assigned to the button elements so
let us do that. We will also add it to the total button. Now, every time we click on an episode button, we will use the episodenumber
to index the meterData array and get the corresponding calories.
Next stop, we will change the episodeSelect function to show the calorie data for the selected episode. We will clear each digit element's
text content. We first set the caption per episode then try to split the digits and set them to the appropriate number element. We will also
add a with-comma class to the #calorie_container .kcal element if the calorie value is greater than 1000 kcal.
src/main.ts
import "./style.css";import gsap from "gsap"; // Only if you use modulesconst meterData = [ . . .];function episodeSelect(episodeNumber: number) { const meter = meterData[episodeNumber]; /** Initial state before running animation */ document.querySelector("#calorie_container .cap .no")!.innerHTML = meter.cap; const numbers = document.querySelectorAll(".kcal .number"); numbers.forEach((number) => { number.innerHTML = ""; }); /** Add comma when at least 1000 calories, remove comma when less than 1000 calories before running animation */ if (meter.kcal < 1000) { document.querySelector("#calorie_container .kcal")!.classList.remove("with-comma"); } else { document.querySelector("#calorie_container .kcal")!.classList.add("with-comma"); } /** Separate each digit of the number into an array for each animation frame */ let num = meter.kcal; let digits = []; let numOfDigits = 0; while (num != 0) { digits.unshift(Math.floor(num % 10)); num = Math.trunc(num / 10); numOfDigits++; } /** Pad the array with zeros if the number of digits is less than 5 */ let padDigits = 5 - numOfDigits; while (padDigits > 0) { digits.unshift(0); padDigits--; } /** Set the number of digits to the corresponding element */ const digitElems = document.querySelectorAll("#calorie_container .kcal .number"); for (let digit = 0; digit < 5; digit++) { digitElems[digit].innerHTML = meter.kcal < Math.pow(10, 4 - digit) ? "" : digits[digit].toFixed(0); } }function initializeMeter() { episodeSelect(0); const buttons = document.querySelectorAll<HTMLButtonElement>("button.select_item"); buttons.forEach((button) => { button.addEventListener("click", () => { const episodeNumber = parseInt(button.dataset.episodenumber ?? "0"); episodeSelect(episodeNumber); }); });}initializeMeter();
As of now, there is no animation for the calorie meter. However, we already have the needed code. We just need to apply the animations
using the gsap.to() API. The documentation for gsap.to() shows the
API being used to animate elements by passing selectors in the first argument and an object containing target values. However, GSAP can
animate any property of any object so the sky is the limit. Passing selectors is just a convenience for starting animations quickly for
DOM objects.
Before we animate the calorie meter, save the content of episodeSelect somewhere else because we will clear the content of episodeSelect
function. We need to provide a few things to make our animation work. First, we need to provide the object that GSAP will animate. We will
pass the target object as the first argument to the gsap.to() function called calorieMeter, which has an initial kcal of 0. kcal inside
the object is what GSAP will animate. We also need to define the target kcal value in the second argument as well as other special properties for
our animation - such as easing, duration and callback properties. In our case, we need to provide the following:
kcal, which is the target kcal value from our meterData
ease, which will control the rate of change of the animation
duration, duration of the animation in seconds. In our case, it will depend on the value of our kcal target
onStart to initialize the state of our DOM elements before the animation starts
onUpdate to update the DOM elements, particularly the digits
I think it is time to go straight to the code and then finish episodeSelect.
src/main.ts
function episodeSelect(episodeNumber: number) { const meter = meterData[episodeNumber]; const calorieMeter = { kcal: 0 }; gsap.to(calorieMeter, { /* The target value for the animation */ kcal: meter.kcal, ease: "power1.inOut", /* We want the duration to be longer for larger kcal values. Feel free to adjust this value to your liking. */ duration: (meter.kcal % 10000) / 2000, onStart: () => { /** Initial state before running animation */ document.querySelector("#calorie_container .cap .no")!.innerHTML = meter.cap; const numbers = document.querySelectorAll(".kcal .number"); numbers.forEach((number) => { number.innerHTML = ""; }); /** Add comma when at least 1000 calories, remove comma when less than 1000 calories before running animation */ if (meter.kcal < 1000) { document.querySelector("#calorie_container .kcal")!.classList.remove("with-comma"); } else { document.querySelector("#calorie_container .kcal")!.classList.add("with-comma"); } }, onUpdate: () => { /** Separate each digit of the number into an array for each animation frame */ let num = calorieMeter.kcal; let digits = []; let numOfDigits = 0; while (num != 0) { digits.unshift(Math.floor(num % 10)); num = Math.trunc(num / 10); numOfDigits++; } /** Pad the array with zeros if the number of digits is less than 5 */ let padDigits = 5 - numOfDigits; while (padDigits > 0) { digits.unshift(0); padDigits--; } /** Set the number of digits to the corresponding element */ const digitElems = document.querySelectorAll("#calorie_container .kcal .number"); for (let digit = 0; digit < 5; digit++) { digitElems[digit].innerHTML = calorieMeter.kcal < Math.pow(10, 4 - digit) ? "" : digits[digit].toFixed(0); } } }); }
We are finally done with the animations and the calorie meter! Feel free to modify the animations and the styles to your liking and even replicate the
rest of the page on your own. I have provided a CodeSandbox link for you to
experiment. You can also check out the code for on my GitHub here: makeine-calorie-meter.
This was actually a fun mini-project to make since it combines anime and good web design, which are some of my favorite things
in the world. The code under the hood is also pretty elegant as far as anime websites go at least. It is honestly rare for anime websites to be more than simple
static sites with a few animations and little interactivity and it is clear the people behind the website have put in the work. Also, watch the show on
your favorite anime streaming service! Thank you for reading!
Ambi has a software developer day job, who started to watch anime at around 10 years old. He has since ventured into many anime-adjacent hobbies over the years. He is also working on some projects, mostly for fun and boredom with a lot of distractions along the way.
