more introduction

docs/examples/introduction/stopwatch.py

@@ -40,9 +40,8 @@ class Stopwatch(Static):
 
     def on_button_pressed(self, event: Button.Pressed) -> None:
         """Called when a button is pressed."""
-        button_id = event.button.id
-        self.started = button_id == "start"
-        if button_id == "reset":
+        self.started = event.button.id == "start"
+        if event.button.id == "reset":
             self.total = 0.0
             self.update_elapsed()
 

docs/examples/introduction/stopwatch02.py

@@ -1,4 +1,4 @@
-from textual.app import App, ComposeResult
+from textual.app import App
 from textual.layout import Container
 from textual.widgets import Button, Header, Footer, Static
 
@@ -8,7 +8,7 @@ class TimeDisplay(Static):
 
 
 class Stopwatch(Static):
-    def compose(self) -> ComposeResult:
+    def compose(self):
         yield Button("Start", id="start", variant="success")
         yield Button("Stop", id="stop", variant="error")
         yield Button("Reset", id="reset")

docs/examples/introduction/stopwatch03.py

@@ -8,7 +8,7 @@ class TimeDisplay(Static):
 
 
 class Stopwatch(Static):
-    def compose(self) -> ComposeResult:
+    def compose(self):
         yield Button("Start", id="start", variant="success")
         yield Button("Stop", id="stop", variant="error")
         yield Button("Reset", id="reset")

docs/examples/introduction/stopwatch04.css

@@ -30,25 +30,24 @@ Button {
     dock: right;
 }
 
-Stopwatch.started {   
+.started {   
     text-style: bold;
     background: $success;
     color: $text-success;
 }
 
-Stopwatch.started TimeDisplay {
+.started TimeDisplay {
     opacity: 100%;
 }
 
-Stopwatch.started #start {
+.started #start {
     display: none
 }
 
-Stopwatch.started #stop {
+.started #stop {
     display: block
 }
 
-Stopwatch.started #reset {
+.started #reset {
     visibility: hidden
 }
-

docs/examples/introduction/stopwatch04.py

@@ -1,6 +1,5 @@
-from textual.app import App, ComposeResult
+from textual.app import App
 from textual.layout import Container
-from textual.reactive import Reactive
 from textual.widgets import Button, Header, Footer, Static
 
 
@@ -9,20 +8,13 @@ class TimeDisplay(Static):
 
 
 class Stopwatch(Static):
-    started = Reactive(False)
-
-    def watch_started(self, started: bool) -> None:
-        if started:
+    def on_button_pressed(self, event):
+        if event.button.id == "start":
             self.add_class("started")
-        else:
+        elif event.button.id == "stop":
             self.remove_class("started")
 
-    def on_button_pressed(self, event: Button.Pressed) -> None:
-        """Called when a button is pressed."""
-        button_id = event.button.id
-        self.started = button_id == "start"
-
-    def compose(self) -> ComposeResult:
+    def compose(self):
         yield Button("Start", id="start", variant="success")
         yield Button("Stop", id="stop", variant="error")
         yield Button("Reset", id="reset")