Certainly! Let's add another feature to the digital marketing tool. How about adding a character counter to display the number of characters entered in the input field?
Here's the updated code:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Digital Marketing Tool</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
.container {
max-width: 800px;
margin: 50px auto;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
color: #333;
}
.input-group {
margin-bottom: 20px;
}
.input-group label {
display: block;
margin-bottom: 5px;
color: #666;
}
.input-group input[type="text"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
.input-group input[type="submit"] {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
.input-group input[type="submit"]:hover {
background-color: #0056b3;
}
#result {
padding: 20px;
background-color: #f9f9f9;
border-radius: 5px;
display: none;
}
#result h2 {
margin-top: 0;
color: #333;
}
#social-buttons {
text-align: center;
margin-top: 20px;
}
#social-buttons a {
display: inline-block;
margin-right: 10px;
color: #fff;
background-color: #007bff;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
}
#social-buttons a:hover {
background-color: #0056b3;
}
#download-link {
display: block;
text-align: center;
margin-top: 20px;
}
#download-link a {
color: #333;
text-decoration: none;
}
#char-count {
text-align: right;
color: #666;
font-size: 14px;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="container">
<h1>Digital Marketing Tool</h1>
<div class="input-group">
<label for="input-text">Enter your marketing message:</label>
<input type="text" id="input-text" placeholder="E.g., Check out our latest product!" oninput="countCharacters()">
<div id="char-count">0/100 characters</div>
</div>
<div class="input-group">
<input type="submit" value="Generate Marketing Copy" onclick="generateMarketingCopy()">
</div>
<div id="result">
<h2>Generated Marketing Copy:</h2>
<p id="marketing-copy"></p>
<div id="social-buttons">
<a href="#" id="share-twitter">Share on Twitter</a>
<a href="#" id="share-facebook">Share on Facebook</a>
</div>
<div id="download-link">
<a href="#" id="download-txt">Download Copy as Text File</a>
</div>
</div>
</div>
<script>
function countCharacters() {
var inputText = document.getElementById("input-text").value;
var charCount = inputText.length;
document.getElementById("char-count").textContent = charCount + "/100 characters";
}
function generateMarketingCopy() {
var inputText = document.getElementById("input-text").value;
var marketingCopy = "🚀 Don't miss out! " + inputText + " 🔥 Get yours now!";
document.getElementById("marketing-copy").textContent = marketingCopy;
document.getElementById("result").style.display = "block";
updateSocialShareLinks(inputText);
updateDownloadLink(marketingCopy);
}
function updateSocialShareLinks(message) {
var twitterLink = document.getElementById("share-twitter");
var facebookLink = document.getElementById("share-facebook");
var twitterMessage = encodeURIComponent("Check out this amazing offer: " + message + " #DigitalMarketing #Offer");
var facebookMessage = encodeURIComponent("Check out this amazing offer: " + message);
twitterLink.href = "https://twitter.com/intent/tweet?text=" + twitterMessage;
facebookLink.href = "https://www.facebook.com/sharer/sharer.php?u="e=" + facebookMessage;
}
function updateDownloadLink(marketingCopy) {
var downloadLink = document.getElementById("download-txt");
var blob = new Blob([marketingCopy], { type: 'text/plain' });
downloadLink.href = window.URL.createObjectURL(blob);
downloadLink.download = "marketing_copy.txt";
}
</script>
</body>
</html>
Now, as the user types in the input field, the character counter dynamically updates to display the number of characters entered out of a maximum of 100 characters.
No comments:
Post a Comment