Skip to content Sign up AveyBD / tailwind-css-calculator Public Code Issues Pull requests Actions Projects Wiki Security Insights tailwind-css-calculator/index.html
@AveyBD AveyBD Changed Input to P tag 1 contributor 72 lines (67 sloc) 3.95 KB <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Simple Calculator Using Tailwind CSS</title> <!-- tailwind css --> <link rel="stylesheet" href="./assets/css/style.css"> <!-- conecting javascript --> <script src="./assets/script/app.js"></script> </head> <body> <header> </header> <main class="bg-slate-100"> <div class="flex justify-center items-center min-h-screen"> <div class="p-4 border border-solid shadow-white border-white-400 bg-black rounded-xl"> <p id="outputScreen" class="mb-5 p-5 font-extrabold rounded-xl text-white bg-black text-right"></p> <div class="grid grid-cols-4 gap-4"> <button class="rounded-full border-solid border-gray-500 bg-slate-300 p-4" onclick="clr()">C</button> <button class="rounded-full border-solid border-gray-500 bg-slate-300 p-4" onclick="del()">Del</button> <button class="rounded-full border-solid border-gray-500 bg-slate-300 p-4" onclick="display('%')">%</button> <button class="rounded-full text-white border-solid border-gray-500 bg-amber-500 p-4" onclick="display('/')">/</button> <button class="rounded-full border-solid border-gray-500 bg-gray-500 text-white px-2" onclick="display('7')">7</button> <button class="rounded-full border-solid border-gray-500 bg-gray-500 text-white px-2" onclick="display('8')">8</button> <button class="rounded-full border-solid border-gray-500 bg-gray-500 text-white px-2" onclick="display('9')">9</button> <button class="rounded-full text-white border-solid border-gray-500 bg-amber-500 p-4" onclick="display('*')">*</button> <button class="rounded-full border-solid border-gray-500 bg-gray-500 text-white px-2" onclick="display('4')">4</button> <button class="rounded-full border-solid border-gray-500 bg-gray-500 text-white px-2" onclick="display('5')">5</button> <button class="rounded-full border-solid border-gray-500 bg-gray-500 text-white px-2" onclick="display('6')">6</button> <button class="rounded-full text-white border-solid border-gray-500 bg-amber-500 p-4" onclick="display('-')">-</button> <button class="rounded-full border-solid border-gray-500 bg-gray-500 text-white px-2" onclick="display('1')">1</button> <button class="rounded-full border-solid border-gray-500 bg-gray-500 text-white px-2" onclick="display('2')">2</button> <button class="rounded-full border-solid border-gray-500 bg-gray-500 text-white px-2" onclick="display('3')">3</button> <button class="rounded-full text-white border-solid border-gray-500 bg-amber-500 p-4" onclick="display('+')">+</button> <button class="rounded-full border-solid border-gray-500 bg-gray-500 text-white p-4 col-span-2" onclick="display('0')">0</button> <button class="rounded-full border-solid border-gray-500 bg-gray-500 text-white p-4" onclick="display('.')">.</button> <button class="rounded-full border-solid border-gray-500 bg-amber-500 text-white p-4" onclick="calc()">=</button> </div> </div> </div> </main> <footer> </footer> </body> </html> © 2022 GitHub, Inc. Terms Privacy Security Status Docs Contact GitHub Pricing API Training Blog About Loading complete