diff --git a/17-results-summary-component-go/main.go b/17-results-summary-component-go/main.go index 0c70eda..ac7efab 100644 --- a/17-results-summary-component-go/main.go +++ b/17-results-summary-component-go/main.go @@ -2,6 +2,7 @@ package main import ( "embed" + "fmt" "html/template" "io" "log" @@ -18,6 +19,11 @@ type Category struct { Name string ColorHsl string Score int + IconPath string +} + +func iconPath(categoryName string) string { + return fmt.Sprintf("/static/public/images/icon-%s.svg", categoryName) } // starts webserver that serves html page for exercise @@ -31,15 +37,19 @@ func main() { }) 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}, + {Name: "Reaction", ColorHsl: "0deg 100% 67%", + Score: 80, IconPath: iconPath("reaction")}, + {Name: "Memory", ColorHsl: "39deg 100% 56%", + Score: 92, IconPath: iconPath("memory")}, + {Name: "Verbal", ColorHsl: "166deg 100% 37%", + Score: 61, IconPath: iconPath("verbal")}, + {Name: "Visual", ColorHsl: "234deg 85% 45%", + Score: 72, IconPath: iconPath("visual")}, } // main page with results summary http.HandleFunc("/", func(w http.ResponseWriter, req *http.Request) { - templateName := "templates/summary-component.gohtml" + templateName := "templates/summary-component.gohtml" tmpl := template.Must(template.ParseFS(templates, templateName)) if err := tmpl.Execute(w, mySummary); err != nil { http.Error(w, err.Error(), http.StatusInternalServerError) diff --git a/17-results-summary-component-go/public/out.css b/17-results-summary-component-go/public/out.css index 83635a6..35a23b0 100644 --- a/17-results-summary-component-go/public/out.css +++ b/17-results-summary-component-go/public/out.css @@ -600,6 +600,10 @@ video { border-radius: 9999px; } +.rounded-lg { + border-radius: 0.5rem; +} + .rounded-b-3xl { border-bottom-right-radius: 1.5rem; border-bottom-left-radius: 1.5rem; @@ -610,8 +614,8 @@ video { background-color: hsl(224 30% 27% / var(--tw-bg-opacity)); } -.bg-summary-item-color\/10 { - background-color: hsl(var(--summary-item-color-var) / 0.1); +.bg-summary-item-color\/5 { + background-color: hsl(var(--summary-item-color-var) / 0.05); } .bg-gradient-to-t { @@ -647,10 +651,19 @@ video { padding-right: 2.5rem; } +.px-5 { + padding-left: 1.25rem; + padding-right: 1.25rem; +} + .pb-8 { padding-bottom: 2rem; } +.pr-2 { + padding-right: 0.5rem; +} + .pt-4 { padding-top: 1rem; } @@ -682,6 +695,11 @@ video { font-weight: 800; } +.text-dark-gray-blue { + --tw-text-opacity: 1; + color: hsl(224 30% 27% / var(--tw-text-opacity)); +} + .text-pale-blue { --tw-text-opacity: 1; color: hsl(221 100% 96% / var(--tw-text-opacity)); diff --git a/17-results-summary-component-go/templates/summary-component.gohtml b/17-results-summary-component-go/templates/summary-component.gohtml index d3add28..1c23cd2 100644 --- a/17-results-summary-component-go/templates/summary-component.gohtml +++ b/17-results-summary-component-go/templates/summary-component.gohtml @@ -53,16 +53,17 @@

Summary

-
+
{{ range . }}
+
{{ .Name }}
- {{ .Score }} - / 100 + {{ .Score }} + / 100
{{ end }}