Add JavaScript to Your CodePen Projects

This course assumes you know little about JavaScript—or none at all. If you do, great. In this unit, you see several projects that use JavaScript and that provide some discussion of what is going on in the code. You'll just copy that code into your CodePen projects.

Simple Button with JavaScript Date Function

This example is shown at W3Schools: My First JavaScript.

Copy this tagging into the HTML panel of a CodePen

project:

<!DOCTYPE html>
<html>
<body>
<h2>My First JavaScript</h2>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>

Run this file in CodePen, click the button, and see what happens.

So what's going on here? button creates the image of a button. The onclick event targets the demo ID between the p tags. The innerHTML property uses the built-in function Date() to insert the date within the p tags.

Simple Button with JavaScript to Display Text

You can also display text with the onclick event. This example from https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onclick:

<!DOCTYPE html>
<html>
<body>
<h1>onclick Event</h1>
<p>The onclick event triggers a function when an element is clicked on.</p>
<p>Click to trigger a function that will output "Hello World":</p>
<button onclick="myFunction()">;Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>
</html>

Display an Element of a JavaScript Object

The object in this is an array—a list of values. This example from https://www.w3schools.com/js/tryit.asp?filename=tryjs_objects_object:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p id="demo"></p>
<script>
// Create an object:
const car = {type:"Fiat", model:"500", color:"white"};
// Display some data from the object:
document.getElementById("demo").innerHTML = "The car type is " + car.type;
</script>
</body>
</html>

JavaScript Used to Handle Form Data

In this one, a form is displayed with a blank for the user name. When the user enters and name and clicks the button, the name is displayed in the web page. Example from CodePen Home ToDo JavaScript Example. CodePen

Enter this tagging in the HTML panel:

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Very Simple JavaScript innerHTML Example</title>
<link rel="stylesheet" href="./js7b.css">
</head>
<body>
<form method="GET">
What is your name: <input type="text" size="20" id="myname" onkeydown = "if (event.keyCode == 13)  document.getElementById('mybutton').click()"   />
<input type="text" style="display: none;" />
<button type="button" id="mybutton">Submit</button>
</form>
<div id="hellomessage"></div>
<script  src="./js7c.js"></script>
</body>
</html>

Enter CSS in the CSS panel:

body {
font-size:1em;
font-family:Arial;
background:#eee;
}
#hellomessage {
font-weight:bold;
}

Enter this JavaScript in the JS panel:

function ShowHelloMessage() {
var name = document.getElementById("myname");
document.getElementById("hellomessage").innerHTML = "Hello, " + name.value;
}
document.getElementById("mybutton").onclick = ShowHelloMessage;

Related Information

CodePen Docs

Pens tagged 'javascript' on CodePen

Simple JavaScript innerHTML Example

ToDo JavaScript Example

W3.JS Tutorial

HTML Button onclick – JavaScript Click Event Tutorial. freeCodeCamp

JavaScript Examples. W3schools provides over 200 JavaScript code examples You could practically learn your JavaScript here!

CSS 3D Solar System. Don't try this at home.

Information and programs provided by admin@mcmassociates.io.