Help with displaying the data from api randomQuoteMachine [CLOSED]

1

Capture
Capture1363×629 53.9 KB

Hello Guys,
I am working on my fist project and …

  1. I am finding difficulties to get the data from the api and displaying it.
  2. How can I adjust the container’s width so when I use text-right and text-left on the twitter’s button and New Quote’s button they will fit into the sides of the container’s width?
    https://codepen.io/simongjetaj/pen/Oxgprw
    Any help is very appreciated…
    Happy coding, Simon
2

I haven’t reached the quote machine project yet. But here’s a quick solution to your first problem:

Use format=jsonp instead of format=json and remove http or https from the api links.
About your other problem, I didn’t quite understand the problem. Can you rephrase?

Also, in codepen, the $(document).ready function isn’t needed. That’s not an error, though.

3

Yes, I founded that problem @shravan, I am trying to fix the second one…
Thank you for the answer.

4

Alright. Good luck! Happy to help.

5

Capture
Capture800×271 9.95 KB

I just wanted the buttons of twitter button and newQuote button to be left and right and not to be in the center… When I try text-right and text-left they move in the respective corners of the bootstrap container div…

6

Hey. One way to do that would be to wrap the buttons in a div with the same width of your quote’s div and then float the buttons in the opposite directions, like so:

HTML

    <div class="buttons">
      <a href="" class="btn" id="tweet"><i class="fa fa-twitter"></i></a>
      <button type="submit" id="newQuote" class="btn btn-primary">New Quote</button>
    </div>

CSS

.buttons {
  max-width: 450px;
  margin:20px auto;
} .buttons > #tweet {
  float:left;
} .buttons > #newQuote {
  float:right;
}
1 Like
7

Thanks man, that worked! :+1: