efim
/
Learning-HTMX
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: repeating category in template

This commit is contained in:
efim 2023-10-04 06:03:04 +00:00
parent 70ab1e59c4
commit b036002ca8
2 changed files with 23 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
17-results-summary-component-go/main.go
View File

@ -14,6 +14,12 @@ var publicContent embed.FS
//go:embed templates
var templates embed.FS
type Category struct {
Name string
ColorHsl string
Score int
}
// starts webserver that serves html page for exercise
func main() {
// serves public static resources: bundled images, fonts, css
@ -24,11 +30,20 @@ func main() {
io.WriteString(w, "This is temporary here, hello")
})
mySummary := [...]Category{
{Name: "Reaction", ColorHsl: "0deg 100% 67%", Score: 80},
{Name: "Memory", ColorHsl: "39deg 100% 56%", Score: 92},
{Name: "Verbal", ColorHsl: "166deg 100% 37%", Score: 61},
{Name: "Visual", ColorHsl: "234deg 85% 45%", Score: 72},
}
// main page with results summary
http.HandleFunc("/", func(w http.ResponseWriter, req *http.Request) {
templateName := "templates/summary-component.gohtml"
tmpl := template.Must(template.ParseFS(templates, templateName))
tmpl.Execute(w, nil)
if err := tmpl.Execute(w, mySummary); err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
}
})
log.Print("starting server on default :8080")

42
17-results-summary-component-go/templates/summary-component.gohtml
View File

@ -54,49 +54,21 @@
<section class="flex flex-col gap-y-4 p-7">
<h2 class="font-bold">Summary</h2>
<dl class="flex flex-col">
{{ range . }}
<div
class="flex flex-row bg-summary-item-color/10"
style="--summary-item-color-var: 0deg 100% 67%"
>
<dt class="flex-1 text-summary-item-color">Reaction</dt>
style="--summary-item-color-var: {{ .ColorHsl }}"
>
<dt class="flex-1 text-summary-item-color">{{ .Name }}</dt>
<dd class="flex flex-row">
<strong>80</strong>
/ 100
</dd>
</div>
<div
class="flex flex-row bg-summary-item-color/10"
style="--summary-item-color-var: 39deg 100% 56%"
>
<dt class="flex-1 text-summary-item-color">Memory</dt>
<dd class="flex flex-row">
<strong>92</strong>
/ 100
</dd>
</div>
<div
class="flex flex-row bg-summary-item-color/10"
style="--summary-item-color-var: 166deg 100% 37%"
>
<dt class="flex-1 text-summary-item-color">Verbal</dt>
<dd class="flex flex-row">
<strong>61</strong>
/ 100
</dd>
</div>
<div
class="flex flex-row bg-summary-item-color/10"
style="--summary-item-color-var: 234deg 85% 45%"
>
<dt class="flex-1 text-summary-item-color">Visual</dt>
<dd class="flex flex-row">
<strong>72</strong>
<strong>{{ .Score }}</strong>
/ 100
</dd>
</div>
{{ end }}
</dl>
<a
href="/"
href="/"flex flex-row
class="grid place-items-center w-full h-12 text-white rounded-full bg-dark-gray-blue"
>
Continue