Table html
<!DOCTYPE
html>
<html>
<head>
<title>Seminar Schedule</title>
</head>
<body>
<h2>Seminar
Schedule</h2>
<table
border="1">
<tr>
<th
rowspan="2">Day</th>
<th
colspan="2">Schedule</th>
<th
rowspan="2">Topic</th>
</tr>
<tr>
<th>Begin</th>
<th>End</th>
</tr>
<tr>
<td
rowspan="2">Monday</td>
<td rowspan="2">8:00
a.m.</td>
<td rowspan="2">5:00
p.m.</td>
<td>Introduction to
XML</td>
</tr>
<tr>
<td>Validity: DTD and Relax
NG</td>
</tr>
<tr>
<td
rowspan="3">Tuesday</td>
<td>8:00 a.m.</td>
<td>11:00 a.m.</td>
<td>XPath</td>
</tr>
<tr>
<td>11:00 a.m.</td>
<td>2:00 p.m.</td>
<td></td>
</tr>
<tr>
<td>2:00 p.m.</td>
<td>5:00 p.m.</td>
<td>XSL
Transformations</td>
</tr>
<tr>
<td>Wednesday</td>
<td>8:00 a.m.</td>
<td>12:00 p.m.</td>
<td>XSL Formatting
Objects</td>
</tr>
</table>
</body>
</html>
Form using html
and js
<!DOCTYPE
html>
<html>
<head>
<title>Simple Form</title>
<style>
.error { color: red; font-size: 0.9em; }
</style>
</head>
<body>
<form onsubmit="return
checkForm()">
Name: <input type="text"
id="name"><span class="error"
id="n1"></span><br><br>
Email: <input type="text"
id="email"><span class="error"
id="n2"></span><br><br>
Password: <input
type="password" id="pass"><span
class="error" id="n3"></span><br><br>
Confirm Password: <input
type="password" id="cpass"><span
class="error" id="n4"></span><br><br>
Age: <input type="number"
id="age"><span class="error"
id="n5"></span><br><br>
<button
type="submit">Submit</button>
</form>
<script>
function checkForm() {
// Clear all errors
document.querySelectorAll('.error').forEach(e => e.textContent =
"");
let name =
document.getElementById("name").value;
let email =
document.getElementById("email").value;
let pass =
document.getElementById("pass").value;
let cpass =
document.getElementById("cpass").value;
let age =
document.getElementById("age").value;
let valid = true;
if (name === "") {
document.getElementById("n1").textContent = "
Required";
valid = false;
}
let emailRegex =
/^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (email === "") {
document.getElementById("n2").textContent = "
Required";
valid = false;
} else if (!emailRegex.test(email)) {
document.getElementById("n2").textContent = "
Invalid";
valid = false;
}
if (pass.length < 8) {
document.getElementById("n3").textContent = " Min 8
chars";
valid = false;
}
if (cpass !== pass) {
document.getElementById("n4").textContent = " Does not
match";
valid = false;
}
if (age) {
if (age < 18 || age > 100) {
document.getElementById("n5").textContent = " 18-100
only";
valid = false;
}
}
return valid;
}
</script>
</body>
</html>
Calculator
import
React, { useState } from 'react'
const Calculator = () => {
const [data, setData] =
useState("");
const getValue =(event) =>{
console.log(event.target.value);
setData(data.concat(event.target.value))
}
const calculation = () =>{
setData(eval(data).toString())
}
const back = () =>{
setData(data.slice(0,-1))
}
const clear = () =>{
setData("")
}
return (
<>
<div className='container'>
<div>
<input placeholder='0'
value={data}/>
</div>
<br/>
<button onClick={getValue}
value="(">(</button>
<button onClick={getValue}
value=")">)</button>
<button onClick={getValue}
value="%">%</button>
<button onClick={clear} >AC</button>
<button onClick={getValue}
value="7">7</button>
<button onClick={getValue}
value="8">8</button>
<button onClick={getValue}
value="9">9</button>
<button onClick={getValue}
value="*">*</button>
<button onClick={getValue}
value="4">4</button>
<button onClick={getValue}
value="5">5</button>
<button onClick={getValue}
value="6">6</button>
<button onClick={getValue}
value="-">-</button>
<button onClick={getValue}
value="1">1</button>
<button onClick={getValue}
value="2">2</button>
<button onClick={getValue}
value="3">3</button>
<button onClick={getValue}
value="+">+</button>
<button onClick={getValue}
value="0">0</button>
<button onClick={back} >Back</button>
<button
onClick={calculation}
>=</button>
<button onClick={getValue}
value="/">/</button>
</div>
</>
)
}
export default Calculator
Comments
Post a Comment