<div class="grid grid-cols-auto gap-1">
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 1</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 2</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 3</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 4</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 5</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 6</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 7</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 8</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 9</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 10</div>
 </div>

<div class="grid grid-cols-3 gap-1">
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 1</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 2</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 3</div>
</div>

<div class="grid grid-cols-2 gap-1">
          <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 1</div>
          <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 2</div>
</div>

<div class=" position-rel width-scaled-8  m-auto box-shadow-1 ">
     <figure>
       <img src="/utilities-css/image/luis-quintero-3qqiMT2LdR8-unsplash.jpg" alt="" srcset="" class="wt-100 height-auto rounded-top-2 rounded-top-2">
     </figure>
     <div class="position-ab flex justify-center items-center top-0 ht-100 bg-overlay z-index-2 wt-100 text-color-grey-0 text-bold text-m">
          <p>Out of Stock</p>
     </div>
   <div class="pd-x-4">
       <div class="flex flex-column m-y-4">
          <h3> Levis black</h3>
          <small class="text-color-grey-2">T-Shirt</small>
       </div>
       <div class="m-y-4">
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est saepe accusamus, autem vitae expedita sunt ab excepturi sint, laudantium culpa quas omnis perspiciatis corrupti eligendi qui placeat. Cupiditate, libero fugiat?</p>
       </div>
       <div class="m-y-4">
           <span class="text-bold">₹399.00</span>
       </div>
       <div class="flex flex-column gap-1 m-y-4">
           <button class="bg-black-6 text-color-grey-0 cursor pd-y-4"> Add To Cart</button>
           <button class=" bg-green-8 text-color-grey-0 cursor pd-y-4">Buy Now</button>
       </div>
  </div>
  <div class="position-ab top-0 right-0 text-color-grey-4">
     <i class="fa-solid fa-square-xmark fa-2x"></i>
  </div>

<div class=" position-rel flex items-center justify-btw width-scaled4-8 box-shadow-1 ">
           <figure class="flex-1">
                   <img src="/utilities-css/image/Levis-s.png" alt="Vertical-card" srcset="" class=" object-content-center">
           </figure>
     <div class="pd-x-4 flex-1">
          <div class="flex flex-column m-y-4">
               <h3> Levis black</h3>
               <small class="text-color-grey-2">T-Shirt</small>
          </div>
          <div class="m-y-4">
               <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est saepe accusamus, autem vitae expedita sunt ab excepturi sint, laudantium culpa quas omnis perspiciatis corrupti eligendi qui placeat. Cupiditate, libero fugiat?</p>
          </div>
          <div class="m-y-4">
               <span class="text-bold">₹399.00</span>
          </div>
          <div class="flex flex-column gap-1 m-y-4">
               <button class=" bg-green-8 text-color-grey-0 cursor pd-y-4">Buy Now</button>
          </div>
     </div>
     <div class="position-ab top-0 right-0 ">
          <button>
                <i class="fa-solid fa-square-xmark fa-2x text-color-grey-3"></i>
          </button> 
     </div>
</div>

<div class=" position-rel flex items-center width-scaled4-8 box-shadow-1 ">
  <figure class="flex-1">
     <img src="/utilities-css/image/Levis-s.png" alt="Vertical-card" srcset="" class=" object-content-center">
  </figure>
  <div class="pd-x-4 flex-1  wt-60 justify-even  ">
      <div class="flex flex-column m-y-4">
           <h3> Levis black</h3>
           <small class="text-color-grey-4">T-Shirt</small>
      </div>
      <div class="m-y-4">
           <span class="text-bold text-m">₹399.00</span>
      </div>
      <div class="flex flex-column gap-1 m-y-4">
           <button class=" bg-green-8 text-color-grey-0 cursor pd-y-4">Buy Now</button>
      </div>
   </div>
  <div class="position-ab top-0 right-0 ">
       <button>
            <i class="fa-solid fa-square-xmark fa-2x text-color-grey-3"></i>
       </button> 
  </div>
</div>

<div class=" position-rel width-scaled-8  m-auto box-shadow-1 ">
     <figure>
       <img src="/utilities-css/image/luis-quintero-3qqiMT2LdR8-unsplash.jpg" alt="" srcset="" class="wt-100 height-auto rounded-top-2 rounded-top-2">
     </figure>
   <div class="pd-x-4">
       <div class="flex flex-column m-y-4">
          <h3> Levis black</h3>
          <small class="text-color-grey-2">T-Shirt</small>
       </div>
       <div class="m-y-4">
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est saepe accusamus, autem vitae expedita sunt ab excepturi sint, laudantium culpa quas omnis perspiciatis corrupti eligendi qui placeat. Cupiditate, libero fugiat?</p>
       </div>
       <div class="m-y-4">
           <span class="text-bold">₹399.00</span>
       </div>
       <div class="flex flex-column gap-1 m-y-4">
           <button class="bg-black-6 text-color-grey-0 cursor pd-y-4"> Add To Cart</button>
           <button class=" bg-green-8 text-color-grey-0 cursor pd-y-4">Buy Now</button>
       </div>
  </div>
  <div class="position-ab top-0 right-0 text-color-grey-4">
     <i class="fa-solid fa-square-xmark fa-2x"></i>
  </div>
</div>

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

<div class="box-shadow-1 m-auto pd-5 flex width-scaled-8 flex-column m-y-8 rounded-s position-rel">
 <div class="flex flex-column">
    <h4>Cards Title</h4>
    <small>Text Secondary</small>
 </div>
 <div class="m-y-5"> 
     <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel, minus recusandae aut est reiciendis voluptates odit veritatis doloribus delectus beatae culpa fugiat eaque eveniet? Cum, voluptas beatae earum quia similique consequuntur minima optio minus animi aliquam impedit placeat dignissimos quod, dolorem facere iusto! Excepturi natus obcaecati doloribus consectetur eveniet ipsum.</p>
 </div>
  <div class="position-ab top-5 right-5">
     <i class="fas fa-heart text-color-red-5 cursor"></i>
  </div>
</div>

.live-demo-containter {
    background: #004188;
    padding-top: 2.5rem;
    position: relative;
    margin: 0 0 30px 0;
}
.live-demo-containter::after {
    content: "";
    background: #004188;
    position: absolute;
    left: 50%;
    top: 0px;
    width: 100vw;
    transform: translate(-50%,0);
    height: 100%;
    z-index: -1;
}

<div class=" position-rel flex justify-end">
       <img src="/utilities-css/image/christopher-campbell-rDEOVtE7vOs-unsplash.jpg" class="width-6 height-6rem object-fit-cover rounded-full" alt="">
       <span class="position-ab  bg-brown-5 width-1 height-1rem rounded-full top-0 right-10">              </span>
</div>
<div class=" position-rel flex justify-end">
       <img src="/utilities-css/image/christopher-campbell-rDEOVtE7vOs-unsplash.jpg" class="width-6 height-6rem object-fit-cover rounded-full" alt="">
       <span class="position-ab  bg-green-5 width-1 height-1rem rounded-full top-0 right-10">              </span>
</div>
<div class=" position-rel flex justify-end">
       <img src="/utilities-css/image/norway.jpg" class="width-6 height-6rem object-fit-cover rounded-full" alt="">
       <span class="position-ab  bg-red-5 width-1 height-1rem rounded-full top-0 right-10"></span>
</div>

<div class="  position-rel text-color-green-7">
        <i class="fas fa-envelope fa-2x "> </i>
        <span class="flex justify-center items-center text-color-grey-0 pd-4 width-1 height-1rem  position-ab bg-brown-7 rounded-full  text-s top--50 right--50 text-s  ">4</span>
</div>
<div class=" position-rel text-color-green-7">
        <i class="fas fa-envelope fa-2x"> </i>
        <span class=" flex justify-center items-center text-color-grey-0  position-ab  width-2 height-2rem bg-brown-7 rounded-full top--50 right--50 text-s">24</span>
</div>
<div class=" position-rel text-color-green-7">
        <i class="fas fa-envelope fa-2x "> </i>
        <span class="flex justify-center items-center text-s bg-brown-7 position-ab rounded-full  width-2 height-2rem top--50 right--50 text-color-grey-0" >124</span>
</div>

 <span class="flex justify-center items-center text-lg width-8 height-8rem bg-green-7 object-fit-cover rounded-full" >M</span>
<span class="flex justify-center items-center text-m width-6 height-6rem bg-green-7 object-fit-cover rounded-full" >G</span>
<span class="flex justify-center items-center text-xm width-4 height-4rem bg-green-7 object-fit-cover rounded-full" >D</span>

<img class="width-8 height-8rem object-fit-cover rounded-full" src="/utilities css/image/christopher-campbell-rDEOVtE7vOs-unsplash.jpg" alt="">
<img class="width-6 height-6rem object-fit-cover rounded-full" src="/utilities-css/image/christopher-campbell-rDEOVtE7vOs-unsplash.jpg" alt="">
<img class="width-4 height-4rem object-fit-cover rounded-full" src="/utilities-css/image/christopher-campbell-rDEOVtE7vOs-unsplash.jpg" alt="">

function explode(url, part) {
  let urlParts = url.replace('http://','').replace('https://','').split(/[/?#]/);
  return urlParts[part];
}

let url = 'http://scratch99.com/web-development/javascript/',
    domain = explode(url, 0),
    dir = explode(url, 1),
    subdir = explode(url, 2)

console.log(domain);
console.log(dir);
console.log(subdir);

<button class="saveBtn">Save 1</button>
<button class="saveBtn">Save 2</button>
<button class="saveBtn">Save 3</button>

<script>
  let saveBtn = document.getElementsByClassName('saveBtn');
  function myHandler() {
    console.log('Clicked');
  }
  Array.from(saveBtn).forEach(function (elm) { 
    elm.addEventListener('click', myHandler) 
  })
</script>

<article>
    <h2>Google Chrome</h2>
    <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>

html, body{
overflow-x: hidden;
}

<div class="bg-green-2 text-color-green-9 flex justify-btw items-center rounded-s  pd-x-8 pd-y-5 ">
       <span class=""><i class="fa-solid fa-circle-check pd-r-5"></i>A simple success alert—check it out!</span> 
        <span><i class="fa-solid fa-xmark"></i></span>
 </div>
 <div class="bg-red-2 flex items-center text-color-red-9 justify-btw   rounded-s  pd-x-8 pd-y-5 ">
         <span ><i class="fa-solid fa-triangle-exclamation pd-r-5"></i> A simple danger alert—check it out!</span>   
         <span><i class="fa-solid fa-xmark"></i></span>
 </div>
 <div class="bg-brown-2 flex items-center text-color-brown-9 justify-btw rounded-s pd-x-8 pd-y-5 ">
         <span class="pd-r-5"><i class="fa-solid fa-circle-exclamation pd-r-5"></i>A simple warning alert—check it out!</span> 
         <span><i class="fa-solid fa-xmark"></i></span>
 </div>

@import url('https://fonts.googleapis.com/css2?family=Oxygen+Mono&display=swap');

.dark .dark\:bg-gray-800,
.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgba(0，0，0, var(--tw-bg-opacity));
}

html {
  font-family: 'Oxygen Mono', monospace;
  background: #000;
  color: green;
}

.text-gray-800 {
  color: green;
}

.w-\[30px\].flex.flex-col.relative.items-end,
.lg\:pl-2,
.text-gray-800.w-full.md\:max-w-2xl.lg\:max-w-3xl.md\:h-full.md\:flex.md\:flex-col.px-6.dark\:text-gray-100,
.hidden.md\:fixed.md\:inset-y-0.md\:flex.md\:w-52.md\:flex-col.bg-gray-900,
.text-xs.text-black\/50.dark\:text-white\/50.pt-2.pb-3.px-3.md\:pt-3.md\:pb-6.md\:px-4.text-center ,.dark.hidden.bg-gray-900{
  display: none !important;
}

.flex.flex-1.flex-col.md\:pl-52.h-full {
  padding-left: 0;
  padding-top: 20px;
}

.md\:pl-\[260px\]{
padding:0
}

form {
  margin-bottom: 12px;
}

.dark .dark\:text-gray-100,
.bg-vert-light-gradient,
.dark .dark\:bg-vert-dark-gradient,
.dark .dark\:shadow-\[0_0_15px_rgba\(0\2c 0\2c 0\2c 0\.10\)\] {
  background: transparent;
}

form .dark .dark\:bg-vert-dark-gradient,
.dark .dark\:shadow-\[0_0_15px_rgba\(0\2c 0\2c 0\2c 0\.10\)\] {
  background: #ffffff0d;
  color: green;
}

.dark .dark\:bg-gray-800, .bg-gray-50{
background:#000
}

form .bg-white {
  background: #ffffff1a;
}

form .text-gray-500 {
  color: green !important;
  display: none;
}

.dark .dark\:border-gray-900\/50 {
  border-color: transparent;
}

.btn-neutral {
  background: transparent !important;
  border: 0;
  color: green !important;
}

.prose,
.dark .dark\:text-gray-100 {
  color: green;
}

.md\:py-6 {
  padding: 5px 0;
}

    <div class="container">
        <div class="inner">test</div>
        <div class="inner">test</div>
        <div class="inner">tset</div>
        <div class="inner">tset</div>
        <div class="inner">tset</div>
        <div class="inner">tset</div>
        <div class="inner">tset</div>
        <div class="inner">tset</div>
        <div class="inner">tset</div>
    </div>

.container{
    display: flex;
    justify-content: center;
    gap: 2px;
    border: 2px solid black;
    width: 100%;
    flex-wrap: wrap;
}

.inner{
    background-color: aqua;
    width: 24%;
    border: 2px solid black;
}

<div class="bg-green-2 text-color-green-9 flex items-center rounded-s  pd-x-8 pd-y-5 ">
    <span class="pd-r-5"><i class="fa-solid fa-circle-check"></i></span>
    A simple success alert—check it out!
</div>

<div class="bg-red-2 flex items-center text-color-red-9  rounded-s  pd-x-8 pd-y-5 ">
    <span class="pd-r-5"><i class="fa-solid fa-triangle-exclamation"></i></span>
    A simple danger alert—check it out!
</div>

<div class="bg-brown-2 flex items-center text-color-brown-9  rounded-s   pd-x-8 pd-y-5 ">
    <span class="pd-r-5"><i class="fa-solid fa-circle-exclamation"></i></span>
    A simple warning alert—check it out!
</div>

     <div class="bg-green-2 text-color-green-9 rounded-s  pd-x-8 pd-y-5 ">
                    A simple success alert—check it out!
     </div>
      <div class="bg-red-2 text-color-red-9  rounded-s  pd-x-8 pd-y-5 ">
                    A simple danger alert—check it out!
      </div>
      <div class="bg-brown-2 text-color-brown-9  rounded-s   pd-x-8 pd-y-5 ">
                    A simple warning alert—check it out!
      </div>

<!DOCTYPE html> 
<html lang="en"> 
  <head>
    <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 			 		
    <title>Document</title>
    <style>
      html {
        height: 100%;
      }
      body {
        margin:0; 
        padding:0;
        font-family: sans-serif;
        background: linear-gradient(#141e30, #243b55);
      }
      .login-box { 
        position: absolute;
        top: 50%;
        left: 50%;
        width: 400px;
        padding: 40px;
        transform: translate(-50%, -50%); 
        background: rgba(0,0,0, .5); 
        box-sizing: border-box;
        box-shadow: 0 15px 25px rgba(0, 0,0, .6);
        border-radius: 10px;
      }

      .login-box h2 { 
        margin: 0 0 30px;
        padding: 0; 
        color:#fff;
        text-align: center;
      }

      .login-box .user-box {
        position: relative;
      }

      .login-box .user-box input { 
        width: 100%;
        padding: 10px 0; 
        font-size: 16px;
        color: #fff;
        margin-bottom: 30px;
        border: none;
        border-bottom: 1px solid #fff; 
        outline: none;
        background: transparent;
      }

      .login-box .user-box label { 
        position: absolute;
        top: 0;
        left: 0;
        padding: 10px 0; 
        font-size: 16px;
        color: #fff;
        pointer-events: none;
        transition: .55;
      }

      .login-box .user-box input:focus ~ label,
      .login-box .user-box input:valid ~ label {
        top: -20px;
        left: 0;
        color: #03e9f4; 
        font-size: 12px;
      }

      .login-box form a {
        position: relative;
        display: inline-block;
        padding: 10px 20px;
        color: #03e9f4; 
        font-size: 16px;
        text-decoration: none;
        text-transform: uppercase;
        overflow: hidden;
        transition: .5s; 
        margin-top: 40px;
        letter-spacing: 4px
      }

      .login-box a:hover { 
        background: #039ef4;
        color: #fff;
        border-radius: 5px;
        box-shadow: 0 0 5px #03e9f4, 
                    0 0 25px #03e9f4, 
                    0 0 50px #03e9f4, 
                    0 0 100px #03e9f4;
      }

      .login-box a span { 
        position: absolute;
        display: block;
      }

      .login-box a span:nth-child(1) { 
        top: 0;
        left: -100%;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, transparent, #03e9f4);
        animation: btn-anim1 10s linear infinite;
      }

      @keyframes btn-anim1 {
        0% {
          left: -100%;
        }
        50%,100% {
          left: 100%;
        }
      }   
          
      .login-box a span:nth-child(2) { 
        top: -100%;
        right: 0;
        width: 2px;
        height: 100%;
        background: linear-gradient(180deg, transparent, #03e9f4);
        animation: btn-anim2 10s linear infinite;
        animation-delay: -7.5s
      }
      
      @keyframes btn-anim2 {
        0% {
          top: -100%;
        }
        50%,100% { 
          top: 100%;
        }
      }

      .login-box a span:nth-child(3) {
        bottom: 0;
        right: -100%;
        width: 100%;
        height: 2px;
        background: linear-gradient(270deg, transparent, #03e9f4);
        animation: btn-anim3 10s linear infinite;
        animation-delay: -5s
      }

      @keyframes btn-anim3 {
        0% {
          right: -100%;
        }
        50%,100% {
          right: 100%;
        } 
      }

      .login-box a span:nth-child(4) {
        bottom: -100%;
        left: 0;
        width: 2px;
        height: 100%;
        background: linear-gradient(360deg, transparent, #03e9f4);
        animation: btn-anim4 10s linear infinite;
        animation-delay: -2.5s
      }

      @keyframes btn-anim4 {
        0% {
          bottom: -100%;
        }
        50%,100% {
          bottom: 100%;
        } 
      }
    </style> 
  </head> 
  <body>
    <div class="login-box"> 
      <h2>Login</h2> 
      <form>
        <div class="user-box">
          <input type-"text" name="" required=""> 
          <label>Username</label> 
        </div> 
        <div class="user-box"> 
          <input type="password" name="" required="">
        <label>Password</label>
        </div>
        <div class="user-box"> 
          <a>
            LOGIN
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </a>
      </form>
    </div>
  </body>
</html>

<!DOCTYPE html> 
<html lang="en"> 
  <head>
	<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 			 		
  <title>Document</title>
	<style>
		.animate-charcter {
      text-transform: uppercase;
      background: linear-gradient(
        -225deg,
        #231557 0%,
        #44107a 29%,
        #ff1361 67%,
        #fff800 100%
      );

      background-size: auto auto; 
      background-clip: border-box; 
      background-size: 200% auto;
        color: #fff;
        background-clip: text;
        text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: textclip 4s linear infinite;
        display: inline-block;
        font-size: 140px; 
    }
    @keyframes textclip {
      to {
        background-position: 200% center;
      }
    }
	</style> 
  </head> 
  <body>
    <div class="container"> 
      <div class="row">
        <div class="col-md-12 text-center">
          <h3 class="animate-charcter"> Hello, Mike!</h3> 
        </div> 	
      </div>
    </div> 
  </body>
</html>

<table width="100%" border="1">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td rowspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

import { ImageResponse } from "@vercel/og";

export const config = {
  runtime: "experimental-edge",
};

export default function handler(req) {
  try {
    const { searchParams } = new URL(req.url);
    const hasTitle = searchParams.has("title");
    const title = hasTitle
      ? searchParams.get("title")?.slice(0, 100)
      : "Hello World!";

    return new ImageResponse(
      (
        <div
          style={{
            fontSize: 40,
            color: "#373737",
            background: "#ffffff",
            width: "100%",
            height: "100%",
            padding: "50px 200px",
            display: "flex",

            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <div
            tw="border-2 border-solid border-[#373737] p-2"
            style={{
              boxShadow: "11px 4px 3px 4px rgba(55,55,55,0.8)",
              display: "flex",
              gap: "10px",
            }}
          >
            <span tw="text-[100px]">{title}</span>
          </div>
        </div>
      ),
      {
        width: 1200,
        height: 630,
      }
    );
  } catch (e) {
    return new Response(`Failed to generate the image`, {
      status: 500,
    });
  }
}

import { groq } from "next-sanity";
import Link from "next/link";
import Card from "../../components/Card";
import DailyDevArticlesCard from "../../components/DailyDevArticlesCard";
import { sanityClient } from "../../config/Sanity";
import medium from "medium-sdk";

async function getDailyDevArticles() {
  const res = await fetch(`https://dev.to/api/articles?username=ashishpandey`);
  return res.json();
}

async function getData({ search, page = 1 }) {
  let searchQuery = search || "ashish";
  let postsPerPage = parseInt(page * 4);
  const query = groq`
   *[_type == "post" &&  (searchQueries match "${searchQuery}" || title match "${searchQuery}"  || excerpt match "${searchQuery}" )  ][0..${postsPerPage}] | order(_createdAt desc) {
    categories,excerpt,mainImage,slug,title,_createdAt,_id,imageSubtitle,imageTitle,
    author->{
      name,image
    }
   
  }
  `;
  const posts = await sanityClient.fetch(query);

  let postslength = posts.length;
  let disabled =
    Number.isInteger(Number(postslength / 5)) && postslength != 0
      ? false
      : true;
  return {
    posts,
    disabled,
  };
}

export default async function BlogPage({ searchParams }) {
  const { posts, disabled } = await getData(searchParams);
  const dailyDevArticlesRes = await getDailyDevArticles();

  const dailyArticles = await Promise.all(dailyDevArticlesRes);
  const page = parseInt(searchParams.page) || 1;
  const query = searchParams.search;
  return (
    <main className="overflow-hidden">
      <div className="p-10 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 xxl:grid-cols-3 gap-5">
        {posts?.map((item, i) => {
          return <Card data={item} />;
        })}
      </div>
      <div className="flex justify-center items-center">
        <Link
          href={`/blogs?page=${page + 1}&search=${query ? query : ""}`}
          disabled={disabled}
          className="relative inline-flex items-center justify-center px-10 py-4 overflow-hidden font-mono font-medium tracking-tighter text-white bg-gray-800 rounded-lg group"
        >
          <span className="absolute w-0 h-0 transition-all duration-500 ease-out bg-green-500 rounded-full group-hover:w-56 group-hover:h-56"></span>
          <span className="absolute inset-0 w-full h-full -mt-1 rounded-lg opacity-30 bg-gradient-to-b from-transparent via-transparent to-gray-700"></span>
          <span className="relative">
            {disabled ? "No more Posts" : "Load more"}
          </span>
        </Link>
      </div>
      <div className="p-10 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 xxl:grid-cols-3 gap-5">
        {dailyArticles?.map((item, i) => {
          return <DailyDevArticlesCard data={item} />;
        })}
      </div>
    </main>
  );
}

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>

<select>
    <option value="">Please select</option>
    <option value="China">China</option>
    <option value="Afghanistan">Afghanistan</option>
    <option value="Albania">Albania</option>
    <option value="Algeria">Algeria</option>
    <option value="Andorra">Andorra</option>
    <option value="Angola">Angola</option>
    <option value="Antigua and Barbuda">Antigua and Barbuda</option>
    <option value="Argentina">Argentina</option>
    <option value="Armenia">Armenia</option>
    <option value="Australia">Australia</option>
    <option value="Austria">Austria</option>
    <option value="Azerbaijan">Azerbaijan</option>
    <option value="Bahamas">Bahamas</option>
    <option value="Bahrain">Bahrain</option>
    <option value="Bangladesh">Bangladesh</option>
    <option value="Barbados">Barbados</option>
    <option value="Belarus">Belarus</option>
    <option value="Belgium">Belgium</option>
    <option value="Belize">Belize</option>
    <option value="Benin">Benin</option>
    <option value="Bhutan">Bhutan</option>
    <option value="Bolivia">Bolivia</option>
    <option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
    <option value="Botswana">Botswana</option>
    <option value="Brazil">Brazil</option>
    <option value="Brunei">Brunei</option>
    <option value="Bulgaria">Bulgaria</option>
    <option value="Burkina Faso">Burkina Faso</option>
    <option value="Burundi">Burundi</option>
    <option value="Cambodia">Cambodia</option>
    <option value="Cameroon">Cameroon</option>
    <option value="Canada">Canada</option>
    <option value="Cape Verde">Cape Verde</option>
    <option value="Central African Republic">Central African Republic</option>
    <option value="Chad">Chad</option>
    <option value="Chile">Chile</option>
    <option value="Colombia">Colombia</option>
    <option value="Comoros">Comoros</option>
    <option value="Congo">Congo</option>
    <option value="Congo (Kinshasa)">Congo (Kinshasa)</option>
    <option value="Cook Islands">Cook Islands</option>
    <option value="Costa Rica">Costa Rica</option>
    <option value="Cote d'Ivoire">Cote d'Ivoire</option>
    <option value="Croatia">Croatia</option>
    <option value="Cuba">Cuba</option>
    <option value="Cyprus">Cyprus</option>
    <option value="Czech">Czech</option>
    <option value="Denmark">Denmark</option>
    <option value="Djibouti">Djibouti</option>
    <option value="Dominica, Commonwealth of">Dominica, Commonwealth of</option>
    <option value="Dominican Republic">Dominican Republic</option>
    <option value="DPRK (Democratic People's Republic of Korea)">DPRK (Democratic People's Republic of Korea)</option>
    <option value="Ecuador">Ecuador</option>
    <option value="Egypt">Egypt</option>
    <option value="El Salvador">El Salvador</option>
    <option value="Equatorial Guinea">Equatorial Guinea</option>
    <option value="Eritrea">Eritrea</option>
    <option value="Estonia">Estonia</option>
    <option value="Eswatini">Eswatini</option>
    <option value="Ethiopia">Ethiopia</option>
    <option value="Fiji">Fiji</option>
    <option value="Finland">Finland</option>
    <option value="France">France</option>
    <option value="Gabon">Gabon</option>
    <option value="Gambia">Gambia</option>
    <option value="Georgia">Georgia</option>
    <option value="Germany">Germany</option>
    <option value="Ghana">Ghana</option>
    <option value="Greece">Greece</option>
    <option value="Grenada">Grenada</option>
    <option value="Guatemala">Guatemala</option>
    <option value="Guinea">Guinea</option>
    <option value="Guinea Bissau">Guinea Bissau</option>
    <option value="Guyana">Guyana</option>
    <option value="Haiti">Haiti</option>
    <option value="Honduras">Honduras</option>
    <option value="Hungary">Hungary</option>
    <option value="Iceland">Iceland</option>
    <option value="India">India</option>
    <option value="Indonesia">Indonesia</option>
    <option value="Iran">Iran</option>
    <option value="Iraq">Iraq</option>
    <option value="Ireland">Ireland</option>
    <option value="Israel">Israel</option>
    <option value="Italy">Italy</option>
    <option value="Jamaica">Jamaica</option>
    <option value="Japan">Japan</option>
    <option value="Jordan">Jordan</option>
    <option value="Kazakstan">Kazakstan</option>
    <option value="Kenya">Kenya</option>
    <option value="Kiribati">Kiribati</option>
    <option value="Korea (Republic of Korea)">Korea (Republic of Korea)</option>
    <option value="Kuwait">Kuwait</option>
    <option value="Kyrgyzstan">Kyrgyzstan</option>
    <option value="Laos">Laos</option>
    <option value="Latvia">Latvia</option>
    <option value="Lebanon">Lebanon</option>
    <option value="Lesotho">Lesotho</option>
    <option value="Liberia">Liberia</option>
    <option value="Libya">Libya</option>
    <option value="Liechtenstein">Liechtenstein</option>
    <option value="Lithuania">Lithuania</option>
    <option value="Luxembourg">Luxembourg</option>
    <option value="Madagascar">Madagascar</option>
    <option value="Malawi">Malawi</option>
    <option value="Malaysia">Malaysia</option>
    <option value="Maldives">Maldives</option>
    <option value="Mali">Mali</option>
    <option value="Malta">Malta</option>
    <option value="Marshall Islands">Marshall Islands</option>
    <option value="Mauritania">Mauritania</option>
    <option value="Mauritius">Mauritius</option>
    <option value="Mexico">Mexico</option>
    <option value="Micronesia">Micronesia</option>
    <option value="Moldova">Moldova</option>
    <option value="Monaco">Monaco</option>
    <option value="Mongolia">Mongolia</option>
    <option value="Montenegro">Montenegro</option>
    <option value="Morocco">Morocco</option>
    <option value="Mozambique">Mozambique</option>
    <option value="Myanmar">Myanmar</option>
    <option value="Namibia">Namibia</option>
    <option value="Nauru">Nauru</option>
    <option value="Nepal">Nepal</option>
    <option value="Netherlands">Netherlands</option>
    <option value="New Zealand">New Zealand</option>
    <option value="Nicaragua">Nicaragua</option>
    <option value="Niger">Niger</option>
    <option value="Nigeria">Nigeria</option>
    <option value="Niue">Niue</option>
    <option value="North Macedonia">North Macedonia</option>
    <option value="Norway">Norway</option>
    <option value="Oman">Oman</option>
    <option value="Pakistan">Pakistan</option>
    <option value="Palau">Palau</option>
    <option value="Palestine">Palestine</option>
    <option value="Panama">Panama</option>
    <option value="Papua New Guinea">Papua New Guinea</option>
    <option value="Paraguay">Paraguay</option>
    <option value="Peru">Peru</option>
    <option value="Philippines">Philippines</option>
    <option value="Poland">Poland</option>
    <option value="Portugal">Portugal</option>
    <option value="Qatar">Qatar</option>
    <option value="Romania">Romania</option>
    <option value="Russia">Russia</option>
    <option value="Rwanda">Rwanda</option>
    <option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
    <option value="Saint Lucia">Saint Lucia</option>
    <option value="Saint Vincent and the Grenadines">Saint Vincent and the Grenadines</option>
    <option value="Samoa">Samoa</option>
    <option value="San Marino">San Marino</option>
    <option value="Sao Tome and Principe">Sao Tome and Principe</option>
    <option value="Saudi Arabia">Saudi Arabia</option>
    <option value="Senegal">Senegal</option>
    <option value="Serbia">Serbia</option>
    <option value="Seychelles">Seychelles</option>
    <option value="Sierra Leone">Sierra Leone</option>
    <option value="Singapore">Singapore</option>
    <option value="Slovakia">Slovakia</option>
    <option value="Slovenia">Slovenia</option>
    <option value="Solomon Islands">Solomon Islands</option>
    <option value="Somalia">Somalia</option>
    <option value="South Africa">South Africa</option>
    <option value="South Sudan">South Sudan</option>
    <option value="Sri Lanka">Sri Lanka</option>
    <option value="Spain">Spain</option>
    <option value="Sudan">Sudan</option>
    <option value="Suriname">Suriname</option>
    <option value="Sweden">Sweden</option>
    <option value="Switzerland">Switzerland</option>
    <option value="Syria">Syria</option>
    <option value="Tajikistan">Tajikistan</option>
    <option value="Tanzania">Tanzania</option>
    <option value="Thailand">Thailand</option>
    <option value="Timor-Leste">Timor-Leste</option>
    <option value="Togo">Togo</option>
    <option value="Tonga">Tonga</option>
    <option value="Trinidad and Tobago">Trinidad and Tobago</option>
    <option value="Tunisia">Tunisia</option>
    <option value="Türkiye">Türkiye</option>
    <option value="Turkmenistan">Turkmenistan</option>
    <option value="Tuvalu">Tuvalu</option>
    <option value="UAE (United Arab Emirates)">UAE (United Arab Emirates)</option>
    <option value="Uganda">Uganda</option>
    <option value="Ukraine">Ukraine</option>
    <option value="United Kingdom">United Kingdom</option>
    <option value="United States of America">United States of America</option>
    <option value="Uruguay">Uruguay</option>
    <option value="Uzebekistan">Uzebekistan</option>
    <option value="Vanuatu">Vanuatu</option>
    <option value="Vatican City">Vatican City</option>
    <option value="Venezuela">Venezuela</option>
    <option value="Vietnam">Vietnam</option>
    <option value="Yemen">Yemen</option>
    <option value="Zambia">Zambia</option>
    <option value="Zimbabwe">Zimbabwe</option>
</select>

/* "The "clip pattern" accomplishes this task for you; hide the content visually, yet provide the content to screen readers." */

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* For a, button, and input elements use the following to select on focus */

.visually-hidden:not(:focus):not(:active) {
  /* ... */
}

/* If you need to toggle something with display:none, you can do so with the help of aria-hidden=true */

.my-component[aria-hidden="true"] {
  display: none;
}

Es posible crear un sistema experto utilizando solo JavaScript, aunque esto depende de la complejidad del sistema y de las tareas que desee realizar. A continuación, le presento un ejemplo de cómo podría crearse un sistema experto simple utilizando JavaScript:

se ha creado una clase llamada ExpertSystem que representa un sistema experto. Esta clase tiene un constructor que recibe un conjunto de reglas y las almacena en una propiedad de la instancia. Además, la clase tiene un método llamado evaluate que recibe un conjunto de hechos y evalúa cada una de las reglas del sistema experto para determinar si alguna de ellas se aplica.

Cuando se crea una instancia de la clase ExpertSystem, se le proporciona un conjunto de reglas predefinidas que se utilizarán para evaluar los hechos que se le pasen al método evaluate. Cada regla tiene una serie de condiciones que deben cumplirse y una conclusión que se aplica si se cumplen todas las condiciones.

Luego, se crea un objeto hechos que representa un conjunto de hechos que se quieren evaluar. Finalmente, se llama al método evaluate pasándole el objeto hechos como argumento y se imprime en pantalla la conclusión obtenida. En este caso, al cumplirse la regla que tiene como condición tienePerro: true y tieneGato: false, la conclusión que se imprime en pantalla es "esAmanteDeLosPerros".

Espero que esto te haya ayudado a entender el funcionamiento del código que has proporcionado. Si tienes alguna pregunta adicional, no dudes en preguntar.







// Crear una clase para representar el sistema experto
class ExpertSystem {
  // Constructor para inicializar el sistema experto con un conjunto de reglas
  constructor(rules) {
    this.rules = rules;
  }

  // Método para evaluar una serie de hechos y determinar si una regla se aplica
  evaluate(facts) {
    for (let i = 0; i < this.rules.length; i++) {
      let rule = this.rules[i];
      let conditionMet = true;

      for (let j = 0; j < rule.conditions.length; j++) {
        let condition = rule.conditions[j];
        if (!facts[condition.fact]) {
          conditionMet = false;
          break;
        }
      }

      if (conditionMet) {
        return rule.conclusion;
      }
    }

    return null;
  }
}

// Crear una instancia del sistema experto con algunas reglas predefinidas
let expertSystem = new ExpertSystem([
  {
    conditions: [
      { fact: "tienePerro", value: true },
      { fact: "tieneGato", value: false }
    ],
    conclusion: "esAmanteDeLosPerros"
  },
  {
    conditions: [
      { fact: "tienePerro", value: false },
      { fact: "tieneGato", value: true }
    ],
    conclusion: "esAmanteDeLosGatos"
  },
  {
    conditions: [
      { fact: "tienePerro", value: true },
      { fact: "tieneGato", value: true }
    ],
    conclusion: "esAmanteDeLosAnimales"
  }
]);

// Evaluar algunos hechos y ver cuál regla se aplica
let hechos = {
  tienePerro: true,
  tieneGato: false
};

let conclusión = expertSystem.evaluate(hechos);
console.log(conclusión); // imprime "esAmanteDeLosPerros"



Si desea incluir múltiples variables en la condición de una regla del sistema experto, puede hacerlo de varias maneras. Una forma de hacerlo es utilizar un objeto con múltiples propiedades para representar la condición, en lugar de una sola propiedad. Por ejemplo:

{
  conditions: [
    { fact: "tieneMascota", value: { tipo: "perro", edad: 2 } },
    { fact: "tieneGato", value: false }
  ],
  conclusion: "esAmanteDeLosPerros"
}


Otra forma de incluir múltiples variables en una condición es utilizar una cadena de texto para representar la condición y luego parsearla para obtener las variables individuales. Por ejemplo:

{
  conditions: [
    { fact: "tieneMascota", value: "perro,2" },
    { fact: "tieneGato", value: false }
  ],
  conclusion: "esAmanteDeLosPerros"
}


En el código que has proporcionado, esta parte del código representa una regla del sistema experto. La regla tiene dos condiciones:

fact: "tienePerro", value: true: esta condición se cumple si el hecho tienePerroestrue`.
fact: "tieneGato", value: false: esta condición se cumple si el hecho tieneGatoesfalse`.
Si ambas condiciones se cumplen, entonces se aplica la conclusión de la regla, que en este caso es "esAmanteDeLosPerros".



Para crear un sistema experto sobre asma grave utilizando JavaScript, podrías utilizar un enfoque basado en reglas. Esto implicaría definir un conjunto de reglas que el sistema experto pueda utilizar para tomar decisiones en base a los inputs que recibe.

Por ejemplo, podrías tener reglas como:

Si el paciente tiene dificultad para respirar y una puntuación de síntomas de asma mayor o igual a 3 en la escala de 0 a 6, entonces se recomienda una visita urgente al médico.
Si el paciente tiene dificultad para respirar y una puntuación de síntomas de asma menor a 3 en la escala de 0 a 6, entonces se recomienda tomar el medicamento de rescate y esperar una hora antes de volver a evaluar los síntomas.
Para implementar estas reglas en JavaScript, podrías utilizar una estructura de datos como un array de objetos, donde cada objeto representa una regla con una serie de condiciones y una acción a realizar. Luego, podrías recorrer este array de reglas y evaluar cada una de ellas en función de los inputs que recibe el sistema experto. Si una regla se cumple, entonces se puede ejecutar la acción correspondiente.

A continuación te muestro un ejemplo de cómo podrías implementar este enfoque en JavaScript:

Copy code
// Definimos un array de objetos que representan las reglas del sistema experto
const reglas = [
  {
    condiciones: [
      { nombre: "dificultadParaRespirar", valor: true },
      { nombre: "puntuacionSintomasAsma", valor: 3, comparador: ">=" }
    ],
    accion: () => {
      console.log("Se recomienda una visita urgente al médico");
    }
  },
  {
    condiciones: [
      { nombre: "dificultadParaRespirar", valor: true },
      { nombre: "puntuacionSintomasAsma", valor: 3, comparador: "<" }
    ],
    accion: () => {
      console.log("Se recomienda tomar el medicamento de rescate y esperar una hora antes de volver a evaluar los síntomas");
    }
  }
];

// Definimos una función que recibe los inputs y evalúa las reglas del sistema experto
function tomarDecision(inputs) {
  // Recorremos el array de reglas
  for (const regla of reglas) {
    // Asumimos que la regla se cumple
    let seCumple = true;



gabrieli@neumomed.com
termina el código anterior por favor
Aquí termina el código que te había proporcionado anteriormente:

Copy code
// Recorremos el array de reglas
  for (const regla of reglas) {
    // Asumimos que la regla se cumple
    let seCumple = true;

    // Recorremos las condiciones de la regla
    for (const condicion of regla.condiciones) {
      // Obtenemos el valor del input que se está evaluando
      const valorInput



      // Definimos un array de objetos que representan las reglas del sistema experto
const reglas = [
  {
    condiciones: [
      { nombre: "dificultadParaRespirar", valor: true },
      { nombre: "puntuacionSintomasAsma", valor: 3, comparador: ">=" }
    ],
    accion: () => {
      console.log("Se recomienda una visita urgente al médico");
    }
  },
  {
    condiciones: [
      { nombre: "dificultadParaRespirar", valor: true },
      { nombre: "puntuacionSintomasAsma", valor: 3, comparador: "<" }
    ],
    accion: () => {
      console.log("Se recomienda tomar el medicamento de rescate y esperar una hora antes de volver a evaluar los síntomas");
    }
  }
];

// Definimos una función que recibe los inputs y evalúa las reglas del sistema experto
function tomarDecision(inputs) {
  // Recorremos el array de reglas
  for (const regla of reglas) {
    // Asumimos que la regla se cumple
    let seCumple = true;

    
    // Recorremos el array de reglas
  for (const regla of reglas) {
    // Asumimos que la regla se cumple
    let seCumple = true;

    // Recorremos las condiciones de la regla
    for (const condicion of regla.condiciones) {
      // Obtenemos el valor del input que se está evaluando
      const valorInput = inputs[condicion.nombre];

      // Si no se ha especificado un comparador, asumimos que se está haciendo una comparación de igualdad
      if (!condicion.comparador) {
        condicion.comparador = "===";
      }

      // Evaluamos la condición
      if (!eval(`${valorInput} ${condicion.comparador} ${condicion.valor}`)) {
        // Si la condición no se cumple, marcamos la regla como no cumplida y salimos del bucle
        seCumple = false;
        break;
      }
    }

    // Si la regla se cumple, ejecutamos la acción correspondiente
    if (seCumple) {
      regla.accion();
      break;
    }
  }
}

// Podemos utilizar la función de la siguiente manera:
tomarDecision({ dificultadParaRespirar: true, puntuacionSintomasAsma: 3 });
// Se recomienda una visita urgente al médico

tomarDecision({ dificultadParaRespirar: true, puntuacionSintomasAsma: 2 });
// Se recomienda tomar el medicamento de rescate y esperar una hora antes de volver a evaluar los síntomas
  
  
  
  Para incluir varios factores en un sistema experto y concluir si un paciente tiene asma grave no controlada, podrías utilizar un enfoque basado en reglas. Para ello, podrías definir un conjunto de reglas que el sistema experto pueda utilizar para tomar decisiones en base a los inputs que recibe.

Por ejemplo, podrías tener reglas como:

Si el paciente tiene asma y el VEF1 es menor al 50%, entonces se recomienda un tratamiento intensivo.
Si el paciente tiene asma y el ACT es menor a 19, entonces se recomienda un tratamiento de control de síntomas.
Si el paciente tiene asma y los eosinófilos son mayores a 500 x mm, entonces se recomienda un tratamiento con corticoides inhalados.
Si el paciente tiene asma y el prick test es positivo, entonces se recomienda un tratamiento de desensibilización.


Para implementar estas reglas en JavaScript, podrías utilizar una estructura de datos como un array de objetos, donde cada objeto representa una regla con una serie de condiciones y una acción a realizar. Luego, podrías recorrer este array de reglas y evaluar cada una de ellas en función de los inputs que recibe el sistema experto. Si una regla se cumple, entonces se puede ejecutar la acción correspondiente.




// Definimos un array de objetos que representan las reglas del sistema experto
const reglas = [
  {
    condiciones: [
      { nombre: "asma", valor: true },
      { nombre: "VEF1", valor: 50, comparador: "<" }
    ],
    accion: () => {
      console.log("Se recomienda un tratamiento intensivo");
    }
  },
  {
    condiciones: [
      { nombre: "asma", valor: true },
      { nombre: "ACT", valor: 19, comparador: "<" }
    ],
    accion: () => {
      console.log("Se recomienda un tratamiento de control de síntomas");
    }
  },
  {
    condiciones: [
      { nombre: "asma", valor: true },
      { nombre: "eosinofilos", valor: 500, comparador: "

       
       
       
   CONJUNTO DE REGLAS
       
       
       const reglas = [
  {
    condiciones: [
      { nombre: "asma", valor: true },
      { nombre: "VEF1", valor: 50, comparador: "<" }
    ],
    accion: () => {
      console.log("Se recomienda un tratamiento intensivo");
    }
  },
  {
    condiciones: [
      { nombre: "asma", valor: true },
      { nombre: "ACT", valor: 19, comparador: "<" }
    ],
    accion: () => {
      console.log("Se recomienda un tratamiento de control de síntomas");
    }
  },
  {
    condiciones: [
      { nombre: "asma", valor: true },
      { nombre: "eosinofilos", valor: 500, comparador: ">" }
    ],
    accion: () => {
      console.log("Se recomienda un tratamiento con corticoides inhalados");
    }
  },
  {
    condiciones: [
      { nombre: "asma", valor: true },
      { nombre: "prickTest", valor: true }
    ],
    accion: () => {
      console.log("Se recomienda un tratamiento de desensibilización");
    }
  }
];

Para crear un sistema que tenga conocimientos sobre el asma grave y pueda apoyar a los médicos en las decisiones clínicas, le recomendaría seguir los siguientes pasos:

Reunir la información necesaria: Para poder proporcionar información útil y precisa sobre el asma grave, es necesario tener acceso a la literatura científica y a otras fuentes de información relevantes. Esto puede incluir artículos científicos, guías clínicas, registros de casos y otros recursos.

Procesar y analizar la información: Una vez que se tiene acceso a la información necesaria, es importante procesarla y analizarla para poder extraer conclusiones y recomendaciones útiles. Esto puede incluir la utilización de técnicas de aprendizaje automático y de procesamiento de lenguaje para analizar grandes cantidades de datos y extraer patrones y tendencias.

Diseñar una interfaz de usuario adecuada: Para que los médicos puedan utilizar el sistema de manera efectiva, es importante diseñar una interfaz de usuario clara y fácil de usar. Debe considerar cómo los médicos van a acceder al sistema y cómo se van a proporcionar las recomendaciones y la información necesarias.

Validar y probar el sistema: Antes de poner el sistema en uso


 hay varios software y herramientas disponibles para crear sistemas expertos como una aplicación web. Algunas opciones populares incluyen:

CLIPS: CLIPS es un software de sistema experto gratuito y de código abierto desarrollado por el gobierno de los Estados Unidos. Se puede utilizar para crear aplicaciones de sistemas expertos en una variedad de ámbitos, incluyendo la atención médica.

JESS: JESS es un software de sistema experto basado en reglas desarrollado por Sandia National Laboratories. Se puede utilizar para crear aplicaciones de sistemas expertos en una variedad de ámbitos, incluyendo la atención médica.

PROLOG: PROLOG es un lenguaje de programación de sistemas expertos desarrollado por la Universidad de Aix-Marseille. Se puede utilizar para crear aplicaciones de sistemas expertos en una variedad de ámbitos, incluyendo la atención médica.

Microsoft Azure Expert System: Microsoft Azure Expert System es una plataforma en la nube que ofrece herramientas y recursos para crear y desplegar sistemas expertos como aplicaciones web. Se puede utilizar para crear aplicaciones de sistemas expertos en una variedad de ámbitos, incluyendo la atención médica.

Para crear una cuenta de Microsoft Azure y suscribirse a los servicios de Microsoft Azure Expert System, puede seguir los siguientes pasos:

Vaya al sitio web de Microsoft Azure: https://azure.microsoft.com/
Haga clic en el botón "Iniciar sesión" en la esquina superior derecha de la página.
Ingrese sus credenciales de Microsoft o cree una cuenta gratuita siguiendo las instrucciones en pantalla.
Una vez que haya iniciado sesión, haga clic en el botón "Crear un recurso" en la esquina superior izquierda de la pantalla.
Busque "Microsoft Azure Expert System" en el buscador y selecciónelo.
Siga las instrucciones en pantalla para suscribirse a los servicios de Microsoft Azure Expert System y comenzar a utilizar la plataforma.

como funciona el archivo .htaccess para proteger carpetas ?
  
El archivo .htaccess es un archivo de configuración utilizado por el servidor web Apache para controlar el acceso a archivos y carpetas en un sitio web. Se puede utilizar para especificar quién tiene acceso a las carpetas y quién no.

Para proteger una carpeta utilizando un archivo .htaccess, primero debe crear un archivo .htaccess en la carpeta que desee proteger. Luego, debe agregar las siguientes líneas de código al archivo .htaccess:

AuthType Basic
AuthName "Restricted Area"
AuthUserFile /ruta/al/archivo/de/usuarios/.htpasswd
Require valid-user


Estas líneas de código indican al servidor web que la carpeta está protegida por autenticación básica y que solo los usuarios que se encuentren en el archivo .htpasswd tendrán acceso a la carpeta. El archivo .htpasswd es un archivo que contiene los nombres de usuario y contraseñas de los usuarios autorizados para acceder a la carpeta.

Para crear un archivo .htpasswd, puede utilizar la herramienta htpasswd incluida con el servidor web Apache. Para utilizar esta herramienta, debe proporcionar un nombre de usuario y contraseña para cada usuario autorizado y luego ejecutar el siguiente comando:

htpasswd -c .htpasswd nombre_de_usuario

Esto creará un archivo .htpasswd con el nombre de usuario y contraseña que especificó. Puede agregar más usuarios al archivo .htpasswd utilizando el mismo comando, pero sin la opción "-c".

Es importante tener en cuenta que el archivo .htaccess y el archivo .htpasswd deben tener permisos de lectura y escritura adecuados para que funcionen correctamente. También es posible que deba modificar la ruta del archivo .htpasswd en las líneas de código del archivo .htaccess para que apunte a la ubicación correcta del archivo .htpasswd en su servidor.

dónde debe colocarse el archivos.htaccess ? dentro de la carpeta que se va a proteger o en el root del sitio web ?
  
  
  El archivo .htaccess se debe colocar dentro de la carpeta que desee proteger. El archivo .htaccess actúa a nivel de carpeta y tiene efecto en todos los archivos y subcarpetas contenidos en la carpeta en la que se encuentra. Si coloca el archivo .htaccess en la raíz del sitio web o en una carpeta superior, no tendrá efecto en las carpetas y archivos contenidos en esas carpetas.

Por ejemplo, si desea proteger la carpeta "mi_carpeta" en su sitio web, debe colocar el archivo .htaccess dentro de la carpeta "mi_carpeta". Luego, cuando un usuario intente acceder a cualquier archivo o subcarpeta dentro de "mi_carpeta", se le pedirá que proporcione un nombre de usuario y una contraseña para poder acceder a ellos. Si el usuario no proporciona un nombre de usuario y contraseña válidos, se le denegará el acceso a la carpeta y a sus contenidos.

Es importante tener en cuenta que el archivo .htaccess y el archivo .htpasswd deben tener permisos de lectura y escritura adecuados para que funcionen correctamente. También es posible que deba modificar la ruta del archivo .htpasswd en las líneas de código del archivo .htaccess para que apunte a la ubicación correcta del archivo .htpasswd en su servidor. En caso de duda, es recomendable consultar la documentación de Apache o consultar con un experto en sistemas para obtener ayuda adicional.

como se crean permisos de lectura y escritura en un archivo .htaccess ?
  
  Para crear permisos de lectura y escritura en un archivo .htaccess, debe utilizar una herramienta de línea de comandos o una aplicación de gestión de archivos en su servidor. La forma más común de hacerlo es utilizar el comando "chmod" en una consola de línea de comandos.

Por ejemplo, para otorgar permisos de lectura y escritura al archivo .htaccess para el propietario del archivo y la grupo del propietario, puede ejecutar el siguiente comando:

chmod 664 .htaccess


Este comando otorgará permisos de lectura y escritura al propietario del archivo y permisos de lectura al grupo del propietario. Si desea otorgar permisos de lectura y escritura a todos los usuarios, puede ejecutar el siguiente comando:

chmod 666 .htaccess

Es importante tener en cuenta que los permisos de archivo en Linux se establecen mediante un sistema de octal. Los permisos de lectura, escritura y ejecución se representan mediante los dígitos "4", "2" y "1", respectivamente. Los permisos se combinan sumando los dígitos correspondientes. Por ejemplo, el permiso de lectura y escritura se representa mediante el dígito "6" (4 + 2) y el permiso de lectura, escritura y ejecución se representa mediante el dígito "7" (4 + 2 + 1).


No existe un software específico para crear archivos .htaccess, ya que este archivo se puede crear con cualquier editor de texto. Puede utilizar un editor de texto como el Bloc de notas en Windows o el TextEdit en Mac para crear y editar archivos .htaccess. También puede utilizar un editor de texto más avanzado, como Sublime Text o Atom, que ofrecen características adicionales como la resaltado de sintaxis y la autocompleción.

Para crear un archivo .htaccess, simplemente abra el editor de texto de su elección y escriba las líneas de código necesarias para proteger la carpeta. Una vez que haya terminado, guarde el archivo con el nombre ".htaccess" (incluyendo el punto). Asegúrese de guardar el archivo como archivo de texto sin formato para evitar problemas de codificación.

una vez que haya creado el archivo .htaccess, debe colocarlo dentro de la carpeta que desee proteger. Asegúrese de que el archivo .htaccess y el archivo .htpasswd (si está utilizando uno) tengan los permisos de lectura y escritura adecuados para que funcionen correctamente. También es posible que deba modificar la ruta del archivo .htpasswd en las líneas de código del archivo .htaccess para que apunte a la ubicación correcta del archivo .htpasswd en su servidor.

Si tiene dificultades para crear o utilizar un archivo .htaccess, es recomendable consultar la documentación de Apache o consultar con un experto en sistemas para obtener ayuda adicional.

Aquí hay un ejemplo de código completo que puede utilizar para crear un archivo .htaccess con permisos de lectura y escritura:

AuthType Basic
AuthName "Restricted Area"
AuthUserFile /ruta/al/archivo/de/usuarios/.htpasswd
Require valid-user


Para utilizar este código, primero debe crear un archivo .htpasswd con los nombres de usuario y contraseñas de los usuarios autorizados para acceder a la carpeta protegida. Luego, debe reemplazar la ruta del archivo .htpasswd con la ruta correcta del archivo .htpasswd en su servidor.

Una vez que haya creado el archivo .htaccess y lo haya configurado con la información de autenticación y la ruta del archivo .htpasswd, debe guardar el archivo con el nombre ".htaccess" (incluyendo el punto). Asegúrese de guardar el archivo como archivo de texto sin formato para evitar problemas de codificación.

Luego, debe colocar el archivo .htaccess dentro de la carpeta que desee proteger. Asegúrese de que el archivo .htaccess y el archivo .htpasswd tengan los permisos de lectura y escritura adecuados para que funcionen correctamente. Puede utilizar el comando "chmod" en una consola de línea de comandos para establecer los permisos adecuados. Por ejemplo, para otorgar permisos de lectura y escritura al archivo .htaccess para el propietario del archivo y la grupo del propietario, puede ejecutar el siguiente comando:

chmod 664 .htaccess

SuperScript es un lenguaje de programación para crear chatbots y diálogos de texto para aplicaciones de mensajería, asistentes de voz, aplicaciones de redes sociales y otras plataformas de comunicación. SuperScript se basa en JavaScript y utiliza una sintaxis especial para definir diálogos y reglas de respuesta para el chatbot. Los chatbots creados con SuperScript pueden ser programados para responder de manera autónoma a mensajes de usuarios y llevar a cabo tareas específicas, como proporcionar información o realizar compras en línea.

SuperScript se utiliza a menudo para crear chatbots que pueden interactuar con los usuarios de manera natural y adaptarse a distintos contextos y situaciones. Los chatbots creados con SuperScript pueden ser utilizados en una amplia variedad de aplicaciones, como servicios de atención al cliente, asistencia técnica, promoción de productos y servicios, y mucho más. En resumen, SuperScript es un lenguaje de programación que se utiliza para crear chatbots y diálogos de texto para aplicaciones de mensajería y otras plataformas de comunicación.


Sí, SuperScript utiliza intents (intenciones en español) y contextos para entender y responder a los mensajes de los usuarios. Los intents representan las intenciones o preguntas de los usuarios y se definen utilizando palabras clave y patrones de lenguaje específicos. Los contextos son variables que se pueden utilizar para recordar y mantener información relevante durante la conversación con el chatbot.

Por ejemplo, si un usuario le pregunta a un chatbot sobre el tiempo en una ciudad específica, el chatbot puede utilizar un intent llamado "Consultar el tiempo" y un contexto llamado "Ciudad" para recordar la ciudad mencionada por el usuario y proporcionar la información del tiempo correspondiente. De esta manera, el chatbot puede mantener una conversación fluida y adaptarse a las necesidades y preguntas de los usuarios a medida que avanza la conversación.

En resumen, SuperScript utiliza intents y contextos para entender y responder a los mensajes de los usuarios de manera efectiva y para adaptarse a diferentes contextos y situaciones durante la conversación.


INSTALACION DE SUPERSCRIPT

Para instalar SuperScript en una PC con Windows y crear un chatbot sobre temas técnicos utilizando Node.js y Bootstrap 5, sigue estos pasos:

Asegúrate de tener instalado Node.js en tu PC. Si no lo tienes instalado, descarga e instala la última versión de Node.js desde el sitio web oficial (https://nodejs.org/).

Abre una ventana del símbolo del sistema o "Command Prompt" en tu PC. Puedes hacerlo buscando "símbolo del sistema" en el menú Inicio o usando el atajo de teclado "Windows + R" y luego escribiendo "cmd" en la ventana de ejecución.

En la ventana del símbolo del sistema, instala SuperScript utilizando el siguiente comando:
                                                                                                                                                    
                                                                                                     npm install -g superscript
                                                                                                  
Crea una nueva carpeta para tu proyecto de chatbot y accede a ella utilizando el comando "cd" seguido del nombre de la carpeta. Por ejemplo:
                                                                                                    cd mi_proyecto_chatbot

                                                                                                    Inicializa un nuevo proyecto de chatbot utilizando el comando "superscript" seguido del nombre que deseas darle a tu chatbot. Por ejemplo:
                                                                                                                                                      
superscript mi_chatbot
                                                                                                   Sigue las instrucciones en pantalla para configurar tu chatbot y responder a las preguntas necesarias.

Una vez que hayas completado la configuración inicial, utiliza el comando "npm start" para iniciar tu chatbot.
                                                                                                   npm start

Abre tu navegador web y accede a "http://localhost:3000" para ver tu chatbot en funcionamiento.

Utiliza Bootstrap 5 para personalizar la apariencia de tu chatbot. Puedes hacerlo añadiendo el archivo CSS de Bootstrap a tu proyecto y utilizando las clases de Bootstrap para aplicar estilos a tu chatbot.
                                                                                                                                                      
                                                                                                    <!DOCTYPE html>
<html>
  <head>
    <title>Página de Chatbot</title>
  </head>
  <body>
    <h1>Página de Chatbot</h1>
    <form id="formulario">
      <input type="text" id="pregunta" placeholder="Escribe tu pregunta aquí">
      <button type="submit">Enviar pregunta</button>
    </form>
    <div id="respuesta"></div>
  </body>
</html>

                                                                                                    Este código crea una página web básica con un título y un formulario que contiene un input de texto y un botón de enviar pregunta. El div con id "respuesta" se utilizará para mostrar la respuesta del chatbot.

Para utilizar SuperScript para procesar la pregunta del usuario y mostrar la respuesta en el div, necesitarás agregar un poco de código JavaScript a la página. Por ejemplo, podrías utilizar el siguiente código JavaScript para enviar la pregunta del usuario al chatbot de SuperScript y mostrar la respuesta en el div:                                                  
                                                                                                     document.getElementById("formulario").addEventListener("submit", function(evento) {
  evento.preventDefault(); // Previene el envío del formulario

  // Obtiene la pregunta del usuario del input de texto
  var pregunta = document.getElementById("pregunta").value;

  // Envía la pregunta al chatbot de SuperScript y muestra la respuesta en el div
  enviarPreguntaAlChatbot(pregunta, function(respuesta) {
    document.getElementById("respuesta").innerHTML = respuesta;
  });
});

function enviarPreguntaAlChatbot(pregunta, callback) {
  // Aquí deberías implementar el código necesario para enviar la pregunta al chatbot de SuperScript y obtener la respuesta
  // ...
  // Llamar a callback con la respuesta del chatbot
  callback(respuesta);
}




como seria el código del chatbot SuperScript en node.js  y que se acople con la pagina index.html ?
  
 Para crear un chatbot de SuperScript en Node.js y que se acople a una página web, necesitarás hacer lo siguiente:

Crea una carpeta para tu proyecto y accede a ella utilizando la consola o el símbolo del sistema.

Inicializa un nuevo proyecto de Node.js utilizando el comando "npm init" y sigue las instrucciones en pantalla para configurar tu proyecto.

Instala SuperScript utilizando el comando "npm install superscript" y crea un archivo JavaScript para tu chatbot utilizando el comando "touch chatbot.js".

Abre el archivo "chatbot.js" en tu editor de código y escribe el código de tu chatbot utilizando la sintaxis de SuperScript. Por ejemplo:


const superscript = require("superscript");

const bot = new superscript();

bot.addRule(
  "Hola",
  "Hola, ¿en qué puedo ayudarte?",
  (response, match) => {
    response.send(match.source);
  }
);

bot.addRule(
  "Quiero información sobre *",
  "¿Te gustaría saber más sobre *?",
  (response, match) => {
    response.send(match.source);
  }
);

bot.addRule(
  "Sí, por favor",
  "Aquí tienes algunos enlaces que tal vez te puedan interesar: " +
    "https://www.wikipedia.org/ y https://www.google.com/search?q=*",
  (response, match) => {
    response.send(match.source);
  }
);


Este código define tres reglas básicas para el chatbot: una para saludar al usuario, otra para preguntar si el usuario quiere más información sobre un tema específico, y otra para proporcionar algunos enlaces útiles.


A continuación, crea un archivo JavaScript para tu servidor web utilizando el comando "touch server.js". Abre el archivo "server.js" en tu editor de código y escribe el código para iniciar el servidor web y enviar y recibir mensajes del chatbot. Por ejemplo:



const express = require("express");
const bodyParser = require("body-parser");
const request = require("request");

const app = express();

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.get("/", function(req, res) {
  res.sendFile(__dirname + "/index.html");
});

app.post("/pregunta", function(req, res) {
  let pregunta = req.body.pregunta;
  bot.reply("local-user", pregunta, function(err, respuesta) {
    res.send(respuesta);
  });
});

app.listen(3000, function() {
  console.log("Servidor web iniciado en el puerto 3000");
});







const express = require("express");
const bodyParser = require("body-parser");
const request = require("request");

const app = express();

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.get("/", function(req, res) {
  res.sendFile(__dirname + "/index.html");
});

app.post("/pregunta", function(req, res) {
  let pregunta = req.body.pregunta;
  bot.reply("local-user", pregunta, function(err, respuesta) {
    res.send(respuesta);
  });
});

app.listen(3000, function() {
  console.log("Servidor web iniciado en el puerto 3000");
});

                                                                                                   


Este código inicia un servidor web utilizando Express y procesa las solicitudes POST enviadas a la ruta "/pregunta". Cuando se recibe una solicitud POST, se obtiene la pregunta del cuerpo de la solicitud y se envía al chatbot de SuperScript utilizando el método "reply". La respuesta del chatbot se envía de vuelta al cliente como respuesta a la solicitud.

Para que este código funcione, necesitarás tener un archivo HTML con un formulario que envíe una solicitud POST a la ruta "/pregunta" cuando se haga clic en el botón de enviar pregunta. Por ejemplo, aquí tienes un ejemplo de código HTML que se podría utilizar con este servidor:




Para entrenar un chatbot de SuperScript, necesitarás proporcionarle un conjunto de datos de entrenamiento que contenga ejemplos de preguntas y respuestas. SuperScript utiliza estos ejemplos para aprender cómo responder a las preguntas del usuario.

Existen varias maneras de proporcionar estos datos de entrenamiento a SuperScript, pero una forma común es utilizar el método "addFact" de SuperScript. Por ejemplo, aquí tienes un ejemplo de código que utiliza el método "addFact" para proporcionar algunos datos de entrenamiento al chatbot:

bot.addFact("Hola", "Hola, ¿en qué puedo ayudarte?");
bot.addFact("¿Cómo estás?", "Estoy bien, gracias por preguntar. ¿Y tú?");
bot.addFact("¿Qué tal?", "Bien, gracias. ¿Hay algo en particular que te gustaría saber?");
bot.addFact("¿Qué tiempo hace?", "Lo siento, no tengo acceso a información meteorológica. ¿Hay algo más en lo que pueda ayudarte?");


Este código agrega cuatro hechos al chatbot: dos preguntas y dos respuestas. Cuando el chatbot recibe una de estas preguntas, responderá con la respuesta correspondiente.

Además del método "addFact", SuperScript también ofrece otras formas de proporcionar datos de entrenamiento, como utilizar archivos JSON o AIML (Artificial Intelligence Markup Language). Para obtener más información sobre cómo proporcionar datos de entrenamiento a SuperScript y cómo utilizar estos diferentes formatos, puedes consultar la documentación de SuperScript en su sitio web.


Un archivo JSON puede utilizarse para proporcionar datos de entrenamiento a un chatbot de SuperScript de la siguiente manera:

const fs = require("fs");

// Carga el archivo JSON con los datos de entrenamiento
const datosEntrenamiento = JSON.parse(fs.readFileSync("datos-entrenamiento.json"));

// Recorre los datos de entrenamiento y agrega cada uno al chatbot
datosEntrenamiento.forEach(function(dato) {
  bot.addFact(dato.pregunta, dato.respuesta);
});


El archivo JSON debe tener un formato específico para poder procesarse correctamente. Debe contener una matriz de objetos, donde cada objeto tiene dos propiedades: "pregunta" y "respuesta". Por ejemplo, aquí tienes un ejemplo de un archivo JSON válido para entrenar un chatbot de SuperScript:

[
  { "pregunta": "Hola", "respuesta": "Hola, ¿en qué puedo ayudarte?" },
  { "pregunta": "¿Cómo estás?", "respuesta": "Estoy bien, gracias por preguntar. ¿Y tú?" },
  { "pregunta": "¿Qué tal?", "respuesta": "Bien, gracias. ¿Hay algo en particular que te gustaría saber?" },
  { "pregunta": "¿Qué tiempo hace?", "respuesta": "Lo siento, no tengo acceso a información meteorológica. ¿Hay algo más en lo que pueda ayudarte?" }
]



Una vez que hayas creado el archivo JSON con tus datos de entrenamiento, puedes utilizar el código anterior para cargarlo y agregar los hechos al chatbot de SuperScript. Es importante tener en cuenta que SuperScript espera que los datos de entrenamiento estén en un formato específico, así que asegúrate de seguir el formato descrito anteriormente para que el chatbot pueda procesar los datos correctamente.


Es cierto que el archivo JSON que proporcioné como ejemplo no incluye contextos explícitos. Los contextos son una forma de estructurar los datos de entrenamiento de un chatbot de manera que el chatbot pueda tener en cuenta el contexto en el que se produce una conversación.

Para proporcionar contextos a un chatbot de SuperScript, puedes utilizar la función "addCategory" en lugar del método "addFact". La función "addCategory" permite especificar un contexto para un hecho y se utiliza de la siguiente manera:


bot.addCategory("Hola", "Saludo", "Hola, ¿en qué puedo ayudarte?");
bot.addCategory("¿Cómo estás?", "Saludo", "Estoy bien, gracias por preguntar. ¿Y tú?");
bot.addCategory("¿Qué tal?", "Saludo", "Bien, gracias. ¿Hay algo en particular que te gustaría saber?");
bot.addCategory("¿Qué tiempo hace?", "Meteorología", "Lo siento, no tengo acceso a información meteorológica. ¿Hay algo más en lo que pueda ayudarte?");


En este ejemplo, se están agregando cuatro hechos al chatbot y se está especificando un contexto para cada uno de ellos mediante el uso de la función "addCategory". Los contextos se proporcionan como el segundo argumento de la función, y en este caso se están utilizando dos contextos diferentes: "Saludo" y "Meteorología".

Si deseas proporcionar contextos a un chatbot de SuperScript utilizando un archivo JSON, puedes incluir una propiedad "contexto" en cada objeto de la matriz. Por ejemplo, aquí tienes un ejemplo de cómo podría verse un archivo JSON que proporciona contextos a un chatbot de SuperScript:


Si deseas proporcionar contextos a un chatbot de SuperScript utilizando un archivo JSON, puedes incluir una propiedad "contexto" en cada objeto de la matriz. Por ejemplo, aquí tienes un ejemplo de cómo podría verse un archivo JSON que proporciona contextos a un chatbot de SuperScript:


[
  { "pregunta": "Hola", "respuesta": "Hola, ¿en qué puedo ayudarte?", "contexto": "Saludo" },
  { "pregunta": "¿Cómo estás?", "respuesta": "Estoy bien, gracias por preguntar. ¿Y tú?", "contexto": "Saludo" },
  { "pregunta": "¿Qué tal?", "respuesta": "Bien, gracias. ¿Hay algo en particular que te gustaría saber?", "contexto": "Saludo" },
  { "pregunta": "¿Qué tiempo hace?", "respuesta": "Lo siento, no tengo acceso a información meteorológica. ¿Hay algo más en lo que pueda ayudarte

 MEDIUM
   
 ¿Qué es /exactamente/ SuperScript? SuperScript es una sintaxis de secuencias de comandos y un motor de bot diseñado para generar diálogo y flujo de conversación. Comienza generando reglas para que el motor las consuma y el bot conversará.
   
   
 SuperScript está construido usando Node.js y es completamente asíncrono. Está diseñado para funcionar sobre HTTP/WebSocket o incluso API y sistemas telefónicos como Asterisk.

También admite múltiples usuarios y puede llevar a cabo múltiples conversaciones en paralelo. Puede responder a las entradas proporcionadas como un asistente personal al estilo de Siri o comunicarse cuando las conversaciones se vuelven obsoletas.
                                                                                                                                                      
                                                                                                                                                      

import "./styles.css";

const date = new Date();
const root = document.getElementById("app");
root.setAttribute("data-posts", "[]");

const items = [
  {
    title: "book 1",
    author: "David",
  },
  {
    title: "book 2",
    author: "Kevin",
  }
];

const posts = () => {
  setTimeout(() => {
    let outPut = `<ul>`;
    for (let item of items) {
      outPut += `<li>${item.title}</li>`;
    }
    outPut += `</ul>`;
    root.innerHTML = outPut;
  }, 500);
};



const createPost = (post, callback) => {
  const item = {
    title: post.title,
    author: post.author,
  };

  items.push(item); // push the item to the items array
  callback(); //evoke the callback function

// set the posts data attribute to take in all the items
  root.dataset.posts = JSON.stringify(items);
};

console.log(
  createPost({ title: "book 3", author: "Derek"}, posts)
);

Las funciones flecha (también conocidas como "arrow functions") son una forma de escribir funciones en JavaScript. Se caracterizan por tener una sintaxis más corta y concisa que las funciones tradicionales, y tienen algunas características únicas que las diferencian de otras formas de escribir funciones.

Aquí hay un ejemplo de cómo se vería una función flecha:

const sum = (a, b) => a + b;


Esta función toma dos argumentos (a y b) y devuelve la suma de ambos. Como puede ver, la sintaxis es mucho más corta y concisa que la sintaxis de una función tradicional:

function sum(a, b) {
  return a + b;
}


Además de la sintaxis más corta, las funciones flecha tienen algunas otras características únicas:

No tienen una palabra clave "function". En su lugar, se definen utilizando la flecha "=>".

No tienen su propio this. En su lugar, heredan el this del contexto en el que se crean. Esto puede ser útil cuando se trabaja con objetos y métodos, ya que evita la necesidad de utilizar la palabra clave "bind" para vincular el this correcto.

No tienen una palabra clave "arguments". En su lugar, deben especificar explícitamente qué argumentos debe tomar la función.

En general, las funciones flecha son una forma concisa y útil de escribir funciones en JavaScript, y se pueden utilizar en lugar de funciones tradicionales en la mayoría de los casos.


MODULOS


Los módulos son una forma de organizar y dividir el código en JavaScript. Permiten dividir el código en diferentes archivos y compartir variables, funciones y otros tipos de datos entre ellos. Los módulos también proporcionan un mecanismo para proteger las variables y funciones privadas y evitar que sean accedidas o modificadas por código externo.

Hay varias formas de trabajar con módulos en JavaScript, dependiendo del entorno en el que se esté ejecutando el código. Algunas de las formas más comunes son:

Módulos CommonJS: Esta es una forma de trabajar con módulos que se utiliza a menudo en entornos de servidor, como Node.js. Los módulos CommonJS se importan y exportan utilizando las palabras clave "require" y "module.exports", respectivamente.

Módulos ECMAScript (ES): Esta es una forma de trabajar con módulos que se ha añadido recientemente a JavaScript y que es compatible con la mayoría de los navegadores modernos. Los módulos ES se importan y exportan utilizando las palabras clave "import" y "export", respectivamente.

Módulos AMD: Esta es otra forma de trabajar con módulos que se utiliza a menudo en entornos de navegador y se basa en la librería Asynchronous Module Definition (AMD). Los módulos AMD se importan y exportan utilizando la función "define" y el objeto "exports", respectivamente.

En general, los módulos son una forma útil de organizar y dividir el código en JavaScript y permiten compartir variables y funciones entre diferentes archivos de código de manera segura y controlada.


Regenerate response

Aquí hay un ejemplo de código que utiliza módulos CommonJS para exportar y importar variables y funciones entre archivos:

// archivo "math.js"

const PI = 3.14;

function add(a, b) {
return a + b;
}

function subtract(a, b) {
return a - b;
}

module.exports = {
PI,
add,
subtract,
};

// archivo "app.js"

const math = require('./math');

console.log(math.PI); // 3.14
console.log(math.add(1, 2)); // 3
console.log(math.subtract(5, 3)); // 2

Aquí hay un ejemplo de código que utiliza módulos ECMAScript para exportar y importar variables y funciones entre archivos:

// archivo "math.js"

export const PI = 3.14;

export function add(a, b) {
return a + b;
}

export function subtract(a, b) {
return a - b;
}

// archivo "app.js"

import * as math from './math';

console.log(math.PI); // 3.14
console.log(math.add(1, 2)); // 3
console.log(math.subtract(5, 3)); // 2

Espero que estos ejemplos te ayuden a entender cómo funcionan los módulos en JavaScript. 



FUNCION ISPROTOTYPEOF
La función "isPrototypeOf" es un método de la clase Object en JavaScript que se utiliza para determinar si un objeto es prototipo de otro objeto. Se utiliza de la siguiente manera:

obj1.isPrototypeOf(obj2);


Esto devolverá "true" si obj1 es prototipo de obj2, y "false" en caso contrario.

Un objeto es prototipo de otro objeto si es utilizado como la "plantilla" para crear el segundo objeto. En JavaScript, todos los objetos tienen una propiedad "prototype" que apunta a otro objeto, conocido como su prototipo. Cuando se crea un objeto a partir de otro objeto, el objeto creado hereda todas las propiedades y métodos del objeto prototipo.

Por ejemplo, supongamos que tenemos un objeto "person" con las propiedades "name" y "age":

const person = {
  name: 'John',
  age: 30,
};


Podemos utilizar este objeto como prototipo para crear un objeto "employee" que herede sus propiedades:

console.log(person.isPrototypeOf(employee)); // true



MAPS

Las Maps son una estructura de datos en JavaScript que se utilizan para almacenar pares clave-valor. Son similares a los objetos, pero tienen algunas diferencias clave:

Las Maps permiten utilizar cualquier objeto como clave, mientras que los objetos solo permiten utilizar strings o símbolos como claves.

Las Maps mantienen el orden en el que se insertan los elementos, mientras que los objetos no lo hacen.

Las Maps tienen métodos especializados para iterar sobre sus elementos, mientras que los objetos no los tienen.

Aquí hay un ejemplo de cómo se crea y se utiliza una Map en JavaScript:

const map = new Map();

map.set('name', 'John');
map.set('age', 30);

console.log(map.get('name')); // 'John'
console.log(map.get('age')); // 30

console.log(map.size); // 2

map.delete('age');
console.log(map.size); // 1

console.log(map.has('age')); // false
console.log(map.has('name')); // true

map.clear();
console.log(map.size); // 0

En este ejemplo, creamos una Map y luego utilizamos los métodos "set" y "get" para añadir y recuperar elementos de la Map. También utilizamos los métodos "size", "delete", "has" y "clear" para obtener información sobre la Map y modificarla.

Espero que este ejemplo te ayude a entender cómo funcionan las Maps en JavaScript. Si tienes alguna pregunta adicional, no dudes en preguntar.



OPERADOR ASYNC AWAIT

El operador "async/await" es una forma de simplificar el trabajo con promesas en JavaScript. Permite escribir código asíncrono de manera más sencilla y legible, sin tener que utilizar la sintaxis de encadenar promesas con "then".

Aquí hay un ejemplo de cómo se utiliza "async/await" para llamar a una función asíncrona que devuelve una promesa:


async function getData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

getData().then(data => {
  console.log(data);
});


En este ejemplo, la función "getData" es marcada como "async" y utiliza la palabra clave "await" para esperar a que la promesa devuelta por "fetch" se complete. Luego, utiliza "await" nuevamente para esperar a que la promesa devuelta por "response.json" se complete.

FUNCIONES ASINCRONAS

Las funciones asíncronas son una forma de escribir código asíncrono en JavaScript de manera más sencilla y legible. Se utilizan cuando necesitamos realizar operaciones que pueden tardar un tiempo en completarse, como hacer solicitudes a un servidor o acceder a archivos del sistema.

Una función asíncrona siempre devuelve una promesa, lo que significa que podemos utilizar la sintaxis de "then" para esperar a que la promesa se complete y obtener el resultado de la función. También podemos utilizar el operador "await" dentro de una función marcada como "async" para esperar a que una promesa se complete.

Por ejemplo, aquí hay una función asíncrona que hace una solicitud HTTP a un servidor y devuelve el cuerpo de la respuesta:

async function getData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}


En este ejemplo, la función "getData" es marcada como "async" y utiliza la palabra clave "await" para esperar a que la promesa devuelta por "fetch" se complete y para esperar a que la promesa devuelta por "response.json" se complete. Luego, devuelve el valor de "data".

Las funciones asíncronas son útiles cuando necesitamos realizar operaciones asíncronas de manera sencilla y legible, y son una forma conveniente de trabajar con promesas en JavaScript.

Sí, las funciones asíncronas se pueden utilizar tanto en el lado del cliente como en el lado del servidor en JavaScript. En el lado del cliente, las funciones asíncronas se pueden utilizar para realizar solicitudes HTTP a un servidor o para acceder a archivos del sistema, entre otras cosas.

Por ejemplo, aquí hay una función asíncrona que hace una solicitud HTTP a un servidor y devuelve el cuerpo de la respuesta:

async function getData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

En este ejemplo, la función "getData" es marcada como "async" y utiliza la palabra clave "await" para esperar a que la promesa devuelta por "fetch" se complete y para esperar a que la promesa devuelta por "response.json" se complete. Luego, devuelve el valor de "data".

También podemos utilizar "async/await" para simplificar el trabajo con otras operaciones asíncronas en el lado del cliente, como leer y escribir archivos del sistema o acceder a la cámara del dispositivo.

En general, las funciones asíncronas son una forma útil y conveniente de escribir código asíncrono en JavaScript, tanto en el lado del cliente como en el lado del servidor.



JAVASCRIPT ITERADORES


Los iteradores son una característica de JavaScript que se utilizan para recorrer y acceder a los elementos de una colección, como una matriz o una cadena de texto. Un iterador es un objeto que proporciona un método "next" que devuelve el siguiente elemento de la colección cada vez que se llama.

Los iteradores se utilizan a menudo con las estructuras de datos que implementan la interfaz "Iterable", que proporciona un método "Symbol.iterator" que devuelve un iterador para la colección. Las matrices y las cadenas de texto son dos ejemplos de estructuras de datos que implementan la interfaz "Iterable" en JavaScript.

Aquí hay un ejemplo de cómo se utiliza un iterador para recorrer los elementos de una matriz:

const array = [1, 2, 3];

const iterator = array[Symbol.iterator]();

console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

En este ejemplo, utilizamos el método "Symbol.iterator" para obtener un iterador para la matriz "array". Luego, utilizamos el método "next" del iterador para recorrer cada uno de los elementos de la matriz. Cada vez que llamamos a "next", el iterador devuelve un objeto con dos propiedades: "value", que es el valor del elemento actual, y "done", que es "true" si el iterador ha llegado al final de la colección o "false" en caso contrario.

Los iteradores son una forma útil de acceder a los elementos de una colección en JavaScript y se utilizan a menudo con las estructuras de datos que implementan la interfaz "Iterable".

PROGRAMACION FUNCIONAL

La programación funcional es un enfoque de programación en el que se tratan las funciones como elementos fundamentales del código y se evita el cambio de estado y la mutación de datos. En la programación funcional, se busca crear funciones "puras" que siempre devuelven el mismo resultado dado el mismo conjunto de entradas y no tienen efectos secundarios.

JavaScript es un lenguaje que admite la programación funcional y proporciona una serie de características y herramientas para trabajar de manera funcional. Algunas de estas características incluyen:

Funciones de primera clase: Las funciones en JavaScript son valores de primera clase, lo que significa que se pueden pasar como argumentos a otras funciones y devolver como resultado de otras funciones. Esto permite crear funciones "genericas" que pueden aplicarse a diferentes casos.

Closures: Las closures son funciones que tienen acceso a las variables del ámbito en el que fueron creadas, incluso si ese ámbito ya no existe. Esto permite crear funciones que "recuerden" el contexto en el que se crearon y pueden ser utilizadas en diferentes contextos.

Funciones de orden superior: Las funciones de orden superior son funciones que aceptan otras funciones como argumentos o devuelven funciones como resultado. Esto permite crear funciones que pueden aplicar otras funciones a conjuntos de datos.

En la programación funcional, se busca evitar el cambio de estado y la mutación de datos y en su lugar utilizar funciones "puras" que siempre devuelven el mismo resultado dado el mismo conjunto de entradas y no tienen efectos secundarios. Esto puede hacer que el código sea más fácil de depurar y probar y puede mejorar la legibilidad y la mantenibilidad del código a largo plazo.

<html>
    <head>
        <title>Trivia Know-It-All: Chatbots in the Browser with TensorFlow.js</title>
        <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script>
    </head>
    <body>
        <h1 id="status">Trivia Know-It-All Bot</h1>
        <label>Ask a trivia question:</label>
        <input id="question" type="text" />
        <button id="submit">Submit</button>
        <p id="bot-question"></p>
        <p id="bot-answer"></p>
        <script>
        function setText( text ) {
            document.getElementById( "status" ).innerText = text;
        }

        (async () => {
            // Load TriviaQA data
            let triviaData = await fetch( "web/verified-wikipedia-dev.json" ).then( r => r.json() );
            let data = triviaData.Data;

            // Process all QA to map to answers
            let questions = data.map( qa => qa.Question );

            let bagOfWords = {};
            let allWords = [];
            let wordReference = {};
            questions.forEach( q => {
                let words = q.replace(/[^a-z ]/gi, "").toLowerCase().split( " " ).filter( x => !!x );
                words.forEach( w => {
                    if( !bagOfWords[ w ] ) {
                        bagOfWords[ w ] = 0;
                    }
                    bagOfWords[ w ]++; // Counting occurrence just for word frequency fun
                });
            });

            allWords = Object.keys( bagOfWords );
            allWords.forEach( ( w, i ) => {
                wordReference[ w ] = i + 1;
            });

            // Create a tokenized vector for each question
            const maxSentenceLength = 30;
            let vectors = [];
            questions.forEach( q => {
                let qVec = [];
                // Use a regex to only get spaces and letters and remove any blank elements
                let words = q.replace(/[^a-z ]/gi, "").toLowerCase().split( " " ).filter( x => !!x );
                for( let i = 0; i < maxSentenceLength; i++ ) {
                    if( words[ i ] ) {
                        qVec.push( wordReference[ words[ i ] ] );
                    }
                    else {
                        // Add padding to keep the vectors the same length
                        qVec.push( 0 );
                    }
                }
                vectors.push( qVec );
            });

            let outputs = questions.map( ( q, index ) => {
                let output = [];
                for( let i = 0; i < questions.length; i++ ) {
                    output.push( i === index ? 1 : 0 );
                }
                return output;
            });

            // Define our RNN model with several hidden layers
            const model = tf.sequential();
            // Add 1 to inputDim for the "padding" character
            model.add(tf.layers.embedding( { inputDim: allWords.length + 1, outputDim: 128, inputLength: maxSentenceLength, maskZero: true } ) );
            model.add(tf.layers.simpleRNN( { units: 32 } ) );
            // model.add(tf.layers.bidirectional( { layer: tf.layers.simpleRNN( { units: 32 } ), mergeMode: "concat" } ) );
            model.add(tf.layers.dense( { units: 50 } ) );
            model.add(tf.layers.dense( { units: 25 } ) );
            model.add(tf.layers.dense( {
                units: questions.length,
                activation: "softmax"
            } ) );

            model.compile({
                optimizer: tf.train.adam(),
                loss: "categoricalCrossentropy",
                metrics: [ "accuracy" ]
            });

            const xs = tf.stack( vectors.map( x => tf.tensor1d( x ) ) );
            const ys = tf.stack( outputs.map( x => tf.tensor1d( x ) ) );
            await model.fit( xs, ys, {
                epochs: 20,
                shuffle: true,
                callbacks: {
                    onEpochEnd: ( epoch, logs ) => {
                        setText( `Training... Epoch #${epoch} (${logs.acc})` );
                        console.log( "Epoch #", epoch, logs );
                    }
                }
            } );

            setText( "Trivia Know-It-All Bot is Ready!" );

            document.getElementById( "question" ).addEventListener( "keyup", function( event ) {
                // Number 13 is the "Enter" key on the keyboard
                if( event.keyCode === 13 ) {
                    // Cancel the default action, if needed
                    event.preventDefault();
                    // Trigger the button element with a click
                    document.getElementById( "submit" ).click();
                }
            });

            document.getElementById( "submit" ).addEventListener( "click", async function( event ) {
                let text = document.getElementById( "question" ).value;
                document.getElementById( "question" ).value = "";

                // Run the calculation things
                let qVec = [];
                let words = text.replace(/[^a-z ]/gi, "").toLowerCase().split( " " ).filter( x => !!x );
                for( let i = 0; i < maxSentenceLength; i++ ) {
                    if( words[ i ] ) {
                        qVec.push( wordReference[ words[ i ] ] );
                    }
                    else {
                        // Add padding to keep the vectors the same length
                        qVec.push( 0 );
                    }
                }

                let prediction = await model.predict( tf.stack( [ tf.tensor1d( qVec ) ] ) ).data();
                // Get the index of the highest value in the prediction
                let id = prediction.indexOf( Math.max( ...prediction ) );

                document.getElementById( "bot-question" ).innerText = questions[ id ];
                document.getElementById( "bot-answer" ).innerText = data[ id ].Answer.Value;
            });
        })();
        </script>
    </body>
</html>

Google Analytics es una herramienta gratuita de análisis de datos de web ofrecida por Google. Sirve para medir el tráfico y el rendimiento de un sitio web. Con Google Analytics, puedes ver informes sobre cuántas personas visitan tu sitio, desde qué lugares vienen, qué páginas ven y cuánto tiempo pasan en el sitio. También puedes ver informes sobre las conversiones, es decir, las acciones que realizan las personas en tu sitio, como hacer clic en un enlace o comprar un producto.

Google Analytics es muy útil para los propietarios de sitios web y los anunciantes en línea, ya que les permite comprender mejor a sus audiencias y optimizar su sitio y sus campañas publicitarias para lograr mejores resultados. Por ejemplo, si ves que una página en particular tiene una tasa de rebote (es decir, la gente deja rápidamente el sitio después de visitar esa página) muy alta, puedes intentar mejorar el contenido de esa página para que sea más atractivo y mantenga a las personas en el sitio por más tiempo.

Para incluir Google Analytics en un sitio web, primero debes tener una cuenta de Google Analytics y haber creado un seguimiento para tu sitio. Luego, puedes obtener el código de seguimiento de tu cuenta de Google Analytics y agregarlo a tu sitio.

Aquí hay un ejemplo de código que puedes usar para agregar Google Analytics a tu sitio web:

<!-- Inicio de Google Analytics -->
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-12345678-1', 'auto');  // Reemplaza 'UA-12345678-1' con tu ID de seguimiento
  ga('send', 'pageview');
</script>
<!-- Fin de Google Analytics -->

  
  Este código debe ir justo antes de la etiqueta de cierre </head> de tu archivo HTML. Recuerda reemplazar 'UA-12345678-1' con tu ID de seguimiento real, que puedes encontrar en tu cuenta de Google Analytics.

Una vez que hayas agregado este código a tu sitio, Google Analytics comenzará a recopilar datos sobre las visitas a tu sitio y podrás ver los informes en tu cuenta de Google Analytics.

En Google Analytics, una propiedad es un sitio web, aplicación móvil o plataforma de medios sociales que se está midiendo. Cada propiedad tiene su propio ID de seguimiento único y se puede configurar de manera independiente para rastrear diferentes aspectos de su rendimiento.

Por ejemplo, si tienes un sitio web y una aplicación móvil, cada uno podría ser una propiedad en Google Analytics. Puedes configurar diferentes informes y metas para cada propiedad y ver cómo se desempeñan de manera independiente.

Es importante tener en cuenta que una propiedad en Google Analytics no es lo mismo que una propiedad de Google Search Console. La propiedad de Google Search Console es un sitio web que ha sido verificado y que se puede utilizar para ver informes de rendimiento en los resultados de búsqueda de Google.

ID de flujo: 4362679479

ID de medición: G-CW1CE2SYGX

URL del flujo: https://medicalresolve.com

Nombre del flujo: Medical Resolve

<!-- Navbar -->
<nav class="navbar navbar-expand-lg bg-light navbar-light">
  <!-- Container wrapper -->
  <div class="container-fluid">
    <!-- Navbar brand -->
    <a class="navbar-brand" href="#">Brand</a>

    <!-- Toggle button -->
    <button
      class="navbar-toggler"
      type="button"
      data-mdb-toggle="collapse"
      data-mdb-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <i class="fas fa-bars"></i>
    </button>

    <!-- Collapsible wrapper -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">

      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <!-- Link -->
        <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
        <!-- Dropdown -->
        <li class="nav-item dropdown">
          <a
            class="nav-link dropdown-toggle"
            href="#"
            id="navbarDropdown"
            role="button"
            data-mdb-toggle="dropdown"
            aria-expanded="false"
          >
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider" /></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>

      <!-- Icons -->
      <ul class="navbar-nav d-flex flex-row me-1">
        <li class="nav-item me-3 me-lg-0">
          <a class="nav-link" href="#"><i class="fas fa-shopping-cart"></i></a>
        </li>
        <li class="nav-item me-3 me-lg-0">
          <a class="nav-link" href="#"><i class="fab fa-twitter"></i></a>
        </li>
      </ul>
      <!-- Search -->
      <form class="w-auto">
        <input
          type="search"
          class="form-control"
          placeholder="Type query"
          aria-label="Search"
        />
      </form>
    </div>
  </div>
  <!-- Container wrapper -->
</nav>
<!-- Navbar -->

¿Por qué los médicos necesitan un sistema de soporte a las decisiones médicas?

En el campo médico, tomar decisiones informadas y precisas es esencial para garantizar la mejor atención posible a los pacientes. Sin embargo, esto puede ser un desafío, ya que los médicos deben tener en cuenta una gran cantidad de factores, incluyendo los síntomas del paciente, su historial médico, las posibles interacciones entre medicamentos y mucho más.

Es aquí donde entran en juego los sistemas de soporte a las decisiones médicas. Estos sistemas utilizan tecnología de vanguardia para proporcionar a los médicos información precisa y actualizada sobre las opciones de tratamiento disponibles y las recomendaciones de expertos. Esto les permite tomar decisiones más informadas y precisas, lo que puede tener un impacto positivo en la atención y el bienestar de los pacientes.

Pero, ¿qué beneficios ofrecen los sistemas de soporte a las decisiones médicas a los médicos? Aquí te presentamos algunos de ellos:

Ayudan a los médicos a estar al tanto de las últimas investigaciones y desarrollos en el campo médico. Los sistemas de soporte a las decisiones médicas suelen estar basados en evidencia científica y se actualizan regularmente con las últimas investigaciones y recomendaciones de expertos. Esto permite a los médicos estar al tanto de los tratamientos más efectivos y las prácticas más recomendadas.

Aumentan la eficiencia y la productividad. Los sistemas de soporte a las decisiones médicas pueden ayudar a los médicos a tomar decisiones de manera más rápida y precisa, lo que les permite atender a más pacientes y aumentar su productividad.

Mejoran la calidad de la atención. Al proporcionar a los médicos información precisa y actualizada, los sistemas de soporte a las decisiones médicas pueden ayudar a mejorar la calidad de la atención que se brinda a los pacientes.

Ayudan a los médicos a tomar decisiones más informadas y precisas. Como se mencionó anteriormente,

link a linkedin

https://www.linkedin.com/in/gabriel-ibarra-jimenez-b9264718/






OTRA SECCION DE CDSS

¿Por qué los sistemas de soporte a las decisiones médicas son importantes para los médicos?

Los sistemas de soporte a las decisiones médicas son herramientas informáticas que proporcionan a los médicos información relevante y actualizada para apoyar la toma de decisiones clínicas. Estos sistemas pueden incluir guías de tratamiento, recomendaciones de expertos y recursos educativos para pacientes y profesionales.

Pero, ¿por qué son importantes para los médicos? Aquí te dejamos algunos de los beneficios que ofrecen:

Ayudan a mejorar la calidad de atención médica: Los sistemas de soporte a las decisiones médicas proporcionan a los médicos acceso a información actualizada y de alta calidad, lo que les permite tomar decisiones más informadas y ofrecer a sus pacientes una atención médica de mayor calidad.

Ahorran tiempo y esfuerzo: Los sistemas de soporte a las decisiones médicas pueden ayudar a los médicos a recopilar y procesar información de manera más eficiente, lo que les permite ahorrar tiempo y esfuerzo y dedicar más tiempo a otras tareas importantes.

Ayudan a reducir errores médicos: Los sistemas de soporte a las decisiones médicas pueden ayudar a los médicos a evitar errores médicos al proporcionar información precisa y relevante para la toma de decisiones.

Promueven la colaboración y la comunicación entre los médicos: Los sistemas de soporte a las decisiones médicas pueden fomentar la colaboración y la comunicación entre los médicos al proporcionar una plataforma común para compartir información y discutir casos.

En resumen, los sistemas de soporte a las decisiones médicas son herramientas valiosas para los médicos ya que les permiten mejorar la calidad de atención médica, ahorrar tiempo y esfuerzo, reducir errores médicos y promover la colaboración y la comunicación entre los profesionales de la salud.



EJEMPLO DE SISTEMA DE SOPORTE A DECISIONES MEDICAS EN JAVASCRIPT

// Definimos una función para recomendar un tratamiento para un paciente con asma
function recomendarTratamientoAsma(edad, sintomas, esfuerzo) {
  // Definimos una variable para almacenar la recomendación de tratamiento
  let recomendacion = "";

  // Si el paciente tiene menos de 12 años y presenta síntomas leves durante el esfuerzo físico, recomendamos el uso de un inhalador de corticosteroides
  if (edad < 12 && sintomas === "leves" && esfuerzo === "si") {
    recomendacion = "inhalador de corticosteroides";
  }
  // Si el paciente tiene 12 años o más y presenta síntomas moderados o graves durante el esfuerzo físico, recomendamos el uso de un inhalador de corticosteroides y un broncodilatador
  else if (edad >= 12 && (sintomas === "moderados" || sintomas === "graves") && esfuerzo === "si") {
    recomendacion = "inhalador de corticosteroides y broncodilatador";
  }
  // Si el paciente tiene 12 años o más y presenta síntomas leves sin esfuerzo físico, recomendamos el uso de un inhalador de corticosteroides
  else if (edad >= 12 && sintomas === "leves" && esfuerzo === "no") {
    recomendacion = "inhalador de corticosteroides";
  }
  // En cualquier otro caso, recomendamos consultar con un médico
  else {
    recomendacion = "consultar con un médico";
  }

  // Devolvemos la recomendación de tratamiento
  return recomendacion;
}

// Llamamos a la función y almacenamos la recomendación de tratamiento en una variable
let tratamientoRecomendado = recomendarTratamientoAsma(30, "leves", "si");

// Mostramos la recomendación de tratamiento en la consola
console.log(tratamientoRecomendado); // "inhalador de corticosteroides y broncodilatador"


Este ejemplo de código define una función que recomienda un tratamiento para un paciente con asma en función de su edad, síntomas y esfuerzo físico. La función utiliza una serie de condicionales para determinar la recomendación de tratamiento y devuelve el resultado


OTRO EJEMPLO E JAVASCRIPT CREANDO CLASES

// Crear una clase para representar una condición médica
class MedicalCondition {
  constructor(name, symptoms, treatments) {
    this.name = name;
    this.symptoms = symptoms;
    this.treatments = treatments;
  }
}

// Crear una clase para representar un paciente
class Patient {
  constructor(name, age, medicalConditions) {
    this.name = name;
    this.age = age;
    this.medicalConditions = medicalConditions;
  }
}

// Crear una clase para representar un sistema de soporte a las decisiones clínicas
class ClinicalDecisionSupportSystem {
  constructor(medicalConditions, patients) {
    this.medicalConditions = medicalConditions;
    this.patients = patients;
  }

  // Método para buscar una condición médica por nombre
  searchMedicalCondition(name) {
    for (let i = 0; i < this.medicalConditions.length; i++) {
      if (this.medicalConditions[i].name === name) {
        return this.medicalConditions[i];
      }
    }
    return null;
  }

  // Método para buscar un paciente por nombre
  searchPatient(name) {
    for (let i = 0; i < this.patients.length; i++) {
      if (this.patients[i].name === name) {
        return this.patients[i];
      }
    }
    return null;
  }

  // Método para recomendar un tratamiento para un paciente con una condición médica específica
  recommendTreatment(patientName, medicalConditionName) {
    // Buscar la condición médica y el paciente
    const medicalCondition = this.searchMedicalCondition(medicalConditionName);
    const patient = this.searchPatient(patientName);

    if (medicalCondition === null || patient === null) {
      return null;
    }

    // Verificar si el paciente tiene la condición médica
    let hasCondition = false;
    for (let i = 0; i < patient.medicalConditions.length; i++) {
      if (patient.medicalConditions[i].name === medicalConditionName) {
        hasCondition = true;
        break;
      }
    }

    if (!hasCondition) {
      return null;
    }

    // Recomendar un tratamiento de la lista de tratamientos disponibles para la condición médica
    return medicalCondition.treatments[0];
  }
}

// Crear algunas condiciones médicas y pacientes para usar en el sistema
const asthma = new MedicalCondition(
  "Asma",
  ["Disnea", "Tos", "Sibilancias"],
  ["In

 SECCION DE PAGINA INDEX

<div class="row row-copirayt">

            </div align="center">
            <a href="https://wa.me/+573114186086">
                <img src="what2.png" alt="WhatsApp" style="width:60px; height:60px;">
             </a><br>


                <p class="mbr-text mb-0 mbr-fonts-style mbr-white align-center display-7">
                    © Copyright 2023 Medical Resolve. All Rights Reserved.
                </p><br><br>
                
              </div>
               


            </div>
        </div>
    </div>
</section><section class="display-7" style="padding: 0;align-items: center;justify-content: center;flex-wrap: wrap;    align-content: center;display: flex;position: relative;height: 4rem;"><a href="https://mobiri.se/809683" style="flex: 1 1;height: 4rem;position: absolute;width: 100%;z-index: 1;"><img alt="" style="height: 4rem;" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="></a><p style="margin: 0;text-align: center;" class="display-7"></p><a style="z-index:1" href="https://mobirise.com/builder/html-code-generator.html"></a></section><script src="assets/bootstrap/js/bootstrap.bundle.min.js"></script>  <script src="assets/web/assets/cookies-alert-plugin/cookies-alert-core.js"></script>  <script src="assets/web/assets/cookies-alert-plugin/cookies-alert-script.js"></script>  <script src="assets/smoothscroll/smooth-scroll.js"></script>  <script src="assets/ytplayer/index.js"></script>  <script src="assets/mbr-switch-arrow/mbr-switch-arrow.js"></script>  <script src="assets/theme/js/script.js"></script>  <script src="assets/formoid/formoid.min.js"></script>  
  
  
<input name="cookieData" type="hidden" data-cookie-customDialogSelector='null' data-cookie-colorText='#424a4d' data-cookie-colorBg='rgba(234, 239, 241, 0.99)' data-cookie-textButton='De acuerdo' data-cookie-colorButton='' data-cookie-colorLink='#424a4d' data-cookie-underlineLink='false' data-cookie-text="Usamos cookies para darte la mejor experiencia. Lea nuestra política de cookies <a href='Cookies'>Política de cookies</a>.">
  </body>
</html>










SECCION FINAL DE PAGINAS

</section><section class="display-7" style="padding: 0;align-items: center;justify-content: center;flex-wrap: wrap;    align-content: center;display: flex;position: relative;height: 4rem;"><a href="https://mobiri.se/809683" style="flex: 1 1;height: 4rem;position: absolute;width: 100%;z-index: 1;"><img alt="" style="height: 4rem;" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="></a><p style="margin: 0;text-align: center;" class="display-7"></p><a style="z-index:1" href="https://mobirise.com/builder/web-design-program.html"></a></section><script src="assets/bootstrap/js/bootstrap.bundle.min.js"></script>  <script src="assets/web/assets/cookies-alert-plugin/cookies-alert-core.js"></script>  <script src="assets/web/assets/cookies-alert-plugin/cookies-alert-script.js"></script>  <script src="assets/smoothscroll/smooth-scroll.js"></script>  <script src="assets/ytplayer/index.js"></script>  <script src="assets/dropdown/js/navbar-dropdown.js"></script>  <script src="assets/theme/js/script.js"></script>  
  
  
<input name="cookieData" type="hidden" data-cookie-customDialogSelector='null' data-cookie-colorText='#424a4d' data-cookie-colorBg='rgba(234, 239, 241, 0.99)' data-cookie-textButton='De acuerdo' data-cookie-colorButton='' data-cookie-colorLink='#424a4d' data-cookie-underlineLink='false' data-cookie-text="Usamos cookies para darte la mejor experiencia. Lea nuestra política de cookies <a href='Cookies'>Política de cookies</a>.">
  </body>
</html>

<form id="question-form">
  <label for="question">Pregunta:</label><br>
  <input type="text" id="question" name="question"><br>
  <button type="submit">Enviar pregunta</button>
</form> 


<div id="answer"></div>

<script>
  
const form = document.querySelector('#question-form');
const answerDiv = document.querySelector('#answer');

form.addEventListener('submit', (event) => {
  event.preventDefault();

  // Obtiene la pregunta ingresada por el usuario
  const question = event.target.elements.question.value;

  // Llama a la función que genera la respuesta a la pregunta
  const answer = getAnswer(question);

  // Muestra la respuesta en el elemento div
  answerDiv.textContent = answer;
});


function getAnswer(question) {
  // Convertir la pregunta a minúsculas
  question = question.toLowerCase();

  // Si la pregunta es "¿cuál es tu nombre?"
  if (question === "¿cuál es tu nombre?") {
    return "Mi nombre es Assistant";
  }

  // Si la pregunta es "¿de qué color es el cielo?"
  if (question === "¿de qué color es el cielo?") {
    return "El cielo es azul";
  }

  // Si la pregunta es "¿cuántos dedos tienes en una mano?"
  if (question === "¿cuántos dedos tienes en una mano?") {
    return "Tengo cinco dedos en una mano";
  }

  // Si no se reconoce la pregunta, devolver una respuesta genérica
  return "No tengo una respuesta para esa pregunta";
}

</script>

<!-- Formulario para hacer preguntas al chatbot -->
<form id="chatbot-form">
  <label for="question">Hacer una pregunta:</label><br>
  <input type="text" id="question" name="question"><br>
  <input type="submit" value="Enviar">
</form> 

<!-- Etiqueta para mostrar la respuesta del chatbot -->
<p id="answer"></p>



<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.5.0/dist/tf.min.js"></script>

  // Crea una función para procesar el archivo de entrenamiento y devolver un conjunto de datos de entrenamiento
  const processTrainingData = text => {
    const lines = text.split('\n')
    return lines.map(line => {
      const [question, answer] = line.split(':')
      return {
        input: question,
        output: answer
      }
    })
  }

  // Lee el archivo de entrenamiento y procesa los datos de entrenamiento
  const trainingData = processTrainingData(fs.readFileSync('training-data.txt', 'utf8'))

  // Crea un modelo de secuencia a secuencia con TensorFlow.js
  const model = tf.sequential()

  // Añade una capa de embedding para procesar el texto de entrada
  model.add(tf.layers.embedding({
    inputDim: 10000,
    outputDim: 64
  }))

  // Añade una capa LSTM para procesar el texto de entrada
  model.add(tf.layers.lstm({
    units: 64,
    returnSequences: true,
    recurrentInitializer: 'glorotNormal'
  }))

  // Añade una capa de atención para mejorar la precisión del modelo
  model.add(tf.layers.attention())

  // Añade una capa densa para procesar la salida
  model.add(tf.layers.dense({
    units: 64,
    activation: 'relu'
  }))

  // Añade una capa de salida para generar la respuesta
  model.add(tf.layers.dense({
    units: 1,
    activation: 'sigmoid'
  }))

  // Compila el modelo
  model.compile({
    loss: 'binaryCrossentropy',
    optimizer: 'adam'
  })

  // Entrena el modelo
  model.fit(trainingData, {
    epochs: 10
  })

  // Crea una función para hacer preguntas al chatbot
 const ask = question => {
  // Valida que la pregunta no esté vacía
  if (!question) {
    console.error("Por favor ingrese una pregunta válida");
    return;
  }
  
  // Muestra la pregunta del usuario
  console.log(`Usuario: ${question}`);
  
  // Pide una respuesta a la red neuronal
  try {
    const answer = model.predict(question);
    // Muestra la respuesta del chatbot
    console.log(`Chatbot: ${answer}`);
  } catch (error) {
    console.error("Error al obtener respuesta del chatbot:", error);
  }
};

______________________________________________________________________________________________


<form id="chatbot-form">
  <label for="question">Hacer una pregunta:</label><br>
  <input type="text" id="question" name="question"><br>
  <input type="submit" value="Enviar">
</form>

<!-- Etiqueta para mostrar la respuesta del chatbot -->
<p id="answer"></p>

<script>
  // Crea una función para hacer preguntas al chatbot
  function ask(question) {
    // Valida que la pregunta no esté vacía
    if (!question) {
      console.error("Por favor ingrese una pregunta válida");
      return;
    }
  
    // Muestra la pregunta del usuario
    console.log(`Usuario: ${question}`);
  
    // Pide una respuesta a la red neuronal
    try {
      const answer = model.predict(question);
      // Muestra la respuesta del chatbot
      console.log(`Chatbot: ${answer}`);
      
      // Muestra la respuesta del chatbot en la etiqueta p
      document.getElementById("answer").textContent = answer;
    } catch (error) {
      console.error("Error al obtener respuesta del chatbot:", error);
    }
  }
  
  // Agrega un manejador de eventos submit al formulario
  document.getElementById("chatbot-form").addEventListener("submit", event => {
    // Evita que la página se recargue
    event.preventDefault();
    
    // Obtiene la pregunta del usuario
    const question = document.getElementById("question").value;
    
    // Hace la pregunta al chatbot
    ask(question);
  });
</script>







OTRO CÓDIGO

const model = tf.sequential();

// Añade una capa de embedding para procesar el texto de entrada
model.add(tf.layers.embedding({
  inputDim: 10000,
  outputDim: 64
}));

// Añade una capa LSTM para procesar el texto de entrada
model.add(tf.layers.lstm({
  units: 64,
  returnSequences: true,
  recurrentInitializer: 'glorotNormal'
}));

// Añade una capa de atención para mejorar la precisión del modelo
model.add(tf.layers.attention());

// Añade una capa densa para procesar la salida
model.add(tf.layers.dense({
  units: 64,
  activation: 'relu'
}));

// Añade una capa de salida para generar la respuesta
model.add(tf.layers.dense({
  units: 1,
  activation: 'sigmoid'
}));

// Compila el modelo
model.compile({
  loss: 'binaryCrossentropy',
  optimizer: 'adam'
});

// Entrena el modelo
model.fit(trainingData, {
  epochs: 10
});

// Crea una función para hacer preguntas al chatbot
const ask = question => {
  // Valida que la pregunta no esté vacía
  if (!question) {
    console.error("Por favor ingrese una pregunta


                  
                  
                  
                  
                  
                  
 <!-- Formulario HTML para hacer preguntas al chatbot -->
<form id="chatbot-form">
  <label for="question">Hacer una pregunta:</label><br>
  <input type="text" id="question" name="question"><br>
  <input type="submit" value="Enviar">
</form> 

<!-- Etiqueta para mostrar la respuesta del chatbot -->
<p id="answer"></p>

<!-- Incluye la biblioteca TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.5.0/dist/tf.min.js"></script>

<script>
  // Crea una función para procesar el archivo de entrenamiento y devolver un conjunto de datos de entrenamiento
  const processTrainingData = text => {
    const lines = text.split('\n')
    return lines.map(line => {
      const [question, answer] = line.split(':')
      return {
        input: question,
        output: answer
      }
    })
  }

  // Lee el archivo de entrenamiento y procesa los datos de entrenamiento
  const trainingData = processTrainingData(fs.readFileSync('training-data.txt', 'utf8'))

  // Crea un modelo de secuencia a secuencia con TensorFlow.js
  const model = tf.sequential()

  // Añade una capa de embedding para procesar el texto de entrada
  model.add

  
  
  
  
  
  CODIGO COMPLETO
  
  
  <!-- Formulario HTML para hacer preguntas al chatbot -->
<form id="chatbot-form">
  <label for="question">Hacer una pregunta:</label><br>
  <input type="text" id="question" name="question"><br>
  <input type="submit" value="Enviar">
</form> 

<!-- Etiqueta para mostrar la respuesta del chatbot -->
<p id="answer"></p>

   
  
  
<!-- Incluye la biblioteca TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.5.0/dist/tf.min.js"></script>

<script>
  // Crea una función para procesar el archivo de entrenamiento y devolver un conjunto de datos de entrenamiento
  const processTrainingData = text => {
    const lines = text.split('\n')
    return lines.map(line => {
      const [question, answer] = line.split(':')
      return {
        input: question,
        output: answer
      }
    })
  }

  // Lee el archivo de entrenamiento y procesa los datos de entrenamiento
  const trainingData = processTrainingData(fs.readFileSync('training-data.txt', 'utf8'))

  // Crea un modelo de secuencia a secuencia con TensorFlow.js
  const model = tf.sequential()

  // Añade una capa de embedding para procesar el texto de entrada
  model.add(tf.layers.embedding({
    inputDim: 10000,
    outputDim: 64
  }))

  
  
    
    // Añade una capa LSTM para procesar el texto de entrada
  model.add(tf.layers.lstm({
    units: 64,
    returnSequences: true,
    recurrentInitializer: 'glorotNormal'
  }))

  // Añade una capa de atención para mejorar la precisión del modelo
  model.add(tf.layers.attention())

  // Añade una capa densa para procesar la salida
  model.add(tf.layers.dense({
    units: 64,
    activation: 'relu'
  }))

  // Añade una capa de salida para generar la respuesta
  model.add(tf.layers.dense({
    units: 1,
    activation: 'sigmoid'
  }))

  // Compila el modelo
  model.compile({
    loss: 'binaryCrossentropy',
    optimizer: 'adam'
  })

  // Entrena el modelo
  model.fit(trainingData, {
    epochs: 10
  })

  // Crea una función para hacer preguntas al chatbot
  const ask = question => {
    // Valida que la pregunta no esté vacía
    if (!question) {
      console.error("Por favor ingrese una pregunta válida");
      return;
    }

    // Muestra la pregunta del usuario
    console.log(`Usuario: ${question}`);

    // Pide una respuesta a la red neuronal
    try {
      const answer = model.predict(question);
      // Muestra la respuesta del chatbot
      console.log(`Chatbot: ${answer}`);
    } catch (error) {
      console.error("Error al obtener respuesta del chatbot:", error);
    }
  };

  // Asigna un manejador de eventos al botón Enviar del formulario
  document.getElementById('chatbot-form').addEventListener('submit', event => {
    // Previene la acción por defecto del formulario
    event.preventDefault();

    // Obtiene la pregunta del usuario
    const question = document.getElementById('question').value;

  
    // Obtiene la pregunta del usuario
    const question = document.getElementById('question').value;

    // Hace una pregunta al chatbot
    ask(question);

    // Muestra la respuesta del chatbot en la página
    document.getElementById('answer').textContent = answer;
  });
</script>

const brain = require('brain.js')
const fs = require('fs')

// Crea una función para procesar el archivo de entrenamiento y devolver un conjunto de datos de entrenamiento
const processTrainingData = text => {
  const lines = text.split('\n')
  return lines.map(line => {
    const [question, answer] = line.split(':')
    return {
      input: question,
      output: answer
    }
  })
}

// Lee el archivo de entrenamiento y procesa los datos de entrenamiento
const trainingData = processTrainingData(fs.readFileSync('training-data.txt', 'utf8'))

// Crea una red neuronal LSTM y entrena con el conjunto de datos de entrenamiento
const net = new brain.recurrent.LSTM()
net.train(trainingData, {
  errorThresh: 0.005
})

// Crea una función para hacer preguntas al chatbot
const ask = question => {
  // Pide una respuesta a la red neuronal
  const answer = net.run(question)
  console.log(answer)
}

// Prueba el chatbot con una pregunta de ejemplo
ask('¿Cuál es el tiempo en París?')

@font-face {
  font-family: 'MyParagraphFont';
  src: url('fonts/Roboto.woff2') format('woff2'),
       url('fonts/Roboto.woff') format('woff'),
       url('fonts/Roboto.ttf') format('truetype');
}

/* hmtl */
<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
	</head>
	<body>

    <article class="card">
      <div class="card-body">
       @Antonio Robles
      </div>
    </article>
	</body>
</html>


***
/* CSS */
:root {
  --border-color: linear-gradient(to right, tomato 0%, gold 100%);
  --card-color: #222;
}
.card {
  background: var(--border-color);
  aspect-ratio: 10/16;
  width: 200px;
  padding: 5px;
  border-radius: 16px;
  position: relative;
}

.card-body {
  color: wheat;
  background: var(--card-color);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 16px;
}

<style>.pcdriverssitemap .sitemap-box{font-size:14px;line-height:1.58em}
.pcdriverssitemap .sitemap-box:not(:last-child){margin-bottom:35px;padding-bottom:25px;border-bottom:2px solid #ebeced}
.pcdriverssitemap .judul{margin-top:0;font-size:14px;color:#505050}
.pcdriverssitemap .judul:before{content:'Label: ';margin-right:5px}
.pcdriverssitemap ol{list-style:none;margin:0;padding:0;counter-reset:panduan-count}
.pcdriverssitemap li:not(:last-child){margin-bottom:10px}
.pcdriverssitemap li{display:flex}
.pcdriverssitemap li:before{content:counter(panduan-count) '.';counter-increment:panduan-count;flex-shrink:0;width:40px;font-size:22px;font-family:'PT Sans', sans-serif;line-height:normal;color:rgba(0,0,0,.15);}
.pcdriverssitemap li a{color:#09204C;font-size:90%;font-weight:700;font-family:'PT Sans', sans-serif}
.pcdriverssitemap li a:after{content:'Read more';display:block;margin-top:2px;color:#505050;font-size:11px;font-family:'PT Sans', sans-serif;font-weight:400;line-height:1.58em}
.pcdriverssitemap li a:hover:after{text-decoration:underline}</style>

<div id='pcdriverssitemap' class='pcdriverssitemap'>
    <div class='loading'>Loading....</div>
</div>

<script>
    /*<![CDATA[*/
    var toc_config = {containerId:'pcdriverssitemap', showNew:0, sortAlphabetically:{thePanel:true, theList:true}, activePanel:1, slideSpeed:{down:400, up:400}, slideEasing:{down: null, up: null}, slideCallback:{down:function(){}, up:function(){}}, clickCallback:function(){}, jsonCallback:'pcdriverssitemap',delayLoading: 0};
    window.onload = function(){
    !function(e,o){var t=o.getElementById(toc_config.containerId),c=o.getElementsByTagName("head")[0],n=[];e[toc_config.jsonCallback]=function(e){for(var o,c,i=e.feed.entry,a=e.feed.category,l="",s=0,d=a.length;d>s;++s)n.push(a[s].term);for(var r=0,f=i.length;f>r;++r)(toc_config.showNew||toc_config.showNew>0)&&r<toc_config.showNew+1&&(i[r].title.$t+=" %new%");i=toc_config.sortAlphabetically.theList?i.sort(function(e,o){return e.title.$t.localeCompare(o.title.$t)}):i,toc_config.sortAlphabetically.thePanel&&n.sort();for(var g=0,h=n.length;h>g;++g){l+='<div class=\"sitemap-box\"><h4 class=\"judul\">'+n[g]+'</h4>',l+='<div class=\"konten\"><ol>';for(var _=0,p=i.length;p>_;++_){o=i[_].title.$t;for(var w=0,u=i[_].link.length;u>w;++w)if("alternate"==i[_].link[w].rel){c=i[_].link[w].href;break}for(var v=0,m=i[_].category.length;m>v;++v)n[g]==i[_].category[v].term&&(l+='<li><a href=\"'+c+'\" title=\"'+o.replace(/ \%new\%$/,"")+'\">'+o.replace(/ \%new\%$/,"")+'</a></li>')}l+='</ol></div></div>'}t.innerHTML=l,"undefined"!=typeof jQuery&&($("#"+toc_config.containerId+" .konten").hide(),$("#"+toc_config.containerId+" .judul").click(function(){$(this).hasClass("aktif")||(toc_config.clickCallback(this),$("#"+toc_config.containerId+" .judul").removeClass("aktif").next().slideUp(toc_config.slideSpeed.up,toc_config.slideEasing.up,toc_config.slideCallback.up),$(this).addClass("aktif").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))}).eq(toc_config.activePanel-1).addClass("aktif").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))};var i=o.createElement("script");i.src="https://pcdriversupdate.blogspot.com/feeds/posts/summary?alt=json-in-script&max-results=9999&callback="+toc_config.jsonCallback,"onload"==toc_config.delayLoading?e.onload=function(){c.appendChild(i)}:e.setTimeout(function(){c.appendChild(i)},toc_config.delayLoading)}(window,document);}
    /*]]>*/
</script>

Para agregar el icono de WhatsApp a la página de inicio de un sitio web, primero debes obtener el código HTML del icono desde una fuente confiable. Luego, puedes agregar este código a la página de inicio de tu sitio web donde desees que se muestre el icono. A continuación te presento un ejemplo de código que puedes utilizar:

<a href="https://wa.me/12223334444">
  <img src="https://icon-library.com/images/whatsapp-icon-png/whatsapp-icon-png-29.jpg" alt="WhatsApp" style="width:30px; height:30px;">
</a>


<a href="https://wa.me/tu_número_de_whatsapp">
  <img src="https://icon-library.com/images/whatsapp-icon-png/whatsapp-icon-png-17.jpg" alt="WhatsApp" />
</a>



En este código, se utiliza un enlace HTML para redirigir al usuario a la aplicación de WhatsApp cuando haga clic en el icono. La ruta de la imagen del icono debe ser cambiada por la ruta donde se almacena la imagen en tu servidor. También puedes cambiar el tamaño del icono cambiando el valor de la propiedad width y height en el estilo CSS.

Para convertir una aplicación de Node.js en una aplicación del lado del cliente que se puede ejecutar en un navegador, puedes utilizar una herramienta como Webpack. A continuación te presento un ejemplo de cómo podrías hacerlo:

Instala Webpack y otras dependencias necesarias utilizando npm (gestor de paquetes de Node.js):
npm install --save-dev webpack webpack-cli
Crea un archivo de configuración de Webpack (webpack.config.js) que indique a Webpack cómo procesar tu aplicación de Node.js. En este archivo, debes especificar qué archivos de entrada (es decir, tu código de Node.js) y qué archivos de salida (el código del lado del cliente que se ejecutará en el navegador) deseas utilizar:

const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.bundle.js'
  }
};
Crea un script de npm en tu archivo package.json que utilice Webpack para procesar tu aplicación de Node.js y generar el código del lado del cliente:
 
"scripts": {
"build": "webpack"
}


No es necesario colocar una etiqueta src en el head del navegador cuando se ha utilizado Webpack para convertir una aplicación Node.js para su uso en el navegador. Sin embargo, es posible que necesite incluir otras etiquetas en el head de la página para especificar el tipo de contenido o cargar archivos CSS o JavaScript adicionales que sean necesarios para la aplicación.

Ambos Browserify y Webpack son herramientas populares para empaquetar módulos JavaScript y hacer que su código sea más fácil de usar en diferentes entornos. Sin embargo, cada uno tiene sus propios enfoques y ventajas.

Browserify se enfoca en la compatibilidad con el estándar de módulos CommonJS, lo que significa que puede usar módulos que se hayan escrito para funcionar con Node.js en su código de navegador. Esto lo hace una buena opción si desea reutilizar código que ya ha escrito para Node.js en su aplicación web.

BROWSERIFY

Browsers don't have the require method defined, but Node.js does. With Browserify you can write code that uses require in the same way that you would use it in Node

Browserify es una herramienta que se utiliza para la programación en JavaScript. Su objetivo es permitir a los programadores utilizar módulos de Node.js en aplicaciones de navegador web. Esto significa que con Browserify, puedes escribir código JavaScript que utiliza la sintaxis de los módulos de Node.js y luego empaquetar ese código para su uso en un navegador web. De esta manera, puedes utilizar las mismas técnicas de programación que utilizas para desarrollar aplicaciones de servidor en tus aplicaciones de navegador web.

Para browserify una aplicación hecha con Node.js, primero deberás instalar la herramienta de línea de comandos de Browserify en tu sistema con el comando 

npm install -g browserify

Una vez que tengas Browserify instalado, puedes usar el siguiente comando para browserify tu aplicación:

browserify main.js -o bundle.js


Donde main.js es el archivo de entrada de tu aplicación y bundle.js es el nombre del archivo de salida que se generará.

Este comando tomará todos los módulos y dependencias que hayas importado en main.js y los combinará en un único archivo, que luego podrás incluir en tu página web como un script normal.

es posible utilizar una aplicación de Node.js en el navegador utilizando Browserify. Browserify es una herramienta que permite empaquetar módulos de Node.js para su uso en el navegador. De esta manera, puedes utilizar las mismas dependencias y módulos que utilizas en tus aplicaciones de Node.js en el navegador.

para usar Browserify en una aplicación de Node.js, es necesario que ya tengas todos los archivos creados y que la aplicación esté funcionando correctamente en Node.js. Una vez que hayas comprobado que la aplicación funciona como se espera en Node.js, puedes utilizar Browserify para empaquetarla y permitir que se ejecute en un navegador.


es posible ejecutar aplicaciones de Node.js en el navegador del lado del cliente usando una herramienta llamada Browserify. Browserify permite empaquetar módulos de Node.js en un archivo JavaScript que puede ser incluido en una página web y utilizado en el navegador. De esta manera, puedes utilizar código de Node.js en el front-end de tu aplicación web, lo que te permite aprovechar las ventajas de desarrollar en Node.js tanto en el lado del servidor como en el del cliente.

Aquí hay un ejemplo de código de una aplicación de Node.js que se puede utilizar con Browserify para usarla en el navegador:

/ app.js
const fs = require('fs');

// una función que lee un archivo y devuelve su contenido
function readFile(file) {
  return fs.readFileSync(file, 'utf8');
}

// exportamos la función para que se pueda utilizar en el navegador
module.exports = readFile;

Para utilizar esta aplicación en el navegador, primero deberías instalar Browserify y luego usarlo para "empacar" la aplicación en un único archivo que se pueda utilizar en el navegador. Puedes hacerlo de la siguiente manera:

// instalamos Browserify
npm install -g browserify

// empacamos nuestra aplicación en un archivo llamado "bundle.js"
browserify app.js -o bundle.js

Ahora puedes incluir el archivo "bundle.js" en tu página HTML y utilizar la función readFile en el navegador, como si fuera una función nativa de JavaScript.

<!-- incluimos el archivo bundle.js en nuestra página -->
<script src="bundle.js"></script>

<html>
<head>
<title></title>
<script charset="utf-8" src="bundle.js"></script>
</head>
<body>
</body>
</html>

En general, se recomienda ejecutar el comando browserify desde la carpeta raíz de tu aplicación. Esto te permitirá utilizar la estructura de carpetas existente en tu proyecto y te facilitará la gestión de archivos y dependencias. Sin embargo, no es necesario que lo ejecutes desde la carpeta raíz, siempre y cuando sepas la ruta exacta de los archivos que deseas incluir en el bundle.

Sí, es posible convertir una aplicación de Node.js a una aplicación para el navegador utilizando el comando browserify desde la carpeta raíz de la aplicación. Browserify es una herramienta que permite utilizar módulos de Node.js en el navegador, lo que te permite empaquetar tu aplicación de Node.js en un archivo que puede ser ejecutado en el navegador.

Para convertir una aplicación de Node.js a una aplicación en el navegador, puedes usar una herramienta como Browserify o Webpack para empaquetar tu código de Node.js en un formato que pueda ser ejecutado en el navegador. Esto implica convertir tu código de Node.js a un formato de JavaScript que el navegador pueda entender y luego empaquetar todos los archivos necesarios, como los módulos externos y las dependencias, en un solo archivo que pueda ser incluido en una página web

_______________________________________________________________________________________________

WEBPACK

Webpack es un module bundler, o dicho de otra forma, una librería que nos permite gestionar todos los recursos necesarios para correr nuestra aplicación mediante el uso de sintaxis ES6 dentro de nuestro código fuente en Javascript

Webpack es un empaquetador de módulos para JavaScript. Se utiliza para compilar y empaquetar los archivos de una aplicación en un solo paquete que puede ser utilizado por un navegador web.

Para utilizar Webpack, primero debes instalarlo en tu proyecto utilizando el administrador de paquetes npm. Una vez que está instalado, puedes configurar Webpack mediante la creación de un archivo de configuración que especifica qué archivos deben ser empaquetados y cómo deben ser procesados. Luego, puedes ejecutar Webpack desde la línea de comandos para compilar y empaquetar tus archivos.

Webpack es una herramienta muy útil para desarrolladores de JavaScript ya que permite organizar y optimizar los archivos de una aplicación de manera eficiente, lo que facilita el desarrollo y mejora el rendimiento de la aplicación.


A continuación te mostraré un ejemplo básico de cómo se utiliza Webpack para compilar y empaquetar una aplicación JavaScript.

Primero, necesitas instalar Webpack y agregarlo como una dependencia de tu proyecto ejecutando el siguiente comando en tu terminal:

npm install --save-dev webpack

Luego, en tu archivo package.json, agrega una tarea build que utiliza Webpack para compilar tu código:

{
  "scripts": {
    "build": "webpack"
  }
}

Ahora, puedes crear un archivo de configuración de Webpack llamado webpack.config.js en la raíz de tu proyecto. En este archivo, puedes especificar la entrada y la salida de tu aplicación, así como cualquier otra configuración que necesites.

// webpack.config.js

module.exports = {
  // Archivo de entrada de la aplicación
  entry: './src/index.js',

  // Archivo de salida generado por Webpack
  output: {
    filename: 'main.js',
    path: __dir
    
    
    Para referenciar el archivo de salida de webpack en el navegador, primero debes asegurarte de que la configuración de tu archivo webpack.config.js incluye una entrada para el archivo de salida. Esto se hace especificando la propiedad output en la configuración de webpack. La propiedad output debe tener un objeto con las siguientes propiedades:

filename: Este es el nombre del archivo de salida generado por webpack.
path: Esta es la ruta en la que se generará el archivo de salida.
Una vez que hayas configurado la propiedad output en tu archivo webpack.config.js, puedes referenciar el archivo de salida en el HTML de tu aplicación usando la etiqueta script:
    
    <script src="ruta/al/archivo/de/salida.js"></script>
    
    Donde ruta/al/archivo/de/salida.js es la ruta al archivo de salida generado por webpack.
    
    
    
    
    Browserify y Webpack son herramientas de empaquetamiento de módulos de JavaScript. En otras palabras, ambos se utilizan para combinar múltiples archivos de JavaScript en uno o más archivos más grandes que son más fáciles de cargar en una página web. Sin embargo, hay algunas diferencias en cómo lo hacen y en el enfoque que tienen.

Browserify se enfoca en la compatibilidad con el estándar de módulos de JavaScript, lo que significa que puede utilizar la sintaxis de require y module.exports para importar y exportar módulos de JavaScript. Esto hace que sea más fácil para los desarrolladores que ya están familiarizados con esa sintaxis trabajar con Browserify.

Por otro lado, Webpack se enfoca en la flexibilidad y la capacidad de personalización. Webpack puede utilizar una variedad de enfoques diferentes para empaquetar módulos, incluyendo la sintaxis de require y module.exports, pero también permite a los desarrolladores utilizar otras sintaxis de módulos, como import y export, así como otras herramientas de procesamiento, como Babel. Además, Webpack tiene una gran cantidad de plugins y opciones de configuración que permiten a los desarrolladores personalizar su proceso de empaquetado de módulos de acuerdo a sus necesidades específicas.

border-radius: 50px 0px 50px 0px;

from chatterbot import ChatBot
from chatterbot.trainers import ChatterBotCorpusTrainer
from flask import Flask, render_template, request

app = Flask(__name__)

english_bot = ChatBot("English Bot")
english_bot.set_trainer(ChatterBotCorpusTrainer)
english_bot.train("chatterbot.corpus.english")

@app.route("/")
def home():
    return render_template("index.html")

@app.route("/get")
def get_bot_response():
    userText = request.args.get('msg')
    return str(english_bot.get_response(userText))

if __name__ == "__main__":
    app.run()





OTRA


from chatterbot import ChatBot
from chatterbot.trainers import ChatterBotCorpusTrainer
from flask import Flask, render_template, request

app = Flask(__name__)

english_bot = ChatBot("English Bot")
english_bot.set_trainer(ChatterBotCorpusTrainer)
english_bot.train("chatterbot.corpus.english")

@app.route("/")
def home():
    return render_template("index.html")

@app.route("/get")
def get_bot_response():
    userText = request.args.get('msg')
    return str(english_bot.get_response(userText))

if __name__ == "__main__":
    app.run()



Para entrenar su propio ChatterBotCorpusTrainer, deberá crear una nueva instancia de la clase ChatterBotCorpusTrainer y especificar el corpus de texto que desea usar para el entrenamiento. El corpus puede tener la forma de una lista de cadenas, donde cada cadena representa una conversación o declaración separada, o puede ser un directorio que contiene varios archivos de texto, donde cada archivo contiene una o más conversaciones o declaraciones.

Este es un ejemplo de cómo puede crear y entrenar un ChatterBotCorpusTrainer usando una lista de cadenas:

from chatterbot.trainers import ChatterBotCorpusTrainer

trainer = ChatterBotCorpusTrainer(chatbot)

corpus = [  "Hello, how are you?",    "I'm doing well, thank you for asking.",    "That's good to hear.",    "What do you do for a living?",    "I am a chatbot.",    "That's interesting. Do you like your job?",    "I enjoy helping people and providing useful information."]

trainer.train(corpus)



Como alternativa, puede especificar un directorio que contenga archivos de texto como corpus para el entrenamiento:


from chatterbot.trainers import ChatterBotCorpusTrainer

trainer = ChatterBotCorpusTrainer(chatbot)

trainer.train("/path/to/corpus/directory")


Una vez que haya entrenado ChatterBotCorpusTrainer, puede usarlo para entrenar su chatbot en el corpus de texto especificado. Esto puede mejorar la capacidad del chatbot para comprender y responder a la entrada del usuario en función de los tipos de conversaciones y declaraciones contenidas en el corpus.

Tenga en cuenta que entrenar un ChatterBotCorpusTrainer puede ser un proceso lento y que la calidad de las respuestas del chatbot dependerá de la calidad y relevancia del corpus que use para el entrenamiento. Puede ser necesario experimentar con diferentes datos de entrenamiento y ajustar el proceso de entrenamiento para lograr los resultados deseados.



from flask import Flask, request
from chatterbot import ChatBot
from chatterbot.trainers import ChatterBotCorpusTrainer

app = Flask(__name__)
bot = ChatBot("My Chatbot")

trainer = ChatterBotCorpusTrainer(bot)
trainer.train("chatterbot.corpus.english")

@app.route("/")
def home():
    user_input = request.args.get("user_input")
    response = bot.get_response(user_input)
    return str(response)

if __name__ == "__main__":
    app.run()

________________________________________________________________________________________________

<!DOCTYPE html>
<html>
  <head>
    <title>My Chatbot</title>
  </head>
  <body>
    <h1>My Chatbot</h1>

    <form action="/" method="GET">
      <input type="text" name="user_input" />
      <input type="submit" value="Send" />
    </form>

    <p>{{ response }}</p>
  </body>
</html>


Este código HTML define un formulario simple con un campo de entrada de texto y un botón de envío. También incluye un marcador de posición {{respuesta}} que se reemplazará con la respuesta del chatbot cuando se envíe el formulario.

Para usar esta plantilla con su aplicación Flask, deberá modificar el código que escribió anteriormente para incluir una llamada a la función render_template. Esta función representará la plantilla HTML y reemplazará el marcador de posición {{respuesta}} con la respuesta del chatbot. Aquí hay un ejemplo de cómo podría verse su código:


from flask import Flask, request, render_template
from chatterbot import ChatBot
from chatterbot.trainers import ChatterBotCorpusTrainer

app = Flask(__name__)
bot = ChatBot("My Chatbot")

trainer = ChatterBotCorpusTrainer(bot)
trainer.train("chatterbot.corpus.english")

@app.route("/")
def home():
    user_input = request.args.get("user_input")
    response = bot.get_response(user_input)

    return render_template("template.html", response=response)

if __name__ == "__main__":
    app.run()




pip install flask
pip install chatterbot
pip install chatterbot-corpus

The text files for a ChatterBotCorpusTrainer used to train a chatbot created with ChatterBot would typically be stored in a directory within the ChatterBot project. This directory would typically be named corpus and would be located at the root of the ChatterBot project.

For example, if the ChatterBot project is located in the chatbot directory, the text files for the ChatterBotCorpusTrainer would typically be stored in a directory named corpus within the chatbot directory, as follows:

chatbot/
  corpus/
    category1.yml
    category2.yml
    ...
The specific format and content of these text files will depend on the specific implementation of the chatbot and the requirements and capabilities of the chatbot. For example, the text files might be in YAML or JSON format, and they might include examples of the types of inputs and responses that the chatbot should be able to handle.

Overall, the text files for a ChatterBotCorpusTrainer used to train a chatbot created with ChatterBot would typically be stored in a directory named corpus within the ChatterBot project. The specific format and content of these text files will depend on the specific implementation of the chatbot.

# Import necessary modules
from chatterbot import ChatBot
from chatterbot.trainers import ChatterBotCorpusTrainer

# Create a chatbot instance
chatbot = ChatBot(
    'My Chatbot',
    trainer='chatterbot.trainers.ChatterBotCorpusTrainer'
)

# Create a ChatterBotCorpusTrainer instance
trainer = ChatterBotCorpusTrainer(chatbot)

# Train the chatbot using the input data in the corpus directory
trainer.train(
    './corpus'
)

 the corpus directory containing the YAML files for a chatbot created with ChatterBot and Flask would typically be stored in the application root directory, alongside the main code file for the Flask application. The specific location of the corpus directory within the application root directory will depend on the specific implementation of the chatbot.
 
 chatbot/
  app.py
  corpus/
    category1.yml
    category2.yml
    ...

    Here is an example of what the training text data for a chatbot created with ChatterBot and Flask might look like inside a YAML file:

# category1.yml

- conversation:
  - what is an algorithm?
  - An algorithm is a set of instructions for solving a problem or achieving a goal.
  - how do algorithms work?
  - Algorithms typically follow a set of steps or rules to process data and produce a desired result.
  - can you give me an example of an algorithm?
  - One example of an algorithm is the sorting algorithm, which is used to arrange a set of data in a specific order.

- conversation:
  - what is an API?
  - An API, or application programming interface, is a set of tools and protocols for building software applications.
  - what are some examples of APIs?
  - Some examples of APIs include the Twitter API, which allows developers to access and interact with the Twitter platform, and the Google Maps API, which allows developers to embed maps and location-based functionality in their applications.

- conversation:
  - what is a data structure?
  - A data structure is a way of organizing and storing data in a computer, so that it can be accessed and modified efficiently.
  - can you give me an example of a data structure?
  - One example of a data structure is a linked list, which is a collection of data elements that are linked together using pointers.
  
   it is possible to include HTML elements, such as <p>, <a>, and href, in the training data for a chatbot created with ChatterBot and Flask, so that the chatbot can generate responses that include links to websites or other online resources.

For example, you could include HTML elements in the training data for a chatbot in a YAML file, as follows:
  
  # category1.yml

- conversation:
  - what is an algorithm?
  - <p>An algorithm is a set of instructions for solving a problem or achieving a goal. You can learn more about algorithms at <a href="https://en.wikipedia.org/wiki/Algorithm">https://en.wikipedia.org/wiki/Algorithm</a></p>
  - how do algorithms work?
  - <p>Algorithms typically follow a set of steps or rules to process data and produce a desired result. For more information, see <a href="https://www.khanacademy.org/computing/computer-science/algorithms">https://www.khanacademy.org/computing/computer-science/algorithms</a></p>
  - can you give me an example of an algorithm?
  - <p>One example of an algorithm is the sorting algorithm, which is used to arrange a set of data in a specific order. You can learn more about sorting algorithms at <a href="https://en.wikipedia.org/wiki/Sorting_algorithm">https://en.wikipedia.org/wiki/Sorting_algorithm</a></p>
  
   it is possible to include HTML elements in the training data for a chatbot created with ChatterBot and Flask, so that the chatbot can generate responses that include links to websites or other online resources. This can be useful for providing additional information and resources to users who interact with the chatbot.


  
  
  







El chatterbot.corpus.englisharchivo es parte del chatterbot-corpuspaquete, que es una colección de datos de capacitación prediseñados para la biblioteca de ChatterBot. Cuando instala el chatterbot-corpuspaquete usando pip, el chatterbot.corpus.englisharchivo se colocará en un subdirectorio del site-packagesdirectorio de su instalación de Python.

Por ejemplo, en un sistema Windows, el chatterbot.corpus.englisharchivo puede estar ubicado en C:\Python37\Lib\site-packages\chatterbot_corpus\data\english. En un sistema macOS o Linux, el archivo puede estar ubicado en /usr/local/lib/python3.7/site-packages/chatterbot_corpus/data/english.

Para usar el chatterbot.corpus.englisharchivo con su chatbot, deberá proporcionar la ruta completa a este archivo cuando cree una nueva ChatterBotCorpusTrainerinstancia. Por ejemplo, puede usar el siguiente código para crear y entrenar un chatbot usando el chatterbot.corpus.englisharchivo:


Copiar código
trainer = ChatterBotCorpusTrainer(bot)
trainer.train("C:\\Python37\\Lib\\site-packages\\chatterbot_corpus\\data\\english")
Tenga en cuenta que la ruta al chatterbot.corpus.englisharchivo puede ser diferente en su sistema, por lo que deberá verificar la ubicación de este archivo en su sistema y usar la ruta correcta en su código.


Para usar el chatterbot.corpus.englisharchivo con su chatbot, deberá proporcionar la ruta completa a este archivo cuando cree una nueva ChatterBotCorpusTrainerinstancia. Por ejemplo, puede usar el siguiente código para crear y entrenar un chatbot usando el chatterbot.corpus.englisharchivo:

Tenga en cuenta que la ruta al chatterbot.corpus.englisharchivo puede ser diferente en su sistema, por lo que deberá verificar la ubicación de este archivo en su sistema y usar la ruta correcta en su código.

trainer = ChatterBotCorpusTrainer(bot)
trainer.train("C:\\Python37\\Lib\\site-packages\\chatterbot_corpus\\data\\english")


from flask import Flask, render_template, request
from chatterbot import ChatBot
from chatterbot.trainers import ChatterBotCorpusTrainer


Si ya has instalado el módulo chatterbot varias veces pero aún obtienes un error que indica que no está instalado, hay varias posibles causas que podrían estar causando este problema. Aquí hay algunas posibles soluciones:

Asegúrate de que estás utilizando la misma ventana de comandos o terminal donde instalaste el módulo chatterbot. Si has abierto una nueva ventana de comandos o terminal después de instalar chatterbot, es posible que no tenga acceso al módulo porque se está ejecutando en un entorno diferente.
Intenta ejecutar tu aplicación web desde una ubicación diferente en tu sistema. Si estás ejecutando la aplicación desde un directorio diferente al directorio donde instalaste chatterbot, es posible que el intérprete de Python no pueda encontrar el módulo.
Si todavía no has podido solucionar el problema, intenta reinstalar el módulo chatterbot utilizando la opción --upgrade de pip. Esto sobrescribirá cualquier versión anterior del módulo y asegurará que tengas la versión más reciente instalada en tu sistema. Para hacer esto, abre una ventana de comandos o terminal y ejecuta el siguiente comando:


pip install --upgrade chatterbot


Cuando instalas un paquete de Python con pip, se instala en un directorio específico en tu sistema. La ubicación exacta de este directorio depende de la plataforma que estés utilizando (por ejemplo, Windows, macOS o Linux) y de la configuración de pip en tu sistema.

En general, la ubicación predeterminada donde se instalan los paquetes de Python en Windows es C:\PythonXX\Lib\site-packages, donde XX representa la versión de Python que estás utilizando. Por lo tanto, si has instalado el módulo chatterbot con pip, deberías poder encontrarlo en esa ubicación en tu sistema.

Si necesitas encontrar la ubicación exacta donde se instala un paquete de Python en tu sistema, puedes utilizar el comando pip show <package-name> en una ventana de comandos o terminal. Por ejemplo, para encontrar la ubicación de chatterbot, puedes ejecutar el siguiente comando:

pip show chatterbot

Name: chatterbot
Version: 1.0.5
Summary: ChatterBot is a machine learning, conversational dialog engine.
Home-page: https://github.com/gunthercox/ChatterBot
Author: Gunther Cox
Author-email: gunthercx@gmail.com
License: BSD
Location: c:\python38\lib\site-packages
Requires: pyyaml, sqlalchemy, mathparse, fuzzywuzzy, chatterbot-corpus, spacy

La línea "Location" indica la ubicación exacta donde se ha instalado el paquete chatterbot en tu sistema.


Parece que estás tratando de ejecutar el comando pip show chatterbot para encontrar la ubicación donde se ha instalado el módulo chatterbot en tu sistema, pero el comando no está funcionando como esperabas.

Hay varias posibles razones por las que esto podría estar sucediendo:

Asegúrate de que has instalado correctamente el módulo chatterbot en tu sistema. Si no has instalado el módulo, el comando pip show no encontrará el paquete y mostrará un mensaje de error como el que ves.
Asegúrate de que estás utilizando la versión correcta de pip. Si has instalado varias versiones de Python en tu sistema, es posible que estés utilizando una versión diferente de pip de la que esperabas. Para solucionar este problema, puedes utilizar el comando pipX, donde X es el número de la versión de Python que quieres utilizar. Por ejemplo, si quieres utilizar pip para la versión 3.8 de Python, debes ejecutar el comando pip3.8 en lugar de pip.
Si aún no puedes resolver el problema, intenta ejecutar el comando pip show utilizando la opción -v o --verbose. Esto mostrará información detallada sobre cómo pip busca el paquete en tu sistema, lo que puede ayudarte a determinar qué está causando el problema. Por ejemplo:
Copy code


pip show -v chatterbot



PYCHARM

Si tienes un programa hecho en Python que está almacenado en una ubicación externa al proyecto de PyCharm que estás utilizando, puedes importar y ejecutar el programa de la siguiente manera:

Abre PyCharm y crea un nuevo proyecto en el que desees trabajar.
En el panel izquierdo de PyCharm, haz clic derecho en el directorio del proyecto y selecciona "Import" para abrir la ventana de importación.

En la ventana de importación, selecciona la opción "Existing file" y haz clic en "Next" para continuar.

En la siguiente ventana, busca el archivo que quieres importar en la ubicación externa en la que se encuentra. Una vez que lo hayas encontrado, selecciónalo y haz clic en "Finish" para importar el archivo en tu proyecto de PyCharm.

En el panel izquierdo de PyCharm, haz clic derecho en el directorio del proyecto y selecciona "Refresh" para asegurarte de que PyCharm reconozca el archivo importado.

Abre el archivo importado en PyCharm haciendo doble clic en él en el panel izquierdo.
Haz clic en el botón "Run" en la barra de herramientas de PyCharm para ejecutar el programa.
Si todo sale bien, el programa debería ejecutarse sin problemas y mostrar cualquier salida en la consola de PyCharm. Si tienes algún problema al importar o ejecutar el programa, no dudes en preguntar. ¡Buena suerte!



VISUAL STUDIO CODE

Si tienes un programa hecho en Python que está almacenado en una ubicación externa al proyecto de Visual Studio Code que estás utilizando, puedes importar y ejecutar el programa de la siguiente manera:

Abre Visual Studio Code y crea un nuevo proyecto en el que desees trabajar.

En el panel izquierdo de Visual Studio Code, haz clic derecho en el directorio del proyecto y selecciona "Add" y luego "Existing item" para abrir la ventana de importación.

En la ventana de importación, busca el archivo que quieres importar en la ubicación externa en la que se encuentra. Una vez que lo hayas encontrado, selecciónalo y haz clic en "Add" para importar el archivo en tu proyecto de Visual Studio Code.

En el panel izquierdo de Visual Studio Code, haz clic derecho en el directorio del proyecto y selecciona "Refresh" para asegurarte de que Visual Studio Code reconozca el archivo importado.

Abre el archivo importado en Visual Studio Code haciendo doble clic en él en el panel izquierdo.
Haz clic en el botón "Run" en la barra de herramientas de Visual Studio Code para ejecutar el programa.

Si todo sale bien, el programa debería ejecutarse sin problemas y mostrar cualquier salida en la consola de Visual Studio Code. Si tienes algún problema al importar o ejecutar el programa, no dudes en preguntar. ¡Buena suerte!
  
  
La librería ChatterBot de Python no utiliza una red neuronal para el proceso de aprendizaje. En lugar de eso, utiliza un algoritmo de aprendizaje basado en el modelo de lenguaje natural llamado "retrieval-based", que se basa en buscar una respuesta en un conjunto de respuestas predefinidas en lugar de generar una respuesta de manera completamente autónoma. Aunque no utiliza una red neuronal, es posible utilizar ChatterBot junto con una red neuronal si se desea, por ejemplo, para mejorar la capacidad del chatbot para responder de manera apropiada a preguntas complejas o novedosas. Sin embargo, esto dependerá del enfoque y las necesidades específicas de cada proyecto.


from flask import Flask, request
from chatterbot import ChatBot
from chatterbot.trainers import ChatterBotCorpusTrainer

app = Flask(__name__)

# Create a new chatbot
chatbot = ChatBot("My Chatbot")

# Train the chatbot with the ChatterBot corpus data
trainer = ChatterBotCorpusTrainer(chatbot)
trainer.train("chatterbot.corpus.english")

@app.route("/chatbot", methods=["GET"])
def get_response():
    # Get the user's input
    user_input = request.args.get("text")

    # Get the chatbot's response
    response = chatbot.get_response(user_input)

    # Return the chatbot's response
    return str(response)

if __name__ == "__main__":
    app.run()



pip install -r requirements.txt

______________________________________________________________________________________________
RSA Y FLASK

# Import necessary modules
from flask import Flask, render_template
from flask_rasa import Rasa

# Create Flask app
app = Flask(__name__)

# Configure Rasa connector
app.config['RASA_HOST'] = 'http://localhost:5005'
rasa = Rasa(app)

# Define Flask route for the chatbot
@app.route('/')
def chatbot():
    return render_template('chatbot.html')

# Run Flask app
if __name__ == '__main__':
    app.run()


Esta línea de código configura el conector Rasa para una aplicación Flask. La línea app.config['RASA_HOST'] = 'http://localhost:5005' establece la URL del servidor Rasa, que se ejecuta en localhost en el puerto 5005. Esto le indica a la aplicación Flask dónde encontrar el servidor Rasa en orden. para enviar y recibir mensajes del chatbot.

La línea rasa = Rasa(app) crea una instancia del conector Rasa, que se inicializa con la instancia de la aplicación Flask. Esto permite que la aplicación Flask use el conector Rasa para comunicarse con el servidor Rasa y acceder al chatbot.

Rasa utiliza una combinación de archivos de datos de entrenamiento y archivos de configuración para definir y entrenar un chatbot. Los archivos de datos de entrenamiento, que normalmente tienen la forma de historias y datos de entrenamiento de NLU, definen las diversas interacciones y los componentes de comprensión del lenguaje natural del chatbot. Los archivos de configuración, que normalmente están en formato YAML o JSON, definen la estructura general y el comportamiento del chatbot.

Por lo general, los archivos de datos de capacitación y los archivos de configuración se colocan en un directorio específico, como el directorio de datos, dentro del directorio del proyecto para el chatbot. Esto le permite a Rasa acceder fácilmente a los datos de entrenamiento y a los archivos de configuración cuando entrena el chatbot. Puede especificar la ubicación de los datos de entrenamiento y los archivos de configuración cuando ejecuta el comando de entrenamiento de Rasa, usando los indicadores --data o --config. Por ejemplo:

rasa train --data data/ --config config.yml

Este comando entrenará al chatbot utilizando los datos de entrenamiento y los archivos de configuración ubicados en el directorio de datos y el archivo config.yml, respectivamente. La ubicación de los datos de entrenamiento y los archivos de configuración se puede cambiar según sea necesario, según la estructura y los requisitos de su proyecto.


To create a chatbot with Rasa and Flask, you will need to install several libraries. The specific libraries you will need will depend on your specific requirements, but here are the most common ones:

flask: This is the core Flask library, which provides the basic functionality for building web applications with Flask.
flask-rasa: This is the Flask connector for Rasa, which allows you to integrate a Rasa chatbot with a Flask web application.
rasa: This is the Rasa library, which provides the core functionality for building and training chatbots with Rasa.
rasa-sdk: This is the Rasa SDK, which provides additional tools and libraries for building custom chatbot components with Rasa.
To install these libraries, you can use the pip package manager, which is included with most Python installations. For example, to install the flask and rasa libraries, you would use the following command:

pip install flask rasa


This will install the latest versions of the flask and rasa libraries, along with any other required dependencies. You can then install the other libraries using similar commands. For example:

pip install flask-rasa rasa-sdk



___________________________________________________________________________________________

CHATBOT CON FLASK Y SPACY

# Import necessary modules
from flask import Flask, request
import spacy

# Create Flask app
app = Flask(__name__)

# Load spaCy model
nlp = spacy.load('en_core_web_md')

# Define Flask route for the chatbot
@app.route('/', methods=['POST'])
def chatbot():
    # Get user input from the request
    user_input = request.form['user_input']

    # Process the user input using spaCy
    doc = nlp(user_input)

    # Generate a response based on the processed input
    response = "I'm sorry, I don't understand what you mean."
    for ent in doc.ents:
        if ent.label_ == 'greeting':
            response = "Hello! How can I help you?"
        elif ent.label_ == 'thanks':
            response = "You're welcome!"

    # Return the response as JSON
    return jsonify({'response': response})

# Run Flask app
if __name__ == '__main__':
    app.run()

The nlp = spacy.load('en_core_web_md') line of code is loading a pre-trained spaCy model for natural language processing. spaCy is a popular Python library for natural language processing, which provides tools for analyzing and processing text data.

In this case, the spacy.load() function is being used to load a pre-trained spaCy model that has been trained on the English language (en) using the "core" spaCy library (core) and the medium-sized model (md). This model will be used to process user inputs and extract information from the text data.

The resulting spaCy model object is stored in the nlp variable, which can then be used later in the code to process user inputs and generate responses. This is a common pattern when using spaCy for natural language processing, as it allows you to load a pre-trained model and then use it to process and analyze text data.

Here is an example of what the training data for a chatbot built with Flask and spaCy might look like:

greetings:
  - hello
  - hi
  - good morning
  - good afternoon
  - good evening

responses:
  - Hello! How can I help you?
  - Hi there! What can I do for you?
  - Good morning! What can I help you with?
  - Good afternoon! How can I assist you?
  - Good evening! Is there something you need help with?

    
    The training data for a chatbot built with Flask and spaCy would typically be stored in a file or database, in a format such as YAML or JSON. The specific format and location of the training data will depend on the specific implementation of the chatbot, as well as the tools and libraries used to build it.
  
  Chatbots built with spaCy can use a variety of different machine learning technologies, depending on the specific implementation of the chatbot and the specific requirements and capabilities of the chatbot. Some common types of machine learning technology that might be used in chatbots built with spaCy include:

Supervised learning: Supervised learning is a type of machine learning in which the algorithm is trained on a labeled dataset, which includes examples of the inputs and outputs that the algorithm should be able to handle. The algorithm uses this training data to learn how to map inputs to outputs, and it can then be applied to new, unseen data to make predictions or generate responses.
Unsupervised learning: Unsupervised learning is a type of machine learning in which the algorithm is trained on an unlabeled dataset, which does not include examples of the inputs and outputs that the algorithm should be able to handle. The algorithm uses this training data to learn the underlying structure of the data, and it can then be used to make predictions or generate responses based on this learned structure.
Semi-supervised learning: Semi-supervised learning is a type of machine learning that combines elements of supervised and unsupervised learning. In this approach, the algorithm is trained on a dataset that includes both labeled and unlabeled examples, and it uses this training data to learn both the mapping between inputs and outputs, as well as the underlying structure of the data.
Reinforcement learning: Reinforcement learning is a type of machine learning in which the algorithm learns to take actions in an environment in order to maximize a reward or minimize a penalty. This type of learning is often used





___________________________________________________________________________________________-

Sí, es posible entrenar una red neuronal como brain.js utilizando texto etiquetado y hacer que el modelo aprenda a construir sus propias respuestas a preguntas nuevas. Brain.js es una biblioteca de JavaScript que se puede utilizar para construir redes neuronales en el lado del cliente, lo que significa que se ejecuta en el navegador del usuario en lugar de en un servidor remoto. Esto puede ser útil si deseas entrenar un modelo de lenguaje en el lado del cliente y proporcionar respuestas inmediatas a las preguntas del usuario sin necesidad de enviar una solicitud a un servidor remoto. Para entrenar un modelo utilizando brain.js, primero debes proporcionar un conjunto de datos de entrenamiento que contenga texto etiquetado en el formato adecuado. Luego, puedes utilizar la biblioteca de brain.js para construir y entrenar una red neuronal que utilice esos datos para aprender a construir respuestas a preguntas nuevas.

A continuación se muestra un ejemplo de cómo se podría entrenar una red neuronal en brain.js utilizando texto etiquetado para que aprenda a construir sus propias respuestas a preguntas nuevas. Este ejemplo asume que ya se ha cargado brain.js y se han proporcionado datos de entrenamiento en el formato adecuado:

// Crea una nueva red neuronal de tipo LSTM.
const net = new brain.recurrent.LSTM();

// Entrena la red neuronal utilizando el conjunto de datos de entrenamiento.
net.train(trainingData, {
  iterations: 200, // número de iteraciones para entrenar
  errorThresh: 0.02 // umbral de error para detener el entrenamiento
});

// Utiliza la red neuronal entrenada para generar una respuesta a una nueva pregunta.
const response = net.run("¿Qué es el amor?");
console.log(response); // imprime la respuesta generada por la red neuronal


El texto etiquetado se refiere a un conjunto de datos de entrenamiento que contiene texto y etiquetas asociadas a ese texto. Las etiquetas suelen ser etiquetas de categoría o palabras clave que se utilizan para identificar el contenido del texto. En el contexto de entrenar una red neuronal para construir respuestas a preguntas, el texto etiquetado podría ser un conjunto de preguntas y respuestas donde cada pregunta y respuesta están etiquetadas de manera que la red neuronal pueda aprender a relacionarlas. Por ejemplo, un conjunto de datos de entrenamiento podría tener el siguiente aspecto:

// pregunta: "¿Qué es el amor?"
// respuesta: "El amor es una emoción o sentimiento profundo y fuerte que se siente hacia alguien o algo."
// etiqueta: "amor"

// pregunta: "¿Qué es la felicidad?"
// respuesta: "La felicidad es un estado emocional o una sensación de bienestar o satisfacción."
// etiqueta: "felicidad"

// pregunta: "¿Qué es la tristeza?"
// respuesta: "La tristeza es una emoción negativa que se siente como una pérdida o una ausencia de algo deseado."
// etiqueta: "tristeza"


En este ejemplo, cada pregunta y respuesta están etiquetadas con una palabra clave que identifica el tema del texto. Esto permite a la red neuronal aprender a relacionar las preguntas con las respuestas correspondientes y generar una respuesta adecuada a una pregunta nueva. Cómo se estructuran y etiquetan los datos de entrenamiento dependerá de tus necesidades específicas y del enfoque que desees seguir al entrenar a la red neuronal.


// Crea una nueva red neuronal de tipo LSTM.
const net = new brain.recurrent.LSTM();

// Preprocesa los datos de entrenamiento para prepararlos para la red neuronal.
const preprocessedData = preprocessTrainingData(trainingData);

// Entrena la red neuronal utilizando el conjunto de datos de entrenamiento preprocesado.
net.train(preprocessedData, {
  iterations: 200, // número de iteraciones para entrenar
  errorThresh: 0.02 // umbral de error para detener el entrenamiento
});

// Crea una función que utiliza la red neuronal entrenada para generar una respuesta a una nueva pregunta.
const generateResponse = (question) => {
  // Preprocesa la pregunta para prepararla para la red neuronal.
  const preprocessedQuestion = preprocessQuestion(question);
  // Utiliza la red neuronal entrenada para generar una respuesta a la pregunta preprocesada.
  const response = net.run(preprocessedQuestion);
  // Devuelve la respuesta generada por la red neuronal.
  return response;
}

// Utiliza la función generateResponse para generar una respuesta a una nueva pregunta.
const response = generateResponse("¿Qué es el amor?");
console.log(response); // imprime la respuesta generada por la red neuronal


La función preprocessTrainingData() se utiliza para preprocesar los datos de entrenamiento antes de pasarlos a la red neuronal para su entrenamiento. El preprocesamiento de los datos de entrenamiento suele implicar limpiarlos y transformarlos en un formato que sea adecuado para la red neuronal. Esto puede incluir tareas como eliminar puntuación, convertir el texto a minúsculas, tokenizar el texto en palabras individuales, etc. La implementación exacta de la función preprocessTrainingData() dependerá de tus necesidades específicas y del enfoque que desees seguir al entrenar a la red neuronal.

A continuación se muestra un ejemplo de cómo podría implementarse la función preprocessTrainingData():




const preprocessTrainingData = (trainingData) => {
  // Crea un nuevo arreglo que contendrá los datos de entrenamiento preprocesados.
  const preprocessedData = [];
  
  // Itera sobre cada pregunta y respuesta en los datos de entrenamiento.
  for (const { question, answer } of trainingData) {
  
    // Limpia la pregunta y la respuesta eliminando la puntuación y convirtiendo el texto a minúsculas.
    const cleanQuestion = cleanText(question);
    const cleanAnswer = cleanText(answer);

    // Tokeniza la pregunta y la respuesta en palabras individuales.
    const tokensQuestion = tokenizeText(cleanQuestion);
    const tokensAnswer = tokenizeText(cleanAnswer);

    // Agrega la pregunta y la respuesta tokenizadas al arreglo de datos de entrenamiento preprocesados.
    preprocessedData.push({
      input: tokensQuestion,
      output: tokensAnswer
    });
  }

  // Devuelve el arreglo de datos de entrenamiento preprocesados.
  return preprocessedData;
}



Para perfeccionar la función preprocessTrainingData() y eliminar espacios, puntos, etc. se pueden utilizar diferentes técnicas de preprocesamiento. Una posible implementación podría ser la siguiente:


const preprocessTrainingData = (trainingData) => {
  // Crea un nuevo arreglo que contendrá los datos de entrenamiento preprocesados.
  const preprocessedData = [];
  
  // Itera sobre cada pregunta y respuesta en los datos de entrenamiento.
  for (const { question, answer } of trainingData) {
   
    // Limpia la pregunta y la respuesta eliminando la puntuación y convirtiendo el texto a minúsculas.
    const cleanQuestion = cleanText(question);
    const cleanAnswer = cleanText(answer);

    // Tokeniza la pregunta y la respuesta en palabras individuales.
    const tokensQuestion = tokenizeText(cleanQuestion);
    const tokensAnswer = tokenizeText(cleanAnswer);

    // Elimina espacios en blanco y otros caracteres innecesarios de la pregunta y la respuesta.
    const filteredQuestion = filterText(tokensQuestion);
    const filteredAnswer = filterText(tokensAnswer);

    // Agrega la pregunta y la respuesta filtradas al arreglo de datos de entrenamiento preprocesados.
    preprocessedData.push({
      input: filteredQuestion,
      output: filteredAnswer
    });
  }

  // Devuelve el arreglo de datos de entrenamiento preprocesados.
  return preprocessedData;
}



La función cleanText() se utiliza para limpiar el texto eliminando la puntuación y convirtiendo el texto a minúsculas. Esto es útil para preparar el texto para su procesamiento por la red neuronal. La implementación exacta de esta función dependerá de tus necesidades específicas y del enfoque que desees seguir al entrenar a la red neuronal.

A continuación se muestra un ejemplo de cómo podría implementarse la función cleanText():

const cleanText = (text) => {
  // Elimina la puntuación del texto utilizando una expresión regular.
  const clean = text.replace(/[^\w\s]/gi, "");
  // Convierte el texto a minúsculas.
  return clean.toLowerCase();
}


Una manera de perfeccionar aún más la función cleanText() sería agregar más tareas de preprocesamiento al texto. Por ejemplo, se podría agregar una etapa adicional para eliminar palabras comunes que no aportan información significativa al texto, como "el", "la", "un", etc. También se podría agregar una etapa de stemming para reducir las palabras a sus raíces básicas, lo que ayudaría a mejorar la precisión de la red neuronal al entrenar con el texto. La implementación exacta dependerá de tus necesidades específicas y del enfoque que desees seguir al entrenar a la red neuronal.

A continuación se muestra un ejemplo de cómo podría implementarse la función cleanText() con estas mejoras adicionales:


const cleanText = (text) => {
  // Elimina la puntuación del texto utilizando una expresión regular.
  let clean = text.replace(/[^\w\s]/gi, "");
  // Convierte el texto a minúsculas.
  clean = clean.toLowerCase();
  // Elimina palabras comunes del texto utilizando una lista de palabras a ignorar.
  clean = removeCommonWords(clean);
  // Aplica stemming al texto para reducir las palabras a sus raíces básicas.
  clean = stemText(clean);

  return clean;
}


const removeCommonWords = (text) => {
  // Crea una lista de palabras comunes que se deben ignorar al preprocesar el texto.
  const commonWords = ["el", "la", "un", "una", "de", "en", "y", "o", "que", "a", "los", "las", "del", "se", "con", "por", "para", "como", "está", "su", "al", "lo", "cómo", "más", "pero", "sus", "le", "ya", "o", "fue", "este", "ha", "sí", "porque", "esta", "son", "entre", "cuando", "muy", "sin", "sobre", "también", "me", "hasta", "hay", "donde", "han", "quien", "están", "desde", "todo", "nos", "durante", "todos", "uno", "les", "ni", "contra", "otros", "fueron", "ese", "eso", "había", "ante", "ellos", "e", "esto", "mí", "antes", "algunos", "qué", "unos", "yo", "otro", "otras", "otra", "él", "tanto", "esa", "estos", "mucho", "quienes", "nada", "muchos", "cual", "poco", "ella", "estar", "estas", "algunas", "algo", "nosotros", "mi", "mis", "tú", "te", "ti", "tu", "tus", "ellas", "nosotras", "vosotros", "vosotras", "os", "mío", "mía", "míos", "mías", "tuyo", "tuya", "tuyos", "tuyas", "suyo", "suya", "suyos", "suyas", "nuestro", "nuestra", "nuestros", "nuestras", "vuestro", "vuestra", "vuestros", "vuestras", "esos", "esas", "estoy", "estás", "está", "]
   // Divide el texto en palabras y elimina las palabras comunes de la lista.
  const words = text.split(" ");
  const filteredWords = words.filter((word) => !commonWords.includes(word));
  // Vuelve a unir las palabras filtradas en una cadena de texto.
  const cleanedText = filteredWords.join(" ");

  return cleanedText;
}
                      
                       
La función removeCommonWords() que se muestra en tu pregunta está escrita correctamente. Esta función toma una cadena de texto como entrada y devuelve el texto sin las palabras comunes que se hayan eliminado de la lista.

La función removeCommonWords() se utiliza en conjunción con la función cleanText() para preparar el texto para su procesamiento por la red neuronal. Esta función se ejecuta después de que el texto se haya limpiado y se utiliza para eliminar palabras comunes que no aportan información significativa. Esto permite que la red neuronal se enfoque en las palabras que sí aportan información relevante y se entrene de manera más eficiente.

La función removeCommonWords() es una parte importante del código que se utiliza para entrenar a una red neuronal con Brain.js, y es necesaria para que el entrenamiento de la red neuronal sea efectivo.



El orden correcto de las funciones mencionadas en tus preguntas anteriores es el siguiente:

cleanText(): Esta función se encarga de limpiar el texto eliminando caracteres especiales, signos de puntuación y espacios en blanco.

removeCommonWords(): Esta función se encarga de eliminar palabras comunes del texto que no aportan información significativa.

preprocessTrainingData(): Esta función se encarga de preprocesar los datos de entrenamiento para prepararlos para su uso por la red neuronal.
Estas funciones se utilizan en conjunto para entrenar a una red neuronal con Brain.js. La función cleanText() se ejecuta primero para limpiar el texto y prepararlo para su procesamiento por la red neuronal. Luego, se ejecuta la función removeCommonWords() para eliminar palabras comunes del texto. Finalmente, se ejecuta la función preprocessTrainingData() para preprocesar los datos de entrenamiento y prepararlos para su uso por la red neuronal.

Este es el orden correcto en el que se deben ejecutar estas funciones para entrenar a una red neuronal con Brain.js.


El orden en que se colocan las funciones dentro de un archivo JavaScript no afecta su ejecución o su resultado. Las funciones se pueden colocar en cualquier orden dentro del archivo, siempre y cuando se definan antes de ser utilizadas en otras partes del código.

Por ejemplo, si la función tokenizeText() se utiliza en la función preprocessTrainingData(), entonces la función tokenizeText() debe definirse antes de la función preprocessTrainingData() en el archivo. Sin embargo, la función tokenizeText() puede colocarse en cualquier lugar del archivo antes de la función preprocessTrainingData(), ya sea al principio, en medio o al final del archivo.

En general, es recomendable colocar las funciones en un orden lógico que facilite su lectura y comprensión. Por ejemplo, las funciones que se utilicen en múltiples partes del código pueden colocarse al principio del archivo, mientras que las funciones más específicas o que se utilicen solo en una parte del código pueden colocarse al final del archivo. Esto ayuda a organizar el código y a hacerlo más fácil de entender.


CON NODE

const fs = require("fs");

// Lee el contenido del archivo de datos de entrenamiento.
const trainingData = fs.readFileSync("data.txt", "utf8");

// Convierte el contenido del archivo en un arreglo de objetos.
const parsedTrainingData = trainingData.split("\n").map((item) => {
  const [question, answer] = item.split("\t");
  return { question, answer };
});

// Preprocesa los datos de entrenamiento utilizando la función preprocessTrainingData().
const preprocessedData = preprocessTrainingData(parsedTrainingData);



La cantidad de capas de entrada y intermedias que se deben agregar a una red neuronal depende de diversos factores, como el tamaño y la complejidad de los datos de entrada, el objetivo de la red neuronal y el rendimiento deseado. En general, se recomienda comenzar con una cantidad pequeña de capas y aumentarla gradualmente hasta que se obtenga un buen rendimiento.

Para ubicar las capas de entrada y intermedias en una red neuronal, se deben seguir las siguientes reglas:

La capa de entrada debe ser la primera capa de la red neuronal y debe recibir los datos de entrada.
Las capas intermedias se ubican después de la capa de entrada y antes de la capa de salida. Pueden haber una o varias capas intermedias, dependiendo de las necesidades de la red neuronal.
La capa de salida debe ser la última capa de la red neuronal y debe generar la salida de la red a partir de los datos procesados por las capas intermedias.
Por ejemplo, si queremos agregar dos capas intermedias a una red neuronal, la estructura de la red podría ser la siguiente:


La función stemText() se utiliza para aplicar stemming al texto, lo que implica reducir las palabras a sus raíces básicas para eliminar conjugaciones y otros cambios gramaticales.

A continuación, se muestra un ejemplo de cómo podría implementarse esta función:

const stemText = (text) => {
  // Crea una instancia del algoritmo de stemming de Porter.
  const stemmer = natural.PorterStemmer;
  
  // Divide el texto en un arreglo de palabras.
  const words = text.split(" ");
  
  // Aplica stemming a cada palabra del texto y vuelve a unirlas en una cadena de texto.
  const stemmedText = words.map((word) => stemmer.stem(word)).join(" ");
  
  return stemmedText;
}

En este ejemplo, se utiliza el algoritmo de stemming de Porter, que es uno de los más utilizados y eficientes para el procesamiento del lenguaje natural en español. Sin embargo, hay otras opciones disponibles, como el algoritmo de Snowball, que también pueden utilizarse en esta función.



Para obtener los datos de los controles HTML de una página web, puedes utilizar la API de Document Object Model (DOM). La API de DOM te permite acceder a los elementos de una página web y manipularlos.

Por ejemplo, si quieres obtener el valor de un campo de texto con un ID específico, puedes utilizar el método document.getElementById() y almacenar el resultado en una variable. Luego, puedes acceder al valor del campo de texto utilizando la propiedad value de esa variable.

Aquí tienes un ejemplo:

// Obtiene el campo de texto con el ID "my-input-field"
const inputField = document.getElementById("my-input-field");

// Almacena el valor del campo de texto en una variable
const inputValue = inputField.value;

// Muestra el valor del campo de texto en la consola
console.log(inputValue);


Para capturar los datos de los controles HTML de una página web, puedes utilizar una función de JavaScript como esta:

const getInputData = () => {
  // Obtiene el valor del elemento HTML con el ID "question-input" y lo asigna a la variable "question".
  const question = document.getElementById("question-input").value;

  // Obtiene el valor del elemento HTML con el ID "answer-input" y lo asigna a la variable "answer".
  const answer = document.getElementById("answer-input").value;

  return { question, answer };
}


Luego, puedes usar esta función dentro de tu código para obtener los valores ingresados en los controles HTML:




Por último, debes asegurarte de que la función se ejecute cuando se haga clic en el botón que envía los datos. Para ello, puedes agregar un event listener al botón que ejecute la función cuando se haga clic en él:

const submitButton = document.getElementById("submit-button");

submitButton.addEventListener("click", () => {
  const { question, answer } = getInputData();
  const response = net.run(question);
  console.log(response);
});


La función stemText se encarga de aplicar stemming a un texto. Stemming es el proceso de reducir palabras a sus raíces básicas o a su forma más simple, eliminando afijos, sufijos y otras desinencias gramaticales. Por ejemplo, la palabra "caminando" se reduce a "caminar".

En este caso, podría implementarse de la siguiente manera:

const stemText = (text) => {
  // Crea una instancia de la clase Stemmer en español.
  const stemmer = new natural.StemmerEs();
  // Divide el texto en un arreglo de palabras.
  const words = text.split(" ");
  // Aplica stemming a cada palabra del texto.
  const stemmedWords = words.map((word) => stemmer.stem(word));
  // Vuelve a unir las palabras stemmizadas en una cadena de texto.
  const stemmedText = stemmedWords.join(" ");

  return stemmedText;
}


No es posible proporcionar un ejemplo completo de un archivo de texto plano para entrenar una red neuronal tipo chatGPT ya que cada red neuronal se entrena de manera diferente y, por lo tanto, el formato del archivo de entrenamiento también puede variar. Sin embargo, a continuación se proporciona un ejemplo de un archivo de texto plano que puede ser utilizado para entrenar una red neuronal tipo chatGPT:


Pregunta: ¿Cómo estás hoy?
Respuesta: Estoy bien, gracias por preguntar. ¿Y tú?

Pregunta: ¿Qué te gusta hacer en tu tiempo libre?
Respuesta: Me gusta leer, escuchar música y hacer ejercicio.

Pregunta: ¿Qué te gusta más, el verano o el invierno?
Respuesta: Me gusta más el verano porque puedo disfrutar de las actividades al aire libre.

Pregunta: ¿Qué es tu comida favorita?
Respuesta: Mi comida favorita es la pizza.

Pregunta: ¿Qué te gusta de trabajar como red neuronal tipo chatGPT?
Respuesta: Me gusta que puedo ayudar a las personas a obtener respuestas a sus preguntas y a interactuar con ellas de manera natural.


La función preprocessTrainingData no se encarga de asignar valores numéricos a las palabras. En lugar de eso, se encarga de preprocesar los datos de entrenamiento para que puedan ser utilizados por la red neuronal. Este proceso incluye etapas como la eliminación de palabras comunes, la tokenización del texto y la eliminación de caracteres innecesarios.

Una vez que los datos se han preprocesado, la red neuronal utiliza un algoritmo llamado "Word2Vec" para asignar valores numéricos a las palabras y utilizarlos en el entrenamiento. Este proceso se realiza automáticamente por la red neuronal y no es necesario que lo implementes manualmente en tu código.

Brain.js es una biblioteca de JavaScript para el aprendizaje automático en el navegador o en Node.js. Al igual que TensorFlow.js, Brain.js permite entrenar y utilizar modelos de aprendizaje automático en JavaScript, lo que significa que se pueden crear aplicaciones de aprendizaje automático que se ejecutan directamente en el navegador del usuario o en un servidor Node.js. Esto puede ser útil para crear un sistema de preguntas y respuestas que se ejecute en el lado del cliente o en el servidor.

Aquí te dejo un ejemplo hipotético de cómo podría ser el código para entrenar una red neuronal con Brain.js y crear un sistema de preguntas y respuestas:

// Importar la biblioteca Brain.js
const brain = require('brain.js');

// Crear un modelo de red neuronal y especificar la configuración
const model = new brain.recurrent.LSTM();
const config = {
  inputSize: 64,
  hiddenLayers: [128, 128],
  outputSize: 64
};
model.fromJSON(config);

// Cargar el conjunto de datos de entrenamiento y entrenar el modelo
const qaData = require('./qa-data.json');
model.train(qaData, {
  iterations: 2000,
  errorThresh: 0.005,
  log: true,
  logPeriod: 100,
  learningRate: 0.3
});

// Respondre una pregunta dada
const question = "¿Cuál es la capital de España?";
const answer = model.run(question);
console.log(answer);

Este código crea un modelo de red neuronal utilizando una capa de LSTM, que es un tipo de red neuronal recurrente que se utiliza a menudo en tareas de preguntas y respuestas. Luego, se carga el conjunto de datos de entrenamiento y se entrena el modelo utilizando una serie de parámetros que se especifican en la llamada a model.train(). Finalmente, se utiliza el modelo entrenado para responder una pregunta dada utilizando el método model.run().

Como en el caso de TensorFlow.js, este código es solo un ejemplo hipotético y no necesariamente se ajusta a una implementación real de un sistema de preguntas y respuestas con Brain.js. La elección del conjunto de datos de entrenamiento y la lógica de predicción de respuestas dependerán de cómo se haya diseñado y entrenado el modelo, y pueden variar en función de las necesid

ENTRENAMIENTO CON TEXTO PLANO DE LA RED NEURONAL

Si quieres entrenar una red neuronal con Brain.js utilizando texto plano en lugar de un conjunto de datos preprocesado, podrías hacerlo de la siguiente manera:

// Importar la biblioteca Brain.js
const brain = require('brain.js');

// Crear un modelo de red neuronal y especificar la configuración
const model = new brain.recurrent.LSTM();
const config = {
  inputSize: 64,
  hiddenLayers: [128, 128],
  outputSize: 64
};
model.fromJSON(config);

// Cargar el texto de entrenamiento y procesarlo para convertirlo en un formato adecuado para el modelo
const textData = require('./text-data.txt');
const qaData = processTextData(textData);

// Entrenar el modelo utilizando el conjunto de datos procesado
model.train(qaData, {
  iterations: 2000,
  errorThresh: 0.005,
  log: true,
  logPeriod: 100,
  learningRate: 0.3
});

// Respondre una pregunta dada
const question = "¿Cuál es la capital de España?";
const answer = model.run(question);
console.log(answer);

_________________________________________________________________________________________________

Si quieres utilizar Brain.js en un entorno que no sea Node.js, puedes utilizar la versión de Brain.js que se ejecuta en el navegador. En lugar de utilizar require() para importar la biblioteca, deberías utilizar una etiqueta <script> para cargar la biblioteca desde un CDN (Content Delivery Network, o red de entrega de contenidos):


<script src="https://unpkg.com/brain.js"></script>

<script>
  
  // Crear un modelo de red neuronal y especificar la configuración
  const model = new brain.recurrent.LSTM();
  const config = {
    inputSize: 64,
    hiddenLayers: [128, 128],
    outputSize: 64
  };
  model.fromJSON(config);

  // Cargar el texto de entrenamiento y procesarlo para convertirlo en un formato adecuado para el modelo
  const textData = require('./text-data.txt');
  const qaData = processTextData(textData);

  // Entrenar el modelo utilizando el conjunto de datos procesado
  model.train(qaData, {
    iterations: 2000,
    errorThresh: 0.005,
    log: true,
    logPeriod: 100,
    learningRate: 0.3
});

// Respondre una pregunta dada
const question = "¿Cuál es la capital de España?";
const answer = model.run(question);
console.log(answer);

</script>


SINO SE UTILIZA NODE, PUEDE HACERLO MEJOR CON JAVASCRIPT DE EST MANERA

fetch('./text-data.txt')
  .then(response => response.text()) // Procesar la respuesta como texto
  .then(textData => {
    // Procesar los datos de texto y entrenar el modelo de red neuronal
    const qaData = processTextData(textData);
    model.train(qaData, {
      iterations: 2000,
      errorThresh: 0.005,
      log: true,
      logPeriod: 100,
      learningRate: 0.3
    });
  });


FUNCION PARA PROCESAR LOS DATOS

function processTextData(textData) {
  // Tokenizar el texto en palabras
  const words = textData.split(' ');

  // Crear un mapa que asigne valores numéricos a cada palabra
  const wordMap = new Map();
  for (let i = 0; i < words.length; i++) {
    if (!wordMap.has(words[i])) {
      wordMap.set(words[i], i);
    }
  }

  // Organizar los datos en pares de preguntas y respuestas
  const qaData = [];
  for (let i = 0; i < words.length - 1; i++) {
    const input = [wordMap.get(words[i])];
    const output = [wordMap.get(words[i + 1])];
    qaData.push({
      input: input,
      output: output
    });
  }

  return qaData;
}


___________________________________________________________________________________________________-











// Cargar el texto de entrenamiento
const textData = 'pregunta1¿cuál es la capital de España?respuesta1Madrid\npregunta2¿cuál es el animal más rápido del mundo?respuesta2El guepardo';

// Dividir el texto en líneas y procesarlas para convertirlas en un formato adecuado para el modelo
const lines = textData.split('\n');
const qaData = lines.map(line => {
  const [input, output] = line.split('¿');
  return {
    input: input,
    output: output
  };
});
Una vez que tiene el conjunto de datos en un formato adecuado, puede entrenar el modelo utilizando el método train:

Copy code
model.train(qaData, {
  iterations: 2000,
  errorThresh: 0.025
});
Finalmente, puede guardar el modelo entrenado para su uso posterior y utilizarlo para hacer prediccion





Luego, puede usar esta función para procesar los datos de texto y entrenar su modelo de red neuronal de la siguiente manera:

Copy code
// Cargar el texto de entrenamiento y procesarlo para convertirlo en un






<html> 
  <head>
    <script src="//unpkg.com/brain.js"></script>
    <script src = " index.js"> </script>
  </head>
</html>

OTRA OPCION DE TOKENIZAR

function processTextData(textData) {
  // Usar la biblioteca natural para tokenizar el texto en palabras o frases
  const tokenizer = new natural.WordTokenizer();
  const tokens = tokenizer.tokenize(textData);

  // Asignar valores numéricos a cada palabra o frase
  const wordToNumber = new Map();
  let number = 0;
  for (const token of tokens) {
    if (!wordToNumber.has(token)) {
      wordToNumber.set(token, number);
      number++;
    }
  }

  // Organizar los datos en pares de preguntas y respuestas
  const qaData = [];
  for (let i = 0; i < tokens.length - 1; i++) {
    const question = wordToNumber.get(tokens[i]);
    const answer = wordToNumber.get(tokens[i + 1]);
    qaData.push([question, answer]);
  }

  return qaData;
}

Para crear un sistema de preguntas y respuestas con una red neuronal utilizando TensorFlow.js, primero se necesitaría tener un conjunto de datos de entrenamiento que contenga preguntas y sus correspondientes respuestas. Luego, se crearía un modelo de red neuronal y se entrenaría utilizando el conjunto de datos de entrenamiento. Una vez que el modelo esté entrenado, se podría utilizar para responder preguntas que se le planteen.

Aquí te dejo un ejemplo hipotético de cómo podría ser el código para crear un sistema de preguntas y respuestas con TensorFlow.js:

// Importar la biblioteca TensorFlow.js
const tf = require('@tensorflow/tfjs');

// Crear un modelo secuencial con una capa de LSTM (unidad de memoria a largo plazo)
const model = tf.sequential();
const lstmLayer = tf.layers.lstm({units: 64});
model.add(lstmLayer);

// Compilar el modelo con un optimizador y una función de pérdida
model.compile({optimizer: 'rmsprop', loss: 'categoricalCrossentropy'});

// Cargar el conjunto de datos de entrenamiento y entrenar el modelo
const qaData = require('./qa-data.json');
const xs = tf.tensor2d(qaData.questions);
const ys = tf.tensor2d(qaData.answers);
model.fit(xs, ys);

// Respondre una pregunta dada
const question = "¿Cuál es la capital de España?";
const answer = model.predict(question);
console.log(answer);

// Importar la biblioteca TensorFlow.js
const tf = require('@tensorflow/tfjs');

// Crear un modelo secuencial con una capa de LSTM (unidad de memoria a largo plazo)
const model = tf.sequential();
const lstmLayer = tf.layers.lstm({units: 64});
model.add(lstmLayer);

// Compilar el modelo con un optimizador y una función de pérdida
model.compile({optimizer: 'rmsprop', loss: 'categoricalCrossentropy'});

// Cargar el conjunto de datos de entrenamiento y entrenar el modelo
const textData = require('./text-data.json');
const xs = tf.tensor2d(textData.xs);
const ys = tf.tensor2d(textData.ys);
model.fit(xs, ys);

// Generar texto a partir de una semilla dada
const seed = "The quick brown fox";
const generatedText = model.predict(seed);
console.log(generatedText);

Este código crea un modelo secuencial utilizando una capa de LSTM, que es un tipo de red neuronal recurrente que se utiliza a menudo en tareas de generación de texto. Luego, se compila el modelo con un optimizador y una función de pérdida, se carga el conjunto de datos de entrenamiento y se entrena el modelo. Finalmente, se utiliza el modelo entrenado para generar texto a partir de una semilla dada.

LOS DATOS NO TIENEN QUE SE NECESARIAMENTE JSON
No necesariamente. En el ejemplo que te he dado, el conjunto de datos de entrenamiento se carga desde un archivo JSON, pero esto es solo una posibilidad y no un requisito. Puedes cargar el conjunto de datos de entrenamiento de cualquier formato que te resulte cómodo, siempre y cuando puedas convertirlo en un tensor de TensorFlow.js para que pueda ser utilizado por el modelo.

Por ejemplo, en lugar de cargar el conjunto de datos de entrenamiento desde un archivo JSON, podrías cargarlo desde un archivo CSV o desde una base de datos. También podrías generar el conjunto de datos de entrenamiento de manera programática en lugar de cargarlo desde un archivo externo. En cualquier caso, lo importante es que el conjunto de datos de entrenamiento se convierta en un tensor que pueda ser utilizado por el modelo de TensorFlow.js.


const seed = "The quick brown fox"; es una declaración de variable en JavaScript que asigna a la variable seed el valor de una cadena de texto que contiene la frase "The quick brown fox". Esta variable se utiliza en el ejemplo que te di anteriormente para generar texto a partir de una semilla dada. La semilla es una cadena de texto que se utiliza como punto de partida para la generación de texto. El modelo de TensorFlow.js utiliza la semilla para generar una secuencia de palabras que, en teoría, deberían ser coherentes y relacionadas con la semilla original.

En el ejemplo que te di, la variable seed se utiliza como entrada para el método model.predict(), que es el método que se utiliza para generar texto a partir del modelo entrenado. El resultado de la predicción se almacena en la variable generatedText, que luego se imprime en la consola utilizando console.log().

Es importante tener en cuenta que el código que te di es solo un ejemplo hipotético y no necesariamente se ajusta a una implementación real de un sistema generador de texto con TensorFlow.js. La elección de la semilla y la lógica de generación de texto dependen de cómo se haya diseñado y entrenado el modelo, y pueden variar en función de las necesidades y objetivos del sistema.



Try again

/* function show(){

// Obtener los valores de entrada del formulario
const reticulacion = parseInt($("#level1" ).val());
const lobinfe = parseInt($("#level2").val());
const esmerilado = parseInt($("#level3" ).val());
const bronquiecta = parseInt($("#level4" ).val());
const axial = parseInt($("#level5").val());
const panamiel = parseInt($("#level6").val());
const atrapaereo = parseInt($("#level7").val());
const lobsuperior = parseInt($("#level8").val());
const noduloesme = parseInt($("#level9").val());
const noperilinfa= parseInt($("#level10").val());
const franja = parseInt($("#level11").val());
const consolida= parseInt($("#level12").val());
const engrosabronqui= parseInt($("#level13").val());
const esmeriquiste= parseInt($("#level14").val());
const quistes= parseInt($("#level15").val());

// Crear un tensor de entrada a partir de los valores del formulario
const input = tf.tensor2d([[reticulacion, lobinfe, esmerilado, bronquiecta, axial, panamiel, atrapaereo, lobsuperior, noduloesme, noperilinfa, franja, consolida, engrosabronqui, esmeriquiste, quistes]]); */


/* // create a simple feed forward neural network with backpropagation
const model = tf.sequential();
model.add(tf.layers.dense({units: 7, activation: 'sigmoid', inputShape: [15]}));
model.add(tf.layers.dense({units: 10, activation: 'softmax'}));
model.compile({optimizer: 'sgd', loss: 'categoricalCrossentropy', learningRate: 0.3});

// train the model with the input-output pairs
const xs = tf.tensor2d([
    [0,1,1,0,0,0,0,0,0,0,0,0,0,0,0],
    [1,1,1,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,1,1,0,0,0,0,0,0,0,0,0,0,0,1],
    [0,0,1,0,0,0,0,1,1,0,0,0,0,0,0],
    [1,1,1,1,0,0,0,0,0,0,0,0,0,1,0],
    [0,1,1,0,1,0,0,1,0,0,0,1,1,0,0],
    [0,0,0,0,1,0,0,1,0,1,0,0,1,0,0],
    [1,1,0,1,0,0,0,0,0,0,0,0,0,0,0],
    [1,1,0,1,0,1,0,0,0,0,0,0,0,0,0],
    [1,1,1,1,1,0,0,0,0,0,1,0,0,0,0],
    [1,0,1,1,1,1,1,1,1,0,0,0,0,0,0],
    ...
]);
const ys = tf.tensor2d([
    [0,1,0,0,0,0,0,0,0,0],
    [0,0,1,0,0,0,0,0,0,0],
    [0,0,0,1,0,0,0,


    model.fit(xs, ys, {
  epochs: 10,
  batchSize: 32,
  shuffle: true
});



RED NUERONAL CON TENSORFLOW.JS

/* creame una red neuronal con tensorflow.js */

const model = tf.sequential();
model.add(tf.layers.dense({units: 1, inputShape: [1]}));
model.compile({loss: 'meanSquaredError', optimizer: 'sgd'});
const xs = tf.tensor2d([1, 2, 3, 4], [4, 1]);
const ys = tf.tensor2d([1, 3, 5, 7], [4, 1]);
model.fit(xs, ys, {epochs: 10}).then(() => {
  model.predict(tf.tensor2d([5], [1, 1])).print();
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Navbar</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
      integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100vh;
      }

      * {
        box-sizing: border-box;
      }

      .container {
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
          Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 80%;
        width: 90%;
      }

      .nav {
        background-color: #ec4899;
        color: white;
        padding: 1.7rem;
        display: flex;
        justify-content: space-between;
      }

      .buttons {
        display: flex;
        gap: 1.5rem;
      }

      .button {
        display: flex;
        gap: 0.5rem;
        cursor: pointer;
        background-color: transparent;
      }

      .button:hover {
        color: rgba(255, 255, 255, 0.7);
      }

      .header-text {
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        cursor: pointer;
      }

      .nav-box {
        visibility: hidden;
        background-color: #7d3b65;
        /* border: 1px solid #7d3b65; */
        position: absolute;
        top: 65%;
        width: 100%;
        color: #fff;
        padding-left: 2.3rem;
        padding-bottom: 1.7rem;
        padding-top: 1.6rem;
      }

      .hidden-nav {
        display: grid;
        gap: 1.5rem;
      }

      .share,
      .tweet,
      .pin {
        text-transform: uppercase;
        font-weight: 700;
        font-size: 13px;
      }

      .input-button {
        position: absolute;
        top: 58%;
        left: 10%;
      }

      @media screen and (max-width: 300px) {
        .nav-box {
          top: 68%;
        }
      }

      @media screen and (min-width: 600px) and (max-width: 699px) {
        .input-button {
          top: 65%;
        }
      }

      @media screen and (max-width: 769px) {
        .buttons {
          display: none;
        }
        .menu {
          cursor: pointer;
        }
      }

      @media screen and (min-width: 769px) {
        .menu {
          display: none;
        }
      }

      @media screen and (min-width: 730px) and (max-width: 899px) {
        .input-button {
          top: 62%;
        }
      }

      @media screen and (min-width: 900px) {
        .container {
          max-width: 55%;
          width: 60%;
        }

        .input-button {
          top: 55%;
          left: 22.5%;
        }
      }

      @media screen and (min-width: 915px) {
        .container {
          max-width: 55%;
          width: 60%;
        }

        .input-button {
          top: 62%;
          left: 22.5%;
        }
      }

      @media screen and (min-width: 1024px) {
        .container {
          max-width: 55%;
          width: 60%;
        }

        .input-button {
          top: 58%;
          left: 22.5%;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="nav" id="nav">
        <div class="header-text">pure css starter kit</div>
        <div class="menu" id="menu-button">
          <i class="fa-solid fa-bars"></i>
        </div>
        <div class="buttons">
          <div class="button">
            <i class="fa-brands fa-square-facebook"></i
            ><span class="share">share</span>
          </div>
          <div class="button">
            <i class="fa-brands fa-twitter"></i><span class="tweet">tweet</span>
          </div>
          <div class="button">
            <i class="fab fa-pinterest"></i><span class="pin">pin</span>
          </div>
        </div>
      </div>
      <div class="nav-box" id="nav-box">
        <div class="hidden-nav">
          <div class="button">
            <i class="fa-brands fa-square-facebook"></i
            ><span class="share">share</span>
          </div>
          <div class="button">
            <i class="fa-brands fa-twitter"></i><span class="tweet">tweet</span>
          </div>
          <div class="button">
            <i class="fab fa-pinterest"></i><span class="pin">pin</span>
          </div>
        </div>
      </div>
    </div>
    <input type="color" id="input-button" class="input-button" />

    <script async>
      const inputButton = document.getElementById('input-button');
      const nav = document.getElementById('nav');

      const menuButton = document.getElementById('menu-button');
      const navBox = document.getElementById('nav-box');

      let currentState = false;
      function displayNav() {
        let color = localStorage.getItem('color');
        navBox.style.backgroundColor - color;
        navBox.style.backgroundColor = color;
        if (!currentState && window.innerWidth <= 375) {
          currentState = true;
          navBox.style.visibility = 'visible';
          inputButton.setAttribute('style', 'position: absolute; top: 80%;');
        } else if (
          !currentState &&
          window.innerWidth > 375 &&
          window.innerWidth < 399
        ) {
          currentState = true;
          navBox.style.visibility = 'visible';
          inputButton.setAttribute('style', 'position: absolute; top: 70%;');
        } else if (
          !currentState &&
          window.innerWidth > 399 &&
          window.innerWidth < 450
        ) {
          currentState = true;
          navBox.style.visibility = 'visible';
          inputButton.setAttribute('style', 'position: absolute; top: 70%;');
        } else if (
          !currentState &&
          window.innerWidth > 450 &&
          window.innerWidth < 550
        ) {
          currentState = true;
          navBox.style.visibility = 'visible';
          inputButton.setAttribute('style', 'position: absolute; top: 75%;');
        } else if (
          !currentState &&
          window.innerWidth > 550 &&
          window.innerWidth < 650
        ) {
          currentState = true;
          navBox.style.visibility = 'visible';
          inputButton.setAttribute('style', 'position: absolute; top: 110%;');
        } else if (
          !currentState &&
          window.innerWidth > 650 &&
          window.innerWidth < 668
        ) {
          currentState = true;
          navBox.style.visibility = 'visible';
          inputButton.setAttribute('style', 'position: absolute; top: 95%;');
        } else if (
          !currentState &&
          window.innerWidth > 680 &&
          window.innerWidth < 730
        ) {
          currentState = true;
          navBox.style.visibility = 'visible';
          inputButton.setAttribute('style', 'position: absolute; top: 70%;');
        } else if (
          !currentState &&
          window.innerWidth > 735 &&
          window.innerWidth < 741
        ) {
          currentState = true;
          navBox.style.visibility = 'visible';
          inputButton.setAttribute('style', 'position: absolute; top: 100%;');
        } else if (!currentState && window.innerWidth > 799) {
          currentState = true;
          navBox.style.visibility = 'visible';
          inputButton.setAttribute('style', 'position: absolute; top: 82%;');
        } else {
          currentState = false;
          navBox.style.visibility = 'hidden';
          inputButton.removeAttribute('style');
        }
      }

      function getColor() {
        let color = localStorage.getItem('color');
        nav.style.backgroundColor = color;
        inputButton.value = color;
      }

      getColor();

      function saveColor(color) {
        localStorage.setItem('color', color);
      }
      function changeColor(e) {
        saveColor(e.target.value);
        nav.style.backgroundColor = e.target.value;
        navBox.style.backgroundColor = e.target.value;
      }

      inputButton.addEventListener('input', changeColor);
      menuButton.addEventListener('click', displayNav);
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Alert</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
      integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
          Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
      }

      .container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 80%;
        width: 90%;
      }

      .alert {
        background-color: #ec4899;
        color: white;
        padding: 1.2rem;
        display: flex;
        justify-content: space-between;
        border-radius: 0.3rem;
      }

      .header-text {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        font-size: 16px;
        font-weight: 400;
      }

      .cancel-button {
        display: flex;
        font-size: x-large;
        font-weight: 500;
        cursor: pointer;
      }

      .hidden-revert {
        display: none;
        text-transform: uppercase;
        font-weight: bold;
        background-color: #ec4899;
        color: #fff;
        border: none;
        outline: none;
        padding: 10px 15px;
        border-radius: 3px;
        cursor: pointer;
      }
      .revert {
        display: none;
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
      }

      .input-button {
        margin-top: 1.3rem;
        border: none;
        width: 2rem;
        background: none;
      }

      input[type='color' i] {
        height: 29px;
        cursor: pointer;
      }

      @media screen and (min-width: 900px) {
        .container {
          max-width: 60%;
          width: 50%;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="alert" id="alert">
        <div class="header-text">
          <i class="fas fa-bell"></i>
          <span class="bell"
            ><strong>Pink!</strong
            ><em> This is a pink alert - check it out </em></span
          >
        </div>
        <div class="cancel-button" id="cancel-button">×</div>
      </div>
      <button type="button" class="hidden-revert" id="revert-button">
        undo changes
      </button>
      <input type="color" class="input-button" id="input-button" />
      <!-- <embed type="text/html" src="snippet.html" width="500" height="200" /> -->
    </div>

    <script async>
      const alertBox = document.getElementById('alert');
      const cancelButton = document.getElementById('cancel-button');
      const revertButton = document.getElementById('revert-button');
      const inputButton = document.getElementById('input-button');

      function cancelAlert() {
        alertBox.style.display = 'none';
        revertButton.style.display = 'block';
      }

      function displayAlert() {
        alertBox.style.display = 'flex';
        revertButton.style.display = 'none';
      }

      function getColor() {
        let color = localStorage.getItem('color');
        alertBox.style.backgroundColor = color;
        revertButton.style.backgroundColor = color;
        inputButton.value = color;
      }

      getColor();

      function saveColor(color) {
        localStorage.setItem('color', color);
      }

      function changeColor(e) {
        saveColor(e.target.value);
        alertBox.style.backgroundColor = e.target.value;
        revertButton.style.backgroundColor = e.target.value;
      }

      inputButton.addEventListener('input', changeColor);
      revertButton.addEventListener('click', displayAlert);
      cancelButton.addEventListener('click', cancelAlert);
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Modal - Example</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }

      * {
        box-sizing: border-box;
      }

      .container {
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
          Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
        width: 100%;
        height: 100%;
        position: fixed;
      }

      .button-container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      .button {
        background-color: #ec4899;
        color: #fff;
        border: none;
        padding: 10px 20px;
        text-transform: uppercase;
        font-weight: 700;
        cursor: pointer;
        border-radius: 3px;
      }

      .modal-container {
        border-radius: 5px;
        width: 23.5rem;
        display: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
      }

      .modal-title {
        text-transform: capitalize;
        padding: 0 1.3rem;
      }

      .modal-body {
        border-top: 0.1px solid rgba(108, 105, 105, 0.212);
        border-bottom: 0.1px solid rgba(108, 105, 105, 0.212);
        padding: 2rem 1.3rem;
        line-height: 1.7;
        font-size: 1.1rem;
        color: rgb(97, 94, 94);
      }

      .modal-button-container {
        display: flex;
        justify-content: flex-end;
        padding: 0 1.3rem;
        padding-bottom: 2rem;
        gap: 0.2rem;
      }

      .close {
        color: red;
        border: none;
        border-radius: 3px;
        padding: 15px 20px;
        text-transform: uppercase;
        font-weight: 700;
        font-size: 0.85rem;
        background-color: transparent;
        cursor: pointer;
      }

      .save-changes {
        background-color: #50c878;
        color: white;
        border: none;
        border-radius: 3px;
        padding: 15px 20px;
        text-transform: uppercase;
        font-weight: 700;
        font-size: 0.85rem;
        cursor: pointer;
      }

      @media screen and (max-width: 340px) {
        .modal-container {
          width: 17rem;
        }
      }
    </style>
  </head>

  <body>
    <div class="container" id="container">
      <div class="button-container">
        <button type="button" class="button" id="toggle-button">
          open space modal
        </button>
      </div>
      <div class="modal-container" id="modal-box">
        <h1 class="modal-title">modal title</h1>
        <p class="modal-body">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae
          minima doloremque distinctio totam quos quasi, sequi soluta cupiditate
          vero ratione quo ipsa excepturi id commodi iusto, dolorum ducimus
          voluptatum aut cum sint quod repudiandae! Minima rem similique rerum
          ea nemo?
        </p>
        <div class="modal-button-container">
          <button type="button" class="close" id="close">close</button>
          <button type="button" class="save-changes" id="save-changes">
            save changes
          </button>
        </div>
      </div>
    </div>

    <script>
      const container = document.getElementById('container');
      const toggleButton = document.getElementById('toggle-button');
      const modal = document.getElementById('modal-box');
      const closeButton = document.getElementById('close');
      const saveButton = document.getElementById('save-changes');

      function toggleModal() {
        modal.style.display = 'block';
        document.body.style.backgroundColor = 'rgba(108, 105, 105, 0.212)';
      }

      function closeModal() {
        modal.style.display = 'none';
        document.body.style.backgroundColor = 'transparent';
      }

      window.addEventListener('click', (e) => {
        if (e.target.classList.contains('container')) {
          closeModal();
        }
      });
      modal.addEventListener('click', closeModal);
      saveButton.addEventListener('click', closeModal);
      closeButton.addEventListener('click', closeModal);
      toggleButton.addEventListener('click', toggleModal);
    </script>
  </body>
</html>

// Obtener todos los checkbox en una matriz
var checkboxes = document.querySelectorAll('input[type="checkbox"]');

// Inicializar la variable que almacenará la suma
var sum = 0;

// Recorrer la matriz de checkbox y sumar los valores seleccionados
for (var i = 0; i < checkboxes.length; i++) {
  if (checkboxes[i].checked) {
    sum += parseInt(checkboxes[i].value);
  }
}

// Mostrar la suma en la consola
console.log(sum);

En este código, se utiliza querySelectorAll para obtener todos los checkbox en una matriz. Luego se recorre la matriz y se suman los valores seleccionados utilizando un bucle for. Finalmente, se muestra el resultado de la suma en la consola.

Este es solo un ejemplo de una forma de hacerlo. Hay muchas otras maneras de capturar los valores de múltiples checkbox y sumarlos en JavaScript, y puedes utilizar diferentes enfoques según tus necesidades y preferencia

como centrar un input text y un boton en bootstrap 5

Puedes utilizar la clase mx-auto de Bootstrap 5 para centrar elementos como un <input> y un <button> en la página. La clase mx-auto se utiliza para centrar elementos en el eje horizontal y vertical, lo que lo hace ideal para centrar elementos en una página web.

Por ejemplo, si deseas centrar un <input> y un <button> en una página HTML utilizando Bootstrap 5, puedes utilizar el siguiente código:

<!-- Importar la hoja de estilos de Bootstrap 5 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

<!-- Crear un contenedor para el <input> y el <button> -->
<div class="container">
  <!-- Centrar el <input> y el <button> en el contenedor utilizando la clase mx-auto de Bootstrap 5 -->
  <input class="mx-auto" type="text" placeholder="Escribe tu pregunta aquí">
  <button class="mx-auto" type="button">Enviar pregunta</button>
</div>


En este ejemplo, el <input> y el <button> se encuentran dentro de un contenedor <div> con la clase container de Bootstrap 5. Esta clase se utiliza para crear un contenedor que ocupe todo el ancho de la página y que tenga un margen adecuado. Dentro del contenedor, el <input> y el <button> se centran utilizando la clase mx-auto.

Es importante tener en cuenta que para utilizar la clase mx-auto en tu página web, debes importar la hoja de estilos de Bootstrap 5 en tu página HTML. Puedes hacerlo utilizando el siguiente código:

A continuación encontrarás un código completo que puedes utilizar para implementar el chatbot GPT-3 en tu sitio web utilizando JavaScript en el lado del cliente y mostrar la respuesta del chatbot en un elemento <div> de tu página HTML:

// Configurar la URL de la API y la clave de acceso
const API_URL = 'https://api.openai.com/v1/completions';
const API_KEY = 'TU_CLAVE_DE_ACCESO';

// Crear una función que envía una pregunta al chatbot y muestra la respuesta
async function askGPT3(question) {
  // Crear un cuerpo para la solicitud HTTP con la pregunta y la configuración del chatbot
  const requestBody = {
    prompt: question,
    model: 'text-davinci-002',
    max_tokens: 2048,
    temperature: 0.5,
  };

  // Crear una opción para la solicitud HTTP con la clave de acceso y el cuerpo
  const requestOptions = {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(requestBody),
  };

  // Enviar la solicitud HTTP al chatbot
  try {
    const response = await fetch(API_URL, requestOptions);
    const responseJson = await response.json();

    // Mostrar la respuesta del chatbot en el elemento <div> con id "chatbot-response"
    const responseElement = document.getElementById('chatbot-response');
    responseElement.innerHTML = responseJson.choices[0].text;
  } catch (error) {
    // Mostrar un error en caso de que ocurra un problema al enviar la solicitud
    console.error(error);
  }
}

// Enviar una pregunta de prueba al chatbot
askGPT3('¿Qué es la inteligencia artificial?');

// Importar la biblioteca GPT-3 de OpenAI
const openai = require('openai');

// Configurar la clave de acceso a la API
openai.apiKey = 'TU_CLAVE_DE_ACCESO';

// Crear una función que envía una pregunta al chatbot y muestra la respuesta
async function askGPT3(question) {
  // Utilizar el método completions de la biblioteca GPT-3 para enviar la pregunta
  const response = await openai.completions.create({
    prompt: question,
    model: 'text-davinci-002',
    max_tokens: 2048,
    temperature: 0.5,
  });

  // Mostrar la respuesta del chatbot en la consola
  console.log(response.data.choices[0].text);
}

// Enviar una pregunta de prueba al chatbot
askGPT3('¿Qué es la inteligencia artificial?');

// Importar la librería de solicitudes HTTP
const request = require('request');

// Configurar la URL de la API y la clave de acceso
const API_URL = 'https://api.openai.com/v1/completions';
const API_KEY = 'TU_CLAVE_DE_ACCESO';

// Crear una función que envía una pregunta al chatbot y muestra la respuesta
function askGPT3(question) {
  // Crear un cuerpo para la solicitud HTTP con la pregunta y la configuración del chatbot
  const requestBody = {
    prompt: question,
    model: 'text-davinci-002',
    max_tokens: 2048,
    temperature: 0.5,
  };

  // Crear una opción para la solicitud HTTP con la clave de acceso y el cuerpo
  const requestOptions = {
    url: API_URL,
    headers: {
      Authorization: `Bearer ${API_KEY}`,
    },
    json: requestBody,
  };

  // Enviar la solicitud HTTP al chatbot
  request.post(requestOptions, (error, response, body) => {
    if (error) {
      // Mostrar un error en caso de que ocurra un problema al enviar la solicitud
      console.error(error);
    } else {
      
      
      
      
 La librería de solicitudes HTTP que se importa en el código anterior se utiliza para enviar una solicitud HTTP a la API de preguntas y respuestas de OpenAI. Esta librería no es parte de Node.js y puede utilizarse en cualquier entorno de programación que permita realizar solicitudes HTTP.

Si deseas utilizar otra librería o herramienta para enviar la solicitud HTTP en lugar de la librería de solicitudes HTTP, puedes modificar el código de la siguiente manera:
      
      // Importar la herramienta o librería que desees utilizar para enviar solicitudes HTTP
const http = require('TU_HERRAMIENTA_O_LIBRERIA');

// Configurar la URL de la API y la clave de acceso
const API_URL = 'https://api.openai.com/v1/completions';
const API_KEY = 'TU_CLAVE_DE_ACCESO';

// Crear una función que envía una pregunta al chatbot y muestra la respuesta
function askGPT3(question) {
  // Crear un cuerpo para la solicitud HTTP con la pregunta y la configuración del chatbot
  const requestBody = {
    
    
    
    
    
    // Configurar la URL de la API y la clave de acceso
const API_URL = 'https://api.openai.com/v1/completions';
const API_KEY = 'TU_CLAVE_DE_ACCESO';

// Crear una función que envía una pregunta al chatbot y muestra la respuesta
function askGPT3(question) {
  // Crear un cuerpo para la solicitud HTTP con la

// Importar la biblioteca GPT-3 de OpenAI
const openai = require('openai');

// Configurar la clave de acceso a la API
openai.apiKey = 'TU_CLAVE_DE_ACCESO';

// Crear una función que envía una pregunta al chatbot y muestra la respuesta
async function askGPT3(question) {
  // Utilizar el método completions de la biblioteca GPT-3 para enviar la pregunta
  const response = await openai.completions.create({
    prompt: question,
    model: 'text-davinci-002',
    max_tokens: 2048,
    temperature: 0.5,
  });

  // Mostrar la respuesta del chatbot en la consola
  console.log(response.data.choices[0].text);
}

// Enviar una pregunta de prueba al chatbot
askGPT3('¿Qué es la inteligencia artificial?');

// Importar la librería de solicitudes HTTP
const request = require('request');

// Configurar la URL de la API y la clave de acceso
const API_URL = 'https://api.openai.com/v1/completions';
const API_KEY = 'TU_CLAVE_DE_ACCESO';

// Crear una función que envía una pregunta al chatbot y muestra la respuesta
function askGPT3(question) {
  // Crear un cuerpo para la solicitud HTTP con la pregunta y la configuración del chatbot
  const requestBody = {
    prompt: question,
    model: 'text-davinci-002',
    max_tokens: 2048,
    temperature: 0.5,
  };

  // Crear una opción para la solicitud HTTP con la clave de acceso y el cuerpo
  const requestOptions = {
    url: API_URL,
    headers: {
      Authorization: `Bearer ${API_KEY}`,
    },
    json: requestBody,
  };

  // Enviar la solicitud HTTP al chatbot
  request.post(requestOptions, (error, response, body) => {
    if (error) {
      // Mostrar un error en caso de que ocurra un problema al enviar la solicitud
      console.error(error);
    } else {
      
      
      
      
 La librería de solicitudes HTTP que se importa en el código anterior se utiliza para enviar una solicitud HTTP a la API de preguntas y respuestas de OpenAI. Esta librería no es parte de Node.js y puede utilizarse en cualquier entorno de programación que permita realizar solicitudes HTTP.

Si deseas utilizar otra librería o herramienta para enviar la solicitud HTTP en lugar de la librería de solicitudes HTTP, puedes modificar el código de la siguiente manera:
      
      // Importar la herramienta o librería que desees utilizar para enviar solicitudes HTTP
const http = require('TU_HERRAMIENTA_O_LIBRERIA');

// Configurar la URL de la API y la clave de acceso
const API_URL = 'https://api.openai.com/v1/completions';
const API_KEY = 'TU_CLAVE_DE_ACCESO';

// Crear una función que envía una pregunta al chatbot y muestra la respuesta
function askGPT3(question) {
  // Crear un cuerpo para la solicitud HTTP con la pregunta y la configuración del chatbot
  const requestBody = {
    
    
    
    
    
    // Configurar la URL de la API y la clave de acceso
const API_URL = 'https://api.openai.com/v1/completions';
const API_KEY = 'TU_CLAVE_DE_ACCESO';

// Crear una función que envía una pregunta al chatbot y muestra la respuesta
function askGPT3(question) {
  // Crear un cuerpo para la solicitud HTTP con la

<body>

    <section id="solar-system">

        <div id="sun"></div>

        <article id="mercury-trajectory">

            <div id="mercury"></div>

        </article>

        <article id="venus-trajectory">

            <div id="venus"></div>

        </article>

        <article id="earth-trajectory">

            <div id="earth"></div>

        </article>

        <article id="mars-trajectory">

            <div id="mars"></div>

        </article>

        <!-- too far for my starship 🪐🚀

        <article id="main-asteroid-belt-trajectory"></article>

        <article id="jupiter-trajectory"></article>

        <article id="saturn-trajectory"></article>

        <article id="uranus-trajectory"></article

        <article id="neptune-trajectory"></article>

    -->

    </section>

</body>

.player

  .head

    .back

    .front

      .avatar

        img(src="http://vignette4.wikia.nocookie.net/lyricwiki/images/1//Semisonic_portrait.jpg/revision/latest?cb=004094209")

      .infos

        .titulo_song
9
          | KFC - Killing Fabulous Chickens

        .duracao_song

           i.fa.fa-clock-o 

             | Total time 45:12
13
        .tags

          span Educativo
15
          span Galinhas

          span Podcast

  

  .timeline

    
20
    .soundline

    .controllers.active

      .back 

.player

  .player__list

    .player__icon.player__icon-list.icon-list

  .player__volume

    .player__icon.player__icon-volume.icon-volume

  .player__meta

    .player__song Queenie Eye

    .player__artist Paul McCartney — New

  .player__bg(style="background-image: url(https://images.unsplash.com/photo-345373927-aeb928d54385?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);")

  .player__controls
11
    .player__controls-bg(style="background-image: url(https://images.unsplash.com/photo-15345313927-aeb928d54385?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);")

    .player__repeat

      .player__icon.player__icon-repeat.icon-repeat

    .player__prev
15
      .player__icon.player__icon-prev.icon-prev

    .player__play
17
      .player__icon.player__icon-play.icon-play

    .player__next

      .player__icon.player__icon-next.icon-next

<meta name="viewport" content="width=device-width, initial-scale=1,👉 maximum-scale=1, user-scalable=no👈">

// Obtener todos los elementos <select> en la página
var selects = document.querySelectorAll("select");

// Crear una variable para almacenar la suma
var sum = 0;

// Iterar sobre los elementos <select>
for (var i = 0; i < selects.length; i++) {
  // Obtener el valor seleccionado actualmente
  var value = selects[i].value;

  // Convertir el valor a un número y sumarlo a la variable de suma
  sum += Number(value);
}

// Mostrar la suma final en la consola
console.log("Total: " + sum);
En este código, se obtienen todos los elementos <select> en la página mediante document.querySelectorAll(). Luego, se itera sobre los elementos <select> y se suman sus valores seleccionados en una variable. Finalmente, se muestra el valor de la suma en la consola.

 <div id="google_translate_element"></div><br><script type="text/javascript">function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'es', includedLanguages: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');}</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pop - Up</title>
    <style>
      html,
      body {
        padding: 0;
        margin: 0;
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
          Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
      }

      .container {
        display: flex;
        flex-direction: column;
        height: 20rem;
      }

      .action {
        position: relative;
        padding: 8.3rem 0;
      }

      .default-btn-container {
        display: grid;
        text-align: center;
        justify-content: center;
      }

      .default-btn {
        padding: 0.9rem 1.7rem;
        background-color: #ec4899;
        border: none;
        outline: none;
        border-radius: 4px;
        text-transform: uppercase;
        font-size: 15px;
        font-weight: 600;
        color: #fff;
        cursor: pointer;
      }

      .popOver {
        display: none;
        background-color: #db2777;
        padding: 15px 9px;
        gap: 15px;
        border-radius: 10px;
        width: 20rem;
        color: #fff;
      }

      .popOver-title {
        text-transform: uppercase;
        font-weight: 600;
        color: rgb(202, 197, 197);
        border-bottom: 1px solid rgb(163, 161, 161);
        padding-bottom: 1rem;
      }

      .show-popOver {
        display: grid;
        transition: display 0.1s ease-in-out;
      }

      .pop-up {
        position: absolute;
        top: 10px;
        right: -110px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="action">
        <div class="default-btn-container">
          <button class="default-btn" id="default-button">Up pink</button>
        </div>
        <div class="popOver" id="popOver">
          <div class="popOver-title">Pink pop over title</div>
          <div>
            And here is some amazing content, it's very engaging. Right?
          </div>
        </div>
      </div>
    </div>
    <script async>
      const defaultButton = document.getElementById('default-button');
      const popOver = document.getElementById('popOver');

      defaultButton.onclick = () => {
        popOver.classList.toggle('show-popOver');
        popOver.classList.add('pop-up');
      };
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pop - Right?</title>
    <style>
      html,
      body {
        padding: 0;
        margin: 0;
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
          Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
      }

      .container {
        display: flex;
        flex-direction: column;
        height: 20rem;
      }

      .action {
        position: relative;
        padding: 8.3rem 0;
      }

      .default-btn-container {
        display: grid;
        text-align: center;
        justify-content: center;
      }

      .default-btn {
        padding: 0.9rem 1.7rem;
        background-color: #ec4899;
        border: none;
        outline: none;
        border-radius: 4px;
        text-transform: uppercase;
        font-size: 15px;
        font-weight: 600;
        color: #fff;
        cursor: pointer;
      }

      .popOver {
        display: none;
        background-color: #db2777;
        padding: 15px 9px;
        gap: 15px;
        border-radius: 10px;
        width: 20rem;
        color: #fff;
      }

      .popOver-title {
        text-transform: uppercase;
        font-weight: 600;
        color: rgb(202, 197, 197);
        border-bottom: 1px solid rgb(163, 161, 161);
        padding-bottom: 1rem;
      }

      .show-popOver {
        display: grid;
        transition: display 0.1s ease-in-out;
      }

      .pop-right {
        position: absolute;
        right: -300px;
        top: 83px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="action">
        <div class="default-btn-container">
          <button class="default-btn" id="default-button">Right pink</button>
        </div>
        <div class="popOver" id="popOver">
          <div class="popOver-title">Pink pop over title</div>
          <div>
            And here is some amazing content, it's very engaging. Right?
          </div>
        </div>
      </div>
    </div>
    <script async>
      const defaultButton = document.getElementById('default-button');
      const popOver = document.getElementById('popOver');

      defaultButton.onclick = () => {
        popOver.classList.toggle('show-popOver');
        popOver.classList.add('pop-right');
      };
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pop - Left</title>
    <style>
      html,
      body {
        padding: 0;
        margin: 0;
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
          Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
      }

      .container {
        display: flex;
        flex-direction: column;
        height: 20rem;
      }

      .action {
        position: relative;
        padding: 8.3rem 0;
      }

      .default-btn-container {
        display: grid;
        text-align: center;
        justify-content: center;
      }

      .default-btn {
        padding: 0.9rem 1.7rem;
        background-color: #ec4899;
        border: none;
        outline: none;
        border-radius: 4px;
        text-transform: uppercase;
        font-size: 15px;
        font-weight: 600;
        color: #fff;
        cursor: pointer;
      }

      .popOver {
        display: none;
        background-color: #db2777;
        padding: 15px 9px;
        gap: 15px;
        border-radius: 10px;
        width: 20rem;
        color: #fff;
      }

      .popOver-title {
        text-transform: uppercase;
        font-weight: 600;
        color: rgb(202, 197, 197);
        border-bottom: 1px solid rgb(163, 161, 161);
        padding-bottom: 1rem;
      }

      .show-popOver {
        display: grid;
        transition: display 0.1s ease-in-out;
      }

      .pop-left {
        position: absolute;
        left: -300px;
        top: 83px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="action">
        <div class="default-btn-container">
          <button class="default-btn" id="default-button">Left pink</button>
        </div>
        <div class="popOver" id="popOver">
          <div class="popOver-title">Pink pop over title</div>
          <div>
            And here is some amazing content, it's very engaging. Right?
          </div>
        </div>
      </div>
    </div>
    <script async>
      const defaultButton = document.getElementById('default-button');
      const popOver = document.getElementById('popOver');

      defaultButton.onclick = () => {
        popOver.classList.toggle('show-popOver');
        popOver.classList.add('pop-left');
      };
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Popover - Down</title>
    <style>
      html,
      body {
        padding: 0;
        margin: 0;
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
          Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
      }

      .container {
        display: flex;
        flex-direction: column;
        height: 20rem;
      }

      .action {
        position: relative;
        padding: 8.3rem 0;
      }

      .default-btn-container {
        display: grid;
        text-align: center;
        justify-content: center;
      }

      .default-btn {
        padding: 0.9rem 1.7rem;
        background-color: #ec4899;
        border: none;
        outline: none;
        border-radius: 4px;
        text-transform: uppercase;
        font-size: 15px;
        font-weight: 600;
        color: #fff;
        cursor: pointer;
      }

      .popOver {
        display: none;
        background-color: #db2777;
        padding: 15px 9px;
        gap: 15px;
        border-radius: 10px;
        width: 20rem;
        color: #fff;
      }

      .popOver-title {
        text-transform: uppercase;
        font-weight: 600;
        color: rgb(202, 197, 197);
        border-bottom: 1px solid rgb(163, 161, 161);
        padding-bottom: 1rem;
      }

      .show-popOver {
        display: grid;
        transition: display 0.1s ease-in-out;
      }

      .pop-down {
        position: absolute;
        bottom: -12px;
        left: -93px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="action">
        <div class="default-btn-container">
          <button class="default-btn" id="default-button">Down pink</button>
        </div>
        <div class="popOver" id="popOver">
          <div class="popOver-title">Pink pop over title</div>
          <div>
            And here is some amazing content, it's very engaging. Right?
          </div>
        </div>
      </div>
    </div>
    <script async>
      const defaultButton = document.getElementById('default-button');
      const popOver = document.getElementById('popOver');

      defaultButton.onclick = () => {
        popOver.classList.toggle('show-popOver');
        popOver.classList.add('pop-down');
      };
    </script>
  </body>
</html>

<!-- MODULO DE TRADUCCIÓN -->
<!-- GTranslate: https://gtranslate.io/ -->
<a href="#" onclick="doGTranslate('es|en');return false;" title="English" class="gflag nturl" style="background-position:-0px -0px;"><img src="//gtranslate.net/flags/blank.png" height="16" width="16" alt="English" /></a><a href="#" onclick="doGTranslate('es|fr');return false;" title="French" class="gflag nturl" style="background-position:-200px -100px;"><img src="//gtranslate.net/flags/blank.png" height="16" width="16" alt="French" /></a><a href="#" onclick="doGTranslate('es|de');return false;" title="German" class="gflag nturl" style="background-position:-300px -100px;"><img src="//gtranslate.net/flags/blank.png" height="16" width="16" alt="German" /></a><a href="#" onclick="doGTranslate('es|it');return false;" title="Italian" class="gflag nturl" style="background-position:-600px -100px;"><img src="//gtranslate.net/flags/blank.png" height="16" width="16" alt="Italian" /></a><a href="#" onclick="doGTranslate('es|pt');return false;" title="Portuguese" class="gflag nturl" style="background-position:-300px -200px;"><img src="//gtranslate.net/flags/blank.png" height="16" width="16" alt="Portuguese" /></a><a href="#" onclick="doGTranslate('es|ru');return false;" title="Russian" class="gflag nturl" style="background-position:-500px -200px;"><img src="//gtranslate.net/flags/blank.png" height="16" width="16" alt="Russian" /></a><a href="#" onclick="doGTranslate('es|es');return false;" title="Spanish" class="gflag nturl" style="background-position:-600px -200px;"><img src="//gtranslate.net/flags/blank.png" height="16" width="16" alt="Spanish" /></a>

<style type="text/css">
<!--
a.gflag {vertical-align:middle;font-size:16px;padding:1px 0;background-repeat:no-repeat;background-image:url(//gtranslate.net/flags/16.png);}
a.gflag img {border:0;}
a.gflag:hover {background-image:url(//gtranslate.net/flags/16a.png);}
#goog-gt-tt {display:none !important;}
.goog-te-banner-frame {display:none !important;}
.goog-te-menu-value:hover {text-decoration:none !important;}
body {top:0 !important;}
#google_translate_element2 {display:none!important;}
-->
</style>

 <select onchange="doGTranslate(this);"><option value="">Select Language</option><option value="es|ar">Arabic</option><option value="es|zh-CN">Chinese (Simplified)</option><option value="es|zh-TW">Chinese (Traditional)</option><option value="es|hr">Croatian</option><option value="es|cs">Czech</option><option value="es|da">Danish</option><option value="es|nl">Dutch</option><option value="es|en">English</option><option value="es|et">Estonian</option><option value="es|fi">Finnish</option><option value="es|fr">French</option><option value="es|de">German</option><option value="es|el">Greek</option><option value="es|iw">Hebrew</option><option value="es|hi">Hindi</option><option value="es|hu">Hungarian</option><option value="es|id">Indonesian</option><option value="es|ga">Irish</option><option value="es|it">Italian</option><option value="es|ja">Japanese</option><option value="es|ko">Korean</option><option value="es|lv">Latvian</option><option value="es|lt">Lithuanian</option><option value="es|no">Norwegian</option><option value="es|fa">Persian</option><option value="es|pl">Polish</option><option value="es|pt">Portuguese</option><option value="es|ru">Russian</option><option value="es|sk">Slovak</option><option value="es|sl">Slovenian</option><option value="es|es">Spanish</option><option value="es|sv">Swedish</option><option value="es|th">Thai</option><option value="es|tr">Turkish</option><option value="es|uk">Ukrainian</option></select><div id="google_translate_element2"></div>
<script type="text/javascript">
function googleTranslateElementInit2() {new google.translate.TranslateElement({pageLanguage: 'es',autoDisplay: false}, 'google_translate_element2');}
</script><script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit2">
</script>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tooltip - Up</title>
    <style>
      html,
      body {
        padding: 0;
        margin: 0;
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
          Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
      }

      .container {
        display: flex;
        flex-direction: column;
        height: 20rem;
      }

      .action {
        position: relative;
        padding: 8.3rem 0;
      }

      .default-btn-container {
        display: grid;
        text-align: center;
        justify-content: center;
      }

      .default-btn {
        padding: 0.9rem 1.7rem;
        background-color: #ec4899;
        border: none;
        outline: none;
        border-radius: 4px;
        text-transform: uppercase;
        font-size: 15px;
        font-weight: 600;
        color: #fff;
        cursor: pointer;
      }

      .tooltip {
        display: none;
        background-color: #db2777;
        padding: 15px 9px;
        gap: 15px;
        border-radius: 10px;
        width: 20rem;
        color: #fff;
      }

      .tooltip-title {
        text-transform: uppercase;
        font-weight: 600;
        color: rgb(202, 197, 197);
        border-bottom: 1px solid rgb(163, 161, 161);
        padding-bottom: 1rem;
      }

      .show-tooltip {
        display: grid;
        transition: display 0.1s ease-in-out;
      }

      .tooltip-up {
        position: absolute;
        top: 10px;
        right: -110px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="action">
        <div class="default-btn-container">
          <button class="default-btn" id="default-button">up pink</button>
        </div>
        <div class="tooltip" id="tooltip">
          <div class="tooltip-title">Pink pop over title</div>
          <div>
            And here is some amazing content, it's very engaging. Right?
          </div>
        </div>
      </div>
    </div>
    <script async>
      const defaultButton = document.getElementById('default-button');
      const tooltip = document.getElementById('tooltip');

      defaultButton.onmouseenter = () => {
        tooltip.classList.add('show-tooltip');
        tooltip.classList.add('tooltip-up');
      };

      defaultButton.onmouseout = () => {
        tooltip.classList.remove('show-tooltip');
      };
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tooltip - Down</title>
    <style>
      html,
      body {
        padding: 0;
        margin: 0;
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
          Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
      }

      .container {
        display: flex;
        flex-direction: column;
        height: 20rem;
      }

      .action {
        position: relative;
        padding: 8.3rem 0;
      }

      .default-btn-container {
        display: grid;
        text-align: center;
        justify-content: center;
      }

      .default-btn {
        padding: 0.9rem 1.7rem;
        background-color: #ec4899;
        border: none;
        outline: none;
        border-radius: 4px;
        text-transform: uppercase;
        font-size: 15px;
        font-weight: 600;
        color: #fff;
        cursor: pointer;
      }

      .tooltip {
        display: none;
        background-color: #db2777;
        padding: 15px 9px;
        gap: 15px;
        border-radius: 10px;
        width: 20rem;
        color: #fff;
      }

      .tooltip-title {
        text-transform: uppercase;
        font-weight: 600;
        color: rgb(202, 197, 197);
        border-bottom: 1px solid rgb(163, 161, 161);
        padding-bottom: 1rem;
      }

      .show-tooltip {
        display: grid;
        transition: display 0.1s ease-in-out;
      }

      .tooltip-down {
        position: absolute;
        bottom: -12px;
        right: 70px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="action">
        <div class="default-btn-container">
          <button class="default-btn" id="default-button">Down pink</button>
        </div>
        <div class="tooltip" id="tooltip">
          <div class="tooltip-title">Pink pop over title</div>
          <div>
            And here is some amazing content, it's very engaging. Right?
          </div>
        </div>
      </div>
    </div>
    <script async>
      const defaultButton = document.getElementById('default-button');
      const tooltip = document.getElementById('tooltip');

      defaultButton.onmouseenter = () => {
        tooltip.classList.add('show-tooltip');
      };

      defaultButton.onmouseout = () => {
        tooltip.classList.remove('show-tooltip');
      };
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tooltip - Left</title>
    <style>
      html,
      body {
        padding: 0;
        margin: 0;
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
          Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
      }

      .container {
        display: flex;
        flex-direction: column;
        height: 20rem;
      }

      .action {
        position: relative;
        padding: 8.3rem 0;
      }

      .default-btn-container {
        display: grid;
        text-align: center;
        justify-content: center;
      }

      .default-btn {
        padding: 0.9rem 1.7rem;
        background-color: #ec4899;
        border: none;
        outline: none;
        border-radius: 4px;
        text-transform: uppercase;
        font-size: 15px;
        font-weight: 600;
        color: #fff;
        cursor: pointer;
      }

      .tooltip {
        display: none;
        background-color: #db2777;
        padding: 15px 9px;
        gap: 15px;
        border-radius: 10px;
        width: 20rem;
        color: #fff;
      }

      .tooltip-title {
        text-transform: uppercase;
        font-weight: 600;
        color: rgb(202, 197, 197);
        border-bottom: 1px solid rgb(163, 161, 161);
        padding-bottom: 1rem;
      }

      .show-tooltip {
        display: grid;
        transition: display 0.1s ease-in-out;
      }

      .tooltip-left {
        position: absolute;
        left: -300px;
        top: 83px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="action">
        <div class="default-btn-container">
          <button class="default-btn" id="default-button">left pink</button>
        </div>
        <div class="tooltip" id="tooltip">
          <div class="tooltip-title">Pink pop over title</div>
          <div>
            And here is some amazing content, it's very engaging. Right?
          </div>
        </div>
      </div>
    </div>
    <script async>
      const defaultButton = document.getElementById('default-button');
      const tooltip = document.getElementById('tooltip');

      defaultButton.onmouseenter = () => {
        tooltip.classList.add('show-tooltip');
        tooltip.classList.add('tooltip-left');
      };

      defaultButton.onmouseout = () => {
        tooltip.classList.remove('show-tooltip');
      };
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tooltip - Right</title>
  </head>
  <style>
    html,
    body {
      padding: 0;
      margin: 0;
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
        Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }

    .container {
      display: flex;
      flex-direction: column;
      height: 20rem;
    }

    .action {
      position: relative;
      padding: 8.3rem 0;
    }

    .default-btn-container {
      display: grid;
      text-align: center;
      justify-content: center;
    }

    .default-btn {
      padding: 0.9rem 1.7rem;
      background-color: #ec4899;
      border: none;
      outline: none;
      border-radius: 4px;
      text-transform: uppercase;
      font-size: 15px;
      font-weight: 600;
      color: #fff;
      cursor: pointer;
    }

    .tooltip {
      display: none;
      background-color: #db2777;
      padding: 15px 9px;
      gap: 15px;
      border-radius: 10px;
      width: 20rem;
      color: #fff;
    }

    .tooltip-title {
      text-transform: uppercase;
      font-weight: 600;
      color: rgb(202, 197, 197);
      border-bottom: 1px solid rgb(163, 161, 161);
      padding-bottom: 1rem;
    }

    .show-tooltip {
      display: grid;
      transition: display 0.1s ease-in-out;
    }

    .tooltip-right {
      position: absolute;
      right: -300px;
      top: 83px;
    }
  </style>
  <body>
    <div class="container">
      <div class="action">
        <div class="default-btn-container">
          <button class="default-btn" id="default-button">right pink</button>
        </div>
        <div class="tooltip" id="tooltip">
          <div class="tooltip-title">Pink pop over title</div>
          <div>
            And here is some amazing content, it's very engaging. Right?
          </div>
        </div>
      </div>
    </div>
    <script async>
      const defaultButton = document.getElementById('default-button');
      const tooltip = document.getElementById('tooltip');

      defaultButton.onmouseenter = () => {
        tooltip.classList.add('show-tooltip');
        tooltip.classList.add('tooltip-right');
      };

      defaultButton.onmouseout = () => {
        tooltip.classList.remove('show-tooltip');
      };
    </script>
  </body>
</html>

Provide instructions...
1
Clear all
Export to JSFiddle
/* calculate arterial hypertension severity */
var systolic = document.getElementById('systolic').value;
var diastolic = document.getElementById('diastolic').value;
var severity = document.getElementById('severity');
if (systolic < 120 && diastolic < 80) {
  severity.innerHTML = 'Normal';
} else if (systolic < 130 && diastolic < 80) {
  severity.innerHTML = 'Elevated';
} else if (systolic < 140 || diastolic < 90) {
  severity.innerHTML = 'Stage 1 Hypertension';
} else if (systolic < 180 || diastolic < 120) {
  severity.innerHTML = 'Stage 2 Hypertension';
} else {
  severity.innerHTML = 'Hypertensive Crisis';
}

video src="https://content.codecademy.com/courses/SemanticHTML/dog-video.mp4" controls>
      <embed src="https://content.codecademy.com/courses/SemanticHTML/dog-on-beach.gif">
      
 </video>

<audio autoplay controls>
        <source src="https://content.codecademy.com/courses/SemanticHTML/dogBarking.mp3" type="audio/mp3">

</audio>

const element = (
<div>
   <span>1</span>
   <span>2</span>
</div>
)

const childElem = React.Children.map(element.children,  child => {
   React.cloneElement(child, { className: "", ...child.props })
})

const parentElem = React.Children.only(element);

parentElem.children = childElem

<div class="tradingview-widget-container">
  <div id="tradingview_74048"></div>
  <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/BITFINEX-IOTUSD/" rel="noopener" target="_blank"><span class="blue-text">IOTUSD Chart</span></a> by TradingView</div>
  <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
  <script type="text/javascript">
  new TradingView.widget(
  {
  "autosize": true,
  "symbol": "BINANCE:IOTAUSD",
  "interval": "D",
  "timezone": "Europe/Zurich",
  "theme": "Dark",
  "style": "1",
  "locale": "en",
  "toolbar_bg": "#f1f3f6",
  "enable_publishing": false,
  "hide_side_toolbar": false,
  "allow_symbol_change": true,
  "studies": [
    "RSI@tv-basicstudies",
    "StochasticRSI@tv-basicstudies"
  ],
  "container_id": "tradingview_74048"
}
  );
  </script>
</div>

<table>
  <thead>
    <tr>
      <th>Quarter</th>
      <th>Revenue</th>
      <th>Costs</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Q1</th>
      <td>$10M</td>
      <td>$7.5M</td>
    </tr>
    <tr>
      <th>Q2</th>
      <td>$12M</td>
      <td>$5M</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Total</th>
      <td>$22M</td>
      <td>$12.5M</td>
    </tr>
  </tfoot>
</table>

/* calcular la severidad del EPOC segun medición del VEF1 */
var VEF1 = prompt("Ingrese el VEF1");
var severidad = "";
if (VEF1 >= 80) {
  severidad = "Leve";
} else if (VEF1 >= 50 && VEF1 < 80) {
  severidad = "Moderado";
} else if (VEF1 >= 30 && VEF1 < 50) {
  severidad = "Severo";
} else if (VEF1 < 30) {
  severidad = "Muy Severo";
}
var resultado = document.createElement('div');
resultado.innerHTML = "La severidad del EPOC es: " + severidad;
document.body.appendChild(resultado);

/* calcular severidad de la obesidad segun OMS */
var peso = prompt("Ingrese su peso en kilogramos");
var altura = prompt("Ingrese su altura en metros");
var imc = peso / (altura * altura);
var resultado = document.createElement('div');
if (imc < 18.5) {
  resultado.innerHTML = "Su IMC es " + imc + " y su severidad es baja";
} else if (imc >= 18.5 && imc < 25) {
  resultado.innerHTML = "Su IMC es " + imc + " y su severidad es normal";
} else if (imc >= 25 && imc < 30) {
  resultado.innerHTML = "Su IMC es " + imc + " y su severidad es alta";
} else if (imc >= 30 && imc < 35) {
  resultado.innerHTML = "Su IMC es " + imc + " y su severidad es moderada";
} else if (imc >= 35 && imc < 40) {
  resultado.innerHTML = "Su IMC es " + imc + " y su severidad es severa";
} else if (imc >= 40) {
  resultado.innerHTML = "Su IMC es " + imc + " y su severidad es muy severa";
}
document.body.appendChild(resultado);

/* function to calculate the ideal weight from males and female */
function idealWeight(height, gender) {
  if (gender == 'male') {
    return (height - 100) * 0.9;
  } else {
    return (height - 100) * 0.85;
  }
}

/* if and else to shown image */
var image = document.createElement('img');
if (Math.random() > 0.5) {
  image.src = 'http://www.catgifpage.com/gifs/318.gif';
} else {
  image.src = 'http://www.catgifpage.com/gifs/320.gif';
}
document.body.appendChild(image);

function guardarDatos() {
  var nombre = document.getElementById('nombre').value;
  var apellido = document.getElementById('apellido').value;
  var edad = document.getElementById('edad').value;
  var datos = [nombre, apellido, edad];
  return datos;
}

/* mostrar valores de JSON files dentro de un html */
var json = {
  "name": "John",
  "age": 30,
  "cars": [
    { "name": "Ford", "models": ["Fiesta", "Focus", "Mustang"] },
    { "name": "BMW", "models": ["320", "X3", "X5"] },
    { "name": "Fiat", "models": ["500", "Panda"] }
  ]
}
var text = "";
var i;
for (i = 0; i < json.cars.length; i++) {
  text += json.cars[i].name + "<br>";
}
document.getElementById("demo").innerHTML = text;

/* sumar values de 5 radiobutton */
var suma = 0;
var radios = document.getElementsByName('radio');
for (var i = 0; i < radios.length; i++) {
  if (radios[i].checked) {
    suma += parseInt(radios[i].value);
  }
}

/* sum the numeric values of 4 input text */
var sum = 0;
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
  sum += parseInt(inputs[i].value);
}
alert(sum)

window.top.close();
Save Snippet

window.top.close();
Save Snippet

/* create a bootstrap and javascript virtual AI assistant */
var bootstrap = document.createElement('link');
bootstrap.setAttribute('rel', 'stylesheet');
bootstrap.setAttribute('href', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
document.head.appendChild(bootstrap);
var jquery = document.createElement('script');
jquery.setAttribute('src', 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js');
document.head.appendChild(jquery);
var bootstrapjs = document.createElement('script');
bootstrapjs.setAttribute('src', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js');
document.head.appendChild(bootstrapjs);
var assistant = document.createElement('div');
assistant.setAttribute('class', 'container');
assistant.setAttribute('id', 'assistant');
document.body.appendChild(assistant);
var assistant_header = document.createElement('div');
assistant_header.setAttribute('class', 'row');
assistant_header.setAttribute('id', 'assistant_header');
assistant.appendChild(assistant_header);
var assistant_header_text = document.createElement('div');
assistant_header_text.setAttribute('class', 'col-sm-8');
assistant_header_text.innerHTML = '<h1>Virtual Assistant</h1>';
assistant_header.appendChild(assistant_header_text);
var assistant_header_close = document.createElement('div');
assistant_header_close.setAttribute('class', 'col-sm-4');
assistant_header_close.innerHTML = '<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
assistant_header.appendChild(assistant_header_close);
var assistant_body = document.createElement('div');
assistant_body.setAttribute('class', 'row');
assistant_body.setAttribute('id', 'assistant_body');
assistant.appendChild(assistant_body);
var assistant_body_text = document.createElement('div');
assistant_body_text.setAttribute('class', 'col-sm-8');
assistant_body_text.innerHTML = '<p>Hello, I am your virtual assistant. How can I help you?</p>';
assistant_body.appendChild(assistant_body_text);
var assistant_body_input = document.createElement('div');
assistant_body_input.setAttribute('class', 'col-sm-4');
assistant_body_input.innerHTML = '<input type="text" class="form-control" id="assistant_input" placeholder="Enter text">';
assistant_body.appendChild(assistant_body_input);
var assistant_footer = document.createElement('div');
assistant_footer.setAttribute('class', 'row');
assistant_footer.setAttribute('id', 'assistant_footer');
assistant.appendChild(assistant_footer);
var assistant_footer_button = document.createElement('div');
assistant_footer_button.setAttribute('class', 'col-sm-12');
assistant_footer_button.innerHTML = '<button type="button" class="btn btn-default">Submit</button>';
assistant_footer.appendChild(assistant_footer_button);

/* create a function to search for medical information using google and display the information inside inner.html */
function search() {
  var search = document.getElementById('search').value;
  var url = "https://www.google.com/search?q=" + search;
  var win = window.open(url, '_blank');
  win.focus();
}

/* create text-to-speech and voice-text response to search the internet */
var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.voice = voices[10]; // Note: some voices don't support altering params
msg.voiceURI = 'native';
msg.volume = 1; // 0 to 1
msg.rate = 1; // 0.1 to 10
msg.pitch = 2; //0 to 2
msg.text = 'Hello World';
msg.lang = 'en-US';
speechSynthesis.speak(msg);
var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.onresult = function(event) {
  var interim_transcript = '';
  for (var i = event.resultIndex; i < event.results.length; ++i) {
    if (event.results[i].isFinal) {
      final_transcript += event.results[i][0].transcript;
    } else {
      interim_transcript += event.results[i][0].transcript;
    }
  }
  final_transcript = capitalize(final_transcript);
  final_span.innerHTML = linebreak(final_transcript);
  interim_span.innerHTML = linebreak(interim_transcript);
};
recognition.start();

/* create a function to calculate V02 based on maximum heart rate */
function calculateVO2(maxHR) {
  return (maxHR - 50) * 0.5;
}

/* create a function to calculate the bode index in copd */
function bodeIndex(FEV1, mMRC, 6MWT) {
  var bodeIndex = 0;
  if (FEV1 < 50) {
    bodeIndex += 4;
  } else if (FEV1 < 60) {
    bodeIndex += 3;
  } else if (FEV1 < 80) {
    bodeIndex += 2;
  } else if (FEV1 < 90) {
    bodeIndex += 1;
  }
  if (mMRC >= 2) {
    bodeIndex += 4;
  } else if (mMRC == 1) {
    bodeIndex += 3;
  }
  if (6MWT < 350) {
    bodeIndex += 4;
  } else if (6MWT < 450) {
    bodeIndex += 3;
  } else if (6MWT < 550) {
    bodeIndex += 2;
  } else if (6MWT < 650) {
    bodeIndex += 1;
  }
  return bodeIndex;
}

/* create a function to search pubmed and display it in an html div */
function searchPubmed(query) {
  var url = 'https://eutils.ncbi.nlm.nih.gov/entrez/eutils/esearch.fcgi?db=pubmed&term=' + query + '&retmax=10&retmode=json';
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
      var response = JSON.parse(xhr.responseText);
      var ids = response.esearchresult.idlist;
      var div = document.createElement('div');
      div.innerHTML = '<h2>Pubmed search results for "' + query + '"</h2>';
      for (var i = 0; i < ids.length; i++) {
        div.innerHTML += '<a href="https://www.ncbi.nlm.nih.gov/pubmed/' + ids[i] + '">' + ids[i] + '</a><br>';
      }
      document.body.appendChild(div);
    }
  };
  xhr.send();
}

/* create a smart voice assistant in spanish that can accept questions and answers from wikipedia */
var assistant = new Annyang();
var commands = {
  'hola': function() {
    alert('Hola, ¿en qué puedo ayudarte?');
  },
  '*question': function(question) {
    var url = 'https://es.wikipedia.org/w/api.php?action=opensearch&search=' + question + '&format=json&callback=?';
    $.ajax({
      type: 'GET',
      url: url,
      async: false,
      dataType: 'json',
      success: function(data) {
        alert(data[2][0]);
      },
      error: function(errorMessage) {
        alert('Error');
      }
    });
  }
};
assistant.addCommands(commands);
assistant.start();

/* create a function that searches for medical images on the internet */
function searchForMedicalImages(searchTerm) {
  var searchUrl = 'https://www.google.com/search?tbm=isch&q=' + searchTerm;
  window.location.href = searchUrl;
}

/* create a function that searches internal files of a website */
function searchFiles(query) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://api.github.com/search/code?q=' + query, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
      var results = JSON.parse(xhr.responseText);
      var resultsDiv = document.createElement('div');
      resultsDiv.innerHTML = '<h2>Results</h2>';
      for (var i = 0; i < results.items.length; i++) {
        var result = results.items[i];
        var resultDiv = document.createElement('div');
        resultDiv.innerHTML = '<a href="' + result.html_url + '">' + result.html_url + '</a>';
        resultsDiv.appendChild(resultDiv);
      }
      document.body.appendChild(resultsDiv);
    }
  };
  xhr.send();
}

/* create an alexa like voice assistant */
var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.onresult = function(event) {
  var interim_transcript = '';
  for (var i = event.resultIndex; i < event.results.length; ++i) {
    if (event.results[i].isFinal) {
      final_transcript += event.results[i][0].transcript;
    } else {
      interim_transcript += event.results[i][0].transcript;
    }
  }
  final_transcript = capitalize(final_transcript);
  final_span.innerHTML = linebreak(final_transcript);
  interim_span.innerHTML = linebreak(interim_transcript);
};
var two_line = /\n\n/g;
var one_line = /\n/g;
function linebreak(s) {
  return s.replace(two_line, '<p></p>').replace(one_line, '<br>');
}
var first_char = /\S/;
function capitalize(s) {
  return s.replace(first_char, function(m) { return m.toUpperCase(); });
}
recognition.start();

/* create AI assistant with voice commands to search medical paper */
var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.onresult = function(event) {
  var interim_transcript = '';
  for (var i = event.resultIndex; i < event.results.length; ++i) {
    if (event.results[i].isFinal) {
      final_transcript += event.results[i][0].transcript;
    } else {
      interim_transcript += event.results[i][0].transcript;
    }
  }
  final_transcript = capitalize(final_transcript);
  final_span.innerHTML = linebreak(final_transcript);
  interim_span.innerHTML = linebreak(interim_transcript);
};
var two_line = /\n\n/g;
var one_line = /\n/g;
function linebreak(s) {
  return s.replace(two_line, '<p></p>').replace(one_line, '<br>');
}
var first_char = /\S/;
function capitalize(s) {
  return s.replace(first_char, function(m) { return m.toUpperCase(); });
}
var final_transcript = '';
var recognizing = false;
var ignore_onend;
var start_timestamp;
if (!('webkitSpeechRecognition' in window)) {
  upgrade();
} else {
  start_button.style.display = 'inline-block';
  var recognition = new webkitSpeechRecognition();
  recognition.continuous = true;
  recognition.interimResults = true;
  recognition.onstart = function() {
    recognizing = true;
    showInfo('info_speak_now');
    start_img.src = 'mic-animate.gif';
  };
  recognition.onerror = function(event) {
    if (event.error == 'no-speech') {
      start_img.src = 'mic.gif';
      showInfo('info_no_speech');
      ignore_onend = true;
    }
    if (event.error == 'audio-capture') {
      start_img.src = 'mic.gif';
      showInfo('info_no_microphone');
      ignore_onend = true;
    }
    if (event.error == 'not-allowed') {
      if (event.timeStamp - start_timestamp < 100) {
        showInfo('info_blocked');
      } else {
        showInfo('info_denied');
      }
      ignore_onend = true;
    }
  };
  recognition.onend = function() {
    recognizing = false;
    if (ignore_onend) {
      return;
    }
    start_img.src = 'mic.gif';
    if (!final_transcript) {
      showInfo('info_start');
      return;
    }
    showInfo('');
    if (window.getSelection) {
      window.getSelection().removeAllRanges();
      var range = document.createRange();
      range.selectNode(document.getElementById('final_span'));
      window.getSelection().addRange(range);
    }
  };
  recognition.onresult = function(event) {
    var interim_transcript = '';
    for (var i = event.resultIndex; i < event.results.length; ++i) {
      if (event.results[i].isFinal) {
        final_transcript += event.results[i][0].transcript;
      } else {
        interim_transcript += event.results[i][0].transcript;
      }
    }
    final_transcript = capitalize(final_transcript);
    final_span.innerHTML = linebreak(final_transcript);
    interim_span.innerHTML = linebreak(interim_transcript);
  };
}
function upgrade() {
  start_button.style.visibility = 'hidden';
  showInfo('info_upgrade');
}
var two_line = /\n\n/g;
var one_line

/* write a AI assistant for search medical information in internet */
var search = document.createElement('div');
search.innerHTML = '<input type="text" id="search" placeholder="Search...">';
document.body.appendChild(search);
var search_button = document.createElement('div');
search_button.innerHTML = '<button id="search_button">Search</button>';
document.body.appendChild(search_button);
var search_result = document.createElement('div');
search_result.innerHTML = '<div id="search_result"></div>';
document.body.appendChild(search_result);
var search_button = document.getElementById('search_button');
search_button.onclick = function() {
  var search_text = document.getElementById('search').value;
  var search_result = document.getElementById('search_result');
  search_result.innerHTML = '<p>' + search_text + '</p>';
};

/* write a function to search data from different sources in internet */
function search(query) {
  var url = 'https://www.google.com/search?q=' + encodeURIComponent(query);
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
      var parser = new DOMParser();
      var doc = parser.parseFromString(xhr.responseText, 'text/html');
      var results = doc.querySelectorAll('h3.r a');
      for (var i = 0; i < results.length; i++) {
        var result = results[i];
        var url = result.getAttribute('href');
        var title = result.textContent;
        var p = document.createElement('p');
        var a = document.createElement('a');
        a.textContent = title;
        a.setAttribute('href', url);
        p.appendChild(a);
        document.body.appendChild(p);
      }
    }
  };
  xhr.send();
}

/* write a function tha sum the choice of checkbox controls */
function sumChecked() {
  var sum = 0;
  var checkboxes = document.getElementsByTagName('input');
  for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].type == 'checkbox' && checkboxes[i].checked) {
      sum += parseInt(checkboxes[i].value);
    }
  }
  return sum;
}

/* write a fuction that sum the value of a select control */
function sumSelect() {
  var sum = 0;
  var select = document.getElementById('select');
  for (var i = 0; i < select.options.length; i++) {
    sum += parseInt(select.options[i].value);
  }
  return sum;
}

<!DOCTYPE html>
<html>
<body>
​
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
​
</body>
</html>
​
​

<meta name="description" content="Author: A.N. Author,
    Illustrator: P. Picture, Category: Books, Price: $17.99,
    Length: 784 pages">

<!DOCTYPE html>
<html>
<head>
<script>
 
  var version = 0;
  
function saveEdits() {
  
  var editElem = document.getElementById("edit");
  version = localStorage.getItem("v");
  var versionTxt = document.createTextNode("Version " + localStorage.getItem("v"))
  document.body.appendChild(versionTxt);   
  version++
  
  localStorage.setItem("v", version);
  localStorage.setItem("Elm", editElem.innerHTML);
  
  
  
  document.getElementById("update").innerHTML="Edits saved!";
}

 var editedElem = document.getElementById("edit");
 var edits = localStorage.getItem("Elm");
 editedElem.innerHTML = edits;
 

</script>

</head> 

<body>
  <div id="edit" contenteditable="true">
 Edit me
</div>

<button onclick="saveEdits()">save edits</button>
<div id="update"> - Edit the text and click to save for next time</div>

</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Selectors Demo</title>
    <link rel="stylesheet" href="selectors.css">
</head>

<body>

    <div class="container">
        <p class="para p1">Para 1</p>
        <p class="para p2">Para 2</p>
        <li class="items li-one">One</li>
        <li class="items li-two">Two</li>
        <li class="items li-three">Three</li>
        <li class="items li-four">Four</li>
        <p class="para p1">Para 1</p>
        <p class="para p2">Para 2</p>
        <p class="para p3">Para 3</p>
        <a href="">Link 1</a>
        <span class="span1">Span 1</span>
        <li class="items li-four">Four</li>
    </div>

</body>

</html>

<a class="btn btn-primary smooth-scroll-link" href="#contactScroll" >
  <span class="js-cta-text-element"> Contact an ROI Expert Today</span>
</a>

//Pictures
 <picture>
       <source
    media="(max-width:599px) and (prefers-color-scheme: light)"
    srcset="images/bg-mobile-light.jpg"
    />
      <source
    media="(max-width:599px) and (prefers-color-scheme: dark)"
    srcset="images/bg-mobile-dark.jpg"
    />
      <source
    media="(min-width:600px) and (prefers-color-scheme: light)"
    srcset="images/bg-desktop-light.jpg"
    />
      <source
    media="(min-width:600px) and (prefers-color-scheme: dark)"
    srcset="images/bg-desktop-dark.jpg"
    />
      <img
    src="images/bg-mobile-light.jpg"
    aria-hidden="true"
    class="background-img"
    alt=""
    />
</picture>

//CSS
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #25273c;
    --color-primary-text: #e4e5f1;
    --color-secondary-text: #cacde8;
    --color-deleted-text: #4d5067;
    --color-circle: #777a92;
    --color-background: #161722;
    --color-background-hover: #1c1e35;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --color-white: #ffffff;
    --color-primary: #ffffff;
    --color-primary-text: #494c6b;
    --color-secondary-text: #9394a5;
    --color-light-text: #d4d4d4;
    --color-active: #3a7cfd;
    --color-circle: #d6d6d6;
    --color-background: #fafafa;
    --color-background-hover: #ebebeb;
    --color-background-modal: rgba(73, 76, 107, 0.6);
    --color-error: #cd1237;
  }
}


//JS
let dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
//Show which prefers-color-scheme user has before the page loads
window.matchMedia('(prefers-color-scheme: dark)');
if (dark) {
  //Do something
} else {
  //Do something
}

function degreesToRadians(degrees) {
  return (degrees * Math.PI) / 180
}

function distanceInKmBetweenEarthCoordinates(lat1, lon1, lat2, lon2) {
  const earthRadiusKm = 6371

  const dLat = degreesToRadians(lat2 - lat1)
  const dLon = degreesToRadians(lon2 - lon1)

  lat1 = degreesToRadians(lat1)
  lat2 = degreesToRadians(lat2)

  let a =
    Math.sin(dLat / 2) * Math.sin(dLat / 2) +
    Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(lat1) * Math.cos(lat2)
  let c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
  return earthRadiusKm * c
}

console.log(
  distanceInKmBetweenEarthCoordinates(
    6.5361348,
    3.3913253,
    6.5362509,
    3.3913711
  )
)

const findLocation = () => {
  const status = document.querySelectorAll('.status')

  const success = (position) => {
    console.log(position)
  }

  const error = () => {
    status.textContent = 'unable to get location'
  }

  navigator.geolocation.getCurrentPosition(success, error, {
    maximumAge: '10000',
    enableHighAccuracy: true,
  })
}

window.addEventListener('load', findLocation)

<?php  

    // PAGINATION CODE

    $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;

    $mainarray = array(

        'post_type' => array('post'),

        'post_status' => array('publish'),

        'orderby' => 'date',

        'order' => 'DESC',

        'posts_per_page' => 6,

        'paged'       => $paged,

    );

    $q = new WP_Query($mainarray); 

?>

​

    <div class="row custom-blog-main-wrapper">

        <?php while ($q->have_posts()) : $q->the_post(); ?>

        <div class="col-md-4 col-sm-6">

            <div class="blog-news-wrapper">

                <div class="blog-image">

                    <a href="<?php the_permalink(); ?>">

                        <?php if (has_post_thumbnail()):

$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(),'large', true);

?>

                        <img src="<?php echo $thumbnail[0]; ?>" alt="Picture" class="featured-image">

                        <?php else: ?>

                        <img src="<?php echo site_url('PATH'); ?>" alt="Picture" class="featured-image">

                        <?php endif; ?>

                    </a>

                </div>

                <div class="blog-content">

                    <p class="blog-date">

                        <?php echo get_the_date('M d Y'); ?>

                    </p>

                    <h3 class="blog-title">

                        <a href="<?php the_permalink(); ?>">

                            <?php the_title(); ?>

                        </a>

                    </h3>

                    <div class="blog-inner">

                        <p class="blog-text">

                            <?php if(!empty(get_the_excerpt())){

                                echo strip_tags(substr(get_the_excerpt(), 0, 200));

                            }

                            else{

//HTML
<ul className='card'>
   <li>
    <img src={avatar_url} alt={login} />
      <div>
      <h4>{login}</h4>
 		<a href={html_url}>profile</a>
 	 </div>
  </li>
</ul>


.card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin: 3rem auto;
}

.card li {
  width: 100%;
  display: flex;
  align-items: center;
  background: var(--clr-white);
  padding: 1rem 2rem;
  border-radius: var(--radius);
  text-align: left;
}

<div class="btn">
  <div class="btn-1">
     <img src="https://img.icons8.com/color/30/000000/google-logo.png" />
     Sign Up
  </div>
  
  <div class="btn-2">
    <img src="https://img.icons8.com/ios-filled/30/ffffff/facebook-new.png" />
     Sign Up
   </div>
</div>

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css.css">
    <script src="js.js"></script>
    <title></title>
</head>

<body>

</body>

</html>

<p><a href="https://flybubble.com/blog/final-product-checks">Final product checks </a> have been completed so it's ready to buy and fly.</p>

/**
 * Enable smooth scrolling on the whole document
 */
html {
	scroll-behavior: smooth;
}


/** Animations can cause issues for users who suffer from motion sickness and other conditions.
 * Disable smooth scrolling when users have prefers-reduced-motion enabled
 */
@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

<div class="dropzone dropzone-multiple" data-toggle="dropzone" data-dropzone-multiple data-dropzone-url="http://">
    <div class="fallback">
        <div class="custom-file">
            <input type="file" class="custom-file-input" id="dropzoneMultipleUpload" multiple>
            <label class="custom-file-label" for="dropzoneMultipleUpload">Choose file</label>
        </div>
    </div>
    <ul class="dz-preview dz-preview-multiple list-group list-group-lg list-group-flush">
        <li class="list-group-item px-0">
            <div class="row align-items-center">
                <div class="col-auto">
                    <div class="avatar">
                        <img class="avatar-img rounded" src="..." alt="..." data-dz-thumbnail>
                    </div>
                </div>
                <div class="col ml--3">
                    <h4 class="mb-1" data-dz-name>...</h4>
                    <p class="small text-muted mb-0" data-dz-size>...</p>
                </div>
                <div class="col-auto">
                    <div class="dropdown">
                        <a href="#" class="dropdown-ellipses dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fe fe-more-vertical"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a href="#" class="dropdown-item" data-dz-remove>
                                Remove
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>

- 👋 Hi, I’m @murufi

- 👀 I’m interested in ...

- 🌱 I’m currently learning ...

- 💞️ I’m looking to collaborate on ...

- 📫 How to reach me ...

​

<!---

murufi/murufi is a ✨ special ✨ repository because its `README.md` (this file) appears on your GitHub profile.

You can click the Preview link to take a look at your changes.

--->

​

<!-- Carousel wrapper -->
<div id="carouselBasicExample" class="carousel slide carousel-fade" data-mdb-ride="carousel">
  <!-- Indicators -->
  <div class="carousel-indicators">
    <button
      type="button"
      data-mdb-target="#carouselBasicExample"
      data-mdb-slide-to="0"
      class="active"
      aria-current="true"
      aria-label="Slide 1"
    ></button>
    <button
      type="button"
      data-mdb-target="#carouselBasicExample"
      data-mdb-slide-to="1"
      aria-label="Slide 2"
    ></button>
    <button
      type="button"
      data-mdb-target="#carouselBasicExample"
      data-mdb-slide-to="2"
      aria-label="Slide 3"
    ></button>
  </div>

  <!-- Inner -->
  <div class="carousel-inner">
    <!-- Single item -->
    <div class="carousel-item active">
      <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(15).webp" class="d-block w-100" alt="Sunset Over the City"/>
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
      </div>
    </div>

    <!-- Single item -->
    <div class="carousel-item">
      <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(22).webp" class="d-block w-100" alt="Canyon at Nigh"/>
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>

    <!-- Single item -->
    <div class="carousel-item">
      <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(23).webp" class="d-block w-100" alt="Cliff Above a Stormy Sea"/>
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </div>
  <!-- Inner -->

  <!-- Controls -->
  <button class="carousel-control-prev" type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
<!-- Carousel wrapper -->

<body>
  <h1>Adding 'a' and 'b'</h1>

  a: <input type="number" name="a" id="a"><br> b: <input type="number" name="b" id="b"><br>
  <button onclick="add(document.getElementById('a').value,document.getElementById('b').value)">Add</button>

  <script>
    function add(a, b) {
      var sum = parseInt(a, 10) + parseInt(b, 10);
      alert(sum);
    }
  </script>
</body>



OTRO EJEMPLO


<script>
function eq(value) {
  console.log(value);
  ViewImg = window.open('http://localhost/coord.php?' + value, 'ViewImg', 'width=<?php print $realWidthNewWindow; ?>,height=<?php print $realHeightNewWindow; ?>', 'status=no', 'titlebar=0');
}
</script>

<form id='testform_eq' name='testform_new'>
  <input type='text' id='val2' name='val2'>
  <input type='button' value='Submit' onclick='eq(document.getElementById("val2").value)'>
</form>



OTRO EJEMPLO

<body>
<h1>Adding 'a' and 'b'</h1>
<form>
  a: <input type="number" name="a" id="a"><br>
  b: <input type="number" name="b" id="a"><br>
  <button onclick="add()">Add</button>
</form>
<script>
  function add() {
    var m = document.getElementById("a").value;
    var n = document.getElementById("b").value;
    var sum = m + n;
    alert(sum);
    
    Var sum = parseFloat(a)+parseFloat (b); 
  }
</script>
</body>

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Belajar HTML</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

<select name="state_name" class="form-control" id="checkout-state" required="">
<option value="">Select State</option>
<option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
<option value="Andhra Pradesh">Andhra Pradesh</option>
<option value="Arunachal Pradesh">Arunachal Pradesh</option>
<option value="Assam">Assam</option>
<option value="Bihar">Bihar</option>
<option value="Chandigarh">Chandigarh</option>
<option value="Chhattisgarh">Chhattisgarh</option>
<option value="Dadra and Nagar Haveli">Dadra and Nagar Haveli</option>
<option value="Daman and Diu">Daman and Diu</option>
<option value="Delhi">Delhi</option>
<option value="Goa">Goa</option>
<option value="Gujarat">Gujarat</option>
<option value="Haryana">Haryana</option>
<option value="Himachal Pradesh">Himachal Pradesh</option>
<option value="Jammu and Kashmir">Jammu and Kashmir</option>
<option value="Jharkhand">Jharkhand</option>
<option value="Karnataka">Karnataka</option>
<option value="Kerala">Kerala</option>
<option value="Lakshadweep">Lakshadweep</option>
<option value="Madhya Pradesh">Madhya Pradesh</option>
<option value="Maharashtra">Maharashtra</option>
<option value="Manipur">Manipur</option>
<option value="Meghalaya">Meghalaya</option>
<option value="Mizoram">Mizoram</option>
<option value="Nagaland">Nagaland</option>
<option value="Orissa">Orissa</option>
<option value="Pondicherry">Pondicherry</option>
<option value="Punjab">Punjab</option>
<option value="Rajasthan">Rajasthan</option>
<option value="Sikkim">Sikkim</option>
<option value="Tamil Nadu">Tamil Nadu</option>
<option value="Telangana">Telangana</option>
<option value="Tripura">Tripura</option>
<option value="Uttarakhand">Uttarakhand</option>
<option value="Uttar Pradesh">Uttar Pradesh</option>
<option value="West Bengal">West Bengal</option>



</select>

Andaman and Nicobar Islands
Andhra Pradesh
Arunachal Pradesh
Assam
Bihar
Chandigarh
Chhattisgarh
Dadra and Nagar Haveli
Daman and Diu
Delhi
Goa
Gujarat
Haryana
Himachal Pradesh
Jammu and Kashmir
Jharkhand
Karnataka
Kerala
Lakshadweep
Madhya Pradesh
Maharashtra
Manipur
Meghalaya
Mizoram
Nagaland
Orissa
Pondicherry
Punjab
Rajasthan
Sikkim
Tamil Nadu
Telangana
Tripura
Uttarakhand
Uttar Pradesh
West Bengal

<form method="post" action="/cart/add" class="col-button">
            <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
            <input min="1" type="hidden" id="quantity" name="quantity" value="1"/>
            <input type="submit" value="Add to cart" class="btn add-to__cart" />
          </form>

.col-button .btn.add-to__cart {  padding: 8px 10px;
font-size: 14px;
text-transform: capitalize;
letter-spacing: 1px;
margin-left:10px;
/*     margin-right:10px; */
/*     margin-top: 15px; */
}
[data-type_product_capitalize="true"] .grid-product__title {
min-height:50px;
}

@media only screen and (max-width:480px){
[data-type_product_capitalize="true"] .grid-product__title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}

<form method="post" action="/cart/add" class="col-button">
            <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
            <input min="1" type="hidden" id="quantity" name="quantity" value="1"/>
            <input type="submit" value="{% if product.variants.first.available%}Add to cart{% else %}Sold Out{% endif%}" class="btn add-to__cart"" {% unless product.variants.first.available %}disabled{% endunless %} />
          </form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-group">
    <a class="terms" href="javascript:void(0)" onclick="$('#modalTerms').modal('show');">This works</a>

    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="checkTerms" name="checkTerms">
        <label class="custom-control-label" for="checkTerms">I agree with <a class="terms" href="javascript:void(0)" onclick="$('#modalTerms').modal('show');">terms and conditions</a></label>
    </div>
</div>


<div class="modal fade" id="modalTerms" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        Checkbox is checked
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

var header = $(".header");
var scrollChange = 1;
$(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll >= scrollChange) {
        header.addClass('bg-red');
    } else {
        header.removeClass("bg-red");
    }
});

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3783.910308083909!2d-97.39088478571517!3d18.487721487428114!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x85c5bcd5ee8ba413%3A0x7919bdf4dfd04b6!2sInstituto%20Educares!5e0!3m2!1ses-419!2smx!4v1667271208223!5m2!1ses-419!2smx" width="550" height="1000" style="position:relative; top: -1050px; left: 800px;border-radius: 50px" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
/* Se personaliza margenes del mapa */



/* Boton de Enviar
<button type="submit" name="wpforms[submit]" id="wpforms-submit-92" class="wpforms-submit" data-alt-text="Enviando..." data-submit-text="Enviar" aria-live="assertive" value="wpforms-submit">Enviar</button>

<div class="wpforms-submit-container"><input type="hidden" name="wpforms[id]" value="92"><input type="hidden" name="wpforms[author]" value="1"><input type="hidden" name="wpforms[post_id]" value="16"><button type="submit" name="wpforms[submit]" id="wpforms-submit-92" class="wpforms-submit" data-alt-text="Enviando..." data-submit-text="Enviar" aria-live="assertive" value="wpforms-submit">Enviar</button><img src="https://educares.edu.mx/wp-content/plugins/wpforms-lite/assets/images/submit-spin.svg" class="wpforms-submit-spinner" style="display: none;" width="26" height="26" alt="Cargando"></div> */

<div class="wpforms-submit-container"><input type="hidden" name="wpforms[id]" value="92"><input type="hidden" name="wpforms[author]" value="1"><input type="hidden" name="wpforms[post_id]" value="16"><button type="submit" name="wpforms[submit]" id="wpforms-submit-92" class="wpforms-submit" data-alt-text="Enviando..." data-submit-text="Enviar" aria-live="assertive" value="wpforms-submit">Enviar</button><img src="https://educares.edu.mx/wp-content/plugins/wpforms-lite/assets/images/submit-spin.svg" class="wpforms-submit-spinner" style="display: none;" width="26" height="26" padding: 5px 5px alt="Cargando"></div>


.wpforms-form input[type=submit],  .wpforms-form button[type=submit] {    
  color: #fff !important;
  background-color: #FAF243 !important; 
  border-radius: 50px !important;
  max-width: 95% !important;
	height: 55px !important;
	text-align: center !important;
	Font-size: 25px !important;
	border-radius: 50px !important;
    padding: 15px !important;
    border-style: none !important;
    color: #fff !important;    
    margin: 0px 150px !important;
/* Se personaliza el botón de enviar:  1.- El color se estable en  */ }


.wpf-color-fondo-formulario {
border-radius: 50px !important;
 background: #85a441 !IMPORTANT;
padding: 2.5% 2.5% !IMPORTANT;
margin: 20px 650px 20px 0px !important;
}
 

  /* Se personaliza:  1.- SE REDONDEA LAS ESQUINAS DEL FORMULARIO  A 50PX 
  					  2.- SE ESTABLECE EL COLOR DE FONDO A :#85a441
                      3.- EL ESPACIO ENTRE EL CONTENDER Y SU CONTENIDO
                      4.- El MARGEN IZQUIERDO DEL FORMULARIO SE ESTABLECE 650PX*/ 
  
}

  .wpforms-form .wpforms-field-label {

font-size: 35px !IMPORTANT;
line-height: 2 !important;
margin: 5px 0px 5px 0px !IMPORTANT;

  /* Se personaliza:  1.- EL TAMAÑO DE LAS ETIQUETAS SE ESTABLECEN A 35PX  A 50PX 
  					  2.- LA ALTU...
                      3.- LOS MARGENES DE 12 Y 6 PM*/ 
  /*float: none;
padding: 5%;
display: block;
font-weight: 700;*/
}


.wpforms-form .wpforms-field {
padding: 20px 40PX !IMPORTANT;
clear: both;
 /* Se personaliza:  1.- EL TAMAÑO DE LAS ETIQUETAS SE ESTABLECEN A 35PX  A 50PX 
  					  2.- LA ALTU...
                      3.- LOS MARGENES DE 12 Y 6 PM*/
}

.wpforms-container input.wpforms-field-large, .wpforms-container select.wpforms-field-large, .wpforms-container .wpforms-field-row.wpforms-field-large {

  	max-width: 100% !important;
	height: 55px !important;
	text-align: center !important;
	Font-size: 20px !important;
	border-radius: 50px !important;

/* Se personaliza:  	1.- ...
  					  	2.- ...
                      	3.- ...*/
}


.wpforms-form .choices__inner {
max-width: 100% !important;
height: 55px !important;
text-align: center !important;
Font-size: 20px !important;
border-radius: 50px !important;

/*display: inline-block;
vertical-align: top;
width: 100%;
background-color: #ffffff;
padding: 4px 6px 1px;
border: 1px solid #cccccc;
border-radius: 2px;
min-height: 35px;
overflow: hidden;*/


}

.wpforms-form .wpforms-valid {
max-width: 100% !important;
height: 55px !important;
text-align: center !important;
Font-size: 20px !important;
border-radius: 50px !important;

/*display: inline-block;
vertical-align: top;
width: 100%;
background-color: #ffffff;
padding: 4px 6px 1px;
border: 1px solid #cccccc;
border-radius: 2px;
min-height: 35px;
overflow: hidden;*/
}


/*.wpforms-form .wpforms-valid {
display: inline-block;
vertical-align: top;
width: 100%;
background-color: #2D4E5E !important;
padding: 4px 6px 1px;
border: 1px solid #cccccc;
border-radius: 2px;
min-height: 35px;
overflow: hidden;
border-radius: 50px !important;
}



.wpforms-form .wpforms-field.wpforms-field-select.wpforms-field-select-style-classic {
border-radius: 100%!important;
padding: 10px 0;
clear: both;
}

*/

<form-basic class="search-no-decoration form-class">
                    <div class="input-group" id="search-input">
                        <span class="input-group-append">
                            <h2 class="border-right-0 border pl-3 border-radius-grey-13-left-top-bottom">
                                <x-icon classicon="fill-grey-3" type="search" />
                            </h2>
                        </span>
                        <input name="search" id="input-search" placeholder="Cari nama siswa..."
                            class="form-control py-2 border-left-0 border-right-0 border input-search border-radius-grey-13-right-top-bottom"
                            type="search">
                        <span class="input-group-append d-none" id="close-search">
                            <h2 class="border-left-0 border pr-3 border-radius-grey-13-right-top-bottom"
                                id="close-search">
                                <x-icon classicon="fill-grey-3" type="close" />
                            </h2>
                        </span>
                    </div>
                </form-basic>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="action-card">
    <div class="card-front">
      <div class="flip-icon"><img src="https://supportingdev.wpengine.com/wp-content/uploads/2022/01/ss-hex-primary.svg"></div>
        <h3 class="action-title">Essentials</h3>
        <p class="front-content">Peace of mind that your books are current and accurate</p>
        <span class="card-arrow"></span>
    </div>
    <div class="card-back">
        <div class="action-content">
            <ul>
                <li>Account management</li>
                <li>Transaction processing</li>
                <li>Month-end close</li>
            </ul>
        </div>
    </div>
</div>

[av_section min_height='' min_height_pc='25' min_height_px='500px' padding='default' shadow='no-border-styling' bottom_border='no-border-styling' bottom_border_diagonal_color='#333333' bottom_border_diagonal_direction='' bottom_border_style='' custom_margin='0px' custom_margin_sync='true' custom_arrow_bg='' id='' color='main_color' background='bg_color' custom_bg='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' attach='scroll' position='top left' repeat='no-repeat' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' av_element_hidden_in_editor='0' av_uid='av-jx1rbsa4' custom_class='']
[av_two_fifth first min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' row_boxshadow='' row_boxshadow_color='' row_boxshadow_width='10' link='' linktarget='' link_hover='' title_attr='' alt_attr='' padding='0px' highlight='' highlight_size='' border='' border_color='' radius='0px' column_boxshadow='' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' background_position='top left' background_repeat='no-repeat' animation='' mobile_breaking='' mobile_display='' av_uid='av-1nh0e']
[av_iconlist position='left' iconlist_styling='' custom_title_size='20' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' custom_content_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='custom' custom_title='#666666' custom_content='#333333' color='custom' custom_bg='#b43131' custom_font='' custom_border='' animation='' alb_description='' id='' custom_class='contact-iconlist no-uppercase' av_uid='av-jx1rm2da' admin_preview_bg='']
[av_iconlist_item title='Address' icon='ue842' font='entypo-fontello' heading_tag='' heading_class='' link='' linktarget='' linkelement=''][/av_iconlist_item]
[av_iconlist_item title='Mail' icon='ue805' font='entypo-fontello' heading_tag='' heading_class='' link='' linktarget='' linkelement=''][/av_iconlist_item]
[av_iconlist_item title='Phone' icon='ue8ac' font='entypo-fontello' heading_tag='' heading_class='' link='' linktarget='' linkelement=''][/av_iconlist_item]
[/av_iconlist]
[/av_two_fifth][av_three_fifth min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' row_boxshadow='' row_boxshadow_color='' row_boxshadow_width='10' link='' linktarget='' link_hover='' title_attr='' alt_attr='' padding='0px' highlight='' highlight_size='' border='' border_color='' radius='0px' column_boxshadow='' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' background_position='top left' background_repeat='no-repeat' animation='' mobile_breaking='' mobile_display='' av_uid='av-p4we']
[av_textblock size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' color='' id='' custom_class='contact-form primary-form' av_uid='av-jx1qz3sg' admin_preview_bg='']
[gravityform id="1" title="false" description="false" ajax="true" tabindex="6564"]
[/av_textblock]
[/av_three_fifth][/av_section][av_layout_row border='' min_height_percent='' min_height_pc='25' min_height='0' color='main_color' mobile='av-flex-cells' id='' av_element_hidden_in_editor='0' mobile_breaking='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av_uid='av-11ugm']
[av_cell_one_full vertical_align='top' padding='0' padding_sync='true' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat' link='' linktarget='' link_hover='' mobile_display='' av_uid='av-jx1rrlsf' custom_class='']
[av_codeblock wrapper_element='' wrapper_element_attributes='' codeblock_type='' alb_description='' id='' custom_class='' av_uid='av-jx1rtppa']
<div style="margin-bottom: -7px">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3316.3136755729156!2d-84.36723968479215!3d33.778397080681245!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88f50417f3684593%3A0x829eabad1a831d2!2s665+Pylant+St+NE%2C+Atlanta%2C+GA+30306%2C+USA!5e0!3m2!1sen!2sbd!4v1560860123276!5m2!1sen!2sbd" width="100%" height="350" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
[/av_codeblock]
[/av_cell_one_full][/av_layout_row]

<a class="twitter-timeline" data-height="600" href="https://twitter.com/JOYNAdvisors?ref_src=twsrc%5Etfw">Tweets by JOYN</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<div class="location-schema">
	<div itemscope="" itemtype="http://schema.org/LocalBusiness">
		<div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
			<span itemprop="streetAddress">1335 A Canton Road</span><br>
			<span itemprop="addressLocality">Marietta</span>, <span itemprop="addressRegion">Georgia</span> <span itemprop="postalCode">30066</span>
		</div>
		<strong>Phone</strong> <span itemprop="telephone"><a href="tel:#">#</a></span>
	</div>
</div>

<!-- function.php -->

// Magnific Popup - Inline Content Enabler
function inline_popup_enabler(){
?>
<script>
(function($){
    $(window).load(function() {
        $('.inline_popup').magnificPopup({
          type:'inline',
          midClick: true 
        });
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'inline_popup_enabler');

<!-- In the Page -->

<!-- Button Code -->
<div class="popup-button">
	<a href="#" data-mfp-src="#popup_content" class="inline_popup ">
		<span class="link-title">Read More</span>
	</a>
</div>

<!-- POPUP Content -->
<div id="popup_content" class="white-popup mfp-hide popup-content">
	<div class="popup-inner">
		#########
	</div>
</div>

<div class="hero-button open-popup-link">
    <a href="javascript.void(0)" data-mfp-src="#get_started">Get Started</a>
</div>

const stats = {
  max: 56.78,
  standard_deviation: 4.34,
  median: 34.54,
  mode: 23.87,
  min: -0.75,
  average: 35.85
};

// Only change code below this line
// const half = (stats) => (stats.max + stats.min) / 2.0;

const half = ({max,min}) => ((max + min) / 2.0);

console.log(half(stats));

const magic = () => new Date();

<details>
  <summary>Example</summary>
  Height needs to be set for this to work. Works on Chrome, haven't tested further.
</details>


//Build in transition smooothly
details {
  transition: height 1s ease;
  overflow: hidden;
}

details:not([open]) {
  height: 1.25em;
}

details[open] {
  height: 2.5em;
}

function startGame() {
    myGamePiece = new component(30, 30, "red", 10, 120);
    myGamePiece.gravity = 0.05;
    myScore = new component("30px", "Consolas", "black", 280, 40, "text");
    myGameArea.start();
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.frameNo = 0;
    },
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

 <!-- A SIMPLE SNAKE GAME MADE BY HTML AND CSS -->

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
  html, body {
    height: 100%;
    margin: 0;
  }

  body {
    background: black;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  canvas {
    border: 1px solid white;
  }
  </style>
</head>
<body>
<canvas width="400" height="400" id="game"></canvas>
<script>
var canvas = document.getElementById('game');
var context = canvas.getContext('2d');

var grid = 16;
var count = 0;
  
var snake = {
  x: 160,
  y: 160,
  
  // snake velocity. moves one grid length every frame in either the x or y direction
  dx: grid,
  dy: 0,
  
  // keep track of all grids the snake body occupies
  cells: [],
  
  // length of the snake. grows when eating an apple
  maxCells: 4
};
var apple = {
  x: 320,
  y: 320
};

// get random whole numbers in a specific range
// @see https://stackoverflow.com/a/1527820/2124254
function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}

// game loop
function loop() {
  requestAnimationFrame(loop);

  // slow game loop to 15 fps instead of 60 (60/15 = 4)
  if (++count < 4) {
    return;
  }

  count = 0;
  context.clearRect(0,0,canvas.width,canvas.height);

  // move snake by it's velocity
  snake.x += snake.dx;
  snake.y += snake.dy;

  // wrap snake position horizontally on edge of screen
  if (snake.x < 0) {
    snake.x = canvas.width - grid;
  }
  else if (snake.x >= canvas.width) {
    snake.x = 0;
  }
  
  // wrap snake position vertically on edge of screen
  if (snake.y < 0) {
    snake.y = canvas.height - grid;
  }
  else if (snake.y >= canvas.height) {
    snake.y = 0;
  }

  // keep track of where snake has been. front of the array is always the head
  snake.cells.unshift({x: snake.x, y: snake.y});

  // remove cells as we move away from them
  if (snake.cells.length > snake.maxCells) {
    snake.cells.pop();
  }

  // draw apple
  context.fillStyle = 'red';
  context.fillRect(apple.x, apple.y, grid-1, grid-1);

  // draw snake one cell at a time
  context.fillStyle = 'green';
  snake.cells.forEach(function(cell, index) {
    
    // drawing 1 px smaller than the grid creates a grid effect in the snake body so you can see how long it is
    context.fillRect(cell.x, cell.y, grid-1, grid-1);  

    // snake ate apple
    if (cell.x === apple.x && cell.y === apple.y) {
      snake.maxCells++;

      // canvas is 400x400 which is 25x25 grids 
      apple.x = getRandomInt(0, 25) * grid;
      apple.y = getRandomInt(0, 25) * grid;
    }

    // check collision with all cells after this one (modified bubble sort)
    for (var i = index + 1; i < snake.cells.length; i++) {
      
      // snake occupies same space as a body part. reset game
      if (cell.x === snake.cells[i].x && cell.y === snake.cells[i].y) {
        snake.x = 160;
        snake.y = 160;
        snake.cells = [];
        snake.maxCells = 4;
        snake.dx = grid;
        snake.dy = 0;

        apple.x = getRandomInt(0, 25) * grid;
        apple.y = getRandomInt(0, 25) * grid;
      }
    }
  });
}

// listen to keyboard events to move the snake
document.addEventListener('keydown', function(e) {
  // prevent snake from backtracking on itself by checking that it's 
  // not already moving on the same axis (pressing left while moving
  // left won't do anything, and pressing right while moving left
  // shouldn't let you collide with your own body)
  
  // left arrow key
  if (e.which === 37 && snake.dx === 0) {
    snake.dx = -grid;
    snake.dy = 0;
  }
  // up arrow key
  else if (e.which === 38 && snake.dy === 0) {
    snake.dy = -grid;
    snake.dx = 0;
  }
  // right arrow key
  else if (e.which === 39 && snake.dx === 0) {
    snake.dx = grid;
    snake.dy = 0;
  }
  // down arrow key
  else if (e.which === 40 && snake.dy === 0) {
    snake.dy = grid;
    snake.dx = 0;
  }
});

// start the game
requestAnimationFrame(loop);
</script>
</body>
</html>

{% extends "base.html"%}{%block title %}Signup{%endblock%}
{%block content%} 
<form method="POST"> 
  
    <h3 align="center">Signup</h3>
    <div class="form-group">
  
    <label for="email">Email address</label>
    <input type="text" class="form-control" id="email"  name="email" placeholder="Enter email">

<label for="firstname">First Name</label>
    <input type="text" class="form-control" id="firstname"  name="firstname" placeholder="Enter First Name">
<label for="password1">Password</label>
    <input type="text" class="form-control" id="password1"  name="password1" placeholder="Password">

<label for="password2">Password</label>
    <input type="text" class="form-control" id="password2"  name="password2" placeholder="Password">
</form>
<br>
<button type="button" class="btn btn-primary">Submit</button>

{%endblock%}	

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>To-do</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbar"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        
        <div class="collapse navbar-collapse" id="navbar">
          <div class="navbar-nav">
            <a class="nav-item nav-link" id="home" href="/">Home</a>
          <a class="nav-item nav-link" id="logout" href="/logout">Logout</a>
            <a class="nav-item nav-link" id="login" href="/login">Login</a>
          <a class="nav-item nav-link" id="signup" href="/signup">Sign Up</a>
          </div></div></nav>
          <div class="contain">
            {%block content %}
            {%endblock%}
          
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
        integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"
        integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk"
        crossorigin="anonymous"></script>
</body>

</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio id="audio0" src="sound0.mp3"></audio>
<input type="button" value="Play" onclick="onplayssoun('sound0.mp3');">

<audio id="audio1" src="sound1.mp3"></audio>
<input type="button" value="Play" onclick="onplayssoun('sound1.mp3');">

// componente html
<!-- Imagen -->
  <el-form-item 
    label="Imagen" 
    prop="imagen"
  >
  <el-upload 
    class="avatar-uploader" 
    action="" 
    drag 
    :auto-upload="false" 
    :show-file-list="false"
    :multiple="false" 
    :on-change="onUploadChange" 
    accept=".jpeg, .png, .jpg, .gif, .svg"
   >
     <img 
        v-if="imageUrl" 
        :src="imageUrl" 
        class="avatar" 
    />
    <div 
    	v-else 
   	 	class="el-upload__text"
    >
      Suelta tus archivos aquí o
        <em>haz clic para cargar</em>
    	<p>Sólo archivos .jpeg, .png, .jpg, .gif, .svg</p>
    	</div>
    	<!-- <el-icon v-else class="avatar-uploader-icon"></el-icon> -->
   </el-upload>
</el-form-item>

// codigo js
onUploadChange(file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.form.imagenNueva = file.raw;
    },

data(){
      imageUrl: null,
}

<iframe style="visibility:hidden;" onload="this.style.visibility = 'visible';" src="https://trad-365.bubbleapps.io/index" > </iframe>