JSFiddle - React, Tailwind, and code Playground

by Kevin Faulhaber

HTML

<h1>Hello Beth! Welcome to jsfiddle.</h1>

<div>
    <h3>So you are probably asking yourself what this website is?</h3>
    <p>This is a place to practice web programming. The first thing you should notice is that the this webpage is divided into 4 different screens:</p>
    <ul>
        <li>Top Left --> HTML</li>
        <li>Top Right --> CSS</li>
        <li>Bottom Left --> Javascript</li>
        <li>Bottom Right --> END result</li>
    </ul>
    <p>So you're asking youself what is HTML? CSS? Javascript? These three terms are different web programming languages.</p>
    
    <p> <strong>HTML</strong> ( hyper text marketing language ) is just another word as the structure of your webpage. It's like a skeleton. This is what is going to hold your website together.</p>
    
        <p> <strong>CSS</strong> ( cascading stylesheets ) is just another word as the design and animation part of the website.</p>
    
        <p> <strong>Javascript</strong> Is the actual programming language. Anything we can't do with CSS and HTML we do it with JS. This is what is going to make our webpage dynamic.</p>
    
    <h2> So check out each of the four boxes and see some simple examples of what you can do. :D</h2>
</div>

<button id="calculate">Calculate</button>
<div id="container"></div>

CSS

h1 {
    background-color: red;
    color: yellow;
    margin: 10px;
    padding: 10px;
    text-align: center;
}

p {
    margin: 20px;
    padding: 10px;
    background-color: blue;
    color: orange;
}

JavaScript

//here I initiate a variable X

var x;

//here I give this variable x a value:

x = 1;

//here I create a second variabyle y with a value:

var y = 2;


//here I add both variables together and add them to z

var z = x + y;

//at this point z has a value of 3. 
//How to check if z has a value of 3?


//ignore this part.. I'll explain what it does later.
var button = document.getElementById('calculate');
var container = document.getElementById('container');

button.onclick = function(){
    container.innerHTML = z;
};

//Now press the button in the END RESULT box ( the one that says calculate )
//and a number 3 should appear underneath the button.