Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- const BASE_URL = 'http://localhost:3030/jsonstore/tasks/';
- const loadCoursesBtn = document.getElementById('load-course');
- const listDiv = document.getElementById('list');
- const addCourseBtn = document.getElementById('add-course');
- const form = document.querySelector('#form form');
- const editCourseBtn = document.getElementById('edit-course');
- // let array = [];
- // let obj = {};
- let editCourseId = null;
- const inputSelectors = {
- titleInput: document.getElementById('course-name'),
- typeInput: document.getElementById('course-type'),
- descriptionInput: document.getElementById('description'),
- teacherInput: document.getElementById('teacher-name')
- }
- loadCoursesBtn.addEventListener('click', loadAllCourses);
- addCourseBtn.addEventListener('click', addCourse);
- editCourseBtn.addEventListener('click', editCourse);
- function loadAllCourses(e) {
- if (e) {
- e.preventDefault();
- }
- listDiv.innerHTML = '';
- fetch(BASE_URL)
- .then((res) => res.json())
- .then((data) => {
- // inputsObj = Object.values(data);
- // console.log(inputsObj);
- for (const { title, type, description, teacher, _id } of Object.values(data)) {
- const newDiv = createElements('div', '', false, listDiv, _id, ['container']);
- const titleH2 = createElements('h2', title, false, listDiv);
- const teacherH3 = createElements('h3', teacher, false, listDiv);
- const courseType = createElements('h3', type, false, listDiv);
- const descriptionP = createElements('p', description, false, listDiv);
- const editInnerBtn = createElements('button', 'Edit Course', false, listDiv, '', ['edit-btn']);
- const finishBtn = createElements('button', 'Finish Course', false, listDiv, '', ['finish-btn']);
- finishBtn.addEventListener('click', finishCourse);
- editInnerBtn.addEventListener('click', getForEditCourse)
- }
- })
- .catch((err) => {
- console.error(err);
- })
- }
- function addCourse(e) {
- if (e) {
- e.preventDefault();
- }
- const title = inputSelectors.titleInput.value;
- const type = inputSelectors.typeInput.value;
- const description = inputSelectors.descriptionInput.value;
- const teacher = inputSelectors.teacherInput.value;
- if (title && type && description && teacher) {
- const httpHeaders = {
- method: 'POST',
- body: JSON.stringify({
- title: title,
- type: type,
- description: description,
- teacher: teacher
- })
- }
- fetch(BASE_URL, httpHeaders)
- .then(() => {
- loadAllCourses();
- form.reset();
- })
- .catch((err) => {
- console.error(err);
- })
- }
- }
- function editCourse(e) {
- if (e) {
- e.preventDefault();
- }
- const title = inputSelectors.titleInput.value;
- const type = inputSelectors.typeInput.value;
- const description = inputSelectors.descriptionInput.value;
- const teacher = inputSelectors.teacherInput.value;
- const httpHeaders = {
- method: 'PATCH',
- body: JSON.stringify({
- title: title,
- type: type,
- description: description,
- teacher: teacher
- })
- }
- fetch(`${BASE_URL}}${editCourseId}`, httpHeaders)
- .then((res) => res.json())
- .then(() => {
- loadAllCourses();
- editCourseBtn.disabled = true;
- addCourseBtn.disabled = false;
- form.reset();
- // otherDOMSelectors.editBtn.setAttribute('disabled', true);
- // otherDOMSelectors.addBtn.removeAttribute('disabled');
- // otherDOMSelectors.form.reset();
- })
- .catch((err) => {
- console.error(err);
- })
- }
- function getForEditCourse(e) {
- // const parentElement = this.parentNode;
- editCourseId = this.parentNode.id;
- // courseToBeUpdated = inputsObj.find((inp) => inp._id === id);
- // for (const key in inputDOMSelectors) {
- // inputDOMSelectors[key].value = courseToBeUpdated[key];
- // }
- addCourseBtn.disabled = true;
- editCourseBtn.disabled = false;
- // otherDOMSelectors.editBtn.removeAttribute('disabled');
- this.parentNode.remove();
- }
- function finishCourse() {
- const id = this.parentNode.id;
- const httpHeaders = {
- method: 'DELETE'
- }
- fetch(`${BASE_URL}${id}`, httpHeaders)
- .then(() => {
- loadAllCourses();
- })
- .catch((err) => {
- console.error(err);
- })
- }
- // const BASE_URL = 'http://localhost:3030/jsonstore/tasks/';
- // let inputsObj = [];
- // let courseToBeUpdated = {};
- // const inputDOMSelectors ={
- // title: document.getElementById('course-name'),
- // type: document.getElementById('course-type'),
- // description: document.getElementById('description'),
- // teacher: document.getElementById('teacher-name')
- // }
- // const otherDOMSelectors ={
- // form: document.querySelector('#form form'),
- // addBtn: document.getElementById('add-course'),
- // editBtn: document.getElementById('edit-course'),
- // loadBtn: document.getElementById('load-course'),
- // coursesContainer: document.getElementById('list')
- // }
- // otherDOMSelectors.loadBtn.addEventListener('click', loadAllCourses);
- // otherDOMSelectors.editBtn.addEventListener('click', editCourse);
- // otherDOMSelectors.addBtn.addEventListener('click', addNewCourse);
- // function addNewCourse(event){
- // if(event){
- // event.preventDefault();
- // }
- // const newCourse = {
- // title: inputDOMSelectors.title.value,
- // type: inputDOMSelectors.type.value,
- // description: inputDOMSelectors.description.value,
- // teacher: inputDOMSelectors.teacher.value,
- // }
- // httpHeaders ={
- // method: 'POST',
- // body: JSON.stringify(newCourse)
- // }
- // fetch(BASE_URL, httpHeaders)
- // .then(() =>{
- // loadAllCourses();
- // otherDOMSelectors.form.reset();
- // })
- // .catch((err) => {
- // console.error(err);
- // })
- // }
- // function editCourse(event){
- // if(event){
- // event.preventDefault();
- // }
- // const payload = {
- // title: inputDOMSelectors.title.value,
- // type: inputDOMSelectors.type.value,
- // description: inputDOMSelectors.description.value,
- // teacher: inputDOMSelectors.teacher.value,
- // }
- // httpHeaders ={
- // method: 'PATCH',
- // body: JSON.stringify(payload)
- // }
- // fetch(`${BASE_URL}${courseToBeUpdated._id}`, httpHeaders)
- // .then((res) => res.json)
- // .then(() =>{
- // loadAllCourses();
- // otherDOMSelectors.editBtn.setAttribute('disabled', true);
- // otherDOMSelectors.addBtn.removeAttribute('disabled');
- // otherDOMSelectors.form.reset();
- // })
- // .catch((err) => {
- // console.error(err);
- // })
- // }
- // function loadAllCourses(event){
- // if(event){
- // event.preventDefault();
- // }
- // otherDOMSelectors.coursesContainer.innerHTML = '';
- // fetch(BASE_URL)
- // .then((res) => res.json())
- // .then((data) =>{
- // inputsObj = Object.values(data);
- // console.log(inputsObj);
- // for (const course of Object.values(data)) {
- // const divContainer = createElement('div', '', otherDOMSelectors.coursesContainer, '', ['container'], {id: course._id});
- // createElement('h2', course.title, divContainer);
- // createElement('h3', course.teacher, divContainer);
- // createElement('h3', course.type, divContainer);
- // createElement('p', course.description, divContainer);
- // const editBtnInContainer = createElement('button', 'Edit Course', divContainer, '', ['edit-btn']);
- // editBtnInContainer.addEventListener('click', loadDataInInputForm)
- // const finishBtnInContainer = createElement('button', 'Finish Course', divContainer, '', ['finish-btn']);
- // finishBtnInContainer.addEventListener('click', deleteCourse);
- // }
- // })
- // .catch((err) => {
- // console.error(err);
- // })
- // }
- // function loadDataInInputForm(){
- // const parentElement = this.parentNode;
- // const id = this.parentNode.id;
- // courseToBeUpdated = inputsObj.find((inp) => inp._id === id);
- // for (const key in inputDOMSelectors) {
- // inputDOMSelectors[key].value = courseToBeUpdated[key];
- // }
- // otherDOMSelectors.addBtn.setAttribute('disabled', true);
- // otherDOMSelectors.editBtn.removeAttribute('disabled');
- // parentElement.remove();
- // }
- // function deleteCourse(){
- // const id = this.parentNode.id;
- // httpHeaders ={
- // method: 'DELETE'
- // }
- // fetch(`${BASE_URL}${id}`, httpHeaders)
- // .then(() =>{
- // loadAllCourses();
- // })
- // .catch((err) => {
- // console.error(err);
- // })
- // }
- // function inputsValidator(obj){
- // return Object.values(obj).every((inp) => inp.value.trim() !== '');
- // }
- function createElements(type, contentOrValue, useInnerHTML, parentNode, id, classes, attributes) {
- const htmlElement = document.createElement(type);
- if (contentOrValue && useInnerHTML) {
- htmlElement.innerHTML = contentOrValue;
- }
- else {
- if (contentOrValue && type === 'input') {
- htmlElement.value = contentOrValue;
- }
- if (contentOrValue && type !== 'input') {
- htmlElement.textContent = contentOrValue;
- }
- }
- if (id) {
- htmlElement.id = id;
- }
- if (classes) {
- htmlElement.classList.add(...classes)
- }
- // {src: 'link', href : 'http'}
- if (attributes) {
- for (const key in attributes) {
- htmlElement.setAttribute(key, attributes[key])
- }
- }
- if (parentNode) {
- parentNode.appendChild(htmlElement);
- }
- return htmlElement;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement