4.2 added

2026-03-23 23:44:26 +09:00
parent a5b0cc7b8f
commit a869f49907
3 changed files with 59 additions and 0 deletions
--- a/w4_2_recursion_countdown/index.html
+++ b/w4_2_recursion_countdown/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Document</title>
+</head>
+
+<body>
+    <script src="https://cdn.jsdelivr.net/npm/js-confetti@latest/dist/js-confetti.browser.js"></script>
+
+    <script defer src="index.js"></script>
+
+    <h1 id="countdown">x</h1>
+</body>
+
+</html>
--- a/w4_2_recursion_countdown/index.js
+++ b/w4_2_recursion_countdown/index.js
@@ -0,0 +1,25 @@
+function countDown(n) {
+  if (n == 0) {
+    celebrate();
+    setText('Happy New Year!');
+  } else {
+    setText(n);
+    setTimeout(() => {
+      countDown(n - 1);
+    }, 1000);
+  }
+}
+
+const n = 10;
+setText(n);
+countDown(n);
+
+// Helpers
+function setText(n) {
+  document.getElementById('countdown').textContent = n;
+}
+
+function celebrate() {
+  const jsConfetti = new JSConfetti();
+  jsConfetti.addConfetti();
+}
--- a/w4_2_recursion_countdown/style.css
+++ b/w4_2_recursion_countdown/style.css
@@ -0,0 +1,15 @@
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-color: #f0f0f0;
+  font-family: Arial, sans-serif;
+  margin: auto;
+}
+
+#countdown {
+  font-size: 10rem;
+  color: #333;
+  text-align: center;
+}