Untitled

main.js

import { Application } from "./application.js";
import { Flashcard } from "./flashcard.js";

const app = new Application();
app.drawForm(document.body);

const result = await fetch("http://localhost:5229/Flashcard/GetAllFlashcards");
const data = await result.json();

const cardsDiv = document.createElement("div")
cardsDiv.classList.add("cards-div");
document.body.appendChild(cardsDiv);

for(let f of data){
    const card = new Flashcard(f.id, f.color, f.front, f.back);
    card.drawCard(cardsDiv);
}



--------------------------------------------------------
application.js

import { Flashcard } from "./flashcard.js";

export class Application{
    constructor(){
        this.vrenosti = [
            {naziv: "Color", klasa: "color", type: "color"},
            {naziv: "Front side", klasa: "front-side", type: "text"},
            {naziv: "Back side", klasa: "back-side", type: "text"}
        ]
    }

    drawForm(container){
        const formDiv = document.createElement("div");
        formDiv.classList.add("form-div");
        container.appendChild(formDiv);

        this.vrenosti.forEach(p => {
            const lbl = document.createElement("label");
            lbl.textContent = p.naziv;
            formDiv.appendChild(lbl);

            const polje = document.createElement("input")
            polje.type = p.type;
            polje.classList.add(`${p.klasa}-input`);
            formDiv.appendChild(polje);
        });

        const btn = document.createElement("input");
        btn.type = "button";
        btn.value = "Add/Update Flashcard";
        btn.onclick = this.addWrapper;
        btn.classList.add("add-btn");
        formDiv.appendChild(btn);
    }

    addWrapper = () => {
        const boja = document.querySelector(".color-input").value;
        const front = document.querySelector(".front-side-input").value;
        const back = document.querySelector(".back-side-input").value;

        const card = new Flashcard(0, boja, front, back);
        card.addFlashCard();
    }
}



----------------------------------------------------------------------------------
flashcard.js


export class Flashcard{
    constructor(id, color, front, back){
        this.id = id;
        this.color = color;
        this.front = front;
        this.back = back;
    }

    drawCard(container){
        const cardDiv = document.createElement("div")
        cardDiv.classList.add("card-div");
        cardDiv.style.backgroundColor = this.color;
        container.appendChild(cardDiv);

        const lbl = document.createElement("label");
        lbl.textContent = this.front;
        cardDiv.appendChild(lbl);

        const btn = document.createElement("input");
        btn.type = "button";
        btn.value = "Edit";
        btn.classList.add("edit-btn");
        cardDiv.appendChild(btn);
    }

    async addFlashCard(){
        const result = await fetch("http://localhost:5229/Flashcard/AddFlashCard",{
            method: "POST",
            body: JSON.stringify({
                color: this.color,
                front: this.front,
                back: this.back
            }),
            headers:{
                "Content-Type" : "application/json"
            }
        });

        const data = await result.json();

        if(data.ok){
            console.log("uspesno upisano");
        }
    }
}



---------------------------------------------------------
style.css


.form-div{
    border: 1px solid black;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 400px;
    gap: 10px;
    padding: 10px;
}

.add-btn{
    grid-area: 4 / 1 / 5 / 3;
}

.cards-div{
    display: flex;
}

.card-div{
    display: flex;
    flex-direction: column;
    width: 200px;
    height: 100px;
    padding: 20px;
    margin: 10px;
    margin-top: 0px;
    align-items: center;
}

body{
    display: flex;
}

.edit-btn{
    margin: 30px;
}







---------------------------------------------------------
index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flashcards</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <script type="module" src="app/main.js"></script>
</body>
</html>
Editor is loading...