Countdown to Adventure

{"name":"Countdown to Adventure","description":"Get ready for an exciting countdown to a significant date! This tool will visually track the time remaining until January 30, 2025, at 5:40 GMT+1. With fun animations and interactive elements, you'll enjoy every moment as the clock ticks down. Join us in this engaging countdown experience!","photo":null,"view_count":2,"fork_count":0,"expires_at":null,"created_at":"2025-01-30T16:18:00.437916Z","updated_at":"2025-01-30T16:18:00.437918Z","user_id":5,"status":"PRIVATE","parent_id":null,"id":5679,"user":{"photo":null,"email":null,"recess_id":"b5574579-4904-b775-ad8e-eff5c085f819","created_at":"2023-12-12T12:00:51.087995Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"theop","id":5,"password_hash":null,"updated_at":"2023-12-12T12:00:51.087997Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let targetDate = new Date('January 30, 2025 05:40:00 GMT+1').getTime();\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n textSize(32);\n textAlign(CENTER, CENTER);\n setInterval(updateCountdown, 1000); // Update every second\n}\n\nfunction draw() {\n background(135, 206, 235); // Refresh background each frame\n displayCountdown();\n}\n\nfunction updateCountdown() {\n let now = new Date().getTime();\n let distance = targetDate - now;\n\n let days = Math.floor(distance / (1000 * 60 * 60 * 24));\n let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));\n let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));\n let seconds = Math.floor((distance % (1000 * 60)) / 1000);\n\n // Store the countdown result in a global variable\n window.countdownText = `Days: ${days} Hours: ${hours} Minutes: ${minutes} Seconds: ${seconds}`;\n}\n\nfunction displayCountdown() {\n fill(0); // Black text\n text(window.countdownText, width / 2, height / 2);\n}","style.css":"body { margin: 0; } canvas { display: block; }","index.html":"\n\n\n \n \n Countdown to Adventure\n \n \n\n\n \n\n"},"chat_history":[{"message":"tool that counts down to a specific date, that date being Jan 30 2025 5:40 GMT+1","project_id":5679,"created_at":"2025-01-30T16:18:00.499854Z","output_tokens":null,"sender":"human","code_id":206181,"deleted":0,"input_tokens":null,"id":105831},{"message":"Let's get started!\n Errors:\n","project_id":5679,"created_at":"2025-01-30T16:18:05.667166Z","output_tokens":null,"sender":"client_script","code_id":206181,"deleted":0,"input_tokens":null,"id":105832},{"message":"Great! It sounds like you want to build a countdown tool that counts down to a specific date and time. Could you tell me a bit more about how you'd like this countdown to look? For example, do you want it to display days, hours, minutes, and seconds? Are there any specific visual elements or styles you'd like to include?","project_id":5679,"created_at":"2025-01-30T16:18:05.673610Z","output_tokens":80,"sender":"ai","code_id":206181,"deleted":0,"input_tokens":2491,"id":105833},{"message":".","project_id":5679,"created_at":"2025-01-30T16:18:11.027394Z","output_tokens":null,"sender":"human","code_id":206182,"deleted":0,"input_tokens":null,"id":105834},{"message":"Alright, let's create a countdown tool that will display the time remaining until January 30, 2025, at 5:40 GMT+1. We'll display the days, hours, minutes, and seconds remaining.\n\n### Steps to implement:\n\n1. Calculate the remaining time until the specified date.\n2. Display the countdown on the canvas.\n3. Update the countdown every second.\n\nLet's start by adding the JavaScript code to calculate and display the countdown.\n\n### JavaScript (script.js)\n\nWe'll add a function to calculate the remaining time and another function to display it.\n\n```javascript\nlet targetDate = new Date('January 30, 2025 05:40:00 GMT+1').getTime();\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n textSize(32);\n textAlign(CENTER, CENTER);\n setInterval(updateCountdown, 1000); // Update every second\n}\n\nfunction draw() {\n background(135, 206, 235); // Refresh background each frame\n displayCountdown();\n}\n\nfunction updateCountdown() {\n let now = new Date().getTime();\n let distance = targetDate - now;\n\n let days = Math.floor(distance / (1000 * 60 * 60 * 24));\n let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));\n let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));\n let seconds = Math.floor((distance % (1000 * 60)) / 1000);\n\n // Store the countdown result in a global variable\n window.countdownText = `Days: ${days} Hours: ${hours} Minutes: ${minutes} Seconds: ${seconds}`;\n}\n\nfunction displayCountdown() {\n fill(0); // Black text\n text(window.countdownText, width / 2, height / 2);\n}\n```\n\n### Explanation:\n- **`targetDate`**: The target date and time for the countdown.\n- **`updateCountdown()`**: Calculates the time remaining and formats it into a string.\n- **`displayCountdown()`**: Draws the countdown text onto the canvas.\n- **`setInterval(updateCountdown, 1000)`**: Updates the countdown every second.\n\nThis setup will keep the countdown updated in real-time on the canvas. You can modify the styles if you'd like! Let me know if you have any questions or need further assistance.","project_id":5679,"created_at":"2025-01-30T16:18:11.067480Z","output_tokens":519,"sender":"ai","code_id":206182,"deleted":0,"input_tokens":2487,"id":105835}],"assets":[],"messages_sent":2,"comments":[],"steps":[]}