https://github.com/erickgiber/gbodyjs

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.
https://github.com/erickgiber/gbodyjs

css dom easy help html javascript json library nice

Last synced: 3 months ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/erickgiber/gbodyjs
• Owner: Erickgiber
• Created: 2021-06-12T23:45:53.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-03-03T01:19:56.000Z (almost 3 years ago)
• Last Synced: 2023-10-20T19:43:33.989Z (over 1 year ago)
• Topics: css, dom, easy, help, html, javascript, json, library, nice
• Homepage: https://giibernet.com/static/js/Gbody.js
• Size: 76.2 KB
• Stars: 17
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# ❤️ Gbody JS

This little library in development is for people who are just starting out in JavaScript programming.

## 🔥 How to start?

#### You can download it directly from this repository.

**Always** put it first before the other scripts you have added!

### Video here!

[![Watch Video](https://i.ibb.co/gDWkQbp/js.png)](https://youtu.be/5MtmHlbt0Fw)

## 🔥 Selectors in Gbody JS.

### - Selector for everything! classes, id, attributes or HTML tags.

#### Some examples are:

```sh

s_('h1');

s_('.h1');

s_('#h1');

s_('[attribute="h1']);

let title = s_('h1');

title.textContent = "Hello, World!";

s_All('h1')[0];

let title_All = s_All('h1')[0];

title_All.textContent = "Hello, World!"

```

## 🔥 Dynamic audio with Gbody JS.

### - You can create audio element.

#### Some examples are:

```sh

audio_({

  src: "./src/media/audio.mp3",

  container: "body",

  controls: true,

  preload: true,

  autoplay: true

});

```

## 🔥 Dynamic image with Gbody JS.

### - You can create image element.

#### Some examples are:

```sh

image_({

  src: "./src/media/image.png",

  container: ".gallery"

});

```

## 🔥 Dynamic video with Gbody JS.

### - You can create video element.

#### Some examples are:

```sh

video_({

  src: "./src/media/video.mp4",

  container: ".content"

});

```

## ✅ Repeat Image with Gbody JS.

### - You can repeat image, video and audio element.

#### Some examples are:

```sh

const images = [

	"./src/media/1.mp3", // <-- Counter starting from here

	"./src/media/2.mp3",

	"./src/media/3.mp3",

	"./src/media/4.mp3"

];

image_({

  src: "./src/media/image.png",

  container: ".content",

  repeat: true,

  total: 4,

  counter: 0

});

// ⭐ For videos and audios it is the same procedure!

```

## ✅ Background sound.

### You can put a background audio with the following example:

```sh

bgSound_({

    src: "./src/media/myaudio.mp3"

});

// that easy

```

## ✅  Preloader.

### You can put a background audio with the following example:

```sh

bgPreloader_({

    src: "
 Loading... 
",

    timeOut: 200 // <-- Seconds on ms

});

// that easy too

```


```sh

bgPreloader_({

    data: "img",

    src: "./src/media/preloader.gif", // or .png/.jpg

    timeOut: 200 // <-- Seconds on ms

});

// data: "img" or "video".

// if the data is not set, it will read the scr as pure html.

```

## ✅ Change variable values ​​in CSS from JavaScript.

### You can change these values ​​like this:

## CSS Example:

```sh

:root {

    --bg: #fff;

    --color: #000;

}

```

## JS Example:

```sh

root_.setProperty('--bg', '#000');

------

// root_setProperty(name:variable, new:value);

```

## ⭐ Extract data from JSON.

```sh

getJSON_({

    url: "https://randomuser.me/api/",

    event: data => { console.log(data) }

});

```

### Image Example:

![Extract data from JSON](https://i.ibb.co/rtxjbkc/carbon-1.png)

### ❤️ Made with love by Erickgiber!