Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Stopwatch</title>
	<link rel = "stylesheet" href="style.css">
</head>

<body>
  <div class = "container"> 
    <div id = "display">
       00:00:00 <!-- place holder -->
    </div>  
      
		
    <div class = "buttons">
			<button class = "button_stopped" id = "startStop" onclick="startStop()">Start</button>
			<button class = "button_stopped" id = "reset" onclick ="reset()">Reset</button>
      <button class = "button_stopped" id = "playaudio" onclick="playAudio()">Play audio</button>
      <button class = "button_stopped" id = "savetime2" onclick="saveStaticDataToFile()"> Save</button> 
		</div>
    
    
    <!-- current day and time  -->
    <div id = "CurrentDay">
          Just the current day
           <!-- place holder -->         
    </div>
           <!-- place holder 
    <div>
      Current time is: 
        <span id = "CurrentTime">
          Just time
           
        </span>  (time of the start)
    </div> -->

    <!--  audio not working , wee script function  play_single_sound() 
    <div>
      <audio id="audiotag1" src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3" preload="auto"></audio>
      <a href="javascript:play_single_sound();">Play 5-sec sound on single channel</a>
    </div> -->

    <div class = "komentar"> Verze 3, 20.7.2020. Poznámky na okraj:
      <ul>
        <li>Pop-up okno po osmi hodinách nastaveno a funguje. Dokud okno neodklikneš,
          tak neběží čas.   </li>
        <li> Můžeš změnit cestu k audio souboru v souboru script.js na řádku 117. V Mozzile je 
          třeba povolit auto-play. Ale ani tak  to nefunguje. Možná jde o nejaký plug-in, 
          který to ruší.</li>
        <li>Ukládání je do txt a vždy se otevře nový s předdefinovaným jménem a je třeba to pak uložit. 
          Zajímavější by byla funkce fs.appendFile, ale jak to tak vypadá, není to 
          pro browser (nefunguje ani: var fs = require('fs'); ani: import {fs} from 'fs';).
          A Excel jsem pro jistotu raději už nezkoušela, jinak bych nic nenaspala :-)
        </li>
      </ul>
       
    </div>
   

      
  <div>  
    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
    <script src="script.js">     </script> 
    <script src="https://codepen.io/MichalaC/pen/bGEJvXe"></script>
    <!-- <script src="FileSaver.js">     </script>  -->
</body>
</html>
              
            
!

CSS

              
                .container {
	height: 300px;
	width: 100%;
}

#display {
	width: 100%;
	font-size: 72px;
	text-align: center;
	margin: 0px auto;
}

.buttons {
	text-align: center;

}

.button_started {
  background-color: coral;
  color: white;
  padding: 10px;
  border-radius: 10px;
}

.button_stopped {
  padding: 10px;
  background-color: WhiteSmoke;
  color: black;
  border-radius: 10px;
}

.button_save {
  padding: 10px;
  background-color: #99FF66;
  color: black;
  border-radius: 10px;
}


#CurrentDay {
	text-align: center;
  margin-top: 15px;
}

.komentar {
  width: 350px;
  font-style: italic;
  margin-top: 50px;
  margin-left: 20px;
};
              
            
!

JS

              
                // Filesaver, my other pan, copied from GitHub
// Need to attach it to this js 
// https://codepen.io/MichalaC/pen/bGEJvXe
// <script src="https://codepen.io/MichalaC/pen/bGEJvXe"></script>

// load the js

// the import is just not working 
  // import {fs} from 'fs';
  // import * as fs from 'fs';
  //  import { appendFile } from 'fs';  // Include Module fs

console.log("-------- The 'script.js' is loaded --------------- ") 

// ----- The stopwatch --------

// https://www.youtube.com/watch?v=1INmsFnD-u4

// define vars to hold time values

let seconds = 0;
let minutes = 0;
let hours = 0;

// define vars to hold "display" values
let displaySecons = 0;
let displayMinutes = 0;
let displayHours = 0;

// var to hold set interval function
let interval = null;

// var to hold stopwatch staatus
let status = "stopped";

// stopwatch function (logic to determine when to increment next valu, etc.)

function stopWatch(){
	seconds++;
	// logic to determin when to increment next value
	if(seconds / 60 == 1){
		seconds = 0;
		minutes++;    
		
		if(minutes / 60 == 1) {
			minutes = 0;
			hours++;			
      if(hours == 8){
        alert("You have already worked 8 hours !!");
      }
		}    
	}
  
  // if secons/minutes/hours are only one digit, add the another zero
  if(seconds < 10){
    displaySeconds = "0" + seconds.toString();   
  }
  else{
    displaySeconds = seconds;
  }
  
  if(minutes < 10 ){
    displayMinutes = "0" + minutes.toString();
  }
  else{
    displayMinutes = minutes;
  }
  
  if(hours < 10 ){
    displayHours = "0" + hours.toString();
  }
  else{
    displayHours = hours;
  }
  
  // displaz updated time values 
  // let timeWorked = displayHours + ":" + displayMinutes + ":" + displaySeconds;
  document.getElementById("display").innerHTML = displayHours + ":" + displayMinutes + ":" + displaySeconds;
}


function startStop(){
  if(status == "stopped"){
    // start the stopwatch (by calling the setINterval() function)
    // how often to display
    interval = window.setInterval(stopWatch, 1000);
    document.getElementById("startStop").innerHTML = "Stop";
    status = "started";
    // $('#startStop').addClass('button_started');
    document.getElementById('startStop').setAttribute("class", "button_started");
  }
  else{
    window.clearInterval(interval);
    document.getElementById("startStop").innerHTML = "Start";
    status = "stopped";
    document.getElementById('startStop').setAttribute("class", "button_stopped");
  }
} 

// function to reset 
function reset(){
  window.clearInterval(interval);
  seconds = 0;
  minutes = 0;
  hours = 0;
  document.getElementById("display").innerHTML = "00:00:00";
  document.getElementById("startStop").innerHTML = "Start";
  document.getElementById('startStop').setAttribute("class", "button_stopped");
  document.getElementById('playaudio').setAttribute("class", "button_stopped");    
  document.getElementById("playaudio").innerHTML = "Play audio";
  document.getElementById('savetime2').setAttribute("class", "button_stopped");    
  document.getElementById("savetime2").innerHTML = "Save";
}

// function save 
// need to allow "autoplay" in mozilla
// the source works, but it still does not play
function playAudio(){
  document.getElementById('playaudio').setAttribute("class", "button_save"); 
  //document.getElementById("playaudio").innerHTML = "Playing ... ";
  // audio
  //let src = 'https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3';
  //let audio = new Audio(src);
  //audio.play();
}

// also not working , still problem with decoder (?)
//	function play_single_sound() {
//		document.getElementById('audiotag1').play();
//	}

		

// ----- Current day and time  --------
// https://www.w3resource.com/javascript-exercises/javascript-basic-exercise-1.php


// test 
// CurrentDay
  var today = new Date();
  document.getElementById("CurrentDay").innerHTML = today 

// getFullYear() 	Get the year as a four digit number (yyyy)
//getMonth() 	Get the month as a number (0-11)
//getDate() 	Get the day as a number (1-31)


// time (only the time after refresh)
// document.getElementById("CurrentTime").innerHTML = (today.getHours() + " : " + today.getMinutes() + " : " +  today.getSeconds())



// save as 
// https://www.websparrow.org/web/how-to-create-and-save-text-file-in-javascript

// Create a function that executes on button click event.
function saveStaticDataToFile() {
  document.getElementById('savetime2').setAttribute("class", "button_save"); 
  //document.getElementById("savetime2").innerHTML = "Saving ... (not yet)";
  //console.log(typeof timeWorked);  

 // dynamic element
 //var userInput = document.getElementById("display").innerHTML;			
 //var blob = new Blob([userInput + ";" + today], { type: "text/plain;charset=utf-8" });
 //saveAs(blob, "Vlada_hodiny.txt");

 // works ok
 //var timeToSave= document.getElementById("CurrentDay").innerHTML;		
 // console.log(document.getElementById("CurrentDay").innerHTML) 	
 // var blob = new Blob([timeToSave], { type: "text/plain;charset=utf-8" });
 // saveAs(blob, "dynamic.txt");

}




console.log("done") 
//console.log(timeWorked) 
// console.log(typeof 42); // expected number 
//console.log(typeof 'blubber'); // expected output: "string"
//console.log(typeof true);  // expected output: "boolean"

// var fs = require('fs');  // Include Module fs --- not possible in the browser
//const fs = require('fs');
//fs.appendFile("Test_text.txt", 'This is my text number 1',function(err){
  //if(err) throw err;
  //console.log('IS WRITTEN')
  //});

  //const fs = require('fs');
//   appendFile('log.txt', 'text added by appendfile1', 'utf8');

              
            
!
999px

Console