Making Bubbles


by Jeremy Caudle
code

I played around with randomizing the position of bubbles made from a string taken from a text input. I'll do more with this idea at a later time, but I'm happy that I have the first few steps out of the way.

Enter some text below

View the code:

HTML and JS 
<section class="code-block">
            <div>
                <p>Enter some text below</p>
                <input id="word-input" type="text"><button id="bubble-button">Bubble</button>
            </div>
        </section>
        <script>
            /* Variables */
            const bodyElement = document.getElementsByTagName('body');
            const wordInput = document.getElementById('word-input');
            const bubbleBtn = document.getElementById('bubble-button');
            let words = [];
            
            /* Functions */

            function randomNum(minnum, maxnum) {
                min = Math.ceil(minnum);
                max = Math.floor(maxnum);
                return Math.floor(Math.random() * (maxnum - minnum) + minnum);
            }


            function bubbleMaker(array) {
                array.forEach( letter => {
                    let bubble = document.createElement('div');
                    bubble.setAttribute('class','bubble');
                    let posY = randomNum(1, 100);
                    let posX = randomNum(1, 100);
                    bubble.setAttribute('style', `top: ${posY}vh; left: ${posX}vw;`);
                    bubble.innerText = letter;
                    document.body.appendChild(bubble);
                }
                )};


            /* Events */
            bubbleBtn.addEventListener('click', () => {
                words = wordInput.value.split('');
                console.log(words);
                wordInput.value = '';
                bubbleMaker(words);
            });




        </script>
CSS 
section.code-block {
                min-height: 30vh;
                max-width: 20em;
                margin: 2rem auto;
                font-family: Helvetica, Arial, sans-serif;
            }

            .code-block div {
                margin: 0;
                padding: 1rem;
                background-color: rgba(255,255,255,.2);
            }

            .code-block p {
                color: rgb(112, 112, 112);
                margin: 0 0 1rem 0;
                text-align: center;
                text-transform: uppercase;
            }

            .code-block input {
                margin: 0 .5rem 0 0;
                border: solid 1px #dedede;
                padding: .5rem;
                border-radius: .25rem;
            }

            .code-block button {
                margin: 0;
                padding: .5rem;
                border-radius: .25rem;
                border: none;
                text-transform: uppercase;
            }

            .bubble {
                position: absolute;
                width: 2rem;
                height: 2rem;
                background-color: #3e76b63a;
                border: solid 1px #ababab18;
                color: #3e76b63a;
                font-weight: 900;
                border-radius: 50%;
                box-shadow: 10px 10px 8px 4px rgba(0, 0, 0, .01);
                padding: .25rem;
                margin: 0;
                text-align: center;
            }



            @supports (display: grid) {
                section.code-block {
                    display: grid;
                    place-items: center;
                }
            }

Tags