Skip to content

Latest commit

 

History

History
161 lines (120 loc) · 4.98 KB

README-en.md

File metadata and controls

161 lines (120 loc) · 4.98 KB

Color Efect

demo

I decided to create this repository for help you to understand some concepts in JavaScript and CSS, that in my opinion are very importent and useful.

English is not my native language, sorry for grammatical errors. But you can help-me?!

I have a idea of created this efect color in a web site called coolors. This site have many color palets, that I use in my projects, I recommend for you.

Let's Started

Create a html file, a css file and javascript file, does not fotget import the JavaScript and CSS files inside of the html. In html we will create a teg div with ID coolors, where we will inject the colors

<body>
  <div id="coolors"></div>
</body>

Now in file CSS, we will remove some behavior of browser, with margin and padding. At the html, we will center everything and put a background color whitesmoke.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  background-color: whitesmoke;
}

We need stylize the teg div thet us created. For this select teg #colors and we define a width and height, a padding and a background. Now we will stylize the divs is where each color is, for this we will get each one, and well be injected fell JavaScript and defined a standard with height/width and we change the cursor. Notice thet if you do in your page, it not will change. Becouse we don't inject the divs with colors.

#coolors {
  width: 400px;
  height: 200px;
  padding: 5px;
  background-color: rgb(41, 41, 41);
  display: flex;
}

#coolors div {
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: 0.2s;
}

We go create a static variable where stay all colors. In event you want to change the colors you can make it. The link of the color stay here.

const allColors = ["#606c38", "#283618", "#fefae0", "#dda15e", "#bc6c25"];

We need get a div in html, for this I well use querySelector() a internal fuction in JS, and assgn to a variable called $coolors. One good pratice is, when you get a teg in HTML you use $ ahead of variable, but this help a read your code.

const $coolors = document.querySelector("#coolors");

The most important in my opinion, is thet added more colors in array, your code won't break. Now for each loop in colors.

allColors.forEach(() => {
  $coolors.innerHTML += "<div></div>";
});

Unfortunately if you will not see noting. But if oppen the devTools in you browser favorite, "I hope it will be Firefox". So you see five divs in you html. interesting isn't it?!

Now we well colorize all divs "that's when your mind explodes", How I can get all div in html without using querySelector()?! Is easy, you can use a querySelectoraAll() this function saved all divs in a array. Now we will use forEach() for inland in a array.

// Get all divs inside dev#coolors and return a array with each.
const $allDivColors = document.querySelectorAll("#coolors div");

$allDivColors.forEach((element, index) => {
  // Now we will set color in any divs
  element.style.backgroundColor = `${allColors[index]}`;

  // Here I added event mouse move
  element.addEventListener("mousemove", () => {
    element.style.width = "200%";
  });

  // Here added event mouse out
  element.addEventListener("mouseout", () => {
    element.style.width = "100%";
  });
});

if you save and see in your browser, it's work 100% or 99%? I don't know. But now going refectory all code, all developer love it.

First we going to create two functions, one for create rendering screen and another to colorize, for example:

(() => {
  function render() {}

  function color() {}
})();

What's it () => {} in code? Is a function auto executed in javascirpt. Now we going put all code inside functions render() and color.

(() => {
  const allColors = ["#606c38", "#283618", "#fefae0", "#dda15e", "#bc6c25"];

  function render() {
    const $coolors = document.querySelector("#coolors");

    allColors.forEach(() => {
      $coolors.innerHTML += "<div></div>";
    });
  }

  function color() {
    const $allDivColors = document.querySelectorAll("#coolors div");

    $allDivColors.forEach((element, index) => {
      element.style.backgroundColor = `${allColors[index]}`;
      element.addEventListener("mousemove", () => {
        element.style.width = "200%";
      });
      element.addEventListener("mouseout", () => {
        element.style.width = "100%";
      });
    });
  }

  // Called functions
  render();
  color();
})();

Now you can to get more, it's a super power rigth? It's cool! But I finish here.

How you can help me?

  • If you find erros in English, and you can help me? My English is not so bad.