DEV Community: Mauricio Yair

Easy Mode Dark

Mauricio Yair — Fri, 04 Sep 2020 18:15:24 +0000

I would like share a esay dark mode with CSS and JavaScript

I continuos learn JS and CSS this a example using variables in CSS, and use Selectors, Events, Class in JS

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>Dark Mode</h1>
    <button id="app">Change the page color</button>
</body>
</html>

 :root {
    --black: #000;
    --white: #fff;
}

*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1 {
    font-size: 50px;
}

#app {
    border: none;
    padding: 10px 20px;
    background-color: #ececec;
    color: var(--black);
    text-transform: uppercase;
}

.light {
    background-color: var(--white);
    color: var(--black);
}

.dark {
    background-color: var(--black);
    color: var(--white);
}

let $btn = document.querySelector("#app"); // get button tag
let $html = document.documentElement; // get html tag and the content
let $body = document.body; // get body tag and the content
let darkMode = getComputedStyle($html).getPropertyValue("--black"); // Here I get the value it has: CSS root 
let ligthMode = getComputedStyle($html).getPropertyValue("--white"); //Get the value that has: CSS root but in this case the color white

$btn.addEventListener("click", (e) => { // Added a listener to the button

    if (e.type === "click") { // Evaluated the type of event that ran
        $body.classList.toggle("dark"); // Add a class 
    }
    $body.classList.toggle("light"); // Remove a class
});

I hope you like it, as a practice for handling the Document Object Model.

Reverse String using Reverse();

Mauricio Yair — Fri, 04 Sep 2020 18:14:53 +0000

Para revertir un string y usar el metodo Reverse es cierto que en principio no podriamos hacer algo como esto:

str = "Hola Mundo";
str.reverse();

En esta linea de codigo nos mandaria un error ya que el metodo reverse solo se puede usar en arreglos.

Por eso para hacer el uso de reverse tenemos que convertir primeramente la cadena de texto en un array

str = "Hola Mundo";
return str.slipt(" ");

Con esta instruccion logramos convertir nuestra cadena de texto en un arreglo es importante conocer que parametros recibe el metodo slipt(separador, limite);

El resultado seria el siguiente:

> [ 'Hola', 'Mundo' ]

Ahora podemos usar el Metodo reverse para revertir el arreglo

return str.slipt(" ").reverse();
> [ 'Mundo', 'Hola' ]

Ahora para que no quede en un arreglo podemos usar el metodo join()

return str.slipt(" ").reverse().join(" ");
> Mundo Hola

God Mode in browsers

Mauricio Yair — Fri, 24 Jul 2020 18:41:37 +0000

Just write on chrome browser devtools

document.designMode = "on"

And you can edit the page

by default god mode is disabled