Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Easter Countdown
ID	6358884541382656
Created	22 days ago, 1742911911234
Updated	22 days ago, 1742911910974
Code	<!DOCTYPE html> <html lang="en-US"> <!-- Program exported to HTML using the KA Project Exporter by @MushyAvocado https://www.khanacademy.org/computer-programming/ka-project-exporter/5195486791385088 --> <head> <meta charset="utf-8"> <title>Easter Countdown</title> <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=Arizonia&display=swap" rel="stylesheet"> <style> html, body { background-color: black; overflow: hidden; width: 100%; height: 100%; margin: 0px; padding: 0px; font-family: "Arizonia", cursive; } body { padding: 0px; margin: 0px; display: flex; justify-content: center; align-items: center; width: 100%; } canvas { width: fit-content; height: fit-content; } </style> </head> <body> <!-- Canvases with a class of "sketch" are applied to the program in the order importPJS() is called. --> <canvas class="sketch"></canvas> <!-- The exporter script must be loaded before the program script --> <script src="https://cdn.jsdelivr.net/gh/Mushy-Avocado/KA-exporter@main/exporter.js"></script> <!-- Run Khan Academy program and import PJS --> <script> function program() { title("Easter Countdown"); size(400, 400, 1); rectMode(CENTER); / Outlined text, credit to A Random Coder (@ARandomCoder123) / // { var OutlinedText = function (txt, x, y, weight, main, outline, inc) { inc = inc \|\| 10; fill(outline); for (var i = 0; i < 360; i += inc) { text(txt, x + sin(i) * weight, y + cos(i) * weight); } fill(main); text(txt, x, y); }; //} / Images / // { background(0, 0, 0, 0); noStroke(); fill(255, 249, 138); ellipse(200, 386, 100, 100) fill(0); beginShape(); vertex(0, 375); vertex(0, 400); vertex(175, 400); vertex(160, 390); vertex(165, 380); vertex(163, 370); vertex(175, 365); vertex(185, 360); vertex(200, 365); vertex(220, 380); vertex(220, 385); vertex(225, 400); vertex(400, 400); vertex(350, 350); vertex(300, 340); vertex(250, 310); vertex(200, 300); vertex(150, 290); vertex(100, 340); vertex(50, 350); endShape(); rect(200, 225, 15, 175); rect(200, 185, 100, 15); rect(150, 275, 7, 75); rect(150, 260, 50, 7); rect(250, 275, 7, 75); rect(250, 260, 50, 7); fill(255, 249, 138, 150); for (var i = 0; i < 5; i++) { pushMatrix(); translate(200, 400); rotate(i * 40); translate(-200, -400); quad(200, 400, -300, 390, -300, 250, 200, 395); popMatrix(); } filter(BLUR, 2); var bkImg = get(); //} / Draw function / // { draw = function () { rectMode(CORNER); for (var i = 0; i < 400; i++) { var lerpC = lerpColor(color(100), color(27, 83, 224), i / 400); noStroke(); fill(lerpC); rect(0, i, 400, 1); } image(bkImg, 0, 0); fill(0); textFont(createFont("cursive")); textSize(30); if (month() === 3) { OutlinedText((31 - day() + 20) + " days", 20, 80, 2, color(0), color(255)); } else if (month() === 4) { OutlinedText((20 - day()) + " days", 20, 80, 2, color(0), color(255)); } OutlinedText((24 - hour()) + " hours", 20, 120, 2, color(0), color(255)); OutlinedText((60 - minute()) + " minutes", 20, 160, 2, color(0), color(255)); OutlinedText((60 - second()) + " seconds", 20, 200, 2, color(0), color(255)); OutlinedText("until Easter!", 20, 300, 2, color(0), color(255)); }; //} } runPJS(program); // Add reload button on KA --> <script> </script> </body> </html>
Folds	50,176
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgIfy8uulCww
Votes	51
Spin-Offs	7
Type	WEBPAGE
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	justusscott
Author Name	justusscott
Author ID	kaid_113640876312664387810945
Author Profile Access	PUBLIC

Archive Data

Added	17 days ago, 1743306169048
Updated	17 days ago, 1743306169048
Source Deleted	unknown