yallacodecom / ramadan-2020-assessments Goto Github PK

View Code? Open in Web Editor NEW

70.0 8.0 334.0 34 KB

This is the assignment that has been explained in Ramadan 2020 series on Youtube channel

Home Page: https://www.youtube.com/playlist?list=PLtxOBbrOOPH6Os1EJifSE59Bd5WbL15pn

HTML 45.86% JavaScript 54.14%

vanilla-javascript spa

ramadan-2020-assessments's Introduction

ramadan-2020-assessments's People

Contributors

Stargazers

Watchers

Forkers

medhatdawoud flashsama mohammedbakr44 mohamed-bouzerouata houssemamiri mahmoudahrady dinakhaled ayatalat kanzariamine wawashra shamyyoun ahmedthabet569 saidbakr aayman997 samsam926 hssanbzlm tayfnour abdullahnour ahmedhelalahmed samy997 usamnet000 mmferry abdelazizeid abdelrhmanabdelatif osamakhalil98 nahlagalal eslamhiko abdelrahmankhalid0 abdomagdi nassihmahmoud mohamedshawkybayoumi sherifelkady eslamallam heshamtammam khaled404 bakr-rajab abdoulrhman ahmadelfalogy lenaggar bavly ahmedemam mohamedabdelnabysw khalidreg mohnabil haithem-ben waleedomega ahamouda96 hossam-khalaf bc0ne ahmedbeheiry mahmouahmed188 omar-trigui akramadil marwaelbeshry moatazabdalmageed mabadsa mohamedkable odiab eltantawye awad2017 khaiyri abdeldjalilhachimi ahmedsliman ahmedzaki72 mohamedmeska-aws zogorn iaymanshaaban m-esmaeil aya-amer azzeeddinezaher abdelsalam-megahed aladeeb moamen-ui hameedgamal adelyacoubi mohamedelhefni wahed-saeedy raneen-medhat asayedio tamerhussien engatyamohammed blumanio ebrahim-mansour mahmoudkhalafallah hazem-hamaad10 pixeltag alimahmoud9999 mudfahmi shimaasayedatya ghozziayoub hichemdz ahmed-elkhalily safaaaly246 mohamedmadian10 amal-mohamed ahmedgomaaeldesouki riadadel gor3a ma7ma7 mohamed2del

ramadan-2020-assessments's Issues

Failed to execute `npm start` under server directory

Following instructions in first version and READEM.md I was not able to start the server locally because of missing dependancy express. It is not mentioned that I need to run npm install inside server directory

> node index.js
internal/modules/cjs/loader.js:1023
  throw err;
  ^
Error: Cannot find module 'express'

تحسين fetch الإستدعاء عند الحاجة للتنضيم والاداء

لماذا لا يكون استدعى api في ملف منفصل وبدلا من التكرار يمكن كتابة دالة للمعالجة استدعاء api backend
يمكن انشاء طريقة لاستدعء الباك اند وإرسال البيانات والبيانات تسترجع الى callback

function backendLookup(method, endpoint, callback, data) {
  let jsonData;
  if (data) {
    jsonData = JSON.stringify(data);
  }
  const xhr = new XMLHttpRequest();

  const url = `http://localhost/api${endpoint}`; 
  xhr.responseType = "json";
  xhr.open(method, url);
  xhr.setRequestHeader("Content-Type", "application/json");

  xhr.onload = function () {
    if (xhr.status === 403) {
      const detail = xhr.response.detail;
      if (detail === "Authentication credentials were not provided.") {
        if (window.location.href.indexOf("login") === -1) {
          window.location.href = "/login?showLoginRequired=true";
        }
      }
    }
    callback(xhr.response, xhr.status);
  };
  xhr.onerror = function (e) {
    callback(
      {
        message: "The request was an error",
      },
      400
    );
  };
  xhr.send(jsonData);
}

لإستخدام الدالة بطريقة GET

function apiTweetList(username, callback, nextUrl) { //  nextUrl to paigation to load more List
    let endpoint = "/tweets/";
    if (username) { // filter list by username 
        endpoint = `/tweets/?username=${username}`;
    }
    backendLookup("GET", endpoint, callback);
}

const handleLoadListResponse = (response, status) => {
    if (status === 200) {} else {
        alert("There was an error");
    }
};
apiTweetList(username, handleLoadListResponse, nextUrl);

استدعى اخر للدالة بطريقة POST

function apiTweetCreate(newTweet, callback) {
    backendLookup("POST", "/tweets/create/", callback, {
        content: newTweet,
    });
}

const handleBackendUpdate = (response, status) => {
    if (status === 201) {
        didTweet(response)
    } else {
        console.log(response)
        alert("An error occured please try again")
    }
}

const newVal = textAreaRef.current.value
// backend api request
apiTweetCreate(newVal, handleBackendUpdate)
textAreaRef.current.value = ''

ايضا عن طريق هذة الدالة يمككن ارسال زر التصويب وعدم التصويب بإستخدام طريقة واحدة

function apiTweetAction(tweetId, action, callback) {
    const data = {
        id: tweetId,
        action: action,
    };
    backendLookup("POST", "/tweets/action/", callback, data);
}
const handleActionBackendEvent = (response, status) => {
    console.log(response, status);
    if ((status === 200 || status === 201)) {}
};
event.preventDefault();
apiTweetAction(tweet.id, action.type, handleActionBackendEvent); // action.type : "up" or "down"

دائما انا افضل XMLHttpRequest على fetch لانها ابسط وأسرع في الاداء
اتمنى لك التوفيق ونشكرا اخي على ما تقدمة من الاشياء المفيدة وربي يوفقك

When trying to send data, the server does not respond to the sent data and returns that the data does not exist (undefined)

When trying to send data, the server does not respond to the sent data and returns that the data does not exist (unspecified)
This happens because Express needs to know that we will send the data in JSON format
We can add
app.use(express.json());
In the first file, this will solve this problem
The problem exists in the master branch

yallacodecom / ramadan-2020-assessments Goto Github PK

ramadan-2020-assessments's Introduction

Ramadan 2020 assessments

Assessment 1 (Junior level friendly)

ramadan-2020-assessments's People

Contributors

Stargazers

Watchers

Forkers

ramadan-2020-assessments's Issues

Failed to execute `npm start` under server directory

تحسين fetch الإستدعاء عند الحاجة للتنضيم والاداء

When trying to send data, the server does not respond to the sent data and returns that the data does not exist (undefined)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent