{"id":23310215,"url":"https://github.com/renyzeraa/create-component","last_synced_at":"2026-04-11T19:35:03.381Z","repository":{"id":111981798,"uuid":"558613796","full_name":"renyzeraa/create-component","owner":"renyzeraa","description":"Criar componente com JS Vanilla, utilizando requisição AJAX e PHP","archived":false,"fork":false,"pushed_at":"2022-10-27T23:11:31.000Z","size":39,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-03T19:36:08.307Z","etag":null,"topics":["ajax","css","html","javascript","php"],"latest_commit_sha":null,"homepage":"","language":"PHP","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/renyzeraa.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":"2022-10-27T23:04:51.000Z","updated_at":"2025-01-27T11:33:57.000Z","dependencies_parsed_at":null,"dependency_job_id":"2747c86a-d531-4458-9b44-19f2395820c6","html_url":"https://github.com/renyzeraa/create-component","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/renyzeraa/create-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/renyzeraa%2Fcreate-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/renyzeraa%2Fcreate-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/renyzeraa%2Fcreate-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/renyzeraa%2Fcreate-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/renyzeraa","download_url":"https://codeload.github.com/renyzeraa/create-component/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/renyzeraa%2Fcreate-component/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31693272,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-11T13:07:20.380Z","status":"ssl_error","status_checked_at":"2026-04-11T13:06:47.903Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5: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":["ajax","css","html","javascript","php"],"created_at":"2024-12-20T13:16:55.031Z","updated_at":"2026-04-11T19:35:03.341Z","avatar_url":"https://github.com/renyzeraa.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Treinamento Front-End\n\n```\nPara execultar o projeto necessita de um servidor, pode ser XAMPP ou Apache\n```\n\n1. Iniciar um projeto.\n2. Criar um arquivo HTML.\n3. Adicionar um botão e seus atributos.\nAo clicar neste botão deverá ser criado o componente 1.\n4. Crie um arquivo JS para a criação dos componentes.\n5. Crie o primeiro componente.\n6. Adicione ao componente seus atributos e seus métodos\n7. Esse primeiro componente será composto pelos seguintes\ncampos:\n\n```\n- Um título.\n- Outro campo para informar um valor que será somado\na data informada.\n- Um campo para informar uma data entre os anos de\n2000 e 2100.\n- Um botão para trazer o resultado.\n- Antes de exibir o resultado, os dados\ndevem ser validados\n- Uma pequena área para o resultado.\n```\n8. Deve ser informado se o valor a ser somado pode\nser negativo ou não.\n9. Crie um arquivo sass para os estilos.\n10. Crie um arquivo PHP.\n11. Crie uma classe que irá representar o componente\ncriado, com os mesmos metodos atributos.\n12. Crie um novo arquivo JS, será o script para funções.\n13. Neste arquivo crie uma função ajax para iniciar o\ncomponente 1. Esta função deve ser chamada ao clicar\nbotão criado inicialmente.\n14. Esta função deverá passar para o PHP, via GET, um\nJSON informando o processo\n15. Crie um novo arquivo PHP, este irá receber os dados.\n16. Neste, verifique se o processo está setado, se não\nestiver, inicie o html, se estiver, inicie o componente\nvia getScript.\n```\n- O método getScript deve estar presente na\nclesse criada para o componente no PHP, ela deve retornar\num script que será adicionado a área do componente.\n```\n17. Adicione o retorno do ajax a área do componente.\n18. Adicione outra função ajax para gerar o resultado,\nesta deve ser chamada ao clicar no botão do componente,\ndeve validar os dados e adicionar o resultado abaixo do\nbotão.\n18. A função deve passar para o PHP, via POST, um objeto\nJSON com os dados informados.\n20. Agora crie mais um componente, este deve estender do\nprimeiro, porém deve adicionar:\n```\n- Um campo que permite o usuário decidir se quer\nsubtrair.\n- Um campo para selecionar o que deseja incrementar\n\t- Será possivel selecionar DIA, MÊS e ANO\n\n```\n21. Salve localmente qual foi o ultimo componente aberto,\nao abrir a pagina, o componente deve se iniciar\nautomaticamente, caso exista algum dado salvo e seus valores.\n\n## Resultado Final\n\n![comp1](https://user-images.githubusercontent.com/101990719/198414590-f86c3ff7-5619-4000-846a-f016a638c41c.png)\n![comp2](https://user-images.githubusercontent.com/101990719/198414597-e3fc598d-6019-48f1-ba4e-584b27e7f4ad.png)\n\n### Contato\n\n\u003cimg align=\"left\" src=\"https://www.github.com/renyzeraa.png?size=150\"\u003e\n\n### [**Renan Leandro da Silva**](https://github.com/renyzeraa)\n\n🛠 `Frontend` Developer Jr. \u003cbr\u003e\n📍 Santa Catarina - Brazil\n\n\u003ca href=\"https://www.linkedin.com/in/renyzeraa\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/LinkedIn-0077B5?style=flat\u0026logo=linkedin\u0026logoColor=white\" alt=\"LinkedIn Badge\" height=\"25\"\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"mailto:renansilvaytb@gmail.com\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/Gmail-D14836?style=flat\u0026logo=gmail\u0026logoColor=white\" alt=\"Gmail Badge\" height=\"25\"\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"#\"\u003e\u003cimg src=\"https://img.shields.io/badge/Discord-%237289DA.svg?logo=discord\u0026logoColor=white\" title=\"renan_s#7826\" alt=\"Discord Badge\" height=\"25\"\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://www.github.com/renyzeraa\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/GitHub-100000?style=flat\u0026logo=github\u0026logoColor=white\" alt=\"GitHub Badge\" height=\"25\"\u003e\u003c/a\u003e\u0026nbsp;\n\n\u003cbr clear=\"left\"/\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frenyzeraa%2Fcreate-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frenyzeraa%2Fcreate-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frenyzeraa%2Fcreate-component/lists"}