App 3 - Timer App

This week we each worked on timer apps. My timer can go up to 60 minutes and 60 seconds. The dark blue circles represent minutes and the light purple circles represent seconds. You can add 10 minutes at a time by pressing the blue circle in the middle or 5 seconds at a tie by pressing the light purple circle in the middle. Use the “start” button to begin the timer and the “reset” button to start the timer over.

import SwiftUI
struct ContentView: View {
    @State var countSecs = 50
    @State var countMins = 30
    @State var timerIsRunning = false
    let timerSecs = Timer.publish(every: 1, on: .main, in: .common).autoconnect()
    //    let timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect()
      let timerMins = Timer.publish(every: 30, on: .main, in: .common).autoconnect()
    func isCircleEnabled(index: Int) -> Bool {
        return self.countSecs <= index
    }
    func isCircleEnabledMins(index: Int) -> Bool {
           return self.countMins <= index
       }
    var body: some View {
        VStack {
            Spacer()
            //Mins
            VStack {
                ForEach((0..<6).indices) { rowIndex in
                    HStack {
                        ForEach((0..<10).indices) { columnIndex in
                            Circle()
                                .fill(self.isCircleEnabledMins(index: rowIndex * 10 + columnIndex)
                                    ? Color.gray
                                        .opacity(0.25)
                                    : Color(red: 0/255, green: 51/255, blue: 204/255))
                                .frame(width: 25, height: 25)
                        }
                    }
                }
            }
            .padding()
           // .background(Color.black)
            Spacer()
            HStack{
                Button(action: {
                    self.countMins += 10
                }) {
                   // Text("Set Time Mins: \(countMins)")
                    Circle ()
                        .fill(Color(red: 0/255, green: 51/255, blue: 204/255))
                        .frame(width: 75)
                        //.padding()
                        .foregroundColor(Color.white)
                        .padding()
                }
                Button(action: {
                    self.countSecs += 5
                }) {
                    //Text("Set Time Secs: \(countSecs)")
                    Circle ()
                    .fill(Color(red: 153/255, green: 153/255, blue: 255/255))
                        .frame(width: 75)
                        //.padding()
                      //  .foregroundColor(Color.white)
                        .padding()
                }
            } 
            HStack{
                Button(action: {
                    self.countSecs -= 1
                    self.timerIsRunning.toggle()
                }) {
                    Text("Start")
                        .fontWeight(.bold)
                        .frame(width: 100)
                        .padding()
                        .foregroundColor(Color.black)
                        .background(Color(red: 240/255, green: 240/255, blue: 245/255))
                        .padding()
                }
            Button(action: {
                self.countSecs = 50
                self.countMins = 30
                self.timerIsRunning.toggle()
            }) {
                Text("Reset")
                    .fontWeight(.bold)
                    .frame(width: 100)
                    .padding()
                    .foregroundColor(Color.black)
                    .background(Color(red: 240/255, green: 240/255, blue: 245/255))
                    .padding()
            }
            }
            Spacer()
            //Secs
            VStack {
                ForEach((0..<6).indices) { rowIndex in
                    HStack {
                        ForEach((0..<10).indices) { columnIndex in
                            Circle()
                                .fill(self.isCircleEnabled(index: rowIndex * 10 + columnIndex)
                                    ? Color.gray
                                        .opacity(0.25)
                                    : Color(red: 153/255, green: 153/255, blue: 255/255))
                                .frame(width: 25, height: 25)
                        }
                    }
                }
            }
            .padding()
          //  .background(Color.white)
            Spacer()
        }  
        .onReceive(timerMins) { _ in
            // Block gets called when timer updates.
            // If timeRemaining and timer is running, count down.
            if self.countMins > 0 && self.timerIsRunning {
                self.countMins -= 1
                print("Time Remaining:", self.countMins)
            }
        }
        .onReceive(timerSecs) { _ in
            // Block gets called when timer updates.
            // If timeRemaining and timer is running, count down.
            if self.countSecs > 0 && self.timerIsRunning {
                self.countSecs -= 1               
                print("Time Remaining:", self.countSecs)
            }
        }
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
Previous
Previous

App 4 - Garden Game App

Next
Next

App 2 - Inspired by Wangechi Mutu