Gallery
Share
Explore

JavaScript and CSS Code Examples 1

PS
Peter Sigurdson
function calculate() { var num1 = document.getElementById("num1").value; var num2 = document.getElementById("num2").value; var result = document.getElementById("result"); result.value = parseFloat(num1) + parseFloat(num2); }
<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
</head>
<body>
<form>
<label>Number 1:</label>
<input type="text" id="num1">
<br>
<label>Number 2:</label>
<input type="text" id="num2">
<br>
<label>Result:</label>
<input type="text" id="result" readonly>
<br>
<button type="button" onclick="calculate()">Calculate</button>
</form>
<script src="calculator.js"></script>
</body>
</html>


The Guessing Game:
You can use this program by saving both the HTML and JavaScript files on your computer and then opening the HTML file in your web browser. The program uses a binary search algorithm to guess the number, which will make the guessing faster.


And here is an example of the JavaScript file (named "guessing_game.js" in the above HTML file) that performs the guessing game:

<!DOCTYPE html>
<html>
<head>
<title>Guessing Game</title>
</head>
<body>
<form>
<label>Enter a number between 1 and 100:</label>
<input type="text" id="answer" required>
<br>
<button type="button" onclick="startGame()">Start Game</button>
</form>
<div id="output"></div>
<script src="guessing_game.js"></script>
</body>
</html>
You can use this program by saving both the HTML and JavaScript files on your computer and then opening the HTML file in your web browser. The program uses a binary search algorithm to guess the number, which will make the guessing faster.

function startGame() {
var answer = document.getElementById("answer").value;
var output = document.getElementById("output");
var min = 1;
var max = 100;
var guess = Math.floor((max - min) / 2) + min;
if (answer < min || answer > max) {
output.innerHTML = "Please enter a valid number between 1 and 100.";
return;
}
output.innerHTML = "Is your number " + guess + "?";
while (guess != answer) {
if (guess < answer) {
min = guess + 1;
} else {
max = guess - 1;
}
guess = Math.floor((max - min) / 2) + min;
output.innerHTML += "<br>Is your number " + guess + "?";
}
output.innerHTML += "<br>I guessed your number in " + (guess - 1) + " tries!";
}



JavaScript Code Examples:
let message = "Hello, World!";
const pi = 3.14;

// Using template literals
console.log(`The value of pi is approximately ${pi}.`);

// Using arrow functions
let printMessage = () => console.log(message);
printMessage();

// Using destructuring
let person = {name: "John", age: 30};
let {name, age} = person;
console.log(`My name is ${name} and I am ${age} years old.`);

// Using spread operator
let numbers = [1, 2, 3];
let newNumbers = [...numbers, 4, 5];
console.log(newNumbers);

// Using Map and Set
let map = new Map();
map.set("name", "John");
map.set("age", 30);
console.log(map.get("name"));

let set = new Set();
set.add("apple");
set.add("banana");
set.add("apple");
console.log(set);

// Using Promises
let promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("This is a resolved message.");
}, 1000);
});

promise.then(message => console.log(message));

This program uses the let keyword to declare a variable message and the const keyword to declare a variable pi. It also uses template literals, arrow functions, destructuring, the spread operator, Map and Set and Promises.
It starts by declaring a message and pi value, then it uses template literals to print message and pi, then it uses arrow functions to call printMessage function, then it uses destructuring to get the values of name and age from person, then it uses spread operator to create new array, then it uses map and set to set and get values and finally it uses promise to wait for 1 sec and print message.



Bouncy Ball CSS:
@keyframes bounce {
0% {
transform: translateY(0);
}
25% {
transform: translateY(-30px);
}
50% {
transform: translateY(0);
}
75% {
transform: translateY(-15px);
}
100% {
transform: translateY(0);
}
}

.ball {
width: 50px;
height: 50px;
border-radius: 25px;
background-color: red;
animation: bounce 1s infinite;
}

A CSS 3D card flip effect:

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.