A dynamic display featuring four columns that showcase unique content every day of the week

Question

A dynamic display featuring four columns that showcase unique content every day of the week

As a beginner in coding, I am attempting to design a page with 4 columns that will showcase different titles and descriptions each day of the week.

My goal is to have a set of titles and descriptions displayed on Monday, a different set on Tuesday, and so forth for each day of the week.

Despite spending nearly a week searching online, I have been unable to determine the code required to make this daily change happen.

While I have some idea of what script to use, I'm uncertain about the exact implementation.

var today = new Date();

if (today.getDay() == 1) document.getElementById("text").innerHTML = ;
else if (today.getDay() == 2) document.getElementById("text").innerHTML = ;
else if (today.getDay() == 3) document.getElementById("text").innerHTML = ;
else if (today.getDay() == 4) document.getElementById("text").innerHTML = ;
else if (today.getDay() == 5) document.getElementById("text").innerHTML = ;
else if (today.getDay() == 6) document.getElementById("text").innerHTML = ;
else if (today.getDay() == 0) document.getElementById("text").innerHTML = ;

* {
  box-sizing: border-box;
}

body {
  color: white
}

h2 {
  color: white
}

.column {
  float: left;
  width: 15.00%;
  padding: 10px;
  margin: 1px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

<div class="row">
      <div class="column" style="background-color:#333;">
    <h2>Titel</h2>
    <p> Description</p>
  </div>
  <div class="column" style="background-color:#333;">
    <h2>Titel</h2>
    <p> Description</p>
  </div>
  <div class="column" style="background-color:#333;">
    <h2>Titel</h2>
    <p> Description</p>
  </div>
    <div class="column" style="background-color:#333;">
        <h2>Titel</h2>
        <p> Description</p>
    </div>
</div>

If anyone can provide assistance or point me in the right direction to resolve this issue, it would be greatly appreciated. Thank you!

javascript html css

Answer 1

Answer №1

I didn't make any changes to your HTML and CSS code. Here's the JS code I added:

var data = [
    {name: "John", age: 25, city: "New York", country: "USA"},
    {name: "Emily", age: 28, city: "London", country: "UK"},
    {name: "Hiroshi", age: 30, city: "Tokyo", country: "Japan"}
];
var attributes = ["name", "age", "city", "country"];
var today = (new Date()).getDay();
var index = 0;
for (let item of document.querySelectorAll(".item")) item.innerText = data[today][attributes[index++]];

Explanation:

data is an array of objects containing information about different individuals
each object in the data array has properties like name, age, city, and country
attributes is an array of property names that we will use to set values later on
today represents the current day
index keeps track of which attribute we are currently setting for each item
```
document.querySelectorAll(".item")
```
selects all elements with the class "item"
The iteration loop goes through each selected element and assigns a value based on the current day's data
The index variable is incremented after each assignment using index++

You can try it out here: https://jsfiddle.net/bmpw9joc/

Answer 2

I didn't make any changes to your HTML and CSS code. Here's the JS code I added:

var data = [
    {name: "John", age: 25, city: "New York", country: "USA"},
    {name: "Emily", age: 28, city: "London", country: "UK"},
    {name: "Hiroshi", age: 30, city: "Tokyo", country: "Japan"}
];
var attributes = ["name", "age", "city", "country"];
var today = (new Date()).getDay();
var index = 0;
for (let item of document.querySelectorAll(".item")) item.innerText = data[today][attributes[index++]];

Explanation:

data is an array of objects containing information about different individuals
each object in the data array has properties like name, age, city, and country
attributes is an array of property names that we will use to set values later on
today represents the current day
index keeps track of which attribute we are currently setting for each item
```
document.querySelectorAll(".item")
```
selects all elements with the class "item"
The iteration loop goes through each selected element and assigns a value based on the current day's data
The index variable is incremented after each assignment using index++

You can try it out here: https://jsfiddle.net/bmpw9joc/

Answer 3

Answer №2

When trying to retrieve an element by both class and id, it is important to note that there are differences. In reality, the class returns an array, meaning there can be multiple elements with the same class name. To access these elements, you should use getElementsByClassName instead of getElementByclass.

<script>
      var today = new Date();

      if(today.getDay() == 1) document.getElementsByClassName("text").innerHTML = ;
      else if(today.getDay() == 2) document.getElementById("text").innerHTML = ;
      else if(today.getDay() == 3) document.getElementById("text").innerHTML = ;
      else if(today.getDay() == 4) document.getElementById("text").innerHTML = ;
      else if(today.getDay() == 5) document.getElementById("text").innerHTML = ;
      else if(today.getDay() == 6) document.getElementById("text").innerHTML = ;
      else if(today.getDay() == 0) document.getElementsByClassName("text").innerHTML =      
</script>

Answer 4

When trying to retrieve an element by both class and id, it is important to note that there are differences. In reality, the class returns an array, meaning there can be multiple elements with the same class name. To access these elements, you should use getElementsByClassName instead of getElementByclass.

<script>
      var today = new Date();

      if(today.getDay() == 1) document.getElementsByClassName("text").innerHTML = ;
      else if(today.getDay() == 2) document.getElementById("text").innerHTML = ;
      else if(today.getDay() == 3) document.getElementById("text").innerHTML = ;
      else if(today.getDay() == 4) document.getElementById("text").innerHTML = ;
      else if(today.getDay() == 5) document.getElementById("text").innerHTML = ;
      else if(today.getDay() == 6) document.getElementById("text").innerHTML = ;
      else if(today.getDay() == 0) document.getElementsByClassName("text").innerHTML =      
</script>

Answer 5

Answer №3

Let's try this approach.

First, we will generate an array of objects, each containing display information for a specific day:

[
  {
    title: 'This is the day 0 title',
    text: 'This is day 0 text',
    description: 'This is day 0 description',
  },
  {
    title: 'This is the day 1 title',
    text: 'This is day 1 text',
    description: 'This is day 1 description',
  },
  // and so on...
]

We then retrieve the object from the array based on the index representing the current day:

// determine the day of the week (0 for Sunday, 6 for Saturday)
const dayIndex = date.getDay();

// fetch the data for this day from the array
const info = contentsByDay[dayIndex];

The variable info now holds the object for that particular day, for example:

{
  title: 'This is the day 1 title',
  text: 'This is day 1 text',
  description: 'This is day 1 description',
}

We proceed to iterate over the properties of the object using a for...of loop.

for (const prop in info) {
  // executed for each property ('title', 'text', 'description')
}

Within the loop, we search for a DOM element (like a div) with a class corresponding to the property name:

// similar to elem.querySelector('.title') when prop === 'title'
const div = elem.querySelector(`.${prop}`);

If we locate the element (div), we update its innerHTML with the value from the object:

if (div) {
  // info[prop] represents info.title for prop === 'title'
  div.innerHTML = info[prop];
}

Finally, apply some CSS rules to arrange them horizontally:

.day {
  display: flex;
}

.day > * {
  /* dividing space equally among 3 fields */
  flex: 1 1 33.3%;
}

// To simplify, quickly create an array with objects for each day.
// Each entry in the array has title, text, and description fields.
const contentsByDay = Array.from({length: 7}, (_, i) => ({
  title: `This is the day ${i} title`,
  text: `This is day ${i} text`,
  description: `This is day ${i} description`,
}));

// function to update the DOM with information for a given date.
// Defaults to today if no date provided.
function showDayInfo(date = new Date()) {
  const dayIndex = date.getDay(); 
  const info = contentsByDay[dayIndex]; 
  const elem = document.querySelector('.day'); 
  for (const prop in info) { 
    const div = elem.querySelector(`.${prop}`); 
    if (div) { 
      div.innerHTML = info[prop]; 
    } 
  }
}

showDayInfo();

.day {
  display: flex;
}

.day > * {
  flex: 1 1 33.3%;
}

<div class="day">
  <div class="title"></div>
  <div class="text"></div>
  <div class="description"></div>
</div>

Answer 6

Let's try this approach.

First, we will generate an array of objects, each containing display information for a specific day:

[
  {
    title: 'This is the day 0 title',
    text: 'This is day 0 text',
    description: 'This is day 0 description',
  },
  {
    title: 'This is the day 1 title',
    text: 'This is day 1 text',
    description: 'This is day 1 description',
  },
  // and so on...
]

We then retrieve the object from the array based on the index representing the current day:

// determine the day of the week (0 for Sunday, 6 for Saturday)
const dayIndex = date.getDay();

// fetch the data for this day from the array
const info = contentsByDay[dayIndex];

The variable info now holds the object for that particular day, for example:

{
  title: 'This is the day 1 title',
  text: 'This is day 1 text',
  description: 'This is day 1 description',
}

We proceed to iterate over the properties of the object using a for...of loop.

for (const prop in info) {
  // executed for each property ('title', 'text', 'description')
}

Within the loop, we search for a DOM element (like a div) with a class corresponding to the property name:

// similar to elem.querySelector('.title') when prop === 'title'
const div = elem.querySelector(`.${prop}`);

If we locate the element (div), we update its innerHTML with the value from the object:

if (div) {
  // info[prop] represents info.title for prop === 'title'
  div.innerHTML = info[prop];
}

Finally, apply some CSS rules to arrange them horizontally:

.day {
  display: flex;
}

.day > * {
  /* dividing space equally among 3 fields */
  flex: 1 1 33.3%;
}

// To simplify, quickly create an array with objects for each day.
// Each entry in the array has title, text, and description fields.
const contentsByDay = Array.from({length: 7}, (_, i) => ({
  title: `This is the day ${i} title`,
  text: `This is day ${i} text`,
  description: `This is day ${i} description`,
}));

// function to update the DOM with information for a given date.
// Defaults to today if no date provided.
function showDayInfo(date = new Date()) {
  const dayIndex = date.getDay(); 
  const info = contentsByDay[dayIndex]; 
  const elem = document.querySelector('.day'); 
  for (const prop in info) { 
    const div = elem.querySelector(`.${prop}`); 
    if (div) { 
      div.innerHTML = info[prop]; 
    } 
  }
}

showDayInfo();

.day {
  display: flex;
}

.day > * {
  flex: 1 1 33.3%;
}

<div class="day">
  <div class="title"></div>
  <div class="text"></div>
  <div class="description"></div>
</div>

A dynamic display featuring four columns that showcase unique content every day of the week

Answer №1

Answer №2

Answer №3

Similar questions

Calculate the total sum of input values using jQuery

How can I use a Google extension to interact with buttons on a webpage?

Guide to preserving a .docx document in react js

'addEventListener' and 'onclick' functions are restricted to the 'window' element and cannot be used on any other element, such as a button

Navigation bar subtitle with items aligned to the right

Adding a clear field icon to an input field: Step-by-step guide

`Changing the iframe content dynamically with next and previous buttons: a step-by-step guide`

Toggle textboxes using jQuery depending on the radio button choice

How can you modify the HTML tags before Bootstrap overrides them?

What is the best way to display an HTML array?

Stream of information that triggers a specific action based on a specified condition

What is the best approach to managing this scenario where the document is ready?

Is it possible to deinitialize data tables (remove from memory)?

Limiting the input in a text box to only allow whole numbers and no decimal values

The domain retrieval is contingent on the language preference of the user

Querying jQuery: How to Retrieve the ID of a Link

What is the best way to enforce a left alignment for a menu?

The Facebook Comments feature on my React/Node.js app is only visible after the page is refreshed

How to modify a Python script to print in a specific div element instead of the Chrome console?

How can you tap into local storage in CSS while utilizing a chrome extension?