Rakesh9100 · Rakesh9100 · Jun 14, 2024 · Jun 7, 2024 · Jun 12, 2024 · Jun 12, 2024
diff --git a/Calculators/Frames-to-Timecode-Calculator/README.md b/Calculators/Frames-to-Timecode-Calculator/README.md
@@ -0,0 +1,15 @@
+# <p align="center">Frames to Timecode Calculator</p>
+
+## Description :-
+
+This frames to timecode calculator helps you convert frames to timecode in a recorded video. Thanks to this tool, you will be able to quickly identify the correct frame or check how long your video will be.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
+
+![image](/Calculators/Frames-to-Timecode-Calculator/assets/image.png)
diff --git a/Calculators/Frames-to-Timecode-Calculator/assets/image.png b/Calculators/Frames-to-Timecode-Calculator/assets/image.png
diff --git a/Calculators/Frames-to-Timecode-Calculator/assets/waves.svg b/Calculators/Frames-to-Timecode-Calculator/assets/waves.svg
diff --git a/Calculators/Frames-to-Timecode-Calculator/index.html b/Calculators/Frames-to-Timecode-Calculator/index.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="style.css">
+        <title>Frames to Timecode Calculator</title>
+    </head>
+    <body style="margin: 0;padding: 0;">
+        <div class="calculator_container">
+            <script src="./script.js"></script>
+            <div style="color: black;" class="input_container">
+                <div class="frames_container">
+                    <h1>Frames</h1>
+                    <input
+                        type="number"
+                        required
+                        name="frames"
+                        placeholder="Enter the frames"
+                    />
+                </div>
+                <div class="f_rate_container">
+                    <h1>Frame rate</h1>
+                    <input
+                        type="number"
+                        required
+                        name="frame_rate"
+                        placeholder="Enter the frame rate"
+                    />
+                </div>
+            </div>
+            <div style="color: black;">
+                <h1 id="timecode_head">Timecode</h1>
+                <div class="calc_container">
+                    <div class="hours_container">
+                        <h1>Time in hours</h1>
+                        <input
+                            type="number"
+                            readonly
+                            name="hours"
+                        />
+                    </div>
+                    <div class="min_container">
+                        <h1>Time in minutes</h1>
+                        <input
+                            type="number"
+                            readonly
+                            name="minutes"
+                        />
+                    </div>
+                </div>
+                <div class="calc_container">
+                    <div class="sec_container">
+                        <h1>Time in seconds</h1>
+                        <input
+                            type="number"
+                            readonly
+                            name="seconds"
+                        />
+                    </div>
+                    <div class="x_frame_container">
+                        <h1>Excess frames</h1>
+                        <input
+                            type="number"
+                            readonly
+                            name="excess_frames"
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/Calculators/Frames-to-Timecode-Calculator/script.js b/Calculators/Frames-to-Timecode-Calculator/script.js
@@ -0,0 +1,43 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Get input elements
+    const framesInput = document.querySelector('input[name="frames"]');
+    const frameRateInput = document.querySelector('input[name="frame_rate"]');
+    const hoursInput = document.querySelector('input[name="hours"]');
+    const minutesInput = document.querySelector('input[name="minutes"]');
+    const secondsInput = document.querySelector('input[name="seconds"]');
+    const excessFramesInput = document.querySelector('input[name="excess_frames"]');
+
+    function calculateTimecode() {
+        // Get values from inputs
+        const frames = parseInt(framesInput.value, 10);
+        const frameRate = parseInt(frameRateInput.value, 10);
+
+        if (isNaN(frames) || isNaN(frameRate) || frameRate <= 0) {
+            // If inputs are invalid, clear the outputs
+            hoursInput.value = '';
+            minutesInput.value = '';
+            secondsInput.value = '';
+            excessFramesInput.value = '';
+            return;
+        }
+
+        // Calculate total seconds and excess frames
+        const totalSeconds = Math.floor(frames / frameRate);
+        const excessFrames = frames % frameRate;
+
+        // Calculate hours, minutes, and seconds
+        const hours = Math.floor(totalSeconds / 3600);
+        const minutes = Math.floor((totalSeconds % 3600) / 60);
+        const seconds = totalSeconds % 60;
+
+        // Set values to the output inputs
+        hoursInput.value = hours;
+        minutesInput.value = minutes;
+        secondsInput.value = seconds;
+        excessFramesInput.value = excessFrames;
+    }
+
+    // Add event listeners to the input elements
+    framesInput.addEventListener('input', calculateTimecode);
+    frameRateInput.addEventListener('input', calculateTimecode);
+});
diff --git a/Calculators/Frames-to-Timecode-Calculator/style.css b/Calculators/Frames-to-Timecode-Calculator/style.css
@@ -0,0 +1,94 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
+
+html, body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    background: url('assets/waves.svg') no-repeat center center fixed;
+    background-size: cover;
+}
+
+.calculator_container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: max-content;
+    height: max-content;
+    color: white;
+    position: absolute;
+    top: 50%; /* Move the top of the element to the middle of the screen */
+    left: 50%; /* Move the left of the element to the middle of the screen */
+    transform: translate(-50%, -50%); /* Adjust for the element's own dimensions */
+    padding: 2rem;
+
+    /* Glassmorphic theme */
+    background: rgba( 255, 255, 255, 0.25 );
+    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
+    backdrop-filter: blur( 4px );
+    -webkit-backdrop-filter: blur( 4px );
+    border-radius: 10px;
+    border: 1px solid rgba( 255, 255, 255, 0.18 );
+}
+
+h1 {
+    color: white;
+    font-family: "Nunito";
+    font-size: 1.2rem;
+}
+
+#timecode_head {
+    font-size: 1.5rem;
+    border-bottom: 2px solid yellow;
+}
+
+.frames_container input,
+.f_rate_container input{
+    font-size: 1.5rem;
+    color: black;
+    padding: 0.4rem;
+    outline: none;
+    border-radius: 10px;
+    border: 2px solid wheat;
+}
+
+.frames_container input:active,
+.f_rate_container input:active{
+    border: 2px solid blue;
+    caret-color: blue;
+}
+
+
+.calc_container {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+}
+
+.hours_container input,
+.min_container input,
+.x_frame_container input,
+.sec_container input {
+    font-size: 1.5rem;
+    color: black;
+    padding: 0.4rem;
+    outline: none;
+    border-radius: 10px;
+    border: 2px solid blue;
+}
+
+.hours_container h1,
+.min_container h1,
+.x_frame_container h1,
+.sec_container h1 {
+    font-size: 1rem;
+}
+
+.input_container {
+    background: rgba(173, 216, 230, 0.503);
+    padding: 1rem;
+    padding-left: 2rem;
+    padding-right: 2rem;
+    border-radius: 10px;
+    padding-bottom: 2rem;
+}
diff --git a/index.html b/index.html
@@ -2976,6 +2976,20 @@ <h3>Calculates the linear density of the yarn from unit system to another.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Frames to Timecode Calculator</h2>
+                <h3>This frames to timecode calculator helps you convert frames to timecode in a recorded video.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Frames-to-Timecode-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Frames-to-Timecode-Calculator" title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
+                    </a>
+                </div>
+            </div>
+        </div>
 
         <br><br><br><br><br>
         <div id="noResults" style="color: white; font-weight: bold; font-size: 18px;"><p>No results found 🙃</p></div>