Help with API and tweet button! Quote generator challenge

1

Hi there, i’m currently having some trouble with my quotes generator challenge.
I’m finally able to make my quote appears on the tweet preview. However it is always has html < p > tag, as it is pre-existed from the API. The question of course how do i remove the < p > tag?

Also i would like to hear your feedback about my quotes generator :slight_smile:
Thank you guys! :smiley:

2

You can try some regular expressions

var strHtml = "<p> some text</p>";
var strText = strHtml.replace(/<p>/g,"").replace(/<\/p>/g, "\n");

By the way, i used the same API in my app, and did not feel trouble about HTML-marked response :wink:

3

I will try it out. Thank you :smiley:
I don’t have the trouble as well, it’s only when i try to tweet it, it appears :frowning:
Maybe i can see yours as a reference?

Thank you again for your help :smile:

4

My quote machine

I havent upload source code on GitHub yet, so here it is.
I used jQuery in my project, so i get text content of HTML element with .text() jQuery method

  $(document).ready(function(){
       $.ajaxSetup({cache:false});  // cache must be disabled to change quotes
       var req = "https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1";
       var req2 = "https://cors-anywhere.herokuapp.com/"+ req;

       function tweetConversion(text, author){
          var ref = "http://twitter.com/intent/tweet?status=";
          var str1 = "\""+text+"\"  -"+author;
          if(str1.length<=140)
             ref += str1;
          else{
             var symbols = 140-author.length;
             ref+= "\""+text.slice(0,symbols-8)+"...\"  -"+author;
          }
          
          return ref;
          }

         function handle(data){
              $(".quotes, .quote, .author").css("opacity",0);
              
              setTimeout(function(){
                    $(".quote").html(data[0].content);
                    $(".quote").scrollTop(0);
                    $(".author").html(data[0].title);
                    $(".quotes, .quote, .author").css("opacity",1);
                    $(".tweet").css("visibility","visible").fadeTo(1,1500);
                    $(".tweet").attr("href", tweetConversion($(".quote").text(), data[0].title));   // HERE JQUERY GRABS TEXT

                    $(".quote").on("mouseenter", function(){
                           $(this).on("wheel", function(event){
                                    event.preventDefault();
                          
                                    if(event.originalEvent.deltaY>0)
                                           $(this).scrollTop($(this).scrollTop()+2);
                                    else
                                          $(this).scrollTop($(this).scrollTop()-2);
                            });
                           $(".quote").on("mouseleave", function(){
                                 $(this).off("wheel");
                            });
                    });
                  
                   $(".quote").on("touchstart", function(e){
                          var initScroll = $(this).scrollTop();
                         var startY = e.originalEvent.changedTouches[0].clientY;
                         $(this).on("touchmove", function(event){
                                event.preventDefault();
                                var scrollLength = event.originalEvent.changedTouches[0].clientY - startY;
                                 $(this).scrollTop(scrollLength+ initScroll);
                          });
                    });
                   $(".quote").on("touchend", function(){
                        $(this).off("touchmove");
                   });
              
             },200);
        }
  

                $(".rndquote").on("click", function(){
                       $.getJSON(req, handle)
                                                              .fail(function(){
                                                                         $.getJSON(req2, handle);
                                                                });
                         });
                 });
1 Like
5

As @keith1111 mentions in his reply. He used .text() which is what you want to do.

Instead of:

 //Tweet quote
$("a").attr("href", "https://twitter.com/intent/tweet?text="+data[0].content);

you could create a new variable like the following for the tweet content:

var tweetContent = '"' + $('#quote-content').text() + '" ' +$('#quote-title').text();
 //Tweet quote
$("a").attr("href", "https://twitter.com/intent/tweet?text="+tweetContent);

FYI - If you always want to include the entire quote and author for the tweet content, you will need to make sure it the total length is <= 140, because Twitter will truncate anything over 140 characters.

If you want to avoid having this issue, you could pull another quote if the total length of the quote plus the author name is over 140 characters.

1 Like
6

Thank you @rmdawson71 @keith1111
it works like magic, i never thought to take it from my own html :smile:
Thanks guys!!!