ColorKeyword/P4LongDiscription.hta at main · Ashish4283/ColorKeyword · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            height: 10vh;
        }

        #container {
            display: flex;
            flex: 1;
            justify-content: space-between; /* Add this to space out the elements */
        }

        #leftBox, #rightBox {
            flex: 1;
            padding: 10px;
            box-sizing: border-box;
            border: 0px solid #ccc;
        }
        #leftBox textarea, #rightBox textarea {
            width: 90%;
            margin-bottom: 10px; /* Add margin-bottom to create space between text areas and button */
        }

        #convertButton {
            margin-top: 0px;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        #counter {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="leftBox">
            <textarea id="inputBox" rows="10" placeholder="Enter text"></textarea>
            <div id="leftCounter" class="counter"></div>
        </div>
        <div id="rightBox">
            <textarea id="outputBox" rows="10" placeholder="Converted text"></textarea>
            <div id="rightCounter" class="counter"></div>
        </div>
        <button id="convertButton" onclick="convertLongDescription()">Convert</button>
    </div>

<div>
    <h1>Instructions: <a href="https://docs.google.com/document/d/1dvMZ7-vK3PykbRRRWjDSqgFD-uFATRzMAZLkm9Gaxp0/edit#heading=h.x5plgr8op2n5">Phase 4 Review and Revise Product Long Description</a></h1>
    <ol>
        <li><strong>The Long Description will start with the First Link which will contain the Product Title/Name, which will be the first line of the Enter Text Box.</strong></li>
        <li><strong>Followed by the first line of the Product Title, there would be 5 Bullet Pointers encapsulated as below Example:
		<pre>
									&lt;p&gt; &lt;strong&gt;Title&lt;/strong&gt; &lt;/p&gt;
									&lt;ul&gt;
									&lt;li&gt;Feature Bullet 1&lt;/li&gt;
									&lt;li&gt;Feature Bullet 2&lt;/li&gt;
									&lt;li&gt;Feature Bullet 3&lt;/li&gt;
									&lt;li&gt;Feature Bullet 4&lt;/li&gt;
									&lt;li&gt;Feature Bullet 5&lt;/li&gt;
									&lt;/ul&gt;
						</pre>
	<li><strong> All product-long descriptions need to have at least five bullets.
	<li><strong>If the product has fewer than five bullets
				First, see if any of the existing bullets can be broken up into separate claims/features
				If more bullets are still needed, pull info out of the product's short description or label, prioritizing features, claims, and product size
				Claims are things like “Paraben Free,” “Vegan”, “Organic,” and “Cruelty-Free”

	<li><strong><a href="https://drive.google.com/file/d/16AB6UCd5ihPNpo3wC0zolrRuiIGuonOY/view?usp=sharing">The trick for Long Description Video(Old)</a>
	<li><strong><a href="https://drive.google.com/file/d/1g3sg5r3wXkmNhFSejqmtInTzVtX-6tLi/view?usp=sharing">Notes for Long Description</a>
	<li><strong><a href="https://docs.google.com/spreadsheets/d/1nm0R_-snilgPF8V7PUbiHCYo3BKrajBpd8_bFahzB5s/edit#gid=0">Long Description Quick Input Formula Template(Old)</a>
	<li><strong><a href="https://www.awesomescreenshot.com/video/22489102?key=e9f93dc4825d3da467b464db6b818f22">How to Use above Tool? Video</a>
		</strong></li>
        <ul id="bulletList">
            <!-- Bullet points will be added dynamically here -->
        </ul>
    </ol>
</div>

    <script>
	function convertLongDescription() {
	    var inputText = document.getElementById('inputBox').value;
	    var outputText = document.getElementById('outputBox');
	    var leftCounter = document.getElementById('leftCounter');
	    var rightCounter = document.getElementById('rightCounter');

	    // Split the input text into lines
	    var lines = inputText.split('\n');

	    // Use a default title
	    var productTitle = "Title";

	    // Create the Long Description structure with a blank line after the title
	    var longDescription = '<p><strong>' + productTitle + '</strong></p>\n\n<ul>\n';

	    // Add up to 5 bullet points
	    for (var i = 0; i < 5; i++) {
	        // Ensure we don't exceed the number of lines in input
	        var bulletPoint = (i < lines.length) ? lines[i] : "";
	        longDescription += '<li>' + bulletPoint + '</li>\n';
	    }

	    longDescription += '</ul>';

	    outputText.value = longDescription;

	    // Update character counter
	    leftCounter.innerText = 'Characters: ' + inputText.length;
	    rightCounter.innerText = 'Characters: ' + longDescription.length;
	}


        // Update character counter on input
        document.getElementById('inputBox').addEventListener('input', function () {
            var leftCounter = document.getElementById('leftCounter');
            leftCounter.innerText = 'Characters: ' + this.value.length;
        });
    </script>
</body>
</html>