Skip to content

Second training #365

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
adithyasagaar wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Second training #365

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a788b89
first
Nov 20, 2025
b51b051
second training
Nov 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 63 additions & 0 deletions Recruit-Training/Telemetry-Recruit-Training/first-training/src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
/* Main page container */
.app {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
box-sizing: border-box;
}

/* Page title at the top */
.page-title {
text-align: center;
font-size: 2rem;
font-weight: 700;
margin-bottom: 2rem;
}

/* Image grid setup */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Desktop: 3 columns */
gap: 10px;
}

/* Card wrapper for each image + title */
.image-box {
display: flex;
flex-direction: column;
gap: 5px; /* EXACT 5px gap between title and image */
align-items: center;
background-color: rgba(0, 0, 0, 0.15);
padding: 10px;
border-radius: 10px;
}

/* Smaller title above each image */
.image-title {
font-size: 1rem;
font-weight: 600;
text-align: center;
margin: 0;
}

/* Image styling */
.image-card {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 6px;
}

/* Tablet breakpoint (md): 2 columns */
@media (max-width: 992px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}

/* Mobile breakpoint (sm): 1 column */
@media (max-width: 768px) {
.grid {
grid-template-columns: 1fr;
}
}
75 changes: 67 additions & 8 deletions Recruit-Training/Telemetry-Recruit-Training/first-training/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,75 @@
import "./App.css";

/**
Here are the images that you use in your app:
https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Irbis4.JPG/1200px-Irbis4.JPG
https://files.worldwildlife.org/wwfcmsprod/images/Snow_Leopard_hero_species_2021/hero_small/8hwbyi3z8p_species_snowleopard_hero.jpg
https://images.saymedia-content.com/.image/t_share/MTc2NDYyMTcxMDg4Mjk5OTk0/the-endangered-snow-leopard.jpg
https://cdn.hswstatic.com/gif/gettyimages-1789936680.jpg
https://cdn.i-scmp.com/sites/default/files/styles/1020x680/public/images/methode/2018/05/23/b70f3e2e-5d99-11e8-a4de-9f5e0e4dd719_1280x720_095446.JPG?itok=b7E9r0SX
https://cdn.britannica.com/52/170952-050-A545E35D/carnivore-Snow-leopard-regions-subcontinent-Asia-Indian.jpg
* Array containing snow leopard images including a title for the image
*/

const snowLeopardGrid = [
{
title: "Image #1",
src: "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Irbis4.JPG/1200px-Irbis4.JPG",

},
{
title: "Image #2",
src: "https://files.worldwildlife.org/wwfcmsprod/images/Snow_Leopard_hero_species_2021/hero_small/8hwbyi3z8p_species_snowleopard_hero.jpg",

},
{
title: "Image #3",
src: "https://images.saymedia-content.com/.image/t_share/MTc2NDYyMTcxMDg4Mjk5OTk0/the-endangered-snow-leopard.jpg",

},
{
title: "Image #4",
src: "https://cdn.hswstatic.com/gif/gettyimages-1789936680.jpg",

},
{
title: "Image #5",
src: "https://cdn.i-scmp.com/sites/default/files/styles/1020x680/public/images/methode/2018/05/23/b70f3e2e-5d99-11e8-a4de-9f5e0e4dd719_1280x720_095446.JPG?itok=b7E9r0SX",

},
{
title: "Image #6",
src: "https://cdn.britannica.com/52/170952-050-A545E35D/carnivore-Snow-leopard-regions-subcontinent-Asia-Indian.jpg",

},
];

/**
* Displays the snow leopards and gets a title and src through props
*/

function ImageBox({title, src}){
return (
<div className ="image-box">
<h2 className="image-title">{title}</h2>
<img className="image-card" src={src} alt={title}/>
</div>
);
}

/**
* Maps over an array of images and renders an ImageBox for each item
*/

function Grid({images}) {
return (
<main className="grid">
{images.map((image) => (
<ImageBox key={image.title} title={image.title} src ={image.src}/>
))}
</main>
);
}
function App() {
return <div></div>;
return (
<div className ="app">
<h1 className="page-title">Snow Leopard: Images</h1>
<Grid images={snowLeopardGrid}/>
</div>
);
}

export default App;
14 changes: 14 additions & 0 deletions Recruit-Training/Telemetry-Recruit-Training/second-training/src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,17 @@
padding: 2rem;
text-align: center;
}

.telemetry-dashboard {
display: flex;
flex-direction: column;
gap: 2rem;
text-align: center;
}

.telemetry-grid {
display: flex;
flex-direction: column;
gap: 2rem;
text-align: center;
}
157 changes: 83 additions & 74 deletions Recruit-Training/Telemetry-Recruit-Training/second-training/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,85 +1,94 @@
/**
ERRORS IN ORIGINAL FILE:

1. Massive code duplication - The same JSX structure is repeated 7 times for different components
2. Hardcoded data - All telemetry values are hardcoded instead of being in a data structure
3. No reusable components - Everything is in one giant component
4. Poor maintainability - Adding a new telemetry component would require copying and pasting more code

CHANGES MADE:

1. Created telemetryData is an array with all the objects that have an id
2. Created TelemteryCard maps over the array of data and renders it using props
3. Implemented data mapping to create telemetry cards
*/

import "./App.css";

function App() {
/**
* Contains all the data with id, name, type and values
*/

const telemetryData =[
{
id:"battery-pack" ,
name: "Battery Pack",
data: [
{label:"Voltage: ", value : "48.2V", status :"GOOD"},
{label: "Current: ", value: "12.4A", status :"GOOD"},
{label: "Temperature: ", value: "32°C", status :"WARNING"},
{label: "State of Charge:", value: "87%", status : "GOOD"},
],
},

{
id: "motor-controller" ,
name: "Motor Contoller",
data: [
{label:"RPM: ", value : "2847", status : "ERROR"},
{label: "Power: ", value : "1.2kW", status : "GOOD"},
{label: "Temperature: ", value : "45°C", status : "WARNING"},
{label: "Effeciency:", value : "94%", status : "GOOD"},
],
},

{
id: "solar-array" ,
name: "Solar Array Section",
data: [
{label:"Voltage: ", value : "51.8V", status : "GOOD"},
{label: "Current: ", value: "8.3A", status : "GOOD"},
{label: "Power: ", value : "430W", status : "GOOD"},
{label: "Irradiance:", value : "67 W/m²", status : "ERROR"},
],
},
];

/**
* Maps over the array of data and renders using props
*/

function TelemetryCard ({name, data }){
return (
<>
<div className="telemetry-dashboard">
<h1>Solar Car Telemetry Dashboard</h1>
<div className="telemetry-card">
<h2>{name}</h2>

<div className="telemetry-card">
<h2>Battery Pack</h2>
<div className="data-row">
<span className="label">Voltage:</span>
<span className="value">48.2V</span>
<span className="status">GOOD</span>
</div>
<div className="data-row">
<span className="label">Current:</span>
<span className="value">12.4A</span>
<span className="status">GOOD</span>
</div>
<div className="data-row">
<span className="label">Temperature:</span>
<span className="value">32°C</span>
<span className="status">WARNING</span>
</div>
<div className="data-row">
<span className="label">State of Charge:</span>
<span className="value">87%</span>
<span className="status">GOOD</span>
</div>
{data.map((data) => (
<div className="data-row" key={data.label}>
<span className="label">{data.label}</span>
<span className="value">{data.value}</span>
<span className="status">{data.status}</span>
</div>
))}
</div>
);
}

<div className="telemetry-card">
<h2>Motor Controller</h2>
<div className="data-row">
<span className="label">RPM:</span>
<span className="value">2847</span>
<span className="status">ERROR</span>
</div>
<div className="data-row">
<span className="label">Power:</span>
<span className="value">1.2kW</span>
<span className="status">GOOD</span>
</div>
<div className="data-row">
<span className="label">Temperature:</span>
<span className="value">45°C</span>
<span className="status">WARNING</span>
</div>
<div className="data-row">
<span className="label">Efficiency:</span>
<span className="value">94%</span>
<span className="status">GOOD</span>
</div>
</div>
/**
* App component
*/

<div className="telemetry-card">
<h2>Solar Array Section</h2>
<div className="data-row">
<span className="label">Voltage:</span>
<span className="value">51.8V</span>
<span className="status">GOOD</span>
</div>
<div className="data-row">
<span className="label">Current:</span>
<span className="value">8.3A</span>
<span className="status">GOOD</span>
</div>
<div className="data-row">
<span className="label">Power Output:</span>
<span className="value">430W</span>
<span className="status">GOOD</span>
</div>
<div className="data-row">
<span className="label">Irradiance:</span>
<span className="value">867 W/m²</span>
<span className="status">ERROR</span>
</div>
</div>
function App() {
return (
<div className="telemetry-dashboard">
<h1>Solar Car Telemetry Dashboard</h1>
<div className="telemetry-grid">
{telemetryData.map((item) => (
<TelemetryCard key={item.id} {...item} />
))}
</div>
</>
</div>
);
}

export default App;
export default App;