scrimba
Prompt Engineering
Prompt Engineering
Break Tasks Into Smaller Steps
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

AboutCommentsNotes
Break Tasks Into Smaller Steps
Expand for more info
ProgressBar.jsx
run
preview
console
import React from 'react';
import './ProgressBar.css';

const ProgressBar = ({ title, budget, spent }) => {
const percentage = (spent / budget) * 100;
let color = "";

if (percentage >= 100) {
color = "red";
} else if (percentage >= 75) {
color = "orange";
} else {
color = "green";
}

return (
<div className='budget'>
<h2>{title}</h2>
<div className='progress-bar'>
<div className='progress' style={{ width: `${percentage}%`, backgroundColor: color }}></div>
</div>
<p>Budget: {budget} | Spent: {spent}</p>
</div>
);
};

export default ProgressBar;


Console
/index.html
-7:26