Database64 Element Demo

Global CDN:

        https://cdn.database64.com/lib/1.0/database64.js

runat="client"

Loads the source from client, TEXT required.

runat="server"

Loads the source from server, URL required.

Plaintext

runat="client"

Markup

<database-64 id="plaintexttestclient" content-type="plaintext"
   source="Hello this is Plaintext from client"
   runat="client" style="color:red;font-weight:bolder">
</database-64>

runat="server"

Markup

<database-64 id="plaintexttestserver" content-type="plaintext" data-name="data"
   source="/api_plain_text_test"
   runat="server" style="color:red;font-weight:bolder">
</database-64>

HTML

runat="server"

HTML Page from URL

Markup

       <database-64 id="htmltestserver" content-type="html" data-name="data"
                source="/Articles/The-cognitive-web"
                runat="server" style="color:red;font-weight:bolder">
       <script>
           htmltestserver.data.then(html => {
                        // alert(html);                        
                     });
       </script>
   </database-64>

HTML

runat="client"

HTML markup text

Markup

  <database-64 id="htmltestclient" content-type="html" data-name="data"
                   source="<p>Never Stop <strong style='color:red;text-emphasis:dot'>Dreaming<p>"
                   runat="client" style="color:blue;font-weight:bolder;">
      <script>       
         // alert(htmltestclient.data);                 
      </script>
  </database-64>

Base64

runat="client"

Markup

    <database-64 id="base64testclient" content-type="base64"
                     source="SGVsbG8gSSdtIGRhdGFiYXNlLWxlc3MgY29udGVudA=="
                     runat="client">
    </database-64>

runat="server"

Markup

    <database-64 id="base64testserver" content-type="base64" data-name="data"
                     source="/api_base64_test"
                     runat="server">
    </database-64>

Json

runat="client"

Markup

   <database-64 id="item1client" data-name="data" content-type="json"
                    source='{"name":"Alex","lastName":"Hernandez","company":"Arrowat LLC"}'
                    runat="client" style="color:darkcyan">
       <p id="item1client_name"></p>
       <p id="item1client_company"></p>
       <script>
           item1client_name.textContent= `${item1client.data.name} ${item1client.data.lastName}`;
           item1client_company.textContent=`${item1client.data.company}`
       </script>
   </database-64>

runat="server"

Markup

 <h3>runat="server"</h3>
 <database-64 id="item1server" data-name="data" content-type="json"
              source="/api_json_test"
              runat="server" style="color:cornflowerblue">
     <p id="item1server_name"></p>
     <p id="item1server_company"></p>
     <script>
         item1server.data.then(item => {
            document.getElementById("item1server_name").textContent = `${item.name} ${item.lastName}`;
            document.getElementById("item1server_company").textContent = item.company;
          });
     </script>
 </database-64>

Json64

runat="client"

Markup

    <database-64 id="item2client" data-name="data" content-type="json64"
                 source="eyJuYW1lIjoiTWVsdmluIiwibGFzdE5hbWUiOiJIZXJuYW5kZXoiLCJjb21wYW55IjoiQXJyb3dhdCBMTEMifQ"
                 runat="client">

        <p id="item2client_name"></p>
        <p id="item2client_company"></p>
        <script>
            item2client_name.textContent= `${item2client.data.name} ${item2client.data.lastName}`;
            item2client_company.textContent=`${item2client.data.company}`
            var elementitems = document.getElementById("item2client");
            elementitems.style.color="purple";
        </script>
    </database-64>

runat="server"

Markup

  <database-64 id="item2server" data-name="data" content-type="json64"
               source="/api_json64_test"
               runat="server" style="color:orangered">
      <p id="item2server_name"></p>
      <p id="item2server_company"></p>
      <script>
          item2server.data.then(data => {
            document.getElementById("item2server_name").textContent = `${data.name} ${data.lastName}`;
            document.getElementById("item2server_company").textContent = data.company;
          });
      </script>
  </database-64>

image64

runat="client"

Markup

 <database-64 content-type="image64" alt="image64" style="height:200px;border-radius:8px"
                 source="imageinbase64"
                 runat="client">
 </database-64>

runat="server"

Markup

 <database-64 content-type="image64" alt="image64" style="height:200px;border-radius:8px"
              source="/Api_image64_test"
              runat="server">
 </database-64>

Frame

runat="server"

Markup

<database-64 content-type="frame" title="this frame is running content from server" style="height:600px;width:400px; border-radius:8px; border:2px red solid"
        source="https://sa17745.satelliteintent.com/capsule?open=U3VuZGF5LCBOb3ZlbWJlciAwMiwgMjAyNSBhdCAxMjo1NyBQTQ0KDQpBdXRob3I6IE1lbHZpbiBIZXJuYW5kZXoNClNpZ25hbCBJZGVudGl0eTogbWVsdmluLmFycm93YXQuaWQNClBsYXRmb3JtOiBBcnJvd2F0DQpBcnJvd2F0IFByb2ZpbGU6IGh0dHBzOi8vYXJyb3dhdC5jb20vbWVsdmluDQoNCk91ciBjcm9zcy1wbGF0Zm9ybSBhcHBzIGRldmVsb3BlZCBhdCBBcnJvd2F0IExMQyBDb21wYW55IA0KDQpXZSBoYXZlIGRldmVsb3BlZCBhcHBzIHRhaWxvcmVkIGZvciBib3RoIGJ1c2luZXNzIGFuZCBpbmRpdmlkdWFsIG5lZWRzOg0KDQrwn5S0IEFycm93YXQgRW5jcnlwdG9yDQoNCvCflLQgQXJyb3dhdCBQT1MgU3lzdGVtDQoNCvCflLQgQXJyb3dhdCBMYWJlbCBDcmVhdG9yDQoNCvCflLQgQXJyb3dhdCBXb3JrZm9yY2UNCg0K8J-UtCBKYXZhU2NyaXB0IFN0dWRpbw0KDQrwn5S1IFN1YlBsYXllcg0KDQrwn5S1IFN5c3RlbSBTcGVlY2gNCg0K8J-UtSBTY2hvb2wgWm9uZQ0KDQrwn5S1IFNob3J0IExpbmsgQ3JlYXRvcg0KDQrwn5S1IFZpcnR1YWwgTGFuZ3VhZ2UNCg0KQXZhaWxhYmxlIGZvciBXaW5kb3dzIDExLCBBbmRyb2lkLCBpUGhvbmUsIGlPUw0KDQpMZWFybiBtb3JlIGFib3V0IG91ciBhcHBzIGF0IA0K8J-UlyBhcHBzLmFycm93YXRsbGMuY29tDQoNCk9yaWdpbmFsIFBvc3QgYXQ6IGFycm93YXQuY29tL21lbHZpbi9wb3N0L3NhOVFqaXFmcjk3dWRrQmZHTXFmUnhsU3FiTVRPUGpPRmpveFZGcGRjektKekdYWVNQRlNNSVp2WEsxVUlTNDU3NjQyMTkyMjAwMDg1ODc3ODFSc3hLdWF6Y1NJSUpiV0pVb2hQNExYa0xOVmpDbDV5ZUxiVjRPSlRBWGx2RnkwZHl6ZjFmU0IySGVmYnIzUWMzYTE3ZjE0ODVhNzQ2ZjNiZWQ3MDFmODUxOTE4MjJk"
        runat="server">
</database-64>

runat="client"

Markup

<database-64 content-type="frame" title="This frame is running content from client" class='backgound-color-orangered' style="border-radius:8px;border:2px black solid"
        source="<style>.color-white{color:white}</style><p class='color-white' style='text-decoration:overline'><strong>Name:</strong> Melvin Hernandez</p><p><strong>Company:</strong> Arrowat LLC</p>"
        runat="client">
</database-64>

Database64 script Demo

Plaintext

runat="client"

Markup

 <p id="plaintextclient" style="color:red"></p>
 <script>
         var database64PlainText = new Database64.Source("This i a plain text from client","plaintext","client");
        async function showPlainText() {
           const text = await database64PlainText.Open();
             plaintextclient.innerText = `${text}`;
     }
     showPlainText();
 </script>

runat="server"

Markup

  <p id="plaintextserver" style="color:darkviolet"></p>
  <script>
          var database64PlainText = new Database64.Source("/api_plain_text_test","plaintext","server");
         async function showPlainText() {
            const text = await database64PlainText.Open();
              plaintextserver.innerText = `${text}`;
      }
      showPlainText();
  </script>

html

runat="client"

Markup

 <div id="htmlclient" style="color:fuchsia;"></div>
<script>
    var htmlclientsource = new Database64.Source("<p style='font-weight:bolder;color:green'>Read about the cognitive web at <a href='https://thecognitiveweb.com' target='_blank' style='font-weight:normal;text-decoration:underline'>thecognitiveweb.com</a></p>","html","client");
       async function showhtmlclient() {
          const html = await htmlclientsource.Open();
            htmlclient.innerHTML = `${html}`;
    }
    showhtmlclient();
</script>

html

runat="server"

Markup

       <div id="htmlserver" style="color:dodgerblue"></div>
   <script>
       var htmlserversource = new Database64.Source("/Articles/The-cognitive-web","html","server");
              async function showhtmlserver() {
                 const html = await htmlserversource.Open();
                   htmlserver.innerHTML = `${html}`;
           }
           showhtmlserver();
   </script>

Base64

runat="client"

Markup

    <p id="showbase64fromclient" style="color:limegreen"></p>
    <script>
            var database64 = new Database64.Source("SGVsbG8gSSdtIGRhdGFiYXNlLWxlc3MgY29udGVudA==","base64","client");
            async function showBase64() {
               const text = await database64.Open();
                showbase64fromclient.innerText = `${text}`;
         }
        showBase64();
    </script>

runat="server"

  <p id="showbase64fromserver" style="color:dodgerblue"></p>
  <script>
          var database64 = new Database64.Source("/api_base64_test","base64","server");
          async function showBase64() {
             const text = await database64.Open();
              showbase64fromserver.innerText = `${text}`;
       }
      showBase64();
  </script>

Json

runat="client"

Markup

<pre id="productinfoclientJSON" style="color:blue"></pre>
 <script>
      var productinfo={product:{details:{ name : "Arrowat Encryptor",
      description : "Arrowat Encryptor provides the way to save the encrypted content to file with a separated encrypted key that is used to decrypt the content",
      developer : "Arrowat LLC",
      more:{price:"FREE",
      releasedate:"12/7/2021",
      platforms:"Android, iOS, Windows",
      downloadat:"https://apps.arrowatllc.com/arrowatencryptor"
      }}}};
      var database64JSON = new Database64.Source(productinfo,"json","client");
     async function showDataJSON() {
          const data = await database64JSON.Open();
             productinfoclientJSON.innerHTML = `
             Product Name: ${data.product.details.name}
             Description: ${data.product.details.description}
             Developer: ${data.product.details.developer}
             Price: ${data.product.details.more.price}
             Release Date: ${data.product.details.more.releasedate}
             Platforms: ${data.product.details.more.platforms}
             Website: <a href='${data.product.details.more.downloadat}' target'_blank'>${data.product.details.more.downloadat}</a>`;
     }
     showDataJSON();
 </script>

runat="server"

Markup

  <pre id="productinfoserverJSON" style="color:blue">
  </pre>
  <script>
       var database64JSON = new Database64.Source("/api_productinfo_json_test","json","server");
      async function showDataJSON() {
           const data = await database64JSON.Open();
              productinfoserverJSON.innerHTML = `
              Product Name: ${data.product.details.name}
              Description: ${data.product.details.description}
              Developer: ${data.product.details.developer}
              Price: ${data.product.details.more.price}
              Release Date: ${data.product.details.more.releasedate}
              Platforms: ${data.product.details.more.platforms}
              Website: <a href='${data.product.details.more.downloadat}' target = '_blank'>${data.product.details.more.downloadat}</a>`;
      }
      showDataJSON();
  </script>

Json64

runat="client"

Markup

   <pre id="personinfojson64" style="color:red"></pre>
   <script>
       var database64JSON = new Database64.Source("eyJuYW1lIjoiTWVsdmluIiwibGFzdE5hbWUiOiJIZXJuYW5kZXoiLCJjb21wYW55IjoiQXJyb3dhdCBMTEMifQ","json64","client");
       async function showDataJSON() {
            const data =await database64JSON.Open();
               personinfojson64.innerText = `
               Name: ${data.name} 
               Last Name: ${data.lastName} 
               Company:${data.company}`;
       }
       showDataJSON();
   </script>

runat="server"

Markup

   <pre id="personinfoserverjson64" style="color:blue"></pre>
   <script>
       var database64JSON = new Database64.Source("/api_json64_test","json64","server");
       async function showDataJSON() {
            const data =await database64JSON.Open();
               personinfoserverjson64.innerText = `
               Name: ${data.name}
               Last Name: ${data.lastName}
               Company: ${data.company}`;
       }
       showDataJSON();
   </script>

Image64

runat="client"

Markup

  <img id="displayimage64" style="height:200px;border:pink 5px solid" alt="" />
  <script>
     var dataImage64 = new Database64.Source("imageinbase64","image64","client");
     async function showImage64() {
           const image64 = await dataImage64.Open();
           displayimage64.src = `${image64}`;
     }
     showImage64();
  </script>

runat="server"

Markup

     <img id="displayserverimage64" style="height:200px;border:pink 5px solid" alt="" />
     <script>
            var dataImage64 = new Database64.Source("/Api_image64_test","image64","server");
             async function showImage64() {
                    const image64 = await dataImage64.Open();
                     displayserverimage64.src = `${image64}`;
          }
         showImage64();
     </script>