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>