How to Show W3C Specification data using Web API

W3C API JSON

Hello friends today we gonna learn about How to Show W3C Specification data using Web API. So read this article, How to Show W3C Specification data using Web API step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

Guide: How to Show W3C Specification data using Web API

The Emmy® award-winning W3C is an international standardization body for the World Wide Web. It creates and constantly revises new web standards to keep them consistent and relevant around the world.

Browsers and websites have become more standard compliant over time, allowing websites to display uniformly and work across all different browsers. One of the most useful publicly available resources is the W3C specification documentation at w3c.org.

Recently, W3C made its data available through a web API, whose project page is in Github. The intro to this API from the project page is as follows:

“In response to demand from developers in our community who want to interact with W3C data, the W3C Systems Team has developed a web API. With this we make data available about specifications, groups, organizations and users. “

We will see in today’s post how to get the specification data through the W3C APIYou can find the various requests you can post to get the specification data and others at https://api.w3.org/doc, it also comes with a sandbox for any request to test the API, but you have an API key.

Let’s take a look first how to get the API key

  1. Log in to your W3C account or create one.
  2. Then go to Manage API Keys on your profile page.
  3. Click New API Key and give it a name to generate your key.
  4. If you want, you can copy and paste it into the api key text box at the top of the webpage https://api.w3.org/doc to test the API in the sandbox.

For this post, we’ll look the request that uses short names to display the specification URL, description, and document statusThe request looks like this:

https://api.w3.org/Specifications/onderdelenshortnameekenen?apikey=vragenapikeyaatsen&_format=json

For example, an HTML5 specification request will look like this;

https://api.w3.org/Specifications/html5?apikey=vragenapikeyaatsen&_format=json

Now let’s focus on the HTML we will use to display the data retrieved through the API. For this I decided to use HTML template. HTML templates are used to hold HTML code that is parsed but not displayed until added to the page with JavaScript.

W3C SPECS

The template is ready. Now to the JavaScript that will make the HTTP request and display the JSON data in HTML. Here’s the set of global variables we’ll start with:

var shortnames = [‘html5′,’selectors4′,’battery-status’,’fullscreen’], xmlhttp = new XMLHttpRequest (), w3cSpecsEle = document.querySelector (‘# w3cSpecs’), templateEle = document.querySelector (‘Template’);

short names is a series of short names of the specifications that we want to display on our web page; if you want to find the short name of a specification look at the W3C URL and you will be able to see it at the end.

However, it is not guaranteed that you will be able to get all specifications this way; there is not yet a definitive list of short names and specifications available through the API.

Go through the shortnames array and make an HTTP request for each, getting the response.

for (var i = 0; i[i]+ ‘? apikey = {your-api-key} & _ format = json ‘, false); xmlhttp.send (); xmlhttp.onreadystatechange = checkRequestState ();}

function checkRequestState () {if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {var jsonResponse = JSON.parse (xmlhttp.responseText); displaySpec (jsonResponse)}}

The responseText is a JSON string and must be parsed to get the JSON object. displaySpec is the function that uses the JSON data and displays it in HTML.

Below is the sample JSON response text for HTML5 specification and after the code for displaySpec.

function displaySpec (json) {if (‘content’ in templateEle) {/ * get the content of the template * / templateEleContent = templateEle.content; / * add a specification title to the h2 header * / w3cSpecHeader = templateEleContent.querySelector (‘. w3cSpecHeader’); w3cSpecHeader.textContent = json.title; / * add spec URL to the link * / w3cSpecLink = templateEleContent.querySelector (‘. w3cSpecLink’); w3cSpecLink.textContent = json.shortlink; w3cSpecLink.href = json.shortlink; / * .short description * / w3cSpecDetail = templateEleContent.querySelector (‘. w3cDescription’); w3cSpecDetail.innerHTML = json.description; / * add spec status and color it based on the value * / W3cSpecLatestVerStatus = templateEleContent var.querySelector (‘status flag’); = json._links[“latest-version”].title; W3cSpecLatestVerStatus.textContent = status; switch (status) {case ‘Recommendation’: W3cSpecLatestVerStatus.className = “recommendation”; pause; case ‘Working Draft’: W3cSpecLatestVerStatus.className = “draft”; break; case ‘Retired’: W3cSpecLatestVerStatus.className = “retired”; break; case ‘Candidate Recommendation’: W3cSpecLatestVerStatus.className = “candidateRecommendation”; break;} / * add a copy of the template content to the root section * / w3cSpecsEle.appendChild (document.importContent (, true));} else {/ * add JS code to make the elements separately * /}}

if (‘content’ in templateEle) is to check if HTML template is supported by browser, if not create all HTML elements in JS itself. And if there is support, fill the HTML elements in the template content with the respective data from JSON, and finally add a copy of the template content to the main # w3cSpecs div.

That is it. With a little CSS style, the output looks like this:

W3C API output

back to menu ↑

How to Show W3C Specification data using Web API: benefits

  • The How to Show W3C Specification data using Web API tutorial is free .
  • This guide already helps so many users follow up with interest in a timely manner.
  • The price of the How to Show W3C Specification data using Web API guide is free.

back to menu ↑

Faq

Tutorial summary of How to Show W3C Specification data using Web API

In this guide, we told you about the How to Show W3C Specification data using Web API; please read all steps so that you understand How to Show W3C Specification data using Web API in case if you need any assistance from us, then contact us.

How this tutorial helping you?

So in this guide, we discuss the How to Show W3C Specification data using Web API, which undoubtedly helps you.

What is actual time in which this method complete?

The time to complete the How to Show W3C Specification data using Web API tutorial is 10+ minutes.

What are the supported Device?

PC Laptop or Desktop


back to menu ↑

Final note

I hope you like the guide How to Show W3C Specification data using Web API. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends.

For our visitors: If you have any queries regards the How to Show W3C Specification data using Web API, then please ask us through the comment section below or directly contact us.
Education: This guide or tutorial is just for educational purposes.
Misinformation: If you want to correct any misinformation about the guide “How to Show W3C Specification data using Web API”, then kindly contact us.
Want to add an alternate method: If anyone wants to add more methods to the guide How to Show W3C Specification data using Web API, then kindly contact us.
Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off).
Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.

Compsmag
Logo
Shopping cart