{"size": 1022, "ext": "js", "max_stars_repo_path": "src/components/Elements/index.js", "max_stars_repo_name": "AbhishekNairOfficial/dev-tools", "max_stars_repo_stars_event_min_datetime": "2019-08-04T05:07:20.000Z", "max_stars_repo_stars_event_max_datetime": "2019-08-04T05:07:20.000Z", "max_issues_repo_path": "src/components/Elements/index.js", "max_issues_repo_name": "AbhishekNairOfficial/dev-tools", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/Elements/index.js", "max_forks_repo_name": "AbhishekNairOfficial/dev-tools", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 28.3888888889, "max_line_length": 80, "alphanum_fraction": 0.5391389432}
import React from 'react';
import './Elements.css';

const Elements = () => {
    return (
        <div className='element-container'>
            <h2>Color me Red</h2>
            <br />
            <h3>Random Paragraph</h3>
            <p className='paragraph'>{randomParagraph()}</p>
            <br />
            <h2>Scroll me into View!!!</h2>
            <br />
            <h2 className='clickableTitle' onClick={e => changeColorOnClick(e)}>
                Click me to see what Happens!
            </h2>
            <br />
            <h2 className='hoverAble'>Quick! Hover over me :)</h2>
            <br />
            <h2>Hide me with a shortCut</h2>
        </div>
    );
};

export default Elements;

const randomParagraph = () => {
    const text = 'Lorem ipsum dolor xsit amet consectetur adipiscing elit.';
    return text.repeat(50);
};

const changeColorOnClick = e => {
    const randomColor = Math.floor(Math.random() * 16777215).toString(16);
    e.currentTarget.style.color = '#' + randomColor;
};
