Add Amharic keyboard to your website using Keywrite
Tags: javascript, keyboard, html, amharic
Published: 2021-04-08 17:47:21

[Keywrite](https://github.com/eyuelberga/keywrite) a Javascript library that allows you to type non-latin scripts in any web based application using a standard keyboard. See the [Docs](https://eyuelberga.github.io/keywrite) for more info.

In this post, I will show you how you can add Keywrite along with pre-made input-methods for Ethiopic scripts to a web application and start typing in Amharic.

We will create a simple webpack project. Lets start by initializing our project:

```shell
$ mkdir keywrite-amharic-demo
$ cd keywrite-amharic-demo
$ yarn init
$ yarn add webpack webpack-cli @keywrite/web @keywrite/ethiopic-input-methods 
```

If you already have a project, you can just add the `@keywrite/web` and `@keywrite/ethiopic-input-methods` libraries to your project.

Now create an `index.js` file in the `src` folder and add the following code:

```javascript
import KeywriteWeb from "@keywrite/web";
import { Amharic } from "@keywrite/ethiopic-input-methods";
const nameInput = () => {
  const element = document.createElement("div");
  element.classList = "row";
  element.innerHTML = `
  <div class="col-6">
  <label for="inputName" class="visually-hidden">Name</label>
  <input type="text" class="form-control" id="inputName" placeholder="Name">
  </div>
  <div class="col-2">
  <button id="btnName" class="btn btn-success mb-3">ON</button>
  </div>`;
  return element;
};

const bioInput = () => {
  const element = document.createElement("div");
  element.classList = "row";
  element.innerHTML = `
  <div class="col-6">
  <div>
  <label for="exampleFormControlTextarea1" class="visually-hidden">Example textarea</label>
  <textarea class="form-control" id="inputBio" rows="3" placeholder="Bio"></textarea>
</div>
  </div>
  <div class="col-2">
    <button id="btnBio" class="btn btn-success mb-3">ON</button>
  </div>`;
  return element;
};
const formContainer = () => {
  const container = document.createElement("div");
  container.classList = "container mt-4";
  container.appendChild(nameInput());
  container.appendChild(bioInput());
  return container;
};
const navbar = () => {
  const nav = document.createElement("nav");
  nav.classList = "navbar navbar-light bg-light";
  nav.innerHTML = `<div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="https://github.com/eyuelberga/keywrite/raw/master/logo/logo.png" alt="" height="35" class="d-inline-block align-text-top">
      simple demo for @keywrite/web
    </a>
  </div>`;
  return nav;
};
const addToggle = (instance, btnId) => {
  const id = `#${btnId}`;
  const btn = document.querySelector(id);
  btn.addEventListener("click", () => {
    instance.on = !instance.on;
    btn.classList = `btn mb-3 ${instance.on ? "btn-success" : "btn-danger"}`;
    btn.innerHTML = `${instance.on ? "ON" : "OFF"}`;
  });
};
const app = document.getElementById("app");
app.appendChild(navbar());
app.appendChild(formContainer());

const inputInstance = new KeywriteWeb(app.querySelector("input"), {
  Amharic: Amharic.inputMethod
});
const textareaInstance = new KeywriteWeb(app.querySelector("textarea"), {
  Amharic: Amharic.inputMethod
});
addToggle(inputInstance, "btnName");
addToggle(textareaInstance, "btnBio");

```
We have created two components for the name and bio inputs,these are the `nameInput` and `bioInput` functions. We also create a new instance of `KeywriteWeb` with the `HTMLInputElement` or `HTMLTextareaElement`. Using the `on` property we toggle the keyboard on and off. This is what the `AddToggle` function does. 

Also update the `index.html` file in the `dist` folder to look like this:

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

<head>
	<title>Keywrite Demo</title>
	<meta charset="UTF-8" />
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
</head>

<body>
	<div id="app"></div>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
	<script src="main.js">
	</script>
</body>

</html>
```
The finished app looks like this:

{% codesandbox cocky-hypatia-v7ep1 %}

That's it! Now you should have a working Amharic keyboard in your web app. Hope you like the post, please share your comments and suggestions in the discussion below. 

{% github eyuelberga/keywrite %}