From 4eb6efe6117c896593a40c7afdb8a19e4c3428dd Mon Sep 17 00:00:00 2001
From: "jean (jebou)" <jeabou@odoo.com>
Date: Wed, 29 Jul 2026 13:49:31 +0200
Subject: [PATCH 1/6] [IMP] awesome_owl: add two counters

---
 awesome_owl/static/src/counter/counter.js  | 13 +++++++++++++
 awesome_owl/static/src/counter/counter.xml | 10 ++++++++++
 awesome_owl/static/src/playground.js       |  6 ++++--
 awesome_owl/static/src/playground.xml      |  7 ++++---
 4 files changed, 31 insertions(+), 5 deletions(-)
 create mode 100644 awesome_owl/static/src/counter/counter.js
 create mode 100644 awesome_owl/static/src/counter/counter.xml

diff --git a/awesome_owl/static/src/counter/counter.js b/awesome_owl/static/src/counter/counter.js
new file mode 100644
index 00000000000..1d1629b0fd6
--- /dev/null
+++ b/awesome_owl/static/src/counter/counter.js
@@ -0,0 +1,13 @@
+import { Component, useState } from "@odoo/owl";
+
+export class Counter extends Component {
+    static template = "awesome_owl.counter";
+
+    setup() {
+        this.state = useState({ value: 0 });
+    }
+
+    increment() {
+        this.state.value++
+    }
+}
\ No newline at end of file
diff --git a/awesome_owl/static/src/counter/counter.xml b/awesome_owl/static/src/counter/counter.xml
new file mode 100644
index 00000000000..2dcead84b89
--- /dev/null
+++ b/awesome_owl/static/src/counter/counter.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-name="awesome_owl.counter">
+        <p>
+            Counter: <t t-esc="state.value"/>
+        </p>
+        <button class="btn btn-primary" t-on-click="increment">Increment</button>
+    </t>
+
+</templates>
\ No newline at end of file
diff --git a/awesome_owl/static/src/playground.js b/awesome_owl/static/src/playground.js
index 4ac769b0aa5..6cb4528fd38 100644
--- a/awesome_owl/static/src/playground.js
+++ b/awesome_owl/static/src/playground.js
@@ -1,5 +1,7 @@
-import { Component } from "@odoo/owl";
+import { Component, useState } from "@odoo/owl";
+import { Counter } from "./counter/counter";
 
 export class Playground extends Component {
     static template = "awesome_owl.playground";
-}
+    static components = { Counter }
+}
\ No newline at end of file
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index 4fb905d59f9..65890178a75 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -1,10 +1,11 @@
-<?xml version="1.0" encoding="UTF-8" ?>
+<?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
-
     <t t-name="awesome_owl.playground">
         <div class="p-3">
             hello world
         </div>
+        <Counter/>
+        <Counter />
     </t>
 
-</templates>
+</templates>
\ No newline at end of file

From c0ccbb9f03c481d009a150fc6c1daaf127b57469 Mon Sep 17 00:00:00 2001
From: "jean (jebou)" <jeabou@odoo.com>
Date: Wed, 29 Jul 2026 14:16:44 +0200
Subject: [PATCH 2/6] [IMP] awesome_owl: add card component

---
 awesome_owl/static/src/card/card.js   |  5 +++++
 awesome_owl/static/src/card/card.xml  | 14 ++++++++++++++
 awesome_owl/static/src/playground.js  |  3 ++-
 awesome_owl/static/src/playground.xml |  2 ++
 4 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 awesome_owl/static/src/card/card.js
 create mode 100644 awesome_owl/static/src/card/card.xml

diff --git a/awesome_owl/static/src/card/card.js b/awesome_owl/static/src/card/card.js
new file mode 100644
index 00000000000..6e8bb2e44fc
--- /dev/null
+++ b/awesome_owl/static/src/card/card.js
@@ -0,0 +1,5 @@
+import { Component, useState } from "@odoo/owl";
+
+export class Card extends Component {
+    static template = "awesome_owl.card";
+}
\ No newline at end of file
diff --git a/awesome_owl/static/src/card/card.xml b/awesome_owl/static/src/card/card.xml
new file mode 100644
index 00000000000..af7331931af
--- /dev/null
+++ b/awesome_owl/static/src/card/card.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-name="awesome_owl.card">
+        <div class="card d-inline-block m-2" style="width: 18rem;">
+            <div class="card-body">
+                <h5 class="card-title"><t t-esc="props.title"/></h5>
+                <p class="card-text">
+                <t t-esc="props.content"/>
+                </p>
+            </div>
+        </div>  
+    </t>
+
+</templates>
\ No newline at end of file
diff --git a/awesome_owl/static/src/playground.js b/awesome_owl/static/src/playground.js
index 6cb4528fd38..9f6f435134d 100644
--- a/awesome_owl/static/src/playground.js
+++ b/awesome_owl/static/src/playground.js
@@ -1,7 +1,8 @@
 import { Component, useState } from "@odoo/owl";
 import { Counter } from "./counter/counter";
+import { Card } from "./card/card";
 
 export class Playground extends Component {
     static template = "awesome_owl.playground";
-    static components = { Counter }
+    static components = { Counter, Card }
 }
\ No newline at end of file
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index 65890178a75..0081d6650d4 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -6,6 +6,8 @@
         </div>
         <Counter/>
         <Counter />
+        <Card title="'card 1'" content="'content of card 1'"/>
+        <Card title="'card 2'" content="'content of card 2'"/>
     </t>
 
 </templates>
\ No newline at end of file

From a5ca718efe19b457b293ee8138b8c1f7911c974a Mon Sep 17 00:00:00 2001
From: "jean (jebou)" <jeabou@odoo.com>
Date: Wed, 29 Jul 2026 15:10:41 +0200
Subject: [PATCH 3/6] [IMP] awesome_owl: add parent counter

---
 awesome_owl/static/src/card/card.js       |  4 ++++
 awesome_owl/static/src/card/card.xml      |  3 +--
 awesome_owl/static/src/counter/counter.js |  4 ++++
 awesome_owl/static/src/playground.js      | 12 +++++++++++-
 awesome_owl/static/src/playground.xml     |  9 ++++++---
 5 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/awesome_owl/static/src/card/card.js b/awesome_owl/static/src/card/card.js
index 6e8bb2e44fc..9403c4883c6 100644
--- a/awesome_owl/static/src/card/card.js
+++ b/awesome_owl/static/src/card/card.js
@@ -2,4 +2,8 @@ import { Component, useState } from "@odoo/owl";
 
 export class Card extends Component {
     static template = "awesome_owl.card";
+    static props = {
+        title: String,
+        content: String
+    }
 }
\ No newline at end of file
diff --git a/awesome_owl/static/src/card/card.xml b/awesome_owl/static/src/card/card.xml
index af7331931af..76202cbbf03 100644
--- a/awesome_owl/static/src/card/card.xml
+++ b/awesome_owl/static/src/card/card.xml
@@ -5,10 +5,9 @@
             <div class="card-body">
                 <h5 class="card-title"><t t-esc="props.title"/></h5>
                 <p class="card-text">
-                <t t-esc="props.content"/>
+                <t t-out="props.content"/>
                 </p>
             </div>
         </div>  
     </t>
-
 </templates>
\ No newline at end of file
diff --git a/awesome_owl/static/src/counter/counter.js b/awesome_owl/static/src/counter/counter.js
index 1d1629b0fd6..f09b6a02600 100644
--- a/awesome_owl/static/src/counter/counter.js
+++ b/awesome_owl/static/src/counter/counter.js
@@ -2,6 +2,9 @@ import { Component, useState } from "@odoo/owl";
 
 export class Counter extends Component {
     static template = "awesome_owl.counter";
+    static props = {
+        onChange: { Function, optional: true }
+    }
 
     setup() {
         this.state = useState({ value: 0 });
@@ -9,5 +12,6 @@ export class Counter extends Component {
 
     increment() {
         this.state.value++
+        this.props.onChange();
     }
 }
\ No newline at end of file
diff --git a/awesome_owl/static/src/playground.js b/awesome_owl/static/src/playground.js
index 9f6f435134d..f8a8d24e13c 100644
--- a/awesome_owl/static/src/playground.js
+++ b/awesome_owl/static/src/playground.js
@@ -1,8 +1,18 @@
-import { Component, useState } from "@odoo/owl";
+import { Component, useState, markup } from "@odoo/owl";
 import { Counter } from "./counter/counter";
 import { Card } from "./card/card";
 
 export class Playground extends Component {
     static template = "awesome_owl.playground";
     static components = { Counter, Card }
+
+    content = markup("<div> some texte 2</div>")
+
+    setup() {
+        this.sum = useState({ value: 0 });
+    }
+
+    incrementSum() {
+        this.sum.value++
+    }
 }
\ No newline at end of file
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index 0081d6650d4..783ca8b800a 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -4,10 +4,13 @@
         <div class="p-3">
             hello world
         </div>
-        <Counter/>
-        <Counter />
+        <Counter onChange.bind="incrementSum" />
+        <Counter onChange.bind="incrementSum" />
+        <div>
+            Total count : <t t-esc="sum.value"/>
+        </div>
         <Card title="'card 1'" content="'content of card 1'"/>
-        <Card title="'card 2'" content="'content of card 2'"/>
+        <Card title="'card 2'" content="this.content"/>
     </t>
 
 </templates>
\ No newline at end of file

From a344bc6f551975dd9deed9772f344986a21320f9 Mon Sep 17 00:00:00 2001
From: "jean (jebou)" <jeabou@odoo.com>
Date: Wed, 29 Jul 2026 17:46:39 +0200
Subject: [PATCH 4/6] [IMP] awesome_owl: add dynamic classes

---
 awesome_owl/static/src/card/card.js            |  3 ++-
 awesome_owl/static/src/card/card.xml           |  2 +-
 awesome_owl/static/src/playground.js           |  4 ++--
 awesome_owl/static/src/playground.xml          |  4 +---
 awesome_owl/static/src/todo_item/todo_item.js  | 17 +++++++++++++++++
 awesome_owl/static/src/todo_item/todo_item.xml |  6 ++++++
 awesome_owl/static/src/todo_list/todo_list.js  | 11 +++++++++++
 awesome_owl/static/src/todo_list/todo_list.xml |  8 ++++++++
 8 files changed, 48 insertions(+), 7 deletions(-)
 create mode 100644 awesome_owl/static/src/todo_item/todo_item.js
 create mode 100644 awesome_owl/static/src/todo_item/todo_item.xml
 create mode 100644 awesome_owl/static/src/todo_list/todo_list.js
 create mode 100644 awesome_owl/static/src/todo_list/todo_list.xml

diff --git a/awesome_owl/static/src/card/card.js b/awesome_owl/static/src/card/card.js
index 9403c4883c6..8c2545c4d2f 100644
--- a/awesome_owl/static/src/card/card.js
+++ b/awesome_owl/static/src/card/card.js
@@ -4,6 +4,7 @@ export class Card extends Component {
     static template = "awesome_owl.card";
     static props = {
         title: String,
-        content: String
+        content: String,
+        isCrossedOut: Boolean
     }
 }
\ No newline at end of file
diff --git a/awesome_owl/static/src/card/card.xml b/awesome_owl/static/src/card/card.xml
index 76202cbbf03..b01ee6cd3d9 100644
--- a/awesome_owl/static/src/card/card.xml
+++ b/awesome_owl/static/src/card/card.xml
@@ -3,7 +3,7 @@
     <t t-name="awesome_owl.card">
         <div class="card d-inline-block m-2" style="width: 18rem;">
             <div class="card-body">
-                <h5 class="card-title"><t t-esc="props.title"/></h5>
+                <h5 class="card-title" t-att-class="{'text-muted text-decoration-line-through': props.isCrossedOut}"><t t-esc="props.title"/></h5>
                 <p class="card-text">
                 <t t-out="props.content"/>
                 </p>
diff --git a/awesome_owl/static/src/playground.js b/awesome_owl/static/src/playground.js
index f8a8d24e13c..d94b9eda163 100644
--- a/awesome_owl/static/src/playground.js
+++ b/awesome_owl/static/src/playground.js
@@ -1,10 +1,10 @@
 import { Component, useState, markup } from "@odoo/owl";
 import { Counter } from "./counter/counter";
-import { Card } from "./card/card";
+import { TodoList } from "./todo_list/todo_list";
 
 export class Playground extends Component {
     static template = "awesome_owl.playground";
-    static components = { Counter, Card }
+    static components = { Counter, TodoList }
 
     content = markup("<div> some texte 2</div>")
 
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index 783ca8b800a..474365bc200 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -9,8 +9,6 @@
         <div>
             Total count : <t t-esc="sum.value"/>
         </div>
-        <Card title="'card 1'" content="'content of card 1'"/>
-        <Card title="'card 2'" content="this.content"/>
+        <TodoList/>
     </t>
-
 </templates>
\ No newline at end of file
diff --git a/awesome_owl/static/src/todo_item/todo_item.js b/awesome_owl/static/src/todo_item/todo_item.js
new file mode 100644
index 00000000000..6e6221dfcad
--- /dev/null
+++ b/awesome_owl/static/src/todo_item/todo_item.js
@@ -0,0 +1,17 @@
+import { Component, useState } from "@odoo/owl";
+import { Card } from "../card/card"
+
+export class TodoItem extends Component {
+    static template = "awesome_owl.todo_item";
+    static components = { Card }
+    static props = {
+        todo: {
+            type: Object,
+            shape: {
+                id: Number,
+                description: String,
+                isCompleted: Boolean
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/awesome_owl/static/src/todo_item/todo_item.xml b/awesome_owl/static/src/todo_item/todo_item.xml
new file mode 100644
index 00000000000..a4d1e60c867
--- /dev/null
+++ b/awesome_owl/static/src/todo_item/todo_item.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-name="awesome_owl.todo_item">
+        <Card title="props.todo.description" content="props.todo.description" isCrossedOut="props.todo.isCompleted"/>
+    </t>
+</templates>
\ No newline at end of file
diff --git a/awesome_owl/static/src/todo_list/todo_list.js b/awesome_owl/static/src/todo_list/todo_list.js
new file mode 100644
index 00000000000..1ddddef7462
--- /dev/null
+++ b/awesome_owl/static/src/todo_list/todo_list.js
@@ -0,0 +1,11 @@
+import { Component, useState } from "@odoo/owl";
+import { TodoItem } from "../todo_item/todo_item"
+
+export class TodoList extends Component {
+    static template = "awesome_owl.todo_list";
+    static components = { TodoItem }
+
+    setup() {
+        this.todos = useState([{ id: 3, description: "buy milk", isCompleted: true }]);
+    }
+}
\ No newline at end of file
diff --git a/awesome_owl/static/src/todo_list/todo_list.xml b/awesome_owl/static/src/todo_list/todo_list.xml
new file mode 100644
index 00000000000..dae6f73c921
--- /dev/null
+++ b/awesome_owl/static/src/todo_list/todo_list.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-name="awesome_owl.todo_list">
+        <t t-foreach="todos" t-as="todo" t-key="todo">
+            <TodoItem todo="todo" />
+        </t>
+    </t>
+</templates>
\ No newline at end of file

From b0d9585d65c020e3819aec36a23c6b85a131353d Mon Sep 17 00:00:00 2001
From: "jean (jebou)" <jean.bourgies@gmail.com>
Date: Thu, 30 Jul 2026 15:10:05 +0200
Subject: [PATCH 5/6] [IMP] awesome_owl: add todo list and card

---
 awesome_owl/static/src/card/card.js           | 24 +++++++++++++-
 awesome_owl/static/src/card/card.xml          |  6 ++--
 awesome_owl/static/src/todo_item/todo_item.js | 11 +++++++
 .../static/src/todo_item/todo_item.xml        |  3 +-
 awesome_owl/static/src/todo_list/todo_list.js | 31 +++++++++++++++++--
 .../static/src/todo_list/todo_list.xml        |  5 +--
 6 files changed, 72 insertions(+), 8 deletions(-)

diff --git a/awesome_owl/static/src/card/card.js b/awesome_owl/static/src/card/card.js
index 8c2545c4d2f..5347efdbefe 100644
--- a/awesome_owl/static/src/card/card.js
+++ b/awesome_owl/static/src/card/card.js
@@ -3,8 +3,30 @@ import { Component, useState } from "@odoo/owl";
 export class Card extends Component {
     static template = "awesome_owl.card";
     static props = {
+        id: Number,
         title: String,
         content: String,
-        isCrossedOut: Boolean
+        isCrossedOut: Boolean,
+        toggleState: {
+            Function, optional: true
+        },
+        removeTodo: {
+            Function, optional: true
+        }
+    }
+
+    setup() {
+        this.state = useState({
+            isCrossed: this.props.isCrossedOut
+        })
+    }
+
+    toggleState(event) {
+        this.state.isCrossed = !this.state.isCrossed;
+        this.props.toggleState(this.props.id);
+    }
+
+    removeTodo(event) {
+        this.props.removeTodo(this.props.id);
     }
 }
\ No newline at end of file
diff --git a/awesome_owl/static/src/card/card.xml b/awesome_owl/static/src/card/card.xml
index b01ee6cd3d9..e1383f55013 100644
--- a/awesome_owl/static/src/card/card.xml
+++ b/awesome_owl/static/src/card/card.xml
@@ -3,10 +3,12 @@
     <t t-name="awesome_owl.card">
         <div class="card d-inline-block m-2" style="width: 18rem;">
             <div class="card-body">
-                <h5 class="card-title" t-att-class="{'text-muted text-decoration-line-through': props.isCrossedOut}"><t t-esc="props.title"/></h5>
+                <input type="checkbox" t-on-click="toggleState"/>
+                <h5 class="card-title" t-att-class="{'text-muted text-decoration-line-through': state.isCrossed}"><t t-esc="props.title"/></h5>
                 <p class="card-text">
-                <t t-out="props.content"/>
+                    <t t-out="props.content"/>
                 </p>
+                <span class="fa fa-remove" t-on-click="removeTodo"/>
             </div>
         </div>  
     </t>
diff --git a/awesome_owl/static/src/todo_item/todo_item.js b/awesome_owl/static/src/todo_item/todo_item.js
index 6e6221dfcad..48f4766a025 100644
--- a/awesome_owl/static/src/todo_item/todo_item.js
+++ b/awesome_owl/static/src/todo_item/todo_item.js
@@ -12,6 +12,17 @@ export class TodoItem extends Component {
                 description: String,
                 isCompleted: Boolean
             }
+        },
+        removeTodo: {
+            Function, optional: true
         }
     }
+
+    toggleState(id) {
+
+    }
+
+    removeTodo(id) {
+        this.props.removeTodo(id);
+    }
 }
\ No newline at end of file
diff --git a/awesome_owl/static/src/todo_item/todo_item.xml b/awesome_owl/static/src/todo_item/todo_item.xml
index a4d1e60c867..f06d91638f3 100644
--- a/awesome_owl/static/src/todo_item/todo_item.xml
+++ b/awesome_owl/static/src/todo_item/todo_item.xml
@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="awesome_owl.todo_item">
-        <Card title="props.todo.description" content="props.todo.description" isCrossedOut="props.todo.isCompleted"/>
+        <Card id="props.todo.id" title="props.todo.description" content="props.todo.description" isCrossedOut="props.todo.isCompleted" 
+        removeTodo.bind="removeTodo" toggleState.bind="toggleState"/>
     </t>
 </templates>
\ No newline at end of file
diff --git a/awesome_owl/static/src/todo_list/todo_list.js b/awesome_owl/static/src/todo_list/todo_list.js
index 1ddddef7462..84b022173b3 100644
--- a/awesome_owl/static/src/todo_list/todo_list.js
+++ b/awesome_owl/static/src/todo_list/todo_list.js
@@ -1,4 +1,4 @@
-import { Component, useState } from "@odoo/owl";
+import { Component, useState, useRef, onMounted } from "@odoo/owl";
 import { TodoItem } from "../todo_item/todo_item"
 
 export class TodoList extends Component {
@@ -6,6 +6,33 @@ export class TodoList extends Component {
     static components = { TodoItem }
 
     setup() {
-        this.todos = useState([{ id: 3, description: "buy milk", isCompleted: true }]);
+        this.todos = useState([]);
+        this.state = useState({
+            inputValue: ""
+        });
+        this.inputTodo = useRef('inputTodo');
+        onMounted(() => {
+            this.inputTodo.el.focus()
+        })
+    }
+
+    addTodo(event) {
+        if (event.keyCode !== 13 | this.state.inputValue === "") return;
+
+        this.todos.push({
+            id: this.todos.length,
+            description: this.state.inputValue,
+            isCompleted: false
+        })
+
+        this.state.inputValue = "";
+
+    }
+
+    removeTodo(id) {
+        const idx = this.todos.findIndex(todo => todo.id === id)
+        if (idx !== -1) {
+            this.todos.splice(idx, 1)
+        }
     }
 }
\ No newline at end of file
diff --git a/awesome_owl/static/src/todo_list/todo_list.xml b/awesome_owl/static/src/todo_list/todo_list.xml
index dae6f73c921..3219dd73668 100644
--- a/awesome_owl/static/src/todo_list/todo_list.xml
+++ b/awesome_owl/static/src/todo_list/todo_list.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="awesome_owl.todo_list">
-        <t t-foreach="todos" t-as="todo" t-key="todo">
-            <TodoItem todo="todo" />
+        <input placeholder="Enter a new task" t-on-keyup="addTodo" t-model="state.inputValue" t-ref="inputTodo"/>
+        <t t-foreach="todos" t-as="todo" t-key="todo.id">
+            <TodoItem todo="todo" removeTodo.bind="removeTodo" />
         </t>
     </t>
 </templates>
\ No newline at end of file

From 376e7bc3227fed38ad11348832bbba5133bc4b43 Mon Sep 17 00:00:00 2001
From: "jean (jebou)" <jean.bourgies@gmail.com>
Date: Thu, 30 Jul 2026 16:44:03 +0200
Subject: [PATCH 6/6] [IMP]  awesome_owl: add toggle card

---
 awesome_owl/static/src/card/card.js            | 11 ++++++++---
 awesome_owl/static/src/card/card.xml           |  7 ++++---
 awesome_owl/static/src/todo_item/todo_item.xml |  6 ++++--
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/awesome_owl/static/src/card/card.js b/awesome_owl/static/src/card/card.js
index 5347efdbefe..5a76c3bba4a 100644
--- a/awesome_owl/static/src/card/card.js
+++ b/awesome_owl/static/src/card/card.js
@@ -5,19 +5,20 @@ export class Card extends Component {
     static props = {
         id: Number,
         title: String,
-        content: String,
         isCrossedOut: Boolean,
         toggleState: {
             Function, optional: true
         },
         removeTodo: {
             Function, optional: true
-        }
+        },
+        slots: Object
     }
 
     setup() {
         this.state = useState({
-            isCrossed: this.props.isCrossedOut
+            isCrossed: this.props.isCrossedOut,
+            isOpen: false
         })
     }
 
@@ -29,4 +30,8 @@ export class Card extends Component {
     removeTodo(event) {
         this.props.removeTodo(this.props.id);
     }
+
+    toggleCard(event) {
+        this.state.isOpen = !this.state.isOpen
+    }
 }
\ No newline at end of file
diff --git a/awesome_owl/static/src/card/card.xml b/awesome_owl/static/src/card/card.xml
index e1383f55013..f1e6da548aa 100644
--- a/awesome_owl/static/src/card/card.xml
+++ b/awesome_owl/static/src/card/card.xml
@@ -2,11 +2,12 @@
 <templates xml:space="preserve">
     <t t-name="awesome_owl.card">
         <div class="card d-inline-block m-2" style="width: 18rem;">
-            <div class="card-body">
+            <div class="card-body" t-on-click="toggleCard">
                 <input type="checkbox" t-on-click="toggleState"/>
                 <h5 class="card-title" t-att-class="{'text-muted text-decoration-line-through': state.isCrossed}"><t t-esc="props.title"/></h5>
-                <p class="card-text">
-                    <t t-out="props.content"/>
+                <p class="card-text" t-if="this.state.isOpen">
+                    <t t-slot="default"/>
+                    <t t-out="state.isOpen"/>
                 </p>
                 <span class="fa fa-remove" t-on-click="removeTodo"/>
             </div>
diff --git a/awesome_owl/static/src/todo_item/todo_item.xml b/awesome_owl/static/src/todo_item/todo_item.xml
index f06d91638f3..8941c2c055d 100644
--- a/awesome_owl/static/src/todo_item/todo_item.xml
+++ b/awesome_owl/static/src/todo_item/todo_item.xml
@@ -1,7 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="awesome_owl.todo_item">
-        <Card id="props.todo.id" title="props.todo.description" content="props.todo.description" isCrossedOut="props.todo.isCompleted" 
-        removeTodo.bind="removeTodo" toggleState.bind="toggleState"/>
+        <Card id="props.todo.id" title="props.todo.description" isCrossedOut="props.todo.isCompleted" 
+        removeTodo.bind="removeTodo" toggleState.bind="toggleState">
+            <t t-esc="props.todo.description" /> 
+        </Card>
     </t>
 </templates>
\ No newline at end of file