Countdown Mania

{"name":"Epic Countdown Quest","description":"Embark on an Epic Countdown Quest to a special date! Watch the clock tick down as you anticipate the big day.","photo":null,"view_count":2,"fork_count":0,"expires_at":null,"created_at":"2024-03-23T14:52:07.550760Z","updated_at":"2024-03-23T14:52:07.550761Z","user_id":5,"status":"PRIVATE","parent_id":null,"id":911,"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":"function countdown() {\n const countdownDate = new Date(\"April 6, 2024\").getTime();\n const now = new Date().getTime();\n const timeLeft = countdownDate - now;\n\n const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));\n const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));\n const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));\n const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);\n\n const countdownElement = document.getElementById('countdown-container');\n countdownElement.innerText = `${days}d : ${hours}h : ${minutes}m : ${seconds}s`;\n\n setTimeout(countdown, 1000);\n}\n\ndocument.addEventListener('DOMContentLoaded', function () {\n countdown();\n});","style.css":"body, html {\r\n height: 100%;\r\n margin: 0;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background-color: black;\r\n}\r\n\r\n#countdown-container {\r\n color: white;\r\n font-size: 60px;\r\n font-family: 'Arial', sans-serif;\r\n}","index.html":"\n\n\n\n \n \n Countdown Mania\n \n\n\n\n

\n \n\n\n"},"chat_history":[{"message":"Let's get started!","project_id":911,"created_at":"2024-03-23T14:52:11.926027Z","output_tokens":null,"sender":"human","code_id":55825,"deleted":0,"input_tokens":null,"id":30844},{"message":"","project_id":911,"created_at":"2024-03-23T14:52:11.932529Z","output_tokens":null,"sender":"ai","code_id":55825,"deleted":0,"input_tokens":null,"id":30845},{"message":"Lets start with a siple clock. it has a black background and big white text, that display the time until the date of April 6th, with a days, hours, minutes, and seconds display, all stringed together seperated by :s.","project_id":911,"created_at":"2024-03-23T14:54:03.039713Z","output_tokens":null,"sender":"human","code_id":55827,"deleted":0,"input_tokens":null,"id":30846},{"message":"```html\n\n\n\n\n \n \n Countdown Mania\n \n\n\n\n

\n \n\n\n\n```\n\n```css\nbody, html {\n height: 100%;\n margin: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: black;\n}\n\n#countdown-container {\n color: white;\n font-size: 60px;\n font-family: 'Arial', sans-serif;\n}\n```\n\n- The CSS code sets the body and html elements to cover the full viewport height, removes default margins, and centers content both vertically and horizontally.\n- It changes the background color of the entire page to black.\n- The countdown container is styled with white color, a large font size for visibility, and uses Arial font.\n\n```javascript\nfunction countdown() {\n const countdownDate = new Date(\"April 6, 2023\").getTime();\n const now = new Date().getTime();\n const timeLeft = countdownDate - now;\n\n const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));\n const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));\n const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));\n const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);\n\n const countdownElement = document.getElementById('countdown-container');\n countdownElement.innerText = `${days}d : ${hours}h : ${minutes}m : ${seconds}s`;\n\n setTimeout(countdown, 1000);\n}\n\ndocument.addEventListener('DOMContentLoaded', function() {\n countdown();\n});\n```\n\n- The `countdown` function calculates the time left until April 6, 2023, by subtracting the current time from the target date.\n- It computes the days, hours, minutes, and seconds left and updates the inner text of the countdown container with this formatted string.\n- It uses `setTimeout` to call itself every second, creating a live countdown.\n- The countdown function is initiated when the document content is fully loaded, ensuring the countdown starts as soon as the page is ready.","project_id":911,"created_at":"2024-03-23T14:54:03.048041Z","output_tokens":null,"sender":"ai","code_id":55827,"deleted":0,"input_tokens":null,"id":30847}],"assets":[],"messages_sent":2,"comments":[],"steps":[{"title":"Customizable Visuals","instruction":"Users can customize the appearance of the countdown clock with different colors, fonts, and animations.","created_at":"2024-03-23T14:52:07.559388","project_id":911,"complete":false,"step_number":0,"updated_at":"2024-03-23T14:52:07.559391","id":4680},{"title":"Event Countdown","instruction":"Set a specific date to countdown to and watch the timer tick down to the big day.","created_at":"2024-03-23T14:52:07.559492","project_id":911,"complete":false,"step_number":1,"updated_at":"2024-03-23T14:52:07.559493","id":4681},{"title":"Interactive Elements","instruction":"Add interactive elements such as confetti, fireworks, or themed visuals to enhance the countdown experience.","created_at":"2024-03-23T14:52:07.559563","project_id":911,"complete":false,"step_number":2,"updated_at":"2024-03-23T14:52:07.559564","id":4682},{"title":"Background Music","instruction":"Integrate background music or sound effects to create a festive atmosphere during the countdown.","created_at":"2024-03-23T14:52:07.559629","project_id":911,"complete":false,"step_number":3,"updated_at":"2024-03-23T14:52:07.559630","id":4683},{"title":"Shareable Countdown","instruction":"Allow users to share their customized countdown on social media or with friends and family.","created_at":"2024-03-23T14:52:07.559692","project_id":911,"complete":false,"step_number":4,"updated_at":"2024-03-23T14:52:07.559693","id":4684},{"title":"Countdown Notifications","instruction":"Enable notifications or reminders as the countdown approaches the specified date.","created_at":"2024-03-23T14:52:07.559758","project_id":911,"complete":false,"step_number":5,"updated_at":"2024-03-23T14:52:07.559759","id":4685},{"title":"Personalized Messages","instruction":"Add the option for users to include personalized messages or quotes alongside the countdown.","created_at":"2024-03-23T14:52:07.559822","project_id":911,"complete":false,"step_number":6,"updated_at":"2024-03-23T14:52:07.559823","id":4686},{"title":"Countdown Completion Celebration","instruction":"Display a special animation or message when the countdown reaches zero, celebrating the arrival of the anticipated date.","created_at":"2024-03-23T14:52:07.559888","project_id":911,"complete":false,"step_number":7,"updated_at":"2024-03-23T14:52:07.559889","id":4687}]}