Codes of Ui
Uploaded by
sakshikale132006Codes of Ui
Uploaded by
sakshikale132006Codes of ui
1. Login Page Validation
<!DOCTYPE html>
<html>
<head><title>Login Validation</title></head>
<body>
<h2>Login Page</h2>
<input type="email" id="email" placeholder="Enter Email"><br><br>
<input type="password" id="password" placeholder="Enter Password"><br><br>
<button onclick="login()">Login</button>
<script>
function login() {
let email = [Link]("email").value;
let pass = [Link]("password").value;
if (email && pass)
alert("Login Successful");
else
alert("Please enter all details.");
</script>
</body>
</html>
---
2. Dark Mode Toggle
<!DOCTYPE html>
<html>
<head><title>Dark Mode Toggle</title></head>
<body id="page">
<h2>Welcome to My Page</h2>
<button onclick="toggleTheme()">Toggle Theme</button>
<script>
let dark = false;
function toggleTheme() {
[Link] = dark ? "white" : "black";
[Link] = dark ? "black" : "white";
dark = !dark;
</script>
</body>
</html>
---
3. Character Counter
<!DOCTYPE html>
<html>
<head><title>Character Counter</title></head>
<body>
<textarea id="text" maxlength="100" oninput="countChars()"></textarea>
<p id="count">Characters typed: 0 / 100</p>
<script>
function countChars() {
let txt = [Link]("text").[Link];
[Link]("count").innerText = "Characters typed: " + txt + " / 100";
}
</script>
</body>
</html>
---
4. Image Slideshow
<!DOCTYPE html>
<html>
<head><title>Image Slideshow</title></head>
<body>
<img id="slide" src="[Link]" width="300" height="200"><br>
<button onclick="prev()">Previous</button>
<button onclick="next()">Next</button>
<script>
let imgs = ["[Link]", "[Link]", "[Link]"];
let i = 0;
function show() { [Link]("slide").src = imgs[i]; }
function next() { i = (i + 1) % [Link]; show(); }
function prev() { i = (i - 1 + [Link]) % [Link]; show(); }
setInterval(next, 3000);
</script>
</body>
</html>
---
5. Online Order Form
<!DOCTYPE html>
<html>
<head><title>Order Form</title></head>
<body>
<h3>Food Order</h3>
<input id="name" placeholder="Name"><br><br>
<input id="item" placeholder="Item"><br><br>
<input id="qty" type="number" placeholder="Quantity"><br><br>
<button onclick="placeOrder()">Place Order</button>
<p id="summary"></p>
<script>
function placeOrder() {
let n = [Link], i = [Link], q = [Link];
if (n && i && q)
[Link] = Order Summary: ${n} ordered ${q} ${i}(s).;
else
alert("Please fill all details");
</script>
</body>
</html>
---
6. Change Background Color
<!DOCTYPE html>
<html>
<head><title>Change Background</title></head>
<body>
<button onclick="changeColor()">Change Color</button>
<script>
function changeColor() {
let color = "#" + [Link]([Link]() * 16777215).toString(16);
[Link] = color;
</script>
</body>
</html>
---
7. College Event Registration Form
<!DOCTYPE html>
<html>
<head><title>Registration Form</title></head>
<body>
<h3>Event Registration</h3>
<input id="name" placeholder="Name"><br><br>
<input id="email" type="email" placeholder="Email"><br><br>
<select id="gender">
<option value="">Select Gender</option>
<option>Male</option><option>Female</option><option>Other</option>
</select><br><br>
<select id="dept">
<option value="">Select Department</option>
<option>CSE</option><option>ECE</option><option>IT</option>
</select><br><br>
<button onclick="register()">Register</button>
<script>
function register() {
if ([Link] && [Link] && [Link] && [Link])
alert("Successfully Registered!");
else
alert("Please fill all fields.");
</script>
</body>
</html>
---
8. Basic Calculator
<!DOCTYPE html>
<html>
<head><title>Calculator</title></head>
<body>
<input id="n1" type="number" placeholder="Number 1">
<input id="n2" type="number" placeholder="Number 2"><br><br>
<button onclick="calc('+')">+</button>
<button onclick="calc('-')">-</button>
<button onclick="calc('')"></button>
<button onclick="calc('/')">/</button>
<p id="result"></p>
<script>
function calc(op) {
let a = parseFloat([Link]), b = parseFloat([Link]);
if (isNaN(a) || isNaN(b)) { [Link] = "Error"; return; }
let r;
if (op==='+') r=a+b;
else if(op==='-') r=a-b;
else if(op==='*') r=a*b;
else if(op==='/') r=b!==0?a/b:"Error";
[Link] = "Result: " + r;
}
</script>
</body>
</html>
---
9. Simple Login Page
<!DOCTYPE html>
<html>
<head><title>Login Page</title></head>
<body>
<h3>Login</h3>
<input id="user" placeholder="Username"><br><br>
<input id="pass" type="password" placeholder="Password"><br><br>
<button onclick="check()">Login</button>
<p id="msg"></p>
<script>
function check() {
if ([Link] === "admin" && [Link] === "1234")
[Link] = "Welcome, " + [Link] + "!";
else
[Link] = "Invalid Credentials.";
</script>
</body>
</html>
---
10. Feedback Form
<!DOCTYPE html>
<html>
<head><title>Feedback Form</title></head>
<body>
<h3>Feedback</h3>
<input id="name" placeholder="Name"><br><br>
<input id="email" type="email" placeholder="Email"><br><br>
<input id="rating" type="number" min="1" max="5" placeholder="Rating (1–
5)"><br><br>
<textarea id="comment" placeholder="Comments"></textarea><br><br>
<button onclick="submitForm()">Submit</button>
<script>
function submitForm() {
if ([Link] && [Link] && [Link] && [Link])
alert("Thank you for your feedback!");
else
alert("Please fill all fields.");
</script>
</body>
</html>
