Letter Madlib customization

[manishapriya94]

Frontend:

• Create 4 drop downs with the above questions in display letter
• Store user input as merge-variables - giving each a unique name

Backend

• Update create_letter to include the 4 merge variables (based on variable names) reference

[manishapriya94]

To add dropdown buttons to your LetterLoad.vue component, you can use the v-select component from the Vuetify library. Here are the steps you can follow:

Add the v-select component to your template:

<template>
  <div>
    <v-select
      v-model="selectedItem"
      :items="items"
      label="Select an item"
    ></v-select>
  </div>
</template>

This code creates a v-select component with a v-model binding to the selectedItem data property, an items prop that contains the dropdown options, and a label prop that sets the label for the dropdown.

Add the items and selectedItem data properties to your Vue component:

export default {
  data() {
    return {
      items: [
        { text: 'Option 1', value: 1 },
        { text: 'Option 2', value: 2 },
        { text: 'Option 3', value: 3 }
      ],
      selectedItem: null
    }
  }
}

This code sets the items data property to an array of objects that represent the dropdown options, and sets the selectedItem data property to null.

Questions:
Reasons why this campaign is important to you (var: reason_input)

• I live here
• my family lives here
• communities I care about are affected

How this affects your community (var: community_input)

• creates jobs
• creates better air and water quality
• creates a great sustainability examples
• increases quality of life and culture

What is the benefit of supporting this (var: benefit_input)

• protects endangered animals
• lessens homelessness
• prevents environmental harms to water and land

What is the greater impact of supporting this (impact_input)

• protecting historical landmarks
• becoming a beacon example of sustainability for the nation
• generating eco and sustainability awareness education and tourism
• increasing biodiversity and lowering carbon emissions

[chappdev2019]

Hi Manisha, can I work on this one?

[chappdev2019]

@GinaCastromonte Hi Gina, I have begun working on this task -- creating four dropdowns to display the above questions in the letter. How would you like to divide other parts?

[chappdev2019]

@manishapriya94 Hi Manisha, I've implemented four dropdowns. One question I have is whether the style of the four dropdowns needs to strictly match the way the images are displayed. In addition, the images also have a circle around the user textbox area. Is this within the scope of this issue? Thank you!