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

feat: other fields taken from template data

This commit is contained in:
efim 2023-10-04 08:32:43 +00:00
parent 2769f5e8dc
commit f4ab1ac7ec
3 changed files with 28 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -26,6 +26,12 @@ func iconPath(categoryName string) string {
return fmt.Sprintf("/static/public/images/icon-%s.svg", categoryName)
}
type ResultsSummaryData struct {
Categories []Category
TotalScore int
UpperPercent int
}
// starts webserver that serves html page for exercise
func main() {
// serves public static resources: bundled images, fonts, css
@ -36,22 +42,26 @@ func main() {
io.WriteString(w, "This is temporary here, hello")
})
mySummary := [...]Category{
{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")},
resultsData := ResultsSummaryData{
Categories: []Category{
{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")},
},
TotalScore: 76,
UpperPercent: 65,
}
// 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))
if err := tmpl.Execute(w, mySummary); err != nil {
if err := tmpl.Execute(w, resultsData); err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
}
})

4
17-results-summary-component-go/public/out.css
View File

@ -646,6 +646,10 @@ video {
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-50\% {
--tw-gradient-from-position: 50%;
}
.to-light-slate-blue {
--tw-gradient-to: hsl(252, 100%, 67%) var(--tw-gradient-to-position);
}

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

@ -38,7 +38,7 @@
>
<section
id="results-pane"
class="flex flex-col gap-y-4 items-center px-10 pt-4 pb-8 text-white bg-gradient-to-t rounded-b-3xl md:justify-around md:w-1/2 md:rounded-3xl from-light-royal-blue to-light-slate-blue"
class="flex flex-col gap-y-4 items-center px-10 pt-4 pb-8 text-white bg-gradient-to-t from-50% rounded-b-3xl md:justify-around md:w-1/2 md:rounded-3xl from-light-royal-blue to-light-slate-blue"
>
<h1 class="font-bold md:pt-2 md:text-xl text-pale-blue">
Your Result
@ -46,13 +46,13 @@
<div
class="flex flex-col justify-center items-center w-32 h-32 bg-gradient-to-t rounded-full md:w-44 md:h-44 from-violet-blue/60 to-persian-blue/75"
>
<span class="text-5xl font-extrabold md:text-6xl">76</span>
<span class="text-5xl font-extrabold md:text-6xl">{{ .TotalScore }}</span>
<span class="text-pale-blue"> of 100 </span>
</div>
<div class="flex flex-col gap-y-3 items-center">
<h2 class="text-xl font-bold md:text-2xl">Great</h2>
<p class="text-sm text-center md:text-base text-pale-blue">
You scored higher than 65% of the people who have taken these
You scored higher than {{ .UpperPercent }}% of the people who have taken these
tests.
</p>
</div>
@ -64,7 +64,7 @@
>
<h2 class="font-bold md:text-xl">Summary</h2>
<dl class="flex flex-col gap-y-4">
{{ range . }}
{{ range .Categories }}
<div
class="flex flex-row items-center px-5 h-12 text-sm rounded-lg bg-summary-item-color/5"
style="--summary-item-color-var: {{ .ColorHsl }}"