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
Thank you guys!
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);
});
});
});
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.