# Color-flipper

<!-- TABLE OF CONTENTS -->
<details open="open">
  <summary>Table of Contents</summary>
  <ol>
    <li>
      <a href="#about-the-project">About The Project</a>
    <li>
      <a href="#concepts-used">Concepts used</a>
    </li>
    <li>
      <a href="#best-way-to-learn">Best way to Learn</a>
    </li>
  </ol>
</details>

<!-- ABOUT THE PROJECT -->

## About The Project

[![Color-flipper Demo](https://user-images.githubusercontent.com/45481137/127779674-ae2f6947-4626-4b41-8ae3-76088def2e46.png)](https://color-flipper-js-app.netlify.app/)

This Project is a beginner JavaScript project. The user gets two option to either randomize the background color with both numbers and aplhabets or else just with numbers.

When either of the button is clicked , then the JavaScript function does it's work , generates a random color and then the background color is replaced by this generated color and the color code is shown on the page as well.

### Concepts used

This section lists the JavaScript concepts that were used while making this project.

- [getElementById](https://www.w3schools.com/jsref/met_document_getelementbyid.asp)
- [querySelector](https://www.w3schools.com/jsref/met_document_queryselector.asp)
- [Math function](https://www.w3schools.com/jsref/jsref_obj_math.asp)
- [addEventListener](https://www.w3schools.com/jsref/met_element_addeventlistener.asp)

<!-- USAGE EXAMPLES -->

## Best Way to Learn

The best way to work on this project is :

- Get a good grasp of the idea and what we are trying to create.
- Read about the concepts used.
- With both the above points done , try to make the project on your own.
- Give it some try and take help from the code in this repository.
