INFORMATION & CODE

Likes Counter Display

What the Code Does

This code creates an interactive, styled "Likes Counter" button that persists user interaction across browser sessions. Visually, the HTML and CSS combine to render a rounded, 3D-effect button centered on the page. The button features a blue header section with the word "LIKES," a small downward-pointing triangle acting as a visual pointer, and a digital-style counter display showing the current number of accumulated likes. When clicked, the CSS creates a tactile pressing animation by shifting the button downward and reducing its drop shadow.

How the Code Works

The functionality of the component is entirely driven by JavaScript in conjunction with the browser's localStorage. When the page loads, the script checks if a "clicks" value already exists in the browser's local storage; if it does, it parses and displays that number, and if not, it defaults the counter to zero. Whenever the user clicks anywhere on the .likes-wrapper container, the clickCounter() function is triggered. This function retrieves the current count, increments it by one, saves the updated value back to localStorage to ensure the count is remembered even if the page is refreshed or closed, and dynamically updates the HTML to display the new total.

How to Use the Code

To use this code, you need to set up a small web project directory containing three separate files: an HTML file, a CSS file, and a JavaScript file. Paste the respective code snippets into index.html, styles.css, and scripts.js while ensuring they are saved in the same folder so the links and script tags successfully connect. Once set up, simply open the HTML file in any modern web browser to view the button, click it to increase the like count, and refresh the page to test the persistence feature.