Flora 🌸

🌷 Plant management app 🌷

Link live!

Checklist:

Criterii de acceptanta:

🌼 aplicatia sa fie Single Page Application ✔️
🌼 codul sursa (nearhivat) al proiectului trebuie sa fie salvat pe GitHub ✔️
🌼 nu puteti folosi librarii, framework-uri CSS sau JavaScript (cum ar fi jQuery, Bootstrap, Angular, React, etc) pentru realizarea frontend-ului ✔️

Frontend (maxim 17 puncte)

HTML si CSS (maxim 8 puncte)

🌼 Fisiere separate pentru HTML si CSS (0.5 puncte)

/public_html/index.html
/public_html/css/style.css

🌼 In interiorul documentelor HTML, sa se foloseasca minim 4 taguri semantice (1 punct)

index.html

<nav>...</nav>
<header>...</header>
<main>...</main>
<section class="card">...</section>
<footer>...</footer>

🌼 Stilurile CSS sa fie definite folosind clase direct pe elementele care trebuie stilizate (minim 80% din selectori) (0.5 pct)✔️
🌼 Layout-ul sa fie impartit in minim 2 coloane si sa fie realizat cu Flexbox si/sau CSS grid (2 puncte)

styles.css

.body-layout {
    height:100%;
    display: grid;
    grid-template-columns: 100px auto 100px;
    grid-template-rows: 80px auto 50px;
    grid-template-areas:
    ". header ."
    ". main ."
    ". footer .";
}

🌼 Site-ul sa fie responsive, respectand rezolutiile urmatoarelor dispozitive folosind media queries: (4 puncte)

  ...
  /* Default style is Desktop */
  ...
  @media only screen and (min-width:768px) and (max-width: 1280px) { /* Tablets */ } 
  @media only screen and (max-width: 768px) { /* Mobile */ }

---

🌷 telefon mobil - latime mai mica 768px

---

🌷 tableta - latime intre 768px si 1280px

---

🌷 desktop - latime mai mare de 1280px

---

Javascript (maxim 9 puncte)

🌼 Fisier separat JavaScript (0.5 puncte)

/public_html/js/script.js

🌼 Manipularea DOM-ului (crearea, editarea si stergerea elementelor/nodurilor HTML) (3 puncte)

script.js 

// cateva exemple
var waterBtn = document.createElement("div");
waterBtn.classList.add("water-btn");
waterBtn.addEventListener("click", waterPlant.bind(this, plant.id, plant.name));
waterBtn.id = "water_btn_" + plant.id;
cardRow.appendChild(waterBtn);
plantView.removeChild(plantView.lastChild);

🌼 Folosirea evenimentelor JavaScript declansate de mouse/tastatura (1 punct)

script.js

// functii care inchid modalele deschise
window.onclick = function (event) {
    if (event.target == this.modalViewPlant || event.target == this.modalAddPlant)
        this.closeModal();

}

window.onkeydown = function(event) {
    if ( event.keyCode == 27 ) { //ESC
        this.closeModal();
    }
}

🌼 Utilizarea AJAX (GET, POST, PUT, DELETE) (4 puncte)

script.js

// GET ALL
const res = fetch("/plants")
        .then((res) => res.json())
        .then((plants) => { ... }
   })
})

// GET ONE
const res = fetch("/plants/" + id)
        .then((res) => { return res.json() })
        .then((plant) => { ... }
})})

// PUT
const res = fetch("/plants/" + id + "/lastWatered/" + today, {
    method: 'PUT'
})
    .then(() => {
        alert(name + " marked as watered! 🌲❤️")
        window.location.reload()
})

// POST
<form method="POST" action="/plants" enctype="multipart/form-data">
    ... 
</form>

//DELETE
fetch("/plants/" + id, {
        method: 'DELETE',
        headers: {
            'Content-Type': 'application/json'
        }})
        .then(() => {window.location.reload()})

🌼 Folosirea localStorage (0.5 puncte)

if (!localStorage.getItem("greeting") || localStorage.getItem("greeting") === "") {
        greeting.textContent = "Here are your plants:"
    }
    else greeting.textContent = localStorage.getItem("greeting");
}

function saveSettings(){
// ...
localStorage.setItem("greeting",document.getElementById("greeterTextbox").value)
}

Backend API (maxim 8 puncte)

🌼 Creare server Backend (2 puncte)

index.js

const express = require('express')
...

🌼 CRUD API (Create, Read, Update si Delete) pentru a servi Frontend-ului (6 puncte)

index.js

// Create
app.post("/plants", (req, res)=> { ... })

// Read One
app.get("/plants/:id", (req, res) =>{ ... })

// Read All
app.get("/plants", (req,res) =>{ ... })

// Update (key + value)
app.put("/plants/:id/:key/:value", (req,res)=>{ ... })

// Update (tot obiectul)
app.post("/plants/:id", (req, res) => { ... })

// Delete
app.delete("/plants/:id", (req,res) => { ... })