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

Encountering an error when attempting to access an object property dynamically by using a passed down prop as a variable in Vue 2 & Vuex

I have been struggling for hours to find a solution to this problem, but so far I've had no luck. I've looked at these two questions, but they didn't provide the answers I needed: Dynamically access object property using variable Dynamical ...

javascripttypescriptvue.jsvuejs2vuex

Finding elements based on their position using Javascript

I'm searching for an optimal method to identify all elements located within a specific range of pixels from the top of the page. Currently, I have implemented a straightforward test called inRange function inRange(el, from, to) { var top = el.offs ...

javascriptjquerysorting

Leveraging arrays generated from two separate MySQL queries for dual selection functionality with JavaScript

I have successfully populated the first HTML select with results from the first query. Now, I would like to store the results from the second query in either a Json file or XML and then use plain javascript (not jQuery) to populate the second HTML select ...

javascriptphphtmlmysqljson

Attempting to access a shared php/javascript library using mod_rewrite

Let's dive into a fresh perspective on a question I previously raised: I've crafted a mod_rewrite snippet that checks for the existence of JavaScript, CSS, and PHP files on the subdomain they are called from (e.g., subdomain.example.com). If the ...

phpjavascriptajaxapachemod-rewrite

When I attempt to run several promises simultaneously with Promise.All, I encounter an error

My code contains a series of promises, but they are not being executed as expected. Although the sequence is correct and functional, I have found that I need to utilize Promise.all in order for it to work properly. dataObj[0].pushScreen.map(item => { ...

javascriptreactjsreact-nativepromise

Arrange divs in vertical columns

My markup is fixed and I am only allowed to add <div> elements to the container. Here is the current structure: <div class="container"> <div class="box" id="box1">1</div> <div class="box" id="box2">2</div> < ...

htmlcss

Is there a method in JavaScript to access the object to which a function was originally bound?

I have a curiosity about making the code below function properly, capturing the logging as instructed in the comments. function somePeculiar(func) { var funcThis = undefined; // Instead of undefined, how can we access // ...

javascript

Guide to utilizing JavaScript for a basic gaming experience

Looking to incorporate multiple divs that will vanish upon being clicked, while also increasing the score by 1 through javascript. Any suggestions on how to accomplish this? ...

javascripthtmlcssonclick

Securely package tailor-made services within an application

Recently, I have been researching how to create custom services for AngularJS. However, all the examples I found demonstrate defining the service directly on my app using myApp.factory(...). For reference, you can check out the official docs for an example ...

javascriptangularjs

What could be causing the directives module to not get properly incorporated into the Angular app module?

I am currently in the process of learning Angular and have come across some challenges with module resolution. In js/directives/directives.js, I have a directive scoped within a directives module: angular.module("directives").directive("selectList", funct ...

javascriptangularjs

Saving decimal values in a React Material UI textfield with type number on change

I am currently working on a textfield feature: const [qty, setQty] = useState({ qty: "0.00" }); ..... <TextField required id="qty" type="number" label="Qtà" value={qty.qty} step="1.00& ...

javascriptreactjsreact-nativereact-reduxmaterial-ui

Exploring the controller logic in Sails.js index.ejs

I'm struggling to understand how to integrate dynamic logic into the homepage of my Sails.js application. Currently, the homepage is static, but I want to display data on the index.ejs page. I have a MainController with an index function that retrieve ...

javascriptnode.jsexpresssails.js

The Microsoft Booking feature is not being shown in the iframe

Instead of the booking website, this is what is being displayed. Below is the code snippet: index.js import React from 'react' const Appointment = () => { return ( <iframe src='https://outlook.office365.com/owa/calendar/<a ...

htmlcssreactjsiframe

Disable the default form input reset button generated by Internet Explorer 10

Just have one field form for search input. Below is the HTML code: <form class = "search-form hide-on-mobile"> <input class = "global" type = "text" placeholder = "Who are you looking for ?"> <but ...

htmlcssinternet-explorer-10

The process of uploading data onto a map using jquery is quite inconsistent in its functionality

HTML Instructions: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1"> <me ...

javascriptjqueryajaxcouchapp

Struggling to make the toggle button appear on the bootstrap navbar when shrinking the resolution

Everything seems to be working well with the navbar initially, but when resizing the screen to a smaller resolution, all the navigation items disappear and the "hamburger icon" fails to appear. <nav class="navbar navbar-custom navbar-expand-md fi ...

htmlcssbootstrap-4

Step-by-step guide for building and populating a JavaScript Dictionary

Does anyone know how to create a Dictionary with a key and a list of values pair in Python? I have been able to create dictionaries with a single value for each key, but now I need to store multiple items as values for each key. Here is what I have tried: ...

javascriptjquerydictionary

Is there a way to check if a user has previously visited a URL and automatically redirect them back to that page if they have

I'm looking for a way to detect if a user has already opened a specific link or URL in their browser tab. Is it possible to redirect the link to an active tab if the URL is already open? For example, if a user clicks on a link and JS code opens a new ...

javascriptjqueryhttp-redirectclient-side

Preventing direct URL access with Angular redirects after refreshing the page

My website allows users to manage a list of users, with editing capabilities that redirect them to the /edit-user page where form information is preloaded. However, when users refresh the page with F5, the form reloads without the preloaded information. I ...

javascriptangularroutesangular2-routingangular2-forms

Creating a dynamic visual experience with Angular 2: How to implement multiple font colors

I have a text area which is connected to one string, with the default text color set to white. <textarea style="background-color: black;color:#fff;" [(ngModel)]="outputText"></textarea> The connected string contains multiple variables. retur ...

htmlcssangulartypescript