Share
Explore

JavaScript and CSS Code Examples 1

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:


.card {
perspective: 1000px;
}

.card__face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
transition: transform 0.8s ease-in-out;
}

.card__face--front {
background-color: #fff;
}

.card__face--back {
background-color: #000;
transform: rotateY(180deg);
}

.card.is-flipped .card__face--front {
transform: rotateY(180deg);
}

.card.is-flipped .card__face--back {
transform: rotateY(0);
}

css scrolling effect:
.parallax {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
position: relative;
}

.parallax__layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.parallax__layer--base {
transform: translateZ(0);
}

.parallax__layer--back {
transform: translateZ(-1px) scale(2);
}



A CSS text stroke effect:
Copy code
.text {
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
color: transparent;
}
** your home work: go through these css examples: think about the html they will hook into:
A CSS neon light effect:
You can also apply the neon effect to multiple elements by giving them all the same class
<h1 class="neon">NEON LIGHTS</h1>
<p class="neon">NEON LIGHTS</p>
<span class="neon">NEON LIGHTS</span>

The class "neon" is then used in the CSS to apply the neon light effect to the text inside the HTML elements.
Copy code
.neon {
font-family: 'Orbitron', sans-serif;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 0.1em;
text-shadow:
0 0 0.5em #fff,
0 0 0.5em #fff,
0 0 0.5em #fff,
0 0 0.5em #fff,
0 0 0.5em #fff,
0 0 0.5em #fff,
0 0 0.5em #fff;
color: #f00;
}



.liquid {
position: relative;
width: 300px;
height: 150px;
overflow: hidden;
}

.liquid::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(0,0,255,0.5), rgba(0,0,255,0.5));
transform: skewY(-10deg);
transform-origin: top left;
}

.liquid__container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
}

.liquid__level {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 75%;
background-color: #00f;
}

This CSS code creates a liquid fill effect using the ::before and ::after pseudo-elements. It creates a skew effect on the ::before element and uses a linear gradient to give the appearance of a liquid level. The liquid__container and liquid__level classes are used to create the container and the liquid level respectively.
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.