The Code

                        
                            // get users input
                            function getNotes() {
                                let bars = document.getElementById('bars').value;
                                let startNote = document.getElementById('startNote').value;
                                let stopNote = document.getElementById('stopNote').value;

                                bars = parseInt(bars);
                                startNote = parseInt(startNote);
                                stopNote = parseInt(stopNote);

                                if (Number.isInteger(startNote) && Number.isInteger(stopNote) && Number.isInteger(bars) && startNote < stopNote || (startNote == 0) && (stopNote == 0) && (bars == 0)) {
                                    let generatedNotes = generateNotes(startNote, stopNote, bars);

                                    displayNotes(generatedNotes);

                                    Swal.fire({
                                        showConfirmButton: false,
                                        backdrop: false,
                                        title: `BoomBap!`,
                                        text: `It's a SMASH hit!`, // <---- replace this text with that variable
                                        imageUrl: '/img/bbSuccess.svg',
                                        imageWidth: 400,
                                        imageHeight: 200,
                                        imageAlt: 'Custom image',
                                        timerProgressBar: true,
                                        timer: 1250,
                                    });
                                } else {
                                    Swal.fire({
                                        showConfirmButton: false,
                                        icon: 'error',
                                        title: 'Yuck, that hurt my ears',
                                        backdrop: false,
                                        imageUrl: '/img/bbReaction.svg',
                                        imageWidth: 400,
                                        imageHeight: 200,
                                        imageAlt: 'Custom image',
                                        timerProgressBar: true,
                                        timer: 1250,
                                    });
                                }
                            }

                            // generate a list of all notes
                            function generateNotes(start, stop, maximum) {
                                let notes = [];

                                for (let i = 1; i <= maximum; i++) {
                                    if (i % start == 0 && i % stop == 0) {
                                        notes.push('
BoomBap
');
                                    } else if (i % start == 0) {
                                        notes.push('
Boom
');
                                    } else if (i % stop == 0) {
                                        notes.push('
Bap
');
                                    } else {
                                        notes.push(i);
                                    }
                                }
                                return notes;
                            }

                            // display the notes on the page
                            function displayNotes(notes) {
                                let html = '';

                                for (let i = 0; i < notes.length; i++) {
                                    let currentNote = notes[i];

                                    html += `${currentNote}`;
                                }

                                let tbody = document.getElementById('results');
                                tbody.innerHTML = html;
                            }

                            // with each number, put it on the page

                            // given 2 values display the numbers 1-100

                            // when a number is divisible by the first value, display "Boom"

                            // When a number is divisible by the second value, display "Bap"

                            // when a number is divisible by both values, display "BoomBap...Drop!"

The code is structured in 3 functions:

The getNotes() function gets called when the user interacts with the web page. It retrieves the user's input from an HTML input element and then converts to an integer using parseInt().

The second function generateNotes(start, stop, maximum) has a value passed in as an argument that initializes an array called notes, loops through to iterate 1 to a maximum number entered by the user input and follows a series of checks whether divisible by 3 or 5 in which case adds 'Boom, Bap or BoomBap'.

Some whom may be reading this code may say this is a FizzBuzz coding challenge, and you would be correct. I have put a little spin on the game to change things up.

The third function, displayNotes(notes) takes an array of notes as an argument and displays them on the web page by initializing an empty string called html and then loops through notes for each note and adds to the HTML table row.

AND...finally, Sweet Alerts is a modal pop-up to give the user some context and to give the page a little flare on interaction.