Creating the markup
→ Click here to see the state of the app after completing this step.
→ Click here to see the changes we'll make in this step in GitHub.
We begin by setting up a new project. To do this we create an empty folder that will contain all files for our project. Let's use the command line for that.
$ mkdir gg-calculator-app$ cd gg-calculator-app
We will initialize the application by running gg init in the command line. This will create some files for us:
- A
tsconfig.jsonwith the necessary settings - A
deps.tsfile that re-exports the gg module - A first page
src/index.tsx
First make sure to put your token in the URL where gg is imported from in deps.ts. Our app will contain only one page, so we can use the one that has been created by default.
Let's look at the page that we have right now. To to that we'll start up the development server using the gg CLI on the command line.
$ gg devINFO Cleared .dev directoryINFO Server is running on port 7777
If you open http://localhost:7777, you will now see a text Hello from gg!. Every time we make changes in the source code, the browser window should automatically reload, showing the updated content afterwards.
Let's now take a look at the current code for our page. Every .tsx file in the src directory has to contain a named export called page, which has to be a gg page. It' created using a component that returns the markup for your page. In fact, this component has to return a html element as first child.
Now we'll add the markup we'll need for our calculator. First, let's add a headline and some explanatory text.
6 <body>-<p>Hello from gg!</p>+7 <h1>Calculator App</h1>+8 <p>Apply one basic arithmetic operation at a time to two numbers.</p> 9 </body>
Second, we need a place to display the numbers which the user will type in. For now we just place some dummy-numbers there.
8 <p>Apply one basic arithmetic operation at a time to two numbers.</p>+9 <div>3 + 4</div> 10 </body>
The only other thing we need is a lot of buttons: One for every digit, one for the decimal point, one for each arithmetic operation, one for actually calculating the result and some common calculator controls. We will implement clearing the calcualtor completely (AC), clearing the current inputs (C) and reusing the result of the last calculation (ANS).
9 <div>3 + 4</div>+10 <div>+11 <button>AC</button>+12 <button>C</button>+13 <button>ANS</button>+14 <button>{"÷"}</button>+15 </div>+16 <div>+17 <button>7</button>+18 <button>8</button>+19 <button>9</button>+20 <button>{"×"}</button>+21 </div>+22 <div>+23 <button>4</button>+24 <button>5</button>+25 <button>6</button>+26 <button>-</button>+27 </div>+28 <div>+29 <button>1</button>+30 <button>2</button>+31 <button>3</button>+32 <button>+</button>+33 </div>+34 <div>+35 <button>0</button>+36 <button>.</button>+37 <button>=</button>+38 </div> 39 </body>
The signs we use for multiplication and division are special characters for which we use HTML entities. Note that we have to put those entities in strings inside a JSX expression, otherwise they would be automatically converted when the JSX is transpiled.
At last, we'll also add a head element to out markup containing a title and some common meta tags.
5 <html>+6 <head>+7 <title>gg Calculator App</title>+8 <meta charset="UTF-8" />+9 <meta name="viewport" content="width=device-width, initial-scale=1.0" />+10 </head> 11 <body>
Well, not looking very pretty right now, so let's add some CSS.
Next → Styling the app