Question 2,4,5,6 finies, question 3 à revoir

css/style.css

@@ -1,3 +1,10 @@
+/* Global */
+
+.pointer {
+    cursor: pointer;
+}
+
+
 /* Onglet */
 
 .menu-pannel {
@@ -20,24 +27,6 @@
     display: none;
 }
 
-.team{
-    position: absolute;
-    border: 0;
-    height: 1px;
-    width: 1px;
-    padding: 0;
-    overflow: hidden;
-    clip: rect(1px 1px 1px 1px); /* IE6 & IE7 */
-    clip: rect(1px, 1px, 1px, 1px);
-}
-
-.team:target{
-    position: relative;
-    height: auto;
-    padding: initial;
-    clip: initial;
-}
-
 
 /* Formulaire */
 
@@ -50,7 +39,7 @@ form input {
 /* CARD */
 
 .team-card {
-    border: #000000 1px;
+    border: #000000 1px solid;
     border-radius: 5px;
 }
 

index.html

@@ -12,9 +12,14 @@
     <div id="app">
 
         <navbar></navbar>
-        <div class="team" style="display: none;">
-            <team-card></team-card>
+        <div class="team">
+            <team-add @add-team="addTeam"></team-add>
         </div>
+        <teamcard v-for="team in allTeam"
+                    :id="team.id"
+                    :name="team.name"
+                    :description="team.description">
+        </teamcard>
     </div>
 
     <script src="/src/misc/constant.js"></script>
@@ -23,21 +28,25 @@
         import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
 
         import Navbar from '/src/view/navbar.js';
-        import TeamCard from '/src/view/team_add.js';
+        import TeamAdd from '/src/view/team_add.js';
+        import Teamcard from '/src/view/teamcard.js';
       
         const app = createApp({
             data() {
                 return {
-                    links: [
-                    '#',
-                    './src/viewhtml/team.html',
-                    'https://www.github.com',
-                    ]
+                    allTeam: []
+                }
+            },
+            methods:{
+                addTeam: function(team){
+                    console.log('index.addTeam',team);
+                    this.allTeam.push(team);
                 }
             }
         })
         app.component('Navbar', Navbar)
-           .component('TeamCard', TeamCard);
+           .component('TeamAdd', TeamAdd)
+           .component('Teamcard',Teamcard);
         app.mount('#app');
       </script>
 </body>

src/view/link_service.js

@@ -3,7 +3,7 @@ export default class LinkService{
     getLinks(){
         return [
         '#',
-        './src/viewhtml/team.html',
+        '#',
         'https://www.github.com',
         ];
     }

src/view/navbar.js

@@ -1,14 +1,34 @@
 export default {
     props: {
-        linkHome: String,
-        linkTeam: String,
-        linkResults: String
+        linkHome: {
+            type: String,
+            default: '#'
+        },
+        linkTeam:{
+            type: String,
+            default: ''
+        },
+        linkResults: {
+            type: String,
+            default: 'https://www.github.com'
+        }
+    },
+    methods:{
+        toggleDiv: function(){
+            let div = document.getElementById("team");
+			if (div.classList.contains("hide")) {
+				div.classList.remove("hide");
+			} else {
+				div.classList.add("hide");
+			}
+        }
     },
     template:`
         <ul>
-            <li><a href="#">Home</a></li>
-            <li><a href="#team">Teams</a></li>
-            <li><a href="https://www.github.com">Results</a></li>
+            <li><a :href="linkHome">Home</a></li>
+            <li @click="toggleDiv"><a :href="linkTeam">Team</a></li>
+            <li><a target="_blank" :href="linkResults">Results</a></li>
         </ul>
     `
+
 };

src/view/team_add.js

@@ -3,6 +3,7 @@ export default {
         return {
             id: '',
             name: '',
+            description: '',
             errorMessage: '',
             errorColor: ERROR_COLOR
         }
@@ -10,18 +11,25 @@ export default {
     methods: {
         addTeam: function() {
             this.errorMessage = '';
-            if (!this.id || !this.name) {
-                this.errorMessage = 'ID and Name are required !';
+            if (!this.id ){
+                this.errorMessage = 'ID is required !';
+                return;
+            }else if (!this.name){
+                this.errorMessage = 'Name is required !';
+                return
+            }else if(!this.description) {
+                this.errorMessage = 'Description is required !';
                 return;
             }
 
-            const team = { id: this.id, name: this.name};
+            const team = { id: this.id, name: this.name, description: this.description};
             console.log('form.addTeam', team);
 
             this.$emit('addTeam', team);
 
             this.id = '';
             this.name = '';
+            this.description = '';
         }
     },
     template: `<section>
@@ -36,6 +44,10 @@ export default {
                         <label>Name</label><br/>
                         <input type="text" v-model="name"/>
                     </div>
+                    <div>
+                        <label>Description</label><br/>
+                        <textarea v-model="description"></textarea>
+                    </div>
                     <input type="submit" value="Create Team" @click="addTeam"/>
                 </form>
             </section>`

src/view/teamcard.js

@@ -0,0 +1,32 @@
+export default {
+    props: {
+        id: {
+            type :String,
+            require : true
+        },
+        name: {
+            type :String,
+            require : true
+        },
+        description: {
+            type :String,
+            require : true
+        }
+    },
+    computed: {
+        description20(){
+            if (this.description.length > 20) {
+                return this.description.substring(0, 20) + '...';
+              } else {
+                return this.description;
+              }
+            }
+        },
+    template: `
+        <div class="team-card">
+            <span>ID of the Team : {{ id }}</span>
+            <p>Name : {{ name }}</p>
+            <p>Description : {{ description20 }}</p>
+        </div>
+    `
+}