Animating elements on a webpage can be achieved by using both

Is there a way to create an animation that moves objects based on button clicks? For example, when the "Monday" button is pressed, the object with the correct color will move down. If any other button like "Tuesday" is clicked, the previous object will move up and the correct one will move down. Any help would be appreciated.

Check out this code snippet for reference:

function myFunction(myColor) {
  const square_day = document.getElementById("square")
  switch (myColor) {
    case "Monday":
      square_day.style.borderColor = "#ff7f98";
      square_day.style.backgroundColor = "#ff7f9880";
      square_day.style.animation = "square-to-circle 1s .83s"
      break
    case "Tuesday":
      square_day.style.borderColor = "#d7d77b";
      square_day.style.backgroundColor = "#d7d77b80";
      square_day.style.animation = "square-to-circle 1s .83s"
      break
  }
#square {
  height: 500px;
  width: 500px;
  position: relative;
  border-style: solid;
  border: 10px solid;
  background-color: grey;
  margin-left: auto;
  margin-right: auto;
  border-color: black;
  top: -700px;
}
@keyframes square-to-circle {
  0% {
    top: -700px
  }
  100% {
    top: 0px;
  }
}
<div class="container">
  <div id="button-container">
    <div class="button-group">
      <button class="button" id="Monday" value="Monday" onclick="myFunction(this.value)">Monday</button>
      <button class="button" id="Tuesday" value="Tuesday" onclick="myFunction(this.value)">Tuesday</button>
      <button class="button" id="Wednesday" value="Wednesday" onclick="myFunction(this.value)">Wednesday</button>
      <button class="button" id="Thursday" value="Thursday" onclick="myFunction(this.value)">Thursday</button>
      <button class="button" id="Friday" value="Friday" onclick="myFunction(this.value)">Friday</button>
      <button class="button" id="Saturday" value="Saturday" onclick="myFunction(this.value)">Saturday</button>
      <button class="button" id="Sunday" value="Sunday" onclick="myFunction(this.value)">Sunday</button>
    </div>
  </div>
  <div id="square-container">
    <div id="square">
    </div>
  </div>
</div>

javascriptcss

Answer №1

Initially, I was uncertain if you intended to utilize only one square or include one for each day. It seemed like you were going to have one for each day since they were contained within a container. Here's a solution that incorporates one square for each day.

function adjustColor(myColor) {
  const squares = document.getElementsByClassName("square");

  for (let i = 0; i < squares.length; i++) {
    if (myColor == squares[i].id) {
      squares[i].style.transform = "translate(-50%, 20px)";
    } else {
      squares[i].style.transform = "translate(-50%, -700px)";
    }
    switch (myColor) {
      case "Monday":
        squares[0].style.borderColor = "#ff7f98";
        squares[0].style.backgroundColor = "#ff7f9880";
        break;
      case "Tuesday":
        squares[1].style.borderColor = "#d7d77b";
        squares[1].style.backgroundColor = "#d7d77b80";
        break;
      case "Wednesday":
        squares[2].style.borderColor = "purple";
        squares[2].style.backgroundColor = "violet";
        break;
      case "Thursday":
        squares[3].style.borderColor = "forestgreen";
        squares[3].style.backgroundColor = "green";
        break;
      case "Friday":
        squares[4].style.borderColor = "darkorange";
        squares[4].style.backgroundColor = "orange";
        break;
      case "Saturday":
        squares[5].style.borderColor = "blue";
        squares[5].style.backgroundColor = "lightblue";
        break;
      case "Sunday":
        squares[6].style.borderColor = "red";
        squares[6].style.backgroundColor = "pink";
        break;
    }
  }
}
.square {
  height: 500px;
  width: 500px;
  position: absolute;
  left: 50%;
  border-style: solid;
  border: 10px solid;
  background-color: grey;
  border-color: black;
  z-index: -1;
  transform: translate(-50%, -700px);
  transition: all 1s;
}
<div class="container">
  <div id="button-container">
    <div class="button-group">
      <button class="button" id="Monday" value="Monday" onclick="adjustColor(this.value)">Monday</button>
      <button class="button" id="Tuesday" value="Tuesday" onclick="adjustColor(this.value)">Tuesday</button>
      <button class="button" id="Wednesday" value="Wednesday" onclick="adjustColor(this.value)">Wednesday</button>
      <button class="button" id="Thursday" value="Thursday" onclick="adjustColor(this.value)">Thursday</button>
      <button class="button" id="Friday" value="Friday" onclick="adjustColor(this.value)">Friday</button>
      <button class="button" id="Saturday" value="Saturday" onclick="adjustColor(this.value)">Saturday</button>
      <button class="button" id="Sunday" value="Sunday" onclick="adjustColor(this.value)">Sunday</button>
    </div>
  </div>
  <div id="square-container">
    <div class="square" id="Monday"></div>
    <div class="square" id="Tuesday"></div>
    <div class="square" id="Wednesday"></div>
    <div class="square" id="Thursday"></div>
    <div class="square" id="Friday"></div>
    <div class="square" id="Saturday"></div>
    <div class="square" id="Sunday"></div>
  </div>
</div>

UPDATE: Introducing another approach using just one square element

const square = document.getElementById("square");

function adjustColor(myColor) {
  const squareBounds = square.getBoundingClientRect();
  if (squareBounds.top < 0) {
    alterColor(myColor);
  } else {
    square.style.transform = "translate(-50%, -700px)";
    setTimeout(alterColor, 500, myColor);
  }
}

function alterColor(myColor) {
  switch (myColor) {
    case "Monday":
      square.style.borderColor = "#ff7f98";
      square.style.backgroundColor = "#ff7f9880";
      break;
    case "Tuesday":
      square.style.borderColor = "#d7d77b";
      square.style.backgroundColor = "#d7d77b80";
      break;
    case "Wednesday":
      square.style.borderColor = "purple";
      square.style.backgroundColor = "violet";
      break;
    case "Thursday":
      square.style.borderColor = "forestgreen";
      square.style.backgroundColor = "green";
      break;
    case "Friday":
      square.style.borderColor = "darkorange";
      square.style.backgroundColor = "orange";
      break;
    case "Saturday":
      square.style.borderColor = "blue";
      square.style.backgroundColor = "lightblue";
      break;
    case "Sunday":
      square.style.borderColor = "red";
      square.style.backgroundColor = "pink";
      break;
  }
  setTimeout(dropDown, 500, square);
}

function dropDown(square) {
  square.style.transform = "translate(-50%, 20px)";
}
.square {
  height: 500px;
  width: 500px;
  position: absolute;
  left: 50%;
  border-style: solid;
  border: 10px solid;
  background-color: grey;
  border-color: black;
  z-index: -1;
  transform: translate(-50%, -700px);
  transition: all 1s;
}
<div class="container">
  <div id="button-container">
    <div class="button-group">
      <button class="button" id="Monday" value="Monday" onclick="adjustColor(this.value)">Monday</button>
      <button class="button" id="Tuesday" value="Tuesday" onclick="adjustColor(this.value)">Tuesday</button>
      <button class="button" id="Wednesday" value="Wednesday" onclick="adjustColor(this.value)">Wednesday</button>
      <button class="button" id="Thursday" value="Thursday" onclick="adjustColor(this.value)">Thursday</button>
      <button class="button" id="Friday" value="Friday" onclick="adjustColor(this.value)">Friday</button>
      <button class="button" id="Saturday" value="Saturday" onclick="adjustColor(this.value)">Saturday</button>
      <button class="button" id="Sunday" value="Sunday" onclick="adjustColor(this.value)">Sunday</button>
    </div>
  </div>
  <div id="square-container">
    <div class="square" id="square"></div>
  </div>
</div>

UPDATE: Including opacity to the background

let m = { Monday: 0, alpha: 0 };
let t = { Tuesday: 0, alpha: 0 };
let w = { Wednesday: 0, alpha: 0 };
let th = { Thursday: 0, alpha: 0 };
let f = { Friday: 0, alpha: 0 };
let s = { Saturday: 0, alpha: 0 };
let su = { Sunday: 0, alpha: 0 };
let arr = [m, t, w, th, f, s, su];

function adjustColor(myColor) {
  const squares = document.getElementsByClassName("square");
  for (let i = 0; i < squares.length; i++) {
    if (myColor == squares[i].id) {
      squares[i].style.transform = "translate(-50%, 20px)";
    } else {
      squares[i].style.transform = "translate(-50%, -700px)";
    }
    if (arr[i].hasOwnProperty(myColor)) {
      arr[i].alpha = 0;
    } else {
      arr[i].alpha = 1;
    }

    switch (myColor) {
      case "Monday":
        squares[0].style.borderColor = "#ff7f98";
        squares[0].style.backgroundColor = "rgba(0, 150, 15," + m.alpha + ")";
      case "Tuesday":
        squares[1].style.borderColor = "#d7d77b";
        squares[1].style.backgroundColor = "rgba(0, 255, 255," + t.alpha + ")";
      case "Wednesday":
        squares[2].style.borderColor = "purple";
        squares[2].style.backgroundColor = "rgba(190, 0, 237," + w.alpha + ")";
      case "Thursday":
        squares[3].style.borderColor = "forestgreen";
        squares[3].style.backgroundColor = "rgba(0, 150, 15," + th.alpha + ")";
      case "Friday":
        squares[4].style.borderColor = "darkorange";
        squares[4].style.backgroundColor = "rgba(209, 160, 0," + f.alpha + ")";
      case "Saturday":
        squares[5].style.borderColor = "blue";
        squares[5].style.backgroundColor = "rgba(38, 237, 255," + s.alpha + ")";
      case "Sunday":
        squares[6].style.borderColor = "red";
        squares[6].style.backgroundColor = "rgba(255, 77, 249," + su.alpha + ")";
    }
  }
}
.square {
  height: 500px;
  width: 500px;
  position: absolute;
  left: 50%;
  border-style: solid;
  border: 10px solid;
  border-color: black;
  z-index: -1;
  transform: translate(-50%, -700px);
  transition: all 2s;
}
<div class="container">
  <div id="button-container">
    <div class="button-group">
      <button class="button" id="Monday" value="Monday" onclick="adjustColor(this.value)">Monday</button>
      <button class="button" id="Tuesday" value="Tuesday" onclick="adjustColor(this.value)">Tuesday</button>
      <button class="button" id="Wednesday" value="Wednesday" onclick="adjustColor(this.value)">Wednesday</button>
      <button class="button" id="Thursday" value="Thursday" onclick="adjustColor(this.value)">Thursday</button>
      <button class="button" id="Friday" value="Friday" onclick="adjustColor(this.value)">Friday</button>
      <button class="button" id="Saturday" value="Saturday" onclick="adjustColor(this.value)">Saturday</button>
      <button class="button" id="Sunday" value="Sunday" onclick="adjustColor(this.value)">Sunday</button>
    </div>
  </div>
  <div id="square-container">
    <div class="square" id="Monday"></div>
    <div class="square" id="Tuesday"></div>
    <div class="square" id="Wednesday"></div>
    <div class="square" id="Thursday"></div>
    <div class="square" id="Friday"></div>
    <div class="square" id="Saturday"></div>
    <div class="square" id="Sunday"></div>
  </div>
</div>

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

The <select> list appears wider on Windows compared to Mac

Is there a way to achieve consistent width for a wide select list on different operating systems and browsers? I've noticed that the width of the select box varies between Windows and Mac OS when viewed in Chrome or other browsers. For example, if yo ...

htmlcsswindowsmacosgoogle-chrome

Ways to properly exit a function

What is the best way to pass the apiKey from the createUser function in User.ts to Test.ts in my specific scenario? User.ts interface User { url: string, name: string, } class User{ async createUser( user: User ):Promise<void> { le ...

javascripttypescripttestingtypes

Create a layered panel underneath a button that covers a separate element

I am working on a layout that consists of an editor and multiple buttons positioned above it on the right side. My goal is to add a panel just below "Button2" that will overlay the editor. This panel should expand and collapse when "Button2" is clicked, wh ...

cssreactjscss-positionfluent-uifluentui-react

Retrieving data from the database using getStaticProps in Next.js

As I was following a tutorial on Next.js, the instructor did something that deviated from what I had learned in school and left me pondering. Here is what he did: interface FaqProps { faq: FaqModel[]; } export default function Faq({ faq }: FaqProps) { ...

javascriptreactjsnext.js

display a container and navigate to the specific link

Greetings! Could someone please help me make this code function properly? I am attempting to display the DIV (slidingDiv) and navigate to the selected ANCHOR (#anchor-01 + #anchor-02 + #anchor-03)... However, the code currently only allows me to go to the ...

javascriptjqueryhtmlanchor

What are the steps to send $http requests from AngularJS to a local server in an app?

Situation at Hand My goal is to perform an $http post request from Angular using the function below, defined in my controller: $scope.sendUserData = function(){ var userData = JSON.stringify({ 'firstName': $scope.firstName, ...

javascriptangularjsnode.jsexpressmean-stack

refetchQueries may be effective for specific queries

Using a Friend component within my AllFriends screen triggers the following mutation: const [deleteUserRelation] = useDeleteUserRelationMutation({ onCompleted: () => { Alert.alert('Unfriended'); }, refetchQueries: [{ query: ...

javascriptreactjsreact-nativegraphqlapollo

What are the different scenarios in AngularJS where $scope is utilized versus when var is utilized?

Which is more efficient in AngularJS: using var or $scope. for variables inside functions? I am asking this question because I recently came across information about $watch, $digest, and $apply in AngularJS. While I may not have fully grasped the concept ...

javascriptangularjsangularjs-scope

What are some ways to streamline and improve the readability of my if/else if statement?

I've created a Rock Paper Scissors game that runs in the console. It currently uses multiple if/else if statements to compare user input against the computer's selection and determine a winner. The code is quite lengthy and repetitive, so I' ...

javascriptfunctionconditional-statements

What is the best way to display two tables together using inline styling?

I attempted to display 2 tables inline by setting their display property to inline, but unfortunately, it did not work as expected. Is there a more straightforward way to achieve the desired inline display for these tables? table { display: inline; } ...

htmlcss

The Art of Personalizing a Banner

I am currently experiencing an issue with the width of a specific gadget. My goal is to have the border-bottom line of #customheader span the entire width of any screen size. However, at the moment, the border-bottom is only the width of the blog itself. H ...

htmlcssblogger

Creating an IntersectionObserver with the Composition API: A Step-by-Step Guide

I am currently in the process of incorporating an IntersectionOberver that will update the url once the viewport transitions into a new section. I came across This thread and now endeavoring to apply it in vue 3 compositon api. The script is being integra ...

javascriptvue.jsvuejs3jetbrains-idevue-composition-api

Fetching images using node.js via URL

I must apologize for my lack of knowledge about node.js. I am trying to read an image from a URL and resize it using sharp. Currently, my code only works for reading local images. For instance, I would like to read the following image from a URL: url= ...

javascriptnode.jsbufferedimagesharp

Error: Unable to access property 'camera' as it is undefined

After implementing the Raycaster from Three js to detect collision following a MouseMove event, I encountered an error: Cannot read properties of undefined (reading 'camera') Here is the code snippet causing the issue: bindIFrameMousemove(if ...

javascriptangulartypescriptthree.js

Issues Persist with Bootstrap Tree View - object passed but no output显示

After going through numerous discussions and solving several issues along the way, I have encountered a major problem where there is no output. As mentioned before, I am utilizing Bootstrap Tree View: To establish the hierarchical structure required for ...

javascriptjsontwitter-bootstrap

encountered net::ERR_EMPTY_RESPONSE while attempting to locate a CSS file within an AngularJS directive

Every time my webpage attempts to access the css file from a directive, I encounter a net::ERR_EMPTY_RESPONSE. I have implemented door3's on-demand css feature, which allows for lazy loading of css files only when necessary. This feature works flawle ...

javascriptjqueryhtmlcssangularjs

Issue with Ajax form submission on one specific page

My form submission using JQuery AJAX is causing my page to redirect to submit.php instead of staying on the current page. I have tried various solutions but cannot pinpoint the issue... The PHP script seems to be working fine, with only one echo statement ...

javascriptphpjqueryajaxforms

What could be the reason for data-id coming back as undefined?

I'm having trouble figuring out why the code below isn't working for me. The console is showing 'undefined' for data-id. href='#detailsModal' class='btn btn-info btn-xs' data-toggle='modal' data-id='x ...

javascriptbootstrap-4

Rails 6 not displaying Javascript as intended

I am a beginner at this, but so far everything seems to be functioning smoothly. On my page, users can upload and delete photos without any issues. The uploading and deleting processes work perfectly fine. However, I am facing an issue where the page does ...

javascriptjqueryajaxruby-on-rails-6

Trouble with Vuex Store: Changes to table values not reflected in store

I've been tackling a table project using Quasar framework's Q-Popup-edit and Vuex Store. The data populates correctly initially. However, any changes made on the table do not seem to persist and revert back to their original values. Here is a s ...

javascriptnode.jsvue.jsvuexquasar-framework