├── .gitignore ├── 23-24 ├── Lect1_OpenAPI_Lab │ ├── Esercizi │ │ ├── API Incompleta │ │ │ ├── API Incompleta - Istruzioni.pdf │ │ │ ├── Codice completo.yaml │ │ │ └── Codice incompleto.yaml │ │ ├── Annotazione Immagine │ │ │ └── API Annotazione Immagini - Istruzioni.pdf │ │ ├── Correzione API │ │ │ ├── API corretta.yaml │ │ │ ├── API errata.yaml │ │ │ └── Correzione API - Istruzioni.pdf │ │ └── Ristorante │ │ │ ├── Esercizio Guidato - API Ristorante.pdf │ │ │ └── Soluzione esercizio Ristorante.yaml │ └── OpenAPI_LabSlides.pdf ├── Lect2_HTML_CSS_Lab_1 │ ├── Esercizi │ │ ├── Es_CorrezioneHTML_1 │ │ │ ├── CodiceCorretto.html │ │ │ └── CodiceErrato.html │ │ ├── Es_Form │ │ │ ├── Form.html │ │ │ └── StileForm.css │ │ ├── Es_RiscritturaCSS_1 │ │ │ ├── ColoriOrganizzazione.css │ │ │ ├── OriginalHTML.html │ │ │ └── ScreenDaRiprodurre.png │ │ ├── Es_RiscritturaCSS_2 │ │ │ ├── OriginalHTML.html │ │ │ ├── ScreenDaRiprodurre.png │ │ │ └── SfondiBordi.css │ │ ├── Es_RiscritturaCSS_3 │ │ │ ├── Divisioni.css │ │ │ ├── OriginalHTML.html │ │ │ └── ScreenDaRiprodurre.png │ │ ├── Es_RiscritturaHTML_1 │ │ │ ├── Embed.html │ │ │ └── ScreenDaRiprodurre.png │ │ ├── Es_RiscritturaHTML_2 │ │ │ ├── ListaLegenda.html │ │ │ └── ScreenDaRiprodurre.png │ │ ├── Es_ScritturaHTML │ │ │ └── Lavatrici.html │ │ └── Es_Tabella │ │ │ ├── StileTabella.css │ │ │ └── Tabella.html │ └── HTMLCSSLab1_Slides.pdf ├── Lect3_HTML_CSS_Layout_Lab_2 │ ├── .vscode │ │ └── settings.json │ ├── EserciziClasse │ │ ├── Esercizio1_Grid │ │ │ ├── esercizi-layout-class.html │ │ │ ├── named_grid.css │ │ │ └── normal_grid.css │ │ └── Esercizio2_Flex │ │ │ ├── esercizi-layout-class.html │ │ │ ├── flex.css │ │ │ ├── grid.css │ │ │ └── named_grid.css │ ├── EsercizioLayout_Differenziata │ │ ├── differenziata.css │ │ ├── index.html │ │ └── src │ │ │ ├── carta.png │ │ │ ├── metallo.png │ │ │ ├── misto.png │ │ │ ├── organico.png │ │ │ ├── plastica.png │ │ │ └── vetro.png │ └── HTMLCSSLab2_Layout_Slides.pdf ├── Lect4_JS_Lab_1 │ ├── Esercizi.zip │ ├── Esercizi │ │ ├── Esercizi_Classe │ │ │ ├── Es1_base.js │ │ │ ├── Es1_freccia.js │ │ │ ├── Es2_DOM_Manipulation.js │ │ │ ├── Es3_Timer.js │ │ │ └── index.html │ │ └── Esercizi_Esame │ │ │ ├── EsEsame_BaseHTML.html │ │ │ └── ExEsame_1.js │ └── Slides_JS_1.pdf ├── Lect5_JS_Lab_2 │ ├── Esercizi.zip │ ├── Esercizi │ │ ├── Esercizio Esame in due parti │ │ │ ├── .vscode │ │ │ │ └── settings.json │ │ │ ├── Parte1 │ │ │ │ ├── indexPt1.html │ │ │ │ └── style.css │ │ │ └── Parte2 │ │ │ │ ├── indexPt2.html │ │ │ │ ├── script.js │ │ │ │ └── style.css │ │ ├── Esercizio HTML_CSS_JS │ │ │ ├── .vscode │ │ │ │ └── settings.json │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ │ └── Esercizio_casa │ │ │ ├── EsEsame_BaseHTML.html │ │ │ └── ExEsame_2.js │ └── Slides_JS_2.pdf └── Lect6_Simulazione_Esame │ ├── .vscode │ └── settings.json │ ├── Esercizi.zip │ ├── Esercizi │ ├── Esercizio1 │ │ ├── bunny.jpg │ │ ├── esercizio1.html │ │ └── stile.css │ ├── Esercizio2 │ │ ├── Version1 │ │ │ ├── esercizio2a.html │ │ │ ├── script.js │ │ │ └── style.css │ │ └── Version2 │ │ │ ├── esercizio2b.html │ │ │ ├── script.js │ │ │ └── style.css │ ├── Esercizio3 │ │ └── esercio3.yaml │ └── EsercizioBonus │ │ ├── index.html │ │ ├── script.js │ │ ├── scriptSnello.js │ │ └── style.css │ ├── SimulazioneEsame.pdf │ └── TestoCompletoSimulazione.pdf ├── LICENSE.md └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /23-24/Lect1_OpenAPI_Lab/Esercizi/API Incompleta/API Incompleta - Istruzioni.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Postitisnt/TecWebLab_23-24/7b631f7b74d986eb434f094e6183c9a19f7befa2/23-24/Lect1_OpenAPI_Lab/Esercizi/API Incompleta/API Incompleta - Istruzioni.pdf -------------------------------------------------------------------------------- /23-24/Lect1_OpenAPI_Lab/Esercizi/API Incompleta/Codice completo.yaml: -------------------------------------------------------------------------------- 1 | swagger: '2.0' 2 | info: 3 | version: 0.0.1 4 | title: 'Esercizio Botanica' 5 | description: 'API per gestire un blog di botanica' 6 | host: botanica.swagger.io 7 | schemes: 8 | - http 9 | - https 10 | 11 | paths: 12 | /articoli/: 13 | get: 14 | summary: "Ottenere l'elenco di tutti gli articoli." 15 | operationId: "listaArticoli" 16 | parameters: 17 | - name: mindata 18 | in: query 19 | description: "minimum data degli articoli" 20 | type: string 21 | required: true 22 | - name: categoria 23 | in: query 24 | description: "Categoria degli articoli" 25 | type: string 26 | required: true 27 | enum: 28 | - "orto" 29 | - "fiori" 30 | - "attrezzi" 31 | - "prodotti" 32 | - "consigli" 33 | - "news" 34 | responses: 35 | 200: 36 | description: 'successo' 37 | schema: 38 | type: array 39 | items: 40 | $ref: '#/definitions/Articolo' 41 | 400: 42 | description: 'Errore richiesta' 43 | post: 44 | summary: 'Aggiungere un nuovo articolo' 45 | operationId: 'aggiungiArticolo' 46 | parameters: 47 | - name: articolo 48 | in: body 49 | description: 'articolo da aggiungere' 50 | required: true 51 | schema: 52 | $ref: '#/definitions/Articolo' 53 | responses: 54 | 200: 55 | description: 'succeso' 56 | 400: 57 | description: "errore richiesta" 58 | /articoli/{articoloID}: 59 | put: 60 | summary: 'aggiornare un articolo' 61 | operationId: 'aggiornaArticolo' 62 | parameters: 63 | - name: articoloID 64 | description: 'articolo da aggiornare' 65 | type: integer 66 | in: path 67 | required: true 68 | - name: articolo 69 | in: body 70 | description: "articolo con il contenuto aggiornato" 71 | required: true 72 | schema: 73 | $ref: "#/definitions/Articolo" 74 | responses: 75 | 200: 76 | description: 'successo - articolo aggiornato' 77 | 400: 78 | description: 'errore, ID non valido' 79 | 80 | definitions: 81 | Articolo: 82 | type: object 83 | required: 84 | - id 85 | - data 86 | - titolo 87 | - categoria 88 | - contenuto 89 | properties: 90 | id: 91 | type: integer 92 | minimum: 0 93 | data: 94 | type: string 95 | example: '06/03/2022' 96 | titolo: 97 | type: string 98 | example: 'Le fiori invernali' 99 | contenuto: 100 | type: string 101 | example: "L'inverno ci porta delle fiori belle..." 102 | categoria: 103 | type: array 104 | items: 105 | type: "string" 106 | enum: 107 | - "orto" 108 | - "fiori" 109 | - "attrezzi" 110 | - "prodotti" 111 | - "consigli" 112 | - "news" -------------------------------------------------------------------------------- /23-24/Lect1_OpenAPI_Lab/Esercizi/API Incompleta/Codice incompleto.yaml: -------------------------------------------------------------------------------- 1 | swagger: '2.0' 2 | info: 3 | version: 0.0.1 4 | title: 'Esercizio Botanica' 5 | description: 'API per gestire un blog di botanica' 6 | schemes: 7 | - http 8 | - https 9 | 10 | paths: 11 | /articoli/: 12 | get: 13 | description: "Ottenere l'elenco di tutti gli articoli." 14 | parameters: 15 | - name: mindata 16 | in: query 17 | description: "minimum data degli articoli" 18 | - name: categoria 19 | in: query 20 | description: "Categoria degli articoli" 21 | type: string 22 | responses: 23 | 200: 24 | description: 'successo' 25 | schema: 26 | $ref: '#/definitions/Articolo' 27 | 400: 28 | description: 'Errore richiesta' 29 | post: 30 | description: 'Aggiungere un nuovo articolo' 31 | operationId: 'aggiungiArticolo' 32 | parameters: 33 | - name: articolo 34 | in: body 35 | description: 'articolo da aggiungere' 36 | required: true 37 | schema: 38 | $ref: '#/definitions/Articolo' 39 | responses: 40 | 200: 41 | description: 'succeso' 42 | /articoli/{articoloID}/: 43 | put: 44 | description: 'aggiornare un articolo' 45 | operationId: 'aggiornaArticolo' 46 | parameters: 47 | - name: articoloID 48 | description: 'articolo da aggiornare' 49 | type: integer 50 | in: path 51 | required: true 52 | responses: 53 | 200: 54 | description: 'successo - articolo aggiornato' 55 | 400: 56 | description: 'errore, ID non valido' 57 | 58 | definitions: 59 | Articolo: 60 | type: object 61 | properties: 62 | id: 63 | type: integer 64 | minimum: 0 65 | data: 66 | type: string 67 | example: '06/03/2022' 68 | titolo: 69 | type: string 70 | example: 'Le fiori invernali' 71 | contenuto: 72 | type: string 73 | example: "L'inverno ci porta delle fiori belle..." 74 | categoria: 75 | type: string 76 | example: 'orto' -------------------------------------------------------------------------------- /23-24/Lect1_OpenAPI_Lab/Esercizi/Annotazione Immagine/API Annotazione Immagini - Istruzioni.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Postitisnt/TecWebLab_23-24/7b631f7b74d986eb434f094e6183c9a19f7befa2/23-24/Lect1_OpenAPI_Lab/Esercizi/Annotazione Immagine/API Annotazione Immagini - Istruzioni.pdf -------------------------------------------------------------------------------- /23-24/Lect1_OpenAPI_Lab/Esercizi/Correzione API/API corretta.yaml: -------------------------------------------------------------------------------- 1 | swagger: "2.0" 2 | info: 3 | version: "1.0.0" 4 | title: "Esercizio giochi" 5 | description: "API gestione piattaforma di giochi" 6 | schemes: 7 | - http 8 | - https 9 | 10 | paths: 11 | /giochi/: 12 | get: 13 | summary: "Elenco dei giochi di data categoria" 14 | operationId: "getGameByCategory" 15 | parameters: 16 | - in: query 17 | name: "categoria" 18 | description: "categoria del gioco" 19 | required: true 20 | type: string 21 | enum: 22 | - Shooter 23 | - Adventure 24 | - Puzzle 25 | - Sport 26 | responses: 27 | "200": 28 | description: "Successo" 29 | schema: 30 | type: array 31 | items: 32 | $ref: '#/definitions/Gioco' 33 | "400": 34 | description: "Input non valido" 35 | post: 36 | summary: "Aggiunge un insieme di giochi" 37 | operationId: "addGames" 38 | parameters: 39 | - name: "nuovo gioco" 40 | in: body 41 | description: "nuovo gioco da aggiungere" 42 | required: true 43 | schema: 44 | type: array 45 | items: 46 | $ref: "#/definitions/Gioco" 47 | responses: 48 | "200": 49 | description: "Successo" 50 | "400": 51 | description: "Input non valido" 52 | 53 | 54 | 55 | /giochi/{idGioco}: 56 | put: 57 | summary: "Modifica il numero minimo e il numero massimo di giocatori in un gioco" 58 | operationId: "editGame" 59 | parameters: 60 | - in: path 61 | name: "idGioco" 62 | description: "id del gioco" 63 | required: true 64 | type: integer 65 | format: "int32" 66 | minimum: 0 67 | - in: body 68 | name: "Gioco aggiornato" 69 | description: "Oggetto gioco con informazione aggiornata" 70 | required: true 71 | schema: 72 | $ref: "#/definitions/Gioco" 73 | responses: 74 | "200": 75 | description: "Successo" 76 | "400": 77 | description: "Input non valido" 78 | 79 | 80 | definitions: 81 | Gioco: 82 | type: object 83 | description: "Gioco della piattaforma" 84 | required: 85 | - id 86 | - nome 87 | - categoria 88 | - minNum 89 | - maxNum 90 | properties: 91 | id: 92 | type: integer 93 | format: "int32" 94 | minimum: 0 95 | nome: 96 | type: string 97 | example: "Tetris" 98 | categoria: 99 | type: string 100 | enum: 101 | - Shooter 102 | - Adventure 103 | - Puzzle 104 | - Sport 105 | minNum: 106 | type: integer 107 | format: "int32" 108 | minimum: 0 109 | maxNum: 110 | type: integer 111 | format: "int32" 112 | minimum: 1 -------------------------------------------------------------------------------- /23-24/Lect1_OpenAPI_Lab/Esercizi/Correzione API/API errata.yaml: -------------------------------------------------------------------------------- 1 | swagger: "2.0" 2 | info: 3 | version: "1.0.0" 4 | title: "Esercizio giochi" 5 | desription: "API gestione piattaforma di giochi" 6 | 7 | paths: 8 | /giochi: 9 | get: 10 | summary: "Elenco dei giochi di data categoria" 11 | operationId: "getGameByCategory" 12 | parameters: 13 | - in: "query" 14 | name: "categoria" 15 | description: "categoria del gioco" 16 | required: true 17 | type: "string" 18 | enum: 19 | - Shooter 20 | - Adventure 21 | - Puzzle 22 | - Sport 23 | responses: 24 | 200: 25 | description: "Successo" 26 | schema: 27 | type: "array 28 | items: 29 | $ref: #/definitions/Gioco" 30 | 400: 31 | description: "Input non valido" 32 | 33 | /giochi/{idGioco}: 34 | put: 35 | summary: "Modifica il numero minimo e il numero massimo di giocatori in un gioco" 36 | operationId: "getGameByCategory" 37 | parameters: 38 | - in: "path" 39 | name: "idGioco" 40 | description: "id del gioco" 41 | required: true 42 | type: "integer" 43 | format: "int32" 44 | minimum: 0 45 | - in: "body" 46 | name: "Gioco aggiornato" 47 | description: "Oggetto gioco con informazione aggiornata" 48 | required: true 49 | schema: 50 | $ref: "#/definitions/Gioco" 51 | responses: 52 | 200: 53 | description: "Successo" 54 | 400: 55 | description: "Input non valido" 56 | 57 | /giochi: 58 | post: 59 | summary: "Aggiunge un insieme di giochi" 60 | operationId: "addGames" 61 | - in: "body" 62 | name: "nuovo gioco" 63 | description: "nuovo gioco da aggiungere" 64 | required: true 65 | schema: 66 | type: "array" 67 | items: 68 | $ref: "#/definitions/Gioco" 69 | responses: 70 | 200: 71 | description: "Successo" 72 | 400: 73 | description: "Input non valido" 74 | 75 | definitions: 76 | Gioco: 77 | description: "Gioco della piattaforma" 78 | required: 79 | - id 80 | - nome 81 | - categoria 82 | - minNum 83 | - maxNum 84 | properties: 85 | id: 86 | type: "integer" 87 | format: "int32" 88 | minimum: 0 89 | nome: 90 | type: "string" 91 | example: "Tetris" 92 | categoria: 93 | type: "string" 94 | enum: 95 | - Shooter 96 | - Adventure 97 | - Puzzle 98 | - Sport 99 | minNum: 100 | type: "integer" 101 | format: "int32" 102 | minimum: 0 103 | maxNum: 104 | type: "integer" 105 | format: "int32" 106 | minimum: 1 -------------------------------------------------------------------------------- /23-24/Lect1_OpenAPI_Lab/Esercizi/Correzione API/Correzione API - Istruzioni.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Postitisnt/TecWebLab_23-24/7b631f7b74d986eb434f094e6183c9a19f7befa2/23-24/Lect1_OpenAPI_Lab/Esercizi/Correzione API/Correzione API - Istruzioni.pdf -------------------------------------------------------------------------------- /23-24/Lect1_OpenAPI_Lab/Esercizi/Ristorante/Esercizio Guidato - API Ristorante.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Postitisnt/TecWebLab_23-24/7b631f7b74d986eb434f094e6183c9a19f7befa2/23-24/Lect1_OpenAPI_Lab/Esercizi/Ristorante/Esercizio Guidato - API Ristorante.pdf -------------------------------------------------------------------------------- /23-24/Lect1_OpenAPI_Lab/Esercizi/Ristorante/Soluzione esercizio Ristorante.yaml: -------------------------------------------------------------------------------- 1 | swagger: '2.0' 2 | info: 3 | description: 'API gestione ristorante e menù' 4 | title: 'Esercizio ristoranti' 5 | version: 1.0.0 6 | 7 | paths: 8 | /menus/: 9 | get: 10 | summary: 'ritorna elenco dei menu' 11 | operationId: 'listamenu' 12 | responses: 13 | '200': 14 | description: 'successo' 15 | schema: 16 | type: array 17 | items: 18 | $ref: '#/definitions/Menu' 19 | '400': 20 | description: 'Errore richiesta' 21 | 22 | /menus/{menuId}: 23 | get: 24 | summary: 'ritorna informazioni su un menù' 25 | operationId: 'infomenu' 26 | parameters: 27 | - name: menuId 28 | in: path 29 | description: "ID del menu" 30 | required: true 31 | type: integer 32 | responses: 33 | '200': 34 | description: 'successo' 35 | schema: 36 | $ref: '#/definitions/Menu' 37 | '400': 38 | description: 'ID non valido' 39 | 40 | /menus/{menuId}/piatti/: 41 | post: 42 | summary: 'Aggiunge un piatto ad un menu' 43 | operationId: 'aggiungipiatto' 44 | parameters: 45 | - name: menuId 46 | in: path 47 | description: "ID del menu" 48 | required: true 49 | type: integer 50 | - name: piatto 51 | in: body 52 | description: 'Piatto da aggiungere' 53 | required: true 54 | schema: 55 | $ref: '#/definitions/Piatto' 56 | responses: 57 | '200': 58 | description: 'successo' 59 | '400': 60 | description: 'ID non valido' 61 | 62 | definitions: 63 | Menu: 64 | type: object 65 | required: 66 | - id 67 | - descrizione 68 | properties: 69 | id: 70 | type: integer 71 | minimum: 0 72 | descrizione: 73 | type: string 74 | example: Menu di terra 75 | 76 | Piatto: 77 | type: object 78 | required: 79 | - id 80 | - descrizione 81 | - prezzo 82 | properties: 83 | id: 84 | type: integer 85 | minimum: 0 86 | descrizione: 87 | type: string 88 | example: Spaghetti alla carbonara 89 | prezzo: 90 | type: integer 91 | minimum: 1 92 | -------------------------------------------------------------------------------- /23-24/Lect1_OpenAPI_Lab/OpenAPI_LabSlides.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Postitisnt/TecWebLab_23-24/7b631f7b74d986eb434f094e6183c9a19f7befa2/23-24/Lect1_OpenAPI_Lab/OpenAPI_LabSlides.pdf -------------------------------------------------------------------------------- /23-24/Lect2_HTML_CSS_Lab_1/Esercizi/Es_CorrezioneHTML_1/CodiceCorretto.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Gita in Italia 5 | 6 | 7 |
8 |

Gran tour in Italia

9 |

Le fantastiche città da visitare

10 |
    11 |
  1. Roma
    2. 12 |
  2. Torino
    3. 13 |
  3. Milano
    4. 14 |
  4. Bologna
    5. 15 |
16 |

Riassunto prezzi

17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 |
MesePrezzo
Gennaio$100
Febbraio$80
Totale$180
41 |
42 | 43 | -------------------------------------------------------------------------------- /23-24/Lect2_HTML_CSS_Lab_1/Esercizi/Es_CorrezioneHTML_1/CodiceErrato.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Gita in Italia 5 | 7 | 8 | 9 |

Gran tour in Italia

10 |

Le fantastiche città da visitare

11 |
    12 |
  1. Roma
    2. 13 |
  2. Torino
    3. 14 |
  3. Milano
    4. 15 |
  4. Bologna
    5. 16 |
17 |

Riassunto prezzi

18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 |
MesePrezzo
Gennaio$100Febbraio$80
Totale$180
42 | 43 | 44 | -------------------------------------------------------------------------------- /23-24/Lect2_HTML_CSS_Lab_1/Esercizi/Es_Form/Form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Esercizio Form - Correzione> 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 | 15 |
16 |

Rispondi alle seguenti domande e clicca su Invia per spedire i risultati.

17 | 27 |
28 | 29 |
    30 |
  1. 31 |
    32 |

    Quali tra queste aree di ricerca interessavano Leonardo (possibile scegliere anche più di una risposta)?

    33 |
      34 |
    1. 35 | 36 |
      2. 37 |
    2. 38 | 39 |
      3. 40 |
    3. 41 | 42 |
      4. 43 |
    44 |
    45 |
    2. 46 | 47 |
  2. 48 |
    49 | Chi ha inventato il telefono? 50 | 56 | 62 |
    63 |
    3. 64 |
65 | 66 | 67 |
68 | 69 | 70 | 81 |
82 | 83 |
84 |
85 | 86 | 87 | 88 | -------------------------------------------------------------------------------- /23-24/Lect2_HTML_CSS_Lab_1/Esercizi/Es_Form/StileForm.css: -------------------------------------------------------------------------------- 1 | .survey-container { 2 | width: calc(100% - 60px); /* il -60px è dato dal padding destro e sinistro (30px e 30px) */ 3 | margin: 0 auto; 4 | padding: 15px 30px; /* Padding alto/basso, e Padding destra/sinistra -- padding: [top] [right] [bottom] [left]; */ 5 | border: 1px solid black; 6 | box-sizing: border-box; /* Include il padding e il bordo nel calcolo della larghezza */ 7 | } 8 | 9 | .question { 10 | margin-bottom: 2px; 11 | } 12 | 13 | .question p { 14 | margin-bottom: 20px; /* Sovrascriviamo il margine che di default viene fornito al p */ 15 | } 16 | 17 | .question ol { 18 | margin-left: 15px; 19 | } 20 | 21 | #BoldTxt { 22 | font-weight: bold; 23 | } 24 | -------------------------------------------------------------------------------- /23-24/Lect2_HTML_CSS_Lab_1/Esercizi/Es_RiscritturaCSS_1/ColoriOrganizzazione.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Verdana; 3 | } 4 | 5 | h1, h2, h3 { 6 | background-color: #D3D3D3; 7 | font-style: italic; 8 | text-align: right; 9 | } 10 | 11 | span.commodo { 12 | font-weight: bold; 13 | letter-spacing: 20px; 14 | background-color: red; 15 | font-size: 125%; 16 | } 17 | 18 | span { 19 | background-color: yellow; 20 | } 21 | 22 | -------------------------------------------------------------------------------- /23-24/Lect2_HTML_CSS_Lab_1/Esercizi/Es_RiscritturaCSS_1/OriginalHTML.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Esercizio Riscrittura CSS 1 - Colori ed Organizzazione 5 | 6 | 7 | 8 |
9 |

HTML Lorem Ipsum

10 |

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Commodo Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

11 |

Donec lorem purus, volutpat a eros nec, convallis blandit tellus. Pellentesque ullamcorper id metus eget mattis. Aenean porta felis et neque consectetur fringilla. Praesent sit amet est nec magna consectetur mattis.

12 |

Integer id consequat leo, vel condimentum eros. Morbi accumsan tortor vel tortor lobortis accumsan. In gravida velit ac mi dapibus imperdiet. libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est. Trine lorique.

13 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

14 |
15 |
16 |

Header Level 2

17 |
    18 |
  1. Lorem ipsum dolor sit amet
    2. 19 |
  2. consectetuer adipiscing elit.
    3. 20 |
  3. Aliquam tincidunt
    4. 21 |
  4. Mauris eu risus.
    5. 22 |
  5. Ora et labora
    6. 23 |
24 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

25 |

Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /23-24/Lect2_HTML_CSS_Lab_1/Esercizi/Es_RiscritturaCSS_1/ScreenDaRiprodurre.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Postitisnt/TecWebLab_23-24/7b631f7b74d986eb434f094e6183c9a19f7befa2/23-24/Lect2_HTML_CSS_Lab_1/Esercizi/Es_RiscritturaCSS_1/ScreenDaRiprodurre.png -------------------------------------------------------------------------------- /23-24/Lect2_HTML_CSS_Lab_1/Esercizi/Es_RiscritturaCSS_2/OriginalHTML.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Esercizio Riscrittura CSS 2 - Sfondi e Bordi 5 | 6 | 7 | 8 |
9 |

HTML Lorem Ipsum

10 |

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Commodo Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

11 |

Donec lorem purus, volutpat a eros nec, convallis blandit tellus. Pellentesque ullamcorper id metus eget mattis. Aenean porta felis et neque consectetur fringilla. Praesent sit amet est nec magna consectetur mattis.

12 |

Integer id consequat leo, vel condimentum eros. Morbi accumsan tortor vel tortor lobortis accumsan. In gravida velit ac mi dapibus imperdiet. libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est. Trine lorique.

13 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

14 |
15 |
16 |

Header Level 2

17 |
    18 |
  1. Lorem ipsum dolor sit amet
    2. 19 |
  2. consectetuer adipiscing elit.
    3. 20 |
  3. Aliquam tincidunt
    4. 21 |
  4. Mauris eu risus.
    5. 22 |
  5. Ora et labora
    6. 23 |
24 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

25 |

Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /23-24/Lect2_HTML_CSS_Lab_1/Esercizi/Es_RiscritturaCSS_2/ScreenDaRiprodurre.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Postitisnt/TecWebLab_23-24/7b631f7b74d986eb434f094e6183c9a19f7befa2/23-24/Lect2_HTML_CSS_Lab_1/Esercizi/Es_RiscritturaCSS_2/ScreenDaRiprodurre.png -------------------------------------------------------------------------------- /23-24/Lect2_HTML_CSS_Lab_1/Esercizi/Es_RiscritturaCSS_2/SfondiBordi.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Courier New'; 3 | padding: 10px; 4 | } 5 | 6 | #sec1 { 7 | background-color: lightgray; 8 | text-align: justify; 9 | } 10 | 11 | a { 12 | background-color: red; 13 | font-size: 150%; 14 | } 15 | 16 | ol { 17 | font-style: italic; 18 | border: 3px dashed blue; 19 | } 20 | 21 | h1 { 22 | text-align: center; 23 | } 24 | 25 | -------------------------------------------------------------------------------- /23-24/Lect2_HTML_CSS_Lab_1/Esercizi/Es_RiscritturaCSS_3/Divisioni.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #FFFFEE; 3 | column-count: 2; 4 | column-rule-style: solid; 5 | margin: 60px; 6 | text-align: justify; 7 | font-family: 'Book Antiqua'; 8 | } 9 | 10 | h1, h2, h3 { 11 | text-transform: uppercase; 12 | } 13 | 14 | #sec1 p:first-letter { 15 | color: red; 16 | font-size: 75px; 17 | line-height: 52px; 18 | font-family: Georgia; 19 | } 20 | 21 | p { 22 | margin-bottom: 30px; 23 | } 24 | 25 | section { 26 | padding: 20px; 27 | /*break-inside: avoid;*/ 28 | } 29 | 30 | ol li:nth-child(odd) { 31 | background: gray; 32 | } 33 | 34 | ol li:nth-child(even) { 35 | background: lightgray; 36 | } 37 | 38 | -------------------------------------------------------------------------------- /23-24/Lect2_HTML_CSS_Lab_1/Esercizi/Es_RiscritturaCSS_3/OriginalHTML.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Esercizio Riscrittura CSS 3 - Divisione e Alternanza 5 | 6 | 7 | 8 |
9 |

HTML Lorem Ipsum

10 |

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Commodo Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

11 |

Donec lorem purus, volutpat a eros nec, convallis blandit tellus. Pellentesque ullamcorper id metus eget mattis. Aenean porta felis et neque consectetur fringilla. Praesent sit amet est nec magna consectetur mattis.

12 |

Integer id consequat leo, vel condimentum eros. Morbi accumsan tortor vel tortor lobortis accumsan. In gravida velit ac mi dapibus imperdiet. libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est. Trine lorique.

13 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

14 |
15 |
16 |

Header Level 2

17 |
    18 |
  1. Lorem ipsum dolor sit amet
    2. 19 |
  2. consectetuer adipiscing elit.
    3. 20 |
  3. Aliquam tincidunt
    4. 21 |
  4. Mauris eu risus.
    5. 22 |
  5. Ora et labora
    6. 23 |
24 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

25 |

Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /23-24/Lect2_HTML_CSS_Lab_1/Esercizi/Es_RiscritturaCSS_3/ScreenDaRiprodurre.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Postitisnt/TecWebLab_23-24/7b631f7b74d986eb434f094e6183c9a19f7befa2/23-24/Lect2_HTML_CSS_Lab_1/Esercizi/Es_RiscritturaCSS_3/ScreenDaRiprodurre.png -------------------------------------------------------------------------------- /23-24/Lect2_HTML_CSS_Lab_1/Esercizi/Es_RiscritturaHTML_1/Embed.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Esercizio Riscrittura HTML 1 - Embed 5 | 6 | 7 | 8 |
9 |

Esercizio 1

10 |

11 | In questo primo esercizio utilizzeremo HTML 12 | per embeddare un video.
13 | Il video in questione è quello della live di 14 | Masterplan del '96 a Knebworth:
15 | 16 | https://www.youtube.com/watch?v=z3Jgiv0LxWI&ab_channel=Oasis 17 | . 18 |

19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /23-24/Lect2_HTML_CSS_Lab_1/Esercizi/Es_RiscritturaHTML_1/ScreenDaRiprodurre.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Postitisnt/TecWebLab_23-24/7b631f7b74d986eb434f094e6183c9a19f7befa2/23-24/Lect2_HTML_CSS_Lab_1/Esercizi/Es_RiscritturaHTML_1/ScreenDaRiprodurre.png -------------------------------------------------------------------------------- /23-24/Lect2_HTML_CSS_Lab_1/Esercizi/Es_RiscritturaHTML_2/ListaLegenda.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Esercizio Riscrittura HTML 2 - ListaLegenda 5 | 6 | 7 | 8 |
9 |

Esercizio 2

10 |

Canzoni consigliate:

11 | 16 | 17 | 18 |

Legenda:

19 |
    20 |
  1. * = ascoltata
    2. 21 |
  2. ! = non ascoltata
    3. 22 |
23 | 24 | 25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /23-24/Lect2_HTML_CSS_Lab_1/Esercizi/Es_RiscritturaHTML_2/ScreenDaRiprodurre.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Postitisnt/TecWebLab_23-24/7b631f7b74d986eb434f094e6183c9a19f7befa2/23-24/Lect2_HTML_CSS_Lab_1/Esercizi/Es_RiscritturaHTML_2/ScreenDaRiprodurre.png -------------------------------------------------------------------------------- /23-24/Lect2_HTML_CSS_Lab_1/Esercizi/Es_ScritturaHTML/Lavatrici.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Esercizio 1 - Lavatrici 5 | 6 | 7 | 8 |

Lavatrici

9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |

PAR1

PAR2

PAR3

link 1link 2link 3
23 |
24 | 25 | -------------------------------------------------------------------------------- /23-24/Lect2_HTML_CSS_Lab_1/Esercizi/Es_Tabella/StileTabella.css: -------------------------------------------------------------------------------- 1 | /* Stile generale per la tabella */ 2 | table { 3 | width: 25%; 4 | margin-left: auto; 5 | margin-right: auto; 6 | border: 1px solid black; 7 | border-collapse: separate; /* Permette di avere spazi tra le celle */ 8 | border-spacing: 10px; /* Imposta lo spazio tra le celle */ 9 | text-align: center; 10 | } 11 | 12 | td /* ,th */ { 13 | border: 1px solid black; 14 | padding: 5px; /* Imposta il padding all'interno delle celle */ 15 | } 16 | 17 | .noCntr { 18 | text-align: left; 19 | } 20 | 21 | .yellowBkg { 22 | background-color: yellow; 23 | } 24 | 25 | .redBkg { 26 | background-color: red; 27 | } 28 | 29 | .boldTxt { 30 | font-weight: bold; 31 | } 32 | 33 | /* Evidenziare le righe pari in modo diverso */ 34 | /* tr:nth-child(even) td { /* Selettore per gli elementi td contenuti negli elementi tr pari */ 35 | /* background-color: #eee; 36 | /* } -------------------------------------------------------------------------------- /23-24/Lect2_HTML_CSS_Lab_1/Esercizi/Es_Tabella/Tabella.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Esercizio Tabella - Correzione 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 |
Tabella Dipendenti
DistribuzioneMedia
RALOre
Manager2%100.000€-
Impiegati20%40.000€40
Operai78%35.000€
45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /23-24/Lect2_HTML_CSS_Lab_1/HTMLCSSLab1_Slides.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Postitisnt/TecWebLab_23-24/7b631f7b74d986eb434f094e6183c9a19f7befa2/23-24/Lect2_HTML_CSS_Lab_1/HTMLCSSLab1_Slides.pdf -------------------------------------------------------------------------------- /23-24/Lect3_HTML_CSS_Layout_Lab_2/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /23-24/Lect3_HTML_CSS_Layout_Lab_2/EserciziClasse/Esercizio1_Grid/esercizi-layout-class.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 |

Area A

11 |

Area B

12 |

Area C

13 |

Area D

14 |

Area E

15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /23-24/Lect3_HTML_CSS_Layout_Lab_2/EserciziClasse/Esercizio1_Grid/named_grid.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box !important; 3 | } 4 | 5 | body, html { 6 | margin: 0; 7 | padding: 0; 8 | } 9 | 10 | #main { 11 | display: grid; 12 | grid-template-columns: repeat(4, 1fr); /* Quattro colonne */ 13 | grid-gap: 10px; /* Spazio tra le griglie */ 14 | width: 100vw; 15 | max-width: 100vw; 16 | padding: 5px; 17 | height: 50vh; 18 | font-family: Verdana; 19 | /* Serve a definire il layout usando named grid areas */ 20 | grid-template-areas: 21 | "a a b b" 22 | "c d d d" 23 | "e e e e"; 24 | } 25 | 26 | #main div { 27 | background-color: #cc0000; 28 | color: #fff; 29 | width: 100%; 30 | display: flex; 31 | align-items: center; 32 | } 33 | 34 | #main div p { 35 | margin: 0 15px; 36 | } 37 | 38 | #a { 39 | grid-area: a; /* Assegna l'area 'a' */ 40 | justify-content: left; /* Allinea il testo a sinistra */ 41 | } 42 | 43 | #b { 44 | grid-area: b; /* Assegna l'area 'b' */ 45 | justify-content: right; /* Allinea il testo a destra */ 46 | } 47 | 48 | #c { 49 | grid-area: c; /* Assegna l'area 'c' */ 50 | justify-content: left; /* Allinea il testo a sinistra */ 51 | } 52 | 53 | #d { 54 | grid-area: d; /* Assegna l'area 'd' */ 55 | justify-content: right; /* Allinea il testo a destra */ 56 | } 57 | 58 | #e { 59 | grid-area: e; /* Assegna l'area 'e' */ 60 | justify-content: center; /* Centra il testo */ 61 | } -------------------------------------------------------------------------------- /23-24/Lect3_HTML_CSS_Layout_Lab_2/EserciziClasse/Esercizio1_Grid/normal_grid.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box !important; 3 | } 4 | 5 | body, html { 6 | /* Sovrascriviamo margine e padding di default delle pagine HTML, 7 | questo ci è utile quando agggiungiamo il padding con la dichiarazione del 8 | border-box. Infatti, senza sovrascrivere margin e padding, otterremo un 9 | contenuto inizialmente spostato a destra, con uno spazio a sinistra */ 10 | margin: 0; 11 | padding: 0; 12 | } 13 | 14 | #main { 15 | display: grid; 16 | grid-template-columns: repeat(4, 1fr); /* quattro colonne, ognuna occupa una frazione dello spazio disponibile equamente suddifiviso */ 17 | grid-gap: 10px; /* spazio tra le griglie - equivalente a gap */ 18 | width: 100vw; /* Stiamo dicendo di voler occupare tutta la larghezza del viewport*/ 19 | max-width: 100vw; 20 | padding: 5px; 21 | height: 50vh; 22 | /*margin: auto; */ /* centra il contenitore - non necessario quì percche gia occupiamo tutto lo spazio disponibile */ 23 | font-family: Verdana; 24 | } 25 | 26 | #main div { 27 | background-color: #cc0000; 28 | color: #fff; 29 | width: 100%; /* Ogni div occupa l'intero spazio concessogli */ 30 | display: flex; /* Aggiungere flex per organizzare il testo (p) dentro ai div */ 31 | align-items: center; /* Centra verticalmente il testo nel container */ 32 | } 33 | 34 | #main div p { 35 | margin: 0 15px; 36 | } 37 | 38 | #a { 39 | grid-column: 1 / span 2; /* da colonna 1, occupa due colonne */ 40 | grid-row: 1; /* prima riga */ 41 | justify-content: left; 42 | } 43 | 44 | #b { 45 | grid-column: 3 / span 2; /* da colonna 3, occupa due colonne */ 46 | grid-row: 1; /* prima riga */ 47 | justify-content: right; 48 | } 49 | 50 | #c { 51 | grid-column: 1; /* occupa solo la prima colonna */ 52 | grid-row: 2; /* seconda riga */ 53 | justify-content: left; 54 | } 55 | 56 | #d { 57 | grid-column: 2 / span 3; /* prende 3 colonne a partire da colonna 2 (compresa) */ 58 | grid-row: 2; /* terza riga */ 59 | justify-content: right; 60 | } 61 | 62 | #e { 63 | grid-column: 1 / 5; /* prende tutte le colonne */ 64 | grid-row: 3; 65 | justify-content: center; 66 | } 67 | -------------------------------------------------------------------------------- /23-24/Lect3_HTML_CSS_Layout_Lab_2/EserciziClasse/Esercizio2_Flex/esercizi-layout-class.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 |

Area A

11 |

Area B

12 |

Area C

13 |

Area D

14 |

Area E

15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /23-24/Lect3_HTML_CSS_Layout_Lab_2/EserciziClasse/Esercizio2_Flex/flex.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box !important; 3 | } 4 | 5 | body, html { 6 | margin: 0; 7 | padding: 0; 8 | } 9 | 10 | #main { 11 | display: flex; 12 | flex-direction: row; /* Utilizziamo row e facciamo andare a capo gli elementi */ 13 | gap: 10px; /* Crea lo spazio sulla terza riga, tra area C e D */ 14 | flex-wrap: wrap; 15 | width: 100vw; 16 | height: 50vh; 17 | row-gap: 0px; 18 | padding: 0 5px; /* verticale (top, bottom) - orizzontale (left, right) */ 19 | align-items: center; /* Centra verticalmente */ 20 | justify-content: center; /* Centra orizzontalmente */ 21 | font-family: Verdana; 22 | } 23 | 24 | /* Stile comune per tutti i div */ 25 | #main div { 26 | background-color: #cccccc; 27 | height: calc(50vh/3 - 5px); 28 | color: #000; 29 | display: flex; 30 | align-items: center; /* Centra il contenuto verticalmente */ 31 | justify-content: center; /* Centra il contenuto orizzontalmente */ 32 | margin: 5px 0; /* Margine per creare spazio tra i div in verticale */ 33 | /* Qui sopra non utilizziamo gap perché avendo impostato la direction su row perderemmo gli spazi tra elementi incolonnati */ 34 | } 35 | 36 | /* Stile per i div che devono occupare tutta la larghezza */ 37 | #a, #b, #e { 38 | width: calc(100vw - 10px); /* sottrae il padding da 100vw */ 39 | } 40 | 41 | /* Stile per i div che devono occupare metà della larghezza */ 42 | #c, #d { 43 | width: calc(50vw - 10px); /* sottrae il padding */ 44 | } 45 | 46 | /* Nasconde l'elemento #e come da richiesta */ 47 | #e { 48 | display: none !important; 49 | } 50 | 51 | 52 | /* Ogni div piccolo deve essere allineato rispetto al suo container, quindi usiamo justify-content */ 53 | #c { 54 | justify-content: left; 55 | } 56 | 57 | #d { 58 | justify-content: right; 59 | } 60 | -------------------------------------------------------------------------------- /23-24/Lect3_HTML_CSS_Layout_Lab_2/EserciziClasse/Esercizio2_Flex/grid.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box !important; 3 | } 4 | 5 | body, html { 6 | margin: 0; 7 | padding: 0; 8 | } 9 | 10 | #main { 11 | display: grid; 12 | grid-template-columns: repeat(2, 1fr); /* crea una griglia con 2 colonne uguali */ 13 | gap: 10px; /* aggiunge uno spazio tra le celle della griglia */ 14 | width: 100vw; 15 | height: 50vh; 16 | padding: 5px; 17 | font-family: Verdana; 18 | } 19 | 20 | /* Stile comune per tutti i div */ 21 | #main div { 22 | background-color: #cccccc; 23 | color: #000; 24 | display: flex; 25 | align-items: center; /* Centra il contenuto verticalmente */ 26 | justify-content: center; /* Centra il contenuto orizzontalmente */ 27 | } 28 | 29 | /* 30 | La proprietà grid-area nel CSS può essere usata per posizionare un elemento in un'area 31 | specifica della griglia, e quando viene usata con quattro valori si riferisce rispettivamente 32 | a: grid-row-start, grid-column-start, grid-row-end, e grid-column-end. 33 | */ 34 | #a { 35 | grid-area: 1 / 1 / 2 / 3; /* grid-row-start / grid-column-start / grid-row-end / grid-column-end */ 36 | } 37 | 38 | #b { 39 | grid-area: 2 / 1 / 2 / 3; 40 | } 41 | 42 | #c { 43 | grid-area: 3 / 1 / 4 / 2; 44 | } 45 | 46 | #d { 47 | grid-area: 3 / 2 / 4 / 3; 48 | } 49 | 50 | #e { 51 | display: none !important; 52 | } 53 | -------------------------------------------------------------------------------- /23-24/Lect3_HTML_CSS_Layout_Lab_2/EserciziClasse/Esercizio2_Flex/named_grid.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box !important; 3 | } 4 | 5 | body, html { 6 | margin: 0; 7 | padding: 0; 8 | } 9 | 10 | #main { 11 | display: grid; 12 | gap: 10px; 13 | width: 100vw; 14 | height: 50vh; 15 | padding: 5px; 16 | font-family: Verdana; 17 | grid-template-areas: 18 | "a a" 19 | "b b" 20 | "c d"; 21 | } 22 | 23 | /* Stile comune per tutti i div */ 24 | #main div { 25 | background-color: #cccccc; 26 | color: #000; 27 | display: flex; 28 | align-items: center; /* Centra il contenuto verticalmente */ 29 | justify-content: center; /* Centra il contenuto orizzontalmente */ 30 | } 31 | 32 | #a { 33 | grid-area: a; 34 | } 35 | 36 | #b { 37 | grid-area: b; 38 | } 39 | 40 | #c { 41 | grid-area: c; 42 | } 43 | 44 | #d { 45 | grid-area: d; 46 | } 47 | 48 | #e { 49 | display: none !important; 50 | } 51 | -------------------------------------------------------------------------------- /23-24/Lect3_HTML_CSS_Layout_Lab_2/EsercizioLayout_Differenziata/differenziata.css: -------------------------------------------------------------------------------- 1 | /* Stile per font */ 2 | .moulpali-regular { 3 | font-family: "Moulpali", sans-serif; 4 | font-weight: 400; 5 | font-style: normal; 6 | } 7 | 8 | body { 9 | font-family: "Moulpali", sans-serif; 10 | margin: 0; 11 | padding: 20px; 12 | display: flex; 13 | flex-direction: column; 14 | align-items: center; 15 | } 16 | 17 | h1 { 18 | text-transform: uppercase; 19 | margin: 1% 0; 20 | } 21 | 22 | h3 { 23 | text-transform: uppercase; 24 | } 25 | 26 | .flex-container { 27 | display: flex; 28 | flex-direction: column; /* Usate 'row' per il layout orizzontale o 'column' per il verticale */ 29 | align-items: center; 30 | gap: 20px; 31 | width: 100%; 32 | max-width: 800px; 33 | } 34 | 35 | .gallery { 36 | display: flex; 37 | flex-direction: column; 38 | /* flex-wrap: wrap; */ /* Permette agli elementi di andare a capo */ 39 | justify-content: center; /* Centra gli elementi orizzontalmente */ 40 | align-items: center; /* Centra gli elementi verticalmente */ 41 | gap: 20px; /* Distanza tra gli elementi */ 42 | width: 100%; 43 | max-width: 700px; 44 | } 45 | 46 | #first-row, #second-row { 47 | display: flex; 48 | flex-direction: row; 49 | flex-wrap: nowrap; 50 | gap: 20px; 51 | justify-content: space-around; /* Distribuisce equamente lo spazio intorno agli elementi */ 52 | width: 100%; /* Assicura che la row occupi tutta la larghezza disponibile */ 53 | } 54 | 55 | img { 56 | border-radius: 10%; 57 | } 58 | 59 | .image-container { 60 | text-align: center; 61 | background-color: white; 62 | border: 2px solid black; 63 | padding: 15px; 64 | border-radius: 10%; 65 | display: grid; 66 | gap: 2px; 67 | grid-template-rows: auto auto auto; /* Dimensioni automatiche - ovvero tutto l'elemento entra per la sua dimensione */ 68 | grid-template-areas: 69 | "top" 70 | "middle" 71 | "bottom"; 72 | box-shadow: 10px 8px 4px 0 rgba(0, 0, 0, 0.2); 73 | } 74 | 75 | .title, .subtitle { 76 | text-transform: uppercase; 77 | } 78 | 79 | img { 80 | width: 100%; 81 | height: auto; 82 | } 83 | 84 | .top .title { 85 | font-size: 25px; 86 | letter-spacing: 2px; 87 | font-weight: bold; 88 | grid-area: top; /* Assegna l'area 'top' */ 89 | } 90 | 91 | .top .subtitle { 92 | font-size: 18px; 93 | letter-spacing: 1px; 94 | grid-area: middle; /* Assegna l'area 'middle' */ 95 | } 96 | 97 | .top img { 98 | grid-area: bottom; /* Assegna l'area 'bottom' */ 99 | } 100 | 101 | .center .title { 102 | font-size: 25px; 103 | letter-spacing: 2px; 104 | font-weight: bold; 105 | grid-area: top; 106 | } 107 | 108 | .center .subtitle { 109 | font-size: 18px; 110 | letter-spacing: 1px; 111 | grid-area: bottom; 112 | } 113 | 114 | .center img { 115 | grid-area: middle; 116 | } 117 | 118 | .bottom .title { 119 | font-size: 25px; 120 | letter-spacing: 2px; 121 | font-weight: bold; 122 | grid-area: middle; 123 | } 124 | 125 | .bottom .subtitle { 126 | font-size: 18px; 127 | letter-spacing: 1px; 128 | grid-area: bottom; 129 | } 130 | 131 | .bottom img { 132 | grid-area: top; 133 | } -------------------------------------------------------------------------------- /23-24/Lect3_HTML_CSS_Layout_Lab_2/EsercizioLayout_Differenziata/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Homepage con Immagini - Grid e Flexbox 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

Differenziata

16 |

Categorie di riciclo

17 |
18 |
19 |
20 |
Plastica
21 |
Plastic
22 | Plastica 23 |
24 |
25 |
Carta
26 |
Paper
27 | Carta 28 |
29 |
30 |
Metallo
31 |
Metal
32 | Metallo 33 |
34 |
35 |
36 |
37 |
Misto
38 |
Undifferentiated
39 | Misto 40 |
41 |
42 |
Vetro
43 |
Glass
44 | Vetro 45 |
46 |
47 |
Organico
48 |
Biowaste
49 | Organico 50 |
51 |
52 |
53 |
54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /23-24/Lect3_HTML_CSS_Layout_Lab_2/EsercizioLayout_Differenziata/src/carta.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Postitisnt/TecWebLab_23-24/7b631f7b74d986eb434f094e6183c9a19f7befa2/23-24/Lect3_HTML_CSS_Layout_Lab_2/EsercizioLayout_Differenziata/src/carta.png -------------------------------------------------------------------------------- /23-24/Lect3_HTML_CSS_Layout_Lab_2/EsercizioLayout_Differenziata/src/metallo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Postitisnt/TecWebLab_23-24/7b631f7b74d986eb434f094e6183c9a19f7befa2/23-24/Lect3_HTML_CSS_Layout_Lab_2/EsercizioLayout_Differenziata/src/metallo.png -------------------------------------------------------------------------------- /23-24/Lect3_HTML_CSS_Layout_Lab_2/EsercizioLayout_Differenziata/src/misto.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Postitisnt/TecWebLab_23-24/7b631f7b74d986eb434f094e6183c9a19f7befa2/23-24/Lect3_HTML_CSS_Layout_Lab_2/EsercizioLayout_Differenziata/src/misto.png -------------------------------------------------------------------------------- /23-24/Lect3_HTML_CSS_Layout_Lab_2/EsercizioLayout_Differenziata/src/organico.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Postitisnt/TecWebLab_23-24/7b631f7b74d986eb434f094e6183c9a19f7befa2/23-24/Lect3_HTML_CSS_Layout_Lab_2/EsercizioLayout_Differenziata/src/organico.png -------------------------------------------------------------------------------- /23-24/Lect3_HTML_CSS_Layout_Lab_2/EsercizioLayout_Differenziata/src/plastica.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Postitisnt/TecWebLab_23-24/7b631f7b74d986eb434f094e6183c9a19f7befa2/23-24/Lect3_HTML_CSS_Layout_Lab_2/EsercizioLayout_Differenziata/src/plastica.png -------------------------------------------------------------------------------- /23-24/Lect3_HTML_CSS_Layout_Lab_2/EsercizioLayout_Differenziata/src/vetro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Postitisnt/TecWebLab_23-24/7b631f7b74d986eb434f094e6183c9a19f7befa2/23-24/Lect3_HTML_CSS_Layout_Lab_2/EsercizioLayout_Differenziata/src/vetro.png -------------------------------------------------------------------------------- /23-24/Lect3_HTML_CSS_Layout_Lab_2/HTMLCSSLab2_Layout_Slides.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Postitisnt/TecWebLab_23-24/7b631f7b74d986eb434f094e6183c9a19f7befa2/23-24/Lect3_HTML_CSS_Layout_Lab_2/HTMLCSSLab2_Layout_Slides.pdf -------------------------------------------------------------------------------- /23-24/Lect4_JS_Lab_1/Esercizi.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Postitisnt/TecWebLab_23-24/7b631f7b74d986eb434f094e6183c9a19f7befa2/23-24/Lect4_JS_Lab_1/Esercizi.zip -------------------------------------------------------------------------------- /23-24/Lect4_JS_Lab_1/Esercizi/Esercizi_Classe/Es1_base.js: -------------------------------------------------------------------------------- 1 | function onclick_fn(){ 2 | alert("Hello World"); 3 | } 4 | 5 | 6 | -------------------------------------------------------------------------------- /23-24/Lect4_JS_Lab_1/Esercizi/Esercizi_Classe/Es1_freccia.js: -------------------------------------------------------------------------------- 1 | let onclick_fn = () => alert('hello world'); 2 | //let onclick_fn = () => (alert('hello world')); 3 | //let onclick_fn = () => {alert('hello world');} 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /23-24/Lect4_JS_Lab_1/Esercizi/Esercizi_Classe/Es2_DOM_Manipulation.js: -------------------------------------------------------------------------------- 1 | function onclick_fn(){ 2 | var inner_html = document.getElementsByTagName('h1')[0].innerHTML; 3 | var para1 = document.getElementById('para1'); 4 | para1.textContent = inner_html; 5 | } 6 | 7 | 8 | -------------------------------------------------------------------------------- /23-24/Lect4_JS_Lab_1/Esercizi/Esercizi_Classe/Es3_Timer.js: -------------------------------------------------------------------------------- 1 | function onclick_fn() { 2 | var button = document.getElementsByTagName("button")[0]; 3 | var para = document.getElementById("para1"); 4 | button.disabled = true; 5 | var max_sec = sec = 10; 6 | para.textContent = 0; 7 | var timer = setInterval(function(){ 8 | para.textContent = max_sec - (--sec); 9 | if (sec <=0){ 10 | clearInterval(timer); 11 | button.disabled = false; 12 | } 13 | }, 1000); 14 | }; 15 | 16 | -------------------------------------------------------------------------------- /23-24/Lect4_JS_Lab_1/Esercizi/Esercizi_Classe/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Lab4: Esercizi Base Javascript 5 | 12 | 13 | 14 |

Prove Javascript

15 |

Un paragrafo di prova.

16 |

Test

17 | 18 | 19 | -------------------------------------------------------------------------------- /23-24/Lect4_JS_Lab_1/Esercizi/Esercizi_Esame/EsEsame_BaseHTML.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Esecuzione Funzioni JavaScript Esame 5 | 10 | 11 | 12 |
13 |

Come visualizzare il risultatlo

14 |

15 | Una volta linkato il file JS corretto, cliccare con 16 | il tasto destro del mouse sulla pagina, poi scegliere 17 | "ispeziona".
Infine, nella finestra, andare su Console. 18 |
I risultati saranno printati lì. 19 |

20 |
21 |
22 |

Esempio in paragrafo

23 | 24 |

Esempio in span

25 | 26 |
27 |

Esempio in div

28 |
29 |
30 |

Esempio in Section

31 |
32 |

Paragrafo finale

33 |
34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /23-24/Lect4_JS_Lab_1/Esercizi/Esercizi_Esame/ExEsame_1.js: -------------------------------------------------------------------------------- 1 | function mutate(a) { 2 | var b = "3"; 3 | for (var i = 1; i < 7; i=i+1) { 4 | b = b + a[i]; 5 | } 6 | return b; 7 | } 8 | var c = mutate("0,8,3,5,1,9,7,2,4,6"); 9 | console.log(c); // Stampa il risultato nella console del browser 10 | console.log(typeof c); // Stampa il datatype -------------------------------------------------------------------------------- /23-24/Lect4_JS_Lab_1/Slides_JS_1.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Postitisnt/TecWebLab_23-24/7b631f7b74d986eb434f094e6183c9a19f7befa2/23-24/Lect4_JS_Lab_1/Slides_JS_1.pdf -------------------------------------------------------------------------------- /23-24/Lect5_JS_Lab_2/Esercizi.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Postitisnt/TecWebLab_23-24/7b631f7b74d986eb434f094e6183c9a19f7befa2/23-24/Lect5_JS_Lab_2/Esercizi.zip -------------------------------------------------------------------------------- /23-24/Lect5_JS_Lab_2/Esercizi/Esercizio Esame in due parti/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5502 3 | } -------------------------------------------------------------------------------- /23-24/Lect5_JS_Lab_2/Esercizi/Esercizio Esame in due parti/Parte1/indexPt1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Esercizio HTML_CSS_JS_AJAX PT1 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 |

Dettagli degli eventi

13 |

Dai un'occhiata ai nostri ultimi spettacoli ed eventi per unirti a noi.

14 |
15 |
16 |

Elenco Eventi

17 |
18 |
19 |

Sunny Hill Festival

 20 |

140 Biglietti disponibili

21 |
22 |
23 |

Sep 16, 2023

24 |

18:00

25 |

-

26 |

22:00

27 |
28 |
29 |

Spiaggia Copacabana, Rio de Janeiro

30 |
31 |
32 | Acquista biglietti 33 |
34 |
35 |
36 |
37 |

Sunny Hill Festival

 38 |

140 Biglietti disponibili

39 |
40 |
41 |

Sep 16, 2023

42 |

18:00

43 |

-

44 |

22:00

45 |
46 |
47 |

Spiaggia Copacabana, Rio de Janeiro

48 |
49 |
50 | Acquista biglietti 51 |
52 |
53 |
54 |
55 |

Sunny Hill Festival

 56 |

140 Biglietti disponibili

57 |
58 |
59 |

Sep 16, 2023

60 |

18:00

61 |

-

62 |

22:00

63 |
64 |
65 |

Spiaggia Copacabana, Rio de Janeiro

66 |
67 |
68 | Acquista biglietti 69 |
70 |
71 |
72 | 73 | 74 | -------------------------------------------------------------------------------- /23-24/Lect5_JS_Lab_2/Esercizi/Esercizio Esame in due parti/Parte1/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0px; 3 | } 4 | 5 | .title{ 6 | background-image: url('http://diiorio.nws.cs.unibo.it/twe/07.06.2022a/shows_events_bg.jpg'); 7 | background-size: cover; 8 | width: 100vw; 9 | height: auto; 10 | padding: 100px 0px; 11 | } 12 | 13 | .title h1, .title p { 14 | text-align: center; 15 | color: white; 16 | } 17 | 18 | .evento.row{ 19 | background-color: white; 20 | padding: 30px; 21 | margin: 20px 40px; 22 | } 23 | 24 | h2, h4, p { 25 | text-align: center; 26 | font-family: "Courier"; 27 | } 28 | 29 | h4 { 30 | color: black !important; 31 | } 32 | 33 | .elenco h1 { 34 | text-align: center; 35 | padding: 30px 0px 50px 0px; 36 | } 37 | 38 | .elenco { 39 | background-color: lightgray; 40 | height: 100%; 41 | padding-bottom: 100px; 42 | } 43 | 44 | .col-lg-3 { 45 | text-align: center; 46 | } 47 | 48 | .btn.btn-primary { 49 | background-color: black; 50 | border-color: black; 51 | font-family: "Courier"; 52 | color: white 53 | } 54 | 55 | .col-md-12.col-lg-3 a { 56 | text-decoration: none; 57 | color: white; 58 | } 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /23-24/Lect5_JS_Lab_2/Esercizi/Esercizio Esame in due parti/Parte2/indexPt2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Esercizio HTML_CSS_JS_AJAX PT2 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Dettagli degli eventi

14 |

Dai un'occhiata ai nostri ultimi spettacoli ed eventi per unirti a noi.

15 |
16 |
17 |

Elenco Eventi

18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /23-24/Lect5_JS_Lab_2/Esercizi/Esercizio Esame in due parti/Parte2/script.js: -------------------------------------------------------------------------------- 1 | function getEventi(){ 2 | let request = new XMLHttpRequest(); 3 | request.open("GET", "http://diiorio.nws.cs.unibo.it/twe/07.06.2022a/api/index.php"); 4 | request.send(); 5 | request.onload = () => { 6 | console.log(request); 7 | if (request.status == 200) { 8 | var eventi = JSON.parse(request.response) 9 | console.log(eventi); 10 | var divElenco = document.getElementsByClassName('elenco')[0]; 11 | for(var i=0; i < eventi.length; i++){ 12 | if(eventi[i].evidenza){ 13 | var divRow = document.createElement('div'); 14 | divRow.setAttribute('class', 'evento row'); 15 | 16 | var divCol = document.createElement('div'); 17 | divCol.setAttribute('class', 'col-md-12 col-lg-3'); 18 | var h4 = document.createElement('a'); 19 | h4.innerHTML = "

" + eventi[i].title + "

" 20 | h4.setAttribute('href', eventi[i].id) 21 | var p = document.createElement('p'); 22 | p.innerText = eventi[i].n_biglietti + " Biglietti disponibili" 23 | divCol.appendChild(h4) 24 | divCol.appendChild(p) 25 | divRow.appendChild(divCol) 26 | 27 | divCol = document.createElement('div'); 28 | divCol.setAttribute('class', 'col-md-12 col-lg-3'); 29 | p = document.createElement('p'); 30 | p.innerText = eventi[i].time 31 | divCol.appendChild(p) 32 | p = document.createElement('p'); 33 | p.innerText = eventi[i].ora_min + ":00" 34 | divCol.appendChild(p) 35 | p = document.createElement('p'); 36 | p.innerText = "-" 37 | divCol.appendChild(p) 38 | p = document.createElement('p'); 39 | p.innerText = eventi[i].ora_max + ":00" 40 | divCol.appendChild(p) 41 | divRow.appendChild(divCol) 42 | 43 | divCol = document.createElement('div'); 44 | divCol.setAttribute('class', 'col-md-12 col-lg-3'); 45 | p = document.createElement('p'); 46 | p.innerText = eventi[i].place 47 | divCol.appendChild(p) 48 | divRow.appendChild(divCol) 49 | 50 | divCol = document.createElement('div'); 51 | divCol.setAttribute('class', 'col-md-12 col-lg-3'); 52 | var a = document.createElement('a'); 53 | a.setAttribute('class', 'btn btn-primary') 54 | a.setAttribute('href', 'ticket-detail.com') 55 | a.innerHTML = "Acquista Biglietti" 56 | divCol.appendChild(a) 57 | divRow.appendChild(divCol) 58 | 59 | 60 | divElenco.appendChild(divRow); 61 | } 62 | } 63 | } else { 64 | console.log(`error ${request.status} ${request.statusText}`) 65 | } 66 | } 67 | } -------------------------------------------------------------------------------- /23-24/Lect5_JS_Lab_2/Esercizi/Esercizio Esame in due parti/Parte2/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0px; 3 | } 4 | 5 | .title{ 6 | background-image: url('http://diiorio.nws.cs.unibo.it/twe/07.06.2022a/shows_events_bg.jpg'); 7 | background-size: cover; 8 | width: 100vw; 9 | height: auto; 10 | padding: 100px 0px; 11 | } 12 | 13 | .title h1, .title p { 14 | text-align: center; 15 | color: white; 16 | } 17 | 18 | .evento.row{ 19 | background-color: white; 20 | padding: 30px; 21 | margin: 20px 40px; 22 | } 23 | 24 | h2, h4, p { 25 | text-align: center; 26 | font-family: "Courier"; 27 | } 28 | 29 | h4 { 30 | color: black !important; 31 | } 32 | 33 | .elenco h1 { 34 | text-align: center; 35 | padding: 30px 0px 50px 0px; 36 | } 37 | 38 | .elenco { 39 | background-color: lightgray; 40 | height: 100%; 41 | padding-bottom: 100px; 42 | } 43 | 44 | .col-lg-3 { 45 | text-align: center; 46 | } 47 | 48 | .btn.btn-primary { 49 | background-color: black; 50 | border-color: black; 51 | font-family: "Courier"; 52 | color: white; 53 | } 54 | 55 | .col-md-12.col-lg-3 a { 56 | text-decoration: none; 57 | color: white; 58 | } 59 | -------------------------------------------------------------------------------- /23-24/Lect5_JS_Lab_2/Esercizi/Esercizio HTML_CSS_JS/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /23-24/Lect5_JS_Lab_2/Esercizi/Esercizio HTML_CSS_JS/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Lista dei Desideri 5 | 6 | 7 | 8 | 9 |

Lista dei desideri

10 |

Prodotti

11 | 12 |
13 | 18 |
19 | 20 |

La tua lista dei desideri :

21 |
22 |
23 | 24 | 25 | 26 |
27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /23-24/Lect5_JS_Lab_2/Esercizi/Esercizio HTML_CSS_JS/script.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', function() { 2 | function addProduct(containerId, countId, buttonId) { 3 | var container = document.getElementById(containerId); 4 | var countList = document.getElementById(countId); 5 | var countProdotto = parseInt(countList.textContent, 10); 6 | countProdotto++; 7 | 8 | if (countProdotto === 1) { 9 | container.style.visibility = 'visible'; 10 | } 11 | if (countProdotto === 10) { 12 | document.getElementById(buttonId).disabled = true; 13 | } 14 | 15 | countList.textContent = countProdotto; 16 | } 17 | 18 | document.getElementById('btnP1').addEventListener('click', function() { 19 | addProduct('container1', 'countP1', 'btnP1'); 20 | }); 21 | document.getElementById('btnP2').addEventListener('click', function() { 22 | addProduct('container2', 'countP2', 'btnP2'); 23 | }); 24 | document.getElementById('btnP3').addEventListener('click', function() { 25 | addProduct('container3', 'countP3', 'btnP3'); 26 | }); 27 | }); 28 | 29 | -------------------------------------------------------------------------------- /23-24/Lect5_JS_Lab_2/Esercizi/Esercizio HTML_CSS_JS/style.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | max-height: 100vh !important; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | body { 8 | font-family: 'Arial', sans-serif; 9 | background: #f4f4f4; 10 | display: flex; 11 | flex-direction: column; 12 | } 13 | 14 | h1, h2 { 15 | color: #5D5C61; 16 | margin: 0 20px; 17 | } 18 | 19 | ul { 20 | list-style: none; 21 | padding: 0; 22 | margin: 0; 23 | } 24 | 25 | li { 26 | background: #fff; 27 | margin-bottom: 10px; 28 | padding: 15px; 29 | border-radius: 5px; 30 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 31 | display: flex; 32 | justify-content: space-between; 33 | align-items: center; 34 | } 35 | 36 | span { 37 | font-size: 18px; 38 | } 39 | 40 | input[type="button"] { 41 | padding: 10px 20px; 42 | border: none; 43 | border-radius: 5px; 44 | background-color: #77DD77; 45 | color: white; 46 | cursor: pointer; 47 | font-size: 16px; 48 | transition: background-color 0.3s ease; 49 | } 50 | 51 | input[type="button"]:hover { 52 | background-color: #5CAB7D; 53 | } 54 | 55 | #containerProdotti { 56 | background: #ffffff; 57 | padding: 15px; 58 | border-radius: 5px; 59 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 60 | margin: 20px; 61 | overflow: auto; 62 | } 63 | 64 | #containerProdotti p { 65 | color: #333; 66 | font-size: 16px; 67 | margin: 5px 0; 68 | } 69 | 70 | #containerProdotti p span { 71 | font-weight: bold; 72 | } 73 | -------------------------------------------------------------------------------- /23-24/Lect5_JS_Lab_2/Esercizi/Esercizio_casa/EsEsame_BaseHTML.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Esecuzione Funzioni JavaScript Esame 5 | 10 | 11 | 12 |
13 |

Come visualizzare il risultato

14 |

15 | Una volta linkato il file JS corretto, cliccare con 16 | il tasto destro del mouse sulla pagina, poi scegliere 17 | "ispeziona".
Infine, nella finestra, andare su Console. 18 |
I risultati saranno printati lì. 19 |

20 |
21 |
22 |

Esempio in paragrafo

23 | 24 |

Esempio in span

25 | 26 |
27 |

Esempio in div

28 |
29 |
30 |

Esempio in Section

31 |
32 |

Paragrafo finale

33 |
34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /23-24/Lect5_JS_Lab_2/Esercizi/Esercizio_casa/ExEsame_2.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', (event) => { 2 | function raccogliEManipolaElementi() { 3 | // Raccoglie tutti gli elementi con classe "C1" e "C2" 4 | var c1elements = document.getElementsByClassName("C1"); 5 | var c2elements = document.getElementsByClassName("C2"); 6 | 7 | // Primo array associativo per conservare i contenuti 8 | var array_1 = {}; 9 | // Secondo array associativo per conservare i contenuti modificati 10 | var array_2 = {}; 11 | 12 | // Funzione ausiliaria per popolare l'array associativo 13 | function popolaArray(daElementi, array, indiceBase = 0) { 14 | for (var i = 0; i < daElementi.length; i++) { 15 | // Creazione di una chiave univoca per ogni elemento con un indice incrementale basato su indiceBase 16 | var chiave = 'key_' + (i + indiceBase) + '_'; 17 | // Aggiunta del contenuto dell'elemento all'array associativo 18 | array[chiave] = daElementi[i].textContent; 19 | } 20 | } 21 | 22 | // Popola array_1 con gli elementi di C1 23 | popolaArray(c1elements, array_1); 24 | 25 | // Calcola l'indice di base per gli elementi C2, che è uguale al numero di elementi C1 26 | var indiceBaseC2 = c1elements.length; // Indice di base per gli elementi di C2 27 | popolaArray(c2elements, array_1, indiceBaseC2); 28 | 29 | // Creazione di array_2 con le stesse chiavi di array_1 ma terminanti in "placeholder" 30 | for (var key in array_1) { 31 | var chiaveModificata = key + "placeholder"; 32 | array_2[chiaveModificata] = array_1[key]; 33 | } 34 | 35 | // Ritorna entrambi gli array associativi 36 | return [array_1, array_2]; 37 | } 38 | 39 | // Esempio di come chiamare la funzione e visualizzare il risultato 40 | var risultati = raccogliEManipolaElementi(); 41 | console.log("Array 1:", risultati[0]); 42 | console.log("Array 2:", risultati[1]); 43 | }); 44 | -------------------------------------------------------------------------------- /23-24/Lect5_JS_Lab_2/Slides_JS_2.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Postitisnt/TecWebLab_23-24/7b631f7b74d986eb434f094e6183c9a19f7befa2/23-24/Lect5_JS_Lab_2/Slides_JS_2.pdf -------------------------------------------------------------------------------- /23-24/Lect6_Simulazione_Esame/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /23-24/Lect6_Simulazione_Esame/Esercizi.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Postitisnt/TecWebLab_23-24/7b631f7b74d986eb434f094e6183c9a19f7befa2/23-24/Lect6_Simulazione_Esame/Esercizi.zip -------------------------------------------------------------------------------- /23-24/Lect6_Simulazione_Esame/Esercizi/Esercizio1/bunny.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Postitisnt/TecWebLab_23-24/7b631f7b74d986eb434f094e6183c9a19f7befa2/23-24/Lect6_Simulazione_Esame/Esercizi/Esercizio1/bunny.jpg -------------------------------------------------------------------------------- /23-24/Lect6_Simulazione_Esame/Esercizi/Esercizio1/esercizio1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Esercizio1 5 | 6 | 7 | 8 | 9 |
10 |
11 |

Come prendersi cura di un coniglio nano

12 |

I conigli sono animali unici. E in quanto tali hanno bisono di cura, amore, e pazienda. Vogliono che le persone spendono del tempo con loro giocando a prendedosene cura.

13 |

Ecco qui per te una panoramica su come prenderti cura del tuo coniglio nano. Per maggiori informazioni puoi andare alla loro pagina Wikipedia.

14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 |
VegetalePer il coniglio...
RadicchioVa bene
SedanoVa bene
AvocadoNon va bene
BroccoliNon va bene
CarotaVa bene
41 | 42 | Se hai domande, contattaci: 43 | 44 |
45 | Il tuo email 46 | 47 | Il tuo messaggio 48 | 49 | Tipo di domanda 50 | 55 |
56 | 57 | 58 |
59 | 60 |
61 |

Altri suggerimenti

62 |

63 | Prendersi cura di un cane 64 | Semptember 1st, 2022 65 | I cani sono animali molto... 66 | Read more 67 |

68 |

69 | Prendersi cura di un gatto 70 | April 1st, 2020 71 | Alcuni dicono che i gatti... 72 | Read more 73 |

74 | 75 |
76 |
77 | 78 | -------------------------------------------------------------------------------- /23-24/Lect6_Simulazione_Esame/Esercizi/Esercizio1/stile.css: -------------------------------------------------------------------------------- 1 | /* Struttura Generale */ 2 | *{ 3 | font-size: 15px; 4 | } 5 | 6 | body{ 7 | background-color:#f5f5d5; 8 | } 9 | 10 | body>div { 11 | width: 75vw; 12 | margin-left:auto; 13 | margin-right:auto; 14 | display: flex; 15 | flex-direction: row; 16 | gap: 5vw; 17 | padding-bottom: 2vh; 18 | } 19 | h2{ 20 | color:green; 21 | font-size: 25px; 22 | } 23 | 24 | a{ 25 | width: fit-content; 26 | color: #af32b1; 27 | } 28 | 29 | a:hover{ 30 | background-color: yellow; 31 | } 32 | 33 | /* Parte sinistra */ 34 | body>div>div:first-child{ 35 | width:60%; 36 | margin-left:5%; 37 | margin-right:5%; 38 | } 39 | 40 | body>div>div:first-child>p{ 41 | margin-top: 2vh; 42 | margin-bottom:2vh; 43 | color: grey; 44 | } 45 | 46 | table{ 47 | margin-top: 4vh; 48 | margin-bottom: 4vh; 49 | width:100%; 50 | } 51 | 52 | th{ 53 | text-align:left; 54 | text-indent: 2%; 55 | color:white; 56 | background-color:black; 57 | height: 3vh; 58 | } 59 | 60 | td{ 61 | border-top: solid 1px white; 62 | text-indent: 2%; 63 | height: 3vh; 64 | } 65 | 66 | body>div>div:first-child>span{ 67 | color:grey; 68 | } 69 | 70 | body>div>div:first-child>div{ 71 | margin-top: 5%; 72 | display: grid; 73 | grid-template-columns: 25% 60%; 74 | grid-template-rows: 6vh 12vh 6vh; 75 | color:grey; 76 | gap: 1vh; 77 | } 78 | 79 | input{ 80 | border: solid #dbd9d9 1px; 81 | } 82 | 83 | select{ 84 | height: min-content; 85 | background-color: #ffffff; 86 | } 87 | 88 | button{ 89 | float: right; 90 | background-color:green; 91 | padding-left: 2vw; 92 | padding-right: 2vw; 93 | padding-top: 0.5vh; 94 | padding-bottom: 0.5vh; 95 | color:white; 96 | } 97 | 98 | /* Parte destra */ 99 | body>div>div:nth-child(2){ 100 | width: 25%; 101 | margin-right: 5%; 102 | } 103 | 104 | body>div>div:nth-child(2)>p{ 105 | display: flex; 106 | flex-direction: column; 107 | margin-top:3vh; 108 | margin-bottom:5vh; 109 | } 110 | 111 | body>div>div:nth-child(2)>p>span:first-child{ 112 | color:green; 113 | font-size: 18px; 114 | font-weight: 400; 115 | } 116 | 117 | body>div>div:nth-child(2)>p>span:nth-child(2){ 118 | font-style: italic; 119 | margin-bottom: 2vh; 120 | } 121 | 122 | body>div>div:nth-child(2)>p>span:nth-child(3){ 123 | color: grey; 124 | } 125 | 126 | img{ 127 | width: 80%; 128 | height: auto; 129 | } 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | -------------------------------------------------------------------------------- /23-24/Lect6_Simulazione_Esame/Esercizi/Esercizio2/Version1/esercizio2a.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Esercizio2 - No Listener 5 | 6 | 7 | 8 | 9 |
10 | Parti da: secondi. 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /23-24/Lect6_Simulazione_Esame/Esercizi/Esercizio2/Version1/script.js: -------------------------------------------------------------------------------- 1 | function avvia(){ 2 | var n = document.getElementById("input").value; 3 | console.log(n); 4 | var spanOutput = document.getElementById("output"); 5 | var avviaButton = document.querySelector('button'); 6 | avviaButton.disabled = true; 7 | 8 | var timer = setInterval(function(){ 9 | spanOutput.innerHTML = n; 10 | 11 | if(n > 0){ 12 | n--; 13 | }else{ 14 | spanOutput.innerHTML = "Fatto!"; 15 | clearInterval(timer); 16 | avviaButton.disabled = false; 17 | } 18 | }, 1000); 19 | } 20 | 21 | 22 | -------------------------------------------------------------------------------- /23-24/Lect6_Simulazione_Esame/Esercizi/Esercizio2/Version1/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | font-size: large; 3 | } 4 | 5 | #contenitore{ 6 | display: flex; 7 | flex-direction: column; 8 | } 9 | button, input{ 10 | width: min-content; 11 | padding: 5px; 12 | } 13 | 14 | button{ 15 | margin-top: 2vh; 16 | margin-bottom: 5vh; 17 | } 18 | 19 | #output{ 20 | font-size: 40px; 21 | } 22 | -------------------------------------------------------------------------------- /23-24/Lect6_Simulazione_Esame/Esercizi/Esercizio2/Version2/esercizio2b.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Esercizio2 - Listener 5 | 6 | 7 | 8 | 9 | 10 |
11 | Parti da: secondi. 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /23-24/Lect6_Simulazione_Esame/Esercizi/Esercizio2/Version2/script.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', function() { 2 | var avviaButton = document.getElementById('avviaButton'); 3 | avviaButton.addEventListener('click', avvia); 4 | 5 | function avvia() { 6 | var n = document.getElementById("input").value; 7 | console.log(n); 8 | var spanOutput = document.getElementById("output"); 9 | avviaButton.disabled = true; 10 | 11 | var timer = setInterval(function() { 12 | spanOutput.innerHTML = n; 13 | 14 | if (n > 0) { 15 | n--; 16 | } else { 17 | spanOutput.innerHTML = "Fatto!"; 18 | clearInterval(timer); 19 | avviaButton.disabled = false; 20 | } 21 | }, 1000); 22 | } 23 | }); 24 | 25 | 26 | -------------------------------------------------------------------------------- /23-24/Lect6_Simulazione_Esame/Esercizi/Esercizio2/Version2/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | font-size: large; 3 | } 4 | 5 | #contenitore{ 6 | display: flex; 7 | flex-direction: column; 8 | } 9 | button, input{ 10 | width: min-content; 11 | padding: 5px; 12 | } 13 | 14 | button{ 15 | margin-top: 2vh; 16 | margin-bottom: 5vh; 17 | } 18 | 19 | #output{ 20 | font-size: 40px; 21 | } 22 | 23 | 24 | -------------------------------------------------------------------------------- /23-24/Lect6_Simulazione_Esame/Esercizi/Esercizio3/esercio3.yaml: -------------------------------------------------------------------------------- 1 | swagger: '2.0' 2 | info: 3 | version: 0.0.1 4 | title: "Esercizio 3" 5 | description: "API per la gestione di serie tv" 6 | 7 | paths: 8 | /serie/: 9 | get: 10 | description: "Ottenere l'elenco di tutte le serie TV di un dato genere e pubblicate dopo una data specificata" 11 | operationId: getEpisodeByGenereAndData 12 | parameters: 13 | - name: dataPubb 14 | in: query 15 | type: string 16 | required: true 17 | - name: genere 18 | in: query 19 | required: true 20 | type: string 21 | enum: 22 | - "animazione" 23 | - "avventura" 24 | - "commedia" 25 | - "azione" 26 | - "documentario" 27 | responses: 28 | 200: 29 | description: "Retrieved" 30 | schema: 31 | type: array 32 | items: 33 | $ref: "#/definitions/Serie" 34 | 400: 35 | description: "I parametri in input non sono corretti" 36 | 37 | /serie/{idSerie}/episodi/: 38 | post: 39 | description: "Aggiungere un nuovo episodio ad una serie TV" 40 | operationId: addEpisodeById 41 | parameters: 42 | - name: idSerie 43 | in: path 44 | type: string 45 | required: true 46 | - in: body 47 | name: episodio 48 | required: true 49 | schema: 50 | $ref: "#/definitions/Episodio" 51 | responses: 52 | 200: 53 | description: "Episodio aggiunto" 54 | 400: 55 | description: "I parametri in input non sono corretti" 56 | 57 | /serie/{idSerie}/episodi/{numero}: 58 | put: 59 | description: "Modificare il titolo di uno specifico episodio di una serie TV" 60 | operationId: setTitleEpisodeById 61 | parameters: 62 | - name: idSerie 63 | in: path 64 | type: string 65 | required: true 66 | - name: numero 67 | in: path 68 | type: integer 69 | required: true 70 | - in: body 71 | name: titolo 72 | required: true 73 | schema: 74 | type: object 75 | properties: 76 | titolo: 77 | type: string 78 | responses: 79 | 200: 80 | description: "Titolo episodio modificato" 81 | 400: 82 | description: "I parametri in input non sono corretti" 83 | 84 | definitions: 85 | Serie: 86 | type: object 87 | required: 88 | - id 89 | - titolo 90 | - dataPubb 91 | - genere 92 | - episodi 93 | properties: 94 | id: 95 | type: string 96 | example: "S0001" 97 | description: "ID della serie tv" 98 | titolo: 99 | type: string 100 | example: "Diavoli" 101 | description: "Titolo della serie tv" 102 | dataPubb: 103 | type: string 104 | format: date 105 | example: "2022-01-01" 106 | description: "Data di pubblicazione della serie" 107 | genere: 108 | type: string 109 | enum: 110 | - "animazione" 111 | - "avventura" 112 | - "commedia" 113 | - "azione" 114 | - "documentario" 115 | example: "animazione" 116 | description: "Genere della serie" 117 | episodi: 118 | type: array 119 | items: 120 | $ref: "#/definitions/Episodio" 121 | 122 | Episodio: 123 | type: object 124 | required: 125 | - numero 126 | - titolo 127 | properties: 128 | numero: 129 | type: integer 130 | example: 10 131 | description: "Numero della puntata" 132 | titolo: 133 | type: string 134 | example: "Il ritorno in Italia" 135 | description: "Titolo della puntata" 136 | 137 | 138 | -------------------------------------------------------------------------------- /23-24/Lect6_Simulazione_Esame/Esercizi/EsercizioBonus/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Calcolatrice Speciale 7 | 8 | 9 | 10 |
11 |

Calcolatore: la moltiplicazione e la divisione di due numeri

12 |

Basta inserire due numeri e premere un pulsante!

13 |
14 | 15 | 16 |
17 |
18 | 19 | 20 |
21 |

Il risultato è: ?

22 |

Numeri magici del giorno:

23 | 24 |

Numeri magici trovati:

25 | 26 |

Elenco delle tue moltiplicazioni e divisioni:

27 | 28 |
29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /23-24/Lect6_Simulazione_Esame/Esercizi/EsercizioBonus/script.js: -------------------------------------------------------------------------------- 1 | // Aspetta il caricamento del documento prima di eseguire le funzioni 2 | document.addEventListener('DOMContentLoaded', function() { 3 | fetchMagicNumbers(); 4 | document.getElementById('multiply').addEventListener('click', function() { calculate('*'); }); 5 | document.getElementById('divide').addEventListener('click', function() { calculate('/'); }); 6 | }); 7 | 8 | // Recupera i numeri magici dal servizio web 9 | function fetchMagicNumbers() { 10 | const xhr = new XMLHttpRequest(); 11 | xhr.open('GET', 'http://diiorio.nws.cs.unibo.it/twe/14.07.2022b/api/index.php', true); 12 | 13 | xhr.onload = function() { 14 | if (xhr.status === 200) { 15 | const data = JSON.parse(xhr.responseText); 16 | const magicList = document.getElementById('magicNumbers'); 17 | data.numeri_magici.forEach(function(number) { 18 | const li = document.createElement('li'); 19 | li.textContent = number; 20 | magicList.appendChild(li); 21 | }); 22 | } else { 23 | console.error('Errore durante il caricamento dei numeri magici:', xhr.statusText); 24 | } 25 | }; 26 | 27 | xhr.onerror = function() { 28 | console.error('Errore di rete durante il tentativo di recupero dei numeri magici'); 29 | }; 30 | 31 | xhr.send(); 32 | } 33 | 34 | 35 | // Calcola il risultato e aggiorna le liste 36 | function calculate(op) { 37 | const num1 = document.getElementById('number1').value; 38 | const num2 = document.getElementById('number2').value; 39 | if (num1 === '' || num2 === '' || (op === '/' && num2 === '0')) { 40 | alert('Per favore, inserisci dei numeri validi (non è possibile dividere per zero).'); 41 | return; 42 | } 43 | 44 | const result = op === '*' ? num1 * num2 : num1 / num2; 45 | document.getElementById('result').textContent = result; 46 | 47 | // Aggiorna l'elenco delle operazioni 48 | const operationText = `${num1} ${op} ${num2} = ${result}`; 49 | const newOpLi = document.createElement('li'); 50 | newOpLi.textContent = operationText; 51 | document.getElementById('operationsList').appendChild(newOpLi); 52 | 53 | // Verifica se il risultato è un numero magico 54 | const magicNumbers = Array.from(document.getElementById('magicNumbers').children).map(li => li.textContent); 55 | if (magicNumbers.includes(String(result))) { 56 | const newMagicLi = document.createElement('li'); 57 | newMagicLi.textContent = result; 58 | document.getElementById('magicFound').appendChild(newMagicLi); 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /23-24/Lect6_Simulazione_Esame/Esercizi/EsercizioBonus/scriptSnello.js: -------------------------------------------------------------------------------- 1 | // Aspetta il caricamento del documento prima di eseguire le funzioni 2 | document.addEventListener('DOMContentLoaded', function() { 3 | fetchMagicNumbers(); 4 | document.getElementById('multiply').addEventListener('click', function() { calculate('*'); }); 5 | document.getElementById('divide').addEventListener('click', function() { calculate('/'); }); 6 | }); 7 | 8 | // Recupera i numeri magici dal servizio web 9 | function fetchMagicNumbers() { 10 | fetch('http://diiorio.nws.cs.unibo.it/twe/14.07.2022b/api/index.php') 11 | .then(response => response.json()) 12 | .then(data => { 13 | const magicList = document.getElementById('magicNumbers'); 14 | data.numeri_magici.forEach(number => { 15 | const li = document.createElement('li'); 16 | li.textContent = number; 17 | magicList.appendChild(li); 18 | }); 19 | }) 20 | .catch(error => console.error('Errore durante il caricamento dei numeri magici:', error)); 21 | } 22 | 23 | // Calcola il risultato e aggiorna le liste 24 | function calculate(op) { 25 | const num1 = document.getElementById('number1').value; 26 | const num2 = document.getElementById('number2').value; 27 | if (num1 === '' || num2 === '' || (op === '/' && num2 === '0')) { 28 | alert('Per favore, inserisci dei numeri validi (non è possibile dividere per zero).'); 29 | return; 30 | } 31 | 32 | const result = op === '*' ? num1 * num2 : num1 / num2; 33 | document.getElementById('result').textContent = result; 34 | 35 | // Aggiorna l'elenco delle operazioni 36 | const operationText = `${num1} ${op} ${num2} = ${result}`; 37 | const newOpLi = document.createElement('li'); 38 | newOpLi.textContent = operationText; 39 | document.getElementById('operationsList').appendChild(newOpLi); 40 | 41 | // Verifica se il risultato è un numero magico 42 | const magicNumbers = Array.from(document.getElementById('magicNumbers').children).map(li => li.textContent); 43 | if (magicNumbers.includes(String(result))) { 44 | const newMagicLi = document.createElement('li'); 45 | newMagicLi.textContent = result; 46 | document.getElementById('magicFound').appendChild(newMagicLi); 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /23-24/Lect6_Simulazione_Esame/Esercizi/EsercizioBonus/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, sans-serif; 3 | margin: 0; 4 | padding: 0; 5 | display: flex; 6 | flex-direction: column; 7 | align-items: center; 8 | justify-content: center; 9 | } 10 | 11 | .container { 12 | text-align: left; 13 | margin: 20px; 14 | margin-left: 80px; 15 | width: 100%; 16 | } 17 | 18 | .input-section { 19 | display: flex; 20 | flex-direction: column; 21 | margin-bottom: 5px; 22 | } 23 | 24 | .buttons-section { 25 | display: flex; 26 | flex-direction: row; 27 | } 28 | 29 | label { 30 | margin-right: 5px; 31 | } 32 | 33 | input[type="number"] { 34 | margin-right: 5px; 35 | padding: 5px; 36 | font-size: 16px; 37 | } 38 | 39 | button { 40 | margin: 5px; 41 | padding: 5px; 42 | font-size: 16px; 43 | cursor: pointer; 44 | } 45 | 46 | #result, #magicNumbers, #magicFound, #operationsList { 47 | margin: 10px 0; 48 | padding: 5px; 49 | font-weight: bold; 50 | } 51 | 52 | ul { 53 | list-style-type: none; 54 | padding-left: 0; 55 | } 56 | -------------------------------------------------------------------------------- /23-24/Lect6_Simulazione_Esame/SimulazioneEsame.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Postitisnt/TecWebLab_23-24/7b631f7b74d986eb434f094e6183c9a19f7befa2/23-24/Lect6_Simulazione_Esame/SimulazioneEsame.pdf -------------------------------------------------------------------------------- /23-24/Lect6_Simulazione_Esame/TestoCompletoSimulazione.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Postitisnt/TecWebLab_23-24/7b631f7b74d986eb434f094e6183c9a19f7befa2/23-24/Lect6_Simulazione_Esame/TestoCompletoSimulazione.pdf -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | ISC License 2 | 3 | Copyright 2024 Lorenzo Paolini 4 | 5 | Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # TecWebLab 2 | La repository contiene tutte le slide e gli esercizi proposti per il Laboratorio di Tecnologie Web 3 | --------------------------------------------------------------------------------