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>

    <!-- Twitter Embed Section -->
    <div class="twitter-embed">
      <blockquote class="twitter-tweet">
        <p lang="en" dir="ltr">
          Understanding time zones in JavaScript can be tricky! 🌍
          <br />
          <br />
          🔹 UTC: Universal time, the standard.
          <br />
          🔹 CET: Central European Time (UTC+1).
          <br />
          🔹 CEST: Central European Summer Time (UTC+2).
          <br />
          🔹 PST: Pacific Standard Time (UTC-8).
          <br />
          <br />
          Always double-check your dates to avoid confusion! 🕰️
        </p>
        &mdash; Kevin Marville (@techandstream)
        <a
          href="https://twitter.com/techandstream/status/1845559942054338812?ref_src=twsrc%5Etfw"
        >
          October 13, 2024
        </a>
      </blockquote>
    </div>

    <button @click="doSomething">Say hello.</button>

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

    <!-- RDV Scheduler Section -->
    <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 with Twitter Embed and RDV Scheduler!",
      localTime: "",
      timeZone: "",
      rdvTime: "",
      confirmationMessage: ""
    };
  },
  created() {
    this.setLocalTime();
  },
  mounted() {
    // Dynamically load the Twitter script to render the tweet embed correctly
    const twitterScript = document.createElement("script");
    twitterScript.setAttribute(
      "src",
      "https://platform.twitter.com/widgets.js"
    );
    twitterScript.setAttribute("async", true);
    twitterScript.setAttribute("charset", "utf-8");
    document.head.appendChild(twitterScript);
  },
  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.";
      }
    },
    doSomething() {
      alert("Hello!");
    }
  }
};
</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;
}

.twitter-embed {
  margin: 20px auto;
  width: 80%;
  max-width: 600px;
}

.footer-bar {
  margin-top: 40px;
  padding: 10px;
  background-color: #f8f8f8;
  color: #2c3e50;
  text-align: center;
}

.footer-bar a {
  color: #4fc08d;
  margin: 0 10px;
  text-decoration: none;
}

.footer-bar a:hover {
  text-decoration: underline;
}
</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.