GFGVITAP · NishkarshHublikar · Oct 26, 2024 · Oct 26, 2024
diff --git a/Team T3/README.md b/Team T3/README.md
@@ -0,0 +1,9 @@
+# T3
+
+## Team Members
+Nishkarsh Hublikar
+Raunak Meher
+Nandini Mourya
+
+## Youtube link
+https://youtu.be/rrS6UlmYCfM
diff --git a/Team T3/index.html b/Team T3/index.html
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Solar Power Simulator</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <link rel="stylesheet" href="style.css">
+
+</head>
+<body>
+    <!--navbar-->
+    <div class="nav-bar">
+        <div class="logo">
+            <h1>SPS</h1>
+        </div>
+        <div class="nav-menu">
+            <ul>
+                <li><a href="#">Home</a></li>
+                <li><a href="#">About</a></li>
+                <li><a href="#">Contact Us</a></li>
+            </ul>
+        </div>
+    </div>
+<div class="mainhead">
+
+    <div class="secondbox">
+        <h2>Calculate The Solar Power Generated</h2>
+        <form id="solar-form">
+            <input type="text" id="location" placeholder="Enter Location" required />
+            <input type="number" id="roof-area" placeholder="Roof Area (m²)" required />
+            <button type="submit">Calculate</button>
+        </form>
+
+        <!-- Results Section -->
+        <div id="results" style="display:none;">
+            <p>Annual Energy Output: <span id="energy-output"></span></p>
+            <p>Cost Savings: <span id="cost-savings"></span></p>
+            <p>CO2 Savings: <span id="co2-savings"></span> </p>
+        </div>
+    </div>
+</div>
+<!-- Chart for energy output -->
+<canvas id="energy-chart"></canvas>
+
+
+    <script>
+        document.getElementById('solar-form').addEventListener('submit', async function (e) {
+            e.preventDefault();
+
+            const location = document.getElementById('location').value;
+            const roofArea = parseFloat(document.getElementById('roof-area').value);
+
+            if (!location || !roofArea || roofArea <= 0) {
+                alert("Please provide a valid location and roof area.");
+                return;
+            }
+
+            const panelEfficiency = 0.2; // 20% efficiency
+            const electricityRateINR = 7; // ₹7 per kWh
+            const co2EmissionFactorIN = 0.82; // 0.82 kg CO2 per kWh
+
+            // Fetch solar data and calculate results
+            const solarIrradiance = await fetchSolarData(location);
+            if (!solarIrradiance) return alert("Could not fetch solar data. Please try again.");
+
+            // Refined Calculation
+            const dailyEnergy = solarIrradiance * roofArea * panelEfficiency;
+            const annualEnergy = dailyEnergy * 365;
+            const costSavingsINR = annualEnergy * electricityRateINR;
+            const co2SavingsIN = annualEnergy * co2EmissionFactorIN;
+
+            // Display results
+            document.getElementById('energy-output').innerText = annualEnergy.toFixed(2) + 'kWh/year';
+            document.getElementById('cost-savings').innerText = costSavingsINR.toFixed(2) + ' ₹/year';
+            document.getElementById('co2-savings').innerText = co2SavingsIN.toFixed(2) + ' kg/year';
+            document.getElementById('results').style.display = 'block';
+
+            // Plot the energy output chart
+            plotEnergyChart(annualEnergy);
+        });
+
+        // Fetch solar irradiance data using OpenWeather API
+        async function fetchSolarData(location) {
+            const apiKey = '357e4ca3d1396bf417f32fd5a1452f74'; // Replace with your actual API key
+            const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${location}&appid=${apiKey}`;
+
+            try {
+                const response = await fetch(apiUrl);
+                if (!response.ok) throw new Error("Failed to fetch data");
+
+                const data = await response.json();
+                const cloudCover = data.clouds?.all ?? 50; // Default to 50% if data is missing
+                return (100 - cloudCover) * 0.2; // Estimate irradiance more realistically
+            } catch (error) {
+                console.error("Error fetching solar data:", error);
+                return null;
+            }
+        }
+
+        // Chart.js visualization for energy output
+        function plotEnergyChart(annualEnergy) {
+            const ctx = document.getElementById('energy-chart').getContext('2d');
+            if (window.myChart instanceof Chart) {
+                window.myChart.destroy(); // Destroy the chart if it exists to avoid duplicates
+            }
+            window.myChart = new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: ['Annual Energy Output'],
+                    datasets: [{
+                        label: 'kWh/year',
+                        data: [annualEnergy],
+                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
+                        borderColor: 'rgba(75, 192, 192, 1)',
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            title: { display: true, text: 'kWh' }
+                        }
+                    }
+                }
+            });
+        }
+    </script>
+
+</body>
+</html>
diff --git a/Team T3/photovoltaic-2138992_1280.jpg b/Team T3/photovoltaic-2138992_1280.jpg
diff --git a/Team T3/script.js b/Team T3/script.js
@@ -0,0 +1,71 @@
+document.getElementById('solar-form').addEventListener('submit', function (e) {
+    e.preventDefault();
+
+    const location = document.getElementById('location').value;
+    const roofArea = document.getElementById('roof-area').value;
+
+    if (!location || !roofArea) {
+        alert("Please provide both location and roof area.");
+        return;
+    }
+
+    // Default panel efficiency and electricity rate
+    const panelEfficiency = 0.2; // 20% efficiency
+    const electricityRate = 0.10; // $0.10 per kWh
+    const co2EmissionFactor = 0.85; // 0.85 kg CO2 per kWh
+
+    // Fetch solar data from Solcast or OpenWeather API
+    fetchSolarData(location).then(solarIrradiance => {
+        const annualEnergy = solarIrradiance * roofArea * panelEfficiency * 365; // Energy in kWh/year
+        const costSavings = (annualEnergy * electricityRate)/100;
+        const co2Savings = annualEnergy * co2EmissionFactor;
+
+        // Display results
+        document.getElementById('energy-output').innerText = annualEnergy.toFixed(2);
+        document.getElementById('cost-savings').innerText = costSavings.toFixed(2);
+        document.getElementById('co2-savings').innerText = co2Savings.toFixed(2);
+
+        document.getElementById('results').style.display = 'block';
+
+        // Plot the energy output chart
+        plotEnergyChart(annualEnergy);
+    });
+});
+
+// Fetch solar data (example using OpenWeather API)
+async function fetchSolarData(location) {
+    const apiKey = '357e4ca3d1396bf417f32fd5a1452f74'; // Replace with your actual API key
+    const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${location}&appid=${apiKey}`;
+
+    const response = await fetch(apiUrl);
+    const data = await response.json();
+
+    // Return an estimate of solar irradiance (W/m²)
+    const solarIrradiance = data.main.temp; // Simplified (use actual solar API if possible)
+    return solarIrradiance; // Return irradiance in W/m²
+}
+
+// Chart.js for visualizing energy output
+function plotEnergyChart(annualEnergy) {
+    const ctx = document.getElementById('energy-chart').getContext('2d');
+    const chart = new Chart(ctx, {
+        type: 'bar',
+        data: {
+            labels: ['Energy Output'],
+            datasets: [{
+                label: 'kWh/year',
+                data: [annualEnergy],
+                backgroundColor: ['rgba(75, 192, 192, 0.2)'],
+                borderColor: ['rgba(75, 192, 192, 1)'],
+                borderWidth: 1
+            }]
+        },
+        options: {
+            scales: {
+                y: {
+                    beginAtZero: true
+                }
+            }
+        }
+    });
+}
diff --git a/Team T3/style.css b/Team T3/style.css
@@ -0,0 +1,134 @@
+/* General Page Styling */
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+    margin: 0;
+    padding: 20px;
+}
+*{
+    margin:0px;
+    padding:0px;
+    box-sizing:border-box;
+    list-style:none;
+    text-decoration: none;
+}
+.nav-bar{
+    display:flex;
+    justify-content:space-between;
+    padding:10px 30px;
+    background-color: #72BF78;
+    position:sticky;
+    top:0;
+    z-index:1;
+}
+.logo h1{
+    color:#D3EE98;
+}
+.nav-menu ul li{
+    display:inline-flex;
+    justify-content :space-between;
+    font-weight: bold;
+    justify-items:stretch ;
+    padding: 10px 20px;
+}   
+
+.nav-menu li a{
+    color: #D3EE98;
+    transition:0.6s;
+}
+.nav-menu li a:hover{
+    color: #d39b6d;
+
+}
+
+.mainhead{
+    display:flex;
+    align-items: center;
+    justify-content: space-around;
+    background-image: url('photovoltaic-2138992_1280.jpg');
+    background-position:center;
+}
+
+
+h2 {
+    text-align: center;
+    color: #333;
+    margin-bottom: 20px;
+}
+.firstbox {
+    background-image: url('WhatsApp_Image_2024-10-25_at_16.02.22_3f93e275-removebg-preview.png');
+    background-position: cover;
+}
+.secondbox{
+    margin: 80px;
+}
+.thirdbox{
+    background-image: url('WhatsApp_Image_2024-10-25_at_16.02.59_8c662969-removebg-preview.png');
+    background-position: cover;
+    background-size: contain;
+}
+.secondbox h2{
+    background-color:#11b537;
+    color:#D3EE98;
+    font-weight:bolder;
+
+}
+/* Form Styling */
+form {
+    max-width: 400px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+input {
+    width: calc(100% - 20px);
+    padding: 10px;
+    margin-bottom: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 16px;
+}
+
+button {
+    width: 100%;
+    padding: 10px;
+    background-color: #28a745;
+    border: none;
+    border-radius: 4px;
+    color: white;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #218838;
+}
+
+/* Results Section */
+#results {
+    max-width: 400px;
+    margin: 20px auto;
+    padding: 20px;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+#results p {
+    font-size: 18px;
+    color: #333;
+}
+
+span {
+    font-weight: bold;
+    color: #007bff;
+}
+
+/* Chart Styling */
+canvas { 
+    width: 100%;
+    height: 300px;
+}