{"id":15069906,"url":"https://github.com/mmgrant73/acronym","last_synced_at":"2026-01-03T05:07:34.923Z","repository":{"id":57400672,"uuid":"231052472","full_name":"mmgrant73/acronym","owner":"mmgrant73","description":"Acronym is a custom web component. It is a text box that holds an acronym.  When a mouse is over the element, it will expand and show the meaning of the acronym.  When the mouse is no longer over the element, it will contact to just show the acronym again. For example, NASA will expand to National Aeronautics and Space Administration.","archived":false,"fork":false,"pushed_at":"2019-12-31T08:38:30.000Z","size":44,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-22T19:48:31.969Z","etag":null,"topics":["component","css","css3","html","html5","javascript","web"],"latest_commit_sha":null,"homepage":"","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/mmgrant73.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}},"created_at":"2019-12-31T08:06:44.000Z","updated_at":"2020-02-08T09:19:03.000Z","dependencies_parsed_at":"2022-09-05T03:01:28.811Z","dependency_job_id":null,"html_url":"https://github.com/mmgrant73/acronym","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmgrant73%2Facronym","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmgrant73%2Facronym/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmgrant73%2Facronym/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmgrant73%2Facronym/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mmgrant73","download_url":"https://codeload.github.com/mmgrant73/acronym/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243838004,"owners_count":20355970,"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":["component","css","css3","html","html5","javascript","web"],"created_at":"2024-09-25T01:45:28.354Z","updated_at":"2026-01-03T05:07:34.872Z","avatar_url":"https://github.com/mmgrant73.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/owner/my-element)\n# Acronym:\n\n### What is it?\nAcronym is a custom web component.  It is a text box that holds an acronym.  When a mouse is over the element, it will expand and show the meaning of the acronym.  When the mouse is no longer over the element, it will contact to just show the acronym again.\nFor example, NASA will expand to National Aeronautics and Space Administration.\n\n![Alt text](https://github.com/mmgrant73/acronym/blob/master/acronym.png?raw=true \"Image-Acronym\")\n\n[Click here for Demo](https://mmgrant73.github.io/acronym/acronym.html) \n\n### How to use it?\nIt is quite easy to use it on your webpage. Just follow the below steps:\n\n1. Include the link to the script file that holds the this custom web component (progress-circle.js) near the bottom of \n   the body section of your webpage.  See below\n   \n```\n    \u003cscript src=\"./acronym.js\"\u003e\u003c/script\u003e\n```\n\n2.  Then use the custom element tags on your webpage.\n\n```\n    \u003cx-acronym type=\"vertical\" innerstyle=\"box-shadow: 6px 6px 3px grey; text-shadow: 0 0 3px #FF0000;\"\u003e\n        National Aeronautics and Space Administration\n    \u003c/x-acronym\u003e\n```\n\nNote: The inner text of this custom element will be used to set the acronym.  It will take the first letter of each word\nand that will display in the text box.  When expanded the whole text will be shown.\nThat is all you have to do to use this custom element.  There is an example HTML page (acronym.html) that shows how to use it.\n\n```\n    \u003c!DOCTYPE html\u003e\n    \u003chtml\u003e\n      \u003chead\u003e\n        \u003ctitle\u003eAcronym Web Component\u003c/title\u003e\n        \u003cscript\u003e\n            function acronymclick(){\n                alert(\"click event has been triggered!!\");\n            }\n        \u003c/script\u003e\n      \u003c/head\u003e\n      \n      \u003cbody\u003e\n      \n        \u003ch1\u003eThis is a template of the web component \"acronym\"\u003c/h1\u003e\n        \u003cx-acronym type=\"vertical\" onclick=\"acronymclick()\" innerstyle=\"box-shadow: 6px 6px 3px grey; text-shadow: 0 0 3px #FF0000; background-color: Beige; border-radius: 15px; border: 3px solid black;\"\u003e\n            Matthew Monroe Grant\n        \u003c/x-acronym\u003e\n\n        \u003cscript src=\"./acronym.js\"\u003e\u003c/script\u003e\n\n      \u003c/body\u003e\n      \n    \u003c/html\u003e\n```\n\n### There are only three properties (2 attributes and the innerText) that you can use to customize this element.\n\n1. innerText - The first letter of each word will be used for the acronym and when expanded the whole text will be shown\n2. type - Is how this custom element will be displayed there are two options (horizontal or veritical)\n3. innerstyle - this attibutes allows you to set the style for the text box (see example to see how this is used)\n\n### To Do:\n1. Add a way to ignore words in the innerText that you don't want to add to the acronym.\nMaybe by using Upper and Lowercase to determine which to ignore.\nFor example: National Aeronautics and Space Administration - \"and\" will be ignored and the acronym will be NASA\n2. Fix it so that one can use text-align: center.  See note below\n\nNote: That each of these attributes have defaults values but you need to a least set the innerText.\nAlso, don't use 'text-align: center' for this element as it mess up the spacing.  \nInstead use a wrapper div with 'margin: auto', if you want to center the element\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmgrant73%2Facronym","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmmgrant73%2Facronym","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmgrant73%2Facronym/lists"}