Scribd
Upload
5 views11 pages

day 1

The document contains code for a web application with registration, login, and feedback functionalities using React. It includes components for user registration, login, feedback submission, and a thank you page, along with routing setup using React Router. The application is styled with CSS to enhance user experience.

Uploaded by

vivekgowda711
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views11 pages

day 1

The document contains code for a web application with registration, login, and feedback functionalities using React. It includes components for user registration, login, feedback submission, and a thank you page, along with routing setup using React Router. The application is styled with CSS to enhance user experience.

Uploaded by

vivekgowda711
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 11

Registeration

<!DOCTYPE html>

<html lang="en">

<head>

<title>Registration</title>

</head>

<body>

<h2>Register</h2>

<form onsubmit="return submitForm(event)">

<input type="text" placeholder="First Name" required><br>

<input type="text" placeholder="Last Name" required><br>

<input type="email" placeholder="Email" required><br><input


type="password" placeholder="Password" required><br>

<input type="password" placeholder="ConfirmPassword"required><br>

<button type="submit">Submit</button>

</form>

<div id="thank-you-message" style="display:none;"><h2>Thank


You!</h2><p>We received your info.</p></div>

<script>

function submitForm(e) {

e.preventDefault();

document.querySelector('form').style.display ='none';

document.getElementById('thank-you-message').style.display= 'block';

</script>

</body>

</html>

Login page
*Loginpage.js :

import React, { useState } from 'react';

const LoginPage = () => { const [submitted, setSubmitted] =


useState(false); const handleSubmit = (e) => { e.preventDefault();

setSubmitted(true); };

return (

<div style={{ textAlign: 'center', marginTop: '50px' }}>

{submitted ? (

<h2>Thank you for logging in!</h2>

):(

<form onSubmit={handleSubmit}>

<h2>Login</h2>

<input type="text" placeholder="Username" required/><br/><br />

<input type="password" placeholder="Password" required/><br /><br />

<button type="submit">Submit</button>

</form>

)}

</div>

);

};

export default LoginPage;

*App.js :- import React from 'react';

import { BrowserRouter as Router, Routes, Route } from'react-router-


dom'; import LoginPage from './5th sem project/Loginpage';

function App() { return (

<Routes>

<Route path="/" element={<LoginPage/>} />

</Routes>

</Router>

);
}

export default App;

Feedbackfoam

*App.js :- import React from 'react';

import { BrowserRouter as Router, Routes, Route } from'react-router-


dom'; import FeedbackForm from './component/feedback';

import Thank from './component/thank'; function App() {

return (

<Routes>

<Route path="/" element={<FeedbackForm/>} /><Route path="/thank"


element={<Thank />} /></Routes>

</Router>

);

export default App;

*Feedback.js:

import React, { useState } from 'react';

import { useNavigate } from 'react-router-dom';

import './feedback.css';

const FeedbackForm = () => {

const [rating, setRating] = useState(0);

const [formData, setFormData] = useState({ name: '', email: '',


comments: '' });

const navigate = useNavigate();

const handleChange = (e) => {

setFormData({ ...formData, [e.target.name]: e.target.value});

};

const handleSubmit = (e) => {

e.preventDefault();

navigate('/thank');
};

return (

<form onSubmit={handleSubmit}>

<h1>Feedback Form</h1>

<input type="text" name="name" placeholder="Name"


value={formData.name} onChange={handleChange} required /><input
type="email" name="email"
placeholder="Email"value={formData.email}
onChange={handleChange} required /><div className="rating-
section">

<p>Rate our service:</p>

<div className="star-rating">

{[5, 4, 3, 2, 1].map((star) => (

<label key={star} className={rating >=star ? 'active' : ''}>

<input

type="radio" name="rating" value={star}

checked={rating === star}

onChange={() => setRating(star)}required

/>

</label>

))}

</div>

</div>

<textarea name="comments" placeholder="Comments"


value={formData.comments} onChange={handleChange} rows="4"
/><button type="submit">Submit Feedback</button></form>

);

};

export default FeedbackForm;

*thank.js:
import React from 'react';

import { useNavigate } from 'react-router-dom';

const Thank = () => {

const navigate = useNavigate();

return (

<div>

<h1>Thank You!</h1>

<p><center>We appreciate your feedback.</center></p>

CS 5

TH SEM

14

<button onClick={() => navigate('/')}>Back to

Home</button>

</div>

);

};

export default Thank;

*feedback.css:

form {

max-width: 400px;

margin: auto;

padding: 20px;

border: 1px solid #ddd;

border-radius: 8px;

background-color: #f9f9f9;

h1 {

text-align: center;

margin-bottom: 20px;
font-size: 24px;

color: #333;

input, textarea {

width: 100%;

margin: 10px 0;

padding: 10px;

font-size: 16px;

border: 1px solid #ccc;

border-radius: 4px;

box-sizing: border-box;

textarea {

resize: horizontal;

.rating-section {

margin: 15px 0;

.star-rating {

display: flex;

justify-content: space-between;

margin: 10px 0;

direction: rtl; /* For right-to-left star rating */

.star-rating label {

font-size: 2rem;

color: lightgray;

cursor: pointer;

margin-right: 5px;
}

.star-rating input {

display: none;

.star-rating label.active,

.star-rating label:hover,

.star-rating label:hover ~ label {

color: gold;

button {

width: 100%;

padding: 12px;

margin-top: 20px;

background-color: #007bff;

color: white;

border: none;

border-radius: 4px;

font-size: 16px;

cursor: pointer;

button:hover {

background-color: #0056b3;

Helloworld

const greeting: string = "Hello, World!";

console.log(greeting);
exp-4

create a code using React Static and Dynamic, andcreate a code using
React counter( Hookconcept):-*App.js:-

import React from 'react';


import { BrowserRouter as Router, Route, Routes, Link } from'react-router-
dom';

import Login from './component/log1';

import Home from './component/home';

import AboutUs from './component/about';

import Contact from './component/Contact';

import './App.css';

function App() {

return (

<center>

<Router>

<div className="App">

<nav className="App-nav">

<ul>

<li><Link to="/Login">Login</Link></li>

<li><Link to="/">Home</Link></li>

<li><Link to="/about">About Us</Link></li>

<li><Link to="/contact">Contact</Link></li>

</ul>

</nav>

<Routes>

<Route path="/login" element={<Login />} />

<Route path="/" element={<Home />} />

<Route path="/about" element={<AboutUs />} />

<Route path="/contact" element={<Contact />} />

</Routes>

</div>

</Router>

</center>
);

export default App;

*Login.js:-

import React from "react";

import home from "./home";

function Login() {

return (

<form><center>

<h2>Login</h2>

<input type="text" placeholder="Name" /><br></br><input


type="password" placeholder="Password" /><br></br>

<button type="submit" style={{ backgroundColor:

'tomato', color:'white'}} onClick={home}>Submit</button>

</center>

</form>

);

export default Login;

*about.js:-

import React from "react";

function AboutUs() {

return (

<center><div style={{ backgroundColor: 'lightgrey'}}>

<h2>AboutUs</h2>

<p>about us</p>

</div></center>

);
}

export default AboutUs;

*home.js:-

import React from "react";

function home() {

return (

<div style={{ backgroundColor: 'lightgrey'}}>

<center><h2>Home</h2>

<p>Welcome to VSNS website</p></center>

</div>

);

export default home;

*contact.js:-

import React from "react";

function Contact() {

return (

<div style={{ backgroundColor: 'lightgrey'}}><center>

<h2>Contact</h2>

<p>contact details</p>

</center></div>

);

export default Contact;

*App.css:-

.App-nav {

background: #333;

color: #fff;

padding: 1rem;
}

.App-nav ul {

list-style: none;

padding: 0;

margin: 0;

display: flex;

.App-nav li {

margin-right: 1rem;

.App-nav a {

color: #fff;

text-decoration: none;

.App-nav a:hover {

text-decoration: underline;

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy