JSFiddle - React, Tailwind, and code Playground

by julienkindle

HTML

<form method="POST">

   <body>
      <a id="title" style="font-size:50px"><b>Teslagram</b></a>

      <main>
         <form name="Formular" action="">
            <a id="last" style="font-size:40px">-</a>
            <br>
            <input id="Eingabe" value="" style="font-size:40px;width:550px">
            <br>
            <button type="button" class="btn" id="sendT">Send</button>
            <br>
            <br>
            <button type="button" class="btn2" id="genau">Genau</button>
            <button type="button" class="btn2" id="leider">leider ned</button>
            <button type="button" class="btn2" id="autofahra">Autofahra</button>
            <button type="button" class="btn2" id="thx">Danke!</button>
         </form>
      </main>
      <script src="quadrat.js"></script>
   </body>

CSS

.btn {
   background: #ed4949;
   background-image: -webkit-linear-gradient(top, #ed4949, #4a3535);
   background-image: -moz-linear-gradient(top, #ed4949, #4a3535);
   background-image: -ms-linear-gradient(top, #ed4949, #4a3535);
   background-image: -o-linear-gradient(top, #ed4949, #4a3535);
   background-image: linear-gradient(to bottom, #ed4949, #4a3535);
   -webkit-border-radius: 10;
   -moz-border-radius: 10;
   border-radius: 10px;
   font-family: Arial;
   color: #ffffff;
   font-size: 31px;
   padding: 10px 30px 10px 30px;
   text-decoration: none;
}

.btn:hover {
   background: #2b3338;
   background-image: -webkit-linear-gradient(top, #2b3338, #b4defa);
   background-image: -moz-linear-gradient(top, #2b3338, #b4defa);
   background-image: -ms-linear-gradient(top, #2b3338, #b4defa);
   background-image: -o-linear-gradient(top, #2b3338, #b4defa);
   background-image: linear-gradient(to bottom, #2b3338, #b4defa);
   text-decoration: none;
}

.btn2 {
   background: #ed4949;
   background-image: -webkit-linear-gradient(top, #ed4949, #4a3535);
   background-image: -moz-linear-gradient(top, #ed4949, #4a3535);
   background-image: -ms-linear-gradient(top, #ed4949, #4a3535);
   background-image: -o-linear-gradient(top, #ed4949, #4a3535);
   background-image: linear-gradient(to bottom, #ed4949, #4a3535);
   -webkit-border-radius: 10;
   -moz-border-radius: 10;
   border-radius: 10px;
   font-family: Arial;
   color: #ffffff;
   font-size: 25px;
   padding: 10px 30px 10px 30px;
   text-decoration: none;
}

.btn2:hover {
   background: #2b3338;
   background-image: -webkit-linear-gradient(top, #2b3338, #b4defa);
   background-image: -moz-linear-gradient(top, #2b3338, #b4defa);
   background-image: -ms-linear-gradient(top, #2b3338, #b4defa);
   background-image: -o-linear-gradient(top, #2b3338, #b4defa);
   background-image: linear-gradient(to bottom, #2b3338, #b4defa);
   text-decoration: none;
}

JavaScript

var chat_id = 0;
var bot_id = '254907786:AAFf6ltM1rWVDdnzJ8CI1AaQzy3DCYFAE1k';

var last = '';

function getJS() {
   gjson = getJSON('https://api.telegram.org/bot' + bot_id + '/getupdates');


   var obj = JSON.parse(gjson);
   var n = obj.result.length - 1;
   var under_limit = n - 10;
   if (under_limit < 1) under_limit = 1;


   var text = '';
   var last_n = obj.result[n].update_id;
   var title = document.getElementById('title');

   if (last_n != last)
      document.body.style.background = "green url('http://www.movieforge.li/T-logo.png') no-repeat center center";
   else
      document.body.style.background = "white url('http://www.movieforge.li/T-logo.png') no-repeat center center";
   last = last_n;

   for (var i = under_limit; i <= n; ++i) {
      var from = obj.result[i].message.from.first_name;
      var msg = obj.result[i].message.text;
      chat_id = obj.result[i].message.chat.id;
      text += "<br>" + from + ': ' + msg;
   }


   document.getElementById("last").innerHTML = text;
}

function sendTxt(txt) {
   getJSON('https://api.telegram.org/bot' + bot_id + '/sendmessage?chat_id=' + chat_id + '&text=' + txt);
}

function sendF() {
   sendTxt(document.getElementById('Eingabe').value);
   document.getElementById('Eingabe').value = '';
}

function sendGenau() {
   sendTxt('Genau');
}
var genau = document.getElementById('genau');
genau.addEventListener('click', sendGenau, true);

function sendLeider() {
   sendTxt('Leider ned');
}
var leider = document.getElementById('leider');
leider.addEventListener('click', sendLeider, true);

function sendAuto() {
   sendTxt('I bi gad am Autofahra - autom. gsendet');
}
var autofahra = document.getElementById('autofahra');
autofahra.addEventListener('click', sendAuto, true);

function sendThx() {
   sendTxt('Danke!');
}
var thx = document.getElementById('thx');
thx.addEventListener('click', sendThx, true);

var los = document.getElementById('sendT');
los.addEventListener('click', sendF,...