UI LAB

1) CREATE A SCIENTIFIC CALCULATOR USING REACT JS

import React, { useState } from "react";

import './App.css';

function Calculator() {

const [input, setInput] = useState("");

const [result, setResult] = useState("");

function handleInput(event) {

setInput(event.target.value);

}

function calculate() {

setResult(eval(input));

}

function clear() {

setInput("");

setResult("");

}

function backspace() {

setInput(input.slice(0, -1));

}

return (

<div>

<button onClick={() => setInput(input + "(")}>(</button>

<button onClick={() => setInput(input + ")")}>)</button>

<br />

<button onClick={() => setInput(input + "7")}>7</button>

<button onClick={() => setInput(input + "8")}>8</button>

<button onClick={() => setInput(input + "9")}>9</button>

<button onClick={() => setInput(input + "*")}>*</button>

<br />

<button onClick={() => setInput(input + "4")}>4</button>

<button onClick={() => setInput(input + "5")}>5</button>

<button onClick={() => setInput(input + "6")}>6</button>

<button onClick={() => setInput(input + "-")}>-</button>

<br />

<button onClick={() => setInput(input + "1")}>1</button>

<button onClick={() => setInput(input + "2")}>2</button>

<button onClick={() => setInput(input + "3")}>3</button>

<button onClick={() => setInput(input + "+")}>+</button>

<br />

<button onClick={() => setInput(input + "0")}>0</button>

<button onClick={() => setInput(input + ".")}>.</button>

<button onClick={() => setInput(input + "/")}>/</button>

</center>

</div>

);

}

export default Calculator;

App.css

.App {

}

body{

margin-top:100px;

background-color:powderblue;

}

button{

background-color:lightgray;

color:black;

padding: 15px 15px;

width:100px;

margin: 4px 2px;

}

2)DESIGN A COMPASS CLOCK

import React, { useState, useEffect } from 'react';

import Clock from 'react-clock';

import 'react-clock/dist/Clock.css';

import './App.css';

function App() {

const [date, setDate] = useState(new Date());

useEffect(() => {

const interval = setInterval(() => {

setDate(new Date());

}, 1000);

return () => clearInterval(interval);

}, []);

return (

</div>

);

}

export default App;

App.css:

.App {

margin-top: 100px;

margin-left:550px;

}

body{

background-color:darkseagreen;

}

3)SIMPLE VOTING SYSTEM

import { useState } from 'react';

import './App.css';

function App() {

const [people,setPeople] = useState([

{

name:"A ",

vote:0

{

name:"B ",

vote:0

])

const Ic=(id)=>{

var np = Object.assign([],people)

np[id].vote+=1;

setPeople(np)

}

return (

<h1>Voting System</h1>

{

people.map((data,index) => {

return(

Name : {data.name}<br />

Vote : {data.vote}<br />

<button onClick={()=> Ic(index)}>Vote</button>

</div>

)

})

}

</div>

);

}

export default App;

7.SIMPLE HEALTH CARE PORTAL

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="health.WebForm1" %>

<!DOCTYPE html>

<title>SS health care center</title>

<style>

margin:0;

padding:0;

}

.container{

background: url("images/back.jpg") no-repeat black;

background-size:cover;

overflow:hidden;

}

.nav a{

margin-right:180px;

font-size:25px;

font-family:Arial;

color:black;

font-weight:bolder;

text-decoration:none;

}

.logo{

float:left;

}

h2{

text-align:center;

margin-top: 80px;

font-family:monospace;

font-size:32px;

color:darkslateblue;

}

margin: 40px 100px;

font-size:24px;

font-family:Arial, Helvetica, sans-serif;

text-align:justify;

}

</style>

</head>

<body>

<a href="WebForm1.aspx">About</a>

<a href="WebForm1.aspx">Doctors</a>

<a href="WebForm1.aspx">Contact</a>

</div>

<h2>SS HEALTH CARE</h2>

<p>At SS Health Care, we believe in a holistic approach to your health. Our mission is to provide exceptional, personalized medical services that cater to your individual needs. From routine check-ups to specialized treatments, we’re here to support you every step of the way.</p>

</div>

<h2>OUR SERVICE</h2>

<p>

Explore our wide range of services designed to meet your healthcare needs:<br />

<strong>Primary Care:</strong> Comprehensive health assessments, preventive care, and management of chronic conditions.<br />

<strong>Specialty Care:</strong> Access to a variety of specialists for conditions requiring targeted expertise.<br />

<strong>Diagnostic Services:</strong> State-of-the-art imaging and laboratory tests to accurately diagnose and monitor your health.<br />

<strong>Wellness Programs:</strong> Services and resources to help you maintain a healthy lifestyle, including nutrition counseling, fitness programs, and mental health support.<br />

</p>

</div>

</form>

</body>

</html>

8)ONLINE RESUME

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html>

<head>

<title>Resume</title>

<style>

body {

font-family: Arial, sans-serif;

color: #333;

margin: 0;

padding: 0;

background-color: #f4f4f4;

}

.container {

max-width: 800px;

margin: 20px auto;

padding: 20px;

background-color: #fff;

border: 1px solid #ddd;

border-radius: 8px;

}

header {

text-align: center;

margin-bottom: 20px;

}

header h1 {

margin: 0;

font-size: 2em;

}

header p {

margin: 5px 0;

}

section {

margin-bottom: 20px;

}

h2 {

border-bottom: 2px solid #ddd;

padding-bottom: 5px;

font-size: 1.5em;

margin-bottom: 10px;

}

.degree, .project, .certification {

margin-bottom: 15px;

}

.degree h3, .project h3, .certification h3 {

margin: 0;

font-size: 1.2em;

}

.project p, .certification p {

margin: 5px 0 0 0;

ul {

list-style-type: disc;

padding-left: 20px;

margin: 0;

}

li {

margin-bottom: 5px;

}

</style>

</head>

<body>

<p>Entry-Level Software Developer</p>

<p>Email: sample@example.com | Phone: (123) 456-7890 | LinkedIn: linkedin.com/in/sample</p>

</header>

<h2>Education</h2>

<h3>Bachelor of Science in Computer Science</h3>

<p><strong>University of Example</strong> - 2020 to 2023</p>

</div>

<h3>Master of computer application</h3>

<p><strong>University of Example</strong> - 2023 to 2025</p>

</div>

</section>

<h2>Projects</h2>

<h3>Portfolio Website</h3>

<p>Developed a personal portfolio website using HTML, CSS, and JavaScript. Implemented responsive design to ensure compatibility with various devices.</p>

</div>

<p>Created a to-do list application using React. Included features for adding, editing, and deleting tasks, and implemented state management with hooks.</p>

</div>

</section>

<h2>Skills</h2>

<ul>

<li>JavaScript, HTML, CSS</li>

<li>React, Node.js</li>

<li>Python</li>

<li>Basic understanding of Git and version control</li>

</ul>

</section>

<h2>Certifications</h2>

<h3>Certified Web Developer</h3>

<p><strong>Online Academy</strong> - Completed: June 2023</p>

</div>

<h3>Introduction to Python Programming</h3>

<p><strong>Code Academy</strong> - Completed: December 2022</p>

</div>

</section>

</div>

</body>

</html>

9)LOGIN PORTAL FOR NET BANKING

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="netbanking.WebForm1" %>

<!DOCTYPE html>

<title>Login Page</title>

<style>

body {

background-image: url('/image/bank.jfif');

background-size: cover;

background-position: center;

text-align: center;

margin: 0;

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

}

.form-container h1, .form-container h2 {

margin: 0 0 20px;

color: #333;

}

.form-container label {

display: block;

margin-bottom: 5px;

.form-container input[type="button"] {

background-color: blue;

color: white;

padding: 8px 16px;

border: none;

border-radius: 4px;

cursor: pointer;

font-size: 16px;

width: auto;

display: inline-block;

}

</style>

</head>

<body>

<h1>Net Banking</h1>

<h2>Login Form</h2>

<div>

<label for="Text1">Username</label>

</div>

<div>

<label for="Text2">Password</label>

</div><br />

</form> </div>

function myfunc() {

alert("Login successful");

document.getElementById("Text1").value = "";

document.getElementById("Text2").value = ""; }

</script>

</body>

</html>

10)COMET EFFECT

index.html

<!DOCTYPE html>

<head>

<title>Comet Effect on Mouse Move</title>

</head>

<body>

<h1>COMET</h1>

</body>

</html>

style.css

body {

margin: 0;

overflow: hidden;

background: black;

}

h1{

color: white;

text-align: center;

font-size: 48px;

}

.comet {

position: absolute;

width: 10px;

height: 10px;

border-radius: 50%;

background: white;

pointer-events: none;

transition: transform 0.1S ease-out;

box-shadow: 0 0 20px white;

}

script.js

const comet = document.querySelector('.comet');

document.addEventListener('mousemove', (event) => {

const x = event.clientX;

const y = event.clientY;

comet.style.transform = `translate(${x}px, ${y}px)`;

createTrail(x, y);

});

function createTrail(x, y) {

const trail = document.createElement('div');

trail.className = 'trail';

trail.style.position = 'absolute';

trail.style.width = '20px';

trail.style.height = '20px';

trail.style.borderRadius = '50%';

trail.style.background = 'white';

trail.style.pointerEvents = 'none';

trail.style.transform = `translate(${x}px, ${y}px)`;

document.body.appendChild(trail);

setTimeout(() => {

trail.remove();

}, 300);

}

Search This Blog

AI

UI LAB

Comments

Post a Comment

Popular posts from this blog

MACHINE LEARNING

AI