Reminders-WebApp

A web app to help with productivity.

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)
• In interiorul documentelor HTML, sa se foloseasca minim 4 taguri semantice (1 punct)
• Stilurile CSS sa fie definite folosind clase direct pe elementele care trebuie stilizate (minim 80% din selectori) (0.5 punct)
• Layout-ul sa fie impartit in minim 2 coloane si sa fie realizat cu Flexbox si/sau CSS grid (2 puncte)

/* current_reminders.css */

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

• Site-ul sa fie responsive, respectand rezolutiile urmatoarelor dispozitive folosind media queries: (4 puncte)
  • telefon mobil - latime mai mica 768px
  • tableta - latime intre 768px si 1280px
  • desktop - latime mai mare de 1280px

/* current_reminders.css */
@media screen and (max-width: 1280px) {
  .....
}

@media screen and (max-width: 768px) {
  .....
}

Javascript (maxim 9 puncte)

• Fisier separat JavaScript (0.5 puncte)
• Manipularea DOM-ului (crearea, editarea si stergerea elementelor/nodurilor HTML) (3 puncte)
• Folosirea evenimentelor JavaScript declansate de mouse/tastatura (1 punct)

// menu.js
let create_note_html = (note, codFunc) => {
  let note_entry = document.createElement('div');
  note_entry.setAttribute('class', 'note-entry');

  let title = document.createElement('div');
  title.setAttribute('class', 'title');
  title.innerHTML = "<p>" + note.title + "</p>";
  note_entry.appendChild(title);
  ...
  ...
  ...
  note_entry.appendChild(done_button_wrapper);

  return note_entry;
}

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

fetch('users/' + window.localStorage.getItem('token'))

fetch('user/newnote', {
  method: 'POST',
  headers: {
    "Content-type": "application/json"
  },
  body: JSON.stringify(req_body)
})

fetch('user/editnote', {
  method: 'PUT',
  headers: {
    "Content-type": "application/json"
  },
  body: JSON.stringify(req_body)
})

fetch('user/deletenote', {
  method: 'DELETE',
  headers: {
    "Content-type": "application/json"
  },
  body: JSON.stringify(req_body)
})

• Folosirea localStorage (0.5 puncte)

// menu.js
window.localStorage.getItem('token');

window.localStorage.removeItem('token')

Backend API (maxim 8 puncte)

• Creare server Backend (2 puncte)

// index.js
const express = require('express');
const app = express();

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

app.post('/user/newnote', (req, res) => {
    ....
})

app.get('/users/:token', (req, res) => {
    ....
})

app.put('/user/markasundonenote', (req, res) => {
    ....
})

app.delete('/user/deletenote', (req, res) => {
    ....
})