manipulate an ArrayList according to a specified timeline

Looking to create a simple web app using Javascript and wondering where to begin.

I want to control a list of items like this:

item1
item2
item3

The goal is to make the list shift in a loop every day. For example, after Midnight, I would like the script to rearrange items to:

item3
item1
item2

This pattern should repeat on each new day.

Wondering if accomplishing this with Javascript only using basic if-else statements is feasible. Still learning Javascript and looking for guidance on where to begin.

Thank you.

javascriptarrays

Answer №1

Implement a timeout to initiate the counter and utilize an interval to trigger the switch function daily!

var items = ['item1', 'item2', 'item3'];

function switchItem() {
   var currentDate = new Date();
   var DAY_IN_MS = 1000*3600*24;
   var hours = currentDate.getHours(),
       minutes = currentDate.getMinutes(),
       seconds = currentDate.getSeconds();
   setTimout(function() {
       setInterval(function(){
          items.unshift(items.pop());
       }, DAY_IN_MS)
   }, (hours*60*60+minutes*60+seconds)*1000)
}

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

Generate HTML elements within an AngularJS directive and establish a click event

Can you show me how to create some DOM elements and add a click event to them using an AngularJS directive? My current approach is as follows: var list = document.createElement("div"); list.classList.add('myList'); for(var i = 0; i < n; i++) ...

javascriptjqueryangularjsclickbind

Require assistance with understanding the aes-256-cbc encryption using oaepHash

Procedure for Secure Data Encryption: Generate a random 256-bit encryption key (K_s). For each Personally Identifiable Information (PII) value in the payload: 1. Pad the plaintext with PKCS#7 padding. 2. Create a random 128-bit Initialization Vector (IV). ...

javascriptnode.jssecurityencryptioncryptography

Tips for properly sending an array containing objects in JSON format using Swift for iOS development

As a beginner, I am trying to grasp the concept of sending an array with objects. Does the server recognize arrays like Int, Strings, or Booleans? Do I need to convert the array into a string for JSON data? There seems to be something I'm missing. va ...

iosarraysjsonswiftjsonencoder

"Navigate with Ease: Introducing the Twitter Bootstrap Scroll

Having trouble with the twitter bootstrap scroll spy feature as the navigation doesn't update until midway through scrolling and skips item 4 to reach the last item. Check out this example: http://jsfiddle.net/eoboite/kjvAa/38/ What am I doing wrong? ...

javascriptjqueryhtmlcsstwitter-bootstrap

AngularJS - Ensuring the <script> tag is included only after all directives have been rendered

Forgive me if this question has been asked before. I've spent quite some time looking for a solution to no avail. I'm in the process of converting an existing application, which relies heavily on jQuery, to utilize AngularJS. However, I've ...

javascriptangularjs

Having trouble getting the Facebook like button to display on my website using an iframe in the markup

I gave it my all to try and get it to work, but unfortunately, I was unsuccessful. This is the approach I took. First, I followed the instructions provided on https://developers.facebook.com/docs/plugins/like-button. Next, I copied and pasted the iframe ...

javascripthtmlfbmlxfbml

Issues with storing data locally

I am currently working on developing a web application where clicking a button saves its ID to local storage and changes its style. However, I am facing an issue where the ID of the last clicked button replaces the ID of the previously clicked button in lo ...

javascriptjquerycsshtml

Having trouble locating elements within an iframe on Safari while employing Protractor

Our webpage includes an iframe that is dynamically generated using JavaScript. We are working on creating end-to-end tests for this page using Protractor. Our specific goal is to verify the presence of a div element inside the iframe. The issue we are en ...

javascriptseleniumiframesafariprotractor

Showing data retrieved from nested JSON arrays in React Native

Recently, I delved into the world of React Native and encountered a challenge in displaying nested elements from fetched JSON data. Despite utilizing react hooks in the fetch API, I couldn't quite crack the code. export default function MedProfilScre ...

javascriptreactjsreact-nativeecmascript-6

Why does React / NextJS throw a "Cannot read properties of null" error?

In my NextJS application, I am using useState and useEffect to conditionally render a set of data tables: const [board,setBoard] = useState("AllTime"); const [AllTimeLeaderboardVisible, setAllTimeLeaderboardVisible] = useState(false); const [TrendingCreat ...

javascriptreactjstypescriptnext.js

Has anyone come across a C library function that offers similar functionality to this one?

After observing this place for some time, I am finally making my first post. Please bear with me as I share a function I coded for a school project. However, I am unsure of what to name it. Is there a similar function in a library that can guide me on how ...

carraysfunctionslide

Verify if the script has already been loaded. If not, proceed to load it asynchronously

I'm currently working on implementing an asynchronous method to load jQuery JS and then execute callback functions once it is fully loaded. I anticipate using this code repeatedly, so I want to ensure that jQuery (or any other script) is not duplicate ...

javascriptasynchronous

Having trouble importing Angular flex-layout into my feature module

I'm facing an issue with Angular flex-layout in one of my modules. It works perfectly fine when I import flex-layout in the app module, but only for the app component. However, when I import flex-layout in another module, it doesn't seem to work ...

javascriptangularangular-materialangular-flex-layout

JavaScript Mouseover Custom Trigger with d3.js Library

Currently, I am experimenting with d3.js and am interested in creating a custom event with a unique trigger. From my understanding, the 'mouseover' event occurs when the mouse pointer hovers over a specific element both horizontally and vertical ...

javascripteventsd3.jsmouseovercustom-event

What could be causing the second image to not drop in the proper position in an HTML and JavaScript environment?

I am encountering an issue with a simple drag and drop implementation using images in my code. The first image works fine, but for some reason the second image does not display correctly when dragged inside the div boxes; it appears outside of the box. Can ...

javascripthtml

HTML not being displayed in AngularJS Directive template

Check out my fiddle here, where I am trying to build a group of checkboxes. Everything works perfectly in the prototype, allowing me to include multiple groups that run independently. However, when I added the code to my app and inserted the html template: ...

javascriptangularjsdirective

Exploring JSON data using HandleBars

Below is a JSON object: { { "status": { "success": true, "error": "" }, "data": { "hello_world": [ { "uid": { "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ef3e7fae6defab ...

arraysjsonhandlebars.jsfrontend

React - The issue with my form lies in submitting blank data due to the declaration of variables 'e' and 'data' which are ultimately left unused

Currently, I'm working on incorporating a form using the react-hook-form library. Despite following the documentation and utilizing the handleSubmit function along with a custom Axios post for the onSubmit parameter like this: onSubmit={handleSubmit( ...

javascriptreactjsmaterial-uireact-hook-form

What are the most effective ways to set a reasonable limit on SVG usage for website backgrounds, or reasons why it may not load properly?

Based on the image's size, I am assuming that it may be causing the following issue: I have been given two massive 10MB SVG images by a graphic designer to use as background images for a client's landing page. The graphics are quite complex and ...

javascripthtmlcsssvg

Using jQuery to make an Ajax post request that will load the current page with additional form data appended to the

Below is the HTML code for my registration form: <form id="registerForm"> <input type="text" pattern="[A-Za-z]{1,20}" placeholder="First Name" name="guestFName" title="Up to 20 alphabetical characters" required> <inp ...

javascriptjqueryhtmlajax