Pizza Calculator Website built with Wappler

I made this website in Wappler and wanted to share it / get feedback.

It is a calculator for people that make pizzas as a hobby or professionally.

Notable Features

  • When you change the number of Flours being used, new fields are added to the calculator and new rows are added to the table on the right.
  • If you put a custom name for the flours or ingredients - it updates in the table rows accordingly.
  • The total field is totaling the entire percentage of flours from all flour fields. If it is less or greater than 100%, it warns the user.


@norcoscia is a member of a large group of pizza enthusiasts and wanted to create a calculator that could be used freely by members in his community. He had no background in web development, web design, etc. He had found Wappler online, ended up on this forum and sought help in learning how to accomplish what he wanted.

Initially, I ended up making a lot of videos that explained how Bootstrap works, Wappler, and the difference between App Connect and Server Side behaviors. But, with the hurricane that was about to hit us, and my son hitting somebody head-on at 65mph - things got kind of complicated around here.

I ended up doing this project front-to-back. Not because he couldn’t learn it, but to be honest, I needed the distraction, and I think the web is a better place when we help each other like this. What is interesting though, is that he has picked up considerably on Wappler just by reverse-engineering the work I’ve been doing, asking me questions, posting on the forum, from the videos I’ve sent him, and watching other user’s videos. And I really think that he could have completed this entirely on his own. Sure it would have taken longer and he would have hit some walls, but to me, this is one reason that Wappler really shines. Somebody with no experience could create something like this.

I had figured out how to make all the calculations work using App Connect on my own, but I approached @psweb to see if there was a more elegant solution. He ended up showing me a different way to do it - that @George had told us was the better way. And he had helped me with some other things at the end of the project.

About the Project
Going into this, here were our problems/goals:

  1. The calculator is quite complex in the sense that a great number of fields are dependent on each other. And the question was: How can this be done in Wappler easily?

  2. Is Bootstrap enough to make a great looking website that is both modern and user-friendly?

  3. How can we improve upon existing conventions and make this calculator better?

The Solution

I haven’t really used Bootstrap to make a website in the past. I’ve always just written my own CSS. For this website, I decided to use the Minty theme as this both matched the design ideas that norcoscia had, and it also felt consistent with general pizza shop colors. The process of the design couldn’t have been easier. Everything you see - it was created in Wappler without having to get into custom code other than adding to some styles in the CSS Panel. In comparison to other solutions like custom coding, Webflow, or Wordpress, I found this to be much faster and easier to get a design hammered out and presentable.

App Connect made the calculations and other features particularly easy. For instance, where the Total Flour field is being updated, or additional flour fields are being created - all of this was done in App Connect. In creating additional flour fields, normally I would have written a function with a do while loop or something. I had to write zero code for this to work. That is simply amazing to me.

In short, Wappler really proved itself with this project. I’m also happy that someone new to web development started to learn the ropes and that Wappler was their ticket into this world. I am very pleased with the process I went through and how many things clicked together for me as I worked my way through it. Wappler is going to change the future of web development in my opinion.

Moving Forward

There are a couple things I think need refining a bit.

  1. The navbar is shifting around on different pages and I’m not really sure why it would be doing that. I am using an includes file - so it should be consistent. This may be the nature of Flexbox, I’m not sure.
  2. A contact page would probably be useful.

Hi Chad,

That’s a great example of advanced stuff you can achieve thanks to App Connect framework!

Just a few notes:

  • I am not sure if it’s intentionally but you have a border radius set only for bottom right of your table: border-radius: 0px 0px 20px 0px;
  • I see you are using two “col” classes nested in a row>col>row structure. You additionally added class mr-3 which breaks the layout on smaller screens why is that? That is not a good approach, that’s not how bootstrap 4 grid should really be nested:
    You’d better just use a new row with two columns with classes of “col-12 col-md-6” and no additional margins.
  • The print button has col-1 class which is not enough for small screens.
  • Something weird goes with your navbar on small screens. It goes behind the content - please check this as well.
1 Like

Congrats @drymetal The best part of all of this is that zero handcoding (or almost zero) is needed. Usually zero handcoding has a perception of drag and drop stuff which have many limitations or an open source like Drupal, WP, Joomla etc.

If we all realize that Wappler, as an official release, is about 6-7 months old, we all understand what is happenning here, what it can possibly do in the next 6 months or even better in the next 2 years.

Your project is a proof that (even many hardcore developers dont like this fact) is equivalent to React, Vue, Angular. Very few things can not be done with Wappler (if any) and I think it is just a matter of time to overcome them.

Once again congratulations for your web app.


Agreed @t11, even when you think there is no way to do something in Wappler, by combining multiple tools you can always achieve what you need.

How Old is Wappler

<dmx-datetime id="var_today" utc="true"></dmx-datetime>
{{var_today.datetime.monthsUntil("2018-05-27").toString().substr(1, 2)}}

Lets see how many can read that.


Wappler is really wonderful
I’m super happy with him.

I would like to see the wappler working with routes.

@George could pay particular attention to this. :sunglasses:

1 Like

Ho @drymetal!
I sent the link of your pizza calculator to my friends in Naples… let s see what they think about!


What did they say? Will they send an original Italian pizza or what :slight_smile:

Taken yesterday night in original pizzeria…

Who knows maybe we could receive a pizza for each user of this forum :rofl:


The link had died. I just updated it so that it works again.

1 Like