[go: up one dir, main page]
Scribd
Upload
2 views4 pages

Web Ass3

Uploaded by

claytmpalonp
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views4 pages

Web Ass3

Uploaded by

claytmpalonp
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Web Technologies

Assignment n3: Counter with Increment and Decrement Buttons


HTML Key Points
Document Structure:
 The <!DOCTYPE html> tag declares the HTML5 document type.
 The <html>, <head>, and <body> tags organize the content.
Meta Tags:
 <meta charset="UTF-8"> ensures proper character encoding.
 <meta name="viewport" content="width=device-width, initial-scale=1.0"> makes the
page responsive.
Dynamic Content:
 A <div> with id="counter" displays the counter value.
 Two <button> elements trigger functions to increment and decrement the counter.

CSS Key Points


Page Styling:
 display: flex, justify-content: center, and align-items: center center the content vertically
and horizontally.
 A light gray background color (#f5f5f5) provides a clean, professional look.
Counter Styling:
 font-size: 2em ensures the counter value is large and easy to read.
 margin: 20px 0 adds spacing around the counter.
Button Styling:
 Buttons are styled with font-size: 1em, padding: 10px, and a blue background (#2d89e5)
for visibility.
 Rounded corners (border-radius: 5px) give the buttons a smooth appearance.

Page 1 of 4
 cursor: pointer changes the cursor to indicate button interactivity.
 hover effect changes the background color to a darker blue (#1c5cbf) when the mouse is
over the button.

JavaScript Key Points


Counter Variable:
 let count = 0 initializes the counter value.
Increment Function:
 The increment() function increases the counter by 1.
 The updated value is displayed using document.getElementById('counter').innerText.
Decrement Function:

Page 2 of 4
 The decrement() function decreases the counter by 1.
 Similar to the increment function, it updates the displayed value dynamically.

Flow of the Program


Initial Load:
 The HTML structure and CSS styles are rendered by the browser.
 The counter value is initialized to 0 and displayed in the #counter div.
User Interaction:
 Clicking the Increment button triggers the increment() function, which increases the
counter value by 1.
 Updates the text inside the #counter div.
 Clicking the Decrement button triggers the decrement() function, which:
 Decreases the counter value by 1.
 Updates the displayed value similarly.
Real-Time Updates:
The page updates dynamically with each button click, reflecting the current counter value
immediately.

Page 3 of 4
Conclusion
This assignment successfully demonstrates how to build a simple and interactive counter
application using HTML, CSS, and JavaScript.
 HTML provides the structure for displaying the counter and buttons.
 CSS enhances the visual appeal with proper alignment, colors, and responsiveness.
 JavaScript handles the logic for dynamically updating the counter value based on user
interactions.

Page 4 of 4

You might also like