# Building an app for Brick 1100

Note  
It is recommended to read the [Introduction](/content/brick1100/builders/index.html) first to understand the background of Brick 1100, how it works, and the related tools before continuing with this guide.

In this guide, let's build a simple **Password Generator** app and get it running on [Brick 1100](/content/brick1100/about/index.html).

This Password Generator app will generate a random password based on the user's input for the length of the password (maximum 30 characters). Below is a preview of the final app:

## 1. Setup

### 1.1. Tool
- Install [Visual Studio Code](https://code.visualstudio.com/) on your device.
  - This is the recommended code editor for this guide.
- Install the [Live Server](https://marketplace.visualstudio.com/items?itemName=yandeu.five-server) extension in Visual Studio Code.
  - This extension will help you to run your app locally and see the changes in real-time.
- After the above steps, you should see a `Go Live` button at the bottom right corner of Visual Studio Code.

### 1.2. Codebase
- Create a [GitHub](https://github.com/) account if you don't have one.
- Fork the [Brick 1100 Apps](https://github.com/Visnalize/brick-1100-apps) directory repository to your account.
  - This repository contains the source code of all apps built for Brick 1100. Your app will be added to this repository upon completion.

- Clone the forked repository to your Visual Studio Code:
  - Copy the repository URL as shown in the below screenshot.  
  - In Visual Studio Code, open the terminal (select `View > Terminal` from the menu or press ``Ctrl + ```) and run the following command:

```bash
git clone <repo_url>
```

- Replace `<repo_url>` with the copied URL, e.g. `https://github.com/<username>/brick-1100-apps.git`.
- Once the repository is cloned, you will see the source code in your Visual Studio Code.

## 2. Build
- In your Visual Studio Code, create a new folder named `pwd-generator` inside the `brick-1100-apps` folder. This folder will contain the source code of the Password Generator app.
- Start the Live Server by selecting the `pwd-generator` folder, right-clicking, and selecting `Open with Five Server (root)`.

- A new browser tab with the URL `http://127.0.0.1:5500` will open, now every change you make to this folder will be reflected in real-time.

### 2.1. App structure (HTML file)
- Create an `index.html` file inside the `pwd-generator` folder with the below content:

```html
<!DOCTYPE html>
<html>

<head>
    <title>Password Generator</title>
    <link rel="stylesheet" href="https://unpkg.com/bridge-1100/dist/index.css">
    <link rel="stylesheet" href="https://unpkg.com/bridge-1100/dist/font.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="screen">
        <label>Password length</label>
        <div id="input"></div>
        <footer>Generate</footer>
    </div>

<div class="screen" hidden>
        <span>Your password:</span>
        <div id="output"></div>
        <footer>OK</footer>
    </div>

<script src="https://unpkg.com/bridge-1100/dist/index.umd.js"></script>
    <script src="script.js"></script>
</body>

</html>
```
- The app consists of two screens:
    1. The first screen is for the user to input the length of the password.
    2. The second screen displays the generated password.
- Note the highlighted lines:
  - Line 6 and 7: these are links to the [Bridge 1100](/content/brick1100/builders#bridge-1100/index.html) CSS and fonts files, they help enforce your app's interface to fit seamlessly with Brick 1100's monochrome visual.
  - Line 24: this is a link to the Bridge 1100 JavaScript file, it helps bridge the communication between your app and Brick 1100.

### 2.2. App logic (JS file)
- Create a `script.js` file inside the `pwd-generator` folder. In this file, we will write the logic for the Password Generator app.
- From the HTML structure above, we retrieve the input and output elements:

```js
var input = document.getElementById("input");
var output = document.getElementById("output");
```
- Then define the character set for the password generation and a variable for storing the generated password:

```js
var charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()-_=+";
var password = "";
```
- Next, we will leverage [Bridge 1100](/content/brick1100/builders#bridge-1100/index.html) to listen for `keypress` and `numpress` events to handle the user's input:

```js
window.bridge.on("keypress", handleKeypress);
window.bridge.on("numpress", handleKeypress);
```
- We implement the `handleKeypress` handler function as below:

```js
function handleKeypress(key) {
  if (typeof key === "number" && input.textContent.length < 2) {
    input.textContent += key;
  }

if (key === "clear") {
    if (input.textContent.length > 0) {
      input.textContent = input.textContent.slice(0, -1);
    } else {
      stop();
    }
  }

if (key === "ok") {
    if (input.textContent.length > 0 && !password) {
      generatePassword();
    } else {
      stop();
    }
  }
}
```
- The `generatePassword` function generates a random password based on the user's input for the length of the password. If the password length exceeds 30 characters, the app calls the `stop` function. We implement it as below:

```js
function generatePassword() {
  var length = parseInt(input.textContent);

for (var i = 0; i < length; i++) {
    var randomIndex = Math.floor(Math.random() * charset.length);
    password += charset.charAt(randomIndex);
  }

if (password.length > 30) {
    return stop({ error: "Out of range" });
  }

input.parentElement.hidden = true;
  output.parentElement.hidden = false;
  output.textContent = password;
}
```
- The `stop` function resets the password and sends a message to Brick 1100 to close the app. We implement it as below:

```js
function stop(data) {
  password = "";
  window.bridge.send(window.parent, { event: "stop", data: data });
}
```
- Putting it all together, the `script.js` file should look like this:

```js
var input = document.getElementById("input");
var output = document.getElementById("output");
var charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()-_=+";
var password = "";

window.bridge.on("keypress", handleKeypress);
window.bridge.on("numpress", handleKeypress);

function handleKeypress(key) {
  if (typeof key === "number" && input.textContent.length < 2) {
    input.textContent += key;
  }

if (key === "clear") {
    if (input.textContent.length > 0) {
      input.textContent = input.textContent.slice(0, -1);
    } else {
      stop();
    }
  }

if (key === "ok") {
    if (input.textContent.length > 0 && !password) {
      generatePassword();
    } else {
      stop();
    }
  }
}

function generatePassword() {
  var length = parseInt(input.textContent);

for (var i = 0; i < length; i++) {
    var randomIndex = Math.floor(Math.random() * charset.length);
    password += charset.charAt(randomIndex);
  }

if (password.length > 30) {
    return stop({ error: "Out of range" });
  }

input.parentElement.hidden = true;
  output.parentElement.hidden = false;
  output.textContent = password;
}

function stop(data) {
  password = "";
  window.bridge.send(window.parent, { event: "stop", data: data });
}
```

### 2.3. App styling (CSS file)
- Create a `style.css` file inside the `pwd-generator` folder with the below content:

```css
.screen:not([hidden]) {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#input {
  border: 2vh solid #000;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  font-size: 20vh;
  height: 100%;
}

#output {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  word-break: break-all;
}

footer {
  font-size: 12vh;
}
```
### 2.4. Preview your app optional

## 3. Publish

### 3.1. Commit and push
- In your Visual Studio Code, switch to the Source Control view on the left sidebar.
- Stage all changes by clicking the `+` button next to the files.
- Write a concise commit message in the text box and click the `Commit` button.

### 3.2. Open a pull request
- Open your forked repository on GitHub from step 1.2.
- Click `Contribute > Open pull request`. This will create a pull request to merge your changes into the directory repository.