Merge branch 'main' into refactor/common-utils-methods

src/plays/bodymassindex-calculator/BodymassindexCalculator.js

@@ -0,0 +1,113 @@
+import PlayHeader from 'common/playlists/PlayHeader';
+import './styles.css';
+import { useState } from 'react';
+import jsPDF from 'jspdf'; // For generating PDF
+
+// WARNING: Do not change the entry component name
+function BodymassindexCalculator(props) {
+ // States for form data, BMI result, and dark mode
+ const [weight, setWeight] = useState('');
+ const [height, setHeight] = useState('');
+ const [bmi, setBmi] = useState(null);
+ const [name, setName] = useState('');
+ const [age, setAge] = useState('');
+ const [gender, setGender] = useState('');
+ const [isDarkMode, setIsDarkMode] = useState(false);
+
+ // Function to calculate BMI
+ const calculateBMI = () => {
+ if (weight && height) {
+ const bmiValue = (weight / (height / 100) ** 2).toFixed(2);
+ setBmi(bmiValue);
+ } else {
+ setBmi(null);
+ }
+ };
+
+ // Function to generate health recommendation based on BMI
+ const getHealthRecommendation = (bmiValue) => {
+ if (bmiValue < 18.5) return 'Underweight';
+ if (bmiValue >= 18.5 && bmiValue < 24.9) return 'Normal weight';
+ if (bmiValue >= 25 && bmiValue < 29.9) return 'Overweight';
+
+ return 'Obese';
+ };
+
+ // Function to generate and download PDF report
+ const downloadReport = () => {
+ const doc = new jsPDF();
+ doc.setFontSize(16);
+ doc.text(`BMI Report`, 10, 10);
+ doc.text(`Name: ${name}`, 10, 20);
+ doc.text(`Age: ${age}`, 10, 30);
+ doc.text(`Gender: ${gender}`, 10, 40);
+ doc.text(`Weight: ${weight} kg`, 10, 50);
+ doc.text(`Height: ${height} cm`, 10, 60);
+ doc.text(`BMI: ${bmi}`, 10, 70);
+ doc.text(`Recommendation: ${getHealthRecommendation(bmi)}`, 10, 80);
+ doc.save('bmi_report.pdf');
+ };
+
+ return (
+ <div className={`play-details ${isDarkMode ? 'dark-mode' : ''}`}>
+ <PlayHeader play={props} />
+ <div className="play-details-body">
+ <div className="bmi-container">
+ <h1>Body Mass Index Calculator</h1>
+ <div className="bmi-input">
+ <input
+ className="bmi-input-field"
+ placeholder="Enter name"
+ type="text"
+ value={name}
+ onChange={(e) => setName(e.target.value)}
+ />
+ <input
+ className="bmi-input-field"
+ placeholder="Enter age"
+ type="number"
+ value={age}
+ onChange={(e) => setAge(e.target.value)}
+ />
+ <select
+ className="bmi-select-field"
+ value={gender}
+ onChange={(e) => setGender(e.target.value)}
+ >
+ <option value="">Select gender</option>
+ <option value="Male">Male</option>
+ <option value="Female">Female</option>
+ </select>
+ <input
+ className="bmi-input-field"
+ placeholder="Enter weight in kg"
+ type="number"
+ value={weight}
+ onChange={(e) => setWeight(e.target.value)}
+ />
+ <input
+ className="bmi-input-field"
+ placeholder="Enter height in cm"
+ type="number"
+ value={height}
+ onChange={(e) => setHeight(e.target.value)}
+ />
+ <button onClick={calculateBMI}>Calculate BMI</button>
+ </div>
+ {bmi && (
+ <div className="bmi-result">
+ <h2>Your BMI is: {bmi}</h2>
+ <p>Health Condition: {getHealthRecommendation(bmi)}</p>
+ <button onClick={downloadReport}>Download PDF Report</button>
+ </div>
+ )}
+ <button className="toggle-dark-mode" onClick={() => setIsDarkMode(!isDarkMode)}>
+ {isDarkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
+ </button>
+ </div>
+ </div>
+ </div>
+ );
+}
+
+export default BodymassindexCalculator;

src/plays/bodymassindex-calculator/Readme.md

@@ -0,0 +1,13 @@
+# BodyMassIndex Calculator
+
+The BMI Calculator play is an interactive web component that enables users to calculate their Body Mass Index (BMI) by entering their weight and height. 
+
+## Play Demographic
+
+- Language: js
+- Level: Intermediate
+
+## Creator Information
+
+- User: Adil-Khan-N
+- Gihub Link: https://github.com/Adil-Khan-N

src/plays/bodymassindex-calculator/styles.css

@@ -0,0 +1,125 @@
+/* Centered container for the BMI calculator */
+.bmi-container {
+ max-width: 500px; /* Increased box width */
+ background-color: #ffffff; /* Light box background */
+ border-radius: 12px;
+ padding: 30px; /* Increased padding */
+ margin: 20px auto;
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
+ position: relative; /* To position content inside the box */
+}
+
+.bmi-container h1 {
+ font-size: 40px;
+}
+
+/* Common styling for input fields, buttons, and results */
+.bmi-input .bmi-input-field,
+.bmi-input .bmi-select-field {
+ width: 100%;
+ padding: 12px; /* Increased padding */
+ margin: 12px 0; /* Increased margin */
+ border: 2px solid #f8b400; /* Using a warm yellow color */
+ border-radius: 6px; /* Slightly larger border-radius */
+ font-size: 1.1rem; /* Larger font size */
+}
+
+/* Button styling */
+.bmi-input button {
+ width: 100%;
+ padding: 12px; /* Increased padding */
+ background-color: #f8b400; /* Using a warm yellow color */
+ color: white;
+ border: none;
+ border-radius: 6px; /* Slightly larger border-radius */
+ font-size: 1.1rem; /* Larger font size */
+ cursor: pointer;
+ transition: background-color 0.3s; /* Smooth transition effect */
+}
+
+.bmi-input button:hover {
+ background-color: #e0a500; /* Darker shade on hover */
+}
+
+/* BMI result styling */
+.bmi-result {
+ margin-top: 20px;
+ background-color: #f8b400; /* Using a warm yellow color */
+ padding: 20px;
+ border-radius: 8px;
+ color: white;
+}
+
+.bmi-result button {
+ width: 100%;
+ padding: 12px; /* Increased padding */
+ margin-top: 10px;
+ background-color: #f8b400; /* Using a warm yellow color */
+ color: white;
+ border: 2px solid white;
+ border-radius: 6px; /* Slightly larger border-radius */
+ cursor: pointer;
+}
+
+.bmi-result h2 {
+ font-size: 1.8rem; /* Larger font size for result heading */
+ font-weight: bold; /* Bold heading */
+}
+
+.bmi-result p {
+ font-size: 1.1rem; /* Larger font size */
+ font-weight: bold;
+}
+
+/* Dark mode toggle button */
+.bmi-toggle-dark-mode {
+ margin-top: 20px; /* Increased margin on top */
+ padding: 12px; /* Increased padding */
+ background-color: #1f1f38; /* Dark button background */
+ color: white;
+ border: 2px solid #4db5ff; /* Light blue border */
+ border-radius: 6px; /* Slightly larger border-radius */
+ cursor: pointer;
+}
+
+.bmi-toggle-dark-mode:hover {
+ background-color: #4db5ff; /* Lighter shade on hover */
+ border-color: white; /* Change border color on hover */
+}
+
+
+/* Dark mode styling */
+.dark-mode {
+ background-color: #1e1e1e; /* Dark background for the outer area */
+}
+
+.dark-mode .bmi-container {
+ background-color: #2c2c6c; /* Dark box background */
+ color: white;
+}
+
+.dark-mode .bmi-input .bmi-input-field,
+.dark-mode .bmi-input .bmi-select-field {
+ background-color: #3a3a3a; /* Darker input fields */
+ color: white;
+ border-color: #f8b400; /* Using warm yellow for dark mode */
+}
+
+.dark-mode .bmi-result {
+ background-color: #3a3a3a; /* Darker result background */
+}
+
+.dark-mode .bmi-toggle-dark-mode {
+ background-color: #4db5ff; /* Lighter button in dark mode */
+ color: #1f1f38;
+}
+
+/* Background styling for the full page */
+.play-details {
+ background-color: #f8f9fa; /* Light background for outer area */
+}
+
+.dark-mode .play-details {
+ background-color: #1e1e1e; /* Dark background for outer area */
+}
+