Ryo Le Ryo Le - 6 days ago 7
Javascript Question

How to add a set border radius?

I was looking around the web and saw a post about having the img and the quote to change each time the page is refresh and it was on stack overflow
here is the code to that, credit goes to the original developer but I just want to know where I can add the class img-circle so that it would work in css to have the circular border for the images, sorry this is my first post in Stackoverflow



(function() {
var quotes = [
{
text: "text1",
img: "http://i.stack.imgur.com/FqBE6.jpg?s=32&g=1"
},
{
text: "text2",
img: "https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG",
}
];
var quote = quotes[Math.floor(Math.random() * quotes.length)];
document.getElementById("quote").innerHTML =
'<p>' + quote.text + '</p>' +
'<img src="' + quote.img + '">';
})();

Answer

Just add it to img code :

'<img class="img-circle" src="' + quote.img + '">';

Full code :

(function() {
  var quotes = [
    {
      text: "text1",
      img:  "http://i.stack.imgur.com/FqBE6.jpg?s=32&g=1"
    },
    {
      text: "text2",
      img:  "https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG",
    }
  ];
  var quote = quotes[Math.floor(Math.random() * quotes.length)];

  document.getElementById("quote").innerHTML =
    '<p>' + quote.text + '</p>' +
    '<img class="img-circle" src="' + quote.img + '">';
})();

Hope this helps.

(function() {
  var quotes = [
    {
      text: "text1",
      img:  "http://i.stack.imgur.com/FqBE6.jpg?s=32&g=1"
    },
    {
      text: "text2",
      img:  "https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG",
    }
  ];
  var quote = quotes[Math.floor(Math.random() * quotes.length)];

  document.getElementById("quote").innerHTML =
    '<p>' + quote.text + '</p>' +
    '<img class="img-circle" src="' + quote.img + '">';
})();
.img-circle{
  border-radius: 50%;
}
<div id="quote"></div>

Comments