search

chingu-voyages / v48-tier1-team-05

A dinosaur app for viewing detailed information about your favorite dinosaurs | Chingu Voyage-48 | https://chingu.io/
https://chingu-voyages.github.io/v48-tier1-team-05/
4 stars 1 forks source link

Create mobile cards #171

Closed terrifricker closed 6 months ago

terrifricker commented 6 months ago

Add code to onSearch function to create mobile cards at the same time as the desktop cards.

PROBLEM: (solved below) This somehow breaks the desktop cards by not putting the dinosaur information onto the back of the desktop cards. I cannot find where I make a change to that code....

Screen Shot 2024-04-13 at 12 53 58 AM

Previous working code:

      labels.forEach(item => {
        const dlElement = document.createElement('dl');
        const dtElement = document.createElement('dt');
        const ddElement = document.createElement('dd');
        const spanElement = document.createElement('span');
        spanElement.textContent = item.label + ':';
        ddElement.textContent = item.data;
        dlElement.style.marginLeft = "15px";
        dtElement.appendChild(spanElement);
        dlElement.appendChild(dtElement);
        dlElement.appendChild(ddElement);
        cardBackText.appendChild(dlElement);
      });

New code:

      labels.forEach(item => {
        const dlElement = document.createElement('dl');
        const dtElement = document.createElement('dt');
        const ddElement = document.createElement('dd');
        const spanElement = document.createElement('span');
        spanElement.textContent = item.label + ':';
        ddElement.textContent = item.data;
        dlElement.style.marginLeft = "15px";
        dtElement.appendChild(spanElement);
        dlElement.appendChild(dtElement);
        dlElement.appendChild(ddElement);
        cardBackText.appendChild(dlElement);
        mobileCardText.appendChild(dlElement);
      });
terrifricker commented 6 months ago

Ki figured it out! Now we have: Screen Shot 2024-04-13 at 1 37 53 AM

terrifricker commented 6 months ago

The information had to be made twice:

        labels.forEach(item => {
        const dlElement = document.createElement('dl');
        const dtElement = document.createElement('dt');
        const ddElement = document.createElement('dd');
        const spanElement = document.createElement('span');
        spanElement.textContent = item.label + ':';
        ddElement.textContent = item.data;
        dlElement.style.marginLeft = "15px";
        dtElement.appendChild(spanElement);
        dlElement.appendChild(dtElement);
        dlElement.appendChild(ddElement);
        cardBackText.appendChild(dlElement);
      });
      labels.forEach(item => {
        const dlElement = document.createElement('dl');
        const dtElement = document.createElement('dt');
        const ddElement = document.createElement('dd');
        const spanElement = document.createElement('span');
        spanElement.textContent = item.label + ':';
        ddElement.textContent = item.data;
        dlElement.style.marginLeft = "15px";
        dtElement.appendChild(spanElement);
        dlElement.appendChild(dtElement);
        dlElement.appendChild(ddElement);
        mobileCardText.appendChild(dlElement);
      });