diff --git a/README.md b/README.md index f229958..b4ba55f 100644 --- a/README.md +++ b/README.md @@ -1,98 +1,31 @@ Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Node.js -=== +## Travelia +https://a2-justforfun29.glitch.me -Due: September 8th, by 11:59 AM. +Travelia is a web application where you can store all countries and cities which you visited. First you need to label your list by typing down your name. Then, you can add each destination by using second form with 4 entries including: country name, city name, date when you arrived and days you spent in that destination. -This assignment aims to introduce you to creating a prototype two-tiered web application. -Your application will include the use of HTML, CSS, JavaScript, and Node.js functionality, with active communication between the client and the server over the life of a user session. - -Baseline Requirements ---- - -There is a large range of application areas and possibilities that meet these baseline requirements. -Try to make your application do something useful! A todo list, storing / retrieving high scores for a very simple game... have a little fun with it. - -Your application is required to implement the following functionalities: - -- a `Server` which not only serves files, but also maintains a tabular dataset with 3 or more fields related to your application -- a `Results` functionality which shows the entire dataset residing in the server's memory -- a `Form/Entry` functionality which allows a user to add, modify, or delete (complete at least two) data items residing in the server's memory -- a `Server Logic` which, upon receiving new or modified "incoming" data, includes and uses a function that adds at least one additional derived field to this incoming data before integrating it with the existing dataset -- the `Derived field` for a new row of data must be computed based on fields already existing in the row. -For example, a `todo` dataset with `task`, `priority`, and `creation_date` may generate a new field `deadline` by looking at `creation_date` and `priority` - -Your application is required to demonstrate the use of the following concepts: - -HTML: -- One or more [HTML Forms](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms), with any combination of form tags appropriate for the user input portion of the application -- A results page displaying all data currently available on the server. You will most likely use a `` tag for this, but `
+ + + + + + + + +
CountryCityDate ArrivedDays spent
+ diff --git a/public/js/scripts.js b/public/js/scripts.js index de052ea..5107504 100644 --- a/public/js/scripts.js +++ b/public/js/scripts.js @@ -1,3 +1,95 @@ // Add some Javascript code here, to run on the front end. -console.log("Welcome to assignment 2!") \ No newline at end of file +console.log("Welcome to assignment 2!") + +const submit = function (e) { + // prevent default form action from being carried out + e.preventDefault(); + + let countryName = document.getElementById("countryName").value, + cityName = document.getElementById("cityName").value, + date = document.getElementById("date").value, + daysSpent = document.getElementById("timeSpent").value; + + let json = { + country_name: countryName, + city_name: cityName, + date: date, + time_spent: daysSpent + ' days', + }; + + let body = JSON.stringify(json); + const jsonParsed = JSON.parse(body); + + fetch("/submit", { + method: "POST", + body, + }).then(function (response) { + response.text().then(function (json) { + console.log("Body: ", body); + let table = document.getElementById("travelList"), + newRow = table.insertRow(-1), + newCountry = newRow.insertCell(0), + newCity = newRow.insertCell(1), + newDate = newRow.insertCell(2), + newDaysSpent = newRow.insertCell(3); + + newCountry.innerHTML = jsonParsed.country_name; + newCity.innerHTML = jsonParsed.city_name; + newDate.innerHTML = jsonParsed.date; + newDaysSpent.innerHTML = jsonParsed.time_spent; + console.log("table:", table); + + console.log(json); + }); + }); + + return false; +}; + +const removeEntry = function (e) { + e.preventDefault(); + + const book = document.querySelector("booknameToDelete"); + const author = document.querySelector("authornameToDelete"), + json = { book_title: book.value, author_name: author.value }, + body = JSON.stringify(json); + + fetch("/removeEntry", { + method: "POST", + body, + }).then((response) => response.json()); + + return false; +}; + +const updateList = function (e) { + e.preventDefault(); + + let travelList = document.getElementById("travelList"); + let body = JSON.stringify(travelList); + console.log(body); + + fetch("/updateList", { + method: "POST", + body, + }) + .then((response) => response.json()) + .then((json) => { + console.log(json); + let travelList = + travelList.innerHTML = + "CountryCityDate ArrivedDays SpentTime Spent "; + + json.forEach((entry) => { + travelList.innerHTML = + travelList.innerHTML + + `${entry.countryName}${entry.cityName}${entry.date}${entry.daysSpent}`; + }); + }); +}; + +window.onload = function () { + const add = document.getElementById("submit"); + add.onclick = submit; +};