├── .compilerc
├── .eslintrc
├── .gitignore
├── LICENSE
├── README.md
├── package.json
└── src
    ├── index.html
    ├── index.js
    └── renderer.js


/.compilerc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "development": {
 4 |       "application/javascript": {
 5 |         "presets": [
 6 |           [
 7 |             "env",
 8 |             {
 9 |               "targets": {
10 |                 "electron": "3.0"
11 |               }
12 |             }
13 |           ],
14 |           "react"
15 |         ],
16 |         "plugins": [
17 |           "transform-async-to-generator"
18 |         ],
19 |         "sourceMaps": "inline"
20 |       }
21 |     },
22 |     "production": {
23 |       "application/javascript": {
24 |         "presets": [
25 |           [
26 |             "env",
27 |             {
28 |               "targets": {
29 |                 "electron": "3.0"
30 |               }
31 |             }
32 |           ],
33 |           "react"
34 |         ],
35 |         "plugins": [
36 |           "transform-async-to-generator"
37 |         ],
38 |         "sourceMaps": "none"
39 |       }
40 |     }
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "eslint-config-airbnb",
 3 |   "rules": {
 4 |     "import/extensions": 0,
 5 |     "import/no-extraneous-dependencies": 0,
 6 |     "import/no-unresolved": [2, { "ignore": ["electron"] }],
 7 |     "linebreak-style": 0
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | out
3 | package-lock.json
4 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Aditya Sridhar
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Temperature Converter Desktop App
 2 | 
 3 | This Code is part of a blog. Please refer to the blog to make the best use of this code.
 4 | The link to the blog is [here](https://adityasridhar.com/posts/desktop-apps-with-html-css-javascript)
 5 | 
 6 | ## Pre-requisites
 7 | 
 8 | ### Install NodeJS
 9 | 
10 | Install NodeJS from [https://nodejs.org/en/](https://nodejs.org/en/)
11 | 
12 | ### Install Electron Forge
13 | 
14 | Install Electron forge using the following command
15 | 
16 | ```bash
17 | npm install -g electron-forge
18 | ```
19 | 
20 | ## Cloning the Code
21 | 
22 | Clone the Code using the following command
23 | 
24 | ```bash
25 | git clone https://github.com/aditya-sridhar/simple-desktop-app-electronjs.git
26 | ```
27 | 
28 | ## Running the application
29 | 
30 | Go into the project folder and run the application using the following commands
31 | 
32 | ```bash
33 | cd simple-desktop-app-electronjs
34 | npm install
35 | npm start
36 | ```
37 | 
38 | ## Package the Application
39 | 
40 | The application can be packaged using the command 
41 | 
42 | ```bash
43 | npm run package
44 | ```
45 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "simple-desktop-app-electronjs",
 3 |   "productName": "simple-desktop-app-electronjs",
 4 |   "version": "1.0.0",
 5 |   "description": "My Electron application description",
 6 |   "main": "src/index.js",
 7 |   "scripts": {
 8 |     "start": "electron-forge start",
 9 |     "package": "electron-forge package",
10 |     "make": "electron-forge make",
11 |     "publish": "electron-forge publish",
12 |     "lint": "eslint src --color"
13 |   },
14 |   "keywords": [],
15 |   "author": "Aditya",
16 |   "license": "MIT",
17 |   "config": {
18 |     "forge": {
19 |       "make_targets": {
20 |         "win32": [
21 |           "squirrel"
22 |         ],
23 |         "darwin": [
24 |           "zip"
25 |         ],
26 |         "linux": [
27 |           "deb",
28 |           "rpm"
29 |         ]
30 |       },
31 |       "electronPackagerConfig": {
32 |         "packageManager": "npm"
33 |       },
34 |       "electronWinstallerConfig": {
35 |         "name": "simple_desktop_app_electronjs"
36 |       },
37 |       "electronInstallerDebian": {},
38 |       "electronInstallerRedhat": {},
39 |       "github_repository": {
40 |         "owner": "",
41 |         "name": ""
42 |       },
43 |       "windowsStoreConfig": {
44 |         "packageName": "",
45 |         "name": "simpledesktopappelectronjs"
46 |       }
47 |     }
48 |   },
49 |   "dependencies": {
50 |     "bootstrap": "^4.1.3",
51 |     "electron-compile": "^6.4.3",
52 |     "electron-squirrel-startup": "^1.0.0"
53 |   },
54 |   "devDependencies": {
55 |     "babel-plugin-transform-async-to-generator": "^6.24.1",
56 |     "babel-preset-env": "^1.7.0",
57 |     "babel-preset-react": "^6.24.1",
58 |     "electron-forge": "^5.2.3",
59 |     "electron-prebuilt-compile": "3.0.10",
60 |     "eslint": "^3.19.0",
61 |     "eslint-config-airbnb": "^15.1.0",
62 |     "eslint-plugin-import": "^2.14.0",
63 |     "eslint-plugin-jsx-a11y": "^5.1.1",
64 |     "eslint-plugin-react": "^7.11.1"
65 |   }
66 | }
67 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Temperature Converter</title>
 6 |     <link rel="stylesheet" type="text/css" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
 7 | 
 8 |   </head>
 9 |   <body>
10 |     <h1>Temperature Converter</h1>
11 |     <div class="form-group col-md-3">
12 |       <label for="usr">Celcius:</label>
13 |       <input type="text" class="form-control" id="celcius" onkeyup="celciusToFahrenheit()">
14 |     </div>
15 |     <div class="form-group col-md-3">
16 |       <label for="pwd">Fahrenheit:</label>
17 |       <input type="text" class="form-control" id="fahrenheit" onkeyup="fahrenheitToCelcius()">
18 |     </div>
19 |     <script src='./renderer.js'></script>
20 |   </body>
21 |   </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import { app, BrowserWindow } from 'electron';
 2 | 
 3 | // Handle creating/removing shortcuts on Windows when installing/uninstalling.
 4 | if (require('electron-squirrel-startup')) { // eslint-disable-line global-require
 5 |   app.quit();
 6 | }
 7 | 
 8 | // Keep a global reference of the window object, if you don't, the window will
 9 | // be closed automatically when the JavaScript object is garbage collected.
10 | let mainWindow;
11 | 
12 | const createWindow = () => {
13 |   // Create the browser window.
14 |   mainWindow = new BrowserWindow({
15 |     width: 800,
16 |     height: 600,
17 |   });
18 | 
19 |   // and load the index.html of the app.
20 |   mainWindow.loadURL(`file://${__dirname}/index.html`);
21 | 
22 |   // Open the DevTools.
23 |   //mainWindow.webContents.openDevTools();
24 | 
25 |   // Emitted when the window is closed.
26 |   mainWindow.on('closed', () => {
27 |     // Dereference the window object, usually you would store windows
28 |     // in an array if your app supports multi windows, this is the time
29 |     // when you should delete the corresponding element.
30 |     mainWindow = null;
31 |   });
32 | };
33 | 
34 | // This method will be called when Electron has finished
35 | // initialization and is ready to create browser windows.
36 | // Some APIs can only be used after this event occurs.
37 | app.on('ready', createWindow);
38 | 
39 | // Quit when all windows are closed.
40 | app.on('window-all-closed', () => {
41 |   // On OS X it is common for applications and their menu bar
42 |   // to stay active until the user quits explicitly with Cmd + Q
43 |   if (process.platform !== 'darwin') {
44 |     app.quit();
45 |   }
46 | });
47 | 
48 | app.on('activate', () => {
49 |   // On OS X it's common to re-create a window in the app when the
50 |   // dock icon is clicked and there are no other windows open.
51 |   if (mainWindow === null) {
52 |     createWindow();
53 |   }
54 | });
55 | 
56 | // In this file you can include the rest of your app's specific main process
57 | // code. You can also put them in separate files and import them here.
58 | 


--------------------------------------------------------------------------------
/src/renderer.js:
--------------------------------------------------------------------------------
 1 | function celciusToFahrenheit(){
 2 |     let celcius = document.getElementById('celcius').value;
 3 |     let fahrenheit = (celcius* 9/5) + 32;
 4 |     document.getElementById('fahrenheit').value = fahrenheit;
 5 | 
 6 | }
 7 | 
 8 | function fahrenheitToCelcius(){
 9 |     let fahrenheit = document.getElementById('fahrenheit').value;
10 |     let celcius = (fahrenheit - 32) * 5/9
11 |     document.getElementById('celcius').value = celcius;
12 | }


--------------------------------------------------------------------------------