Scribd
Upload
13 views

Harsh React Assignment

Uploaded by

dheerentejani05
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

Harsh React Assignment

Uploaded by

dheerentejani05
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

Vivekanand Education Society college of Arts,

Science & Commerce Department of SYAI


Academic Year (2024-25)

Class : Bsc. Artificial Intelligence (Second Year Sem III)


Subject : R programming
Submission : Assignment

Submitted By :

Name : Vignesh patel


Roll No :- 17
Personal Portfolio Page

1) Content

● Homepage

2) Language

● JavaScript/JSX
● HTML (via JSX)
● CSS
● JSON

3) Code Editor
● Visual Studio Code

4) Tools

● React (JavaScript library)


● React Router (for navigation)
● npm/Yarn (package managers)
● Webpack/Babel (for bundling and compiling code)
● API Integration (if needed for dynamic content)
Content

1) Home page

● Index.js

Code :-

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Vibes Music Streaming Platform</title>

</head>

<body>

<header>

<a href="#"><img src="https://api.logo.com/api/v2/images?design=logo_486075b8-3adc-4cf2-

b097-

9294eb0fac31&u=1726151062883&width=500&height=400&margins=100&fit=contain&format
=webp

&quality=60" alt="Music Platform Logo" class="logo"></a>

<nav>

<a href="#">Home</a>

<a href="#">Discover</a>

<a href="#">Playlists</a>

<a href="#">Premium</a>
</nav>

</header>

<!-- Moved the Search Section to the top -->

<section class="search-section" id="search">

<h2>Search for Music</h2>

<form>

<input type="search" id="search-input" placeholder="Search for art…

[11:13 am, 16/09/2024] Vignesh: Hyyyyy

[11:13 am, 16/09/2024] Vignesh: <!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Task Tracker UI</title>

<style>

body {

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,


sans-serif;

margin: 0;

padding: 0;

color: #E0E0E0;

background-color: #121212;

header {

background-color: #1E90FF;

padding: 10px 40px;

display: flex;

align-items: center;
justify-content: space-between;

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

position: fixed;

width: 96%;

top: 0;

left: 0;

z-index: 1000;

transform: translateX(-20px); /* Shift header to the left */

header .logo {

height: 100px;

display: block;

nav {

display: flex;

justify-content: center;

gap: 30px;

transform: translateX(20px); /* Counteract header shift for alignment */

nav a {

text-decoration: none;

color: #E0E0E0;

font-weight: 500;

padding: 10px 20px;

border-radius: 8px;

transition: background-color 0.3s, color 0.3s, transform 0.3s;

font-size: 16px;
}

nav a:hover {

background-color: #1C86EE;

color: #E0E0E0;

transform: translateY(-3px);

.search-section {

padding: 120px 20px 20px;

text-align: center;

margin-top: 80px;

.search-section h2 {

font-size: 36px;

margin-bottom: 20px;

color: #E0E0E0;

.search-section form {

display: flex;

justify-content: center;

gap: 10px;

#search-input {

padding: 10px;

font-size: 16px;

width: 300px;

border-radius: 8px;

border: 1px solid #333;


background-color: #1C1C1C;

color: #E0E0E0;

.btn-primary {

padding: 10px 20px;

background-color: #1E90FF;

color: #fff;

border: none;

border-radius: 8px;

cursor: pointer;

.btn-primary:hover {

background-color: #1C86EE;

.hero {

background-color: #121212;

padding: 120px 20px;

text-align: center;

background-image: url('https://www.example.com/task-hero.jpg');

background-size: cover;

background-position: center;

color: #E0E0E0;

position: relative;

.hero h1 {

font-size: 60px;

margin-bottom: 20px;
font-weight: 700;

animation: fadeIn 2s ease-out;

.hero p {

font-size: 28px;

margin-bottom: 30px;

max-width: 700px;

margin-left: auto;

margin-right: auto;

opacity: 0;

animation: fadeInUp 2s ease-out 0.5s forwards;

.hero a {

text-decoration: none;

padding: 15px 30px;

background-color: #1E90FF;

color: #E0E0E0;

border-radius: 8px;

font-size: 20px;

font-weight: 500;

transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;

display: inline-block;

.hero a:hover {

background-color: #1C86EE;

transform: scale(1.05);

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);


}

.section {

padding: 80px 20px;

text-align: center;

.section h2 {

font-size: 40px;

margin-bottom: 20px;

font-weight: 700;

color: #E0E0E0;

animation: fadeIn 2s ease-out;

.section p {

font-size: 22px;

margin-bottom: 40px;

max-width: 700px;

margin-left: auto;

margin-right: auto;

color: #B0B0B0;

opacity: 0;

animation: fadeInUp 2s ease-out 0.5s forwards;

.section img {

max-width: 100%;

height: auto;

border-radius: 12px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);


}

.discover-list, .library-list {

display: flex;

justify-content: center;

gap: 20px;

padding: 0;

list-style: none;

.discover-card, .library-card {

background-color: #1C1C1C;

padding: 20px;

border-radius: 8px;

width: 300px;

text-align: center;

box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

.discover-card img, .library-card img {

max-width: 100%;

border-radius: 8px;

.btn-secondary {

padding: 10px 20px;

background-color: #1C86EE;

color: #fff;

border: none;

border-radius: 8px;

cursor: pointer;
}

.btn-secondary:hover {

background-color: #1E90FF;

footer {

background-color: #1E1E1E;

padding: 40px 20px;

text-align: center;

color: #B0B0B0;

border-top: 1px solid #333333;

footer p {

font-size: 16px;

footer a {

text-decoration: none;

color: #1E90FF;

footer a:hover {

text-decoration: underline;

@keyframes fadeIn {

from {

opacity: 0;

transform: translateY(20px);

to {
opacity: 1;

transform: translateY(0);

@keyframes fadeInUp {

from {

opacity: 0;

transform: translateY(20px);

to {

opacity: 1;

transform: translateY(0);

</style>

</head>

<body>

<header>

<a href="#"><img
src="https://api.logo.com/api/v2/images?design=logo_486075b8-3adc-4cf2-b097-9294eb0fac31
&u=1726151062883&width=500&height=400&margins=100&fit=contain&format=webp&quali
ty=60" alt="Task Tracker Logo" class="logo"></a>

<nav>

<a href="#">Home</a>

<a href="#">Tasks</a>

<a href="#">Completed</a>

<a href="#">Settings</a>

</nav>

</header>
<!-- Moved the Search Section to the top -->

<section class="search-section" id="search">

<h2>Search for Tasks</h2>

<form>

<input type="search" id="search-input" placeholder="Search for tasks, projects, or tags">

<button type="submit" class="btn-primary">Search</button>

</form>

</section>

<section class="hero">

<h1>Track Your Tasks Efficiently</h1>

<p>Your go-to platform for managing tasks and projects with ease and efficiency.</p>

<a href="#">Start Organizing</a>

</section>

<section class="section" id="tasks">

<h2>Manage Your Tasks</h2>

<p>Organize tasks, set priorities, and track your progress seamlessly.</p>

<ul class="discover-list">

<li>

<div class="discover-card">

<img src="https://via.placeholder.com/300x200?text=Task+1" alt="Task 1">

<h3>Task 1</h3>

<p>Due: Tomorrow</p>

<button class="btn-secondary">View Details</button>

</div>

</li>

<li>

<div class="discover-card">
<img src="https://via.placeholder.com/300x200?text=Task+2" alt="Task 2">

<h3>Task 2</h3>

<p>Due: Next Week</p>

<button class="btn-secondary">View Details</button>

</div>

</li>

<li>

<div class="discover-card">

<img src="https://via.placeholder.com/300x200?text=Task+3" alt="Task 3">

<h3>Task 3</h3>

<p>Due: This Month</p>

<button class="btn-secondary">View Details</button>

</div>

</li>

</ul>

</section>

<section class="section" id="completed">

<h2>Completed Tasks</h2>

<ul class="library-list">

<li>

<div class="library-card">

<img src="https://via.placeholder.com/300x200?text=Completed+Task+1" alt="Completed Task


1">

<h3>Completed Task 1</h3>

<p>Completed: Yesterday</p>

<button class="btn

<button class="btn-secondary">View Details</button>

</div>
</li>

<li>

<div class="library-card">

<img src="https://via.placeholder.com/300x200?text=Completed+Task+2" alt="Completed Task


2">

<h3>Completed Task 2</h3>

<p>Completed: Last Week</p>

<button class="btn-secondary">View Details</button>

</div>

</li>

<li>

<div class="library-card">

<img src="https://via.placeholder.com/300x200?text=Completed+Task+3" alt="Completed Task


3">

<h3>Completed Task 3</h3>

<p>Completed: Earlier This Month</p>

<button class="btn-secondary">View Details</button>

</div>

</li>

</ul>

</section>

<footer>

<p>&copy; 2024 TaskTracker. All rights reserved. <a href="#">Privacy Policy</a> | <a
href="#">Terms of Service</a></p>

</footer>

</body>

</html>
Output :-
1) Search for Task

2) About Page
3) Task List

4) Calendar View

Conclusion:

I developed a user-friendly task tracker UI using React that incorporates dynamic data to
streamline task management. The interface includes key features such as task listings, due
date integration, task forms, and user authentication. It provides a seamless user
experience by allowing users to add, view, and manage tasks with ease. The UI also
includes responsive design elements, making it accessible across different devices. This
task tracker UI effectively showcases my skills in front-end development, state
management, and UI/UX design, enhancing user engagement and operational efficiency
for managing tasks.

You might also like