added ColumnLayout for StartPage

with tickInterval, numCount, min and max

CalculateEndPage.qml

@@ -1,5 +0,0 @@
-import QtQuick 2.0
-
-Item {
-
-}

CalculateStartPage.qml

@@ -1,64 +0,0 @@
-import QtQuick 2.11
-import QtQuick.Controls 2.4
-
-Page {
-    id: calculatorStartPage
-
-    Label {
-        id: calculatorStartPageHeading
-        anchors {
-            top: parent.top
-            topMargin: parent.height * 0.05
-            horizontalCenter: parent.horizontalCenter
-        }
-        font.pixelSize: parent.height * 0.15
-        text: "Calculator"
-    }
-
-    SpinBox {
-        id: calculatorTickInterval
-        from: 1
-        to: 100000
-        stepSize: 1
-        value: 1000
-        anchors.horizontalCenter: parent.horizontalCenter
-        editable: true
-        anchors {
-            left: parent.left
-            top: parent.top
-            leftMargin: parent.width * 0.5 - width * 0.5
-            topMargin: parent.height * 0.3 - height * 0.5
-        }
-        onValueChanged: {
-            calculator.tickInterval = calculatorTickInterval.value
-        }
-
-    }
-
-    SpinBox {
-        id: calculatorNumCount
-        from: 1
-        to: 100000
-        stepSize: 1
-        value: 10
-        anchors.horizontalCenter: parent.horizontalCenter
-        editable: true
-        anchors {
-            left: parent.left
-            top: parent.top
-            leftMargin: parent.width * 0.5 - width * 0.5
-            topMargin: parent.height * 0.6 - height * 0.5
-        }
-        onValueChanged: {
-            calculator.numCount = calculatorNumCount.value
-        }
-    }
-
-    Button {
-        id: calculatorStartButton
-        text: "start"
-        onClicked: {
-            calculator.start()
-        }
-    }
-}

Calculator.qml

@@ -1,13 +1,19 @@
 import QtQuick 2.11
 import QtQuick.Controls 2.4
+import "./"
 
 Item {
     id: calculator
 
-    property var nums: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+    property int sum: 0
-    property int currIndex: -1
+    property int nextNum: 0
+    property int lastNum: 0
+    property int actualNums: 0
+    property int min: 0
+    property int max: 9
     property int tickInterval: 1000
     property int numCount: 10
+    property bool negate: false
 
     signal pageOpened()
 
@@ -15,6 +21,10 @@ Item {
         calculator.state = "starting"
     }
 
+    onNumCountChanged: {
+        initNums()
+    }
+
     states: [
         State {
             name: "starting"
@@ -28,7 +38,14 @@ Item {
             name: "running"
             PropertyChanges {
                 target: calculatorStack
-                currPage: calculatorGamePageComp
+                currPage: calculatorMainPageComp
+            }
+        },
+        State {
+            name: "ending"
+            PropertyChanges {
+                target: calculatorStack
+                currPage: calculatorEndPageComp
             }
         }
     ]
@@ -49,15 +66,19 @@ Item {
 
         Component {
             id: calculatorStartPageComp
-            CalculateStartPage {
+            CalculatorStartPage {
-                id: calculatorStartPage
             }
         }
 
         Component {
-            id: calculatorGamePageComp
+            id: calculatorMainPageComp
-            CalculatePage {
+            CalculatorMainPage {
+            }
+        }
 
+        Component {
+            id: calculatorEndPageComp
+            CalculatorEndPage {
             }
         }
 
@@ -90,15 +111,24 @@ Item {
 
     function nextNumber(){
         var randNum = 0
-        while(randNum === 0 || randNum === calculator.nums[currIndex]){
+        var range = calculator.max - calculator.min
-            randNum = Math.floor(Math.random() * 9)
+        lastNum = nextNum
+        while(randNum===0 || randNum === lastNum){
+            randNum = Math.floor((Math.random()*(range+1))+min)
         }
-        calculator.nums[calculator.currIndex+1] = randNum
+        nextNum = randNum
-        calculator.currIndex += 1
+        actualNums += 1
     }
 
-    function start(){
+    function start(min, max){
         calculator.nextNumber()
         calculator.state = "running"
     }
+
+    function initNums() {
+        while (nums.length < numCount) {
+            nums.push(0)
+            console.log(nums.length)
+        }
+    }
 }

CalculatorEndPage.qml

@@ -0,0 +1,49 @@
+import QtQuick 2.11
+import QtQuick.Controls 2.4
+import "./"
+
+Page {
+    id: root
+
+    signal pageOpened()
+
+    onPageOpened: {
+        rectAnim.start()
+        startRectAnim2.start()
+    }
+
+    Rectangle {
+        id: rect
+        anchors.fill: parent
+        property string col: "darkgreen"
+        color: col
+
+        Timer {
+            id: startRectAnim2
+            interval: 5000
+            running: false
+            repeat: false
+
+            onTriggered: {
+                rectAnim2.start()
+            }
+        }
+
+        ColorAnimation {
+            id: rectAnim
+            target: rect
+            property: "color"
+            from: "darkGreen"
+            to: "yellow"
+            duration: 5000
+        }
+        ColorAnimation {
+            id: rectAnim2
+            target: rect
+            property: "color"
+            from: "yellow"
+            to: "darkRed"
+            duration: 5000
+        }
+    }
+}

CalculatorMainPage.qml

@@ -5,17 +5,21 @@ import "./"
 Page {
     id: root
 
+    signal pageOpened()
+
     Label {
         id: num
         anchors.centerIn: parent
         font.pixelSize: calculator.height * 0.6
-        text: calculator.nums[calculator.currIndex]
+        text: calculator.nextNum
     }
 
 
     ProgressBar {
         id: prog
         property int progress: 0
+        //property string col: "green"
+        value: progress/100
         anchors {
             bottom: parent.bottom
             bottomMargin: parent.height * 0.02
@@ -24,9 +28,16 @@ Page {
             right: parent.right
             rightMargin: parent.width * 0.01
         }
-        value: progress/100
+
+
+        /*
+        progress: Rectangle {
+            color: col
+        }
+        */
+
         NumberAnimation {
-            id: progAnim
+            id: progNumAnim
             target: prog
             property: "progress"
             from: 100
@@ -34,6 +45,17 @@ Page {
             duration: tick.interval
             easing.type: Easing.Linear
         }
+        /*
+        ColorAnimation {
+            id: progColAnim
+            target: prog
+            property: "color"
+            from: "green"
+            to: "red"
+            duration: tick.interval
+            easing.type: Easing.Linear
+        }
+        */
     }
 
     Timer {
@@ -43,18 +65,19 @@ Page {
         running: calculator.state === "running"
 
         onTriggered: {
-            if(calculator.currIndex+1 <= calculator.numCount-1){
+            if(calculator.actualNums < calculator.numCount){
                 nextNumber()
                 tick.start()
             }
             else {
-
+                calculator.state = "ending"
             }
         }
 
         onRunningChanged: {
             if(running){
-                progAnim.start()
+                progNumAnim.start()
+                //progColAnim.start()
             }
         }
     }

CalculatorStartPage.qml

@@ -0,0 +1,93 @@
+import QtQuick 2.11
+import QtQuick.Controls 2.4
+import QtQuick.Layouts 1.3
+import "./"
+
+Page {
+    id: root
+
+    signal pageOpened()
+
+    ColumnLayout {
+        id: column
+        spacing: 5
+        width: parent.width
+        anchors.fill: parent
+        anchors.topMargin: parent.height * 0.02
+        anchors.bottomMargin: parent.height * 0.02
+
+        onSpacingChanged: console.log(parent.width)
+
+        Label {
+            id: heading
+            font.pixelSize: parent.width * 0.075
+            text: "Calculator"
+            Layout.fillWidth: true
+            Layout.leftMargin: parent.width * 0.5 - width * 0.5
+            Layout.rightMargin: parent.width * 0.5 - width * 0.5
+        }
+
+
+        TextField {
+            id: tickInterval
+            text: calculator.tickInterval
+            placeholderText: "interval"
+            horizontalAlignment: Qt.AlignHCenter
+            Layout.fillWidth: true
+            Layout.leftMargin: parent.width * 0.05
+            Layout.rightMargin: parent.width * 0.05
+        }
+
+        TextField {
+            id: numCount
+            text: calculator.numCount
+            placeholderText: "numbercount"
+            horizontalAlignment: Qt.AlignHCenter
+            Layout.fillWidth: true
+            Layout.leftMargin: parent.width * 0.05
+            Layout.rightMargin: parent.width * 0.05
+        }
+
+        TextField {
+            id: min
+            text: calculator.min
+            placeholderText: "min"
+            horizontalAlignment: Qt.AlignHCenter
+            Layout.fillWidth: true
+            Layout.leftMargin: parent.width * 0.05
+            Layout.rightMargin: parent.width * 0.05
+        }
+
+        TextField {
+            id: max
+            text: calculator.max
+            placeholderText: "max"
+            horizontalAlignment: Qt.AlignHCenter
+            Layout.fillWidth: true
+            Layout.leftMargin: parent.width * 0.05
+            Layout.rightMargin: parent.width * 0.05
+        }
+
+        RoundButton {
+            id: startButton
+            text: "start"
+            height: parent.width * 0.1
+            width: height
+            //font.pixelSize: parent.width * 0.03
+            Layout.fillWidth: true
+            Layout.leftMargin: parent.width * 0.05
+            Layout.rightMargin: parent.width * 0.05
+            onClicked: {
+                updateVars()
+                calculator.start()
+            }
+        }
+    }
+    function updateVars() {
+        calculator.tickInterval = tickInterval.text
+        calculator.numCount = numCount.text
+        calculator.min = min.text
+        calculator.max = max.text
+
+    }
+}

StartPage.qml

@@ -6,11 +6,12 @@ Page {
     id: root
 
     signal pageOpened()
-    Button {
+    RoundButton {
         id: calenderButton
         text: "calender"
-        height: parent.height * 0.2
+        height: parent.width * 0.2
-        width: parent.width * 0.5
+        width: height
+        font.pixelSize: parent.width * 0.03
         anchors {
             left: parent.left
             top: parent.top
@@ -23,11 +24,12 @@ Page {
         }
     }
 
-    Button {
+    RoundButton {
         id: calculatorButton
-        text: "calculate"
+        text: "calculator"
-        height: parent.height * 0.2
+        height: parent.width * 0.2
-        width: parent.width * 0.5
+        width: height
+        font.pixelSize: parent.width * 0.03
         anchors {
             left: parent.left
             top: parent.top
@@ -36,7 +38,7 @@ Page {
         }
 
         onClicked: {
-            game.state = "calculate"
+            game.state = "calculator"
         }
     }
 }

main.qml

@@ -28,14 +28,14 @@ Window {
                 name: "calender"
                 PropertyChanges {
                     target: mainStack
-                    currPage: calPageComp
+                    currPage: calenderPageComp
                 }
             },
             State {
-                name: "calculate"
+                name: "calculator"
                 PropertyChanges {
                     target: mainStack
-                    currPage: calcuPageComp
+                    currPage: calculatorPageComp
 
                 }
             }
@@ -58,21 +58,18 @@ Window {
             Component {
                 id: startPageComp
                 StartPage {
-                    id: startPage
                 }
             }
 
             Component {
-                id: calPageComp
+                id: calenderPageComp
                 CalenderPage {
-                    id: calPage
                 }
             }
 
             Component {
-                id: calcuPageComp
+                id: calculatorPageComp
-                CalculatePage {
+                Calculator {
-                    id: calcuPage
                 }
             }
 

qml.qrc

@@ -3,9 +3,9 @@
         <file>main.qml</file>
         <file>CalenderPage.qml</file>
         <file>StartPage.qml</file>
-        <file>CalculatePage.qml</file>
+        <file>CalculatorMainPage.qml</file>
-        <file>CalculateStartPage.qml</file>
+        <file>CalculatorStartPage.qml</file>
-        <file>CalculateEndPage.qml</file>
+        <file>CalculatorEndPage.qml</file>
         <file>Calculator.qml</file>
     </qresource>
 </RCC>