Merge Request: New Play - BMI Calculator

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 */
+}
+