I started the css and decided to keep it pretty simple instead of trying to make another “ai” looking site because thats basically what everyone complained about.

I went with a more tool/workshop type design with mostly square borders, a basic colour palette and some small grid details inspired by a printer bed.

The calculator is split into the inputs on the left and the live price on the right. I made the result sticky on desktop so you can always see the price while changing stuff.

I also made sure large prices wrap and scale down instead of going outside the box because someone found that problem while reviewing it.

I finished styling:

• Light and dark mode
• All the calculator inputs
• Cost breakdown bars
• Calculation explanation
• Saved calculation history
• Buttons and error states
• Tablet and phone layouts
• The footer and about section

I was going to use GSAP, anime.js, motion and some of them React animation sites but then realised they all basically do the same thing and React Spring would need me to rebuild everything in React.

I just used Motion for a couple small animations when the page loads, when the result changes and when a button is clicked. I didnt want to go crazy with it because its meant to be a calculator not some massive animated website.

I also added reduced motion support so the animations turn off if someone has that setting enabled.

Next

• test every input and currency
• check saving and loading calculations
• test it properly on my phone
• fix anything broken
• update the readme and ship it again

I finished up the html with a history section and a short about section.

Then i started the javascript, this time instead of embeding the default values into the html i just put them into the js, i figure this would make it easier and cleaner.

Once i had all the variables set, i built the storage system.
Im just using local storage because i think a database is a bit over kill unless i add accounts…

Then i setup the currency selection functions, theme functions and all the helpers.
I set the default currency as euros as thats what i would be using when i use this, i also set dark mode as the default because that last thing you want at 3 am is a flashbang.

Then I setup all the calculations and the default values.

Next

• test everything
• write css
• imma try to use things like skipper ui or those other sites with them animations

Ok so everyone says this is ai, idk why tbh but i decided i just fully redesign/build.
I was gonna do more logs after shipping anyway to add some suggested features but i didnt want to redesign 🥀.
Anyway ive got the first half of the html complete, the features i added:

• Currency selector (i just google top 10 currencies and add those)
• Dark mode
• save calculation and copy results buttons

I changed the “calculator” from being a div into an actual form element, this is suppose to be better for lighthouse score as ive heard.

Next

• Imma finish the full html
• then write js
• test that all works
• write css until i get too tired or complete

PrintPrice

Journal17/8/2026 - Built the full calculator

Total Time

2h 55m

I made PrintPrice, which is a calculator for finding the real cost of a 3D print.

I wanted to make it because only checking the filament price leaves out electricity, printer wear, failed prints and the time spent preparing everything. I also wanted it to give a suggested selling price instead of only showing the production cost.

I started by making the HTML structure. I split the calculator into three parts: information about the print, printer and material costs, and the final results.

For the print information, I added filament weight, print hours, minutes and quantity. I then added spool price, spool weight, printer wattage, electricity price, printer price and expected lifetime. I also included labour time, hourly rate, failed print allowance and profit markup.

After finishing the HTML, I started the CSS. I used a light cream background, orange accent colour and a dark blue results panel. I made a small logo and a layered shape using only CSS because I wanted it to look related to 3D printing without needing any images.

The calculator had a lot of inputs, so the first layout looked crowded. Some labels, inputs and units were sitting too close together. I fixed this by putting every input inside a bordered box and placing the units on the right side. I also grouped the inputs into material, printer and power, and time and risk.

I made the main calculator use a grid, with the inputs on the left and the results on the right. The results section shows the suggested price, production cost, estimated profit and a breakdown of every cost. I also added coloured bars to show how much each part adds to the total.

I added media queries so the results move underneath the inputs on smaller screens. The input grids also change to one or two columns so they do not become too narrow.

After the design was mostly finished, I started the JavaScript. I made it calculate filament, electricity, machine wear, labour and failed print costs. These are added together before the profit markup is applied.

I added event listeners to every input so the results update immediately without needing a calculate button. I also formatted the results as euro prices.

The biggest problem I had was that every result stayed at €0.00. At first I thought one of the formulas was wrong, but the real problem was that the JavaScript expected a profit markup input and I had accidentally left it out of the HTML.

Because it could not find that input, the JavaScript stopped before running the calculations. I added the missing input and the calculator started working properly.

I then added local storage so the save button remembers the current settings. I also added a reset button that clears the saved settings and returns everything to the defaults.

Finally, I tested different weights, print times, quantities and profit markups. I checked that the totals updated, the cost bars changed, saved settings stayed after refreshing and the reset button worked.

The default settings give a suggested price of €7.88, with a production cost of €6.06 and an estimated profit of €1.82.I am happy with how it turned out, especially since I made the whole project in one go. It is simple, but it solves an actual problem and does not need an account, database or any setup.