PROTOTÜRK API KULLANIMI | Cevap #3169

kendimi geliştirmek amacıyla prototürkün desteklediği apı sistemini kullanmak istedim ve şu şekilde bir şablon oluşturdum


<!doctype html>
<html lang="tr">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <title>Hello, world!</title>
  </head>
  <body>
  
<div class="orta" style="margin:auto; padding:20px;margin-top:50px; width:500px;min-height:500px; background-color:#eee">
<form method="post" id="form">
<label for="arama" class="form-label">Prototürk Sitesinde Öğrenmek İstediğini Ara</label>
<input type="text" name="arama" id="arama" class="form-control"><center><button type="submit" class="btn btn-success mt-2">Ara</button></center>

</form> <hr id="cizgi">
<div class="card mb-3 mt-3" style="max-width: 540px;" id="var">
  <div class="row g-0">
    <div class="col-md-4">
      <img style="border:none" class="img-thumbnail mt-2 ml-2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1200px-CSS3_logo_and_wordmark.svg.png" alt="">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title" id="sonuc-baslik"></h5>
        <p class="card-text" id="sonuc-aciklama"><div class="30"></div></p>
        <p class="card-text"><small class="text-muted" id="sonuc-yazar"> </small></p>
      </div>
    </div>
  </div>
</div>
<div class="card text-white bg-danger mb-3" id="hata">
  
  <div class="card-body" >
    <h5 class="card-title" >Kelime: <span id="hata-kelime"></span></h5>
    <p class="card-text">Aradığınız Kelimeye Ait Makale Bulunamadı</p>
  </div>
</div>
</div>
<script>
$("#var").hide();
$("#hata").hide();
$("#cizgi").hide();

$(document).on("submit", "#form", function(event){ 
      event.preventDefault();
      let kelime = $("#arama").val();
      
      $.ajax({
      url :"https://prototurk.com/api/css/"+kelime+".json",
      type : "GET",
      success : function(proto) {
      $("#var").show();
      $("#cizgi").show();
      $("#sonuc-baslik").html(proto.title);
      $("#sonuc-aciklama").html(proto.description);
      $("#sonuc-yazan").html(proto.author);
      },
      error : function(){
        $("#hata").show();
        $("#hata-kelime").html(kelime);
      $("#cizgi").show();
      }

     });
    }); 
</script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
    
  </body>
</html>

kodlarda burada fakat ajaxta veri almak istediğimde
konsolda

- Access to XMLHttpRequest at 'https://prototurk.com/api/css/all.json' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
- jquery-3.5.1.js:10099 GET https://prototurk.com/api/css/all.json net::ERR_FAILED
send @ jquery-3.5.1.js:10099
ajax @ jquery-3.5.1.js:9682
(anonymous) @ protoapi.php:52
dispatch @ jquery-3.5.1.js:5429
elemData.handle @ jquery-3.5.1.js:5233

hatası aldım ne yapmalıyım bu hatayı gidermek için bide veriyi çektikten sonra

// 20201228191652
// https://prototurk.com/api/css/all.json

{
  "author": "tayfunerbilen <tayfunerbilen@gmail.com>",
  "title": "CSS'de all Özelliği",
  "name": "all",
  "syntax": "all: initial | inherit | unset;",
  "js_syntax": "object.style.all="initial"",
  "description": "Elemanın tüm css özelliklerini başlangıçtaki ya da devralınmış özelliklerine geri döndürür.",
  "version": "CSS3",
  "browser_support": "css/properties/all.json",
  "values": [
    {
      "value": "initial",
      "description": "Tüm özellikleri başlangıç değerine döndürür yani sıfırlar."
    },
    {
      "value": "inherit",
      "description": "Tüm özellikleri üst nesnesinden devraldığı değerlere döndürür."
    },
    {
      "value": "unset",
      "description": "Tüm özellikleri üst nesnesinden devralıyorsa ona, almıyorsa varsayılan değerlerine geri döndürür."
    }
  ],
  "examples": [
    {
      "code": "<style>n    html {n        color: blue;n    }n    .test {n        background: red;n        color: yellow;n        direction: rtl;n    }n    .test.initial {n        all: initial;n    }n    .test.inherit {n        all: inherit;n    }n    .test.unset {n        all: unset;n    }n</style>nn<div class="test">bu bir testtir.</div>n<div class="test initial">bu bir testtir.</div>n<div class="test inherit">bu bir testtir.</div>n<div class="test unset">bu bir testtir.</div>",
      "description": "Tüm değerlerini tek bir örnekte açıklamak gerekirse;"
    }
  ],
  "animatable": false
}

value değerlerini nasıl listelerim