Developing the pomofocus button feature

What is the best way to implement div classes that change on click? https://i.sstatic.net/TS3wh.gif

I've attempted to add a border line, but it doesn't seem to work for me. border-width: 0 0 10px 0; The code above does not adjust the size of the div. Is it necessary to create a new div or transition the "button" div?

Edit:
Vue template code: 

<button role="link" @click="handleClick" class="timerButton" :class="active ? ' active' : ' non-active'" >START</button>

CSS:
.active { border-width: 0 0 10px 0; }

javascriptcssvue.js

Answer №1

this particular css snippet greatly simplifies his task here's the fix:

.active {
    transform: translateY(6px);
}

.inactive {
    box-shadow: rgb(235, 235, 235) 0px 6px 0px;
}

Answer №2

To make the transition of the div smoother, I suggest using .classList.toggle('start') and then applying padding-bottom and border with the same height...

.active {
  padding-bottom: 20px;
  border-bottom: 20px solid gray;
}

If you've already figured out how to manipulate the content, please share your code so we can provide more effective assistance. I hope this solution works well for you!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a three-dimensional spline that originates from the scene using THREE.js

I'm struggling with headaches while attempting to extrude a spline to the scene's origin. Here is my current approach: First, I create a spline using the following code snippet: let centerX = 0 let centerY = 0 let radius = 200 let coils = 50 le ...

javascriptthree.js3d

divs aligned at the same vertical position

Struggling for days to align buttons vertically, I have tried various approaches without success. I attempted using position: absolute; bottom: 0; on the parent with position: relative; set. @import url('https://fonts.googleapis.com/css?family=Mon ...

htmlcss

The challenge of incorporating multiple stylesheets into an express/node/ejs application: encountering the error "Undefined style."

I am working on a project using express, node, and ejs and I want to be able to use different stylesheets for different views. In order to render a specific view with its corresponding style, I have included the following in my app.js file: app.get('/ ...

cssnode.jsexpressejs

Utilizing HTML to call a function and fetching data from AngularJS

I've been struggling to retrieve the value after calling a function in my HTML file. Despite trying various methods after conducting research, I have not achieved success yet. Take a look at the code below: HTML: <div class="form-group"> & ...

javascripthtmlangularjs

Tips for adjusting the up and down controls and spins of a date input after modifying its height

After adjusting the height of my inputs (date type) to 40px, I noticed that the up and down controls are no longer aligned with the text inside the field. I am looking for a solution to either adjust the height of the spins or remove them if necessary in ...

javascriptjquerycsshtml

Is it possible to modify the CSS of a single class when hovering over a child class of a different and unrelated class?

I am struggling with CSS combinators, especially when dealing with nested div, ul, and li elements. My issue involves changing the CSS of a div with the class "H" when hovering over li elements with the class "G". Since all of this is contained within a s ...

javascriptjqueryhtmlcss

Utilize mongoose-delete to bring back items that have been marked for deletion but are still

Whenever I remove an item from my list, it switches the properties of the data to true, marking it as deleted and moves it to the trash. However, when I try to restore the item from the trash, the deleted properties are no longer available and the data rea ...

javascriptnode.jsexpressmongoose

GraphQL/Relay Schema "Field cannot be queried..."

I'm encountering an issue when trying to query specific fields in graphql/relay. My goal is to retrieve the "courseName" field for Courses from the schema provided below. For instance, if I query the User with: { user(id:1){firstname,lastname}} T ...

javascriptrelayjsgraphqlgraphql-js

An error occurred when attempting to hide or show a jQuery loading animation

Here is the HTML code I am using: <div id="success_message" style="display:none"> <p>Good job!</p> </div> <div id="my-form"> <form> <input>....... (lots of inputs) <input id="my-btn" ...

javascriptjqueryajaxshow-hide

No testing detected, ending with code zero - NPM and YARN

After installing node js and yarn, I attempted to run an application/script developed by someone else. However, when running the test, I encountered the following message: No tests found, exiting with code 0 Watch Usage › Press f to run only failed tes ...

javascriptnode.jsnpmpackageyarnpkg

There was an issue when trying to process the Javascript data structure with JSON.parse

Currently, I have the following data stored in a JavaScript variable: "{'Headings': [{'name': 'Behavior', 'majorTopic': 'N', 'vote': {'down': 1, 'up': 1}}, {'na ...

javascriptjqueryjsondictionary

Creating a table in Javascript using an array of objects

I need a larger version of this data structure. [{ "votes":200, "invalid_votes":140, "valid_votes":60, "voting_section":{"level":2, "zone1":"US", "zone2":"Delaware"} }, { "votes":300, "invalid_votes":40, "valid_votes":260, "voting_section":{"level":3, "zo ...

javascriptarraystabular

Creating a dialog box that effectively blocks user interaction

Is it possible to implement a blocking dialog box with JavaScript/JQuery/Ajax? I've been working with the JQuery UI dialog box, but using it asynchronously with callback functions has made it more complicated than expected. For example: ans1 = confi ...

javascriptjqueryajax

Top and bottom borders embraced by text: the ultimate header design

I'm looking to create a screen-wide headline with a simple text-logo. The challenge is to make it touch the container's top and bottom borders like this example, including its half-height variations. Upon inspecting the HTML, I noticed that ther ...

htmlcss

"An identifier was expected causing a parsing error" triggered by v-on:change

Encountered an issue where importing a class to be used solely as a typescript type annotation resulted in a no-unused vars error. Following advice from this discussion thread, I added "plugin:@typescript-eslint/recommended" to the eslint config, ...

typescriptvue.jseslint

What causes setInterval to create an endless loop when used inside a while loop in JavaScript?

I attempted to initiate a delayed "one" call or a "one or two?" question, but instead of working as expected, the function continued running indefinitely. Surprisingly, everything worked perfectly fine without using setInterval. quester2() function quest ...

javascriptloopsif-statementsetintervalinfinite-loop

`No cookies stored on mobile devices`

I've implemented a middleware for handling protected routes using cookies for server-side checking. Upon user login, the information is saved in local storage for frontend authentication checks, and a cookie is set to true for server-side verification ...

javascriptreactjscookiesnext.js

Enhancing an image's background with the :before CSS3 pseudo-selector to create a dark

My aim is to enhance the jumbotron background image by adding a dark overlay with 50% opacity using CSS techniques. I attempted to utilize the :before CSS selector to insert a dark rectangle in front of the jumbotron, which worked well for the standard ju ...

htmlcsstwitter-bootstrapbootstrap-4

Order of Execution

I am facing an issue with the order of execution while trying to retrieve values from my WebApi for input validation. It appears that the asynchronous nature of the get operation is causing this discrepancy in execution order. I believe the asynchronous b ...

javascriptvisual-studiotypescriptangular

The status code for the post request is 405, indicating that the method is not

Encountering an issue when clicking the submit button which results in a Status Code: 405 Method Not Allowed error message: "The POST method is not supported for this route. Supported methods: GET, HEAD." exception: "Symfony\Component\HttpK ...

laravelvue.jspostaxios