I'm creating an Ascii-Art web app that takes a text input and displays the ascii-art version of the text. I'm trying to color the art, getting a hex color value from a colorpicker, and then parsing this back into the HTML to change the color. But this is not working.
Code:
Main.go:
package main
import (
"asciiart"
"fmt"
"html/template"
"log"
"net/http"
)
var tmpl *template.Template
func init() {
tmpl = template.Must(template.ParseGlob("static/*.html"))
}
type Data struct {
Rows []string
Color string
}
func main() {
path := "C:/Users/peter/Development/temp/ascii-art-web/main/static/stylesheets"
fs := http.FileServer(http.Dir(path))
http.Handle("/stylesheets/", http.StripPrefix("/stylesheets/", fs))
http.HandleFunc("/", Form)
http.HandleFunc("/asciiart", AsciiArt)
log.Fatal(http.ListenAndServe(":8080", nil))
}
func Form(w http.ResponseWriter, r *http.Request) {
if r.URL.Path != "/" {
w.WriteHeader(http.StatusNotFound)
tmpl.ExecuteTemplate(w, "404.html", nil)
return
}
w.WriteHeader(http.StatusOK)
tmpl.ExecuteTemplate(w, "index.html", nil)
}
func AsciiArt(w http.ResponseWriter, r *http.Request) {
text := r.FormValue("text")
if len(text) < 1 {
tmpl.ExecuteTemplate(w, "index.html", nil)
return
}
test := []rune(text)
for _, v := range test {
if v != 10 {
if v != 13 {
if v < 32 || v > 126 {
w.WriteHeader(http.StatusBadRequest)
tmpl.ExecuteTemplate(w, "400.html", nil)
return
}
}
}
}
font := r.FormValue("font")
colorHex := r.FormValue("pickedcolor")
if colorHex == "" {
colorHex = "#ffffff"
}
fmt.Println(text, font, colorHex)
f := asciiart.ReadFile(font)
if f == nil {
w.WriteHeader(http.StatusInternalServerError)
tmpl.ExecuteTemplate(w, "500.html", nil)
return
}
rows := asciiart.PrintAscii(f, text)
data := Data{
Rows: rows,
Color: colorHex,
}
tmpl.ExecuteTemplate(w, "index.html", data)
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet">
<link rel="stylesheet" href="stylesheets/styles.css">
<title>Ascii-Art-Web</title>
</head>
<body>
<div>
<h1>Ascii-Art-Web</h1>
</div>
<form action="/asciiart" method = "POST">
<div class="box">
<div>
<textarea name="text" id="text" cols="36" rows="8" placeholder="Enter Text"></textarea><br>
</div>
<div>
<div class="selectbox">
<div>
<select name="font" id="font">
<option value="standard">standard</option>
<option value="shadow">shadow</option>
<option value="thinkertoy">thinkertoy</option>
</select>
</div>
<div>
<input name="pickedcolor" type="color" id="colorpicker">
</div>
<div>
<input type="submit">
</div>
</div>
</div>
</div>
</form>
<div class="printbox" id="printbox">
<div>
{{ range .Rows }}
<pre style="color:{{.Color}};">{{ . }}</pre>
{{ end }}
</div>
</div>
</div>
<footer class="footer">
<div>
Made by Harry and Peter
</div>
</footer>
</body>
</html>
It seems to fail here: <pre style="color:{{ .Color }};">{{ . }}</pre> where the value of .Color is not being inserted. I'm only getting one error which says at-rule or selector expected however I'm not sure how else .Color can be inserted here.
Can anyone help?
