{"id":18622300,"url":"https://github.com/erickgiber/gbodyjs","last_synced_at":"2025-04-11T03:31:15.015Z","repository":{"id":167457692,"uuid":"376402639","full_name":"Erickgiber/GbodyJS","owner":"Erickgiber","description":"Con esta pequeña librería se te será mas fácil y rápido, trabajar de manera dinámica con el DOM desde JavaScript. ","archived":false,"fork":false,"pushed_at":"2022-03-03T01:19:56.000Z","size":78,"stargazers_count":17,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-25T08:42:32.484Z","etag":null,"topics":["css","dom","easy","help","html","javascript","json","library","nice"],"latest_commit_sha":null,"homepage":"https://giibernet.com/static/js/Gbody.js","language":null,"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/Erickgiber.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}},"created_at":"2021-06-12T23:45:53.000Z","updated_at":"2023-03-14T04:30:23.000Z","dependencies_parsed_at":"2023-07-15T07:02:33.732Z","dependency_job_id":null,"html_url":"https://github.com/Erickgiber/GbodyJS","commit_stats":null,"previous_names":["erickgiber/gbodyjs"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Erickgiber%2FGbodyJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Erickgiber%2FGbodyJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Erickgiber%2FGbodyJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Erickgiber%2FGbodyJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Erickgiber","download_url":"https://codeload.github.com/Erickgiber/GbodyJS/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248335428,"owners_count":21086589,"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":["css","dom","easy","help","html","javascript","json","library","nice"],"created_at":"2024-11-07T04:16:25.288Z","updated_at":"2025-04-11T03:31:14.305Z","avatar_url":"https://github.com/Erickgiber.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# ❤️ Gbody JS\r\n\r\nThis little library in development is for people who are just starting out in JavaScript programming.\r\n\r\n## 🔥 How to start?\r\n\r\n#### You can download it directly from this repository.\r\n\r\n**Always** put it first before the other scripts you have added!\r\n\r\n### Video here!\r\n[![Watch Video](https://i.ibb.co/gDWkQbp/js.png)](https://youtu.be/5MtmHlbt0Fw)\r\n\r\n## 🔥 Selectors in Gbody JS.\r\n\r\n### - Selector for everything! classes, id, attributes or HTML tags.\r\n#### Some examples are:\r\n```sh\r\ns_('h1');\r\n\r\ns_('.h1');\r\n\r\ns_('#h1');\r\n\r\ns_('[attribute=\"h1']);\r\n\r\nlet title = s_('h1');\r\ntitle.textContent = \"Hello, World!\";\r\n\r\n\r\ns_All('h1')[0];\r\n\r\nlet title_All = s_All('h1')[0];\r\ntitle_All.textContent = \"Hello, World!\"\r\n```\r\n\r\n## 🔥 Dynamic audio with Gbody JS.\r\n\r\n### - You can create audio element.\r\n#### Some examples are:\r\n```sh\r\naudio_({\r\n  src: \"./src/media/audio.mp3\",\r\n  container: \"body\",\r\n  controls: true,\r\n  preload: true,\r\n  autoplay: true\r\n});\r\n```\r\n\r\n## 🔥 Dynamic image with Gbody JS.\r\n\r\n### - You can create image element.\r\n#### Some examples are:\r\n```sh\r\nimage_({\r\n  src: \"./src/media/image.png\",\r\n  container: \".gallery\"\r\n});\r\n```\r\n\r\n## 🔥 Dynamic video with Gbody JS.\r\n\r\n### - You can create video element.\r\n#### Some examples are:\r\n```sh\r\nvideo_({\r\n  src: \"./src/media/video.mp4\",\r\n  container: \".content\"\r\n});\r\n```\r\n\r\n## ✅ Repeat Image with Gbody JS.\r\n\r\n### - You can repeat image, video and audio element.\r\n#### Some examples are:\r\n```sh\r\nconst images = [\r\n\t\"./src/media/1.mp3\", // \u003c-- Counter starting from here\r\n\t\"./src/media/2.mp3\",\r\n\t\"./src/media/3.mp3\",\r\n\t\"./src/media/4.mp3\"\r\n];\r\n\r\nimage_({\r\n  src: \"./src/media/image.png\",\r\n  container: \".content\",\r\n  repeat: true,\r\n  total: 4,\r\n  counter: 0\r\n});\r\n\r\n// ⭐ For videos and audios it is the same procedure!\r\n```\r\n\r\n## ✅ Background sound.\r\n### You can put a background audio with the following example:\r\n```sh\r\nbgSound_({\r\n    src: \"./src/media/myaudio.mp3\"\r\n});\r\n// that easy\r\n```\r\n\r\n## ✅  Preloader.\r\n### You can put a background audio with the following example:\r\n```sh\r\nbgPreloader_({\r\n    src: \"\u003ch1\u003e Loading... \u003c/h1\u003e\",\r\n    timeOut: 200 // \u003c-- Seconds on ms\r\n});\r\n// that easy too\r\n```\r\n\r\n```sh\r\nbgPreloader_({\r\n    data: \"img\",\r\n    src: \"./src/media/preloader.gif\", // or .png/.jpg\r\n    timeOut: 200 // \u003c-- Seconds on ms\r\n});\r\n// data: \"img\" or \"video\".\r\n// if the data is not set, it will read the scr as pure html.\r\n```\r\n\r\n## ✅ Change variable values ​​in CSS from JavaScript.\r\n### You can change these values ​​like this:\r\n\r\n## CSS Example:\r\n```sh\r\n:root {\r\n    --bg: #fff;\r\n    --color: #000;\r\n}\r\n```\r\n## JS Example:\r\n```sh\r\nroot_.setProperty('--bg', '#000');\r\n------\r\n// root_setProperty(name:variable, new:value);\r\n```\r\n\r\n## ⭐ Extract data from JSON.\r\n```sh\r\ngetJSON_({\r\n    url: \"https://randomuser.me/api/\",\r\n    event: data =\u003e { console.log(data) }\r\n});\r\n```\r\n### Image Example:\r\n![Extract data from JSON](https://i.ibb.co/rtxjbkc/carbon-1.png)\r\n\r\n### ❤️ Made with love by Erickgiber!\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferickgiber%2Fgbodyjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ferickgiber%2Fgbodyjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferickgiber%2Fgbodyjs/lists"}