Skip to content

Get Started

Jump to bottom
bapquad edited this page Feb 20, 2022 · 18 revisions

[Home] > Get Started

This content show you how to create new application with Element5JS API. And print the "Hello World" text into the page of application.

After you install the element5js, you can use it for your application.

Prerequirements

  • Since the element5js use NodeJS technology, you must be setup the NodeJS.
  • The bundle more simple. We recommendation to use the Parcel. You can install it at here.

Create first application

Let's create the first application, you types the following command into your terminal for initializing the project.

npm init -y

Then, the nodejs generates the package.json file into your folder. Let's open it on your editor and change the script section like as following.

{
  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build src/app.js"
  }
}

Save and close the package.json file.

Next, you create the index.html file like as following.

<html>
<body>
  <div id="wrapper"></div>
  <script src="./dist/app.js"></script>
</body>
</html>

Next, you create the src folder, then create script file and save the file to src/app.js path.

Now your project look like as following construct.

  • src
  • index.html
  • package.json

Done, you had finished to creating a project with nodejs.

Let's run first build and run it on your browser.

npm run build

Next you run the project by using

npm run dev

The Parcel run your project at the default port that http://localhost:1234. Now you can open your application on the web browser.

Create the "Hello world" text

For working with element5js, you would must be setup the element5 package to your project. Let's go.

npm install --save @bapquad/element5

In this guide, we would create a text on the blue screen.

First step, we would like to set the background of the screen with blue color and the text color with white color.

Open the src/app.js file and add the following code.

import {element5 as $} from '@bapquad/element5'

// Add some styles
$("body").css({
  "background": "blue", 
  "color": "white", 
  "font-family": "Arial, Helvetica, sans-serif", 
});

Next, Let's insert the "Hello world" into the application by add following codes.

$("#wrapper").css({"text-align":"center"}).html("<h1>Hello world</h1>");

Now you need to rebuild the application.

Done! we had created the "Hello world" application successfully. Good luck and see you at other guide.

Bapquad Games since 2015

Table of contents

Clone this wiki locally