| Author: | shashiirk |
|---|---|
| Views Total: | 1,321 views |
| Official Page: | Go to website |
| Last Update: | July 20, 2021 |
| License: | MIT |
Preview:
Description:
A JavaScript-driven Twitter Generator to generate fake Twitter tweets that can be downloadable as images.
How to use it:
1. Build the HTML for the fake Twitter generator.
<div class="form">
<h2>Details</h2>
<div class="form-control upload">
<label for="avatar"
>Upload Profile Picture<input
type="file"
class="file"
id="avatar"
name="avatar"
accept="image/png, image/jpeg"
/></label>
<p id="file-name" class="file-name"></p>
<button id="reset" class="reset" type="button">Reset</button>
</div>
<div class="form-control">
<label for="name">Name</label>
<input type="text" id="name" />
<small><span class="count">0</span>/50 characters</small>
</div>
<div class="form-control">
<label for="username">Username</label>
<div class="username_input">@<input type="text" id="username" /></div>
<small
><span class="count">0</span>/15 characters. Only numbers, letters
or _ characters</small
>
</div>
<div class="form-control">
<label for="message">Message</label>
<textarea id="message" rows="3"></textarea>
<small><span class="count">0</span>/280 characters</small>
</div>
<div class="form-control">
<label for="time">Time</label>
<input type="text" id="time" />
<small>hh:mm format</small>
</div>
<div class="form-control">
<label for="date">Date</label>
<input type="text" id="date" />
<small>mmm dd, yyyy format</small>
</div>
<div class="form-control">
<label for="client">Client</label>
<input type="text" id="client" />
<small
>Twitter for iPhone, Twitter for Android, Twitter Web App,
etc.</small
>
</div>
<div class="form-control">
<label for="retweets">Retweets Count</label>
<input type="number" id="retweets" />
</div>
<div class="form-control">
<label for="quotes">Quote Tweets Count</label>
<input type="number" id="quotes" />
</div>
<div class="form-control">
<label for="likes">Likes Count</label>
<input type="number" id="likes" />
</div>
<div class="form-control">
<p>Theme</p>
<div class="group">
<label class="radio_container"
>Light
<input
type="radio"
name="theme_radio"
value="light"
checked="checked"
/>
<span class="radio_mark"></span>
</label>
<label class="radio_container"
>Dim
<input type="radio" name="theme_radio" value="dim" />
<span class="radio_mark"></span>
</label>
<label class="radio_container"
>Dark
<input type="radio" name="theme_radio" value="dark" />
<span class="radio_mark"></span>
</label>
</div>
</div>
<div class="form-control">
<p>Verified Badge</p>
<div class="group">
<label class="radio_container"
>Show
<input type="radio" name="verified_radio" value="show" />
<span class="radio_mark"></span>
</label>
<label class="radio_container"
>Hide
<input
type="radio"
name="verified_radio"
value="hide"
checked="checked"
/>
<span class="radio_mark"></span>
</label>
</div>
</div>
</div>
<div class="tweet-desk">
<h2>Preview</h2>
<div id="tweet_box" class="tweet_box">
<div id="tweet" class="tweet">
<div class="head">
<div class="title">
<img
id="tweet_avatar"
src="./assets/silhoutte.png"
alt="avatar"
width="48"
height="48"
/>
<div class="text">
<p>
<span id="tweet_name">Name</span>
<svg
xmlns="http://www.w3.org/2000/svg"
id="tweet_verified"
class="verified hide"
width="18"
height="18"
viewBox="0 0 24 24"
fill="currentColor"
>
<g>
<path
d="M22.5 12.5c0-1.58-.875-2.95-2.148-3.6.154-.435.238-.905.238-1.4 0-2.21-1.71-3.998-3.818-3.998-.47 0-.92.084-1.336.25C14.818 2.415 13.51 1.5 12 1.5s-2.816.917-3.437 2.25c-.415-.165-.866-.25-1.336-.25-2.11 0-3.818 1.79-3.818 4 0 .494.083.964.237 1.4-1.272.65-2.147 2.018-2.147 3.6 0 1.495.782 2.798 1.942 3.486-.02.17-.032.34-.032.514 0 2.21 1.708 4 3.818 4 .47 0 .92-.086 1.335-.25.62 1.334 1.926 2.25 3.437 2.25 1.512 0 2.818-.916 3.437-2.25.415.163.865.248 1.336.248 2.11 0 3.818-1.79 3.818-4 0-.174-.012-.344-.033-.513 1.158-.687 1.943-1.99 1.943-3.484zm-6.616-3.334l-4.334 6.5c-.145.217-.382.334-.625.334-.143 0-.288-.04-.416-.126l-.115-.094-2.415-2.415c-.293-.293-.293-.768 0-1.06s.768-.294 1.06 0l1.77 1.767 3.825-5.74c.23-.345.696-.436 1.04-.207.346.23.44.696.21 1.04z"
></path>
</g>
</svg>
</p>
<p>@<span id="tweet_username">username</span></p>
</div>
</div>
<div class="dots">
<svg
xmlns="http://www.w3.org/2000/svg"
width="19"
height="19"
viewBox="0 0 24 24"
fill="currentColor"
>
<g>
<circle cx="5" cy="12" r="2"></circle>
<circle cx="12" cy="12" r="2"></circle>
<circle cx="19" cy="12" r="2"></circle>
</g>
</svg>
</div>
</div>
<div class="content">
<div id="tweet_message" class="message">
Generate convincing fake tweet images
</div>
<div class="tweet_info">
<div id="tweet_time">4:38 PM</div>
·
<div id="tweet_date">Jul 7, 2021</div>
·
<div id="tweet_client" class="tweet_client">
Twitter Web App
</div>
</div>
</div>
<div class="stats">
<div class="stat">
<span id="tweet_retweets" class="count">96</span> Retweets
</div>
<div class="stat">
<span id="tweet_quotes" class="count">88</span> Quote Tweets
</div>
<div class="stat">
<span id="tweet_likes" class="count">153</span> Likes
</div>
</div>
<div class="tail">
<svg
xmlns="http://www.w3.org/2000/svg"
width="22"
height="22"
viewBox="0 0 24 24"
fill="currentColor"
>
<g>
<path
d="M14.046 2.242l-4.148-.01h-.002c-4.374 0-7.8 3.427-7.8 7.802 0 4.098 3.186 7.206 7.465 7.37v3.828c0 .108.044.286.12.403.142.225.384.347.632.347.138 0 .277-.038.402-.118.264-.168 6.473-4.14 8.088-5.506 1.902-1.61 3.04-3.97 3.043-6.312v-.017c-.006-4.367-3.43-7.787-7.8-7.788zm3.787 12.972c-1.134.96-4.862 3.405-6.772 4.643V16.67c0-.414-.335-.75-.75-.75h-.396c-3.66 0-6.318-2.476-6.318-5.886 0-3.534 2.768-6.302 6.3-6.302l4.147.01h.002c3.532 0 6.3 2.766 6.302 6.296-.003 1.91-.942 3.844-2.514 5.176z"
></path>
</g>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="22"
height="22"
viewBox="0 0 24 24"
fill="currentColor"
>
<g>
<path
d="M23.77 15.67c-.292-.293-.767-.293-1.06 0l-2.22 2.22V7.65c0-2.068-1.683-3.75-3.75-3.75h-5.85c-.414 0-.75.336-.75.75s.336.75.75.75h5.85c1.24 0 2.25 1.01 2.25 2.25v10.24l-2.22-2.22c-.293-.293-.768-.293-1.06 0s-.294.768 0 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5c.294-.292.294-.767 0-1.06zm-10.66 3.28H7.26c-1.24 0-2.25-1.01-2.25-2.25V6.46l2.22 2.22c.148.147.34.22.532.22s.384-.073.53-.22c.293-.293.293-.768 0-1.06l-3.5-3.5c-.293-.294-.768-.294-1.06 0l-3.5 3.5c-.294.292-.294.767 0 1.06s.767.293 1.06 0l2.22-2.22V16.7c0 2.068 1.683 3.75 3.75 3.75h5.85c.414 0 .75-.336.75-.75s-.337-.75-.75-.75z"
></path>
</g>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="22"
height="22"
viewBox="0 0 24 24"
fill="currentColor"
>
<g>
<path
d="M12 21.638h-.014C9.403 21.59 1.95 14.856 1.95 8.478c0-3.064 2.525-5.754 5.403-5.754 2.29 0 3.83 1.58 4.646 2.73.814-1.148 2.354-2.73 4.645-2.73 2.88 0 5.404 2.69 5.404 5.755 0 6.376-7.454 13.11-10.037 13.157H12zM7.354 4.225c-2.08 0-3.903 1.988-3.903 4.255 0 5.74 7.034 11.596 8.55 11.658 1.518-.062 8.55-5.917 8.55-11.658 0-2.267-1.823-4.255-3.903-4.255-2.528 0-3.94 2.936-3.952 2.965-.23.562-1.156.562-1.387 0-.014-.03-1.425-2.965-3.954-2.965z"
></path>
</g>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="22"
height="22"
viewBox="0 0 24 24"
fill="currentColor"
>
<g>
<path
d="M17.53 7.47l-5-5c-.293-.293-.768-.293-1.06 0l-5 5c-.294.293-.294.768 0 1.06s.767.294 1.06 0l3.72-3.72V15c0 .414.336.75.75.75s.75-.336.75-.75V4.81l3.72 3.72c.146.147.338.22.53.22s.384-.072.53-.22c.293-.293.293-.767 0-1.06z"
></path>
<path
d="M19.708 21.944H4.292C3.028 21.944 2 20.916 2 19.652V14c0-.414.336-.75.75-.75s.75.336.75.75v5.652c0 .437.355.792.792.792h15.416c.437 0 .792-.355.792-.792V14c0-.414.336-.75.75-.75s.75.336.75.75v5.652c0 1.264-1.028 2.292-2.292 2.292z"
></path>
</g>
</svg>
</div>
</div>
</div>
<button id="download" class="btn" type="button">Download</button>
</div>2. Load the necessary JavaScript and CSS files in the document and done.
<link rel="stylesheet" href="css/style.css" /> <script src="js/html2canvas.min.js"></script> <script src="js/app.js"></script>
See Also:
Share Selected Text On Twitter
Embed Any Public Twitter Timeline Into Page – Tweets-loader.js
Lightweight JS Library For Tweetable Text – texttweet.js
Responsive Table With JavaScript And CSS Media Queries – Table-Fluid
Small JS Library For FLIP Transitions – Flipping.js
Auto Adjust The Line-Height Of Your Text Using Molten Leading
Simple Move And Scroll Animations With JavaScript – pallet-animate
Check JavaScript Runtime Environment With Environment.js