dikshantrajput#572

Please merge it under hacktoberfest 2022.
priyaastha · Oct 13, 2022 · 6027261 · 6027261
1 parent 4715763
commit 6027261
Show file tree

Hide file tree

Showing 3 changed files with 174 additions and 0 deletions.
diff --git a/web-dev/TweetCounter/index.html b/web-dev/TweetCounter/index.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>Tweet Counter</title>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">    
+        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+        <link rel="stylesheet" href="style.css">
+        <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
+    </head>
+
+    <body>
+        <center>
+
+            <div class="header">
+                <h1>Tweet Counter</h1>
+            </div>
+
+            <div class="container overflow-hidden chars">
+                <div class="row gx-5">
+                  <div class="col">
+                   <div class="p-3 border bg-light">
+                        <div class="top">Characters typed</div>
+                        <hr>
+                        <span id="counter">0</span>
+                    </div>
+                  </div>
+                  <div class="col">
+                    <div class="p-3 border bg-light">
+                        <div class="top">Characters Remaining</div>
+                        <hr>
+                        <span id="rem">280</span>
+                    </div>
+                  </div>
+                  </div>
+                </div>
+            </div>
+
+            <div>
+                <textarea id="tweet" class="tweet" placeholder="Enter your tweet here" rows="10" onpaste="ShowCount()" onkeydown="ShowCount()"></textarea>
+            </div>
+
+            <div class="con">
+                <div class="buttons">
+                    <button id="tweetButton" class="btn btn-outline-dark ResultButton" onclick="ShowTweet()" data-bs-toggle="modal" data-bs-target="#exampleModal">Show Tweet</button>
+                    <button id="copyButton" class="btn btn-dark copyButton" onclick="ClearTweet()">Clear Tweet</button>
+
+                    <!-- Modal -->
+                    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+                        <div class="modal-dialog">
+                            <div class="modal-content">
+                                <div class="modal-header">
+                                    <h5 class="modal-title" id="exampleModalLabel">Your tweet is...</h5>
+                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                                </div>
+                                <div class="modal-body">
+                                    <div class="mod">
+                                        <h4 id="final" class="final"></h4>
+                                    </div>
+                                </div>
+                                <div class="modal-footer">
+                                    <button type="button" class="btn btn-outline-dark" id="copy" onclick="CopyTweet()">Copy Tweet</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+
+
+
+            <br><br><br>
+            <div class="footer">
+                <p>&copy; 2022 Astha Priya</p>
+
+            </div>
+
+        </center>
+
+        <script src="script.js"></script>
+    </body>
+</html>
diff --git a/web-dev/TweetCounter/script.js b/web-dev/TweetCounter/script.js
@@ -0,0 +1,42 @@
+function ShowCount(){
+    var tweet = document.getElementById("tweet").value;
+    console.log(tweet);
+    var tweetLength = tweet.length;
+    var tweetCount = document.getElementById("counter");
+    tweetCount.innerHTML = tweetLength;
+    var rem = document.getElementById("rem");
+    rem.innerHTML = 280 - tweetLength;
+
+    if(tweetLength > 280){
+        tweetCount.style.color = "red";
+        rem.style.color = "red";
+        rem.innerHTML = "You have exceeded the limit by " + (tweetLength - 280);
+    }
+    else{
+        tweetCount.style.color = "black";
+        rem.style.color = "black";
+    }
+}
+
+function ClearTweet(){
+    var tweet = document.getElementById("tweet");
+    tweet.value = "";
+    tweet.focus();
+    ShowCount();
+}
+
+function ShowTweet(){
+    var tweet = document.getElementById("tweet").value;
+    var final = document.getElementById("final");
+    var msg = tweet.slice(0,280);
+    final.innerHTML = msg;
+    return msg;
+}
+
+function CopyTweet(){
+    var final = document.getElementById("final").value;
+    final.select();
+    console.log(final.value);
+    navigator.clipboard.writeText(final.value);
+    alert("Copied to clipboard");
+}
diff --git a/web-dev/TweetCounter/style.css b/web-dev/TweetCounter/style.css
@@ -0,0 +1,44 @@
+body{
+    font-family: 'Pacifico', cursive;
+}
+
+.header, .footer{
+    background-color: #143d3a;
+    color: white;
+    padding: 30px;
+}
+
+.chars{
+    margin: 40px auto 10px auto;
+    width: 50%;
+}
+
+.tweet{
+    background-color: #f2f2f2;
+    margin: 20px auto 2px auto;
+    border-radius: 5px;
+    width: 49%;
+    padding: 20px;
+}
+
+.con{
+    width: 50%;
+}
+
+.buttons{
+    float: right;
+}
+
+.mod{
+    word-wrap: break-word;
+    color: #143d3a;
+
+}
+
+.copyButton{
+    background-color: #143d3a;
+}
+
+
+
+