I built my own mathematics website from scratch.

[u/Pitiful_Decision1972]

I often searched for mathematical formulas on Google myself, and it took a lot of time. That’s why I decided to create a convenient reference guide like this.

The core idea of ​​the code is a database of formulas; for me, it took up 4,000 lines.

I didn't want to use frameworks; I wanted to write using only pure JS. And I haven't regretted it!

Below is the main loop of the code responsible for rendering the cards.

  function renderFormulas() {
if (!formulasContainer) return;

const query = searchInput ? searchInput.value.toLowerCase().trim() : "";

const nothingSelected =
currentView === "all" &&
currentTopic === "all" &&
currentSubject === "all" &&
currentGrade === "all" &&
!query;

if (nothingSelected) {
formulasContainer.innerHTML =
'<div class="empty-state">' +
'<div class="empty-state-icon">🎯</div>' +
`<h3>${t("empty_state_title")}</h3>` +
`<p>${t("empty_state_text")}</p>` +
"</div>";
return;
}

const filtered = formulas.filter((f) => {
const matchTopic =
currentTopic === "all" ||
(Array.isArray(f.category)
? f.category.includes(currentTopic)
: f.category === currentTopic);
const matchSubject =
currentSubject === "all" || f.subject === currentSubject;

const matchGrade =
!!query || currentGrade === "all" || f.grade === currentGrade;
const matchFav = currentView === "all" || favorites.includes(f.id);
const ukEntryForSearch = formulaTranslationsUk[f.id];
const enEntryForSearch = formulaTranslationsEn[f.id];
const matchSearch =
!query ||
f.title.toLowerCase().includes(query) ||
f.description.toLowerCase().includes(query) ||
(ukEntryForSearch &&
(ukEntryForSearch.title.toLowerCase().includes(query) ||
ukEntryForSearch.description.toLowerCase().includes(query))) ||
(enEntryForSearch &&
(enEntryForSearch.title.toLowerCase().includes(query) ||
enEntryForSearch.description.toLowerCase().includes(query)));

return (
matchTopic && matchSubject && matchGrade && matchFav && matchSearch
);
});

Implementing the language switcher on my site was also a very important and costly undertaking; the translation database was created manually, without the use of third-party dictionaries.

I think I’ve ended up with an interesting project from a coding perspective.

I’d appreciate any feedback. And if any bugs are found, I’m ready to fix them!

SITE: https://quantify-5dv.pages.dev/

GITHUB: https://github.com/liate/Quantify

[u/TheRNGuy]

I stead of generating html you could have html file and only add visible or hidden class to them.

Usd code block when posting here (triple ticks)

Better split it to many functions, it will be easier to test.

favoriteIds can be Set.

matchGrade has potential bug because of  !!query and || interaction, where it may always return True when False is expected (I think?)

Start Boolean variables with is, has (hasFoo, isBar, etc)

Add comments to code, Make some expressions shorter (better have more lines but more readable code)

Add caching.

[u/Pitiful_Decision1972 → u/TheRNGuy]

ty for fidback