Day 4, Session 2 — Creating a Simple Counter App (Frontend Project)

body {
    background: linear-gradient(to right, #8702a1, #7b7dfe);
    font-family: Arial, sans-serif;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.start-screen, .counter-screen {
    display: none;
    text-align: center;
    background-color: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.start-screen.active, .counter-screen.active {
    display: block;
}

button {
    padding: 10px 20px;
    margin: 10px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.start-btn {
    background-color: #ff9800;
    color: white;
}

.counter-btns button {
    background-color: #2196f3;
    color: white;
}

.counter-btns button#increase {
    background-color: #4caf50;
}

.counter-btns button#decrease {
    background-color: #f44336;
}

h1 {
    font-size: 48px;
    margin-top: 20px;
}

Explanation:

• We give the body a colorful gradient background
• .container centers everything on the screen.
• .start-screen and .counter-screen are hidden by default (display: none).
• When .active is added, they become visible (display: block).
• Buttons are styled with colors, padding, rounded corners, and hover effects.

Step 3: Write JavaScript:

let count = 0;  // starting counter value
const element = document.getElementById("result");  // where the number shows
const startScreen = document.getElementById("startScreen");
const counterScreen = document.getElementById("counterScreen");

function startApp() {
    startScreen.classList.remove('active');  // hide start screen
    counterScreen.classList.add('active');   // show counter screen
}

function increase() {
    count += 1;                      // add 1
    element.innerText = count;       // update display
}

function decrease() {
    count -= 1;                      // subtract 1
    element.innerText = count;       // update display
}

function reset() {
    count = 0;                       // reset to 0
    element.innerText = count;       // update display
}

Explanation:

• We set up a count variable starting at 0.
• We grab HTML elements (startScreen, counterScreen, result) using getElementById.
• startApp() switches screens by removing/adding the .active class.
• The three counter functions (increase, decrease, reset) change the count and update the text on screen.

Final check:

• Start the page → shows Let’s Start screen.
• Click the button → switches to counter app.
• Use buttons → counter updates live!

Tips I Learned

• You don’t need to reload the page to switch screens — just hide/show with CSS + JS.
• Using classes (.active) is cleaner than directly changing style.display.
• Always connect your buttons properly using onclick.

Challenges I Faced:

1.How to hide and show sections?

At first, I thought about using display: none directly in JavaScript. But that felt messy. I realized it’s better to use CSS classes (.active) to control visibility. That way, I just toggle the class in JS, and CSS handles the display.

2.How to connect the start button to the counter screen?

I needed to write a function (startApp()) that:

• Removes the .active class from the start screen
• Adds the .active class to the counter screen

At first, I forgot to connect the button with the JS function using onclick, so the button did nothing. Once I fixed that, it worked!

3.Managing state between screens

The counter’s initial state was easy, but I had to make sure the counter only showed up after starting. So I wrapped the counter display in its own container and controlled its visibility properly.

Here’s the approach I took:

1.In HTML, I created two divs: one for the start screen, one for the counter app.
2.In CSS, I used .active class to control which one is visible.
3.In JavaScript, I wrote a startApp() function to switch the screens when the button is clicked.

Keep Learn!! Happy Coding!!