An Interest In:
Web News this Week
- April 21, 2024
- April 20, 2024
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
Build a desktop app using HTML/CSS/JS & Electron
If you know how to build a website you can build desktop apps with the Electron framework.
As an introduction to the framework well create a simple desktop clock application.
Before getting started its recommended to have a current version of node.js installed.
Ok, first lets create the folder/file structure required for this project:
electron-test/ package.json index.js index.html script.js style.css
package.json
This file Indicates which command to run when we start the application:
{ "name": "electron-test", "main": "index.js", "scripts": { "start": "electron ." }}
Note: Dont use "name": "electron"
or the Electron installation will fail.
Install Electron
Open up a new terminal window in the project folder and then run the install:
npm install --save-dev electron
This downloads all the required node modules and adds the dev dependency to our package.json.
index.js
This file is used to create windows and handle system events.
For our clock app well create a small (19080) fixed size browser window:
const { app, BrowserWindow } = require("electron");app.whenReady().then(createWindow);function createWindow() { const win = new BrowserWindow({ width: 190, height: 80, resizable: false, }); win.loadFile("index.html");}
index.html
Very basic HTML file that loads the CSS and JS for the the clock functionality:
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>Clock App</title> <link rel="stylesheet" href="style.css" /> </head> <body> <script src="script.js"></script> </body></html>
script.js
Fetchs the current time and updates it each second (1000 milliseconds) in the index.html.
function getTime() { time = new Date().toLocaleTimeString(); document.body.innerHTML = time;}setInterval(getTime, 1000);
style.css
Lastly the CSS to improve the appearance of our clock:
body { font-family: monospace; font-size: 32px; background-color: black; color: greenyellow; text-align: center;}
The monospace
font prevents the clocks position shifting when the numbers change.
Start the application
We can now start our application by running the following command:
npm start
Original Link: https://dev.to/michaelburrows/build-a-desktop-app-using-html-css-js-electron-9ol
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To