Author Archives: DeonDennis
code-xombi was created to teach upcoming programmers the basics in programming
Alert with inline scripting
<DOCTYPE html>
<html>
<head>
<title>alart</title>
</head>
<body>
<p>we will give an alert with button using inline scripting.</p>
<h3>click button to alert</h3>
<button onclick=”alert(‘I love Code-xombi, what about u?’)”>Click</button>
</body>
</html>
Creating an alert button
<!DOCTYPE html>
<html>
<head>
<title>background change</title>
</head>
<body>
<button id=”tio”>click</button>
<script>
document.getElementById(“tio”).onclick= function(){
alert(‘hello, i would love to know u more.’)
}
</script>
</body>
</html>
OUTPUT:
This is the output of the alert code above.
Styled button
<!DOCTYPE html>
<html>
<head>
<title>styled button</title>
</head>
<body>
<button id=”btn”>BUTTON</button>
<span>This is a styled button</span>
<style>
#btn{
background:blue;
color:white;
width:10em;
height:7em;
border-radius:20em;
border:solid;
border-color:green gold;
border-width:1em;
}
</style>
</body>
</html>
How to alert with button.
<!DOCTYPE html>
<html>
<head>
<title>background change</title>
</head>
<body style=”background:black;text-align:center;”>
<h1 style=”background:blue;”>Click button to alert</h1>
<button id=”tio” style=”background:blue;width:20em;height:5em;”>click</button>
<script>
document.getElementById(“tio”).onclick= function(){
alert(‘hello’)
}
</script>
</body>
</html>
Background change onclick.
<!DOCTYPE html>
<html>
<head>
<title>background change</title>
</head>
<body>
<div onclick=”change(this)” style=”background-color:red;width:100%;height:30em;color:blue;text-align:center;line-height:30em;”>click me to change</div>
<button id=”tio”>click</button>
<p id=”tfr”>i am a boy</p>
<button id=”ctc” onclick=”answer()”>change</button>
<script>
function change(element){
let gyt= element.style.backgroundColor;
if (gyt == “red”){
element.style.backgroundColor=”green”;
} else{
element.style.backgroundColor=”red”;
}
}
</script>
</body>
</html>
Body Font Size
In the table below, select a body font size in pixels (px) to display a complete “px to em and percent” conversion table.
Tip: The default font size is usually 16px.pxempercent
5px 0.3125em 31.25%
6px 0.3750em 37.50%
7px 0.4375em 43.75%
8px 0.5000em 50.00%
9px 0.5625em 56.25%
10px 0.6250em 62.50%
11px 0.6875em 68.75%
12px 0.7500em 75.00%
13px 0.8125em 81.25%
14px 0.8750em 87.50%
15px 0.9375em 93.75%
16px 1.0000em 100.00%
17px 1.0625em 106.25%
18px 1.1250em 112.50%
19px 1.1875em 118.75%
20px 1.2500em 125.00%
21px 1.3125em 131.25%
22px 1.3750em 137.50%
23px 1.4375em 143.75%
24px 1.5000em 150.00%
25px 1.5625em 156.25%
What is the difference between PX, EM and %?
Pixel is a static measurement, while percent and EM are relative measurements. The size of an EM or percent depends on its parent. If the text size of body is 16 pixels, then 150% or 1.5 EM will be 24 pixels (1.5 * 16).
How to creat a tooltip
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class=”tooltip_div”>Left Tooltip
<span class=”tooltip”>This is the Tooltip text</span>
</div>
<style>
body {
text-align:left;
}
.tooltip_div {
position: relative;
display: inline-block;
}
.tooltip {
visibility: hidden;
}
.tooltip_div:hover .tooltip {
visibility: visible;
}
</style>
</body>
</html>
Simple way to creat calculator with HTML,CSS & JS.
<!DOCTYPE html>
<html>
<head>
<tittle>calculator</tittle>
<style>
table{
border:20px solid blue;
background:black;
border-radius:30px;
height:auto;
}
input[type=button]{
color:white;
height:100px;
width:60px;
background:blue;
}
input[type=text]{
height:100px;
width:308px;
background:blue;
border-radius:20px;
color:red;
}
input:active[type=button]{
background:red;
border:black 10px solid;
border-radius:20px;
}
body{
background:rgb(40 60 80);
}
</style>
</head>
<body>
<table>
<tr>
<td>
<input type =”text” id=”result” disabled>
</td>
</tr>
<tr>
<td>
<input type=”button” value=”1″ onclick=”display(‘1’)”>
<input type=”button” value=”2″ onclick=”display(‘2’)”>
<input type=”button” value=”3″ onclick=”display(‘3’)”>
<input type=”button” value=”/” onclick=”display(‘/’)”>
<input type=”button” value=”(” onclick=”display(‘(‘)”>
</td>
</tr>
<tr>
<td>
<input type=”button” value=”4″ onclick=”display(‘4’)”>
<input type=”button” value=”5″ onclick=”display(‘5’)”>
<input type=”button” value=”6″ onclick=”display(‘6’)”>
<input type=”button” value=”*” onclick=”display(‘*’)”>
<input type=”button” value=”)” onclick=”display(‘)’)”>
</td>
</tr>
<tr>
<td>
<input type=”button” value=”7″ onclick=”display(‘7’)”>
<input type=”button” value=”8″ onclick=”display(‘8’)”>
<input type=”button” value=”9″ onclick=”display(‘9’)”>
<input type=”button” value=”-” onclick=”display(‘-‘)”>
<input type=”button” value=”^” onclick=”display(‘^’)”>
</td>
</tr>
<tr>
<td>
<input type=”button” value=”.” onclick=”display(‘.’)”>
<input type=”button” value=”0″ onclick=”display(‘0’)”>
<input type=”button” value=”=” onclick=”calculate()”>
<input type=”button” value=”+” onclick=”display(‘+’)”>
<input type =”button” value=”C” onclick=”clearScreen()” id=”clear”>
</td>
</tr>
</table>
<script>
function display(value){
document.getElementById(“result”).value += value;
}
function clearScreen(){
document.getElementById(“result”).value = “”;
}
function calculate(){
let p=
document.getElementById(“result”).value;
let q= eval(p);
document.getElementById(“result”).value = q;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<tittle>calculator</tittle>
<style>
table{
border:20px solid blue;
background:black;
border-radius:30px;
height:auto;
}
input[type=button]{
color:white;
height:100px;
width:60px;
background:blue;
}
input[type=text]{
height:100px;
width:308px;
background:blue;
border-radius:20px;
color:red;
}
input:active[type=button]{
background:red;
border:black 10px solid;
border-radius:20px;
}
body{
background:rgb(40 60 80);
}
</style>
</head>
<body>
<table>
<tr>
<td>
<input type =”text” id=”result” disabled>
</td>
</tr>
<tr>
<td>
<input type=”button” value=”1″ onclick=”display(‘1’)”>
<input type=”button” value=”2″ onclick=”display(‘2’)”>
<input type=”button” value=”3″ onclick=”display(‘3’)”>
<input type=”button” value=”/” onclick=”display(‘/’)”>
<input type=”button” value=”(” onclick=”display(‘(‘)”>
</td>
</tr>
<tr>
<td>
<input type=”button” value=”4″ onclick=”display(‘4’)”>
<input type=”button” value=”5″ onclick=”display(‘5’)”>
<input type=”button” value=”6″ onclick=”display(‘6’)”>
<input type=”button” value=”*” onclick=”display(‘*’)”>
<input type=”button” value=”)” onclick=”display(‘)’)”>
</td>
</tr>
<tr>
<td>
<input type=”button” value=”7″ onclick=”display(‘7’)”>
<input type=”button” value=”8″ onclick=”display(‘8’)”>
<input type=”button” value=”9″ onclick=”display(‘9’)”>
<input type=”button” value=”-” onclick=”display(‘-‘)”>
<input type=”button” value=”^” onclick=”display(‘^’)”>
</td>
</tr>
<tr>
<td>
<input type=”button” value=”.” onclick=”display(‘.’)”>
<input type=”button” value=”0″ onclick=”display(‘0’)”>
<input type=”button” value=”=” onclick=”calculate()”>
<input type=”button” value=”+” onclick=”display(‘+’)”>
<input type =”button” value=”C” onclick=”clearScreen()” id=”clear”>
</td>
</tr>
</table>
<script>
function display(value){
document.getElementById(“result”).value += value;
}
function clearScreen(){
document.getElementById(“result”).value = “”;
}
function calculate(){
let p=
document.getElementById(“result”).value;
let q= eval(p);
document.getElementById(“result”).value = q;
}
</script>
</body>
</html>
HTML basic tags
<!DOCTYPE html> :defines the HTML page
<!–….–> : this is the comment tag
<form> : defines an HTML form for user input
<div> : defines a section in a document.
<head> : contains metadata & information for the document.
<html> defines the root of an HTML document.
<meta> : defines metadata about an html document.
<b> : defines a bold text.
<body> : contains the mean visible codes of a document.
<button> : defines clickable buttons.
<em> : defines emphasized text.
<h1> to <h6> : defines html heading.
<input> : defines an input control.
<label> : defines a label for an <input> element.
<title> : defines a title for the document.
<script> : defines JavaScript codes.
<style> : defines css styling.
Deon Dennis code-xombi 