HTML

Learn How to Create a Custom To-Do List with Bootstrap and Local Storage in This Tutorial

by
Learn How to Create a Custom To-Do List with Bootstrap and Local Storage in This Tutorial

Tiempo de lectura: 2 minutosReading time: 2 minutes Good morning and happy Monday!!! Let’s go for another tutorial, this time it’s a simple to-do list application. Here’s the code for one way to do it: <!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″> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM” crossorigin=”anonymous”> <script src=”to-do-list.js”></script> <title>To-do list for … Read more

Formulario sencillo en HTML, CSS y JavaScript

by
Formulario sencillo en HTML, CSS y JavaScript

Tiempo de lectura: 2 minutosalert(‘Nombre: ‘ + name + ‘\nEmail: ‘ + email + ‘\nMensaje: ‘ + message); } // Agregar evento de envío al formulario document.getElementById(‘form’).addEventListener(‘submit’, enviarDatos); </script> </body> </html> El código muestra un formulario simple con tres campos: nombre, correo electrónico y mensaje. Se utiliza HTML y CSS para estructurar y estilizar el formulario, mientras que JavaScript … Read more

Slider Button in HTML, CSS, and JavaScript

by
Slider Button in HTML, CSS, and JavaScript

Tiempo de lectura: 2 minutosReading Time: 2 minutes Photo by Pixabay Here is an example of how to create a simple sliding button or slider using HTML, CSS, and JavaScript. This code demonstrates how to create a sliding button or slider using HTML, CSS, and JavaScript. The goal is to change the state of the button when clicked. <!DOCTYPE … Read more

Changing Button Background Color on Click in HTML, CSS, and JavaScript

by
Changing Button Background Color on Click in HTML, CSS, and JavaScript

Tiempo de lectura: 2 minutosReading Time: 2 minutes Photo by Pixabay In the example, I’m showing a button with a blue background color. When the button is clicked, the background color changes to green. The HTML code to display the button is as follows. <!DOCTYPE html> <html> <head> </head> <body> <button class=”custom-button” onclick=”changeColor()”>Click Me</button> </body> </html> I add style … Read more

Stopwatch Using HTML, CSS, and JavaScript

by
Stopwatch Using HTML, CSS, and JavaScript

Tiempo de lectura: < 1 minutoReading 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 minutosReading 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 minutoReading 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 minutoReading 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 minutosReading 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