├── readme.md
└── Gbody.js


/readme.md:
--------------------------------------------------------------------------------
  1 | # ❤️ Gbody JS
  2 | 
  3 | This little library in development is for people who are just starting out in JavaScript programming.
  4 | 
  5 | ## 🔥 How to start?
  6 | 
  7 | #### You can download it directly from this repository.
  8 | 
  9 | **Always** put it first before the other scripts you have added!
 10 | 
 11 | ### Video here!
 12 | [![Watch Video](https://i.ibb.co/gDWkQbp/js.png)](https://youtu.be/5MtmHlbt0Fw)
 13 | 
 14 | ## 🔥 Selectors in Gbody JS.
 15 | 
 16 | ### - Selector for everything! classes, id, attributes or HTML tags.
 17 | #### Some examples are:
 18 | ```sh
 19 | s_('h1');
 20 | 
 21 | s_('.h1');
 22 | 
 23 | s_('#h1');
 24 | 
 25 | s_('[attribute="h1']);
 26 | 
 27 | let title = s_('h1');
 28 | title.textContent = "Hello, World!";
 29 | 
 30 | 
 31 | s_All('h1')[0];
 32 | 
 33 | let title_All = s_All('h1')[0];
 34 | title_All.textContent = "Hello, World!"
 35 | ```
 36 | 
 37 | ## 🔥 Dynamic audio with Gbody JS.
 38 | 
 39 | ### - You can create audio element.
 40 | #### Some examples are:
 41 | ```sh
 42 | audio_({
 43 |   src: "./src/media/audio.mp3",
 44 |   container: "body",
 45 |   controls: true,
 46 |   preload: true,
 47 |   autoplay: true
 48 | });
 49 | ```
 50 | 
 51 | ## 🔥 Dynamic image with Gbody JS.
 52 | 
 53 | ### - You can create image element.
 54 | #### Some examples are:
 55 | ```sh
 56 | image_({
 57 |   src: "./src/media/image.png",
 58 |   container: ".gallery"
 59 | });
 60 | ```
 61 | 
 62 | ## 🔥 Dynamic video with Gbody JS.
 63 | 
 64 | ### - You can create video element.
 65 | #### Some examples are:
 66 | ```sh
 67 | video_({
 68 |   src: "./src/media/video.mp4",
 69 |   container: ".content"
 70 | });
 71 | ```
 72 | 
 73 | ## ✅ Repeat Image with Gbody JS.
 74 | 
 75 | ### - You can repeat image, video and audio element.
 76 | #### Some examples are:
 77 | ```sh
 78 | const images = [
 79 | 	"./src/media/1.mp3", // <-- Counter starting from here
 80 | 	"./src/media/2.mp3",
 81 | 	"./src/media/3.mp3",
 82 | 	"./src/media/4.mp3"
 83 | ];
 84 | 
 85 | image_({
 86 |   src: "./src/media/image.png",
 87 |   container: ".content",
 88 |   repeat: true,
 89 |   total: 4,
 90 |   counter: 0
 91 | });
 92 | 
 93 | // ⭐ For videos and audios it is the same procedure!
 94 | ```
 95 | 
 96 | ## ✅ Background sound.
 97 | ### You can put a background audio with the following example:
 98 | ```sh
 99 | bgSound_({
100 |     src: "./src/media/myaudio.mp3"
101 | });
102 | // that easy
103 | ```
104 | 
105 | ## ✅  Preloader.
106 | ### You can put a background audio with the following example:
107 | ```sh
108 | bgPreloader_({
109 |     src: "<h1> Loading... </h1>",
110 |     timeOut: 200 // <-- Seconds on ms
111 | });
112 | // that easy too
113 | ```
114 | 
115 | ```sh
116 | bgPreloader_({
117 |     data: "img",
118 |     src: "./src/media/preloader.gif", // or .png/.jpg
119 |     timeOut: 200 // <-- Seconds on ms
120 | });
121 | // data: "img" or "video".
122 | // if the data is not set, it will read the scr as pure html.
123 | ```
124 | 
125 | ## ✅ Change variable values ​​in CSS from JavaScript.
126 | ### You can change these values ​​like this:
127 | 
128 | ## CSS Example:
129 | ```sh
130 | :root {
131 |     --bg: #fff;
132 |     --color: #000;
133 | }
134 | ```
135 | ## JS Example:
136 | ```sh
137 | root_.setProperty('--bg', '#000');
138 | ------
139 | // root_setProperty(name:variable, new:value);
140 | ```
141 | 
142 | ## ⭐ Extract data from JSON.
143 | ```sh
144 | getJSON_({
145 |     url: "https://randomuser.me/api/",
146 |     event: data => { console.log(data) }
147 | });
148 | ```
149 | ### Image Example:
150 | ![Extract data from JSON](https://i.ibb.co/rtxjbkc/carbon-1.png)
151 | 
152 | ### ❤️ Made with love by Erickgiber!
153 | 


--------------------------------------------------------------------------------
/Gbody.js:
--------------------------------------------------------------------------------
1 | const _0x3328=['98cFtFPY','video','setAttribute','1ZBSBVs','preload','13841PoSyPx','1241314toHKJQ','controls','autoplay','378206XhNTFm','childNodes','createElement','880085eJcVtR','ms;\x0a\x09\x09opacity:\x201;\x0a\x09','body','src','opacity','then','1192PKmujv','error','607rjEVEy','1FTUeaN','\x0a\x09\x09width:\x201fr;\x0a\x09\x09height:\x201fr;\x0a\x09\x09background-color:\x20rgba(0,0,0,0.2);\x0a\x09\x09border-radius:\x2010px;\x0a\x09\x09display:\x20flex;\x0a\x09\x09flex-direction:\x20column;\x0a\x09\x09align-items:\x20center;\x0a\x09\x09font-family:\x20\x22Arial\x22;\x0a\x09\x09padding:\x2015px;\x0a\x09','1145507zfceTa','json','img','innerHTML','message','documentElement','\x0a\x09\x09display:\x20flex;\x0a\x09\x09justify-content:\x20center;\x0a\x09\x09align-items:\x20center;\x0a\x09\x09z-index:\x20100000;\x0a\x09\x09position:\x20fixed;\x0a\x09\x09width:\x20100vw;\x0a\x09\x09height:\x20100vh;\x0a\x09\x09font-size:\x2025px;\x0a\x09\x09font-family:\x20arial;\x0a\x09\x09color:\x20#000;\x0a\x09\x09background-color:\x20#ededed;\x0a\x09\x09transition:\x20','insertBefore','Error','querySelectorAll','style','div','addEventListener','class','175299mAUTIa','querySelector','append','load','log','\x0a\x09\x09\x09width:\x20300px;\x0a\x09\x09\x09height:\x20300px;\x0a\x09\x09'];const _0x22c689=_0x58c2;(function(_0x15c426,_0x453ce8){const _0x462c15=_0x58c2;while(!![]){try{const _0xd1f0fb=parseInt(_0x462c15(0x131))+parseInt(_0x462c15(0x128))*parseInt(_0x462c15(0x12d))+parseInt(_0x462c15(0x134))+-parseInt(_0x462c15(0x10f))*-parseInt(_0x462c15(0x111))+parseInt(_0x462c15(0x12b))*-parseInt(_0x462c15(0x12e))+-parseInt(_0x462c15(0x114))+-parseInt(_0x462c15(0x122))*parseInt(_0x462c15(0x112));if(_0xd1f0fb===_0x453ce8)break;else _0x15c426['push'](_0x15c426['shift']());}catch(_0x59bda9){_0x15c426['push'](_0x15c426['shift']());}}}(_0x3328,0xbd7c5));function _0x58c2(_0x45d35b,_0xca9bc){_0x45d35b=_0x45d35b-0x10a;let _0x33283b=_0x3328[_0x45d35b];return _0x33283b;}const s_=_0x20aeff=>{return document['querySelector'](_0x20aeff);},sAll_=_0x3ff17d=>{const _0x561c14=_0x58c2;return document[_0x561c14(0x11d)](_0x3ff17d);},create_=_0x41910f=>{const _0x2b61eb=_0x58c2;return document[_0x2b61eb(0x133)](_0x41910f);},root_=document[_0x22c689(0x119)][_0x22c689(0x11e)],bgSound_=({src:_0x33f18d,loop:_0x4a749e,loaded:_0x1ea641,error:_0x12d74e})=>{const _0x387083=_0x22c689;let _0x12a23f=new Audio(_0x33f18d);_0x12a23f[_0x387083(0x12c)]=!![],_0x12a23f['play'](_0x33f18d),_0x12a23f['loop']=_0x4a749e,_0x12a23f[_0x387083(0x120)](_0x387083(0x125),_0x1ea641),_0x12a23f[_0x387083(0x120)](_0x387083(0x110),_0x12d74e);},audio_=({src:_0x57d404,container:_0x5a47b0,preload:_0x23e7b0,autoplay:_0x50f004,Class:_0x70b971,controls:_0x359e82,repeat:_0x58ead7,total:_0x4f2f15,counter:_0x426467,loaded:_0x520976,error:_0x443194})=>{const _0x309a39=_0x22c689;if(_0x58ead7===!![])for(let _0x491ca0=0x0;_0x491ca0<_0x4f2f15;_0x491ca0++){let _0x312c9a=new Audio(_0x57d404[_0x426467++]);_0x312c9a[_0x309a39(0x12f)]=_0x359e82,_0x312c9a[_0x309a39(0x12c)]=_0x23e7b0,_0x312c9a[_0x309a39(0x130)]=_0x50f004,_0x312c9a[_0x309a39(0x12a)]('class',_0x70b971),_0x312c9a[_0x309a39(0x120)](_0x309a39(0x125),_0x520976),_0x312c9a[_0x309a39(0x120)]('error',_0x443194),document[_0x309a39(0x123)](_0x5a47b0)[_0x309a39(0x124)](_0x312c9a);}else{let _0x10fa90=new Audio(_0x57d404);_0x10fa90['controls']=_0x359e82,_0x10fa90[_0x309a39(0x12c)]=_0x23e7b0,_0x10fa90[_0x309a39(0x130)]=_0x50f004,_0x10fa90[_0x309a39(0x12a)](_0x309a39(0x121),_0x70b971),_0x10fa90[_0x309a39(0x120)](_0x309a39(0x125),_0x520976),_0x10fa90[_0x309a39(0x120)]('error',_0x443194),document[_0x309a39(0x123)](_0x5a47b0)[_0x309a39(0x124)](_0x10fa90);}},image_=({src:_0x4496b4,Class:_0x3318df,container:_0x17bf3e,repeat:_0x1c7139,total:_0x30ef93,counter:_0x143c10,loaded:_0xb121ab,error:_0x1ee2ab})=>{const _0x234c7c=_0x22c689;if(_0x1c7139===!![])for(let _0x3c3573=0x0;_0x3c3573<_0x30ef93;_0x3c3573++){let _0x47abd4=new Image();_0x47abd4[_0x234c7c(0x10c)]=_0x4496b4[_0x143c10++],_0x47abd4[_0x234c7c(0x12a)](_0x234c7c(0x121),_0x3318df),_0x47abd4[_0x234c7c(0x120)](_0x234c7c(0x125),_0xb121ab),_0x47abd4['addEventListener'](_0x234c7c(0x110),_0x1ee2ab),document[_0x234c7c(0x123)](_0x17bf3e)[_0x234c7c(0x124)](_0x47abd4);}else{let _0x15a6df=new Image();_0x15a6df[_0x234c7c(0x10c)]=_0x4496b4,document[_0x234c7c(0x123)](_0x17bf3e)['append'](_0x15a6df),_0x15a6df[_0x234c7c(0x12a)](_0x234c7c(0x121),_0x3318df),_0x15a6df[_0x234c7c(0x120)](_0x234c7c(0x125),_0xb121ab),_0x15a6df[_0x234c7c(0x120)](_0x234c7c(0x110),_0x1ee2ab);}},video_=({src:_0x41a40,container:_0x8ae363,preload:_0x8bd6b9,autoplay:_0x4e0948,Class:_0x7f99f8,controls:_0x992b73,repeat:_0x232cd3,total:_0x556f97,counter:_0x108d9c,loaded:_0x34a944,error:_0x26398f})=>{const _0x21c275=_0x22c689;if(_0x232cd3===!![])for(let _0x271657=0x0;_0x271657<_0x556f97;_0x271657++){let _0x263994=create_(_0x21c275(0x129));_0x263994['src']=_0x41a40[_0x108d9c++],_0x263994[_0x21c275(0x12f)]=!![],_0x263994[_0x21c275(0x12c)]=_0x8bd6b9,_0x263994[_0x21c275(0x130)]=_0x4e0948,_0x263994[_0x21c275(0x12a)](_0x21c275(0x121),_0x7f99f8),_0x263994[_0x21c275(0x120)](_0x21c275(0x125),_0x34a944),_0x263994[_0x21c275(0x120)]('error',_0x26398f),document['querySelector'](_0x8ae363)['append'](_0x263994);}else{let _0x5c3b9e=create_(_0x21c275(0x129));_0x5c3b9e[_0x21c275(0x10c)]=_0x41a40,_0x5c3b9e[_0x21c275(0x12f)]=!![],_0x5c3b9e['preload']=_0x8bd6b9,_0x5c3b9e[_0x21c275(0x130)]=_0x4e0948,_0x5c3b9e[_0x21c275(0x12a)]('class',_0x7f99f8),_0x5c3b9e[_0x21c275(0x120)](_0x21c275(0x125),_0x34a944),_0x5c3b9e[_0x21c275(0x120)](_0x21c275(0x110),_0x26398f),document[_0x21c275(0x123)](_0x8ae363)[_0x21c275(0x124)](_0x5c3b9e);}},bgPreloader_=({data:_0x33b9b1,Class:_0x4f4684,src:_0x7ed1d3,timeOut:_0x394517})=>{const _0x9d5fac=_0x22c689;let _0x1b0691=create_('div');_0x1b0691['setAttribute'](_0x9d5fac(0x11e),_0x9d5fac(0x11a)+_0x394517+_0x9d5fac(0x10a));if(_0x33b9b1===_0x9d5fac(0x116)){let _0x4d9deb=create_(_0x9d5fac(0x116));_0x4d9deb[_0x9d5fac(0x10c)]=_0x7ed1d3,_0x4d9deb[_0x9d5fac(0x12a)](_0x9d5fac(0x11e),_0x9d5fac(0x127)),_0x1b0691[_0x9d5fac(0x124)](_0x4d9deb);}else{if(_0x33b9b1==='video'){let _0x54404c=create_('video');_0x54404c[_0x9d5fac(0x10c)]=_0x7ed1d3,_0x54404c[_0x9d5fac(0x12a)](_0x9d5fac(0x11e),'\x0a\x09\x09\x09width:\x20300px;\x0a\x09\x09\x09height:\x20280px;\x0a\x09\x09'),_0x1b0691[_0x9d5fac(0x124)](_0x54404c);}else!_0x33b9b1&&(_0x1b0691[_0x9d5fac(0x117)]=_0x7ed1d3);}_0x1b0691['setAttribute'](_0x9d5fac(0x121),_0x4f4684),s_('body')[_0x9d5fac(0x11b)](_0x1b0691,s_(_0x9d5fac(0x10b))[_0x9d5fac(0x132)][0x1]),window[_0x9d5fac(0x120)](_0x9d5fac(0x125),()=>{const _0x1163ea=_0x9d5fac;_0x1b0691[_0x1163ea(0x11e)][_0x1163ea(0x10d)]='0',setTimeout(()=>{_0x1b0691['remove']();},_0x394517);});},getJSON_=async({url:_0x2f9820,event:_0x32640b})=>{const _0x36c153=_0x22c689;try{fetch(_0x2f9820)['then'](_0x1d4bb4=>_0x1d4bb4[_0x36c153(0x115)]())[_0x36c153(0x10e)](_0x32640b);}catch(_0xb3a321){console[_0x36c153(0x126)](_0x36c153(0x11c)+_0xb3a321[_0x36c153(0x118)]);}},card_=({container:_0x41c824,content:_0xddb100,header:_0x33e6b4,body:_0x345e11,footer:_0x412ce6,Class:_0x31127f})=>{const _0x4145c5=_0x22c689,_0x1c6a8d=create_(_0x4145c5(0x11f));_0x1c6a8d[_0x4145c5(0x12a)]('class',_0x31127f),_0x1c6a8d[_0x4145c5(0x12a)](_0x4145c5(0x11e),_0x4145c5(0x113));_0x33e6b4&&(_0x1c6a8d[_0x4145c5(0x117)]+=_0x33e6b4);_0x345e11&&(_0x1c6a8d[_0x4145c5(0x117)]+=_0x345e11);if(_0x412ce6)_0x1c6a8d['innerHTML']+=_0x412ce6;else _0xddb100&&(_0x1c6a8d[_0x4145c5(0x117)]=_0xddb100);document[_0x4145c5(0x123)](_0x41c824)[_0x4145c5(0x124)](_0x1c6a8d);};
2 | 


--------------------------------------------------------------------------------