{"id":20786139,"url":"https://github.com/josemavarez11/drawsheet-webcomponent","last_synced_at":"2026-04-29T10:33:22.137Z","repository":{"id":187052906,"uuid":"676237424","full_name":"josemavarez11/DrawSheet-WebComponent","owner":"josemavarez11","description":"Customizable and reusable drawing sheet encapsulated in a JavaScript Web Component capable of supporting images, text, styles and figures in Canvas.","archived":false,"fork":false,"pushed_at":"2024-06-29T18:37:22.000Z","size":48,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-05T03:25:28.230Z","etag":null,"topics":["classes-and-objects","css-grid","custom-elements","html","javascript","shadow-dom","web-components"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/josemavarez11.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2023-08-08T18:35:58.000Z","updated_at":"2024-06-29T18:37:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"a74abf9d-cde1-450a-8d2e-51a6d66c465c","html_url":"https://github.com/josemavarez11/DrawSheet-WebComponent","commit_stats":null,"previous_names":["josemavarez11/drawsheet-webcomponent"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/josemavarez11/DrawSheet-WebComponent","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josemavarez11%2FDrawSheet-WebComponent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josemavarez11%2FDrawSheet-WebComponent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josemavarez11%2FDrawSheet-WebComponent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josemavarez11%2FDrawSheet-WebComponent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/josemavarez11","download_url":"https://codeload.github.com/josemavarez11/DrawSheet-WebComponent/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josemavarez11%2FDrawSheet-WebComponent/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32421822,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T06:29:02.080Z","status":"ssl_error","status_checked_at":"2026-04-29T06:29:00.631Z","response_time":110,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["classes-and-objects","css-grid","custom-elements","html","javascript","shadow-dom","web-components"],"created_at":"2024-11-17T14:50:52.852Z","updated_at":"2026-04-29T10:33:22.115Z","avatar_url":"https://github.com/josemavarez11.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DrawSheet WebComponent\n\n**DrawSheet Web Component was a university project where the goal was to create a web component that would generate a customizable drawing sheet supporting text, styles, local and online images and some geometric figures drawn in canvas. The drawing sheet had to be completely decoupled in order to be reusable.**\n\nThe sheet has three sections: header, main and footer.\n\nThe main section of the sheet is set as a grid to be able to divide it into smaller divisions. \nOnce the main section is divided, each division of it is fully customizable.\n\nIn the \"cssFolder\" folder there are the general styles of the page and the blank sheet as well as a file \"paramsStyle.css\" which is where the style parameters for each section of the sheet and for each division of the main section are stored. \n\nThe text and canvas properties are specified by creating parameter objects and passing them to the constructor of the DrawSheet class when we instantiate it to create an object of the class and use it in the HTML.\n\nAs an additional, I added a button that allows to print the drawing sheet in the state it is in (customized or blank).\n\nThis project helped me to understand concepts such as:\n- Shadow DOM.\n- Decoupled and reusable components in programming.\n- Handling of classes, constructors and methods.\n- HTML Custom Elements.\n- Handling of parameter objects.\n\nAnd more...\n\n\u003e [!NOTE]\n\u003e School project for web development I class at URU.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjosemavarez11%2Fdrawsheet-webcomponent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjosemavarez11%2Fdrawsheet-webcomponent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjosemavarez11%2Fdrawsheet-webcomponent/lists"}