This commit is contained in:
Suvodip
2024-07-06 21:19:02 +05:30
parent b9e2e40f11
commit d368213568
23 changed files with 879 additions and 591 deletions

View File

@@ -1,176 +1,126 @@
<style>
/* body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
} */
.container-dyz {
max-width: 600px;
margin: 50px auto;
padding: 20px;
background-color: #3d3d3d;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.table-container {
max-width: 900px;
margin: 50px auto;
padding: 20px;
background-color: #3d3d3d;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
font-weight: bold;
}
.textarea-text {
width: 100%;
height: 150px;
margin-bottom: 10px;
resize: vertical;
padding: 10px;
border-radius: 4px;
border: 1px solid #ccc;
font-size: 16px;
background-color: #1d1d1d;
}
span {
color: #007bff;
font-weight: bold;
}
.content-table {
width: 100%;
border-collapse: collapse;
}
.content-table th, .content-table td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
.content-table .table-head {
background-color: #f2f2f2;
}
</style>
<div class="container-dyz">
<h1>Text Counter</h1>
<section class="diZContainer diZmxAuto">
<h1 class="diZBorderBottom">Text Counter</h1>
<div class="diZMaxW600 diZmxAuto diZmyAuto diZFlexColumn toolsSection diZmt20">
<label for="inputText">Enter your text:</label><br>
<textarea class="textarea-text" id="inputText" placeholder="Type your text here..." oninput="countTextMetrics()"></textarea>
<p>Total letters: <span id="letterCount">0</span></p>
<p>Total words: <span id="wordCount">0</span></p>
<p>Total sentences: <span id="sentenceCount">0</span></p>
<p>Total paragraphs: <span id="paragraphCount">0</span></p>
</div>
<div class="table-container">
<h2 style="text-align: center; font-size: 25px; font-weight: bold;">Content Limitations</h2>
<table class="content-table">
<tr>
<th class="name">Name</th>
<th class="min-max">Min/Max</th>
<th class="limit">Limit</th>
<th class="type">Type</th>
</tr>
<tr>
<td class="name">Meta Title</td>
<td class="min-max">Max</td>
<td class="limit">55</td>
<td class="type">Letter</td>
</tr>
<tr>
<td class="name">Meta Description</td>
<td class="min-max">Max</td>
<td class="limit">160</td>
<td class="type">Letter</td>
</tr>
<tr>
<td class="name">Google Ideal Post Content</td>
<td class="min-max">Min</td>
<td class="limit">300</td>
<td class="type">Word</td>
</tr>
<tr>
<td class="name">Instagram Captions/Comments</td>
<td class="min-max">Max</td>
<td class="limit">2200</td>
<td class="type">Letter</td>
</tr>
<tr>
<td class="name">Twitter Post</td>
<td class="min-max">Max</td>
<td class="limit">280</td>
<td class="type">Letter</td>
</tr>
<tr>
<td class="name">Twitter Username</td>
<td class="min-max">Max</td>
<td class="limit">20</td>
<td class="type">Letter</td>
</tr>
<tr>
<td class="name">Facebook Wall Post (Truncation)</td>
<td class="min-max">Max</td>
<td class="limit">477</td>
<td class="type">Letter</td>
</tr>
<tr>
<td class="name">Facebook Wall Post (All)</td>
<td class="min-max">Max</td>
<td class="limit">63206</td>
<td class="type">Letter</td>
</tr>
<tr>
<td class="name">Facebook Comment</td>
<td class="min-max">Max</td>
<td class="limit">8000</td>
<td class="type">Letter</td>
</tr>
<tr>
<td class="name">Facebook Page Description</td>
<td class="min-max">Max</td>
<td class="limit">255</td>
<td class="type">Letter</td>
</tr>
<tr>
<td class="name">Facebook Username</td>
<td class="min-max">Max</td>
<td class="limit">50</td>
<td class="type">Letter</td>
</tr>
<tr>
<td class="name">Facebook Messenger Message</td>
<td class="min-max">Max</td>
<td class="limit">20000</td>
<td class="type">Letter</td>
</tr>
<tr>
<td class="name">YouTube Video Title</td>
<td class="min-max">Max</td>
<td class="limit">70</td>
<td class="type">Letter</td>
</tr>
<tr>
<td class="name">YouTube Video Description</td>
<td class="min-max">Max</td>
<td class="limit">5000</td>
<td class="type">Letter</td>
</tr>
<tr>
<td class="name">Snapchat Caption</td>
<td class="min-max">Max</td>
<td class="limit">250</td>
<td class="type">Letter</td>
</tr>
<tr>
<td class="name">Pinterest Pin Description</td>
<td class="min-max">Max</td>
<td class="limit">500</td>
<td class="type">Letter</td>
</tr>
</table>
<textarea class="" rows="10" id="inputText" placeholder="Type your text here..." oninput="countTextMetrics()" style="resize: vertical;"></textarea>
<div>
<p>Total letters: <span id="letterCount">0</span></p>
<p>Total words: <span id="wordCount">0</span></p>
<p>Total sentences: <span id="sentenceCount">0</span></p>
<p>Total paragraphs: <span id="paragraphCount">0</span></p>
</div>
</div>
</section>
<section class="diZContainer diZmxAuto diZmb20">
<div>
<h2 class="diZBorderBottom">Content Limitations</h2>
<table class="diZw70 diZmxAuto">
<tr>
<th class="diZTableBorder diZPadding5px">Name</th>
<th class="diZTableBorder diZPadding5px">Min/Max</th>
<th class="diZTableBorder diZPadding5px">Limit</th>
<th class="diZTableBorder diZPadding5px">Type</th>
</tr>
<tr>
<td class="diZTableBorder diZPadding5px">Meta Title</td>
<td class="diZTableBorder diZPadding5px">Max</td>
<td class="diZTableBorder diZPadding5px">55</td>
<td class="diZTableBorder diZPadding5px">Letter</td>
</tr>
<tr>
<td class="diZTableBorder diZPadding5px">Meta Description</td>
<td class="diZTableBorder diZPadding5px">Max</td>
<td class="diZTableBorder diZPadding5px">160</td>
<td class="diZTableBorder diZPadding5px">Letter</td>
</tr>
<tr>
<td class="diZTableBorder diZPadding5px">Google Ideal Post Content</td>
<td class="diZTableBorder diZPadding5px">Min</td>
<td class="diZTableBorder diZPadding5px">300</td>
<td class="diZTableBorder diZPadding5px">Word</td>
</tr>
<tr>
<td class="diZTableBorder diZPadding5px">Instagram Captions/Comments</td>
<td class="diZTableBorder diZPadding5px">Max</td>
<td class="diZTableBorder diZPadding5px">2200</td>
<td class="diZTableBorder diZPadding5px">Letter</td>
</tr>
<tr>
<td class="diZTableBorder diZPadding5px">Twitter Post</td>
<td class="diZTableBorder diZPadding5px">Max</td>
<td class="diZTableBorder diZPadding5px">280</td>
<td class="diZTableBorder diZPadding5px">Letter</td>
</tr>
<tr>
<td class="diZTableBorder diZPadding5px">Twitter Username</td>
<td class="diZTableBorder diZPadding5px">Max</td>
<td class="diZTableBorder diZPadding5px">20</td>
<td class="diZTableBorder diZPadding5px">Letter</td>
</tr>
<tr>
<td class="diZTableBorder diZPadding5px">Facebook Wall Post (Truncation)</td>
<td class="diZTableBorder diZPadding5px">Max</td>
<td class="diZTableBorder diZPadding5px">477</td>
<td class="diZTableBorder diZPadding5px">Letter</td>
</tr>
<tr>
<td class="diZTableBorder diZPadding5px">Facebook Wall Post (All)</td>
<td class="diZTableBorder diZPadding5px">Max</td>
<td class="diZTableBorder diZPadding5px">63206</td>
<td class="diZTableBorder diZPadding5px">Letter</td>
</tr>
<tr>
<td class="diZTableBorder diZPadding5px">Facebook Comment</td>
<td class="diZTableBorder diZPadding5px">Max</td>
<td class="diZTableBorder diZPadding5px">8000</td>
<td class="diZTableBorder diZPadding5px">Letter</td>
</tr>
<tr>
<td class="diZTableBorder diZPadding5px">Facebook Page Description</td>
<td class="diZTableBorder diZPadding5px">Max</td>
<td class="diZTableBorder diZPadding5px">255</td>
<td class="diZTableBorder diZPadding5px">Letter</td>
</tr>
<tr>
<td class="diZTableBorder diZPadding5px">Facebook Username</td>
<td class="diZTableBorder diZPadding5px">Max</td>
<td class="diZTableBorder diZPadding5px">50</td>
<td class="diZTableBorder diZPadding5px">Letter</td>
</tr>
<tr>
<td class="diZTableBorder diZPadding5px">Facebook Messenger Message</td>
<td class="diZTableBorder diZPadding5px">Max</td>
<td class="diZTableBorder diZPadding5px">20000</td>
<td class="diZTableBorder diZPadding5px">Letter</td>
</tr>
<tr>
<td class="diZTableBorder diZPadding5px">YouTube Video Title</td>
<td class="diZTableBorder diZPadding5px">Max</td>
<td class="diZTableBorder diZPadding5px">70</td>
<td class="diZTableBorder diZPadding5px">Letter</td>
</tr>
<tr>
<td class="diZTableBorder diZPadding5px">YouTube Video Description</td>
<td class="diZTableBorder diZPadding5px">Max</td>
<td class="diZTableBorder diZPadding5px">5000</td>
<td class="diZTableBorder diZPadding5px">Letter</td>
</tr>
<tr>
<td class="diZTableBorder diZPadding5px">Snapchat Caption</td>
<td class="diZTableBorder diZPadding5px">Max</td>
<td class="diZTableBorder diZPadding5px">250</td>
<td class="diZTableBorder diZPadding5px">Letter</td>
</tr>
<tr>
<td class="diZTableBorder diZPadding5px">Pinterest Pin Description</td>
<td class="diZTableBorder diZPadding5px">Max</td>
<td class="diZTableBorder diZPadding5px">500</td>
<td class="diZTableBorder diZPadding5px">Letter</td>
</tr>
</table>
</div>
</section>
<script>
function countTextMetrics() {