Random quote machine projects, many many questions

Code Feedback
1

Hi guys,
this is my random “not quote but oblique strategies” machine link:
[https://codepen.io/vistapuri/full/YrYGrb/]

This is far from perfect of course, would love to hear some suggestions on how to improve the page, especially around these following issues:

  1. How do I minimize the lag whenever users press the “get strategy” button? is there any particular order in writing the jquery code that I need to follow? (will get.json as the first function will make it faster?)

  2. I used JQuery on.click function to change the background color every time a user click the “get strategy” button, how to apply radial-gradiant to these background ? my main background has gradient in it but not the colors called from JQuery code.

  3. How to apply transition between strategies? I tried $(".strategy").fadeout(3000); but it doesnt seem to work, tried fadeIn too.

  4. At first, I couldn’t get the $.getJson to work, I watched a bunch of video about this, figured out I need to use JsonP(which I still dont get), and then,

I peeked into anthom’s[https://codepen.io/anthom/full/jmZOGd] code and I notice he put a URL(https://zippy-thorn.glitch.me/) before the api resource url. I snatched the code and got it to work :slight_smile: what is this? I tried following the link on glitch, but still cant understand it.

I’ve got more questions but I think ill ask more later, thank you for your reply.

Vista

2

The amount of lag is mainly determined by how quickly the server sends a response and the user’s Internet connection speed. However, there is a very significant factor affecting the perception of speed, namely that the color change happens straight away, causing a highly visible lag. Changing the color only once the server returns the JSON data would improve this a lot. You could also consider adding a “loading” message/image while the data is being retrieved.

First, you need to decide exactly how you want to implement this. Do you want to change both gradient colors each time? Or do you just want to change the primary color and leave the other the same? If you want to change both, do you want to randomize both separately (you could end up with mauve/orange or green/red) or have some presets that you’ve selected because they pair well together?

Then, you can simply build up the string for the CSS value, either by concatenating or by using ES6 template literals. The syntax for your initial gradient is radial-gradient(#f2ede8, #D3C28A), so you just need to figure out which bits to replace with variables and what variables to use.

  • Syntax for string concatentation:
    'string' + variable1 + 'string' + variable2
  • Syntax for ES6 template literals:
    `string${variable1}string${variable2}`

Another nice effect would be animating the color change. You can do this by adding transition: background 1s; to the CSS for body (change 1 for your chosen speed in seconds).

This works fine. I’m guessing the problem is that you’re using the code in the wrong place. You need to think carefully about exactly when you want it to fade out and fade in. You also need to consider which parts of your code are synchronous and asynchronous (hint: AJAX calls such as $.getJSON and timed animations such as .fadeOut() are asynchronous).

It’s a CORS (cross-origin resource sharing) proxy. Basically, CodePen doesn’t like you making AJAX calls that return data via HTTP, only HTTPS. Using a CORS proxy allows you to bypass that.

1 Like