first commit

2 years ago · b85c8a69ef
2 changed files with 152 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1,7 @@
 Web Development example 01
 ==========================
 * [x] Tailwind
 * [x] Font Awesome
 * [x] Alpine JS
  * [x] transition
--- a/index.html
+++ b/index.html
@ -0,0 +1,145 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
    />
    <script
      defer
      src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"
    ></script>
    <!-- Tailwind docs: https://tailwindcss.com/docs/installation/play-cdn -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              clifford: "#da373d",
            },
          },
        },
      };
    </script>
  </head>
  <body
    x-data="{
    formatter: new Intl.NumberFormat('fr-FR', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2,
          }),
    count: 0,
    taxChoice:0,
    taxes: [0, 8.5, 20],
    articles: [
        {
            id: 0,
            label: 'savon',
            price: 5,
            order: 0,
        },
        {
            id: 1,
            label: 'brosse',
            price: 10,
            order: 0,
        },
        {
            id: 2,
            label: 'lessive',
            price: 13,
            order: 0,
        }
    ],
    taxLabel: (entry)=> {
        switch (entry) {
            case 0: return 'exonéré';
            default: return entry+' %';
        }
    },
    order(id){
        this.articles[id].order++;
    },
    decrementOrder(id){
        this.articles[id].order--;
    },
    computePrice(){
        let sum=0;
        console.log(this.articles);
        for (item of this.articles) {
            sum += item.price * item.order;
        }
        return this.formatter.format(sum*(1+this.taxChoice/100));
    }
    }"
    class="p-8 bg-white dark:bg-slate-400"
  >
    <h1 class="text-3xl text-clifford">Articles</h1>
    <div class="flex space-x-4">
      <template x-for="article in articles" :key="article.id">
        <div>
          <span x-text="article.label"></span>
          <span x-show="article.order>0" x-text=" '('+article.order+')'"></span>
          <button
            @click="order(article.id)"
            class="flex items-center rounded bg-blue-100 px-5 py-2 text-slate-500 shadow-md"
          >
            <i class="mr-5 fa-solid fa-cart-plus"></i>
            Increment
          </button>
          <button
            x-show="article.order>0"
            @click="if (article.order>0) decrementOrder(article.id)"
            class="flex items-center rounded bg-blue-100 px-5 py-2 text-slate-500 shadow-md"
          >
            <i class="mr-5 fa-regular fa-square-minus"></i>
            Decrement
          </button>
        </div>
      </template>
    </div>
    <h2 class="text-2xl text-clifford">Taxes</h2>
    <template x-for="item in taxes" :key="item">
      <div>
        <input
          x-model="taxChoice"
          type="radio"
          name="taxChoice"
          :value="item"
        />
        <label x-text="taxLabel(item)"></label>
      </div>
    </template>
    <h2 class="text-2xl text-clifford mt-4">TOTAL TTC</h2>
    <span class="text-3xl" x-text="computePrice() + ' €'" />
    <div x-data="{ open: false }">
      <button
        @click="open = ! open"
        class="flex items-center rounded bg-orange-100 px-5 py-2 text-slate-500 shadow-md"
      >
        Voir C.G.U
      </button>
      <div
        x-transition.duration.500ms
        x-show="open"
        @click.outside="open = false"
      >
        Les conditions de vente standard s'appliquent à la date de la commande
      </div>
    </div>
  </body>
 </html>