DEV Community: Milan Tarami

How to create confirm box using TippyJS

Milan Tarami — Wed, 01 Sep 2021 11:35:31 +0000

Tippy.js is the complete tooltip, popover, dropdown, and menu solution for the web, powered by Popper.

Javascript default confirm box also works well but UX matters. In this example, I am showing the easiest way to create eye pleasant confirm box with a great user experience.

You can check out the below example in JS Fiddle

In this example I'm using TailwindCSS (a utility-first CSS framework) to style the document

Add this code to your head tag

<!-- TippyJS CDN -->
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

<!-- TailwindCSS CDN -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

Let's add an HTML button element, on the click event of this button a confirm box must appear.

<button type="button" class="bg-red-600 px-2 py-1 rounded-md text-white">
Trash
</button>

Let's add hidden HTML content for a custom confirm box innerHTML content.

<div id="template" class="hidden">
   <form action="http://myurl.domain/id" method="POST">
   </form>
   <div class="confirm__box p-3">
      <div class="confirm__text text-center mb-4">
         <strong>Are you sure ?</strong>
         <p>
            You won't able to revert this back.
         </p>
      </div>
      <div class="confirm__action flex justify-between">
         <button class="ok-btn w-10 text-white bg-green-600 px-1 rounded-sm">
         Yes
         </button>
         <button class="cancel-btn w-10 text-white bg-red-600 px-1 rouneded-sm">
         No
         </button>
      </div>
   </div>
</div>

initialize button with tippyJS

const template = document.getElementById('template');
tippy('button', {

    content: template.innerHTML,
    allowHTML: true,
    theme: 'material',
    interactive: true,
    zIndex: 99999,
    placement: 'auto',
    trigger: 'click',
});

adding submit or cancel functionality

    onCreate(instance) {
        instance.popper.querySelector('.cancel-btn').onclick = () => {
            instance.hide();
        }

        instance.popper.querySelector('.ok-btn').onclick = () => {
            instance.hide();
            instance.popper.querySelector('form').submit();
            alert('form submitted')
        }
    }

You can check out the below example in JS Fiddle

how to run storage:link in shared hosting

Milan Tarami — Wed, 02 Dec 2020 16:40:54 +0000

In shared hosting, if you don't have ssh access there is one way to run the artisan command is using Artisan Facade but wait Artisan::call('storage:link') throws an error

We are going to solve this issue, add this code to web.php within a route or to any controller

use Illuminate\Support\Facades\File;

File::link(storage_path('app/public'), public_path('storage'));

GIT Commands ( Woking with git branch )

Milan Tarami — Sat, 26 Sep 2020 07:53:58 +0000

Creating a new branch

$ git checkout -b YOUR_NEW_BRANCH_NAME

View all local branch

$ git branch

View all local and remote branch

$ git branch -a

Pushing a local branch to a remote server

$ git push origin YOUR_BRANCH_NAME

Set upstream branch

upsteam allows to use "git push" command

$ git push -u origin BRANCH_NAME

Switching between branch

$ git checkout BRANCH_NAME

Merging branch

make sure you have committed all changes before merging

// first switch to destination branch, where branch needs to be merged

$ git checkout DESTINATION_BRANCH_NAME


// and run below command to merge

$ git merge BRANCH_NAME_TO_BE_MERGED

Deleting a local branch without merging

// switch to any other branch

$ git branch -D BRANCH_NAME

Deleting a local branch after merging

make sure you need to be in the destination branch to delete merged branch

$ git branch -d BRANCH_NAME

Deleting a branch from a remote server

$ git push origin -d BRANCH_NAME

Pulling remote branch

$ git pull origin BRANCH_NAME

Getting changes from master branch to other branch

// switch to branch
$ git checkout DESTINATION_BRANCH_NAME

$ git rebase master

NOTE: I will be updating this post if I became more familiar with other git commands while working on git branch

comment down if I made mistake