Index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Alura Timer - André</title>
</head>
<body>
<section id="container">
<div href="#" id="link-sobre">
<img src="img/info_icon.svg" alt="botão de informações do aplicativo">
</div>
<h1 class="titulo">Alura Timer</h1>
<div class="timer">
<div class="relogio">
<span class="tempo">0:10:23</span>
</div>
<div class="controles">
<img src="img/btn-play.png" class="btn-play" alt="botão de start">
</div>
<div class="curso-container">
Lógica-programação
</div>
</div>
</section>
<script src="js/renderer.js"></script>
<script src="js/timer.js"></script>
</body>
</html>Renderer.js
const { ipcRenderer } = require('electron');
const path = require('path');
const timer = require(path.resolve(__dirname, 'js/timer'));
document.querySelector("#link-sobre")
.addEventListener('click', () => ipcRenderer.send('abrir-janela-sobre'));
let btnPlay = document.querySelector('.btn-play');
let tempo = document.querySelector('.tempo');
let imgs = ['img/btn-play.png','img/btn-stop.png'];
btnPlay.addEventListener('click', function(){
imgs = imgs.reverse();
timer.iniciar(tempo);
btnPlay.src = imgs[0];
});Timer.js
const moment = require('moment');
let segundos;
module.exports = {
iniciar(el){
let tempo = moment.duration(el.textContext);
segundos = tempo.asSeconds();
setInterval(()=>{
segundos++;
el.textContext = this.segundoParaTempo(segundos);
},1000);
},
segundoParaTempo(segundos){
return moment().startOf('day').seconds(segundos).format('HH:mm:ss');
}
}Alguém pode ajudar?
