Skip to content

Instantly share code, notes, and snippets.

View tanzilch's full-sized avatar

Tanzil Ur Rehman tanzilch

View GitHub Profile

Variation A Explanation: In this variation, i simply include a new div with our message beneath the ATC div using JavaScript and some basic styling

Variation B Explanation: In this variation, I added the a new div, added that gif in it and made it appear on hover counts, keeping the counts in a variable.

Variation C Explanation: In this variation, i used fetch to request data from the algolia API. and appended them in a grid view, just below the ATC in a properly formatted way

Variation A

(function() { const parentDiv = document.querySelector('.mt-6.ox\:flex'); if (!parentDiv) return; const message = document.createElement('div'); message.textContent = "OXO products are used in over 10 million kitchens. You’re in good company!"; message.className = "oxo-confidence-message"; parentDiv.insertAdjacentElement('afterend', message); const style = document.createElement('style');