Skip to content

Instantly share code, notes, and snippets.

Sylvain Saurel ssaurel

Block or report user

Report or block ssaurel

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@ssaurel
ssaurel / clickspeedgame.htm
Last active Jul 18, 2019
Click Speed Test Game in HTML5 for a tutorial on the SSaurel's Channel
View clickspeedgame.htm
<html>
<head>
<title>Click Speed Game in HTML5</title>
<style type="text/css">
#content {
width: 200px;
border: 1px dashed #dc0000;
font-size: 20px;
text-align: center;
margin: 0 auto;
@ssaurel
ssaurel / AddingClickEventListeners.js
Created Jul 18, 2019
Adding Click Event Listeners
View AddingClickEventListeners.js
// we set a click event listener on the start button
startBtn.addEventListener("click", function(e) {
startGame();
});
// we add a click event listener on the click
// area div to update the score when the user will click
clickArea.addEventListener("click", function(e) {
if (!ended) {
score++;
@ssaurel
ssaurel / EndGame.js
Created Jul 18, 2019
End Game method for the Click Speed Test Game in HTML5 on the SSaurel's Channel
View EndGame.js
function endGame() {
// we write final stats
var clicsBySeconds = (score / duration).toFixed(2);
timerTxt.textContent = duration.toFixed(3);
clicksTxt.textContent = clicsBySeconds;
// we show start button to play an other game
show(startBtn);
// we display result to the user in delayed mode
// to update DOM elements just before the alert
@ssaurel
ssaurel / StartGame.js
Created Jul 18, 2019
StartGame method for the Click Speed Test Game in HTML5 on the SSaurel's Channel
View StartGame.js
function startGame() {
// we hide the start button
hide(startBtn);
score = -1;
ended = false;
// we get start time
startTime = new Date().getTime();
// we create a timer with the setInterval method
var timerId = setInterval(function() {
@ssaurel
ssaurel / clickspeedgame.htm
Last active Jul 18, 2019
Click Speed Game Test in HTML5 for the SSaurel's Channel
View clickspeedgame.htm
<html>
<head>
<title>Click Speed Game in HTML5</title>
<style type="text/css">
#content {
width: 200px;
border: 1px dashed #dc0000;
font-size: 20px;
text-align: center;
margin: 0 auto;
@ssaurel
ssaurel / chucknorrisrandomfacts.htm
Last active Jul 18, 2019
Chuck Norris Random Facts Application in HTML5 on the SSaurel's Channel
View chucknorrisrandomfacts.htm
<html>
<head>
<title>Chuck Norris Random Facts in HTML5</title>
<style type="text/css">
#data {
width: 600px;
border: 1px dashed black;
font-size: 20px;
text-align: center;
margin: 0 auto;
@ssaurel
ssaurel / Click.js
Created Jul 18, 2019
Click Event Listener on the Chuck Norris image
View Click.js
document.getElementById("logo").addEventListener("click", function() {
randomFact();
});
@ssaurel
ssaurel / parseJson.js
Created Jul 18, 2019
Parse JSON method for the Chuck Norris Random Facts App on the SSaurel's Channel
View parseJson.js
function parseJson(json) {
// JSON returned is simple. We have just to display the value property of the JSON Object returned
var fact = "<b>" + json["value"] + "</b>";
document.getElementById("data").innerHTML = fact;
}
@ssaurel
ssaurel / randomfact.js
Created Jul 18, 2019
Random Fact Web Service Call for the Chuck Norris App in HTML5
View randomfact.js
function randomFact() {
// We call the Web Service via AJAX
var xmlhttp = new XMLHttpRequest();
var url = "https://api.chucknorris.io/jokes/random";
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var json = JSON.parse(this.responseText);
// We parse the JSON response
parseJson(json);
}
@ssaurel
ssaurel / chucknorrisrandomfacts.htm
Created Jul 18, 2019
Chuck Norris Random Facts Application in HTML5
View chucknorrisrandomfacts.htm
<html>
<head>
<title>Chuck Norris Random Facts in HTML5</title>
<style type="text/css">
#data {
width: 600px;
border: 1px dashed black;
font-size: 20px;
text-align: center;
margin: 0 auto;
You can’t perform that action at this time.