Forem: JanselLopez

I've just completed a front-end coding challenge from @frontendmentor! 🎉

JanselLopez — Sun, 15 Sep 2024 22:06:24 +0000

You can see my solution here: https://www.frontendmentor.io/solutions/launch-countdown-timer-animated-PfEg_W12zo

Any suggestions on how I can improve are welcome!

Daily Hamster Kombat

JanselLopez — Sun, 16 Jun 2024 18:23:52 +0000

I made this open source project based on the Hamster Kombat telegram chat group to stay on top of daily cipher and combo.

Website

https://jansellopez.github.io/daily-hamster-kombat/

Open Data

You can add or consult data here:
https://docs.google.com/spreadsheets/d/1Dx10k2QWUg4dF431J5PUxtPGPs8r7QhCbbIcuK71uic/edit?usp=sharing

Contact

Linkedin: Jansel López Bouza
Github: JanselLopez
Telegram: @JanselA
Whatsapp: +5356207780
Phone: +5356207780
Email: 21jansel@gmail.com

Contribute

https://github.com/JanselLopez/daily-hamster-kombat

Using Material's colors in javascript

JanselLopez — Sat, 13 Jan 2024 20:20:19 +0000

Install

npm i material-colors-utils

Usage

Get palette

import { blue } from "material-colors-utils";
console.log({blue})
//{
//    blue:{
//      50: "#E3F2FD",
//      100: "#BBDEFB",
//      200: "#90CAF9",
//      300: "#64B5F6",
//      400: "#42A5F5",
//      500: "#2196F3",
//      600: "#1E88E5",
//      700: "#1976D2",
//      800: "#1565C0",
//      900: "#0D47A1",
//      A100: "#82B1FF",
//      A200: "#448AFF",
//      A400: "#2979FF",
//      A700: "#2962FF"
//    }
//}

Get color

Example

import { blue } from "material-colors-utils";
console.log(blue[500])//#2196F3

Doc

material-colors-utils

Get random color by a name or any string

JanselLopez — Sat, 13 Jan 2024 20:16:11 +0000

npm i material-colors-utils

Get random palette by string

import { getRandomPaletteByString } from "material-colors-utils";
console.log({palette:getRandomPaletteByString("janselALB")});
//{
//    palette:{
//      50: "#E3F2FD",
//      100: "#BBDEFB",
//      200: "#90CAF9",
//      300: "#64B5F6",
//      400: "#42A5F5",
//      500: "#2196F3",
//      600: "#1E88E5",
//      700: "#1976D2",
//      800: "#1565C0",
//      900: "#0D47A1",
//      A100: "#82B1FF",
//      A200: "#448AFF",
//      A400: "#2979FF",
//      A700: "#2962FF"
//    }
//}

Get random color by string

import { getRandomColorByString } from "material-colors-utils";
//Param: Color variant
getRandomColorByString("janselALB",300)//Ex: #64B5F6
//Default is 500
getRandomColorByString("janselALB")//Ex: #2196F3

Support

material-colors-utils

Totoro

JanselLopez — Mon, 19 Jun 2023 04:31:38 +0000

Whatsapp Clone

JanselLopez — Mon, 29 May 2023 00:55:01 +0000

Easy Music Loading

JanselLopez — Sun, 19 Mar 2023 01:44:38 +0000

Fun With Flags

JanselLopez — Thu, 26 Jan 2023 01:11:55 +0000

Here's a link to my solution: https://www.frontendmentor.io/solutions/rest-countries-api-with-color-theme-switcher-b9kxBNvj22Any feedback and suggestions on how I can improve are very welcome!

Scroll Animations

JanselLopez — Mon, 16 Jan 2023 21:20:10 +0000