ランダムクォートマシン（格言ランダムジェネレーター）
Random Quote Machine
Freecodecampでタスクを実行するには、APIを介してモットージェネレーターを完了する必要があります。
しかし、私はインターネット上で多くのAPIを見つけ、それを使用できませんでした。最後に、ブロガーのブログでAPIを見つけました。これは、個人的なテストに利用できました。
その効果を下図に示します（共有機能はまだ作成されていません）
デモをチェックしてください：https：//codepen.io/Maktub_/full/rJEReK
github：https：//github.com/zxy1029/Random-Quote-Machine
HTMLコード：
Mother of mercy, is this the end of Rico? New quote by zhang CSSコード：
body { background-color: #16a085 } .card { width: 550px margin: 8% auto auto auto background-color: #FFF border-radius: 3px padding:40px 50px border-style: none } .footer { text-align: center color: #fff } .me { color: #FFF } .fa-quote-left { color: #16a085 } .text-author { text-align: right color: #16a085 } .button{ margin-top:30px } .btn { color: #FFF font-size: 25px background-color: #16a085 } #text { text-align:center color: #000 font-size: 30px } #txt{ color: #16a085 } #r-btn { float: right } JS code $(document).ready(function(){ var colors = [ '#27ae60', '#2c3e50', '#f39c12', '#e74c3c', '#9b59b6', '#FB6964', '#342224', '#472E32', '#BDBB99', '#77B1A9', '#73A857'] var i=0 $('#r-btn').click(function(){ $('body').css({'background-color':colors[i%11]}) $('.btn').css({'background-color':colors[i%11]}) $('#txt').css({'color':colors[i%11]}) $('.fa-quote-left').css({'color':colors[i%11]}) $('.text-author').css({'color':colors[i%11]}) i++ getQuote() }) var content='' var author='' var getQuote = function(){ $.getJSON('https://sslapi.hitokoto.cn/?encode=json',function(json){ content = json['hitokoto'] author = json['from'] $('#txt').html(content) $('#author').html('-'+author) }) } }) |_+_|
まだまだ完成していない機能がたくさんありますので、今後も改良を重ねていきます。