From 1502a0a035e9312ee0bc1abf0b69316aba3e8250 Mon Sep 17 00:00:00 2001
From: Lukas Hufnagel <rageskilln@gmail.com>
Date: Tue, 16 Apr 2024 14:09:01 +0200
Subject: [PATCH] adding comments
---
src/main.ts | 4 ++--
src/scripts/welcome.ts | 19 +++++++++----------
2 files changed, 11 insertions(+), 12 deletions(-)
diff --git a/src/main.ts b/src/main.ts
index 861711d..6b241cf 100755
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,7 +1,7 @@
-import "@/styles/index.scss";
+import "@/styles/index.scss"; // imports the default styles
import {drawSmiley, getMessage} from "@/scripts/welcome.ts";
-const app = document.querySelector('#app') as HTMLDivElement;
+const app = document.querySelector('#app') as HTMLDivElement; // selects the entry point of the HTML
app.innerHTML = `
<h1>${getMessage()}</h1>
diff --git a/src/scripts/welcome.ts b/src/scripts/welcome.ts
index be23fab..d1dd4ba 100644
--- a/src/scripts/welcome.ts
+++ b/src/scripts/welcome.ts
@@ -1,34 +1,33 @@
-import data from "@/data/test.json";
+import data from "@/data/test.json"; // import a JSON file
+import * as d3 from "d3"; // import the d3 library
-import * as d3 from "d3";
-
-export function getMessage(): string {
+export function getMessage(): string { // some function that returns a string
return data.message;
}
export function drawSmiley() {
- const svg = d3.select("#smiley");
+ const svg = d3.select("#smiley"); // select the SVG element
- svg.append("circle")
+ svg.append("circle") // draws the outer circle for the face itself
.attr("cx", 50)
.attr("cy", 50)
.attr("r", 40)
.attr("fill", "yellow");
- svg.append("circle")
+ svg.append("circle") // draws the left eye at (30, 30)
.attr("cx", 30)
.attr("cy", 30)
.attr("r", 5)
.attr("fill", "black");
- svg.append("circle")
+ svg.append("circle") // draws the right eye at (70, 30)
.attr("cx", 70)
.attr("cy", 30)
.attr("r", 5)
.attr("fill", "black");
- svg.append("path")
- .attr("d", "M 30 60 Q 50 80 70 60")
+ svg.append("path") // draws the mouth
+ .attr("d", "M 30 60 Q 50 80 70 60") // d sets the path's data, M (move to) 30 60 selects the starting point, Q (quadratic beziercurve) 50 80 70 60 sets the control point and end point
.attr("stroke", "black")
.attr("stroke-width", 2)
.attr("fill", "none");
--
GitLab