Set Random Text & Background Color on Page Load

In this tutorial, you will learn how to select random text and random background color from a specific color palette on every page load with Vue.js. The tutorial also includes generating a random hex color. Watch the video below for a detailed tutorial.

HTML

<body>
    <div id="app">
        <h1>Test</h1>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                bgColors: ['#999B84', '#F4EEEC', '#EFD9D1', '#DDB7AB'],
                bgColor: '',
                textColors: ['#302A27', '#4E4B44', '#A0816C', '#000000'],
                textColor: '',
            },
            mounted() {
                this.setColors();
            },
            methods: {
                setColors: function(e) {
                    this.bgColor = this.bgColors[Math.floor(Math.random() * this.bgColors.length)]
                    this.textColor = this.textColors[Math.floor(Math.random() * this.textColors.length)]

                    this.randomColor = '#' + (Math.random().toString(16)+'00000').slice(2,8);

                    document.body.style.background = this.bgColor;
                    document.body.style.color = this.textColor;
                }
            }
        })
    </script>
</body>

CSS

body {
    font-family: 'Roboto', sans-serif;
    font-size: 3em;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}