Updated Vue.js Component with Tweet Embed

script.vue

<template>
  <div id="app">
    <h1>{{ message }}</h1>

    <p>
      Learn more with the
      <a href="https://vuejs.org/" target="_blank" rel="noopener">
        Vue Docs &amp; Resources
      </a>
      .
    </p>

    <p>Your current time: {{ localTime }}</p>
    <p>Timezone: {{ timeZone }}</p>

    <div>
      <label for="rdv-time">Choose a date and time for your RDV:</label>
      <input type="datetime-local" id="rdv-time" v-model="rdvTime" />
    </div>

    <button @click="scheduleRdv">Confirm RDV</button>

    <div v-if="confirmationMessage" class="confirmation-message">
      <h3>{{ confirmationMessage }}</h3>
    </div>
    <!-- Footer Bar Section -->
    <footer class="footer-bar">
      <p>Connect with us:</p>
      <a href="https://x.com/techandstream" target="_blank" rel="noopener">X</a>
      |
      <a
        href="https://www.threads.net/@techandstream"
        target="_blank"
        rel="noopener"
      >
        Threads
      </a>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Welcome to Vue RDV Scheduler!",
      localTime: "",
      timeZone: "",
      rdvTime: "",
      confirmationMessage: ""
    };
  },
  created() {
    this.setLocalTime();
  },
  methods: {
    setLocalTime() {
      const date = new Date();
      this.localTime = date.toLocaleString(); // Display local time
      this.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone; // Get the user's current time zone
    },
    scheduleRdv() {
      if (this.rdvTime) {
        this.confirmationMessage = `Your RDV has been scheduled for ${this.rdvTime} in the ${this.timeZone} timezone.`;
      } else {
        this.confirmationMessage =
          "Please select a valid date and time for your RDV.";
      }
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 40px;
}

a {
  color: #4fc08d;
}

button {
  background: none;
  border: solid 1px;
  border-radius: 2em;
  font: inherit;
  padding: 0.75em 2em;
  color: #4fc08d;
  cursor: pointer;
}

button:hover {
  background-color: #4fc08d;
  color: white;
}

.confirmation-message {
  margin-top: 20px;
  color: #2c3e50;
  font-weight: bold;
}
</style>

updated-vue-js-component-with-tweet-embed.markdown

Updated Vue.js Component with Tweet Embed

Twitter embed integrated into the project structure while maintaining the look and feel of a nice scheduler for your appointements!

A Pen by Kevin Marville on CodePen.

License.