Relazione Esercizi di Informatica

Sasso Carta Forbici

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sasso-carta-forbici</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>
    <div class="immagini">
        <img src="https://google.com/Immagini/sasso.png" alt="" id="sasso" onclick="seleziona(1)">
        <img src="https://google.com/Immagini/carta.png" alt="" id="carta" onclick="seleziona(2)">
        <img src="https://google.com/Immagini/forbice.png" alt="" id="forbici" onclick="seleziona(3)">
    </div>
    <br>
    <br>
    <div class="bottone">
        <button id="sfida" onclick="gioco()">Sfida!</button>
    </div>
</body>
</html>

CSS

.immagini{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.bottone{
    display: flex;
    justify-content: center;
    align-items: center;
}

#sasso, #carta, #forbici{
    border: 3px solid;
    border-color: gray;
    width: 500px;
    height: 500px;
}

#sfida{
    width: 100px;
    height: 50px;
    font-size: 25px;
    background-color: green;
    color: white;
}

JavaScript

let scelta;

function seleziona(opzione){
    document.querySelector("#sasso").style.borderColor = "gray";
    document.querySelector("#carta").style.borderColor = "gray";
    document.querySelector("#forbici").style.borderColor = "gray";
    
    switch (opzione){
        case 1:
            document.querySelector("#sasso").style.borderColor = "red";
            break;
        case 2:
            document.querySelector("#carta").style.borderColor = "red";
            break;
        default:
            document.querySelector("#forbici").style.borderColor = "red";
    }
    scelta = opzione;
}

function gioco(){
    let computer = Math.floor(Math.random()*3+1);
    let ris;
    let opzPlayer, opzComp;

    if (scelta == computer){
        ris = "Pareggio: ";
    } else if((scelta == 1 && computer == 3) || (scelta == 2 && computer == 1) || (scelta == 3 && computer == 2)){
        ris = "Vittoria: ";
    } else {
        ris = "Sconfitta: ";
    }

    switch (scelta){
        case 1: opzPlayer = "sasso"; break;
        case 2: opzPlayer = "carta"; break;
        default: opzPlayer = "forbici";
    }

    switch (computer){
        case 1: opzComp = "sasso"; break;
        case 2: opzComp = "carta"; break;
        default: opzComp = "forbici";
    }

    ris += opzPlayer + " vs " + opzComp;

    let text = document.createElement("h1");
    text.textContent = ris;
    text.style.textAlign = "center";
    document.body.appendChild(text);
}

Lista Spesa

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lista della spesa</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>
    <div class="aggiungiNuoviElementi">
        <h1>Lista della spesa</h1>
        <div class="interruzione"></div>
        <form action="">
            <input type="text" id="elemento" placeholder="Inserisci un nuovo elemento alla lista">
            <input type="button" value="Aggiungi" onclick="aggiungi()">
        </form>
    </div>

    <h1>Lista</h1>
    <div class="pulsanti">
        <button id="rimuoviLista" onclick="svuotaLista()">Svuota Lista</button>
        <button id="rimuoviComprati" onclick="rimuoviComprati()">Rimuovi elementi comprati</button>
    </div>
    <ul id="lista"></ul>
</body>
</html>

CSS

.aggiungiNuoviElementi {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: fit-content;
    padding: 15px;
    border: 2px solid black;
    margin: 0 auto;
}

.aggiungiNuoviElementi h1 { margin: 0; }
.interruzione { width: 100%; }

#elemento {
    width: 300px;
    height: 40px;
    font-size: 17px;
}

body { text-align: center; }

button, input[type="button"] {
    font-size: 16px;
    padding: 10px;
    margin: 5px;
}

#lista {
    list-style-type: none;
    padding: 0;
}

li {
    font-size: 20px;
    margin: 15px;
}

JavaScript

let contatore = 0;

function aggiungi(){
    let testo = document.getElementById("elemento").value;
    if (testo == ""){
        alert("Inserisci un oggetto valido");
        return;
    }

    let nuovoElemento = document.createElement("li");
    nuovoElemento.textContent = testo + "  ";
    nuovoElemento.id = "elemento" + contatore;
    nuovoElemento.addEventListener("click", segna);
    
    let bottoneRimuovi = document.createElement("button");
    bottoneRimuovi.textContent = "Rimuovi";
    bottoneRimuovi.addEventListener("click", rimuovi);
    
    document.getElementById("lista").appendChild(nuovoElemento);
    nuovoElemento.appendChild(bottoneRimuovi);
    document.getElementById("elemento").value = "";
    contatore++;
}

function segna(){
    if (this.style.textDecoration != "line-through"){
        this.style.textDecoration = "line-through"
    } else{
        this.style.textDecoration = "none";
    }
}

function rimuovi(){
    let li = this.closest("li");
    li.remove();
}

function svuotaLista(){
    document.getElementById("lista").innerHTML = "";
}

function rimuoviComprati() {
    let elementi = document.querySelectorAll("#lista li");
    for (let i = 0; i < elementi.length; i++) {
        if (elementi[i].style.textDecoration === "line-through") {
            elementi[i].remove();
        }
    }
}

SUSHI JOI

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sushi Joy</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>
    <div class="input">
        <h1>Sushi Joy</h1>
    <form id="formuccio">
        <label for="nome">Nome: </label>
        <input type="text" id="nome" placeholder="Come si chiama?">
        <br>
        <label for="descrizione">Descrizione:</label>
        <input type="text" id="descrizione" placeholder="Piccola descrizione">
        <br>
        <label for="urlImg">URL immagine:</label>
        <input type="text" id="urlImg" placeholder="URL immagine">
        <br>
        <label for="prezzo">Prezzo:</label>
        <input type="number" id="prezzo" placeholder="Quanto costa?">
        <br>
        <button type="submit" id="invio">Aggiungi</button>
    </form>
    </div>
    
    <div class="card" id="contenitore"></div>
</body>
</html>

JavaScript

const form = document.querySelector("#formuccio");
const nome = document.querySelector("#nome");
const descr = document.querySelector("#descrizione");
const urlImg = document.querySelector("#urlImg");
const prezzo = document.querySelector("#prezzo");
const contenitore = document.querySelector("#contenitore");

let array = [];

form.addEventListener("submit", () => {
    event.preventDefault();
    const elemento = {
        nome : nome.value,
        descrizione : descr.value,
        urlImmagine : urlImg.value,
        prezzo : Number(prezzo.value),
        elimina : false,
    }

    array.push(elemento);
    const cont2 = document.createElement("div");
    cont2.classList.add("icon");

    const titolo1 = document.createElement("h3");
    titolo1.textContent = elemento.nome;

    const titolo2 = document.createElement("p");
    titolo2.textContent = "Descrizione: " + elemento.descrizione;

    const immagine = document.createElement("img");
    immagine.src = elemento.urlImmagine

    const price = document.createElement("p");
    price.textContent = elemento.prezzo + "$";

    const bottone = document.createElement("button");
    bottone.textContent = "Rimuovi"

    bottone.addEventListener("click", () => {
        elemento.elimina = true;
        array = array.filter(p => !p.elimina);
        cont2.remove();
    })

    cont2.appendChild(immagine);
    cont2.appendChild(titolo1);
    cont2.appendChild(price);
    cont2.appendChild(titolo2);
    cont2.appendChild(bottone);

    contenitore.appendChild(cont2);
    form.reset();
})

CSS

 .input{
    padding: 20px;
    margin: auto;
    display: flex;
    flex-direction: column;
    width: 200px;
}

.icon{
    border-width: 5px;
    margin: 20px;
}

#formuccio{
    padding: 20px;
    margin: auto;
    display: flex;
    flex-direction: column;
    width: 200px;
}

.card{
    display: flex;
    padding: 20px;
}

👨‍💻 Autore

Progetto scolastico sviluppato da ravan.

Progetto Scolastico Estensione

ravan

Relazione Esercizi di Informatica

Sasso Carta Forbici

HTML

CSS

JavaScript

Lista Spesa

HTML

CSS

JavaScript

SUSHI JOI

HTML

JavaScript

CSS

👨‍💻 Autore