{"id":27117779,"url":"https://github.com/codebyashuu/age-o-meter","last_synced_at":"2025-04-07T06:36:29.538Z","repository":{"id":274293140,"uuid":"922483483","full_name":"CodeByAshuu/Age-O-Meter","owner":"CodeByAshuu","description":"a simple JavaScript age calculator","archived":false,"fork":false,"pushed_at":"2025-01-26T10:51:42.000Z","size":0,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-26T11:25:59.319Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://codebyashuu.github.io/Age-O-Meter/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CodeByAshuu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-26T10:42:57.000Z","updated_at":"2025-01-26T10:55:01.000Z","dependencies_parsed_at":"2025-01-26T11:36:40.017Z","dependency_job_id":null,"html_url":"https://github.com/CodeByAshuu/Age-O-Meter","commit_stats":null,"previous_names":["codebyashuu/age-o-meter"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeByAshuu%2FAge-O-Meter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeByAshuu%2FAge-O-Meter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeByAshuu%2FAge-O-Meter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeByAshuu%2FAge-O-Meter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodeByAshuu","download_url":"https://codeload.github.com/CodeByAshuu/Age-O-Meter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247608227,"owners_count":20965950,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-04-07T06:36:28.972Z","updated_at":"2025-04-07T06:36:29.523Z","avatar_url":"https://github.com/CodeByAshuu.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Age-O-Meter\n**Creating a Year Calculator App with HTML, CSS, and JavaScript**\n\n\u003cimg width=\"1680\" alt=\"Screenshot 2025-01-26\" src=\"https://github.com/CodeByAshuu/Age-O-Meter/blob/main/design/desktop-completed.jpg\"\u003e\n\n\nAre you curious to know exactly how many years, months, days, hours, and minutes you've been alive? Look no further than the Age Calculator! In this tutorial, we'll walk you through building a stylish and functional web application that calculates your age based on the birthdate you provide. Let's dive in!\n\n## **HTML Structure**\n\nWe start by setting up the basic structure of our app using HTML. Save the following code in an `index.html` file:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\n\u003chead\u003e\n  \u003c!-- Meta tags, title, and CSS link --\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n  \u003cmain class=\"container\" role=\"main\"\u003e\n    \u003cdiv class=\"content\"\u003e\n      \u003c!-- Input fields for day, month, and year --\u003e\n      \u003c!-- Calculate button --\u003e\n      \u003c!-- Display results --\u003e\n    \u003c/div\u003e\n  \u003c/main\u003e\n  \u003cfooter class=\"attribution\" role=\"contentinfo\"\u003e\n    \u003c!-- Attribution text --\u003e\n  \u003c/footer\u003e\n  \u003cscript src=\"./assets/js/main.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\n\u003c/html\u003e\n```\n\n## **Styling with CSS**\n\nTo make our app visually appealing, let's apply some CSS styles. Create a file named `style.css` and add the following code:\n\n```css\n/* Your CSS styles */\n```\n\n## **Adding Functionality with JavaScript**\n\nNow, let's bring our app to life by adding JavaScript functionality. Create a file named `main.js` and insert the following code:\n\n```javascript\n// JavaScript functionality\n```\n\n## **Putting It All Together**\n\nReplace the placeholders in the HTML, CSS, and JavaScript files with the respective code snippets provided above.\n\nWith the HTML structure, CSS styles, and JavaScript functionality in place, you've successfully built a Age Calculator! Your users can input their birthdate, and the app will calculate their age in years, months, days, hours, and minutes. This interactive and stylish app will surely impress your friends and family.\n\nFeel free to customize the colors, fonts, and layout to match your personal style. You can even extend the functionality by adding more features like showing the age in weeks, displaying a countdown to the next birthday, or allowing users to calculate the age of historical figures. The possibilities are endless!\n\n**Conclusion**\n\nCongratulations on creating your very own Year Calculator App using HTML, CSS, and JavaScript. This project demonstrates how powerful and versatile web development can be, allowing you to create interactive and user-friendly applications that serve a variety of purposes. Whether you're a beginner or an experienced developer, this project provides a great opportunity to practice your skills and learn new techniques along the way. Have fun exploring different ideas and enhancing the app's functionality!\n\nHappy Coding ☕️\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodebyashuu%2Fage-o-meter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodebyashuu%2Fage-o-meter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodebyashuu%2Fage-o-meter/lists"}