Build Emoji Picker Input Field in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

 

index.html

 

 

<!--Emojis are unicodes, so it wont have much problem showing in the mobile or mails-->

<div class="container full-width">
      <div class="row justify-content-center">
            <p class="lead emoji-picker-container">
              <textarea type="textbox" data-emoji-input="unicode" class="form-control" placeholder="Input field" data-emojiable="true"></textarea>
            </p>            
      </div>
</div>

 

 

style.css

 

 

.full-width {
  width: 100%;
  height: 100vh;
  display: flex;
  
  .justify-content-center {
    display: flex;
    align-self: center;
    width: 100%;
  }
  .lead.emoji-picker-container {
    width: 300px;
    display: block;
    input {
      width: 100%;
      height: 50px;
    }
  }
}

 

 

script.js

 

 

$(function() {
        // Initializes and creates emoji set from sprite sheet
        window.emojiPicker = new EmojiPicker({
          emojiable_selector: '[data-emojiable=true]',
          assetsPath: 'http://onesignal.github.io/emoji-picker/lib/img/',
          popupButtonClasses: 'fa fa-smile-o'
        });
        // Finds all elements with `emojiable_selector` and converts them to rich emoji input fields
        // You may want to delay this step if you have dynamically created input fields that appear later in the loading process
        // It can be called as many times as necessary; previously converted input fields will not be converted again
        window.emojiPicker.discover();
      });

Leave a Reply