From e0c9c56978acbeaeea2e7811852a2f59e2cf16d8 Mon Sep 17 00:00:00 2001 From: Amark19 Date: Sat, 1 Nov 2025 20:56:21 +0530 Subject: [PATCH 1/4] epoch timestamp converter added --- mysite/all_urls/urls_converters.py | 3 + mysite/all_views/views_converters.py | 6 + mysite/globals.py | 1 + .../converter/epoch_timestamp_converter.html | 125 +++++++++ mysite/templates/main_index.html | 7 +- staticfiles/css/main.css | 12 + .../js/converter/epoch_timestamp_converter.js | 246 ++++++++++++++++++ 7 files changed, 397 insertions(+), 3 deletions(-) create mode 100644 mysite/templates/converter/epoch_timestamp_converter.html create mode 100644 staticfiles/js/converter/epoch_timestamp_converter.js diff --git a/mysite/all_urls/urls_converters.py b/mysite/all_urls/urls_converters.py index 537aa27..5dc7486 100644 --- a/mysite/all_urls/urls_converters.py +++ b/mysite/all_urls/urls_converters.py @@ -36,5 +36,8 @@ def urlpatterns(): # base4 to Image converter path('Conversion/Base64_to_Image_Converter/', all_views.views_converters.Base64_to_Image, name="Base64_to_Image"), + # epoch timestamp converter + path('Conversion/Epoch_Timestamp_Converter/', + all_views.views_converters.Epoch_Timestamp_Converter, name="Epoch_Timestamp_Converter"), ] return urlspatterns diff --git a/mysite/all_views/views_converters.py b/mysite/all_views/views_converters.py index 554b216..dcb7e93 100644 --- a/mysite/all_views/views_converters.py +++ b/mysite/all_views/views_converters.py @@ -119,3 +119,9 @@ def Base64_to_Image(request): link_string1, link_string2 = SideMap.arrange(11, 2, 'CC') param = {'link_string1': link_string1, 'link_string2': link_string2} return render(request, '../templates/converter/Base64_to_Image.html', param) + + +def Epoch_Timestamp_Converter(request): + link_string1, link_string2 = SideMap.arrange(12, 2, 'CC') + param = {'link_string1': link_string1, 'link_string2': link_string2} + return render(request, '../templates/converter/epoch_timestamp_converter.html', param) \ No newline at end of file diff --git a/mysite/globals.py b/mysite/globals.py index 67fb0eb..b3cff28 100644 --- a/mysite/globals.py +++ b/mysite/globals.py @@ -26,6 +26,7 @@ def urlSideMapList(): ['/Conversion/cgpa_to_percentage/', 'Cgpa to Percentage Converter', 2, 'CC', 9], ['/Conversion/Image_to_base64_Converter/', 'Image to base64 converter', 2, 'CC', 10], ['/Conversion/Base64_to_Image_Converter/', 'Base64 to Image converter', 2, 'CC', 11], + ['/Conversion/Epoch_Timestamp_Converter/', 'Epoch Timestamp Converter', 2, 'CC', 12], ['/Translator/English_to_hindi/', 'English to Hindi Translator', 3, 'AT', 0], ['/Translator/English_to_Marathi/', 'English to Marathi Translator', 3, 'AT', 1], diff --git a/mysite/templates/converter/epoch_timestamp_converter.html b/mysite/templates/converter/epoch_timestamp_converter.html new file mode 100644 index 0000000..91b9c7f --- /dev/null +++ b/mysite/templates/converter/epoch_timestamp_converter.html @@ -0,0 +1,125 @@ +{% extends 'main_index.html' %} +{% block MDesc %} + Convert epoch timestamp to IST/UTC datetime and vice versa by entering timestamp or datetime. +{% endblock %} +{% block MKW %}epoch timestamp converter,epoch to ist,epoch to utc,ist to epoch,utc to epoch,timestamp converter,unix timestamp converter{% endblock %} +{% block Mr %} + {% now "d/m/Y" %} +{% endblock %} +{% block MAut %} + Amar khamkar +{% endblock %} +{% block title %} Epoch Timestamp Converter +{% endblock %} +{% block body %} +
+
+
+
+

Epoch Timestamp to IST/UTC Converter

+
+

What is Epoch Timestamp?

+

An epoch timestamp (also known as Unix timestamp) is the number of seconds that have elapsed since January 1, 1970, 00:00:00 UTC. This is a standard way to represent time in computers and programming. The timestamp is typically a large integer value representing the number of seconds since the Unix epoch. +

+
+
+
+ + +
+
+ +
+
+ +
+
+ +
+
+ Or enter manually in format: YYYY-MM-DD HH:MM:SS + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+

How to use Epoch Timestamp Converter?

+

This converter allows you to convert between epoch timestamps and human-readable datetime formats in both IST (Indian Standard Time) and UTC (Coordinated Universal Time). +

+ To convert Epoch to DateTime: Enter the epoch timestamp (in seconds) and click Convert. The corresponding UTC and IST datetime will be displayed. +

+ To convert DateTime to Epoch: Enter the date and time in the format "YYYY-MM-DD HH:MM:SS", select the appropriate timezone (IST or UTC), and click Convert. The epoch timestamp will be displayed. +

+ Current Time: Click "Use Current Time" to automatically fill in the current timestamp and convert it. +

+
+ 1) Epoch Timestamp: 1609459200
+ UTC: 2021-01-01 00:00:00
+ IST: 2021-01-01 05:30:00

+ 2) Epoch Timestamp: 1640995200
+ UTC: 2022-01-01 00:00:00
+ IST: 2022-01-01 05:30:00

+ 3) Epoch Timestamp: 1704067200
+ UTC: 2024-01-01 00:00:00
+ IST: 2024-01-01 05:30:00
+
+
+

Applications

+

Epoch timestamps are widely used in computer systems, databases, APIs, and programming because they provide a consistent way to represent time across different timezones. They are essential for logging events, scheduling tasks, tracking user activity, and storing timestamps in databases. Converting between epoch timestamps and human-readable formats is a common task in software development and system administration. +

+
+
+
+
+

Converters

+ {% for link in link_string1 %} +
  • {{ link.1 }}
    • + {% endfor %} +
    +
    +

    Calculators

    + {% for link in link_string2 %} +
  • {{ link.1 }}
    • + {% endfor %} +
    +
    +
    +
    +{% endblock %} +{% block JS %} + +{% endblock %} + diff --git a/mysite/templates/main_index.html b/mysite/templates/main_index.html index e0b2a5d..98d84a0 100644 --- a/mysite/templates/main_index.html +++ b/mysite/templates/main_index.html @@ -96,14 +96,15 @@
  • - Binary Converter - Decimal Converter - Hexadecimal Converter Infix To postfix Converter Infix To Prefix Converter Prefix To Infix Converter Prefix To Postfix Converter Postfix To Infix Converter + Epoch Timestamp Converter + Binary Converter + Decimal Converter + Hexadecimal Converter Currency Converter Cgpa To Percentage Converter Image To Base64 Converter diff --git a/staticfiles/css/main.css b/staticfiles/css/main.css index 9a66b1e..e7cd580 100644 --- a/staticfiles/css/main.css +++ b/staticfiles/css/main.css @@ -152,3 +152,15 @@ tbody { .form-component[readonly]{ background-color: #191717; } + +input[type="date"], +input[type="time"] { + color: white; +} + +/* Change the icon color */ +input[type="date"]::-webkit-calendar-picker-indicator, +input[type="time"]::-webkit-calendar-picker-indicator { + filter: invert(1); + opacity: 1; +} \ No newline at end of file diff --git a/staticfiles/js/converter/epoch_timestamp_converter.js b/staticfiles/js/converter/epoch_timestamp_converter.js new file mode 100644 index 0000000..5370762 --- /dev/null +++ b/staticfiles/js/converter/epoch_timestamp_converter.js @@ -0,0 +1,246 @@ +const epochInput = document.getElementById('epochInput'); +const dateInput = document.getElementById('dateInput'); +const datePicker = document.getElementById('datePicker'); +const timePicker = document.getElementById('timePicker'); +const timezoneSelect = document.getElementById('timezoneSelect'); +const utcOutput = document.getElementById('utcOutput'); +const istOutput = document.getElementById('istOutput'); +const epochOutput = document.getElementById('epochOutput'); +const currentTimeBtn = document.getElementById('currentTimeBtn'); + +// IST offset: UTC+5:30 (in milliseconds) +const IST_OFFSET_MS = 5.5 * 60 * 60 * 1000; + +// Function to format date time string +function formatDateTime(date) { + const year = date.getFullYear(); + const month = String(date.getMonth() + 1).padStart(2, '0'); + const day = String(date.getDate()).padStart(2, '0'); + const hours = String(date.getHours()).padStart(2, '0'); + const minutes = String(date.getMinutes()).padStart(2, '0'); + const seconds = String(date.getSeconds()).padStart(2, '0'); + return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; +} + +// Function to convert epoch to UTC datetime +function epochToUTC(epoch) { + const date = new Date(epoch * 1000); // Convert seconds to milliseconds + return formatDateTime(date); +} + +// Function to convert epoch to IST datetime +function epochToIST(epoch) { + const date = new Date(epoch * 1000); + const istDate = new Date(date.getTime() + IST_OFFSET_MS); + return formatDateTime(istDate); +} + +// Function to convert UTC datetime to epoch +function utcToEpoch(dateTimeString) { + try { + // Parse the datetime string (YYYY-MM-DD HH:MM:SS) + const [datePart, timePart] = dateTimeString.split(' '); + const [year, month, day] = datePart.split('-').map(Number); + const [hours, minutes, seconds] = timePart.split(':').map(Number); + + const date = new Date(Date.UTC(year, month - 1, day, hours, minutes, seconds)); + return Math.floor(date.getTime() / 1000); + } catch (e) { + return null; + } +} + +// Function to convert IST datetime to epoch +function istToEpoch(dateTimeString) { + try { + // Parse the datetime string (YYYY-MM-DD HH:MM:SS) + const [datePart, timePart] = dateTimeString.split(' '); + const [year, month, day] = datePart.split('-').map(Number); + const [hours, minutes, seconds] = timePart.split(':').map(Number); + + // Create date in local time (IST) + const date = new Date(year, month - 1, day, hours, minutes, seconds); + // Convert to UTC epoch by subtracting IST offset + const utcTime = date.getTime() - IST_OFFSET_MS; + return Math.floor(utcTime / 1000); + } catch (e) { + return null; + } +} + +// Function to parse datetime string +function parseDateTime(dateTimeString) { + // Support multiple formats: YYYY-MM-DD HH:MM:SS or YYYY-MM-DD + const formats = [ + /^(\d{4})-(\d{2})-(\d{2})\s+(\d{2}):(\d{2}):(\d{2})$/, + /^(\d{4})-(\d{2})-(\d{2})\s+(\d{2}):(\d{2})$/, + /^(\d{4})-(\d{2})-(\d{2})$/ + ]; + + for (let format of formats) { + const match = dateTimeString.match(format); + if (match) { + const year = parseInt(match[1]); + const month = parseInt(match[2]) - 1; + const day = parseInt(match[3]); + const hours = match[4] ? parseInt(match[4]) : 0; + const minutes = match[5] ? parseInt(match[5]) : 0; + const seconds = match[6] ? parseInt(match[6]) : 0; + return { year, month, day, hours, minutes, seconds }; + } + } + return null; +} + +// Function to get datetime string from date/time pickers or manual input +function getDateTimeString() { + // Check if date and time pickers have values + if (datePicker.value && timePicker.value) { + // Combine date and time pickers + const datePart = datePicker.value; // Format: YYYY-MM-DD + const timePart = timePicker.value; // Format: HH:MM or HH:MM:SS + // Ensure time has seconds + const timeParts = timePart.split(':'); + if (timeParts.length === 2) { + return `${datePart} ${timePart}:00`; + } + return `${datePart} ${timePart}`; + } + // Fall back to manual text input + return dateInput.value.trim(); +} + +// Sync date/time pickers with manual input (optional helper) +function syncPickersFromManualInput() { + const manualValue = dateInput.value.trim(); + if (manualValue) { + const parsed = parseDateTime(manualValue); + if (parsed) { + const year = parsed.year; + const month = String(parsed.month + 1).padStart(2, '0'); + const day = String(parsed.day).padStart(2, '0'); + datePicker.value = `${year}-${month}-${day}`; + + const hours = String(parsed.hours).padStart(2, '0'); + const minutes = String(parsed.minutes).padStart(2, '0'); + const seconds = String(parsed.seconds).padStart(2, '0'); + timePicker.value = `${hours}:${minutes}:${seconds}`; + } + } +} + +// Sync manual input from date/time pickers +function syncManualInputFromPickers() { + if (datePicker.value && timePicker.value) { + const datePart = datePicker.value; + const timePart = timePicker.value; + const timeParts = timePart.split(':'); + if (timeParts.length === 2) { + dateInput.value = `${datePart} ${timePart}:00`; + } else { + dateInput.value = `${datePart} ${timePart}`; + } + } +} + +// Event listeners for date/time pickers +datePicker.addEventListener('change', syncManualInputFromPickers); +timePicker.addEventListener('change', syncManualInputFromPickers); +dateInput.addEventListener('change', syncPickersFromManualInput); + +// Main conversion function +$('.con').click(function (e) { + e.preventDefault(); + + const epochValue = epochInput.value.trim(); + const dateValue = getDateTimeString(); + const timezone = timezoneSelect.value; + + // Clear outputs + utcOutput.value = ''; + istOutput.value = ''; + epochOutput.value = ''; + + if (epochValue && dateValue) { + // If both are provided, prioritize epoch + convertFromEpoch(epochValue); + } else if (epochValue) { + // Convert from epoch to datetime + convertFromEpoch(epochValue); + } else if (dateValue) { + // Convert from datetime to epoch + convertFromDateTime(dateValue, timezone); + } else { + utcOutput.value = 'Please enter either epoch timestamp or datetime'; + istOutput.value = ''; + epochOutput.value = ''; + } +}); + +function convertFromEpoch(epochStr) { + const epoch = parseFloat(epochStr); + + if (isNaN(epoch) || epoch < 0) { + utcOutput.value = 'Invalid epoch timestamp'; + istOutput.value = ''; + epochOutput.value = ''; + return; + } + + const utcDateTime = epochToUTC(epoch); + const istDateTime = epochToIST(epoch); + + utcOutput.value = utcDateTime; + istOutput.value = istDateTime; + epochOutput.value = Math.floor(epoch).toString(); +} + +function convertFromDateTime(dateTimeStr, timezone) { + const parsed = parseDateTime(dateTimeStr); + + if (!parsed) { + utcOutput.value = 'Invalid datetime format. Use YYYY-MM-DD HH:MM:SS'; + istOutput.value = ''; + epochOutput.value = ''; + return; + } + + let epoch; + + if (timezone === 'IST') { + epoch = istToEpoch(dateTimeStr); + } else { + epoch = utcToEpoch(dateTimeStr); + } + + if (epoch === null || isNaN(epoch)) { + utcOutput.value = 'Error converting datetime to epoch'; + istOutput.value = ''; + epochOutput.value = ''; + return; + } + + // Display both UTC and IST + const utcDateTime = epochToUTC(epoch); + const istDateTime = epochToIST(epoch); + + utcOutput.value = utcDateTime; + istOutput.value = istDateTime; + epochOutput.value = epoch.toString(); + + // Also update epoch input for reference + epochInput.value = epoch.toString(); +} + +// Current time button +currentTimeBtn.addEventListener('click', function(e) { + e.preventDefault(); + const now = new Date(); + const currentEpoch = Math.floor(now.getTime() / 1000); + + epochInput.value = currentEpoch.toString(); + dateInput.value = ''; + + convertFromEpoch(currentEpoch.toString()); +}); + From ce28e474db7bbb389771f88a92e6db4ba3e30db2 Mon Sep 17 00:00:00 2001 From: Amark19 Date: Sun, 2 Nov 2025 01:23:11 +0530 Subject: [PATCH 2/4] added ist/utc converter --- mysite/all_urls/urls_converters.py | 3 + mysite/all_views/views_converters.py | 8 +- mysite/globals.py | 1 + .../converter/ist_utc_converter.html | 119 +++++++++ mysite/templates/main_index.html | 1 + staticfiles/js/converter/ist_utc_converter.js | 236 ++++++++++++++++++ 6 files changed, 367 insertions(+), 1 deletion(-) create mode 100644 mysite/templates/converter/ist_utc_converter.html create mode 100644 staticfiles/js/converter/ist_utc_converter.js diff --git a/mysite/all_urls/urls_converters.py b/mysite/all_urls/urls_converters.py index 5dc7486..360fe79 100644 --- a/mysite/all_urls/urls_converters.py +++ b/mysite/all_urls/urls_converters.py @@ -39,5 +39,8 @@ def urlpatterns(): # epoch timestamp converter path('Conversion/Epoch_Timestamp_Converter/', all_views.views_converters.Epoch_Timestamp_Converter, name="Epoch_Timestamp_Converter"), + # IST to UTC converter + path('Conversion/IST_UTC_Converter/', + all_views.views_converters.IST_UTC_Converter, name="IST_UTC_Converter"), ] return urlspatterns diff --git a/mysite/all_views/views_converters.py b/mysite/all_views/views_converters.py index dcb7e93..0041ffd 100644 --- a/mysite/all_views/views_converters.py +++ b/mysite/all_views/views_converters.py @@ -124,4 +124,10 @@ def Base64_to_Image(request): def Epoch_Timestamp_Converter(request): link_string1, link_string2 = SideMap.arrange(12, 2, 'CC') param = {'link_string1': link_string1, 'link_string2': link_string2} - return render(request, '../templates/converter/epoch_timestamp_converter.html', param) \ No newline at end of file + return render(request, '../templates/converter/epoch_timestamp_converter.html', param) + + +def IST_UTC_Converter(request): + link_string1, link_string2 = SideMap.arrange(13, 2, 'CC') + param = {'link_string1': link_string1, 'link_string2': link_string2} + return render(request, '../templates/converter/ist_utc_converter.html', param) \ No newline at end of file diff --git a/mysite/globals.py b/mysite/globals.py index b3cff28..a992469 100644 --- a/mysite/globals.py +++ b/mysite/globals.py @@ -27,6 +27,7 @@ def urlSideMapList(): ['/Conversion/Image_to_base64_Converter/', 'Image to base64 converter', 2, 'CC', 10], ['/Conversion/Base64_to_Image_Converter/', 'Base64 to Image converter', 2, 'CC', 11], ['/Conversion/Epoch_Timestamp_Converter/', 'Epoch Timestamp Converter', 2, 'CC', 12], + ['/Conversion/IST_UTC_Converter/', 'IST to UTC Converter', 2, 'CC', 13], ['/Translator/English_to_hindi/', 'English to Hindi Translator', 3, 'AT', 0], ['/Translator/English_to_Marathi/', 'English to Marathi Translator', 3, 'AT', 1], diff --git a/mysite/templates/converter/ist_utc_converter.html b/mysite/templates/converter/ist_utc_converter.html new file mode 100644 index 0000000..29a8658 --- /dev/null +++ b/mysite/templates/converter/ist_utc_converter.html @@ -0,0 +1,119 @@ +{% extends 'main_index.html' %} +{% block MDesc %} + Convert IST (Indian Standard Time) to UTC (Coordinated Universal Time) and vice versa. +{% endblock %} +{% block MKW %}ist to utc converter,utc to ist converter,ist utc time converter,timezone converter,indian standard time converter{% endblock %} +{% block Mr %} + {% now "d/m/Y" %} +{% endblock %} +{% block MAut %} + Amar khamkar +{% endblock %} +{% block title %} IST/UTC Converter +{% endblock %} +{% block body %} +
    +
    +
    +
    +

    IST/UTC Converter

    +
    +

    What is IST and UTC?

    +

    + IST (Indian Standard Time) is the time zone used in India. It is UTC+5:30, meaning it is 5 hours and 30 minutes ahead of Coordinated Universal Time. +

    + UTC (Coordinated Universal Time) is the primary time standard by which the world regulates clocks and time. It is the successor to Greenwich Mean Time (GMT) and serves as the basis for civil time worldwide. +

    +
    +
    + +
    +

    IST (Indian Standard Time, UTC+5:30)

    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    + + +
    +

    UTC (Coordinated Universal Time)

    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    + +
    +
    +
    +

    How to use IST/UTC Converter?

    +

    This converter allows you to convert between IST (Indian Standard Time) and UTC (Coordinated Universal Time) in real-time. +

    + Real-time Conversion: Simply modify the date or time in either the IST or UTC section, and the corresponding timezone will update automatically. Changes are instant and bidirectional. +

    + Date & Time Pickers: Use the date and time pickers to select or modify the time. Any change in IST will automatically update UTC, and vice versa. +

    + Current Time: Click "Use Current Time" to set both timezones to the current time. +

    + Note: IST is always UTC+5:30, meaning IST is 5 hours and 30 minutes ahead of UTC. +

    +
    + 1) IST: 2024-01-01 12:00:00
    + UTC: 2024-01-01 06:30:00

    + 2) IST: 2024-06-15 18:30:00
    + UTC: 2024-06-15 13:00:00

    + 3) UTC: 2024-01-01 00:00:00
    + IST: 2024-01-01 05:30:00
    +
    +
    +

    Applications

    +

    Converting between IST and UTC is essential for international communication, scheduling meetings across time zones, coordinating global events, and working with distributed teams. This converter is particularly useful for developers, businesses, and individuals who need to work with both Indian Standard Time and Coordinated Universal Time. +

    +
    +
    +
    +
    +

    Converters

    + {% for link in link_string1 %} +
  • {{ link.1 }}
    • + {% endfor %} + +
    +

    Calculators

    + {% for link in link_string2 %} +
  • {{ link.1 }}
    • + {% endfor %} +
    + + + +{% endblock %} +{% block JS %} + +{% endblock %} + diff --git a/mysite/templates/main_index.html b/mysite/templates/main_index.html index 98d84a0..5a86ee5 100644 --- a/mysite/templates/main_index.html +++ b/mysite/templates/main_index.html @@ -102,6 +102,7 @@ Prefix To Postfix Converter Postfix To Infix Converter Epoch Timestamp Converter + Ist Utc Converter Binary Converter Decimal Converter Hexadecimal Converter diff --git a/staticfiles/js/converter/ist_utc_converter.js b/staticfiles/js/converter/ist_utc_converter.js new file mode 100644 index 0000000..01e446e --- /dev/null +++ b/staticfiles/js/converter/ist_utc_converter.js @@ -0,0 +1,236 @@ +const istDatePicker = document.getElementById('istDatePicker'); +const istTimePicker = document.getElementById('istTimePicker'); +const utcDatePicker = document.getElementById('utcDatePicker'); +const utcTimePicker = document.getElementById('utcTimePicker'); +const currentTimeBtn = document.getElementById('currentTimeBtn'); + +// IST offset: UTC+5:30 (in milliseconds) +const IST_OFFSET_MS = 5.5 * 60 * 60 * 1000; + +// Flag to prevent infinite loops during updates +let isUpdating = false; + +// Function to format date time string +function formatDateTime(date) { + const year = date.getFullYear(); + const month = String(date.getMonth() + 1).padStart(2, '0'); + const day = String(date.getDate()).padStart(2, '0'); + const hours = String(date.getHours()).padStart(2, '0'); + const minutes = String(date.getMinutes()).padStart(2, '0'); + const seconds = String(date.getSeconds()).padStart(2, '0'); + return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; +} + +// Function to get IST datetime from pickers +function getISTDateTime() { + if (!istDatePicker.value || !istTimePicker.value) { + return null; + } + const datePart = istDatePicker.value; // YYYY-MM-DD + const timePart = istTimePicker.value; // HH:MM + // Always add seconds as 00 since we removed seconds from time picker + return `${datePart} ${timePart}:00`; +} + +// Function to get UTC datetime from pickers +function getUTCDateTime() { + if (!utcDatePicker.value || !utcTimePicker.value) { + return null; + } + const datePart = utcDatePicker.value; // YYYY-MM-DD + const timePart = utcTimePicker.value; // HH:MM + // Always add seconds as 00 since we removed seconds from time picker + return `${datePart} ${timePart}:00`; +} + +// Function to parse datetime string +function parseDateTime(dateTimeString) { + if (!dateTimeString) return null; + + const formats = [ + /^(\d{4})-(\d{2})-(\d{2})\s+(\d{2}):(\d{2}):(\d{2})$/, + /^(\d{4})-(\d{2})-(\d{2})\s+(\d{2}):(\d{2})$/ + ]; + + for (let format of formats) { + const match = dateTimeString.match(format); + if (match) { + const year = parseInt(match[1]); + const month = parseInt(match[2]) - 1; + const day = parseInt(match[3]); + const hours = parseInt(match[4]) || 0; + const minutes = parseInt(match[5]) || 0; + const seconds = parseInt(match[6]) || 0; + return { year, month, day, hours, minutes, seconds }; + } + } + return null; +} + +// Function to convert IST to UTC +function istToUTC(dateTimeString) { + try { + const parsed = parseDateTime(dateTimeString); + if (!parsed) return null; + + // Create date treating input as IST (local time in IST context) + // Since IST is UTC+5:30, we need to subtract the offset + const istDate = new Date(parsed.year, parsed.month, parsed.day, parsed.hours, parsed.minutes, parsed.seconds); + const utcDate = new Date(istDate.getTime() - IST_OFFSET_MS); + return formatDateTime(utcDate); + } catch (e) { + return null; + } +} + +// Function to convert UTC to IST +function utcToIST(dateTimeString) { + try { + const parsed = parseDateTime(dateTimeString); + if (!parsed) return null; + + // Create date in UTC + const utcDate = new Date(Date.UTC(parsed.year, parsed.month, parsed.day, parsed.hours, parsed.minutes, parsed.seconds)); + // Add IST offset + const istDate = new Date(utcDate.getTime() + IST_OFFSET_MS); + return formatDateTime(istDate); + } catch (e) { + return null; + } +} + +// Update UTC pickers from IST +function updateUTCFromIST() { + if (isUpdating) return; + + const istDateTime = getISTDateTime(); + if (!istDateTime) return; + + isUpdating = true; + + const utcDateTime = istToUTC(istDateTime); + if (utcDateTime) { + const parsed = parseDateTime(utcDateTime); + if (parsed) { + const year = parsed.year; + const month = String(parsed.month + 1).padStart(2, '0'); + const day = String(parsed.day).padStart(2, '0'); + utcDatePicker.value = `${year}-${month}-${day}`; + + const hours = String(parsed.hours).padStart(2, '0'); + const minutes = String(parsed.minutes).padStart(2, '0'); + // Only set hours and minutes, no seconds + utcTimePicker.value = `${hours}:${minutes}`; + } + } + + isUpdating = false; +} + +// Update IST pickers from UTC +function updateISTFromUTC() { + if (isUpdating) return; + + const utcDateTime = getUTCDateTime(); + if (!utcDateTime) return; + + isUpdating = true; + + const istDateTime = utcToIST(utcDateTime); + if (istDateTime) { + const parsed = parseDateTime(istDateTime); + if (parsed) { + const year = parsed.year; + const month = String(parsed.month + 1).padStart(2, '0'); + const day = String(parsed.day).padStart(2, '0'); + istDatePicker.value = `${year}-${month}-${day}`; + + const hours = String(parsed.hours).padStart(2, '0'); + const minutes = String(parsed.minutes).padStart(2, '0'); + // Only set hours and minutes, no seconds + istTimePicker.value = `${hours}:${minutes}`; + } + } + + isUpdating = false; +} + +// Event listeners for IST pickers +istDatePicker.addEventListener('change', function() { + updateUTCFromIST(); +}); + +istTimePicker.addEventListener('change', function() { + updateUTCFromIST(); +}); + +istDatePicker.addEventListener('input', function() { + updateUTCFromIST(); +}); + +istTimePicker.addEventListener('input', function() { + updateUTCFromIST(); +}); + +// Event listeners for UTC pickers +utcDatePicker.addEventListener('change', function() { + updateISTFromUTC(); +}); + +utcTimePicker.addEventListener('change', function() { + updateISTFromUTC(); +}); + +utcDatePicker.addEventListener('input', function() { + updateISTFromUTC(); +}); + +utcTimePicker.addEventListener('input', function() { + updateISTFromUTC(); +}); + +// Current time button - set to current IST time +currentTimeBtn.addEventListener('click', function(e) { + e.preventDefault(); + isUpdating = true; + + // Get current time and convert to IST + // Since we want to show current IST time, we get local time and treat it as IST + const now = new Date(); + + // Set IST pickers + const year = now.getFullYear(); + const month = String(now.getMonth() + 1).padStart(2, '0'); + const day = String(now.getDate()).padStart(2, '0'); + istDatePicker.value = `${year}-${month}-${day}`; + + const hours = String(now.getHours()).padStart(2, '0'); + const minutes = String(now.getMinutes()).padStart(2, '0'); + // Only set hours and minutes, no seconds + istTimePicker.value = `${hours}:${minutes}`; + + // Update UTC from IST + isUpdating = false; + updateUTCFromIST(); +}); + +// Initialize with current time on page load +window.addEventListener('DOMContentLoaded', function() { + isUpdating = true; + + const now = new Date(); + + // Set IST pickers to current time + const year = now.getFullYear(); + const month = String(now.getMonth() + 1).padStart(2, '0'); + const day = String(now.getDate()).padStart(2, '0'); + istDatePicker.value = `${year}-${month}-${day}`; + + const hours = String(now.getHours()).padStart(2, '0'); + const minutes = String(now.getMinutes()).padStart(2, '0'); + // Only set hours and minutes, no seconds + istTimePicker.value = `${hours}:${minutes}`; + + isUpdating = false; + updateUTCFromIST(); +}); From 11fd85da3cd0b481a69c5344f9a1a0fab5be68da Mon Sep 17 00:00:00 2001 From: Amark19 Date: Sun, 2 Nov 2025 23:30:30 +0530 Subject: [PATCH 3/4] Added sip calculator --- mysite/all_urls/urls_calculators.py | 3 + mysite/all_views/views_calculators.py | 6 + mysite/globals.py | 1 + .../templates/calculator/SIP_calculator.html | 294 ++++++++++++++++++ mysite/templates/main_index.html | 1 + staticfiles/js/calculator/SIP_calculator.js | 259 +++++++++++++++ 6 files changed, 564 insertions(+) create mode 100644 mysite/templates/calculator/SIP_calculator.html create mode 100644 staticfiles/js/calculator/SIP_calculator.js diff --git a/mysite/all_urls/urls_calculators.py b/mysite/all_urls/urls_calculators.py index 25fe9e5..d95b61c 100644 --- a/mysite/all_urls/urls_calculators.py +++ b/mysite/all_urls/urls_calculators.py @@ -30,5 +30,8 @@ def urlpatterns(): # hcf and lcm calculator path('Calculator/HCF-LCM-calculator/', all_views.views_calculators.HCF_LCM_calculator, name="HCF_LCM_calculator"), + # SIP calculator + path('Calculator/SIP-calculator/', + all_views.views_calculators.SIP_calculator, name="SIP_calculator"), ] return urlpatterns diff --git a/mysite/all_views/views_calculators.py b/mysite/all_views/views_calculators.py index 0d23886..3ed82ff 100644 --- a/mysite/all_views/views_calculators.py +++ b/mysite/all_views/views_calculators.py @@ -72,3 +72,9 @@ def HCF_LCM_calculator(request): link_string1, link_string2 = SideMap.arrange(7, 4, 'CC') param = {'link_string1': link_string1, 'link_string2': link_string2} return render(request, '../templates/calculator/HCF_LCM_calculator.html', param) + + +def SIP_calculator(request): + link_string1, link_string2 = SideMap.arrange(8, 4, 'CC') + param = {'link_string1': link_string1, 'link_string2': link_string2} + return render(request, '../templates/calculator/SIP_calculator.html', param) \ No newline at end of file diff --git a/mysite/globals.py b/mysite/globals.py index a992469..2f4f2b4 100644 --- a/mysite/globals.py +++ b/mysite/globals.py @@ -53,5 +53,6 @@ def urlSideMapList(): ['/Calculator/Material-weight-calculator/', 'Material weight Calculator', 4, 'CC', 5], ['/Calculator/Linear-regression-calculator/', 'Linear Regression Calculator', 4, 'CC', 6], ['/Calculator/HCF-LCM-calculator/', 'Hcf Lcm calculator', 4, 'CC', 7], + ['/Calculator/SIP-calculator/', 'SIP Calculator', 4, 'CC', 8], ] return urls diff --git a/mysite/templates/calculator/SIP_calculator.html b/mysite/templates/calculator/SIP_calculator.html new file mode 100644 index 0000000..cd345b6 --- /dev/null +++ b/mysite/templates/calculator/SIP_calculator.html @@ -0,0 +1,294 @@ +{% extends 'main_index.html' %} +{% block MDesc %} + Calculate SIP and Lumpsum returns with interactive sliders. Estimate your wealth creation through systematic investment plans in mutual funds. +{% endblock %} +{% block MKW %}SIP calculator,systematic investment plan calculator,lumpsum calculator,mutual fund calculator,sip returns calculator{% endblock %} +{% block Mr %} + {% now "d/m/Y" %} +{% endblock %} +{% block MAut %} + Amar khamkar +{% endblock %} +{% block title %} SIP Calculator +{% endblock %} +{% block body %} + + +
    +
    +
    +
    +

    SIP Calculator

    +
    + + +
    + + +
    + + +
    +
    + + +
    +
    +
    + +
    +
    + +
    + + +
    +
    +
    + +
    +
    + +
    + + +
    +
    +
    + +
    +
    +
    + + + + + +
    +
    +
    Invested amount
    +
    ₹0
    +
    +
    +
    Est. returns
    +
    ₹0
    +
    +
    +
    Total value
    +
    ₹0
    +
    +
    + +
    +

    About SIP & Lumpsum

    +

    + SIP (Systematic Investment Plan) allows you to invest a fixed amount regularly, benefiting from rupee cost averaging and compounding. +

    + Lumpsum is a one-time investment where you invest a large amount at once, which can potentially grow significantly over time with compounding. +

    +
    + SIP Formula: M = P × ([1 + i]^n – 1) / i × (1 + i)
    + Lumpsum Formula: A = P × (1 + r)^n
    + Where P = Principal, i/r = Rate, n = Time period +
    +
    +
    +
    +
    +

    Calculators

    + {% for link in link_string1 %} +
  • {{ link.1 }}
    • + {% endfor %} +
    +
    +

    Converters

    + {% for link in link_string2 %} +
  • {{ link.1 }}
    • + {% endfor %} +
    +
    +
    +
    +{% endblock %} +{% block JS %} + + +{% endblock %} diff --git a/mysite/templates/main_index.html b/mysite/templates/main_index.html index 5a86ee5..d78111d 100644 --- a/mysite/templates/main_index.html +++ b/mysite/templates/main_index.html @@ -123,6 +123,7 @@ Material Weight Calculator Linear regression Calculator Hcf Lcm Calculator + SIP calculator diff --git a/staticfiles/js/calculator/SIP_calculator.js b/staticfiles/js/calculator/SIP_calculator.js new file mode 100644 index 0000000..cd63908 --- /dev/null +++ b/staticfiles/js/calculator/SIP_calculator.js @@ -0,0 +1,259 @@ +let sipChart = null; +let currentMode = 'SIP'; // 'SIP' or 'LUMPSUM' + +// Format currency in Indian format +function formatCurrency(amount) { + if (!amount || isNaN(amount)) return '₹ 0'; + return '₹ ' + Math.round(amount).toLocaleString('en-IN'); +} + +// Format percentage +function formatPercentage(value) { + return value.toFixed(1) + '%'; +} + +// Format years +function formatYears(value) { + return value + ' Yr'; +} + +// Update slider fill (visual indicator) +function updateSliderFill(sliderId, fillId) { + const slider = document.getElementById(sliderId); + const fill = document.getElementById(fillId); + if (slider && fill) { + const min = parseFloat(slider.min); + const max = parseFloat(slider.max); + const value = parseFloat(slider.value); + const percentage = ((value - min) / (max - min)) * 100; + fill.style.width = percentage + '%'; + } +} + +// Calculate monthly rate of return from annual return +function getMonthlyRate(annualReturn) { + return Math.pow(1 + annualReturn / 100, 1 / 12) - 1; +} + +// Calculate SIP +function calculateSIP(monthlyInvestment, annualReturn, years) { + const monthlyRate = getMonthlyRate(annualReturn); + const totalMonths = years * 12; + + const totalInvested = monthlyInvestment * totalMonths; + let totalValue = 0; + + if (monthlyRate > 0) { + const factor = (Math.pow(1 + monthlyRate, totalMonths) - 1) / monthlyRate; + totalValue = monthlyInvestment * factor * (1 + monthlyRate); + } else { + totalValue = totalInvested; + } + + const estimatedReturns = totalValue - totalInvested; + + return { + totalInvested: totalInvested, + estimatedReturns: estimatedReturns, + totalValue: totalValue + }; +} + +// Calculate Lumpsum +function calculateLumpsum(principal, annualReturn, years) { + // A = P × (1 + r)^n + const totalInvested = principal; + const totalValue = principal * Math.pow(1 + annualReturn / 100, years); + const estimatedReturns = totalValue - totalInvested; + + return { + totalInvested: totalInvested, + estimatedReturns: estimatedReturns, + totalValue: totalValue + }; +} + +// Update results display +function updateResults() { + let result; + + if (currentMode === 'SIP') { + const monthlyInvestment = parseFloat(document.getElementById('monthlyInvestment').value); + const annualReturn = parseFloat(document.getElementById('expectedReturn').value); + const years = parseInt(document.getElementById('timePeriod').value); + + result = calculateSIP(monthlyInvestment, annualReturn, years); + } else { + const lumpsumAmount = parseFloat(document.getElementById('lumpsumAmount').value); + const annualReturn = parseFloat(document.getElementById('lumpsumReturn').value); + const years = parseInt(document.getElementById('lumpsumPeriod').value); + + result = calculateLumpsum(lumpsumAmount, annualReturn, years); + } + + // Update display + document.getElementById('investedAmount').textContent = formatCurrency(result.totalInvested); + document.getElementById('estimatedReturns').textContent = formatCurrency(result.estimatedReturns); + document.getElementById('totalValue').textContent = formatCurrency(result.totalValue); + + // Update chart if exists + if (document.getElementById('sipChart')) { + updateChart(result.totalInvested, result.estimatedReturns); + } +} + +// Update chart +function updateChart(invested, returns) { + const ctx = document.getElementById('sipChart'); + if (!ctx) return; + + if (sipChart) { + sipChart.destroy(); + } + + sipChart = new Chart(ctx, { + type: 'pie', + data: { + labels: ['Invested Amount', 'Estimated Returns'], + datasets: [{ + data: [invested, returns], + backgroundColor: [ + 'rgba(40, 167, 69, 0.8)', + 'rgba(23, 162, 184, 0.8)' + ], + borderColor: [ + 'rgba(40, 167, 69, 1)', + 'rgba(23, 162, 184, 1)' + ], + borderWidth: 2 + }] + }, + options: { + responsive: true, + maintainAspectRatio: true, + plugins: { + legend: { + position: 'bottom', + labels: { + color: '#ffffff' + } + } + } + } + }); +} + +// Parse value from display string (remove currency/percentage symbols) +function parseDisplayValue(displayValue, type) { + if (!displayValue) return 0; + let cleanValue = displayValue.toString().replace(/[₹,\s%Yr]/g, ''); + cleanValue = cleanValue.trim(); + const numValue = parseFloat(cleanValue); + return isNaN(numValue) ? 0 : numValue; +} + +// Update display values and slider fills +function updateDisplays() { + if (currentMode === 'SIP') { + const monthlyInvestment = parseFloat(document.getElementById('monthlyInvestment').value); + const annualReturn = parseFloat(document.getElementById('expectedReturn').value); + const years = parseInt(document.getElementById('timePeriod').value); + + document.getElementById('monthlyInvestmentDisplay').value = formatCurrency(monthlyInvestment); + document.getElementById('expectedReturnDisplay').value = formatPercentage(annualReturn); + document.getElementById('timePeriodDisplay').value = formatYears(years); + + updateSliderFill('monthlyInvestment', 'monthlyInvestmentFill'); + updateSliderFill('expectedReturn', 'expectedReturnFill'); + updateSliderFill('timePeriod', 'timePeriodFill'); + } else { + const lumpsumAmount = parseFloat(document.getElementById('lumpsumAmount').value); + const annualReturn = parseFloat(document.getElementById('lumpsumReturn').value); + const years = parseInt(document.getElementById('lumpsumPeriod').value); + + document.getElementById('lumpsumAmountDisplay').value = formatCurrency(lumpsumAmount); + document.getElementById('lumpsumReturnDisplay').value = formatPercentage(annualReturn); + document.getElementById('lumpsumPeriodDisplay').value = formatYears(years); + + updateSliderFill('lumpsumAmount', 'lumpsumAmountFill'); + updateSliderFill('lumpsumReturn', 'lumpsumReturnFill'); + updateSliderFill('lumpsumPeriod', 'lumpsumPeriodFill'); + } + + updateResults(); +} + +// Update sliders from display inputs +function updateFromDisplay(displayId, sliderId, type) { + const display = document.getElementById(displayId); + const slider = document.getElementById(sliderId); + + if (!display || !slider) return; + + let value = parseDisplayValue(display.value, type); + const min = parseFloat(slider.min); + const max = parseFloat(slider.max); + + // Clamp value to slider range + value = Math.max(min, Math.min(max, value)); + + // Update slider + slider.value = value; + updateDisplays(); +} + +// Toggle between SIP and Lumpsum +document.getElementById('sipToggle').addEventListener('click', function() { + currentMode = 'SIP'; + document.getElementById('sipToggle').classList.add('active'); + document.getElementById('lumpsumToggle').classList.remove('active'); + document.getElementById('sipInputs').classList.remove('hidden'); + document.getElementById('lumpsumInputs').classList.add('hidden'); + updateDisplays(); +}); + +document.getElementById('lumpsumToggle').addEventListener('click', function() { + currentMode = 'LUMPSUM'; + document.getElementById('lumpsumToggle').classList.add('active'); + document.getElementById('sipToggle').classList.remove('active'); + document.getElementById('lumpsumInputs').classList.remove('hidden'); + document.getElementById('sipInputs').classList.add('hidden'); + updateDisplays(); +}); + +// SIP sliders event listeners +document.getElementById('monthlyInvestment').addEventListener('input', updateDisplays); +document.getElementById('expectedReturn').addEventListener('input', updateDisplays); +document.getElementById('timePeriod').addEventListener('input', updateDisplays); + +// Lumpsum sliders event listeners +document.getElementById('lumpsumAmount').addEventListener('input', updateDisplays); +document.getElementById('lumpsumReturn').addEventListener('input', updateDisplays); +document.getElementById('lumpsumPeriod').addEventListener('input', updateDisplays); + +// SIP display input event listeners (editable fields) +document.getElementById('monthlyInvestmentDisplay').addEventListener('blur', function() { + updateFromDisplay('monthlyInvestmentDisplay', 'monthlyInvestment', 'currency'); +}); +document.getElementById('expectedReturnDisplay').addEventListener('blur', function() { + updateFromDisplay('expectedReturnDisplay', 'expectedReturn', 'percentage'); +}); +document.getElementById('timePeriodDisplay').addEventListener('blur', function() { + updateFromDisplay('timePeriodDisplay', 'timePeriod', 'years'); +}); + +// Lumpsum display input event listeners (editable fields) +document.getElementById('lumpsumAmountDisplay').addEventListener('blur', function() { + updateFromDisplay('lumpsumAmountDisplay', 'lumpsumAmount', 'currency'); +}); +document.getElementById('lumpsumReturnDisplay').addEventListener('blur', function() { + updateFromDisplay('lumpsumReturnDisplay', 'lumpsumReturn', 'percentage'); +}); +document.getElementById('lumpsumPeriodDisplay').addEventListener('blur', function() { + updateFromDisplay('lumpsumPeriodDisplay', 'lumpsumPeriod', 'years'); +}); + +// Initialize on page load +document.addEventListener('DOMContentLoaded', function() { + updateDisplays(); +}); From 36de9d0f090d470401605fb955d2fb84fa44d35b Mon Sep 17 00:00:00 2001 From: Amark19 Date: Sun, 2 Nov 2025 23:45:36 +0530 Subject: [PATCH 4/4] removed pie chart code --- .../templates/calculator/SIP_calculator.html | 1 - staticfiles/js/calculator/SIP_calculator.js | 47 ------------------- 2 files changed, 48 deletions(-) diff --git a/mysite/templates/calculator/SIP_calculator.html b/mysite/templates/calculator/SIP_calculator.html index cd345b6..702bbce 100644 --- a/mysite/templates/calculator/SIP_calculator.html +++ b/mysite/templates/calculator/SIP_calculator.html @@ -289,6 +289,5 @@

    Converters

    {% endblock %} {% block JS %} - {% endblock %} diff --git a/staticfiles/js/calculator/SIP_calculator.js b/staticfiles/js/calculator/SIP_calculator.js index cd63908..9520e83 100644 --- a/staticfiles/js/calculator/SIP_calculator.js +++ b/staticfiles/js/calculator/SIP_calculator.js @@ -1,4 +1,3 @@ -let sipChart = null; let currentMode = 'SIP'; // 'SIP' or 'LUMPSUM' // Format currency in Indian format @@ -95,52 +94,6 @@ function updateResults() { document.getElementById('investedAmount').textContent = formatCurrency(result.totalInvested); document.getElementById('estimatedReturns').textContent = formatCurrency(result.estimatedReturns); document.getElementById('totalValue').textContent = formatCurrency(result.totalValue); - - // Update chart if exists - if (document.getElementById('sipChart')) { - updateChart(result.totalInvested, result.estimatedReturns); - } -} - -// Update chart -function updateChart(invested, returns) { - const ctx = document.getElementById('sipChart'); - if (!ctx) return; - - if (sipChart) { - sipChart.destroy(); - } - - sipChart = new Chart(ctx, { - type: 'pie', - data: { - labels: ['Invested Amount', 'Estimated Returns'], - datasets: [{ - data: [invested, returns], - backgroundColor: [ - 'rgba(40, 167, 69, 0.8)', - 'rgba(23, 162, 184, 0.8)' - ], - borderColor: [ - 'rgba(40, 167, 69, 1)', - 'rgba(23, 162, 184, 1)' - ], - borderWidth: 2 - }] - }, - options: { - responsive: true, - maintainAspectRatio: true, - plugins: { - legend: { - position: 'bottom', - labels: { - color: '#ffffff' - } - } - } - } - }); } // Parse value from display string (remove currency/percentage symbols)