From 74bc939843ae5c35fbd367c1ef0144b6074cfefe Mon Sep 17 00:00:00 2001
From: Daniel Hader <dhader96@gmail.com>
Date: Fri, 15 May 2026 09:12:24 -0500
Subject: problem loading via javascript and some problems initialized in sql

---
 src/database/sql/initialize.sql | 35 +++++++++++++++++++++++++++++++++++
 static/index.html               | 36 +++++++++++++++++++++++++++++-------
 2 files changed, 64 insertions(+), 7 deletions(-)

diff --git a/src/database/sql/initialize.sql b/src/database/sql/initialize.sql
index 510c427..d5fb9e0 100644
--- a/src/database/sql/initialize.sql
+++ b/src/database/sql/initialize.sql
@@ -19,3 +19,38 @@ CREATE TABLE IF NOT EXISTS submission (
     language   TEXT NOT NULL,
     validated  INTEGER NOT NULL
 );
+
+INSERT INTO problem (title, description) VALUES (
+    'Prime Numbers',
+    'A prime number is a positive integer, greater than 1, which is only divisible by 1 and itself. Write a program that prints out the first 1,000,000 consecutive prime numbers.'
+);
+
+INSERT INTO problem (title, description) VALUES (
+    'The Look-and-Say Seqeunce',
+    'Starting with the number 1, the look-and-say sequence is defined so that the next number describes the previous one. Since "1" consists of one "1", the next nummber in the sequence is 11 (one-one). Since 11 has two "1"s, the next number would be 21 (two-one). The sequence continues 1, 11, 21, 1211, 111221, 312211, and so on. Write a program that prints out the first 100 consecutive numbers of the look-and-say sequence.'
+);
+
+INSERT INTO problem (title, description) VALUES (
+    'Just Printing Numbers',
+    'For this problem, you just need to print out the first 1,000,000,000 positive integers. Sounds easy right? Well you need to print them in English, not as digits. So instead of "123", you should print "one hundred twenty-three".'
+);
+
+INSERT INTO problem (title, description) VALUES (
+    'Periodic Table',
+    'Write a program that prints out the names of the first 118 elements of the periodic table in alphabetical order, then prints them again in order by atomic number.'
+);
+
+INSERT INTO problem (title, description) VALUES (
+    'Draw an ASCII Cat',
+    'Create a program that draws a picture of a cat using ASCII characters. To make this problem interesting, your ASCII art should be drawn on a grid of at least 3600 ASCII characters. This grid could be 80&times;45 or 60&times;60 or even 900&times;4 if you can somehow draw a cat in that space. Keep in mind that emojis are <b>not</b> ASCII characters so don''t get any funny ideas. For an official list of all ASCII characters, refer to <a target="_blank" href="https://www.unicode.org/charts/PDF/U0000.pdf">this document</a>.'
+);
+
+INSERT INTO problem (title, description) VALUES (
+    'As Big a Number as Possible',
+    'This challenge is a bit different from the others. Instead of trying to make as small a program as possible, you are trying to make a program which prints out as big a number as possible. Your source code should be no longer than 512 bytes.'
+);
+
+INSERT INTO problem (title, description) VALUES (
+    'Quines',
+    'Named after the logician and philosopher Willard Van Orman Quine, a "quine" is a program which prints out its own source code. Write a "quine", that is a program which prints out exactly its own source code. You should be able to compile or run the output of your program itself and it should behave identically to the original program you made.'
+);
diff --git a/static/index.html b/static/index.html
index 37a831f..8162ac9 100644
--- a/static/index.html
+++ b/static/index.html
@@ -14,25 +14,47 @@
 
              const result = await response.json();
              console.log(result);
+
+             const problems_div = document.getElementById("problems");
+             while (problems_div.firstChild) {
+                 problems_div.removeChild(problems_div.lastChild);
+             }
+
+             for (const problem of result) {
+                 const problem_div = document.createElement("div");
+                 problem_div.className = "problem";
+                 problems_div.appendChild(problem_div);
+                 
+                 const title = document.createElement("h2");
+                 title.innerHTML = problem.title;
+                 problem_div.appendChild(title);
+                 
+                 const description = document.createElement("p");
+                 description.innerHTML = problem.description;
+                 problem_div.appendChild(description);
+             }
          }
         </script>
     </head>
 
-    <body>
+    <body onload="fetch_problems()">
         <div id="layout">
             <div id="container">
-                <div id="holes">
+                <div id="content">
 
-                    <button onclick="fetch_problems()">Hello</button>
                     <h1>C&amp;! Code Golf Leaderboard</h1>
 
                     <p>In golf, the goal is to get a ball into a hole in as few swings as possible. The goal of code golf is similarly to solve a problem in as few bytes (of source code) as possible. The following is a list of programming challenges. Your task is to try and solve them in Python with as little code as possible measured in bytes.</p>
 
-
-                    <div class="problem">
-                        <h2>Title</h2>
-                        <p>Description</p>
+                    <button onclick="fetch_problems()">Refresh Problems</button>
+                    <div id="problems">
+                        <div class="problem">
+                            <h2>Title</h2>
+                            <p>Description</p>
+                        </div>
                     </div>
+                       
+                    <center>&copy; 2026 Daniel Hader</center>
                 </div>
             </div>
         </div>
-- 
cgit v1.2.3