added functions that change the states instead of directly change the state

Calculator.qml

@@ -19,7 +19,7 @@ Item {
     signal pageOpened()
 
     onPageOpened: {
-        calculator.state = "starting"
+        calculator.start()
     }
 
     states: [
@@ -35,11 +35,11 @@ Item {
             name: "running"
             PropertyChanges {
                 target: calculatorStack
-                currPage: calculatorMainPageComp
+                currPage: calculatorRunningPageComp
             }
         },
         State {
-            name: "ending"
+            name: "gameOver"
             PropertyChanges {
                 target: calculatorStack
                 currPage: calculatorGameOverPageComp
@@ -68,8 +68,8 @@ Item {
         }
 
         Component {
-            id: calculatorMainPageComp
+            id: calculatorRunningPageComp
-            CalculatorMainPage {
+            CalculatorRunningPage {
             }
         }
 
@@ -106,6 +106,29 @@ Item {
     ---------functions---------
     -------------------------*/
 
+    function start() {
+        calculator.reset()
+        calculator.state = "starting"
+    }
+
+    function run() {
+        calculator.nextNumber()
+        calculator.state = "running"
+    }
+
+    function gameOver() {
+        calculator.state = "gameOver"
+    }
+
+    function reset() {
+        calculator.sum = 0
+        calculator.actualNumCount = 0
+        calculator.endPageLabelText = "You Lose!"
+        calculator.endPageVisibility = false
+        calculator.lastNum = 0
+        calculator.nextNum = 0
+    }
+
     function nextNumber(){
         var randNum = 0
         var range = calculator.max - calculator.min
@@ -118,21 +141,6 @@ Item {
         actualNumCount += 1
     }
 
-    function start(min, max) {
-        calculator.reset()
-        calculator.nextNumber()
-        calculator.state = "running"
-    }
-
-    function reset() {
-        calculator.sum = 0
-        calculator.actualNumCount = 0
-        calculator.endPageLabelText = "You Lose!"
-        calculator.endPageVisibility = false
-        calculator.lastNum = 0
-        calculator.nextNum = 0
-    }
-
     function checkSum(sumInputText) {
         if (sumInputText !== "") {
             if (calculator.sum === parseInt(sumInputText)) {
@@ -141,10 +149,4 @@ Item {
             calculator.endPageVisibility = true
         }
     }
-
-    function setState(state) {
-        if (state === "starting") {
-        }
-        calculator.state = state
-    }
 }

CalculatorGameOverPage.qml

@@ -89,16 +89,6 @@ Page {
             height: root.width * 0.2
             width: height
             text: "start"
-            onClicked: {
-                calculator.state = "starting"
-            }
-        }
-
-        RoundButton {
-            id: restart
-            height: root.width * 0.2
-            width: height
-            text: "restart"
             onClicked: {
                 calculator.start()
             }

CalculatorRunningPage.qml

@@ -96,7 +96,7 @@ Page {
                 tick.start()
             }
             else {
-                calculator.state = "ending"
+                calculator.state = "gameOver"
             }
         }
 

CalculatorStartPage.qml

@@ -118,7 +118,7 @@ Page {
     }
     function start() {
         root.updateVars()
-        calculator.start()
+        calculator.run()
     }
 
     function updateVars() {

qml.qrc

@@ -3,7 +3,7 @@
         <file>main.qml</file>
         <file>CalenderPage.qml</file>
         <file>StartPage.qml</file>
-        <file>CalculatorMainPage.qml</file>
+        <file>CalculatorRunningPage.qml</file>
         <file>CalculatorStartPage.qml</file>
         <file>CalculatorGameOverPage.qml</file>
         <file>Calculator.qml</file>