diff --git a/README.md b/README.md
index a3c7147..d510422 100644
--- a/README.md
+++ b/README.md
@@ -16,13 +16,11 @@
https://github.com/syarul/todomvc-go-templ-htmx-_hyperscript/assets/2774594/fdcba602-73f2-499b-a106-152569d37e80
-As evidence of HTMX's capabilities in emulating the functionalities of modern frameworks, I have incorporated [cypress test](https://github.com/syarul/todomvc-go-templ-htmx-_hyperscript/actions/runs/7412273948/job/20168687544) from https://github.com/cypress-io/cypress-example-todomvc. This demonstration serves to showcase that HTMX, when paired with _hyperscript, can replicate if not all the behaviors typically associated with most modern client framework with minimum needs to write javascript.
+Emulating the functionalities of modern frameworks which is base on React TodoMVC, [cypress test](https://github.com/syarul/todomvc-go-templ-htmx-_hyperscript/actions/runs/7412273948/job/20168687544) from https://github.com/cypress-io/cypress-example-todomvc. This demonstration serves to showcase that HTMX, when paired with _hyperscript, can replicate if not all the behaviors typically associated with most modern client framework with minimum needs to write javascript.
### Security
Check on [this link](https://templ.guide/security/) when using `templ` as HTML template engine.
-> `Do not blame the farmer if you cook the rice til it burns.`
-
### Usage
- install go if you don't have
- run `go mod tidy` to fetch all needed modules
diff --git a/hs/behaviors/footer._hs b/hs/behaviors/footer._hs
index 6bfd048..409d059 100644
--- a/hs/behaviors/footer._hs
+++ b/hs/behaviors/footer._hs
@@ -4,8 +4,8 @@ behavior Footer
if $clearCompleted === undefined
htmx.ajax("GET", "/completed", {target:".filters", swap: "afterend"})
else
- -- need to first set to undefined in case the fetch may return empty which
- -- will indiscriminately leave it in incorrect state
+ -- need 1st set to undefined in case the fetch may return empty which
+ -- will may leave it in incorrect state
set $clearCompleted to undefined
htmx.ajax("GET", "/completed", {target:".clear-completed", swap: "outerHTML"})
send toggleFooter to
\ No newline at end of file
diff --git a/hs/behaviors/todo-count._hs b/hs/behaviors/todo-count._hs
index fecf439..d6852f0 100644
--- a/hs/behaviors/todo-count._hs
+++ b/hs/behaviors/todo-count._hs
@@ -1,4 +1,4 @@
behavior TodoCount
on load send todoCount to me
on todoCount debounced at 100ms
- fetch /update-counts then put the result into me
\ No newline at end of file
+ fetch /update-count then put the result into me
\ No newline at end of file
diff --git a/hs/behaviors/toggle-all._hs b/hs/behaviors/toggle-all._hs
index 9f1f0bf..982e0dc 100644
--- a/hs/behaviors/toggle-all._hs
+++ b/hs/behaviors/toggle-all._hs
@@ -10,5 +10,7 @@ behavior ToggleAll
end
on click
fetch `/swap-json?all=${my.checked}` then
+ send toggleFooter to
send show to
+ send toggleClearCompleted to
send toggle to
\ No newline at end of file
diff --git a/hs/behaviors/toggle-footer._hs b/hs/behaviors/toggle-footer._hs
index 4605dc1..92292b4 100644
--- a/hs/behaviors/toggle-footer._hs
+++ b/hs/behaviors/toggle-footer._hs
@@ -15,10 +15,12 @@ behavior ToggleFooter
add .selected to filter.firstChild
else if filter.textContent !== `${$initial}${$after}`
remove .selected from filter.firstChild
+ else
+ add .selected to filter.firstChild
end
end
- -- update counts
- fetch /update-counts then put the result into
+ -- update count
+ fetch /update-count then put the result into
else
htmx.ajax('GET', '/footer', {target:'.header', swap:'beforeend'})
end
\ No newline at end of file
diff --git a/hs/main._hs b/hs/main._hs
index 34e368f..f0c8d40 100644
--- a/hs/main._hs
+++ b/hs/main._hs
@@ -1,13 +1,13 @@
def hashCache()
- -- this is done to get current location hash then update todo-list and footer
+ -- get current location hash then update todo-list and footer
set $initial to window.location.hash.slice(2).charAt(0).toUpperCase()
set $after to window.location.hash.slice(3)
fetch `/set-hash?name=${$initial}${$after}` then
send show to
send toggleFooter to
end
- -- this to handle popstate event such as back/forward button
- -- where it will automatically calling hashCache _hyperscript function
+ -- handle popstate event such as back/forward button
+ -- automatically call hashCache _hyperscript function
js
window.addEventListener('popstate', function(){
hashCache();
diff --git a/main.go b/main.go
index 174aa8a..a2e03a5 100644
--- a/main.go
+++ b/main.go
@@ -95,7 +95,7 @@ func main() {
http.Handle("/set-hash", http.HandlerFunc(setHash))
http.Handle("/learn.json", http.HandlerFunc(learnHandler))
- http.Handle("/update-counts", http.HandlerFunc(t.updateCounts))
+ http.Handle("/update-count", http.HandlerFunc(t.updateCount))
http.Handle("/toggle-all", http.HandlerFunc(t.toggleAllHandler))
http.Handle("/completed", http.HandlerFunc(t.clearCompleted))
http.Handle("/footer", http.HandlerFunc(t.footerHandler))
@@ -346,7 +346,7 @@ func (t *todos) clearCompleted(w http.ResponseWriter, r *http.Request) {
}
}
-func (t *todos) updateCounts(w http.ResponseWriter, r *http.Request) {
+func (t *todos) updateCount(w http.ResponseWriter, r *http.Request) {
uncompletedCount := countNotDone(*t)
plural := ""
if uncompletedCount != 1 {
diff --git a/todomvc.templ b/todomvc.templ
index 5d4a72b..2813c07 100644
--- a/todomvc.templ
+++ b/todomvc.templ
@@ -89,7 +89,7 @@ templ toggleMain(todos []Todo, checked bool) {
}
}
-// indescriminatelyx
+
templ footer(todos []Todo, filters []Filter, hasCompleted bool) {
if len(todos) != 0 {