??, ???, ??? : ? ????? ?? ???? ??????. ???? ???? ?? ??? ?? ? ? ????. ?? ???? ???? ?? ??? ? ?? ? ??? ? ?? ??? ???? ??? ????? ??? ?? ????? ????.

??? ???? ??? ?? ?? ??? ?? ?? ? ? ????. ???? ???? ??? ????? ??? ? ?? ?? ? ? ????. ??, ??? ??? ???? ??? ???? ???? ???? ????.

JavaScript? ?? API? ???? ?? ?? ?? ??? ??? ??? ?? ?????. API? ? ????? ??? ??? ??? ??? ??? ? ? ??????. ????? ??? ??? ?? ?? ??? ???? ??? ??? ??? ??? ? ? ????.

??? ?? ?????? HTML ? ?????.

 
  <h1> ?? ???? ?????? </h1> 
  <p> ??? ??? ?? (CSS)? HTML? ?? ?? ? ??? ??? ??? ??????? ???? ? ???? ??? ?? ?????. CSS? HTML ? JavaScript? ?? ?? ??? ?? ?? ?????. CSS? ????, ?? ? ??? ??? ?????? ? ???? ?? ? ? ????? ???????. ? ??? ??? ???? ????? ??? ??? ??? ???? ? ?? ???? ??? ?? ? ? ????. </p>

 <span> </span> ???>

??

???? CSS? ??? ????.

 #?? {
    ??-??? : URL ( "data : image/svg xml, <svg xmlns="http://www.w3.org/2000/svg " width="'40px'height"> <forexobject width="'40px'height"> <div xmlns="'http" : line-height black font-size>? </div>  </forexobject></svg> ");
  ?? : ???;
  ?? : ??;
  ?? : 40px;
  ?? : 40px;
}
#control :: ?? {
  ??? : ?? ?;
  ?? : ??;
  ?? : "??? ??????!";
  ????? : ??;
  ?? ?? : ???;
  ?? ?? : 37px;
  ??-? : 6px;
  ?? : 2px;
  ?? : ?? ???;
  ?? : 20px;
}

?? ???? ???? (?)? ??? ????? ?? ???? ??? ??????.

???? ?? ???? ?????? ?? ?? ???? ?????????. JavaScript? ?? ???. ??? ????? ????? ??? ??? ??? ??? ?? ? ????. ?? ?? ?? ??? ???? ??? ??? ????? ?? ?? ???? ??? ???????.

 var control = document.importNode (document.querySelector ( 'template'). ??, true) .ChildNodes [0];
document.querySelector ( 'p'). onpointerup = () => {
  ?? = document.getSelection (), text = selection.toString ();
  if (text! == "") {
    rect = selection.getRangeat (0) .getBoundingClientRect ();
    control.style.top =`calc ($ {rect.top} px -48px)`;
    control.style.left =`calc ($ {rect.left} px calc ($ {rect.width} px / 2) -40px)`;
    Control [ 'text'] = ???; 
    document.body.appendChild (???);
  }
}

? ????? ??

????, ??? ?? ???? ???? ??? onpointerup ???? ?? ??? ??? ?????. ?? ????? document.getSelection ()? ???? ??? ???? ??? ???? ????. ??? ???? ?? ?? ??? GetBoundingClientRect ()? ?? ??? ??? ??? ??? ?? ?? ERACT ??? ?????.

rect? ???? ???? ?? ? ?? ??? ???? ?????. ?? ??? ?? ?? ???? ??? ?? ?? ?? ?? ?? ???? ??? ?????. ?? ??? ???? ??? ?? ??? ??? ?????. ??? ??? ???? ???? ? ?????.

??? ?????, ??? AppendChild ()? ???? ? ???? ???? ?????. ? ???? ????? ?? ??? ? ??? ???? ?? ?? ???? ??? ?????.

?? ?? ?? ???? ?? ? ? ???? ?? ?????. ?? ??, ????? ???? ???? ????? ?? ????.

 Control.addeventListener ( 'Pointerdown', Oncontroldown, True);

oncontroldown (???) ?? {
  Window.Open (`https://twitter.com/intweet?text=$ {this.text}`)
  this.remove ();
  document.getSelection (). removealLranges ();
  event.stopPropagation ();
}

???? ???? Twitter? "? ??"???? ?? ?? ? ??? ???? ?? ? ? ????.

?? ???? ??? ?? ?? ???? ? ?? ???? ??? ????? ??? ??? ?? ?????. ? ???? Pointerdown ???? Dom ?? ??? ? ?? ??? ??????? ??? ?????.

?? ???? OnPointerDown ?????? ??? ???? ?????.

 document.onpointerdown = () => {    
  ??? = document.querySelector ( '#control');
  if (control! == null) {control.remove (); document.getSelection (). removeallRanges ();}
}

?? ???? ??? ? ??? ???? ?? ???? ?? ?? ???? ?? ? ? ?????.

??

Chris? ?? ?? ? ?? ? ??? ??? ????.

??? ?? ???? ?? ??? ???? ???? ????.

??? ??

??? ??? ??? ??? ????. ?? ??? HTML ?? ?? CSS ?????? ?? ?? ???? ?? ???? ??? ?? ? ?? ????. JavaScript ???? ?? ?? ???? ?? ? ?? ????. ?? ??? ????? ???? ??? ??? ?? ?? ????? ??? ??? ?? ?? ????.

?? UI/UX ??

??? ?? ?????, ?? ??? ??? ???? ?? ??? ??? ? ???? ? ? ?? ??? ????. ?? ??, ??? ??? ??? ???? ???? ????. ?? ?? ??? ???? ?? ??? ???? ?? ?? ? ? ????. ????? ????. ?? ?? ??? ?? ??? ??? ???? ?? ?? ???? ????? ??. ??? ??? ???? ??? ???????? ?? ? ????.

? ?? ? : ?? ???? ??? ?? ?? ?? ????. ??? ?? ??? ?? ?? ?? ?? ????. ?? ??? ?? CSS "??? ??"? ???? ??? ??? ??? ????.

?? : ???? ? ????? ???? ?? ???? ??? ???? ?????? ?? ???? ???? ???? ??????.

? ??? ?? API? ??? ???? ?? ??? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!