What is the best way to have a fresh photo and text appear every day of the week?

Currently, I am working on a Javascript project that involves displaying the day of the week. I have successfully accomplished this part, but now I am looking to incorporate photos alongside each day of the week as well. Is there a way to combine both text and images in an array item? Despite my efforts to find examples, all I come across are random photo apps, which do not meet my specific needs.

Check out My Day Tracker Project Here

var d = new Date();
var days = ["Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"];

document.getElementById("demo").innerHTML = days[d.getDay()];
javascriptarraysdatephoto

Answer №1

To begin, start by creating a new array specifically for photos:

var images = [
  'https://placeimg.com/640/480/animals',
  'https://placeimg.com/640/480/arch',
  'https://placeimg.com/640/480/nature',
  'https://placeimg.com/640/480/people',
  'https://placeimg.com/640/480/tech',
  'https://placeimg.com/640/480/any',
  'https://placeimg.com/640/480/any'
];

Next, insert an empty image tag into the code:

<img id="photo">

Assign a source URL to the image tag:

document.getElementById("photo").src = images[d.getDay()];

Check out the complete code here

Answer №2

If you want to modify your array, consider structuring it like this:

var days = 
[

{name: "Monday",    img: "https://image.ibb.co/caPP3V/all.jpg"},
{name: "Tuesday",   img: "https://image.ibb.co/btn2OV/dontgrowup.jpg"},
{name: "Wednesday", img: "https://image.ibb.co/kQoHOV/everything-Sux.jpg"},
{name: "Thursday",  img: "https://image.ibb.co/c2UP3V/enjoy.jpg"},
{name: "Friday",    img: "https://image.ibb.co/ifbFAA/college.jpg.jpg"},
{name: "Saturday",  img: "https://image.ibb.co/fe7Yxq/hyper.jpg"},
{name: "Sunday",    img: "https://image.ibb.co/dKtj3V/cooltobeyou.jpg"}

]

To display the day of the week, you can access it by adding .name at the end of the object.

document.getElementById("demo").innerHTML = days[d.getDay()].name;

Add an img tag in your HTML to showcase the image for that day.

<img id="image">

You can update the src attribute of the image using JavaScript like this:

document.getElementById("image").src= days[d.getDay()].img;

I hope this explanation is helpful!

Answer №3

Revise your array structure to incorporate image properties as demonstrated below.

  var days = [
     {
       day: "day name",
       image: "image path"
     }
  ];

Solution in Action 

    var d = new Date();
    var days = [
      {
        day: "Sunday",
        image:
          "http://wearesunday.com/wp-content/uploads/2015/01/sunday-logo.png"
      },
      {
        day: "Monday",
        image:
          "https://www.monday.vc/assets/share-mondayvc-259d07fc0eb8e761596a059e81111291e487be9fa24579cb49411c22190b3a97.png"
      },
      {
        day: "Tuesday",
        image:
          "https://goodlucksymbols.com/wp-content/uploads/2016/10/Tuesday-Symbolism.jpg"
      },
      {
        day: "Wednesday",
        image:
          "https://www.thefactsite.com/wp-content/uploads/2017/07/wednesday-facts.jpg"
      },
      {
        day: "Thursday",
        image:
          "https://www.thefactsite.com/wp-content/uploads/2017/07/wednesday-facts.jpg"
      },
      {
        day: "Friday",
        image:
          "https://ihcapetown.com/wp-content/uploads/2018/02/friday-vintage-floral-lettering_23-2147659455.jpg"
      },
      {
        day: "Saturday",
        image:
          "https://cdn.pixabay.com/photo/2015/04/04/19/29/saturday-706914_960_720.jpg"
      }
    ];

    document.getElementById("demo").innerHTML = days[d.getDay()].day;
    document.getElementById("container").style.background =
      "url('" + days[d.getDay()].image + "') no-repeat center";
      html,
      body {
        margin: 0;
        padding: 0;
      }

      p {
        color: red;
        font-size: 25px;
        text-align: center;
        padding: 10px;
        background: #fff;
      }

      .container {
        width: 100vw;
        height: 100vh;
      }
<div class="container" id="container"><p id="demo"></p></div>

Disclaimer: The images used here are sourced from google images.

Answer №4

To retrieve the day name in the default language of the host, utilize the weekday option found within Date.prototype.toLocaleString. By setting the language to undefined, you can achieve this as shown below:

console.log(new Date().toLocaleString(undefined, {weekday:'long'}));

As mentioned by others, obtaining the image corresponding to a specific day can be accomplished by utilizing an array containing 7 image references (indexed from 0 to 6) and selecting the image based on the day number obtained from getDay.

Answer №5

offers a unique random image for any keyword searched.

var weekImages = 
[

{name: "Monday",    img: "https://googleimages.com/800x600/monday"},
{name: "Tuesday",   img: "https://googleimages.com/800x600/tuesday"},
{name: "Wednesday", img: "https://googleimages.com/800x600/wednesday"},
{name: "Thursday",  img: "https://googleimages.com/800x600/thursday"},
{name: "Friday",    img: "https://googleimages.com/800x600/friday"},
{name: "Saturday",  img: "https://googleimages.com/800x600/saturday"},
{name: "Sunday",    img: "https://googleimages.com/800x600/sunday"}

]

document.getElementById("demoweek").innerHTML = weekImages[d.getDay()].name;

Code to show the corresponding image for that day:

<img id="weekimage">

Update the code to display the current day's image:

document.getElementById("weekimage").src= weekImages[d.getDay()].img;

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

arranging an array according to the values in a separate array

Hello all, I am new to Python and seeking help with a problem. I have an initial array: initial_array = np.array([1, 6, 3, 4]) In addition, I have another array: value_array = np.array([10, 2, 3, 15]) I would like to create an output array by sorting the ...

pythonarraysnumpy

Import data into Bootstrap table from an external source

I am having trouble styling the table loaded from the table.html file onto the index page. Even after loading the table, the styles from bootstrap classes are not applied. What could be causing this issue? Importing bootstrap libraries directly into the ta ...

javascripthtmljquerybootstrap-5bootstrap-table

What is the mechanism for invoking functions defined with the arrow syntax in Angular?

Referencing this code snippet from the tutorial at https://angular.io/tutorial/toh-pt4, specifically within the hero.component.ts file: getHeroes(): void { this.heroService.getHeroes() .subscribe(heroes => this.heroes = heroes); } After analyz ...

javascriptangular

Tips for avoiding the 'ResizeObserver loop finished with unhandled notifications.' error when using React with mui/material/Table

This is our current code snippet: import Table from '@mui/material/Table'; import TableBody from '@mui/material/TableBody'; import TableCell from '@mui/material/TableCell'; import TableContainer from '@mui/material/TableC ...

javascriptreactjsmaterial-ui

What is the best method for extracting specific information from cookies using JQuery?

Currently, I am developing a straightforward to-do list. I store the tasks in cookies and retrieve them when the web page reloads. However, I am facing an issue where I can't save the tasks that have been marked as completed. function toHTML(id, text ...

javascriptjquerycookies

Caution: Make sure to assign an object to a variable before exporting it as the default module

While working with react-redux, my root Reducer appears like this: import Customers from "./customers/reducer"; export default { Customers }; Recently, I encountered a warning saying: Assign object to a variable before exporting as module def ...

javascriptreactjsredux

Binding ngModel to a method within $scope in Angular

Not really a question with code, but more for my clarification. Please excuse me if this isn't the appropriate place to ask... I was experimenting with a basic checkbox that had an ngModel assigned to it: <input type="checkbox" ng-model="someFlag ...

javascriptangularjs

What is the simplest method for preserving the Redux state?

What is the most efficient method to maintain state in Redux even after a website refresh? I would prefer not to rely on redux-persist if there are alternative options available. ...

javascriptreactjsreduxreact-reduxredux-persist

How to use puppeteer to extract images from HTML that have alt attributes

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 nopadding text-center"><!-- Start Product Photo --><div class="row"><img src="/products/ca/downloads/images/54631.jpg" alt="Product image 1">&l ...

javascripthtmlnode.jspuppeteer

What is the best way to pass a mask without using a plug-in when dealing with an input value in Vue.js?

As someone who has previously implemented the function using pure JavaScript, I am now faced with the challenge of incorporating it into vue.js and determining which lifecycle hooks are best suited for this task. This issue arises as I am a beginner prepar ...

javascriptvue.jsvuetify.js

Building a promotional widget

I'm currently working on developing an ad widget that can be easily reused. I'm debating whether to use jQuery or stick with pure JavaScript for this project. What are your thoughts on the best approach for creating a versatile and efficient ad w ...

javascriptjquery

PassportJS failed to retrieve the user information when attempting to reset the password, resulting in a

After spending two days researching, I am finally posting my first question: I am trying to add a Forgot password feature to my website built with NodeJS and Express, using this guide: The issue I'm facing is that in the app.post('reset/:token& ...

javascriptnode.jsmongodbexpresspassport.js

Unprepared for handling JSON data with JavaScript and jQuery

{ "Items": [ { "location": "bakery", "item1": "milk", "item2": "bread" } ], } Currently, I am encountering difficulties in parsing a JSON object and receiving the following error: Error: Unca ...

javascriptjqueryjson

Adjusting the inline styling of an element to enhance its appearance

Currently, the code is functioning as follows: var ball = document.getElementById('ball'); //some code let bml = parseInt(ball.style.marginLeft,10); //if *conditional statement* is true, do: ball.setAttribute("style","margin-left:& ...

javascripthtmlcssattributes

Express JS appears to be returning undefined when trying to access req.body.content

Recently, I delved into the world of node and express. In an attempt to create a simple API for a note-taking application, I encountered an issue. When testing the API using POSTMAN to create a new note, the values of req.body.title and req.body.content re ...

javascriptnode.jsrestexpress

Failure of $.post to activate the function

I'm really struggling to understand why the alert or console.log functions are not being triggered in this snippet of code: $.post("http://localhost:8080/mail", jsonObject, function(data) { ...

javascriptjquery

Developing a user authentication system with TowerJS

As a front-end designer/developer with limited MVC experience, I am looking to create a login form using TowerJS. Following the documentation, my app includes a model named "User": class App.User extends Tower.Model @field "email", type: "String" @fie ...

javascriptnode.jsjavascript-frameworktowerjs

How to generate a 2D structure using JavaScript?

I am attempting to construct a language menu using the <link rel="alternate"> tags found in the head of a website. I have two objects, one for continents and one for languages. Based on these two objects, I am trying to generate an unordered list th ...

javascriptjqueryarrays

What could be the reason for my function throwing a TypeError with the message "<function> is not a function"?

Every time I try to call a function that clearly appears to be defined as a function, I continuously receive the error message: TypeError: [function name] is not a function. To demonstrate the issue, here is a simple example: main.ts import someFunction ...

javascripttypescriptrequirejscircular-dependencycircular-reference

What is the process for passing a component as a parameter to a function within a different component?

Within my scenario, I have a series of components '1,2,3,...' imported into another primary component 'A'. Within component 'A', certain operations are performed and a filtered component is then returned from the list of compo ...

javascriptreactjsreact-hooksreact-reduxjsx