%%html
<h3>Input scores, press tab to add each new number.</h3>
<!-- Totals -->
<ul>
<li>
Total : <span id="total">0.0</span>
Count : <span id="count">0.0</span>
Average : <span id="average">0.0</span>
</li>
</ul>
<!-- Rows added using scores ID -->
<div id="scores">
<!-- javascript generated inputs -->
</div>
<script>
// Executes on input event and calculates totals
function calculator(event) {
var key = event.key;
// Check if the pressed key is the "Tab" key (key code 9) or "Enter" key (key code 13)
if (key === "Tab" || key === "Enter") {
event.preventDefault(); // Prevent default behavior (tabbing to the next element)
var array = document.getElementsByName('score'); // setup array of scores
var total = 0; // running total
var count = 0; // count of input elements with valid values
for (var i = 0; i < array.length; i++) { // iterate through array
var value = array[i].value;
if (parseFloat(value)) {
var parsedValue = parseFloat(value);
total += parsedValue; // add to running total
count++;
}
}
// update totals
document.getElementById('total').innerHTML = total.toFixed(2); // show two decimals
document.getElementById('count').innerHTML = count;
if (count > 0) {
document.getElementById('average').innerHTML = (total / count).toFixed(2);
} else {
document.getElementById('average').innerHTML = "0.0";
}
// adds newInputLine, only if all array values satisfy parseFloat
if (count === document.getElementsByName('score').length) {
newInputLine(count); // make a new input line
}
}
}
// Creates a new input box
function newInputLine(index) {
// Add a label for each score element
var title = document.createElement('label');
title.htmlFor = index;
title.innerHTML = index + ". ";
document.getElementById("scores").appendChild(title); // add to HTML
// Setup score element and attributes
var score = document.createElement("input"); // input element
score.id = index; // id of input element
score.onkeydown = calculator // Each key triggers event (using function as a value)
score.type = "number"; // Use text type to allow typing multiple characters
score.name = "score"; // name is used to group all "score" elements (array)
score.style.textAlign = "right";
score.style.width = "5em";
document.getElementById("scores").appendChild(score); // add to HTML
// Create and add blank line after input box
var br = document.createElement("br"); // line break element
document.getElementById("scores").appendChild(br); // add to HTML
// Set focus on the new input line
document.getElementById(index).focus();
}
// Creates 1st input box on Window load
newInputLine(0);
</script>
Input scores, press tab to add each new number.
- Total : 0.0 Count : 0.0 Average : 0.0
from IPython.core.display import display, HTML, Markdown
# HTML code to be displayed
html_code = """
<center>
<div id="output"></div>
<script>
function logToOutput(message) {
var outputDiv = document.getElementById("output");
outputDiv.innerHTML += message + "<br>";
}
var obj = {
name: "Soumini",
age: 14,
currentClasses: ["AP CSP", "AP Chemistry", "AP English Seminar", "AP Calc AB", "World History", "Honors Medical Interventions"],
interests: ["reading", "writing", "painting", "solving math problems"],
siblings: 1,
pets: "giant teddy bear"
};
// Manipulate the arrays
obj.currentClasses.push("Biology");
obj.interests.splice(obj.interests.indexOf("painting"), 1);
// Log the entire object
logToOutput("Full object: " + JSON.stringify(obj));
logToOutput("Current Classes: " + obj.currentClasses.join(", "));
logToOutput("Interests: " + obj.interests.join(", "));
// Performing mathematical operations
var yearsUntilAdult = 18 - obj.age;
logToOutput(`Years until adulthood: ${yearsUntilAdult}`);
var totalClasses = obj.currentClasses.length;
logToOutput(`Total classes: ${totalClasses}`);
var petsCount = obj.siblings + 1;
logToOutput(`Total pets (including 1 pet): ${petsCount}`);
// Performing division
var classesPerInterest = totalClasses / obj.interests.length;
logToOutput(`Classes per interest: ${classesPerInterest.toFixed(2)}`);
// Modulus operation
var classesModulusSiblings = totalClasses % obj.siblings;
logToOutput(`Remainder of classes when divided by siblings: ${classesModulusSiblings}`);
// Using typeof to determine types of fields
logToOutput(`Type of name: ${typeof obj.name}`);
logToOutput(`Type of age: ${typeof obj.age}`);
logToOutput(`Type of siblings: ${typeof obj.siblings}`);
logToOutput(`Type of currentClasses: ${typeof obj.currentClasses}`);
</script>
<script>
var a = 5;
var b = 10;
if (a > b) {
logToOutput("a is greater");
} else if (a < b) {
logToOutput("b is greater");
} else {
logToOutput("both are equal");
}
logToOutput("a + b = " + (a + b)); // Adds a and b
logToOutput("a - b = " + (a - b)); // Subtracts b from a
logToOutput("a * b = " + (a * b)); // Multiplies a and b
logToOutput("a / b = " + (a / b)); // Divides a by b
</script>
</center>
"""
# Display the HTML code
display(HTML(html_code))
# Markdown description
markdown_description = """
### JavaScript Output Display
The above code defines an object with personal information about 'Soumini' and performs various operations on the data, displaying results directly in the HTML. Each operation's output is shown on the screen instead of the console.
"""
# Display the Markdown description
display(Markdown(markdown_description))
/tmp/ipykernel_1206/687454281.py:1: DeprecationWarning: Importing display from IPython.core.display is deprecated since IPython 7.14, please import from IPython display
from IPython.core.display import display, HTML, Markdown
JavaScript Output Display
The above code defines an object with personal information about ‘Soumini’ and performs various operations on the data, displaying results directly in the HTML. Each operation’s output is shown on the screen instead of the console.
from IPython.core.display import display, HTML
html_code = """
<!DOCTYPE html>
<html>
<head>
<title>Greeting Function</title>
</head>
<body>
<h1>Welcome to My Greeting App</h1>
<input type="text" id="name" placeholder="Enter your name">
<button onclick="greet()">Greet</button>
<p id="greeting"></p>
<script>
function greet() {
var name = document.getElementById('name').value;
var greetingMessage = 'Hello, ' + name + '! Welcome!';
document.getElementById('greeting').innerText = greetingMessage;
}
</script>
</body>
</html>
"""
display(HTML(html_code))
/tmp/ipykernel_68383/1227529270.py:1: DeprecationWarning: Importing display from IPython.core.display is deprecated since IPython 7.14, please import from IPython display
from IPython.core.display import display, HTML
<!DOCTYPE html>