Name: Yogesh Yashvant Gavit
Div :- B Roll no :- 21 Batch :- A1
Assignment No. 5
Problem Statement :-
Develop a Single Page Application as "College website" using ReactJs.
Program :-
import React, { useState } from 'react';
import './App.css';
const App = ()
=> {
// State for active section const [activeSection,
setActiveSection] = useState(null);
// Function to handle section click
const handleSectionClick = (section) =>
{ setActiveSection(section);
};
// Component for displaying section
content const SectionContent = () => {
switch (activeSection) { case
'Home': return (
<section>
<h2>Home</h2>
<p>Welcome to our college website. Here you can find information
about our college and its programs.</p>
</section>
);
case 'About':
return (
<section>
<h2>About Us</h2>
<p>Learn about our college's history, mission, and values.</p>
</section>
); case
'Academics':
return (
<section>
<h2>Academics</h2>
<p>Explore our wide range of academic programs and departments.</p>
</section>
); case
'Admissions':
return (
<section>
<h2>Admissions</h2>
<p>Information about the admissions process, requirements, and
deadlines.</p>
</section>
);
case 'Contact':
return (
<section>
<h2>Contact Us</h2>
<p>Get in touch with us for any questions or inquiries.</p>
</section>
);
default:
return null;
}
};
return (
<div className="App">
<header className="App-header">
<img src="https://engg.kkwagh.edu.in/media/front/images/logo.svg"
alt="College
Logo" className="logo" />
<h1>College Website</h1>
<nav>
<ul className="nav-list">
<li onClick={() => handleSectionClick('Home')}
className={activeSection === 'Home' ? 'active' : ''}>Home</li>
<li onClick={() => handleSectionClick('About')}
className={activeSection
=== 'About' ? 'active' : ''}>About Us</li>
<li onClick={() => handleSectionClick('Academics')}
className={activeSection === 'Academics' ? 'active' : ''}>Academics</li>
<li onClick={() => handleSectionClick('Admissions')}
className={activeSection === 'Admissions' ? 'active' : ''}>Admissions</li>
<li onClick={() => handleSectionClick('Contact')}
className={activeSection
=== 'Contact' ? 'active' : ''}>Contact Us</li>
</ul>
</nav>
</header>
<main>
<h2>Welcome to KKW College</h2>
<p>KKW College is a leading institution of higher education offering
undergraduate and graduate degree programs in a wide range of disciplines. Our
faculty members are renowned for their excellence in teaching and research, and
our graduates are well-prepared for success in their careers.</p>
</main>
<SectionContent />
<footer>
<p>© KKW College</p>
</footer>
</div>
);
}; export
default App;
CSS :-
.App { text-align:
center; background-
color: #f2f2f2;
padding: 20px; min-
height: 100vh;
}
.App-header {
margin-bottom: 40px;
}
.logo {
width: 100px;
height: 100px;
} h1 {
margin: 10px 0;
} nav ul { list-
style-type: none;
padding: 0; margin:
20px 0;
} nav li {
display: inline-
block; margin-
right: 10px; font-
weight: bold; font-
size: 18px; cursor:
pointer;
} nav
li.active {
color: #333;
text-decoration: underline;
} main { margin-
bottom: 40px;
} section {
padding: 20px;
border: 1px solid
#ccc; margin-bottom:
20px; background-
color: #fff;
} footer {
font-weight: bold;
}
OUTPUT :-
