Cfrgtkky

I am working on a little Javascript project to get the day of the week displayed. I have that part down, but I would also like to have a photo to also represent each day of the week. Is there a way to utilize both text and a photo together in an array item? I have been searching for a while, and the only examples I can find are to get a random photo app, which is not what I need.

My Day Tracker Project

var d = new Date();

var days = ["Sunday",

"Monday",

"Tuesday",

"Wednesday",

"Thursday",

"Friday",

"Saturday"];



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

Just create a new array for photos:

var photos = [

  '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'

];

Add an empty image tag:

<img id="image">

Setup the src attribute:

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

working code

You could update your array to look 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"}



]

Then to show the day of the week you will then need to add .name at the end

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

To show the image for that day, just create an img in the html

<img id="image">

And you can then update the src of that image in a similar way

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

Hope this helps!

Change your array structure to add a image properties like below.

  var days = [

     {

       day: "day name",

       image: "image path"

     }

  ];

Working solution

    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: All the images are used here are taken from google images.

You can get the day name in the host default language using the weekday option of Date.prototype.toLocaleString and setting the language to undefined, e.g.

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

As others have said, getting the image can be done with an array of 7 image references (indexes 0 to 6) and setting the image based on the day number from getDay.