Calculator

Lets make a calculator app to begin our journey! Remember that practice will eventually makes us more firm on this framework

Creating a starter project is always good! starting with a calculator app would obviously be a great idea! remember that this tutorial was made in rush so many scripts are incomplete, its your choice if you want to have changes on this tutorial make changes on the repository and contact me when you want to merge the branches.

1. Create an action bar for your app!

lets make an action bar to tell what you are really making, and we should also put in some inline css to make it look beautiful, for now i am using snow blue theme for the calculator app, you should choose as you wish.


<frame>
	<page style="background-color:white;">
		<actionBar style="background-color:aliceblue;color:cornflowerblue;font-family:"Times New Roman", Times, serif;font-size:larger;font-size:24px;" title="Calculator App by Tanishq"/>
	</page>
</frame>

2. create a flexbox for the elements!

Lets create a flexbox for our elements to hold, we will be using multiple buttons through which we can interact!


<flexboxLayout style="display:flex;flex-flow:column;justify-content:center;column-gap:10%;">
</flexboxLayout>

3. Coding the scripting part!

Lets add the javascript part to our project! We will be adding some number buttons, operator buttons and delete buttons with some functionality, the script is incomplete! i will leave it to you to decide how to make the calculator work!


<script>
	let result=0;
	let numbers=[7,8,9,4,5,6,1,2,3,'C',0,'.']
	let operators=['/','x','-','+','=']
	let equation=''
</script>

4. Lets create a text display element to show our results!

we will create flexbox layouts and stack them over one another where a one will have a label that represents the result and the bottom one represents a delete button, make sure to create a delete function later ;)


<flexboxLayout style="display:flex;flex-flow:row-reverse;width:90%;padding:5px;margin:20px;">
	<label style="color:cornflowerblue;font-size:24px;" text={equation}/>
</flexboxLayout>
<flexboxLayout style="width:100%;display:flex;flex-flow:row-reverse;">
	<button on:tap={deleteLast} style="margin:12px;background-color:aliceblue;color:cornflowerblue;">⌫</button>
</flexboxLayout>

5. Lets create the buttons!

here we shall create two horizontal flexbox layouts one box having number buttons and next to it having the operators, we shall give them some padding so as to make it look cozy.


<flexboxLayout style="width:100%;display:flex;flex-direction:row;">
	<flexboxLayout class="spaceAround" style="padding:0;margin:0;width:75%;flex-direction:row;flex-wrap:wrap;">
		{#each numbers as num}
			<button on:tap={()=>addItem(num)} style="padding:0;margin:0;color:cornflowerblue;background-color:aliceblue;">{num}</button>
		{/each}
	</flexboxLayout>
	<flexboxLayout style="width:25%;padding:0;margin:0;display:flex;flex-direction:column;">
		{#each operators as op}
			<button on:tap={()=>addOperator(op)} style="margin-top:1px;padding-top:1px;margin-bottom:1px;padding-bottom:1px;color:cornflowerblue;background-color:aliceblue;">{op}</button>
		{/each}
	</flexboxLayout>
</flexboxLayout>

6. In the end our project should look like this!


<script>
	let result=0;
	let numbers=[7,8,9,4,5,6,1,2,3,'C',0,'.']
	let operators=['/','x','-','+','=']
	let equation=''
	let operation=[]
	let params=[]
</script>

<frame>
	<page style="background-color:white;">
		<actionBar style="background-color:aliceblue;color:cornflowerblue;font-family:'Times New Roman', Times, serif;font-size:larger;font-size:24px;" title="Calculator App by Tanishq"/>
			<flexboxLayout style="display:flex;flex-flow:column;justify-content:center;column-gap:10%;">
				<flexboxLayout style="display:flex;flex-flow:row-reverse;width:90%;padding:5px;margin:20px;">
					<label style="color:cornflowerblue;font-size:24px;" text={equation+' : '+params.join(",")+ ' : '+operation.join("")}/>
				</flexboxLayout>
				<flexboxLayout style="width:100%;display:flex;flex-flow:row-reverse;">
					<button on:tap={deleteLast} style="margin:12px;background-color:aliceblue;color:cornflowerblue;">⌫</button>
				</flexboxLayout>
				<flexboxLayout style="width:100%;display:flex;flex-direction:row;">
					<flexboxLayout class="spaceAround" style="padding:0;margin:0;width:75%;flex-direction:row;flex-wrap:wrap;">
						{#each numbers as num}
							<button on:tap={()=>addItem(num)} style="padding:0;margin:0;color:cornflowerblue;background-color:aliceblue;">{num}</button>
						{/each}
					</flexboxLayout>
					<flexboxLayout style="width:25%;padding:0;margin:0;display:flex;flex-direction:column;">
						{#each operators as op}
							<button on:tap={()=>addOperator(op)} style="margin-top:1px;padding-top:1px;margin-bottom:1px;padding-bottom:1px;color:cornflowerblue;background-color:aliceblue;">{op}</button>
						{/each}
					</flexboxLayout>
				</flexboxLayout>
			</flexboxLayout>
		</page>
</frame>