index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Calculator</title> <style> *{ padding: 0; margin: 0; box-sizing: border-box; font-family:'Poppins',sans-serif; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #091924; } .calculator{ position: relative; display: grid; } .calculator .value{ grid-column: span 4; height: 100px; text-align: right; border:none; outline: none; padding: 10px; font-size: 18px; } .calculator span{ display: grid; width: 60px; height: 60px; color: #fff; background: #0c2835; place-items: center; border: 1px solid rgba(0,0,0,.1); } .calculator span:active{ background-color: #74ff3b; color: #111; } .calculator span.clear{ grid-column:span 2; width:120px; background-color: #ff3077; } .calculator span.plus{ grid-row: span 2; height: 120px; } .calculator span.equal{ background: #03b1ff; } </style> </head> <body> <form class="calculator" name="calc"> <input type="text" name="txt" class="value" readonly=''> <span class="num clear" onclick="document.calc.txt.value =''">c</span> <span class="num" onclick="document.calc.txt.value+='/'">/</span> <span class="num" onclick="document.calc.txt.value+='*'">*</span> <span class="num" onclick="document.calc.txt.value+='7'">7</span> <span class="num" onclick="document.calc.txt.value+='8'">8</span> <span class="num" onclick="document.calc.txt.value+='9'">9</span> <span class="num" onclick="document.calc.txt.value+='-'">-</span> <span class="num" onclick="document.calc.txt.value+='4'">4</span> <span class="num" onclick="document.calc.txt.value+='5'">5</span> <span class="num" onclick="document.calc.txt.value+='6'">6</span> <span class="num plus" onclick="document.calc.txt.value+='+'">+</span> <span class="num" onclick="document.calc.txt.value+='3'">3</span> <span class="num" onclick="document.calc.txt.value+='2'">2</span> <span class="num" onclick="document.calc.txt.value+='1'">1</span> <span class="num" onclick="document.calc.txt.value+='0'">0</span> <span class="num" onclick="document.calc.txt.value+='00'">00</span> <span class="num" onclick="document.calc.txt.value+='.'">.</span> <span class="num equal" onclick="document.calc.txt.value=eval(calc.txt.value)">=</span> </form> </body> </html> |
index.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
const { app, BrowserWindow } = require('electron') function createWindow () { // Create the browser window. let win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) // and load the index.html of the app. win.loadFile('index.html') } app.whenReady().then(createWindow) |
package.json
|
1 2 3 4 5 6 7 8 |
{ "name": "your-app", "version": "0.1.0", "main": "main.js", "scripts": { "start": "electron ." } } |
Now on command line just execute the below commands to run this app
npm i
npm start
