init

2024-05-28 17:52:13 +05:30
commit b9e2e40f11
36 changed files with 2828 additions and 0 deletions
--- a/letter-case-converter.php
+++ b/letter-case-converter.php
@@ -0,0 +1,169 @@
+<div class="container-cc">
+    <div class="content-cc">
+        <h2 class="title-cc">Case Converter</h2>
+        <form class="form-cc">
+            <label class="label-cc" for="inputString">Input Text:</label>
+            <textarea id="inputString" class="textarea-cc" name="inputString" rows="4" cols="50" oninput="convertCase()"></textarea>
+            
+            <div class="case-options-cc">
+                <div class="case-option-cc" onclick="setActive(this)" data-case="uppercase">Uppercase</div>
+                <div class="case-option-cc" onclick="setActive(this)" data-case="lowercase">Lowercase</div>
+                <div class="case-option-cc" onclick="setActive(this)" data-case="titlecase">Titlecase</div>
+            </div>
+        </form>
+        <div id="result" class="result-cc"></div>
+        <P style="display: none; text-align: center;" id="copied-notice"></P>
+        <button type="button" class="copy-button-cc" onclick="copyToClipboard()" style="background-color: #7d7d7d; width: 100%; margin-top: 10px;">Copy</button>
+    </div>
+</div>
+<script>
+    function convertCase() {
+        var inputString = document.getElementById("inputString").value;
+        var targetCase = document.querySelector('.case-option-cc.active').getAttribute('data-case');
+        var result = document.getElementById("result");
+
+        if (inputString.trim() === "") {
+            result.innerHTML = "Please enter a string.";
+            return;
+        }
+
+        if (targetCase === 'uppercase') {
+            result.innerHTML = inputString.toUpperCase();
+        } else if (targetCase === 'lowercase') {
+            result.innerHTML = inputString.toLowerCase();
+        } else if (targetCase === 'titlecase') {
+            result.innerHTML = inputString.replace(/\w\S*/g, function (txt) {
+                return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+            });
+        } else {
+            result.innerHTML = "Invalid target case specified.";
+        }
+    }
+
+    function setActive(button) {
+        var buttons = document.querySelectorAll('.case-option-cc');
+        buttons.forEach(function(btn) {
+            btn.classList.remove('active');
+        });
+        button.classList.add('active');
+
+        convertCase();
+    }
+
+    function copyToClipboard() {
+        var result = document.getElementById("result");
+        var range = document.createRange();
+        range.selectNode(result);
+        window.getSelection().removeAllRanges();
+        window.getSelection().addRange(range);
+        document.execCommand("copy");
+        window.getSelection().removeAllRanges();
+        // alert("Copied to clipboard!");
+        document.getElementById('copied-notice').style.display = 'block';
+        document.getElementById('copied-notice').innerHTML = 'Copied to clipboard!';
+    }
+</script>
+<style>
+    .container-cc {
+        font-family: Arial, sans-serif;
+        /* background-color: #3d3d3d; */
+        margin: 0;
+        padding: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding-top: 30px;
+        /* padding-bottom: 30px; */
+    }
+
+    .content-cc {
+        /* background-color: #7d7d7d; */
+        border-radius: 8px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        padding: 20px;
+        width: 500px;
+    }
+    .content-cc {
+        background-color: #3d3d3d;
+        border-radius: 8px;
+        box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
+        padding: 20px;
+        width: 400px;
+    }
+
+    @media screen and (min-width: 1024px) {
+        .content-cc {
+            width: 800px; /* Width for large screens */
+        }
+    }
+
+    .title-cc {
+        font-size: 25px;
+        text-align: center;
+    }
+
+    .form-cc {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .label-cc {
+        margin-bottom: 5px;
+        /* color: #555; */
+    }
+
+    .textarea-cc {
+        padding: 10px;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+        resize: none;
+        margin-bottom: 15px;
+        background-color: #3d3d3d;
+    }
+
+    .case-options-cc {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 15px;
+    }
+
+    .case-option-cc {
+        flex-grow: 1;
+        padding: 10px;
+        text-align: center;
+        border: 1px solid #007bff;
+        color: #FFF;
+        border-radius: 5px;
+        cursor: pointer;
+        transition: background-color 0.3s ease;
+    }
+
+    .case-option-cc:hover {
+        background-color: #007bff;
+        color: #fff;
+    }
+
+    .result-cc {
+        border: 1px solid #ccc;
+        border-radius: 5px;
+        padding: 10px;
+        min-height: 100px;
+        overflow: auto;
+    }
+
+    .copy-button-cc {
+        color: #fff;
+        border: none;
+        border-radius: 5px;
+        padding: 10px 20px;
+        cursor: pointer;
+        transition: background-color 0.3s ease;
+    }
+
+    .copy-button-cc:hover {
+        background-color: #0056b3;
+    }
+    .active{
+        background-color: #05b3a4;
+    }
+</style>