Tutoriales
Aplicación de lista de tareas con PHP y base de datos MySQL
2xsoftware
diciembre 16, 2021
Una aplicación de lista de tareas simple que toma las tareas enviadas por el usuario en un formulario y las guarda en una base de datos MySQL. Las tareas también se recuperan de la base de datos y se muestran en la página web con un botón de eliminación al lado de cada tarea. Cuando se hace clic en el botón Eliminar, la tarea se elimina de la base de datos.
Eso es lo que construiremos en este tutorial.
todo y en él, crea una tabla llamada Tareas. La tabla de tareas tiene solo dos campos, a saber:
id – int (10)
tarea – varchar (255)
Ahora crea dos archivos:
Ábrelos en un editor de texto y pega el siguiente código dentro del archivo index.php:
<!DOCTYPE html>
<html>
<head>
<title>ToDo List Application PHP and MySQL</title>
</head>
<body>
<div class="heading">
<h2 style="font-style: 'Hervetica';">ToDo List Application PHP and MySQL database</h2>
</div>
<form method="post" action="index.php" class="input_form">
<input type="text" name="task" class="task_input">
<button type="submit" name="submit" id="add_btn" class="add_btn">Add Task</button>
</form>
</body>
</html>Si ve su página ahora en el navegador, se verá así:
Agreguemos el estilo. Directamente debajo de la etiqueta
, agregue esta línea para cargar el archivo de hoja de estilo:</p>
<pre><code class="language-php"><link rel="stylesheet" type="text/css" href="style.css"></code></pre>
<p>Abra el archivo style.css que habíamos creado anteriormente y pegue este código de estilo en él:</p>
<pre><code class="language-css">.heading{
width: 50%;
margin: 30px auto;
text-align: center;
color: #6B8E23;
background: #FFF8DC;
border: 2px solid #6B8E23;
border-radius: 20px;
}
form {
width: 50%;
margin: 30px auto;
border-radius: 5px;
padding: 10px;
background: #FFF8DC;
border: 1px solid #6B8E23;
}
form p {
color: red;
margin: 0px;
}
.task_input {
width: 75%;
height: 15px;
padding: 10px;
border: 2px solid #6B8E23;
}
.add_btn {
height: 39px;
background: #FFF8DC;
color: #6B8E23;
border: 2px solid #6B8E23;
border-radius: 5px;
padding: 5px 20px;
}
table {
width: 50%;
margin: 30px auto;
border-collapse: collapse;
}
tr {
border-bottom: 1px solid #cbcbcb;
}
th {
font-size: 19px;
color: #6B8E23;
}
th, td{
border: none;
height: 30px;
padding: 2px;
}
tr:hover {
background: #E9E9E9;
}
.task {
text-align: left;
}
.delete{
text-align: center;
}
.delete a{
color: white;
background: #a52a2a;
padding: 1px 6px;
border-radius: 3px;
text-decoration: none;
}
</code></pre>
<p><!-- codewithawa.com_300x250: Begin --></p>
<p> <!-- codewithawa.com_300x250 End --></p>
</p>
<p>Si actualizamos nuestro navegador ahora, obtenemos esto:</p>
<p><img decoding="async" alt="" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" style="height:24%; width:100%" data-lazy-src="https://2xsoftware.es/wp-content/uploads/2021/12/1639627838_730_Aplicacion-de-lista-de-tareas-con-PHP-y-base-de.png"/><noscript><img decoding="async" alt="" src="https://2xsoftware.es/wp-content/uploads/2021/12/1639627838_730_Aplicacion-de-lista-de-tareas-con-PHP-y-base-de.png" style="height:24%; width:100%"/></noscript></p>
<p>Ahora escribimos el código para guardar la tarea enviada en la base de datos. </p>
<p>En la parte superior del archivo index.php, antes de la primera línea, agregue este código:</p>
<pre><code class="language-php"><?php
// initialize errors variable
$errors = "";
// connect to database
$db = mysqli_connect("localhost", "root", "", "todo");
// insert a quote if submit button is clicked
if (isset($_POST['submit'])) {
if (empty($_POST['task'])) {
$errors = "You must fill in the task";
}else{
$task = $_POST['task'];
$sql = "INSERT INTO tasks (task) VALUES ('$task')";
mysqli_query($db, $sql);
header('location: index.php');
}
}
// ...</code></pre>
<p>Lo que hace esto es que, si el usuario hace clic en el botón enviar, la tarea se guarda en la base de datos. Sin embargo, si no se completó ninguna tarea en el formulario, el valor de la variable $ errores se establece en <em>‘debe completar la tarea’. </em>Pero eso no se muestra. Vamos a mostrarlo.</p>
<p>Peguemos este código dentro del formulario. Directamente debajo de la etiqueta </p>
<form>. Como esto:</p>
<pre><code class="language-php"><?php if (isset($errors)) { ?>
<p><?php echo $errors; ?></p>
<?php } ?></code></pre>
<p><span id="ezoic-pub-ad-placeholder-113" class="ezoic-adpicker-ad"/><span class="ezoic-ad banner-1 banner-1113 adtester-container adtester-container-113" data-ez-name="codewithawa_com-banner-1"><span id="div-gpt-ad-codewithawa_com-banner-1-0" ezaw="300" ezah="250" style="position:relative;z-index:0;display:inline-block;padding:0;min-height:250px;min-width:300px;" class="ezoic-ad"/></span>Si intentamos enviar el formulario con un valor vacío, obtenemos esto:</p>
<p><img decoding="async" alt="" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" style="height:25%; width:100%" data-lazy-src="https://2xsoftware.es/wp-content/uploads/2021/12/1639627838_794_Aplicacion-de-lista-de-tareas-con-PHP-y-base-de.png"/><noscript><img decoding="async" alt="" src="https://2xsoftware.es/wp-content/uploads/2021/12/1639627838_794_Aplicacion-de-lista-de-tareas-con-PHP-y-base-de.png" style="height:25%; width:100%"/></noscript></p>
<p><!-- codewithawa.com_300x250: Begin --></p>
<p> <!-- codewithawa.com_300x250 End --></p>
<p>Hasta ahora, nuestra aplicación guarda tareas en la base de datos, pero no las muestra.</p>
<p>Lo que tenemos que hacer es recuperarlos de la base de datos y luego mostrarlos. </p>
<p>Abra el archivo index.php y pegue este código inmediatamente después de la etiqueta </p></form>
<p> de cierre del formulario:</p>
<pre><code class="language-php">//...
// </form>
<table>
<thead>
<tr>
<th>N</th>
<th>Tasks</th>
<th style="width: 60px;">Action</th>
</tr>
</thead>
<tbody>
<?php
// select all tasks if page is visited or refreshed
$tasks = mysqli_query($db, "SELECT * FROM tasks");
$i = 1; while ($row = mysqli_fetch_array($tasks)) { ?>
<tr>
<td> <?php echo $i; ?> </td>
<td class="task"> <?php echo $row['task']; ?> </td>
<td class="delete">
<a href="index.php?del_task=<?php echo $row['id'] ?>">x</a>
</td>
</tr>
<?php $i++; } ?>
</tbody>
</table></code></pre>
<p>Si ingresamos una tarea en el formulario y presionamos el botón de enviar, obtenemos esto:</p>
<p><img decoding="async" alt="" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" style="height:24%; width:100%" data-lazy-src="https://2xsoftware.es/wp-content/uploads/2021/12/1639627838_482_Aplicacion-de-lista-de-tareas-con-PHP-y-base-de.png"/><noscript><img decoding="async" alt="" src="https://2xsoftware.es/wp-content/uploads/2021/12/1639627838_482_Aplicacion-de-lista-de-tareas-con-PHP-y-base-de.png" style="height:24%; width:100%"/></noscript></p>
<p>¡Bien! </p>
<p>Hagamos que nuestro botón de borrar funcione. En la parte superior de la página, después del bloque if que guarda la tarea en la base de datos, agregue este código:</p>
<pre><code class="language-php">
// delete task
if (isset($_GET['del_task'])) {
$id = $_GET['del_task'];
mysqli_query($db, "DELETE FROM tasks WHERE id=".$id);
header('location: index.php');
}
?></code></pre>
<p>Eso es todo. Si hacemos clic en el pequeño botón ‘x’ ahora contra una tarea, esa tarea se elimina de la base de datos.</p>
<h3>Conclusión</h3>
<p>Espero que esto te ayude. Una característica que le recomiendo que agregue a esta aplicación solo para ejercitar aún más sus habilidades es agregar la función de edición donde una publicación se puede actualizar incluso después de haber sido creada. Sugerencia: siga mi tutorial sobre CRUD: cree, edite, actualice y elimine publicaciones con la base de datos MySQL</p>
<p>Gracias: D</p>
<p>Awa Melvine</p>
<h3> </h3>
</p></div>
<p><script>(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.11&appId=187693445124711";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script></p>
</div>
<footer class="article-footer">
</footer>
</article>
<aside class="article-cta">
<div>
<p class="kicker">Sigue resolviendo</p>
<h2>Encuentra la siguiente guía que necesitas</h2>
</div>
<form role="search" method="get" class="search-form" action="https://2xsoftware.es/">
<label>
<span class="screen-reader-text">Buscar:</span>
<input type="search" class="search-field" placeholder="¿Qué necesitas resolver?" value="" name="s">
</label>
<button type="submit">Buscar</button>
</form>
</aside>
<section class="related">
<div class="section-heading"><h2>Guías relacionadas</h2></div>
<div class="post-grid post-grid--three">
<article class="post-card post-5728 post type-post status-publish format-standard has-post-thumbnail hentry category-tutoriales tag-2xsoftware tag-archivos tag-cambios tag-monitor tag-para tag-process tag-procmon tag-rastrear tag-registros tag-uso">
<a class="post-card__media" href="https://2xsoftware.es/2023/08/15/uso-de-process-monitor-procmon-para-rastrear-cambios-en-archivos-y-registros-2xsoftware/" tabindex="-1" aria-hidden="true">
<img width="596" height="243" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20596%20243'%3E%3C/svg%3E" class="attachment-txs-card size-txs-card wp-post-image" alt="" loading="lazy" decoding="async" data-lazy-srcset="https://2xsoftware.es/wp-content/uploads/2023/08/Uso-de-Process-Monitor-ProcMon-para-rastrear-cambios-en-archivos.png 596w, https://2xsoftware.es/wp-content/uploads/2023/08/Uso-de-Process-Monitor-ProcMon-para-rastrear-cambios-en-archivos-300x122.png 300w" data-lazy-sizes="auto, (max-width: 596px) 100vw, 596px" data-lazy-src="https://2xsoftware.es/wp-content/uploads/2023/08/Uso-de-Process-Monitor-ProcMon-para-rastrear-cambios-en-archivos.png" /><noscript><img width="596" height="243" src="https://2xsoftware.es/wp-content/uploads/2023/08/Uso-de-Process-Monitor-ProcMon-para-rastrear-cambios-en-archivos.png" class="attachment-txs-card size-txs-card wp-post-image" alt="" loading="lazy" decoding="async" srcset="https://2xsoftware.es/wp-content/uploads/2023/08/Uso-de-Process-Monitor-ProcMon-para-rastrear-cambios-en-archivos.png 596w, https://2xsoftware.es/wp-content/uploads/2023/08/Uso-de-Process-Monitor-ProcMon-para-rastrear-cambios-en-archivos-300x122.png 300w" sizes="auto, (max-width: 596px) 100vw, 596px" /></noscript> </a>
<div class="post-card__body">
<a class="eyebrow" href="https://2xsoftware.es/category/tutoriales/">Tutoriales</a>
<h2 class="post-card__title"><a href="https://2xsoftware.es/2023/08/15/uso-de-process-monitor-procmon-para-rastrear-cambios-en-archivos-y-registros-2xsoftware/">Uso de Process Monitor (ProcMon) para rastrear cambios en archivos y registros – 2xsoftware</a></h2>
<div class="post-card__excerpt"><p>1.1K El Monitoreo de procesos (ProcMon) La herramienta se utiliza para rastrear la actividad de varios procesos en el sistema operativo Windows. Esta utilidad le permite mostrar cómo…</p>
</div>
<div class="post-card__meta"><span class="meta-item"><time datetime="2023-08-15T04:56:14+02:00">agosto 15, 2023</time></span></div>
</div>
</article>
<article class="post-card post-5725 post type-post status-publish format-standard has-post-thumbnail hentry category-tutoriales tag-2xsoftware tag-como tag-con tag-estado tag-herramienta tag-migracion tag-migrar tag-perfiles tag-usmt tag-usuario tag-windows">
<a class="post-card__media" href="https://2xsoftware.es/2023/08/15/como-migrar-perfiles-de-usuario-con-la-herramienta-de-migracion-de-estado-de-usuario-usmt-en-windows-10-2xsoftware/" tabindex="-1" aria-hidden="true">
<img width="558" height="405" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20558%20405'%3E%3C/svg%3E" class="attachment-txs-card size-txs-card wp-post-image" alt="" loading="lazy" decoding="async" data-lazy-srcset="https://2xsoftware.es/wp-content/uploads/2023/08/Como-migrar-perfiles-de-usuario-con-la-herramienta-de-migracion.png 620w, https://2xsoftware.es/wp-content/uploads/2023/08/Como-migrar-perfiles-de-usuario-con-la-herramienta-de-migracion-300x218.png 300w" data-lazy-sizes="auto, (max-width: 558px) 100vw, 558px" data-lazy-src="https://2xsoftware.es/wp-content/uploads/2023/08/Como-migrar-perfiles-de-usuario-con-la-herramienta-de-migracion.png" /><noscript><img width="558" height="405" src="https://2xsoftware.es/wp-content/uploads/2023/08/Como-migrar-perfiles-de-usuario-con-la-herramienta-de-migracion.png" class="attachment-txs-card size-txs-card wp-post-image" alt="" loading="lazy" decoding="async" srcset="https://2xsoftware.es/wp-content/uploads/2023/08/Como-migrar-perfiles-de-usuario-con-la-herramienta-de-migracion.png 620w, https://2xsoftware.es/wp-content/uploads/2023/08/Como-migrar-perfiles-de-usuario-con-la-herramienta-de-migracion-300x218.png 300w" sizes="auto, (max-width: 558px) 100vw, 558px" /></noscript> </a>
<div class="post-card__body">
<a class="eyebrow" href="https://2xsoftware.es/category/tutoriales/">Tutoriales</a>
<h2 class="post-card__title"><a href="https://2xsoftware.es/2023/08/15/como-migrar-perfiles-de-usuario-con-la-herramienta-de-migracion-de-estado-de-usuario-usmt-en-windows-10-2xsoftware/">¿Cómo migrar perfiles de usuario con la herramienta de migración de estado de usuario (USMT) en Windows 10? – 2xsoftware</a></h2>
<div class="post-card__excerpt"><p>En esta guía−Migración de perfiles de usuario mediante USMTGuardar un perfil de usuario con USMTMigración e implementación de un perfil de usuario con USMT 2K Una de las…</p>
</div>
<div class="post-card__meta"><span class="meta-item"><time datetime="2023-08-15T03:53:41+02:00">agosto 15, 2023</time></span></div>
</div>
</article>
<article class="post-card post-5719 post type-post status-publish format-standard has-post-thumbnail hentry category-tutoriales tag-2xsoftware tag-cerrar tag-comandos tag-como tag-con tag-del tag-forma tag-linea tag-remota tag-sesion tag-usuario">
<a class="post-card__media" href="https://2xsoftware.es/2023/08/15/como-cerrar-la-sesion-del-usuario-de-forma-remota-con-la-linea-de-comandos-2xsoftware/" tabindex="-1" aria-hidden="true">
<img width="695" height="72" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20695%2072'%3E%3C/svg%3E" class="attachment-txs-card size-txs-card wp-post-image" alt="" loading="lazy" decoding="async" data-lazy-srcset="https://2xsoftware.es/wp-content/uploads/2023/08/Como-cerrar-la-sesion-del-usuario-de-forma-remota-con.png 695w, https://2xsoftware.es/wp-content/uploads/2023/08/Como-cerrar-la-sesion-del-usuario-de-forma-remota-con-300x31.png 300w" data-lazy-sizes="auto, (max-width: 695px) 100vw, 695px" data-lazy-src="https://2xsoftware.es/wp-content/uploads/2023/08/Como-cerrar-la-sesion-del-usuario-de-forma-remota-con.png" /><noscript><img width="695" height="72" src="https://2xsoftware.es/wp-content/uploads/2023/08/Como-cerrar-la-sesion-del-usuario-de-forma-remota-con.png" class="attachment-txs-card size-txs-card wp-post-image" alt="" loading="lazy" decoding="async" srcset="https://2xsoftware.es/wp-content/uploads/2023/08/Como-cerrar-la-sesion-del-usuario-de-forma-remota-con.png 695w, https://2xsoftware.es/wp-content/uploads/2023/08/Como-cerrar-la-sesion-del-usuario-de-forma-remota-con-300x31.png 300w" sizes="auto, (max-width: 695px) 100vw, 695px" /></noscript> </a>
<div class="post-card__body">
<a class="eyebrow" href="https://2xsoftware.es/category/tutoriales/">Tutoriales</a>
<h2 class="post-card__title"><a href="https://2xsoftware.es/2023/08/15/como-cerrar-la-sesion-del-usuario-de-forma-remota-con-la-linea-de-comandos-2xsoftware/">¿Cómo cerrar la sesión del usuario de forma remota con la línea de comandos? – 2xsoftware</a></h2>
<div class="post-card__excerpt"><p>1.1K Un administrador de Windows puede utilizar el desconectarse Comando para cerrar una sesión de usuario de forma remota desde cualquier computadora con Windows en la red. En…</p>
</div>
<div class="post-card__meta"><span class="meta-item"><time datetime="2023-08-15T01:40:16+02:00">agosto 15, 2023</time></span></div>
</div>
</article>
</div>
</section>
</main>
<footer class="site-footer">
<div class="site-footer__grid wrap">
<div>
<a class="footer-brand" href="https://2xsoftware.es/">2xSoftware</a>
<p>Soluciones prácticas para Windows, software y administración de sistemas.</p>
</div>
<div>
<h2>Explorar</h2>
<ul>
<li class="cat-item cat-item-2"><a href="https://2xsoftware.es/category/tutoriales/">Tutoriales</a>
</li>
<li class="cat-item cat-item-39"><a href="https://2xsoftware.es/category/wordpress/">Wordpress</a>
</li>
<li class="cat-item cat-item-1012"><a href="https://2xsoftware.es/category/windows/">Windows</a>
</li>
</ul>
</div>
<div>
<h2>Información</h2>
<ul>
<li><a href="https://2xsoftware.es/privacy-policy/">Política de privacidad</a></li>
</ul>
</div>
</div>
<div class="site-footer__bottom wrap">
<p>© 2026 2xSoftware</p>
<a href="#top">Volver arriba ↑</a>
</div>
</footer>
<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/2xsoftware-premium/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<script id="daim-track-internal-links-js" src="https://2xsoftware.es/wp-content/plugins/interlinks-manager/public/assets/js/track-internal-links.js?ver=1.25"></script>
<script id="rocket-browser-checker-js-after">
"use strict";var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){return protoProps&&defineProperties(Constructor.prototype,protoProps),staticProps&&defineProperties(Constructor,staticProps),Constructor}}();function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}var RocketBrowserCompatibilityChecker=function(){function RocketBrowserCompatibilityChecker(options){_classCallCheck(this,RocketBrowserCompatibilityChecker),this.passiveSupported=!1,this._checkPassiveOption(this),this.options=!!this.passiveSupported&&options}return _createClass(RocketBrowserCompatibilityChecker,[{key:"_checkPassiveOption",value:function(self){try{var options={get passive(){return!(self.passiveSupported=!0)}};window.addEventListener("test",null,options),window.removeEventListener("test",null,options)}catch(err){self.passiveSupported=!1}}},{key:"initRequestIdleCallback",value:function(){!1 in window&&(window.requestIdleCallback=function(cb){var start=Date.now();return setTimeout(function(){cb({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-start))}})},1)}),!1 in window&&(window.cancelIdleCallback=function(id){return clearTimeout(id)})}},{key:"isDataSaverModeOn",value:function(){return"connection"in navigator&&!0===navigator.connection.saveData}},{key:"supportsLinkPrefetch",value:function(){var elem=document.createElement("link");return elem.relList&&elem.relList.supports&&elem.relList.supports("prefetch")&&window.IntersectionObserver&&"isIntersecting"in IntersectionObserverEntry.prototype}},{key:"isSlowConnection",value:function(){return"connection"in navigator&&"effectiveType"in navigator.connection&&("2g"===navigator.connection.effectiveType||"slow-2g"===navigator.connection.effectiveType)}}]),RocketBrowserCompatibilityChecker}();
//# sourceURL=rocket-browser-checker-js-after
</script>
<script id="rocket-preload-links-js-extra">
var RocketPreloadLinksConfig = {"excludeUris":"/(.+/)?feed/?.+/?|/(?:.+/)?embed/|/(index\\.php/)?wp\\-json(/.*|$)|/wp-admin/|/logout/|/wp-login.php","usesTrailingSlash":"1","imageExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif","fileExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif|php|pdf|html|htm","siteUrl":"https://2xsoftware.es","onHoverDelay":"100","rateThrottle":"3"};
//# sourceURL=rocket-preload-links-js-extra
</script>
<script id="rocket-preload-links-js-after">
(function() {
"use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e=function(){function i(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),e}}();function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var t=function(){function n(e,t){i(this,n),this.browser=e,this.config=t,this.options=this.browser.options,this.prefetched=new Set,this.eventTime=null,this.threshold=1111,this.numOnHover=0}return e(n,[{key:"init",value:function(){!this.browser.supportsLinkPrefetch()||this.browser.isDataSaverModeOn()||this.browser.isSlowConnection()||(this.regex={excludeUris:RegExp(this.config.excludeUris,"i"),images:RegExp(".("+this.config.imageExt+")$","i"),fileExt:RegExp(".("+this.config.fileExt+")$","i")},this._initListeners(this))}},{key:"_initListeners",value:function(e){-1<this.config.onHoverDelay&&document.addEventListener("mouseover",e.listener.bind(e),e.listenerOptions),document.addEventListener("mousedown",e.listener.bind(e),e.listenerOptions),document.addEventListener("touchstart",e.listener.bind(e),e.listenerOptions)}},{key:"listener",value:function(e){var t=e.target.closest("a"),n=this._prepareUrl(t);if(null!==n)switch(e.type){case"mousedown":case"touchstart":this._addPrefetchLink(n);break;case"mouseover":this._earlyPrefetch(t,n,"mouseout")}}},{key:"_earlyPrefetch",value:function(t,e,n){var i=this,r=setTimeout(function(){if(r=null,0===i.numOnHover)setTimeout(function(){return i.numOnHover=0},1e3);else if(i.numOnHover>i.config.rateThrottle)return;i.numOnHover++,i._addPrefetchLink(e)},this.config.onHoverDelay);t.addEventListener(n,function e(){t.removeEventListener(n,e,{passive:!0}),null!==r&&(clearTimeout(r),r=null)},{passive:!0})}},{key:"_addPrefetchLink",value:function(i){return this.prefetched.add(i.href),new Promise(function(e,t){var n=document.createElement("link");n.rel="prefetch",n.href=i.href,n.onload=e,n.onerror=t,document.head.appendChild(n)}).catch(function(){})}},{key:"_prepareUrl",value:function(e){if(null===e||"object"!==(void 0===e?"undefined":r(e))||!1 in e||-1===["http:","https:"].indexOf(e.protocol))return null;var t=e.href.substring(0,this.config.siteUrl.length),n=this._getPathname(e.href,t),i={original:e.href,protocol:e.protocol,origin:t,pathname:n,href:t+n};return this._isLinkOk(i)?i:null}},{key:"_getPathname",value:function(e,t){var n=t?e.substring(this.config.siteUrl.length):e;return n.startsWith("/")||(n="/"+n),this._shouldAddTrailingSlash(n)?n+"/":n}},{key:"_shouldAddTrailingSlash",value:function(e){return this.config.usesTrailingSlash&&!e.endsWith("/")&&!this.regex.fileExt.test(e)}},{key:"_isLinkOk",value:function(e){return null!==e&&"object"===(void 0===e?"undefined":r(e))&&(!this.prefetched.has(e.href)&&e.origin===this.config.siteUrl&&-1===e.href.indexOf("?")&&-1===e.href.indexOf("#")&&!this.regex.excludeUris.test(e.href)&&!this.regex.images.test(e.href))}}],[{key:"run",value:function(){"undefined"!=typeof RocketPreloadLinksConfig&&new n(new RocketBrowserCompatibilityChecker({capture:!0,passive:!0}),RocketPreloadLinksConfig).init()}}]),n}();t.run();
}());
//# sourceURL=rocket-preload-links-js-after
</script>
<script data-wp-strategy="defer" defer id="txs-site-js" src="https://2xsoftware.es/wp-content/themes/2xsoftware-premium/assets/js/site.js?ver=1785062242"></script>
<script>window.lazyLoadOptions={elements_selector:"img[data-lazy-src],.rocket-lazyload,iframe[data-lazy-src]",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:300,callback_loaded:function(element){if(element.tagName==="IFRAME"&&element.dataset.rocketLazyload=="fitvidscompatible"){if(element.classList.contains("lazyloaded")){if(typeof window.jQuery!="undefined"){if(jQuery.fn.fitVids){jQuery(element).parent().fitVids()}}}}}};window.addEventListener('LazyLoad::Initialized',function(e){var lazyLoadInstance=e.detail.instance;if(window.MutationObserver){var observer=new MutationObserver(function(mutations){var image_count=0;var iframe_count=0;var rocketlazy_count=0;mutations.forEach(function(mutation){for(i=0;i<mutation.addedNodes.length;i++){if(typeof mutation.addedNodes[i].getElementsByTagName!=='function'){continue}
if(typeof mutation.addedNodes[i].getElementsByClassName!=='function'){continue}
images=mutation.addedNodes[i].getElementsByTagName('img');is_image=mutation.addedNodes[i].tagName=="IMG";iframes=mutation.addedNodes[i].getElementsByTagName('iframe');is_iframe=mutation.addedNodes[i].tagName=="IFRAME";rocket_lazy=mutation.addedNodes[i].getElementsByClassName('rocket-lazyload');image_count+=images.length;iframe_count+=iframes.length;rocketlazy_count+=rocket_lazy.length;if(is_image){image_count+=1}
if(is_iframe){iframe_count+=1}}});if(image_count>0||iframe_count>0||rocketlazy_count>0){lazyLoadInstance.update()}});var b=document.getElementsByTagName("body")[0];var config={childList:!0,subtree:!0};observer.observe(b,config)}},!1)</script><script data-no-minify="1" async src="https://2xsoftware.es/wp-content/plugins/wp-rocket/assets/js/lazyload/16.1/lazyload.min.js"></script><script>function lazyLoadThumb(e){var t='<img loading="lazy" data-lazy-src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"><noscript><img src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"></noscript>',a='<div class="play"></div>';return t.replace("ID",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement("iframe"),t="ID?autoplay=1";t+=0===this.dataset.query.length?'':'&'+this.dataset.query;e.setAttribute("src",t.replace("ID",this.dataset.src)),e.setAttribute("frameborder","0"),e.setAttribute("allowfullscreen","1"),e.setAttribute("allow", "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"),this.parentNode.replaceChild(e,this)}document.addEventListener("DOMContentLoaded",function(){var e,t,a=document.getElementsByClassName("rll-youtube-player");for(t=0;t<a.length;t++)e=document.createElement("div"),e.setAttribute("data-id",a[t].dataset.id),e.setAttribute("data-query", a[t].dataset.query),e.setAttribute("data-src", a[t].dataset.src),e.innerHTML=lazyLoadThumb(a[t].dataset.id),e.onclick=lazyLoadYoutubeIframe,a[t].appendChild(e)});</script><script>"use strict";var wprRemoveCPCSS=function wprRemoveCPCSS(){var elem;document.querySelector('link[data-rocket-async="style"][rel="preload"]')?setTimeout(wprRemoveCPCSS,200):(elem=document.getElementById("rocket-critical-css"))&&"remove"in elem&&elem.remove()};window.addEventListener?window.addEventListener("load",wprRemoveCPCSS):window.attachEvent&&window.attachEvent("onload",wprRemoveCPCSS);</script><noscript><link data-minify="1" rel='stylesheet' id='txs-site-css' href='https://2xsoftware.es/wp-content/cache/min/1/wp-content/themes/2xsoftware-premium/assets/css/site-fb10ab7d497dfafc70bee44493582107.css' media='all' /><link data-minify="1" rel='stylesheet' id='txs-visual-v2-css' href='https://2xsoftware.es/wp-content/cache/min/1/wp-content/themes/2xsoftware-premium/assets/css/visual-v2-b006310eaa8e05fb3a7b80a60127a23c.css' media='all' /></noscript></body>
</html>
<!-- This website is like a Rocket, isn't it? Performance optimized by WP Rocket. Learn more: https://wp-rocket.me - Debug: cached@1786862310 --> 
