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

feat: split results into insertable component 

still not fully sure how this all operates, but allright.
This commit is contained in:
efim 2023-10-04 09:13:12 +00:00
parent f4ab1ac7ec
commit 2cb3cc7c35
4 changed files with 59 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -60,7 +60,7 @@ func main() {
// main page with results summary // main page with results summary
http.HandleFunc("/", func(w http.ResponseWriter, req *http.Request) { 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)) tmpl := template.Must(template.ParseFS(templates, "templates/index.gohtml", templateName))
if err := tmpl.Execute(w, resultsData); err != nil { if err := tmpl.Execute(w, resultsData); err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError) http.Error(w, err.Error(), http.StatusInternalServerError)
} }

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

@ -540,6 +540,10 @@ video {
bottom: 0.25rem; bottom: 0.25rem;
} }
.block {
display: block;
}
.flex { .flex {
display: flex; display: flex;
} }

45
17-results-summary-component-go/templates/index.gohtml Normal file
View File

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- displays site properly based on user's device -->
<link
rel="stylesheet"
href="static/public/out.css"
type="text/css"
media="screen"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="static/public/images/favicon-32x32.png"
/>
<title>Frontend Mentor | Results summary component</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
</style>
</head>
<body>
<main class="grid place-items-center w-screen h-screen">
{{ template "results-summary-component" . }}
</main>
<footer class="fixed inset-x-0 bottom-1 attribution">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
>Frontend Mentor</a
>. Coded by <a href="#">Your Name Here</a>.
</footer>
</body>
</html>

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

@ -18,7 +18,7 @@
href="static/public/images/favicon-32x32.png" href="static/public/images/favicon-32x32.png"
/> />
<title>Frontend Mentor | Results summary component</title> <title>THIS IS FILE FOR THE COMPONENT</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 --> <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style> <style>
@ -33,6 +33,8 @@
</head> </head>
<body> <body>
<main class="grid place-items-center w-screen h-screen"> <main class="grid place-items-center w-screen h-screen">
{{/* only things inside of block component are used, yay */}}
{{ block "results-summary-component" . }}
<article <article
class="flex flex-col w-full h-full md:flex-row md:bg-white md:rounded-3xl md:shadow-2xl md:shadow-light-lavender/50 md:w-[715px] md:h-[500px]" class="flex flex-col w-full h-full md:flex-row md:bg-white md:rounded-3xl md:shadow-2xl md:shadow-light-lavender/50 md:w-[715px] md:h-[500px]"
> >
@ -46,14 +48,16 @@
<div <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" 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">{{ .TotalScore }}</span> <span class="text-5xl font-extrabold md:text-6xl"
>{{ .TotalScore }}</span
>
<span class="text-pale-blue"> of 100 </span> <span class="text-pale-blue"> of 100 </span>
</div> </div>
<div class="flex flex-col gap-y-3 items-center"> <div class="flex flex-col gap-y-3 items-center">
<h2 class="text-xl font-bold md:text-2xl">Great</h2> <h2 class="text-xl font-bold md:text-2xl">Great</h2>
<p class="text-sm text-center md:text-base text-pale-blue"> <p class="text-sm text-center md:text-base text-pale-blue">
You scored higher than {{ .UpperPercent }}% of the people who have taken these You scored higher than {{ .UpperPercent }}% of the people who have
tests. taken these tests.
</p> </p>
</div> </div>
</section> </section>
@ -88,6 +92,7 @@
</a> </a>
</section> </section>
</article> </article>
{{ end }}
</main> </main>
<footer class="fixed inset-x-0 bottom-1 attribution"> <footer class="fixed inset-x-0 bottom-1 attribution">
Challenge by Challenge by