Fetch & database problems

Code Help Node JS
1

Question:
Why is the saving process failing?
My problem’s that there are no errors or anything, but when I check the database (try to retrieve the data, there’s no data saved, where there should be. Is there a problem with my retrieval method, or with my saving process, idk?
script.js:

password = 0x108ab * 0x19 + -0x41832b + 0x155f8f9 * 0x1;
beirtPass = 0;
while (beirtPass != password) {
  beirtPass = prompt('Mi a jelszó?');
}
loggedIn = true;

let thisMonth;
let thisDay;
const birthDayInput = document.createElement('input');
const nameDayInput = document.createElement('input');
const noteInput = document.createElement('textarea');
let underlined = false;
let lineThrough = false;
let bold = false;
const boldButton = document.createElement('button');
const lineThroughButton = document.createElement('button');
const underlinedButton = document.createElement('button');
const chooseColor = document.createElement('input');
document.addEventListener('DOMContentLoaded', function() {
  load_days();
  setTimeout(() => {
    const targetDiv = document.querySelector('.today');
    targetDiv.scrollIntoView({
      behavior: 'auto',
      block: 'center',
      inline: 'nearest'
    });
  }, 500);
});
document.addEventListener("DOMContentLoaded", function() {
  const clickableElement = document.querySelector(".clickable");

  clickableElement.addEventListener("click", function(event) {
    event.stopPropagation();
    this.classList.add("clicked");
  });

  document.addEventListener("click", function(event) {
    if (!clickableElement.contains(event.target)) {
      clickableElement.classList.remove("clicked");
    }
  });
});


document.addEventListener('contextmenu', function(event) {
  event.preventDefault();
});
function isLeapYear(year) {
  return (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
}

function load_days() {
  if(loggedIn == true) {
    const parentDiv = document.querySelector('.parent');
  
    const today = new Date().toLocaleDateString();
    const startDate = new Date();
    startDate.setMonth(0);
    startDate.setDate(1);
  
    const months = [
      "Január", "Február", "Március", "Április",
      "Május", "Június", "Július", "Augusztus", "Szeptember",
      "Október", "November", "December"
    ];
  
    for (let month = 0; month < months.length; month++) {
      const daysInMonth = new Date(startDate.getFullYear(), month + 1, 0).getDate();
  
      if (month === 1 && isLeapYear(startDate.getFullYear())) {
        daysInMonth++;
      }
  
      const monthDiv = document.createElement('div');
      monthDiv.classList.add("month");
  
      const monthNameDiv = document.createElement('div');
      monthNameDiv.classList.add("month-name");
      monthNameDiv.textContent = months[month];
      monthDiv.appendChild(monthNameDiv);
  
      for (let day = 1; day <= daysInMonth; day++) {
        const currentDate = new Date(startDate);
        currentDate.setMonth(month);
        currentDate.setDate(day);
  
        const childDiv = document.createElement('div');
        childDiv.classList.add("child");
        childDiv.dataset.month = months[month];
        childDiv.dataset.day = day;
        const dayNameOptions = { weekday: 'long' };
        const content2 = document.createTextNode(currentDate.toLocaleDateString("hu-HU", dayNameOptions));
        childDiv.dataset.dayName = content2;
  
        if (currentDate.toLocaleDateString() === today) {
          childDiv.classList.add("today");
        }
  
        const options = { weekday: 'short', day: 'numeric' };
        const content = document.createTextNode(currentDate.toLocaleDateString("hu-HU", options));
        childDiv.appendChild(content);
        monthDiv.appendChild(childDiv);
  
        childDiv.addEventListener("click", function(event) {
          event.stopPropagation();
          const clickedDate = new Date(currentDate);
          handleClick(clickedDate);
        });
      }
  
      parentDiv.appendChild(monthDiv);
    }
  }
}

function giveUnderline() {
  lineThrough = false;
  lineThroughButton.dataset.linethrough = 0;
  if (underlined == false) {
    noteInput.style.textDecoration = "underline";
    underlined = true
    underlinedButton.style.backgroundColor = "skyblue";
    lineThroughButton.style.backgroundColor = "white";
    underlinedButton.dataset.underlined = 1;
  }
  else {
    noteInput.style.textDecoration = "none";
    underlined = false;
    underlinedButton.style.backgroundColor = "white";
    underlinedButton.dataset.underlined = 0;
  }
}
function giveLineThrough() {
  underlined = false;
  underlinedButton.dataset.underlined = 0;
  if (lineThrough == false) {
    noteInput.style.textDecoration = "line-through";
    lineThrough = true
    lineThroughButton.style.backgroundColor = "skyblue";
    underlinedButton.style.backgroundColor = "white";
    lineThroughButton.dataset.linethrough = 1;
  }
  else {
    noteInput.style.textDecoration = "none";
    lineThrough = false;
    lineThroughButton.style.backgroundColor = "white";
    lineThroughButton.dataset.linethrough = 0;
  }
}
function giveBold() {
  if (bold == false) {
    noteInput.style.fontWeight = "bold";
    bold = true
    boldButton.style.backgroundColor = "skyblue";
    boldButton.dataset.bold = 1;
  }
  else {
    noteInput.style.fontWeight = "normal";
    bold = false;
    boldButton.style.backgroundColor = "white";
    boldButton.dataset.bold = 0;
  }
}
function setColor() {
  birthDayInput.style.color = chooseColor.value;
  nameDayInput.style.color = chooseColor.value;
  noteInput.style.color = chooseColor.value;
}

function handleClick(date) {

  document.body.style.overflow = 'hidden';

  const elementsToRemove = document.querySelectorAll('.editDiv');
  elementsToRemove.forEach(element => {
    element.remove();
  });

  const options = { weekday: 'long', month: 'long', day: 'numeric' };
  const options2 = {month: 'long' };
  const options3 = { day: 'numeric' };
  const editDiv = document.createElement('div');
  editDiv.classList.add("editDiv");
  document.body.appendChild(editDiv);

  const title = document.createElement('h2');
  title.textContent = date.toLocaleDateString("hu-HU", options)
  thisMonth = date.toLocaleDateString("hu-HU", options2)
  thisDay = date.toLocaleDateString("hu-HU", options3)
  title.setAttribute('id', 'title')
  editDiv.appendChild(title)

  // recover data from server by the month / th

  birthDayInput.classList.add("input");
  birthDayInput.setAttribute('placeholder', 'Születésnap')
  birthDayInput.setAttribute('type', 'text');
  birthDayInput.setAttribute('maxlength', '15');
  birthDayInput.setAttribute('minlength', '5');
  birthDayInput.setAttribute('id', 'birthDayInput')
  editDiv.appendChild(birthDayInput);

  nameDayInput.classList.add("input");
  nameDayInput.setAttribute('placeholder', 'Névnap');
  nameDayInput.setAttribute('type', 'text');
  nameDayInput.setAttribute('maxlength', '15');
  nameDayInput.setAttribute('minlength', '5');
  nameDayInput.setAttribute('id', 'nameDayInput')
  editDiv.appendChild(nameDayInput);

  noteInput.setAttribute('placeholder', 'Megjegyzés...');
  noteInput.setAttribute('type', 'text');
  noteInput.setAttribute('maxlength', '600');
  noteInput.setAttribute('minlength', '5');
  noteInput.setAttribute('id', 'noteInput')
  editDiv.appendChild(noteInput);

  const submitButton = document.createElement('button');
  submitButton.classList.add("button");
  submitButton.setAttribute('id', 'submitButton')
  submitButton.textContent = "Mentés"
  submitButton.addEventListener('click', submit);
  submitButton.setAttribute('type', 'submit')
  editDiv.appendChild(submitButton);

  const closeButton = document.createElement('button');
  closeButton.classList.add("button");
  closeButton.setAttribute('id', 'closeButton')
  closeButton.textContent = "Bezárás"
  closeButton.addEventListener('click', close);
  editDiv.appendChild(closeButton);

  underlinedButton.dataset.underlined = 0;
  underlinedButton.classList.add("decorButtons");
  underlinedButton.textContent = "A";
  underlinedButton.style.textDecoration = "underline"
  underlinedButton.addEventListener('click', giveUnderline);
  underlinedButton.setAttribute('id', 'underlineButton')
  editDiv.appendChild(underlinedButton);

  lineThroughButton.dataset.linethrough = 0;
  lineThroughButton.classList.add("decorButtons");
  lineThroughButton.textContent = "A";
  lineThroughButton.style.textDecoration = "line-through"
  lineThroughButton.addEventListener('click', giveLineThrough);
  lineThroughButton.setAttribute('id', 'linethroughButton')
  editDiv.appendChild(lineThroughButton);

  boldButton.dataset.bold = 0;
  boldButton.classList.add("decorButtons");
  boldButton.textContent = "A";
  boldButton.style.fontWeight = "bold"
  boldButton.addEventListener('click', giveBold);
  boldButton.setAttribute('id', 'boldButton')
  editDiv.appendChild(boldButton);

  chooseColor.classList.add("input");
  chooseColor.setAttribute('type', 'color');
  chooseColor.setAttribute('id', 'colorInput')
  chooseColor.addEventListener('input', setColor);
  editDiv.appendChild(chooseColor);

  const theSubmitButton = document.getElementById("submitButton");
  const thebirthdayInput = document.getElementById("birthDayInput");
  const thenamedayInput = document.getElementById("nameDayInput")
  const thenoteInput = document.getElementById("noteInput");
  const thecolorInput = document.getElementById("colorInput")
  const theunderlineButton = document.getElementById("underlineButton");
  const thelinethroughButton = document.getElementById("linethroughButton");
  const theboldButton = document.getElementById("boldButton");
  
  fetch(`/getData?thisMonth=${thisMonth}&thisDay=${thisDay}`)
    .then(response => response.json())
    .then(data => {
      thebirthdayInput.value = data.birthday || '';
      thenamedayInput.value = data.nameday || '';
      noteInput.value = data.note || '';
      thecolorInput.value = data.color || "#000000";
      theunderlineButton.setAttribute('data-underlined', data.isUnderlined || '0');
      thelinethroughButton.setAttribute('data-linethrough', data.isThroughlined || '0');
      theboldButton.setAttribute('data-bold', data.isBold || '0');
    })
    .catch(error => {
      console.error('Error fetching data:', error);
    });
}

function submit() {
  const theSubmitButton = document.getElementById("submitButton");
  const thebirthdayInput = document.getElementById("birthDayInput");
  const thenamedayInput = document.getElementById("nameDayInput")
  const thenoteInput = document.getElementById("noteInput");
  const thecolorInput = document.getElementById("colorInput")
  const theunderlineButton = document.getElementById("underlineButton");
  const thelinethroughButton = document.getElementById("linethroughButton");
  const theboldButton = document.getElementById("boldButton");

  
  let birthday = thebirthdayInput.value;
  let nameday = thenamedayInput.value;
  let note = thenoteInput.value;
  let color = thecolorInput.value;
  let underlined = theunderlineButton.getAttribute("data-underlined");
  let linethrough = thelinethroughButton.getAttribute("data-linethrough");
  let bold = theboldButton.getAttribute("data-bold");


  const requestBody = `birthday=${birthday}&nameday=${nameday}&note=${note}&color=${color}&underlined=${underlined}&linethrough=${linethrough}&bold=${bold}&thisMonth=${thisMonth}&thisDay=${thisDay}`;
  
  fetch('/serverEndpoint', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: requestBody
  })
  .then(response => response.text())
  .then(responseData => {
    console.log('Server response:', responseData);
  })
  .catch(error => {
    console.error('Error:', error);
    alert("Error occured. Couldn't save.")
  });


}

function close() {
  const theSubmitButton = document.getElementById("submitButton");
  const thebirthdayInput = document.getElementById("birthDayInput");
  const thenamedayInput = document.getElementById("nameDayInput")
  const thenoteInput = document.getElementById("noteInput");
  const thecolorInput = document.getElementById("colorInput")
  const theunderlineButton = document.getElementById("underlineButton");
  const thelinethroughButton = document.getElementById("linethroughButton");
  const theboldButton = document.getElementById("boldButton");

  
  let birthday = thebirthdayInput.value;
  let nameday = thenamedayInput.value;
  let note = thenoteInput.value;
  let color = thecolorInput.value;
  let underlined = theunderlineButton.getAttribute("data-underlined");
  let linethrough = thelinethroughButton.getAttribute("data-linethrough");
  let bold = theboldButton.getAttribute("data-bold");

  
  console.log(birthday, nameday, note, color, underlined, linethrough, bold, thisMonth, thisDay);

  
  const elementsToRemove = document.querySelectorAll('.editDiv');
  elementsToRemove.forEach(element => {
    element.remove();
  });
  document.body.style.overflow = 'auto';
}

function scrollToday() {
  const targetDiv = document.querySelector('.today');
  targetDiv.scrollIntoView({
    behavior: 'smooth',
    block: 'center',
    inline: 'nearest'
  });
}
function search() {
  const searchInput = document.getElementById("search");
  if (searchInput.value != null) {
    // indent and filter the answers
  }
}

app.js:

const sqlite3 = require('sqlite3').verbose();
const db = new sqlite3.Database('2023.db');

function isLeapYear(year) {
  return (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
}

const hungarianMonths = [
  { name: 'január', days: 31 },
  { name: 'február', days: 28 },
  { name: 'március', days: 31 },
  { name: 'április', days: 30 },
  { name: 'május', days: 31 },
  { name: 'június', days: 30 },
  { name: 'július', days: 31 },
  { name: 'augusztus', days: 31 },
  { name: 'szeptember', days: 30 },
  { name: 'október', days: 31 },
  { name: 'november', days: 30 },
  { name: 'december', days: 31 }
];

db.serialize(() => {
  db.run(`
    CREATE TABLE IF NOT EXISTS naptar (
      month TEXT,
      day INTEGER,
      birthday TEXT,
      nameday TEXT,
      note TEXT,
      color TEXT,
      isUnderlined INTEGER,
      isThroughlined INTEGER,
      isBold INTEGER
    )
  `);

  const currentYear = new Date().getFullYear();

  for (const month of hungarianMonths) {
    const daysInMonth = month.name === 'február' && isLeapYear(currentYear) ? 29 : month.days;

    for (let day = 1; day <= daysInMonth; day++) {
      db.run(`
        INSERT INTO naptar (month, day)
        VALUES (?, ?)
      `, [month.name, day], (err) => {
        if (err) {
          console.error(err);
        }
      });
    }
  }

  console.log('Data inserted successfully.');
});

const express = require('express');
const path = require('path');
const app = express();
const port = process.env.PORT || 3000;

app.use(express.static('public'));

app.use(express.urlencoded({ extended: false }));

app.post('/serverEndpoint', (req, res) => {
  const { birthday, nameday, note, color, underlined, linethrough, bold, thisMonth, thisDay } = req.body;

  console.log('Received Data:');
  console.log('Birthday:', birthday);
  console.log('Nameday:', nameday);
  console.log('Note:', note);
  console.log('Color:', color);
  console.log('Underlined:', underlined);
  console.log('Linethrough:', linethrough);
  console.log('Bold:', bold);
  console.log('This Month:', thisMonth);
  console.log('This Day:', thisDay);

  db.serialize(() => {
    db.run(`
      INSERT INTO naptar (month, day, birthday, nameday, note, color, isUnderlined, isThroughlined, isBold)
      SELECT ?, ?, ?, ?, ?, ?, ?, ?, ?
      WHERE EXISTS (
        SELECT 1
        FROM naptar
        WHERE month = ? AND day = ?
      )
    `, [thisMonth, thisDay, birthday, nameday, note, color, underlined, linethrough, bold, thisMonth, thisDay], (err) => {
      if (err) {
        console.error('Error inserting data into database:', err);
        res.status(500).send('Error inserting data into the database.');
      } else {
        console.log('Data inserted successfully into database.');
      }
       db.get(
        'SELECT * FROM naptar WHERE month = ? AND day = ?',
        [thisMonth, thisDay],
        (err, row) => {
          if (err) {
            console.error('Database error:', err);
            res.status(500).json({ error: 'Database error' });
          } else if (!row) {
            res.status(404).json({ message: 'Data not found' });
          } else {
            console.log(row)
          }
        }
      );
    });
  });
});

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

app.get('/getData', (req, res) => {
  const { thisMonth, thisDay } = req.query;

  db.get(
    'SELECT * FROM naptar WHERE month = ? AND day = ?',
    [thisMonth, thisDay],
    (err, row) => {
      if (err) {
        console.error('Database error:', err);
        res.status(500).json({ error: 'Database error' });
      } else if (!row) {
        res.status(404).json({ message: 'Data not found' });
      } else {
        res.json(row);
      }
    }
  );
});

    
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});
2

Move the code to a node.js repl. “HTML, CSS, JS” repls are for static hosting

4 Likes
3

Sorry, but how? I mean like move the entire website, (which isn’t working for me)
Or just some files or what? How?

4

rename app.js to index.js

3 Likes
5

Thanks you, it is now working, but still. When I retrieve the data from the database, it gives the data null for everything, except the month and the day.
I think there has to be a problem with the saving mechanism, isn’t?

1 Like
6

So, does anyone have an answer?

7

Lemme take that as a no…

8

Can you share the link to your new repl?

3 Likes
9

kalendar.naptar.repl.co

1 Like
10

So, anyone got any ideas?

11

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.