skills.js

'use strict';

const e = React.createElement;
const randomNumber = min => Math.floor(Math.random() * 100);

const skillsList = [
	'JavaScript',
	'C#',
	'SQL',
	'Communication',
	'Public Speaking',
	'Private Speaking',
	'MS Paint',
];

const initialSkills = {};
skillsList.forEach(skill => {
	initialSkills[skill] = { count: randomNumber(), hasBeenEndorsed: false };
});

const Skills = () => {
	const [skills, setSkills] = React.useState(initialSkills);

	return Object.keys(skills).map(key => {
		const skill = skills[key];
		const isComplete = skill.count === 100;

		return (
			<div className="flex align-items-center">
				<div className="box-container flex-grow">
					<div className="box" style={{ width: `${skill.count}%` }}>
						{isComplete && <i class="fas fa-check mr-s"></i>}
						{key}
					</div>
				</div>
				{!isComplete && (
					<button
						className="ml-s"
						onClick={() => {
							setSkills(
								Object.assign({}, skills, {
									[key]: { count: skill.count + 1, hasBeenEndorsed: true },
								})
							);
						}}
					>
						Endorse
					</button>
				)}
			</div>
		);
	});
};

const container = document.querySelector('#skills');
ReactDOM.render(e(Skills), container);