Category: SOURCE CODE

FUTSAL BOOKING SYSTEM CODE IN HTML CSS AND JAVASCRIPT

Posted on by admin
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced Footsal Booking System</title>
    <style>
        /* Basic styling */
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f8ff;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        .container {
            width: 90%;
            max-width: 700px;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
        }
        h1, h2 {
            text-align: center;
            color: #333;
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            font-weight: bold;
            color: #555;
        }
        input, select, textarea {
            width: 100%;
            padding: 10px;
            margin-top: 5px;
            border: 1px solid #ddd;
            border-radius: 5px;
            box-sizing: border-box;
        }
        button {
            width: 100%;
            padding: 12px;
            background-color: #28a745;
            color: #fff;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            margin-top: 15px;
        }
        button:hover {
            background-color: #218838;
        }
        .summary, .history, .ratings, .available-slots, .feedback-container {
            display: none;
            margin-top: 20px;
            padding: 15px;
            background-color: #f8f9fa;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        #ratings input[type="radio"] {
            margin-right: 5px;
        }
        .error-message {
            color: red;
            font-size: 0.9em;
            display: none;
            margin-top: 5px;
        }
        .success-message {
            color: green;
            font-size: 0.9em;
            display: none;
            margin-top: 5px;
        }
        .history-list, .slots-list {
            list-style-type: none;
            padding: 0;
        }
        .history-list li, .slots-list li {
            padding: 8px;
            background-color: #e9ecef;
            margin-bottom: 5px;
            border-radius: 4px;
        }
    </style>
</head>
<body>

<div class="container">
    <!-- Title and Image -->
    <h1>⚽ Advanced Footsal Booking System ⚽</h1>
    
    <!-- Booking Form -->
    <div id="bookingForm">
        <div class="form-group">
            <label for="name">👤 Name:</label>
            <input type="text" id="name" placeholder="Enter your name" required>
            <div class="error-message" id="nameError">Please enter your name.</div>
        </div>
        <div class="form-group">
            <label for="phone">📞 Phone Number:</label>
            <input type="text" id="phone" placeholder="Enter your phone number" required>
            <div class="error-message" id="phoneError">Please enter a valid phone number.</div>
        </div>
        <div class="form-group">
            <label for="date">📅 Booking Date:</label>
            <input type="date" id="date" required>
            <div class="error-message" id="dateError">Please select a valid date.</div>
        </div>
        <div class="form-group">
            <label for="time">🕒 Time Slot:</label>
            <select id="time" required>
                <option value="">Select Time Slot</option>
                <option value="6 AM - 8 AM">6 AM - 8 AM</option>
                <option value="8 AM - 10 AM">8 AM - 10 AM</option>
                <option value="4 PM - 6 PM">4 PM - 6 PM</option>
                <option value="6 PM - 8 PM">6 PM - 8 PM</option>
            </select>
            <div class="error-message" id="timeError">Please select a time slot.</div>
        </div>
        <div class="form-group">
            <label for="players">👥 Number of Players:</label>
            <input type="number" id="players" placeholder="Enter number of players" min="1" required>
            <div class="error-message" id="playersError">Please enter the number of players.</div>
        </div>
        <button onclick="bookFootsal()">📅 Book Now</button>
    </div>

    <!-- Booking Summary -->
    <div id="summary" class="summary">
        <h2>🎉 Booking Confirmation 🎉</h2>
        <p id="bookingDetails"></p>
        <button onclick="downloadSummary()">📄 Download as PDF</button>
        <button onclick="printSummary()">🖨️ Print Confirmation</button>
        <button onclick="showRatingForm()">🌟 Rate Your Experience</button>
    </div>

    <!-- Success Message -->
    <div class="success-message" id="successMessage">Booking successful!</div>

    <!-- Error Message for Double Booking -->
    <div class="error-message" id="bookingError">⚠️ This slot is already booked. Please choose another time or date.</div>

    <!-- Rating and Feedback -->
    <div id="ratings" class="ratings">
        <h2>🌟 Rate Your Booking</h2>
        <label>Rating:</label>
        <div>
            <input type="radio" name="rating" value="1"> 1
            <input type="radio" name="rating" value="2"> 2
            <input type="radio" name="rating" value="3"> 3
            <input type="radio" name="rating" value="4"> 4
            <input type="radio" name="rating" value="5"> 5
        </div>
        <div class="form-group">
            <label for="feedback">💬 Feedback:</label>
            <textarea id="feedback" placeholder="Write your feedback here"></textarea>
        </div>
        <button onclick="submitFeedback()">📥 Submit Feedback</button>
    </div>

    <!-- Booking History -->
    <div id="history" class="history">
        <h2>📋 Booking History</h2>
        <ul id="historyList" class="history-list"></ul>
    </div>

    <!-- Available Slots -->
    <div id="availableSlots" class="available-slots">
        <h2>🕒 Available Slots</h2>
        <ul id="slotsList" class="slots-list"></ul>
    </div>
</div>

<script>
    const bookings = [];
    let uniqueID = 1;

    function bookFootsal() {
        clearErrors();

        const name = document.getElementById("name").value;
        const phone = document.getElementById("phone").value;
        const date = document.getElementById("date").value;
        const time = document.getElementById("time").value;
        const players = document.getElementById("players").value;

        // Validate inputs
        if (!name || !phone || !date || !time || players < 1) {
            showErrors(name, phone, date, time, players);
            return;
        }

        // Check if slot is already booked
        if (isSlotTaken(date, time)) {
            document.getElementById("bookingError").style.display = "block";
            return;
        }

        // Generate unique ID and calculate cost
        const bookingID = `FBS${uniqueID++}`;
        const cost = players * 100;
        const bookingDetails = `
            <strong>Booking ID:</strong> ${bookingID}<br>
            <strong>Name:</strong> ${name}<br>
            <strong>Phone:</strong> ${phone}<br>
            <strong>Date:</strong> ${date}<br>
            <strong>Time Slot:</strong> ${time}<br>
            <strong>Number of Players:</strong> ${players}<br>
            <strong>Total Cost:</strong> NPR ${cost}
        `;

        // Store booking in history
        bookings.push({
            id: bookingID,
            name,
            phone,
            date,
            time,
            players,
            cost,
        });

        document.getElementById("bookingDetails").innerHTML = bookingDetails;
        document.getElementById("summary").style.display = "block";
        document.getElementById("bookingForm").style.display = "none";
        document.getElementById("successMessage").style.display = "block";

        updateHistory();
        setTimeout(() => document.getElementById("successMessage").style.display = "none", 3000);
    }

    function clearErrors() {
        document.querySelectorAll(".error-message").forEach(error => error.style.display = "none");
        document.getElementById("bookingError").style.display = "none";
    }

    function showErrors(name, phone, date, time, players) {
        if (!name) document.getElementById("nameError").style.display = "block";
        if (!phone) document.getElementById("phoneError").style.display = "block";
        if (!date) document.getElementById("dateError").style.display = "block";
        if (!time) document.getElementById("timeError").style.display = "block";
        if (!players) document.getElementById("playersError").style.display = "block";
    }

    function isSlotTaken(date, time) {
        return bookings.some(booking => booking.date === date && booking.time === time);
    }

    function downloadSummary() {
        alert("Downloading summary as PDF...");
    }

    function printSummary() {
        alert("Sending summary to the printer...");
    }

    function updateHistory() {
        const historyList = document.getElementById("historyList");
        historyList.innerHTML = bookings.map(booking => `
            <li>${booking.date} - ${booking.time} (${booking.players} players) - NPR ${booking.cost}</li>
        `).join("");
        document.getElementById("history").style.display = "block";
    }

    function showAvailableSlots() {
        const slotList = ["6 AM - 8 AM", "8 AM - 10 AM", "4 PM - 6 PM", "6 PM - 8 PM"];
        const bookedSlots = bookings.map(booking => `${booking.date}: ${booking.time}`);
        const availableSlots = slotList.filter(slot => !bookedSlots.includes(slot));
        document.getElementById("slots").innerHTML = availableSlots.join("<br>");
        document.getElementById("availableSlots").style.display = "block";
    }

    function showRatingForm() {
        document.getElementById("ratings").style.display = "block";
    }

    function submitFeedback() {
        const feedback = document.getElementById("feedback").value;
        const rating = document.querySelector('input[name="rating"]:checked').value;
        alert(`Thank you for your feedback!\nRating: ${rating} stars\nFeedback: ${feedback}`);
        document.getElementById("ratings").style.display = "none";
    }
</script>

</body>
</html>
HTML
DOWNLOAD CODE

HTML CSS AND JS CODE FOR MACRO NUTRIENT CALCULATOR

Posted on by admin

FEATURE OF THE CODE

Key Features:

  1. User Input Fields:
    • Weight (in kilograms).
    • Height (in centimeters).
    • Age (in years).
    • Gender selection (Male/Female).
    • Activity level selection (Sedentary to Extra Active).
    • Custom macronutrient ratios for carbs, protein, and fats.
  2. Calorie Estimation:
    • Calculates Total Daily Energy Expenditure (TDEE) using the Mifflin-St Jeor Equation for Basal Metabolic Rate (BMR).
    • Adjusts calorie needs based on user-selected activity level.
  3. Macronutrient Breakdown:
    • Provides exact grams for carbohydrates, proteins, and fats based on calorie distribution and user-defined ratios.
  4. Validation System:
    • Ensures macronutrient ratios (carbs, protein, fats) add up to 100%. Alerts the user if they don’t.
  5. Dark/Light Mode Toggle:
    • Allows users to switch between light and dark themes dynamically.
    • Smooth transitions for a better visual experience.
  6. Enhanced User Interface:
    • Visually appealing layout with gradients and shadows.
    • Fully responsive design for all screen sizes.
  7. Animations and Graphics:
    • Fade-in effects for smooth page load.
    • Emojis for better user engagement and fun.
  8. Real-Time Calculations:
    • Instantly displays results for calories and macronutrients when the form is submitted.
  9. Customizable Macronutrient Ratios:
    • Users can set their own percentages for carbs, protein, and fats to fit specific dietary goals.
  10. Result Display:
  • Clear breakdown of estimated calorie needs.
  • Displays carbs, protein, and fat values in grams.
  1. Interactive Feedback:
  • Error messages and alerts to guide the user for valid input.
  1. Modern UX Enhancements:
  • Button hover effects and smooth transitions.
  • Accessibility-friendly design with simple navigation.
  1. Single Page Design:
  • All features integrated into one interactive and clean page.
  1. Mobile-Friendly:
  • Fully responsive for use on smartphones, tablets, and desktops.
  1. Dynamic Theme Update:
  • Changes both the background and text colors based on the selected theme.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Macronutrient Calculator</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: linear-gradient(to right, #6a11cb, #2575fc);
      color: white;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      overflow: hidden;
    }

    .container {
      background: rgba(255, 255, 255, 0.1);
      padding: 20px;
      border-radius: 10px;
      width: 90%;
      max-width: 500px;
      text-align: center;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      animation: fadeIn 2s ease-in-out;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    h1 {
      font-size: 2rem;
      margin-bottom: 10px;
    }

    form {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    label {
      font-size: 1.2rem;
    }

    input, select, button {
      padding: 10px;
      border: none;
      border-radius: 5px;
      font-size: 1rem;
      width: 100%;
    }

    button {
      background: #00d4ff;
      color: white;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    button:hover {
      background: #0066ff;
    }

    .result {
      margin-top: 20px;
      padding: 15px;
      background: rgba(0, 0, 0, 0.6);
      border-radius: 5px;
      font-size: 1.1rem;
      text-align: left;
    }

    .result span {
      display: block;
      margin: 5px 0;
    }

    .emoji {
      font-size: 2rem;
      margin: 15px 0;
    }

    .footer {
      margin-top: 20px;
      font-size: 0.8rem;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>🥗 Macronutrient Calculator</h1>
    <p>Calculate your daily macronutrient needs for a healthier you! 🌟</p>

    <form id="macroForm">
      <label for="calories">Calories (kcal): 🔥</label>
      <input type="number" id="calories" placeholder="Enter your daily calories" required>

      <label for="carbRatio">Carbs Ratio (%): 🍞</label>
      <input type="number" id="carbRatio" placeholder="e.g., 50" required>

      <label for="proteinRatio">Protein Ratio (%): 🥩</label>
      <input type="number" id="proteinRatio" placeholder="e.g., 25" required>

      <label for="fatRatio">Fat Ratio (%): 🥑</label>
      <input type="number" id="fatRatio" placeholder="e.g., 25" required>

      <button type="submit">Calculate Macros 🧮</button>
    </form>

    <div id="result" class="result" style="display: none;">
      <p class="emoji">✨ Your Results:</p>
      <span id="carbs">Carbs: 0g</span>
      <span id="proteins">Proteins: 0g</span>
      <span id="fats">Fats: 0g</span>
    </div>

    <div class="footer">💡 Make sure your ratios add up to 100%!</div>
  </div>

  <script>
    document.getElementById("macroForm").addEventListener("submit", function (event) {
      event.preventDefault();

      // Retrieve input values
      const calories = parseInt(document.getElementById("calories").value);
      const carbRatio = parseInt(document.getElementById("carbRatio").value);
      const proteinRatio = parseInt(document.getElementById("proteinRatio").value);
      const fatRatio = parseInt(document.getElementById("fatRatio").value);

      // Check if ratios sum up to 100%
      if (carbRatio + proteinRatio + fatRatio !== 100) {
        alert("⚠️ Ratios must add up to 100%!");
        return;
      }

      // Macronutrient calculations
      const carbs = Math.round((calories * carbRatio / 100) / 4);
      const proteins = Math.round((calories * proteinRatio / 100) / 4);
      const fats = Math.round((calories * fatRatio / 100) / 9);

      // Display results
      document.getElementById("result").style.display = "block";
      document.getElementById("carbs").textContent = `Carbs: ${carbs}g`;
      document.getElementById("proteins").textContent = `Proteins: ${proteins}g`;
      document.getElementById("fats").textContent = `Fats: ${fats}g`;
    });
  </script>
</body>
</html>
HTML

HTML CSS AND JAVA SCRIPT CODE TO FIND AREA OF TRIANGLE

Posted on by admin
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Triangle Area - All Sides</title>
</head>
<body>
    <input type="number" id="a" placeholder="Side A">
    <input type="number" id="b" placeholder="Side B">
    <input type="number" id="c" placeholder="Side C">
    <button onclick="calculateArea()">Calculate Area</button>
    <div id="areaResult"></div>

    <script>
        function calculateArea() {
            const a = parseFloat(document.getElementById('a').value);
            const b = parseFloat(document.getElementById('b').value);
            const c = parseFloat(document.getElementById('c').value);
            const s = (a + b + c) / 2;
            const area = Math.sqrt(s * (s - a) * (s - b) * (s - c));
            document.getElementById('areaResult').textContent = `Area: ${area}`;
        }
    </script>
</body>
</html>
JavaScript

HTML CSS AND JAVASCRIPT CODE FOR SAAS APPLICATION

Posted on by admin
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Advanced SaaS App</title>
  <style>
    /* Basic Styles */
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f9;
      margin: 0;
      padding: 0;
    }
    header {
      background-color: #333;
      color: white;
      text-align: center;
      padding: 1em 0;
      font-size: 1.5em;
    }
    footer {
      text-align: center;
      padding: 1em 0;
      background-color: #333;
      color: white;
    }
    .container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }
    .hidden {
      display: none;
    }
    .emoji {
      font-size: 2em;
    }
    button {
      background-color: #4CAF50;
      color: white;
      padding: 10px 20px;
      border: none;
      cursor: pointer;
      font-size: 1em;
    }
    button:hover {
      background-color: #45a049;
    }
    input, select {
      padding: 10px;
      margin: 10px 0;
      font-size: 1em;
      width: 100%;
    }
    .emoji-buttons button {
      font-size: 2em;
      margin: 5px;
    }
    .notification {
      background-color: #ffeb3b;
      padding: 10px;
      border-radius: 5px;
      margin-top: 20px;
      font-size: 1.2em;
    }
  </style>
</head>
<body>
  <header>
    Advanced SaaS Application <span class="emoji">🚀</span>
  </header>

  <div class="container">
    <!-- Login Section -->
    <div id="login" class="hidden">
      <h2>Login</h2>
      <form id="loginForm">
        <input type="text" placeholder="Username" required>
        <input type="password" placeholder="Password" required>
        <button type="submit">Login <span class="emoji">🔑</span></button>
      </form>
      <p>Don't have an account? <span class="emoji">🖊️</span> <a href="javascript:void(0)" onclick="showSection('signup')">Sign Up</a></p>
    </div>

    <!-- Sign Up Section -->
    <div id="signup" class="hidden">
      <h2>Sign Up</h2>
      <form id="signupForm">
        <input type="text" placeholder="Username" required>
        <input type="email" placeholder="Email" required>
        <input type="password" placeholder="Password" required>
        <button type="submit">Sign Up <span class="emoji">📝</span></button>
      </form>
      <p>Already have an account? <a href="javascript:void(0)" onclick="showSection('login')">Login</a></p>
    </div>

    <!-- Forgot Password Section -->
    <div id="forgotPassword" class="hidden">
      <h2>Reset Password</h2>
      <form id="resetPasswordForm">
        <input type="email" placeholder="Enter your email" required>
        <button type="submit">Send Reset Link <span class="emoji">📧</span></button>
      </form>
      <p>Remembered your password? <a href="javascript:void(0)" onclick="showSection('login')">Login</a></p>
    </div>

    <!-- Dashboard Section -->
    <div id="dashboard" class="hidden">
      <h2>Welcome, <span id="userName">User</span>! <span class="emoji">🎉</span></h2>
      <p>Current Subscription: <span id="subscriptionStatus">Not Subscribed</span> <span class="emoji">💳</span></p>
      <div class="notification">
        <span class="emoji">🔔</span> You have new updates!
      </div>

      <h3>Your Activity <span class="emoji">📊</span></h3>
      <ul id="activityLog">
        <!-- Populated dynamically -->
      </ul>

      <h3>Give Feedback <span class="emoji">💬</span></h3>
      <form id="feedbackForm">
        <textarea placeholder="Your feedback" required></textarea>
        <div class="emoji-buttons">
          <button type="button" onclick="addEmoji('😀')">😀</button>
          <button type="button" onclick="addEmoji('😍')">😍</button>
          <button type="button" onclick="addEmoji('😎')">😎</button>
          <button type="button" onclick="addEmoji('😢')">😢</button>
        </div>
        <button type="submit">Submit Feedback</button>
      </form>

      <h3>Invoice Section <span class="emoji">💵</span></h3>
      <form id="invoiceForm">
        <input type="text" id="invoiceName" placeholder="Client Name" required>
        <input type="email" id="invoiceEmail" placeholder="Client Email" required>
        <select id="invoicePlan">
          <option value="Basic">Basic Plan - $10</option>
          <option value="Standard">Standard Plan - $20</option>
          <option value="Premium">Premium Plan - $30</option>
        </select>
        <button type="submit">Generate Invoice <span class="emoji">🧾</span></button>
      </form>
      <h3>Generated Invoice:</h3>
      <ul id="invoiceDetails">
        <!-- Populated dynamically -->
      </ul>
    </div>
  </div>

  <footer>
    <p>© 2024 Advanced SaaS App <span class="emoji">🌍</span></p>
  </footer>

  <script>
    // Function to show sections
    function showSection(id) {
      const sections = document.querySelectorAll('.container > div');
      sections.forEach((section) => section.classList.add('hidden'));
      document.getElementById(id).classList.remove('hidden');
    }

    // Add emoji to feedback textarea
    function addEmoji(emoji) {
      const feedbackText = document.querySelector('#feedbackForm textarea');
      feedbackText.value += emoji;
    }

    // Handling login
    document.getElementById('loginForm').addEventListener('submit', function(event) {
      event.preventDefault();
      alert('Login Successful!');
      showSection('dashboard');
    });

    // Handling signup
    document.getElementById('signupForm').addEventListener('submit', function(event) {
      event.preventDefault();
      alert('Sign Up Successful!');
      showSection('login');
    });

    // Handling password reset
    document.getElementById('resetPasswordForm').addEventListener('submit', function(event) {
      event.preventDefault();
      alert('Password Reset Link Sent!');
      showSection('login');
    });

    // Handling feedback submission
    document.getElementById('feedbackForm').addEventListener('submit', function(event) {
      event.preventDefault();
      alert('Thank you for your feedback! <span class="emoji">❤️</span>');
    });

    // Handling invoice generation
    document.getElementById('invoiceForm').addEventListener('submit', function(event) {
      event.preventDefault();
      const clientName = document.getElementById('invoiceName').value;
      const clientEmail = document.getElementById('invoiceEmail').value;
      const plan = document.getElementById('invoicePlan').value;
      const invoiceDetails = `
        <li>Client Name: ${clientName} <span class="emoji">👤</span></li>
        <li>Client Email: ${clientEmail} <span class="emoji">📧</span></li>
        <li>Plan: ${plan} <span class="emoji">💳</span></li>
      `;
      document.getElementById('invoiceDetails').innerHTML = invoiceDetails;
    });

    // Simulating activity log in the dashboard
    const activities = ['Logged in', 'Updated profile', 'Generated invoice'];
    const activityLog = document.getElementById('activityLog');
    activities.forEach((activity) => {
      const li = document.createElement('li');
      li.textContent = activity;
      activityLog.appendChild(li);
    });

    // Start by showing login page
    showSection('login');
  </script>
</body>
</html>
JavaScript

HTML CSS AND JAVASCRIPT CODE FOR FOOTER MENU

Posted on by admin
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Enhanced Footer Menu</title>
  <style>
    /* Reset CSS */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: Arial, sans-serif;
      background: #f4f4f4;
    }

    /* Footer Styles */
    .footer {
      background: linear-gradient(135deg, #333, #444);
      color: #fff;
      padding: 50px 20px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .footer h3 {
      margin-bottom: 20px;
      font-size: 22px;
      position: relative;
      font-weight: bold;
      color: #FFD700;
    }
    .footer p {
      margin-bottom: 10px;
      font-size: 16px;
    }
    .footer .footer-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 30px;
      opacity: 0;
      animation: fadeIn 1.5s ease forwards;
    }
    .footer .footer-section:nth-child(1) { animation-delay: 0.2s; }
    .footer .footer-section:nth-child(2) { animation-delay: 0.4s; }
    .footer .footer-section:nth-child(3) { animation-delay: 0.6s; }
    .footer .footer-section:nth-child(4) { animation-delay: 0.8s; }
    .footer .footer-section a {
      color: #bbb;
      text-decoration: none;
      margin: 5px 0;
      font-size: 18px;
    }
    .footer .footer-section a:hover {
      color: #FFD700;
      transform: scale(1.1);
      transition: color 0.3s, transform 0.3s;
    }

    /* Footer Links Grid */
    .footer .footer-content {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
    }
    .footer .footer-content > div {
      flex: 1 1 220px;
      margin: 10px;
      padding: 10px;
    }

    /* Social Icons */
    .footer .social-icons {
      margin-top: 20px;
      animation: bounceIn 1s ease-in-out;
    }
    .footer .social-icons a {
      color: #FFD700;
      font-size: 24px;
      margin: 0 15px;
      text-decoration: none;
      transition: transform 0.3s, color 0.3s;
      display: inline-block;
    }
    .footer .social-icons a:hover {
      transform: rotate(360deg) scale(1.2);
      color: #fff;
    }

    /* Emoji Bullets */
    .footer .footer-section li::before {
      content: '⭐ ';
    }
    .footer .footer-section ul {
      list-style: none;
      text-align: left;
      font-size: 16px;
    }

    /* Scroll to Top Button */
    #scrollToTop {
      position: fixed;
      bottom: 20px;
      right: 20px;
      padding: 10px 15px;
      font-size: 24px;
      color: #fff;
      background: #333;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      display: none;
      animation: bounce 2s infinite alternate;
      transition: background 0.3s;
    }
    #scrollToTop:hover {
      background: #FFD700;
    }

    /* Keyframes for Animations */
    @keyframes fadeIn {
      0% { opacity: 0; transform: translateY(20px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    @keyframes bounceIn {
      0%, 100% { transform: translateY(-10px); }
      50% { transform: translateY(0); }
    }
    @keyframes bounce {
      0% { transform: translateY(0); }
      50% { transform: translateY(-15px); }
      100% { transform: translateY(0); }
    }

    /* Responsive Design */
    @media (max-width: 600px) {
      .footer .footer-content {
        flex-direction: column;
      }
    }
  </style>
</head>
<body>

<!-- Footer Menu -->
<div class="footer">
  <div class="footer-content">
    <!-- About Us Section -->
    <div class="footer-section about">
      <h3>About Us 🎉</h3>
      <p>We are a company dedicated to providing top-quality products and services. Our mission is to deliver excellence with every interaction. 💪</p>
    </div>

    <!-- Services Section -->
    <div class="footer-section services">
      <h3>Services 💼</h3>
      <ul>
        <li><a href="#">Web Design 🌐</a></li>
        <li><a href="#">App Development 📱</a></li>
        <li><a href="#">Marketing 📈</a></li>
        <li><a href="#">SEO Services 🔍</a></li>
      </ul>
    </div>

    <!-- Quick Links Section -->
    <div class="footer-section quick-links">
      <h3>Quick Links 🔗</h3>
      <ul>
        <li><a href="#">Home 🏠</a></li>
        <li><a href="#">About 👥</a></li>
        <li><a href="#">Contact 📞</a></li>
        <li><a href="#">Privacy Policy 📜</a></li>
      </ul>
    </div>

    <!-- Contact Us Section -->
    <div class="footer-section contact-us">
      <h3>Contact Us 📞</h3>
      <p>Phone: 📱 +1 (234) 567-890</p>
      <p>Email: 📧 info@example.com</p>
      <p>Address: 🏢 123 Street, City, Country</p>
    </div>
  </div>

  <!-- Social Icons -->
  <div class="social-icons">
    <a href="#" title="Facebook">🔵</a>
    <a href="#" title="Twitter">🐦</a>
    <a href="#" title="Instagram">📸</a>
    <a href="#" title="LinkedIn">🔗</a>
  </div>
</div>

<!-- Scroll to Top Button -->
<button id="scrollToTop" title="Scroll to top">⬆️</button>

<!-- JavaScript for Scroll to Top Button -->
<script>
  // Show/Hide scroll to top button
  window.onscroll = function() {
    const scrollToTop = document.getElementById("scrollToTop");
    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
      scrollToTop.style.display = "block";
    } else {
      scrollToTop.style.display = "none";
    }
  };

  // Scroll to top when button is clicked
  document.getElementById("scrollToTop").onclick = function() {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };
</script>

</body>
</html>
JavaScript

HTML CSS AND JAVASCRIPT CODE FOR CALORIE BURN CALCULATOR

Posted on by admin
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calorie Burn Calculator</title>
    <style>
        /* Global Reset */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }

        /* Body and Background Animation */
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: linear-gradient(135deg, #ffb3ba, #ffdfba);
            background-size: 400% 400%;
            animation: backgroundAnimate 10s infinite alternate;
            transition: background-color 0.3s ease;
            color: #333;
            overflow-y: auto;
        }

        @keyframes backgroundAnimate {
            0% { background-position: 0% 50%; }
            100% { background-position: 100% 50%; }
        }

        /* Calculator Container Styling */
        .calculator-container {
            background-color: #fff;
            padding: 2rem;
            box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.2);
            border-radius: 20px;
            max-width: 600px;
            text-align: center;
            position: relative;
            transform: scale(1);
            transition: transform 0.3s ease;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            border: 3px solid #ff6f61;
        }

        .calculator-container:hover {
            transform: scale(1.03);
        }

        /* Logo */
        .logo {
            width: 100px;
            margin-bottom: 1rem;
        }

        /* Title */
        h1 {
            font-size: 2.2rem;
            color: #444;
            margin-bottom: 1rem;
        }

        label {
            display: block;
            font-weight: bold;
            color: #555;
            margin: 0.8rem 0 0.3rem;
        }

        /* Input and Button Styling */
        input, select, button {
            width: 100%;
            padding: 0.75rem;
            margin: 0.5rem 0;
            border-radius: 8px;
            border: 1px solid #ccc;
            font-size: 1rem;
        }

        button {
            background-color: #ff6f61;
            color: #fff;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s ease;
            border: none;
        }

        button:hover {
            background-color: #ff4a3d;
        }

        /* Result Section */
        #result {
            margin-top: 1.5rem;
            font-size: 1.2rem;
            color: #333;
            padding: 0.5rem;
            border-radius: 8px;
            background-color: #f8f9fa;
            display: none;
            animation: slideIn 0.5s ease forwards;
        }

        .result-success {
            color: #28a745;
        }

        .result-error {
            color: #dc3545;
        }

        @keyframes slideIn {
            0% { opacity: 0; transform: translateY(30px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        /* Dark Mode Toggle */
        .dark-mode-toggle {
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
            font-size: 1.5rem;
            color: #ff6f61;
        }

        /* Health Tips Section */
        .health-tips {
            font-size: 1rem;
            color: #555;
            padding-top: 0.5rem;
        }

        /* History Section */
        .history {
            margin-top: 1rem;
            font-size: 0.9rem;
            color: #444;
            border-top: 1px solid #ddd;
            padding-top: 0.5rem;
        }

        /* Chart Container */
        .chart-container {
            width: 100%;
            height: 200px;
            margin-top: 1rem;
        }
    </style>
</head>
<body>

    <div class="calculator-container">
        <!-- Dark Mode Toggle -->
        <span class="dark-mode-toggle" onclick="toggleDarkMode()">🌙</span>

        <!-- Logo -->
        <img src="https://via.placeholder.com/100" alt="Logo" class="logo">

        <h1>Calorie Burn Calculator 🔥</h1>
        <form id="calorieForm">
            <!-- Weight Input -->
            <label for="weight">Weight (kg) 🏋️‍♂️:</label>
            <input type="number" id="weight" placeholder="Enter your weight" required>

            <!-- Duration Input -->
            <label for="duration">Duration (minutes) ⏱️:</label>
            <input type="number" id="duration" placeholder="Enter duration of activity" required>

            <!-- Intensity Selector with Tooltip -->
            <label for="intensity">Intensity Level 💪:</label>
            <select id="intensity" title="Select activity intensity level">
                <option value="6">Light (e.g., walking) 🐢</option>
                <option value="8">Moderate (e.g., cycling, dancing) 🚴‍♀️</option>
                <option value="10">High (e.g., running, swimming) 🏃‍♂️</option>
            </select>

            <!-- Calculate and Clear Buttons -->
            <button type="button" onclick="calculateCalories()">Calculate</button>
            <button type="button" onclick="clearForm()" style="background-color: #dc3545; color: #fff;">Clear</button>
        </form>

        <!-- Result Display -->
        <div id="result"></div>

        <!-- Health Tips Display -->
        <div class="health-tips" id="healthTips"></div>

        <!-- History Display -->
        <div class="history" id="history"></div>

        <!-- Chart Display -->
        <div class="chart-container" id="chartContainer"></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        // Chart Setup
        const ctx = document.getElementById('chartContainer').getContext('2d');
        let calorieChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: [],
                datasets: [{
                    label: 'Calories Burned',
                    data: [],
                    backgroundColor: ['#ff6f61', '#ff8f61', '#ffaf61']
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false
            }
        });

        // Dark Mode Toggle
        function toggleDarkMode() {
            document.body.classList.toggle("dark-mode");
            document.body.style.background = document.body.classList.contains("dark-mode")
                ? "linear-gradient(135deg, #1a2a6c, #b21f1f)"
                : "linear-gradient(135deg, #ffb3ba, #ffdfba)";
        }

        // Calculate Calories
        function calculateCalories() {
            const weight = parseFloat(document.getElementById('weight').value);
            const duration = parseFloat(document.getElementById('duration').value);
            const intensity = parseFloat(document.getElementById('intensity').value);
            const resultDiv = document.getElementById('result');
            const historyDiv = document.getElementById('history');
            const healthTipsDiv = document.getElementById('healthTips');

            if (weight > 0 && duration > 0) {
                const caloriesBurned = (intensity * weight * (duration / 60)).toFixed(2);
                resultDiv.className = "result-success";
                resultDiv.innerHTML = `Calories Burned: <strong>${caloriesBurned} kcal</strong> 🎉`;
                resultDiv.style.display = "block";

                // Add to chart
                calorieChart.data.labels.push(`Activity ${calorieChart.data.labels.length + 1}`);
                calorieChart.data.datasets[0].data.push(caloriesBurned);
                calorieChart.update();

                // Update health tips
                healthTipsDiv.innerHTML = caloriesBurned > 200
                    ? "Awesome job! Keep it up! 🥇"
                    : "Great start! Try increasing intensity. 💪";

                // Update history
                historyDiv.innerHTML += `<p>Activity: ${caloriesBurned} kcal burned</p>`;
            } else {
                resultDiv.className = "result-error";
                resultDiv.innerHTML = "Please enter valid weight and duration.";
                resultDiv.style.display = "block";
            }
        }

        // Clear Form
        function clearForm() {
            document.getElementById('weight').value = '';
            document.getElementById('duration').value = '';
            document.getElementById('intensity').value = '6';
            document.getElementById('result').style.display = 'none';
            document.getElementById('healthTips').innerHTML = '';
        }
    </script>
</body>
</html>
JavaScript

HTML CSS AND JAVASCRIPT CODE FOR FOOTBALL GAME

Posted on by admin
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>⚽ Football Penalty Shootout Game ⚽</title>
    <style>
        /* General styling for the game */
        body {
            font-family: Arial, sans-serif;
            background-color: #004d00;
            color: white;
            text-align: center;
            overflow: hidden;
            margin: 0;
        }

        #game-container {
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: url('stadium.jpg') center/cover no-repeat;
            position: relative;
            overflow: hidden;
        }

        #goalkeeper {
            width: 80px;
            height: 80px;
            background-color: red;
            border-radius: 50%;
            position: absolute;
            top: 25%;
            left: 50%;
            transform: translate(-50%, 0);
            transition: left 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2em;
        }

        #ball {
            width: 50px;
            height: 50px;
            background-color: white;
            border-radius: 50%;
            position: absolute;
            bottom: 15%;
            left: 50%;
            transform: translateX(-50%);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5em;
        }

        #scoreboard {
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: 1.2em;
        }

        .button {
            padding: 10px 20px;
            margin: 10px;
            border: none;
            border-radius: 5px;
            background-color: #28a745;
            color: white;
            cursor: pointer;
            font-size: 16px;
        }

        /* Trajectory line */
        #trajectory-line {
            position: absolute;
            width: 2px;
            background-color: yellow;
            display: none;
        }

        #goal-message {
            font-size: 2em;
            color: yellow;
            display: none;
        }

    </style>
</head>
<body>
    <div id="game-container">
        <div id="scoreboard">
            <p>Player: <span id="playerName">Player 1</span> ⚽</p>
            <p>Goals: <span id="goals">0</span> 🥅</p>
            <p>Attempts Left: <span id="attempts">5</span> 🔄</p>
        </div>
        <div id="goalkeeper">🧤</div>
        <div id="ball">⚽</div>
        <button id="startGame" class="button">Start Game 🎮</button>
        <div id="goal-message"></div>
        <div id="trajectory-line"></div>
    </div>

    <script>
        let goals = 0;
        let attempts = 5;
        let gameStarted = false;
        let dragging = false;

        const goalkeeper = document.getElementById('goalkeeper');
        const ball = document.getElementById('ball');
        const goalsDisplay = document.getElementById('goals');
        const attemptsDisplay = document.getElementById('attempts');
        const playerNameDisplay = document.getElementById('playerName');
        const goalMessage = document.getElementById('goal-message');
        const trajectoryLine = document.getElementById('trajectory-line');

        function moveGoalkeeper() {
            const randomPosition = Math.random() * 60 + 20; // Move within 20% to 80% width
            goalkeeper.style.left = `${randomPosition}%`;
            setTimeout(moveGoalkeeper, 2000);
        }

        function displayMessage(text, color) {
            goalMessage.style.color = color;
            goalMessage.textContent = text;
            goalMessage.style.display = 'block';
            setTimeout(() => {
                goalMessage.style.display = 'none';
            }, 1000);
        }

        function playSound(type) {
            const sound = new Audio(type === 'goal' ? 'goal.mp3' : 'miss.mp3');
            sound.play();
        }

        function shootBall(shotPower, shotAngle) {
            if (attempts > 0 && gameStarted) {
                attempts--;
                attemptsDisplay.textContent = attempts;

                const goalkeeperPosition = parseFloat(goalkeeper.style.left);
                if (shotPower > 30 && shotPower < 70 && Math.abs(shotAngle - goalkeeperPosition) > 10) {
                    goals++;
                    goalsDisplay.textContent = goals;
                    displayMessage("GOAL! 🎉", "yellow");
                    playSound('goal');
                } else {
                    displayMessage("Miss! ❌", "red");
                    playSound('miss');
                }

                if (attempts === 0) {
                    endGame();
                }
            }
        }

        function endGame() {
            alert(`Game over! You scored ${goals} goals. ⚽`);
            gameStarted = false;
            attempts = 5;
            goals = 0;
            attemptsDisplay.textContent = attempts;
            goalsDisplay.textContent = goals;
        }

        document.getElementById('startGame').onclick = function () {
            gameStarted = true;
            attempts = 5;
            goals = 0;
            attemptsDisplay.textContent = attempts;
            goalsDisplay.textContent = goals;
            moveGoalkeeper();
            alert("Game Started! Try to score as many goals as you can! ⚽");
        };

        let startX, startY;

        // Mouse events for dragging and shooting
        ball.onmousedown = function (e) {
            dragging = true;
            startX = e.clientX;
            startY = e.clientY;
            trajectoryLine.style.display = 'block';
            trajectoryLine.style.height = '0';
            trajectoryLine.style.left = `${startX}px`;
            trajectoryLine.style.top = `${startY}px`;
        };

        document.onmousemove = function (e) {
            if (dragging) {
                const currentX = e.clientX;
                const currentY = e.clientY;

                // Set trajectory line position and length
                const deltaX = currentX - startX;
                const deltaY = currentY - startY;
                const angle = Math.atan2(deltaY, deltaX) * (180 / Math.PI);
                const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);

                trajectoryLine.style.transform = `rotate(${angle}deg)`;
                trajectoryLine.style.height = `${distance}px`;
            }
        };

        document.onmouseup = function (e) {
            if (dragging) {
                dragging = false;
                trajectoryLine.style.display = 'none';

                const endX = e.clientX;
                const endY = e.clientY;

                // Calculate shot strength and angle
                const shotPower = Math.min(100, Math.sqrt((endX - startX) ** 2 + (endY - startY) ** 2) / 2);
                const shotAngle = (endX / window.innerWidth) * 100;

                shootBall(shotPower, shotAngle);
            }
        };
    </script>
</body>
</html>
JavaScript

HTML CSS AND JAVASCRIPT CODE FOR ARM BODY FAT CALCULATOR

Posted on by admin
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>💪 Arm Body Fat & BMI Calculator</title>
    <style>
        /* General Styling */
        body {
            font-family: Arial, sans-serif;
            background: linear-gradient(to right, #00c6ff, #0072ff);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            overflow: hidden;
            color: #fff;
        }

        .calculator-container {
            background: #222;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
            text-align: center;
            width: 350px;
            animation: fadeIn 1s ease-in-out;
            position: relative;
        }

        .calculator-container h2 {
            font-size: 24px;
            color: #ffd700;
            margin: 10px 0;
        }

        .input-group {
            margin: 15px 0;
            text-align: left;
        }

        .input-group label {
            font-size: 16px;
            color: #ddd;
        }

        .input-group input {
            width: 100%;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #555;
            margin-top: 5px;
            background-color: #333;
            color: #ffd700;
            font-size: 14px;
        }

        .btn {
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
            margin-top: 10px;
            display: inline-block;
            width: 100%;
            box-sizing: border-box;
        }

        .calculate-btn { background-color: #4CAF50; }
        .calculate-btn:hover { background-color: #45a049; }

        .copy-btn { background-color: #2196F3; }
        .copy-btn:hover { background-color: #0b7dda; }

        .clear-btn { background-color: #ff5722; }
        .clear-btn:hover { background-color: #e64a19; }

        .print-btn { background-color: #607d8b; }
        .print-btn:hover { background-color: #455a64; }

        .result {
            margin-top: 15px;
            font-size: 18px;
            font-weight: bold;
            color: #ffd700;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        }

        .history {
            margin-top: 20px;
            font-size: 14px;
            color: #ddd;
            max-height: 150px;
            overflow-y: auto;
            border-top: 1px solid #444;
            padding-top: 10px;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
    </style>
</head>
<body>

<div class="calculator-container">
    <h2>💪 Arm Body Fat & BMI Calculator 💪</h2>
    <div class="input-group">
        <label for="age">🧑 Age:</label>
        <input type="number" id="age" min="1" placeholder="Enter your age">
    </div>
    <div class="input-group">
        <label for="weight">⚖️ Weight (kg):</label>
        <input type="number" id="weight" min="1" placeholder="Enter your weight">
    </div>
    <div class="input-group">
        <label for="height">📏 Height (cm):</label>
        <input type="number" id="height" min="1" placeholder="Enter your height">
    </div>
    <div class="input-group">
        <label for="armCircumference">💪 Arm Circumference (cm):</label>
        <input type="number" id="armCircumference" min="1" placeholder="Enter arm circumference">
    </div>
    <button class="btn calculate-btn" onclick="calculateBodyFat()">📊 Calculate</button>
    <div class="result" id="result">Your results will appear here.</div>
    <button class="btn copy-btn" onclick="copyResult()">📋 Copy Result</button>
    <button class="btn clear-btn" onclick="clearInputs()">🧹 Clear Inputs</button>
    <button class="btn print-btn" onclick="printResult()">🖨️ Print Result</button>

    <div class="history" id="history"><h4>📜 Calculation History</h4></div>
</div>

<script>
    let historyLog = [];

    function calculateBodyFat() {
        const age = parseInt(document.getElementById('age').value);
        const weight = parseFloat(document.getElementById('weight').value);
        const height = parseFloat(document.getElementById('height').value);
        const armCircumference = parseFloat(document.getElementById('armCircumference').value);
        const resultElement = document.getElementById('result');

        // Validation
        if (!age || !weight || !height || !armCircumference) {
            resultElement.innerText = "⚠️ Please fill all fields correctly.";
            return;
        }

        // Body Fat Calculation (Placeholder formula for demonstration)
        const bodyFat = ((armCircumference / weight) * age * 0.1).toFixed(2);

        // BMI Calculation
        const heightMeters = height / 100;
        const bmi = (weight / (heightMeters * heightMeters)).toFixed(2);

        // Display results
        resultElement.innerHTML = `
            🏋️ Estimated Arm Body Fat: <span style="color: #4CAF50;">${bodyFat}%</span><br>
            📊 BMI: <span style="color: #2196F3;">${bmi}</span>
        `;

        // Update History
        const historyEntry = `Age: ${age}, Weight: ${weight}kg, Arm Circumference: ${armCircumference}cm, Body Fat: ${bodyFat}%, BMI: ${bmi}`;
        historyLog.push(historyEntry);
        updateHistory();
    }

    function updateHistory() {
        const historyElement = document.getElementById('history');
        historyElement.innerHTML = '<h4>📜 Calculation History</h4>';
        historyLog.forEach((entry, index) => {
            historyElement.innerHTML += `<p>${index + 1}. ${entry}</p>`;
        });
    }

    function copyResult() {
        const resultText = document.getElementById('result').innerText;
        if (!resultText) {
            alert("⚠️ No result to copy!");
            return;
        }

        // Copy result text to clipboard
        const tempInput = document.createElement("input");
        document.body.appendChild(tempInput);
        tempInput.value = resultText;
        tempInput.select();
        document.execCommand("copy");
        document.body.removeChild(tempInput);

        alert("✅ Result copied to clipboard!");
    }

    function clearInputs() {
        document.getElementById('age').value = '';
        document.getElementById('weight').value = '';
        document.getElementById('height').value = '';
        document.getElementById('armCircumference').value = '';
        document.getElementById('result').innerText = 'Your results will appear here.';
    }

    function printResult() {
        const printContents = document.getElementById('result').innerHTML;
        const newWindow = window.open('', '_blank');
        newWindow.document.write(`
            <html>
                <head><title>Print Result</title></head>
                <body>${printContents}</body>
            </html>
        `);
        newWindow.document.close();
        newWindow.print();
    }
</script>

</body>
</html>
JavaScript

CODE IDEAL WEIGHT CALCULATOR IN HTML CSS AND JAVASCRIPT

Posted on by admin
  1. User-Friendly Interface: Simple, centered layout with a responsive design and attractive color gradient background.
  2. Gender Selection: Allows users to select their gender, which affects the calculation of ideal weight.
  3. Age, Height, and Weight Input: Users can input their age, height (in cm), and weight (in kg) to calculate BMI and ideal weight.
  4. Buttons for Actions:
    • Calculate Button: Calculates and displays the ideal weight and BMI based on the inputs.
    • Clear Button: Clears all input fields and resets the display elements.
    • History Button: Shows the user’s BMI and weight history in an alert box.
  5. Ideal Weight Calculation: Calculates ideal weight based on gender and height, with a different formula for males and females.
  6. BMI Calculation: Computes BMI from weight and height, then displays the result with an emoji and advice.
  7. Result Display: Displays the ideal weight and BMI values along with relevant icons and styling.
  8. Health Advice and Tips:
    • Provides personalized health advice based on BMI categories (underweight, normal, overweight, obese).
    • Offers tips for each category, such as dietary and lifestyle suggestions.
  9. Progress Bar: Shows a visual representation of BMI status, where the width adjusts according to the BMI category (e.g., 25% for underweight, 50% for normal, etc.).
  10. Icon Indicators: Displays an emoji next to the result to represent different BMI statuses, making it visually engaging.
  11. Animations:
    • Fade-in effect on the main calculator container for a smoother UI experience.
    • Slide-in effect for the result display, enhancing visual appeal.
  12. Local Storage for History: Saves previous calculations (gender, age, height, weight, ideal weight, BMI) in the browser’s local storage, allowing users to view their history of calculations.
  13. Data Validation: Checks if the input values for age, height, and weight are valid numbers, displaying a warning if any are missing or invalid.
  14. Responsive Design: Adjusts for various screen sizes to ensure a consistent user experience.
  15. Tooltips and Placeholder Icons: Adds emojis to placeholders and labels for a friendly and intuitive interface.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🌟 Ideal Weight & BMI Calculator 🌟</title>
    <style>
        /* Basic styling and animations */
        body {
            font-family: Arial, sans-serif;
            background: linear-gradient(120deg, #f6d365, #fda085);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            color: #333;
            overflow: hidden;
        }

        .calculator-container {
            background-color: #ffffff;
            padding: 2em;
            border-radius: 12px;
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
            text-align: center;
            width: 400px;
            animation: fadeIn 1s ease-out;
            position: relative;
        }

        h1 {
            color: #333;
            font-size: 24px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        h1::before {
            content: "🧮";
            margin-right: 8px;
        }

        label {
            display: block;
            margin-top: 10px;
            font-weight: bold;
        }

        input[type="number"], select {
            width: 100%;
            padding: 10px;
            margin-top: 8px;
            border-radius: 5px;
            border: 1px solid #ddd;
            font-size: 16px;
            transition: all 0.3s ease;
        }

        input[type="number"]:focus, select:focus {
            border-color: #fda085;
            outline: none;
        }

        .button-container {
            display: flex;
            gap: 10px;
            justify-content: center;
            margin-top: 20px;
        }

        .calculate-btn, .clear-btn, .history-btn {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .calculate-btn {
            background: #fda085;
            color: #fff;
        }

        .calculate-btn:hover {
            background: #f6d365;
        }

        .calculate-btn::before {
            content: "💪";
            margin-right: 8px;
        }

        .clear-btn {
            background: #e0e0e0;
            color: #333;
        }

        .clear-btn:hover {
            background: #ccc;
        }

        .history-btn {
            background: #82c91e;
            color: #fff;
        }

        .history-btn:hover {
            background: #63a917;
        }

        .result, .advice, .tips {
            margin-top: 20px;
            font-size: 18px;
            font-weight: bold;
            color: #444;
            animation: slideIn 1s ease-in-out;
        }

        .result-icon {
            font-size: 2em;
            margin-top: 15px;
        }

        .advice {
            font-size: 16px;
            color: #666;
            margin-top: 10px;
        }

        .tips {
            font-size: 14px;
            color: #888;
            font-style: italic;
        }

        .progress-bar-container {
            width: 100%;
            background-color: #eee;
            border-radius: 5px;
            margin-top: 15px;
        }

        .progress-bar {
            height: 10px;
            border-radius: 5px;
            background-color: #82c91e;
            width: 0;
            transition: width 1s ease;
        }

        /* Animations */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</head>
<body>
    <div class="calculator-container">
        <h1>Ideal Weight & BMI Calculator</h1>
        <label for="gender">Gender: 👤</label>
        <select id="gender">
            <option value="male">Male 🚹</option>
            <option value="female">Female 🚺</option>
        </select>

        <label for="age">Age: 🎂</label>
        <input type="number" id="age" placeholder="Enter age">

        <label for="height">Height (cm): 📏</label>
        <input type="number" id="height" placeholder="Enter height in cm">

        <label for="weight">Current Weight (kg): ⚖️</label>
        <input type="number" id="weight" placeholder="Enter weight in kg">

        <div class="button-container">
            <button class="calculate-btn" onclick="calculateIdealWeight()">Calculate</button>
            <button class="clear-btn" onclick="clearInputs()">Clear</button>
            <button class="history-btn" onclick="showHistory()">History</button>
        </div>

        <div id="result" class="result"></div>
        <div class="progress-bar-container">
            <div id="progressBar" class="progress-bar"></div>
        </div>
        <div id="resultIcon" class="result-icon"></div>
        <div id="advice" class="advice"></div>
        <div id="tips" class="tips"></div>
    </div>

    <script>
        let history = [];

        function calculateIdealWeight() {
            const gender = document.getElementById("gender").value;
            const age = parseInt(document.getElementById("age").value);
            const height = parseFloat(document.getElementById("height").value);
            const weight = parseFloat(document.getElementById("weight").value);
            const resultDiv = document.getElementById("result");
            const resultIconDiv = document.getElementById("resultIcon");
            const adviceDiv = document.getElementById("advice");
            const tipsDiv = document.getElementById("tips");
            const progressBar = document.getElementById("progressBar");

            if (isNaN(height) || height <= 0 || isNaN(weight) || weight <= 0 || isNaN(age) || age <= 0) {
                resultDiv.textContent = "❌ Please enter valid age, height, and weight.";
                resultIconDiv.innerHTML = "⚠️";
                adviceDiv.textContent = "";
                tipsDiv.textContent = "";
                return;
            }

            let idealWeight;
            if (gender === "male") {
                idealWeight = 50 + 0.9 * (height - 152);
            } else {
                idealWeight = 45.5 + 0.9 * (height - 152);
            }

            const heightInMeters = height / 100;
            const bmi = weight / (heightInMeters * heightInMeters);
            resultDiv.textContent = `✨ Ideal Weight: ${idealWeight.toFixed(1)} kg | BMI: ${bmi.toFixed(1)}`;
            resultIconDiv.innerHTML = bmi > 0 ? "💪" : "";

            if (bmi < 18.5) {
                adviceDiv.textContent = "📉 Underweight: Consider a balanced diet to gain weight.";
                tipsDiv.textContent = "Tip: High-calorie foods and strength training can help.";
                progressBar.style.width = "25%";
            } else if (bmi >= 18.5 && bmi <= 24.9) {
                adviceDiv.textContent = "✅ Normal: Keep up the good work and maintain a healthy lifestyle!";
                tipsDiv.textContent = "Tip: A balanced diet and regular exercise can keep you on track!";
                progressBar.style.width = "50%";
            } else if (bmi >= 25 && bmi <= 29.9) {
                adviceDiv.textContent = "⚠️ Overweight: Consider regular exercise and a balanced diet.";
                tipsDiv.textContent = "Tip: Reduce processed food and increase physical activity.";
                progressBar.style.width = "75%";
            } else {
                adviceDiv.textContent = "❗ Obese: Consult a healthcare provider for personalized advice.";
                tipsDiv.textContent = "Tip: Consult a doctor for a personalized health plan.";
                progressBar.style.width = "100%";
            }

            history.push(`Gender: ${gender}, Age: ${age}, Height: ${height} cm, Weight: ${weight} kg, Ideal Weight: ${idealWeight.toFixed(1)} kg, BMI: ${bmi.toFixed(1)}`);
            localStorage.setItem("bmiHistory", JSON.stringify(history));
        }

        function clearInputs() {
            document.getElementById("age").value = "";
            document.getElementById("height").value = "";
            document.getElementById("weight").value = "";
            document.getElementById("result").textContent = "";
            document.getElementById("resultIcon").innerHTML = "";
            document.getElementById("advice").textContent = "";
            document.getElementById("tips").textContent = "";
            document.getElementById("progressBar").style.width = "0%";
        }

        function showHistory() {
            const savedHistory = localStorage.getItem("bmiHistory");
            if (savedHistory) {
                alert("History:\n" + JSON.parse(savedHistory).join("\n"));
            } else {
                alert("No history available.");
            }
        }
    </script>
</body>
</html>
JavaScript

CODE FOR NABIL BANK DIVIDENT 2081/82

Posted on by admin

SOURCE CODE HTML CSS AND JAVASCRIPT COMBINED

DIVIDENT TABLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dividend Table</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f8f8;
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        .table-container {
            border: 2px solid red;
            padding: 10px;
            background-color: #fff;
            overflow-x: auto;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            width: 90%;
            max-width: 1200px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 0 auto;
        }
        th, td {
            padding: 10px;
            text-align: center;
            border: 1px solid #ddd;
        }
        th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        td {
            background-color: #ffffff;
        }
        .closed-cell {
            background-color: #ffdddd;
            color: red;
            font-weight: bold;
        }
        .btn {
            padding: 10px 15px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 20px;
        }
        .btn:hover {
            background-color: #218838;
        }
    </style>
</head>
<body>

    <h1>Dividend Table</h1>
    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th>S.N.</th>
                    <th>Bonus Dividend(%)</th>
                    <th>Cash Dividend(%)</th>
                    <th>Total Dividend(%)</th>
                    <th>Announcement Date</th>
                    <th>Book Closure Date</th>
                    <th>Distribution Date</th>
                    <th>Bonus Listing Date</th>
                    <th>Fiscal Year</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>11.00</td>
                    <td>11.00</td>
                    <td>11.00</td>
                    <td>2023-11-23</td>
                    <td class="closed-cell">2023-12-15 [Closed]</td>
                    <td></td>
                    <td>2023-03-10</td>
                    <td>2079/2080</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>18.5</td>
                    <td>11.5</td>
                    <td>30.00</td>
                    <td>2022-12-12</td>
                    <td class="closed-cell">2023-01-02 [Closed]</td>
                    <td></td>
                    <td>2022-03-29</td>
                    <td>2078/2079</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>33.6</td>
                    <td>4.4</td>
                    <td>38.00</td>
                    <td>2021-11-03</td>
                    <td class="closed-cell">2021-12-31 [Closed]</td>
                    <td></td>
                    <td>2021-03-10</td>
                    <td>2077/2078</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>33.5</td>
                    <td>1.76</td>
                    <td>35.26</td>
                    <td>2020-12-22</td>
                    <td class="closed-cell">2020-12-30 [Closed]</td>
                    <td></td>
                    <td>2020-03-02</td>
                    <td>2076/2077</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>12.00</td>
                    <td>22.00</td>
                    <td>34.00</td>
                    <td>2019-12-17</td>
                    <td class="closed-cell">2019-12-24 [Closed]</td>
                    <td></td>
                    <td></td>
                    <td>2075/2076</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>12.00</td>
                    <td>22.00</td>
                    <td>34.00</td>
                    <td>2019-02-18</td>
                    <td class="closed-cell">2019-02-26 [Closed]</td>
                    <td></td>
                    <td></td>
                    <td>2074/2075</td>
                </tr>
                <tr>
                    <td>7</td>
                    <td>30.00</td>
                    <td>18.00</td>
                    <td>48.00</td>
                    <td>2017-09-12</td>
                    <td class="closed-cell">2017-09-21 [Closed]</td>
                    <td></td>
                    <td></td>
                    <td>2073/2074</td>
                </tr>
                <tr>
                    <td>8</td>
                    <td>30.00</td>
                    <td>15.00</td>
                    <td>45.00</td>
                    <td>2016-09-21</td>
                    <td class="closed-cell">2016-09-29 [Closed]</td>
                    <td></td>
                    <td></td>
                    <td>2072/2073</td>
                </tr>
                <tr>
                    <td>9</td>
                    <td>30.00</td>
                    <td>6.842</td>
                    <td>36.842</td>
                    <td>2015-12-06</td>
                    <td class="closed-cell">2015-12-14 [Closed]</td>
                    <td>2015-12-28</td>
                    <td></td>
                    <td>2071/2072</td>
                </tr>
                <tr>
                    <td>10</td>
                    <td>20.00</td>
                    <td>45.00</td>
                    <td>65.00</td>
                    <td>2014-11-13</td>
                    <td class="closed-cell">2014-11-21 [Closed]</td>
                    <td>2014-12-02</td>
                    <td></td>
                    <td>2070/2071</td>
                </tr>
                <tr>
                    <td>11</td>
                    <td>25.00</td>
                    <td>40.00</td>
                    <td>65.00</td>
                    <td>2013-12-09</td>
                    <td class="closed-cell">2013-12-17 [Closed]</td>
                    <td>2013-12-28</td>
                    <td></td>
                    <td>2069/2070</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>20.00</td>
                    <td>40.00</td>
                    <td>60.00</td>
                    <td>2012-10-03</td>
                    <td class="closed-cell">2012-10-11 [Closed]</td>
                    <td>2012-10-30</td>
                    <td></td>
                    <td>2068/2069</td>
                </tr>
                <tr>
                    <td>13</td>
                    <td>0.00</td>
                    <td>30.00</td>
                    <td>30.00</td>
                    <td>2011-12-04</td>
                    <td class="closed-cell">2011-12-12 [Closed]</td>
                    <td>2011-12-20</td>
                    <td></td>
                    <td>2067/2068</td>
                </tr>
            </tbody>
        </table>
    </div>

    <button class="btn" onclick="downloadTable()">Download Table</button>

    <script>
        function downloadTable() {
            const table = document.querySelector('table');
            let csv = [];
            const rows = table.querySelectorAll('tr');

            for (let i = 0; i < rows.length; i++) {
                const row = [], cols = rows[i].querySelectorAll('td, th');

                for (let j = 0; j < cols.length; j++) {
                    row.push(cols[j].innerText);
                }
                csv.push(row.join(','));
            }

            const csvString = csv.join('\n');
            const blob = new Blob([csvString], { type: 'text/csv' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.setAttribute('href', url);
            a.setAttribute('download', 'dividend_table.csv');
            a.click();
            URL.revokeObjectURL(url);
        }
    </script>
</body>
</html>
JavaScript

NEPSE CHART I FRAME

<iframe src="https://nepsealpha.com/nepse-chart?symbol=NABIL" 
        title="NEPSE Chart for NABIL" 
        style="border:none; width:100%; height:600px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);"></iframe>
JavaScript

MAJOR INDICATOR

EPS

<div style="position: relative; width: 100%; height: 0; padding-top: 56.2500%;
 padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden;
 border-radius: 8px; will-change: transform;">
  <iframe loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;"
    src="https://www.canva.com/design/DAGVIiXMFho/5EL0v7kjne7rjl_W9fcnxA/view?embed" allowfullscreen="allowfullscreen" allow="fullscreen">
  </iframe>
</div>
<a href="https://www.canva.com/design/DAGVIiXMFho/5EL0v7kjne7rjl_W9fcnxA/view?utm_content=DAGVIiXMFho&utm_campaign=designshare&utm_medium=embeds&utm_source=link" target="_blank" rel="noopener">
JavaScript

NET PROFIT

<div style="position: relative; width: 100%; height: 0; padding-top: 56.2500%;
 padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden;
 border-radius: 8px; will-change: transform;">
  <iframe loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;"
    src="https://www.canva.com/design/DAGVIvNecKU/9GnmRcWcpEtyTNvmSYs35g/view?embed" allowfullscreen="allowfullscreen" allow="fullscreen">
  </iframe>
</div>
<a href="https://www.canva.com/design/DAGVIvNecKU/9GnmRcWcpEtyTNvmSYs35g/view?utm_content=DAGVIvNecKU&utm_campaign=designshare&utm_medium=embeds&utm_source=link" target="_blank" rel="noopener">
JavaScript

EPS

<div style="position: relative; width: 100%; height: 0; padding-top: 56.2500%;
 padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden;
 border-radius: 8px; will-change: transform;">
  <iframe loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;"
    src="https://www.canva.com/design/DAGVIiXMFho/5EL0v7kjne7rjl_W9fcnxA/view?embed" allowfullscreen="allowfullscreen" allow="fullscreen">
  </iframe>
</div>
<a href="https://www.canva.com/design/DAGVIiXMFho/5EL0v7kjne7rjl_W9fcnxA/view?utm_content=DAGVIiXMFho&utm_campaign=designshare&utm_medium=embeds&utm_source=link" target="_blank" rel="noopener">
JavaScript

IF YOU HAVE ANY FEEDBACK THEN COMMENT DOWN

error: Content is protected !!
Scroll to Top
MacroNepal
Verified by MonsterInsights