HTML

Stopwatch Using HTML, CSS, and JavaScript

by
Stopwatch Using HTML, CSS, and JavaScript

Tiempo de lectura: < 1 minuto Reading time: < 1 minute To create a stopwatch in HTML, CSS, and JavaScript, you can follow the code example below: <!DOCTYPE html> <html> <head> <title>Stopwatch</title> <style> .container { text-align: center; margin-top: 50px; } .time { font-size: 48px; } </style> </head> <body> <div class=”container”> <h1>Stopwatch for DevCodeLight</h1> <div class=”time”>00:00:00</div> <button onclick=”start()”>Start</button> <button onclick=”stop()”>Stop</button> </div> <script> … Read more

Tutorial on Creating a Web Loader using CSS and JavaScript

by
Tutorial on Creating a Web Loader using CSS and JavaScript

Tiempo de lectura: 2 minutos Reading time: 2 minutes Web loaders, also known as spinners, are visual elements used to indicate that a web page is loading content or processing an action. In this tutorial, we will learn how to create a custom web loader using CSS and JavaScript. The result will be an animated and visually appealing loader that … Read more

Detectar cuándo se ha abierto una página web usando Javascript

by
Detectar cuándo se ha abierto una página web usando Javascript

Tiempo de lectura: < 1 minuto Reading time: < 1 minute Hello, today we will learn how to detect when a web page has been opened using JavaScript, for example, to refresh its content. To detect when the web page has been opened, we use the following function: $(window).focus(function () { console.log("focus web opened"); }); To detect when it is closed, ... Read more

Ejecutar test Selenium en un contenedor Docker Compose

by
Ejecutar test Selenium en un contenedor Docker Compose

Tiempo de lectura: < 1 minuto Reading Time: < 1 minute Today I’m going to show you how we can run Selenium tests in a Docker container. First, let’s create a Docker Compose container with Selenium (using this image https://github.com/nixel2007/docker-selenium-side-runner) version: '3' services: chromedriver: image: robcherry/docker-chromedriver privileged: true restart: always environment: - CHROMEDRIVER_WHITELISTED_IPS='' # ports: # - '4444:4444' selenium-side-runner: image: nixel2007/docker-selenium-side-runner ... Read more

Create a Horizontal Navigation Menu Using CSS

by
Create a Horizontal Navigation Menu Using CSS

Tiempo de lectura: 3 minutos Reading Time: 2 minutes Hello, today I’m going to show you how to create a horizontal navigation menu using CSS: HTML: First, create the basic HTML structure of the navigation menu: <nav> <ul> <li><a href=”#”>Home</a></li> <li><a href=”#”>Services</a></li> <li><a href=”#”>About</a></li> <li><a href=”#”>Contact</a></li> </ul> </nav> CSS: Now let’s apply CSS styles to make the menu horizontal: nav … Read more

Create a Password Reminder Using PHP

by
Create a Password Reminder Using PHP

Tiempo de lectura: 7 minutos } // Token is valid, update the user’s password $user_id = mysqli_fetch_assoc($result)[‘id’]; if ($password != $confirm_password) { // Passwords don’t match, display error message } $hashed_password = password_hash($password, PASSWORD_DEFAULT); $sql = “UPDATE users SET password = ‘$hashed_password’, token = NULL WHERE id = $user_id”; mysqli_query($connection, $sql); echo “Your password has been successfully updated!”; This tutorial … Read more

PWA vs Flutter vs React Native vs Ionic: Which Technology to Use for Mobile Development?

by
PWA vs Flutter vs React Native vs Ionic: Which Technology to Use for Mobile Development?

Tiempo de lectura: 3 minutos Reading time: 4 minutes PWA (Progressive Web Apps), Flutter, React Native, and Ionic are mobile development technologies that have different advantages and disadvantages in terms of performance, user experience, platform support, learning curve, maintenance and scalability, and cost. PWA It is a technology that allows creating web applications with features similar to native applications, using … Read more

How to create a Progressive Web App (PWA) or progressive web

by
How to create a Progressive Web App (PWA) or progressive web

Tiempo de lectura: 2 minutos Reading time: 2 minutes To create a Progressive Web App (PWA) with Service Worker, follow these steps: Create a manifest.json file: This file defines how the application will look and behave on different devices. It includes information such as the application name, application icon, color theme, screen orientation, and more. { “name”: “My PWA App”, … Read more

HTML Tables + JavaScript

by
HTML Tables + JavaScript

Tiempo de lectura: 2 minutos Reading time: 2 minutes To create a simple table from an array of objects, follow the steps below: First, create a file with the .html extension, where you’ll create a div with an associated ID to display the table with the data of the elements. The ID for the table within the HTML will be … Read more

LISTAS HTML + JavaScript

by
LISTAS HTML + JavaScript

Tiempo de lectura: 5 minutos Reading time: 2 minutes To create a simple list from an array of objects, you need to follow the steps below: First, create a file with the .html extension, where we’ll create a div with an associated ID that will display the list of elements. The ID for the list, in this case, will be … Read more