Polishing up Quote Machine

Good afternoon,
I would like help on the following.

  1. Layout (when i run it on my computer it is following the css grid rules, however on codepen its not)
  2. jquery animations, having trouble implementing this. would like the quotes to fade in have tried
    $(’#text’).hide().html(a[0].content+ "

    — " + a[0].title + “

    and a few other methods but it doesnt seem to be working, all the above just does is delay the quote from coming in for two seconds it doesnt make it fade.
  3. the text animation on top gets cut off if its over a certain length, and only takes up one line. I would like it to continue typing and just push down on the div below.
  4. Implement a logic where if there is no JSON then clicking on the tweet button just sends an alert (‘you need to generate a quote and then you can tweet it, please go back and hit the quote button’)
    I tried to run a logic if(JSON) etc… if(a) etc… nothing worked for me.
  5. I would also like to know if its possible to do more effects with the text i get from the api, svg filters, maybe a splatter effect, or something else cool but maybe im getting ahead of myself. but once I get the first four things on this list squared away i would like to work on that as well.

the project satisfies the requirements and is working but i would just like to polish it up. Also notice that the tweet button does not change into a little hand when hovered over.

Here is the Link:

Can you describe and show an example (i.e. screenshot) of how a specific grid rule is not being followed?

Why not only display the twitter icon if there is a quote displayed? This would avoid the extra alert? Another option is to disable the ability to click on the icon until a quote appears.

Side notes:

  1. Your quote and twitter icons are tiny compared to the rest of the page. I almost did not see them at first. Another reason I did not see them is due to a lack of contrast between the icons’ color and the colors in the background image.
  2. You have the same problem with contrast for the quote text and the background image.
1 Like

Hello! Do you mean that you need when you open the page, quote doesn’t appear immediately, but in 2-3 seconds?

Ok then what you suggested first is what im going to do, and i like the first option only display twitter if there is a quote displayed im trying to set it up in something like this:

type or paste code here
function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";

but then i realized that this wont do it because each time I click on the quote button its going to just alternate between hidden and showing and this isnt what we want, because the tweety icon needs to be always showing up, but only after the quote button has been clicked once, so is there a way to do something similar to the above but only run it one time?

or should i do something like this?


This is going to be the inspire quotes app design on the top left is the quote (refresh) button to the right is the instructional text to the user on how to use the app, it runs on load and will be typed out
once the user hits the quote button a quote will show as well as the option to tweet it out and also a facebook share button,
I need to check if facebook has something similar:


instead of a picture would it work with a full background video? and apply an @media width to switch it back to a photo background?
Is there a way to keep the full width video background reguardless of screensize?

in thinking about what this app is doing:
the encodeURI component takes the string from the JSON and makes it viable to be used in a link without any spaces etc… and because it is a link that can be seen in a browser twitter must be accessing global $_GET variable
however they arent submitting it on their side storing it or doing any database operations w it because it is only printed out to the screen in text that the user sees and can edit, because if he closes the browser then the data that was on the screen at that time is gone.

another thing interesting to note:
there used to be a way to prepopulate certain forms:
There are alot of these tutorials showing similar examples, however none of this is currently accurate information as I was unable to replicate submitting such a prepopulated form to google.
so does this mean google just changed their method from accessing _GET to _POST instead?
this would be in order to prevent everyone from ‘gating’ reviews of their buisness.

close to solving it but not quite yet,
I put the tweety in a span element and set to hide by default in style like so:

#show{ display: none; }

Having a slight trouble with the jquery if someone can assist i have this but its not correct:

type or paste code here

solved the problem of the displaying the tweety only after the quote button is clicked as randall said to do here is the solution for anyone that wants to see:

Can you provide a current list of items with which you are still needing help? I just want to confirm before reviewing the current code and responding

Thank you.

One of the problems I am having is applying jquery animation effects to the recieved json data.

What i mean is that I see that the methods are manipulating the text however its not doing what i want.

above is the pen, and i am referencing this code here

$.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
          opacity: 0
        }, 1000,
        function() {
            opacity: 1
          }, 1000);
  $('#author').html("<p>— " + a[0].title + "</p>");

randall helped me getting the fades to work, however we are using the method .text() to append the json however the problem now is we are still getting the html tags and special characters , and also its not outputting it underneath like it was before (the buttons were behaving like a block level elements) but now they are behaving like spans. you can see in the code where i commented out the original code when we got the fades working you can add and remove this to see what i mean.

Use the html method instead of text method below:


yes, however then you will see that the fades are not working.

said to do: make a logic that says if there was not already a quote in there, make it do this (only fade in) , otherwise do something else(fade in and out), I tried to do this, i dont think it had any affect one way or the other:

 if(a){     $('#quotespace').fadeToggle(1000,function(){
            $('#author').html("<p>-"+ a[0].title+"</p>");
         } else {
            $('#author').html("<p>-"+ a[0].title+"</p>");

Your logic is off. You are currently checking if any data is in a (the response) instead of checking if the quote is on the page (span with id=“text”).

ok i tried this. is this correct? how can i test if its working?

    //if ($('#quotespace'))
    if(quotespace.innerHTML){     $('#quotespace').fadeToggle(1000,function(){
            $('#author').html("<p>-"+ a[0].title+"</p>");
         } else {
            $('#author').html("<p>-"+ a[0].title+"</p>");

This is not doing what you think it is. Did you defined quotespace somewhere in your code? Why not use jQuery to get the inner text or html value of the span with id=“text”?

I did it but i dont think its having any changing effect. also if you can explain why we need to use fadetoggle twice
check it here:

if($('#text')&& $('#author') ){ 

Your else block never executes, because the if statement condition above always evaluates to true. Why? Because $(’#text’) is an object and not a string.

ok so now i tried:
if($(’#text’).type===“string”&& $(’#author’).type===“string” )

and its not even executing the first condition anymore, only the second if statement

To check if there is any value in the span with id=“text”, use:

if (${'#text').text() {