JSFiddle - React, Tailwind, and code Playground

by Mikael Roos

HTML

<h1>Hej Världen!</h1>
<p>Detta är min första MEGA HTML5-sida.</p>
<p><a id="anchor" href="#">Show an alert popup.</a></p>
<p><button id="confirm">Show a confirm popup.</button></p>

<div id="output"></div>

CSS

html {
    background-color: #eee;    
}
 
h1 {
    text-align: center;
    color: red;
}
 
p {
    /*border: 1px solid #666;*/
    color: #00f;
}

JavaScript

(function(){
    "use strict";
  
    var value = 42;
    var output = document.getElementById("output");
    var anchor = document.getElementById("anchor");
    var confirm = document.getElementById("confirm");

    output.innerHTML = "<h3>This is a template!</h3>";

    console.log("Hello in the consol.");
    console.log("Here you can write inline code of JavaScript and debug your programs.");
    console.log("Try writing 1+1 (at the bottom of the developer tool) and see what happens.");
    console.log("Try writing: console.log('Hi')");
    console.log("Try writing: value");


    // <p><a href="#" onclick='alert("This is a message in a popup saying Hello World");'>Show an alert popup.</a></p>
    //alert("This is a message in a popup saying Hello World");
    anchor.addEventListener("click", function() {
        alert("This is a message in a popup saying Hello World");
    });


    //<p><button onclick='confirm("Press F12 to open the developer tools for your browser, select the console. Then reload the page and see the message in the console.");'>Show a confirm popup.</button></p>
    //confirm("Press F12 to open the developer tools for your browser, select the console. Then reload the page and see the message in the console.");
    confirm.addEventListener("click", function() {
        window.confirm("Press F12 to open the developer tools for your browser, select the console. Then reload the page and see the message in the console.");
    });


    /*
    <p><a href="#" onclick='alert("This is a message in a popup saying Hello World");'>Show an alert popup.</a></p>
     
    <p><button onclick='confirm("Press F12 to open the developer tools for your browser, select the console. Then reload the page and see the message in the console.");'>Show a confirm popup.</button></p>
    */

}());