retool-coding-test-file

App.vue

<script setup>
import { ref, reactive } from 'vue';

let imageData = ref([]);
// let favorites = reactive([]);

let imagesUrl = "https://retoolapi.dev/lfaPzW/dogs";
fetch(imagesUrl)
  .then(res => res.json())
  .then(r => {
    imageData.value = [...r]
    imageData.value.map(d => d.fave = false);
    console.log(imageData)
  })

sikan@retool.com

function favorited(e) {
  let imageId = e.target.dataset.id;
  imageData[imageId].fave = true;
  console.log(imageId);
}

</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
    </div>
  </header>

  <main>
    <div>
      <ul>
        <li v-for="image in imageData" :key="image.id">
          <article>
            <img :src="image.url" alt="" >
            <div class="actions">
              <button :data-id="image.id" @click="favorited">Fave</button>
              <span v-if="image.fave" class="fave-icon"></span>
            </div>
          </article>
        </li>
      </ul>
    </div>
  </main>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }

  li {
  }

  img {
    width: 200px;
    height: 200px;
    object-fit: cover;
  }

  .fave-icon {
    background-color: red;
  }
}
</style>