Projects in Electron: Learn Electron Framework Building Apps

Explore the electron framework, npm installation, and per-project setup to build a hello world app. Use Visual Studio Code with an integrated terminal and a model view architecture.

Explore how Electron uses web technologies to build cross-platform desktop apps, showing setup with npm, package.json, and a hello world project.

Explore how to use Visual Studio Code to edit Electron projects, leveraging its cross-platform editor, integrated terminal, and code commands to create a hello world app.

Bootstraps hello world Electron app by initializing npm, creating index and bootstrap files, installing Electron, and launching a main process that opens browser window with width 800 and height 600.

Master the Electron bootstrap by handling ready and window close events, creating the main window, loading index.html, and wiring a render process close button using remote.

Discover how Electron enables desktop apps with web technologies, install Electron locally with npm, and create a hello world app via a bootstrap file that launches the first view.

Learn to build an electron app with a pomodoro clock, including scaffolding, package.json setup, bootstrap window, dynamic clocks, and timer controls for start, stop, reset, resume and breaks.

Build a pomodoro timer app with 25-minute focus periods, short and long breaks, and audible alerts, bootstrapped in Electron from Visual Studio Code.

Build the main view for a Pomodoro clock app by adding a dropdown to select clock count, submission controls, and dynamic clock elements with start, stop, and reset buttons.

Dynamically create clocks in an Electron timer UI by looping, generating divs with unique IDs, and wiring start, stop, and reset functions.

build a clock management system by creating a clock rate array and a clock object in index.js, enabling dynamic clocks, countdown of minutes and seconds, UI updates, and break timings.

Implement long and short break functionality in an Electron timer app by building a counter that decrements a clock array, triggers sounds, and hides the clock when time ends.

Adapt the start timer workflow for short breaks by copying patterns from long breaks, extracting clock ids from divs, and validating running clocks to support restart and alerts.

Extract the clock id using a regex and restart the timer by updating the running clock and intervals. Implement state changes for long and short breaks with UI updates.

Build a pomodoro clock in an Electron app by implementing start, stop, and reset functions, updating minutes and seconds, and debugging the countdown flow.

Launch the Pomodoro clock app, fix missing UI divs for feedback, and enable multiple clocks with start, break, resume, stop, and reset, wiring a CSS file via a link tag.

Learners build a pomodoro clock in electron with 25-minute focus sessions and 5 or 10-minute breaks, using a scaffold, bootstrap view, and a controller to manage timers.

Build a dynamic tic tac toe app in Electron by creating a grid with selectable sizes, handling moves, checking for win or draw, and resetting with a new game.

Learn to build a tic tac toe game in Electron with a dynamic grid and a user interface game board where X and O alternate and a new game restarts.

Style the electron app with css for borders, padding, and fonts; dynamically build a 3x3 to 100x100 grid of x and o cells, and wire up clicks and new game.

Build a universal add event function using addEventListener or attachEvent to handle clicks on tic-tac-toe grid elements. Manage turns, check wins or draws, and trigger a new game.

Implement the decide function to determine a winner or draw by inspecting the grid, iterating cells, and counting adjacent elements that match the previous turn.

Learn to implement a new game function for a tic-tac-toe style app, including an is-even helper, dynamic grid creation (3x3 to 5x5), and initializing scores and turn using DOM manipulation.

Build a tic tac toe game in a grid-based interface, exploring even checks, diagonals, and unique class names across 4x4 grids, with debugging and play-through.

Explore the tic tac toe project in Electron, detailing its three main files and bootstrap, how the grid is created, and how diagonal boxes and unique classes are generated.

Explore building a weather app in electron by calling external APIs, obtaining IP-based location, querying open weather map, handling JSON data, and converting temperatures to fahrenheit for display.

build an electron-based weather app that fetches data from open weather map, uses a free api key, converts celsius to fahrenheit, and displays the ip.

Build the backend controller in an electron app with a get endpoint and a weather fetch function. Parse the IP, derive lat/long, and query open weather map for data.

Learn to fetch weather data from OpenWeatherMap using JavaScript, build the API URL with lat, lon, units, and app ID, parse JSON, and display temperature, humidity, and wind.

Explore how this electron weather app fetches the IP, resolves location, calls the open weather map API, and displays current weather in Fahrenheit.

Introduce a BMI calculator app in an Electron project, outlining file structure, the BMI formula, and metric and U.S. unit conversions with functions: change to fit, convert inches, calculate BMI.

Initialize an Electron project and design the starting BMI calculator view using VS Code, npm install, bootstrap, and basic HTML, CSS, and script wiring.

Finish a BMI calculator UI in Electron, building the calculate BMI function, inputs, and results, and convert height from centimeters to feet and inches for display.

Develop conversion functions to translate centimeters into feet and inches, and then total inches for BMI calculations, wiring the UI with height and weight values and a centimeters/inches selector.

Finalize the controller by converting height and weight inputs and computing BMI, then display the BMI value with its category (underweight, healthy, overweight) in the UI and debug the inputs.

Modularize the bmi calculator app by organizing code into controller and files, use textfields and a height dropdown. Include us-to-metric conversions and display bmi ranges such as normal or overweight.

Build a currency converter app with a simple UI; tab out to update all currencies against a base currency using Yahoo's YQL API, via a basic MVC setup.

Demonstrate building the currency converter view in an electron app, with labeled inputs for pound, USD, EUR, CAD, AUD, and JPY, and bootstrap the project with npm init.

Build a currency converter by implementing an http request to Yahoo Finance via yql, defining from/to currencies and amount, and parsing the json response.

Build currency conversion functions for USD, GBP, euro, and others, starting with a specific function and refactoring to a reusable base value pattern, then extend to CAD, AUD, and JPY.

Finalize the currency converter controller by switching the base to the great british pound, enable USD conversions, and validate real-time updates across currencies via Yahoo API.

Build a currency converter app by querying Yahoo's API with a plain language query, using one reusable function to convert USD, AUD, JPY, and EUR.

Build cross-platform electron apps by installing local electron per project using Visual Studio Code; explore a pomodoro timer, tic tac toe, weather and currency converter with internet calls.