added back button

added colorAnimation on Progressbar in calculator

Calculator.qml

@@ -120,12 +120,12 @@ Item {
     }
 
     function start(min, max) {
+        calculator.reset()
         calculator.nextNumber()
         calculator.state = "running"
     }
 
     function reset() {
-        calculator.state = "starting"
         calculator.sum = 0
         calculator.actualNumCount = 0
         calculator.endPageLabelText = "You Lose!"
@@ -135,9 +135,11 @@ Item {
     }
 
     function checkSum(sumInputText) {
-        if (calculator.sum === parseInt(sumInputText)) {
-            calculator.endPageLabelText = "You Won!"
+        if (sumInputText !== "") {
+            if (calculator.sum === parseInt(sumInputText)) {
+                calculator.endPageLabelText = "You Won!"
+            }
+            calculator.endPageVisibility = true
         }
-        calculator.endPageVisibility = true
     }
 }

CalculatorEndPage.qml

@@ -26,7 +26,7 @@ Page {
         width: height
         text: "check"
         font.pixelSize: parent.width * 0.03
-        visible: !endPageVisibility
+        visible: !calculator.endPageVisibility
         anchors {
             horizontalCenter: parent.horizontalCenter
             top: parent.top
@@ -45,24 +45,37 @@ Page {
         anchors {
             horizontalCenter: parent.horizontalCenter
             top: parent.top
-            topMargin: parent.height * 0.2
+            topMargin: parent.height * 0.05
+        }
+    }
+
+    Label {
+        id: sum
+        text: "Sum: " + calculator.sum
+        font.pixelSize: parent.width * 0.1
+        visible: calculator.endPageVisibility ? ( won.text==="You Lose!" ? true:false):false
+        anchors {
+            horizontalCenter: parent.horizontalCenter
+            top: parent.top
+            topMargin: parent.height * 0.4
         }
     }
 
-    /*
     Row {
+        id: buttonRow
         anchors {
             horizontalCenter: parent.horizontalCenter
             bottom: parent.bottom
-            bottomMargin: parent.height * 0.2
+            bottomMargin: parent.height * 0.15
         }
         height: childrenRect.height
         width: childrenRect.width
-        spacing: root.height * 0.1
+        spacing: parent.width * 0.1
+        visible: calculator.endPageVisibility ? true:false
 
         RoundButton {
             id: homeButton
-            height: parent.width * 0.2
+            height: root.width * 0.2
             width: height
             text: "home"
             onClicked: {
@@ -73,34 +86,22 @@ Page {
 
         RoundButton {
             id: startButtons
-            height: parent.width * 0.2
+            height: root.width * 0.2
             width: height
             text: "start"
             onClicked: {
-                calculator.reset()
                 calculator.state = "starting"
             }
         }
-    }
-    */
 
-    RoundButton {
-        id: homeButton
-        height: parent.width * 0.2
-        width: height
-        text: "home"
-        font.pixelSize: parent.width * 0.03
-        visible: endPageVisibility
-        anchors {
-            horizontalCenter: parent.horizontalCenter
-            bottom: parent.bottom
-            bottomMargin: parent.height * 0.1
-        }
-
-        onClicked: {
-            calculator.reset()
-            calculator.state = "starting"
+        RoundButton {
+            id: restart
+            height: root.width * 0.2
+            width: height
+            text: "restart"
+            onClicked: {
+                calculator.start()
+            }
         }
     }
-
 }

CalculatorMainPage.qml

@@ -30,7 +30,7 @@ Page {
     ProgressBar {
         id: prog
         property int progress: 0
-        //property string col: "green"
+        property string color: "green"
         value: progress/100
         anchors {
             bottom: parent.bottom
@@ -41,12 +41,13 @@ Page {
             rightMargin: parent.width * 0.01
         }
 
-
-        /*
-        progress: Rectangle {
-            color: col
+        contentItem: Item {
+            Rectangle {
+                width: prog.visualPosition * parent.width
+                height: parent.height
+                color: prog.color
+            }
         }
-        */
 
         NumberAnimation {
             id: progNumAnim
@@ -57,17 +58,30 @@ Page {
             duration: tick.interval
             easing.type: Easing.Linear
         }
-        /*
-        ColorAnimation {
+
+        SequentialAnimation {
             id: progColAnim
-            target: prog
-            property: "color"
-            from: "green"
-            to: "red"
-            duration: tick.interval
-            easing.type: Easing.Linear
+            loops: 1
+            ColorAnimation {
+                id: progColAnim1
+                target: prog
+                property: "color"
+                from: "green"
+                to: "goldenrod"
+                duration: tick.interval/2
+                easing.type: Easing.Linear
+            }
+            ColorAnimation {
+                id: progColAnim2
+                target: prog
+                property: "color"
+                from: "goldenrod"
+                to: "darkRed"
+                duration: tick.interval/2
+                easing.type: Easing.Linear
+            }
         }
-        */
+
     }
 
     Timer {
@@ -89,7 +103,7 @@ Page {
         onRunningChanged: {
             if(running){
                 progNumAnim.start()
-                //progColAnim.start()
+                progColAnim.start()
             }
         }
     }