JSFiddle - React, Tailwind, and code Playground

by aravind_93

HTML

<h1>What Can JavaScript Do?</h1>

<p>JavaScript can change HTML attributes.</p>

<p>In this case JavaScript changes the src (source) attribute of an image.</p>

<button onclick="document.getElementById('myImage').src='https://upload.wikimedia.org/wikipedia/commons/9/97/Qburst-Logo.png'">QBurst</button>

<img id="myImage" src="http://www.underconsideration.com/brandnew/archives/salesforce_logo_detail.png" style="width:120px;height:100px;">

<button onclick="document.getElementById('myImage').src='http://www.underconsideration.com/brandnew/archives/salesforce_logo_detail.png'">Salesforce</button>

<p id="demo">JavaScript can change the style of an HTML element.</p>

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>

<p>This example calls a function to convert from Fahrenheit to Celsius:</p>
<p id="temp"></p>
<br>
<p>For loop demo</p>
<p id="cars"></p>

JavaScript

function toCelsius(f) {
    return (5/9) * (f-32);
}
document.getElementById("temp").innerHTML = toCelsius(77);



var cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
var text = "";
var i;
for (i = 0; i < cars.length; i++) {
    text += cars[i] + "<br>";
}
document.getElementById("cars").innerHTML = text;