Skip to content

Instantly share code, notes, and snippets.

View AyaBellazreg's full-sized avatar

AyaBellazreg

43 followers · 3 following
  • Tunisia
View GitHub Profile
@AyaBellazreg
AyaBellazreg / httpRequest.js
Last active March 6, 2019 21:53
document.getElementById('submitBtn').addEventListener('click',submitPost);
//getting the input values
let title = document.getElementById('title').value;
let body = document.getElementById('body').value;
//submitting a post
function submitPost(e){
e.preventDefault();
fetch('https://jsonplaceholder.typicode.com/posts', {
method:'POST',
@AyaBellazreg
AyaBellazreg / httpRequest.js
Last active March 4, 2019 21:36
//filtering function
document.getElementById('search').addEventListener('keyup', search);
function search(){
let value = document.getElementById('search').value;
data.forEach(post=>{
if((post.id == value)||(post.title.indexOf(value) > -1)||(value == '')){
document.getElementById(post.id).style.display = 'block';
}
else{
@AyaBellazreg
AyaBellazreg / httpRequest.js
Last active May 29, 2020 13:58
function getPosts(){
let endpoint = 'https://jsonplaceholder.typicode.com/posts';
fetch(endpoint)
.then((response=>{
// Returning it in JSON format
return response.json()
}))
.then((data=>{
// Displaying it to the DOM
let output = "<h3>Posts:</h3>"+
@AyaBellazreg
AyaBellazreg / httpRequest.js
Last active March 4, 2019 18:57
//creating an XMLHttpRequest object
const http = new XMLHttpRequest();
//sending our request to the api
http.open("GET", "https://jsonplaceholder.typicode.com/posts");
http.send();
//handling the returned data
http.onreadystatechange=(e)=>{
if (this.readyState == 4 && this.status == 200) {
@AyaBellazreg
AyaBellazreg / usingFetch.js
Last active March 6, 2019 21:37
part1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Using Fetch</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
@AyaBellazreg
AyaBellazreg / Recipe.js
Created December 22, 2018 13:56
Recipe file <medium article(shipping cart)>
import React, { Component } from 'react'
import { connect } from 'react-redux'
//import { addShipping } from './actions/cartActions'
class Recipe extends Component{
handleChecked = (e)=>{
if(e.target.checked){
this.props.addShipping();
}
else{
@AyaBellazreg
AyaBellazreg / Recipe.js
Created December 22, 2018 13:52
Recipe file <medium article(shipping cart)>
import React, { Component } from 'react'
import { connect } from 'react-redux'
//import { addShipping } from './actions/cartActions'
class Recipe extends Component{
componentWillUnmount() {
if(this.refs.shipping.checked)
this.props.substractShipping()
}
handleChecked = (e)=>{
@AyaBellazreg
AyaBellazreg / cartReducer.js
Created December 22, 2018 12:41
catrReducer file after adding/sub/removing <medium article(shopping cart)>
import Item1 from '../../images/item1.jpg'
import Item2 from '../../images/item2.jpg'
import Item3 from '../../images/item3.jpg'
import Item4 from '../../images/item4.jpg'
import Item5 from '../../images/item5.jpg'
import Item6 from '../../images/item6.jpg'
import { ADD_TO_CART,REMOVE_ITEM,SUB_QUANTITY,ADD_QUANTITY } from '../actions/action-types/cart-actions'
const initState = {
@AyaBellazreg
AyaBellazreg / Cart.js
Created December 22, 2018 12:23
Cart file with add + removing items<medium article(shopping cart)>
import React, { Component } from 'react';
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import { removeItem,addQuantity,subtractQuantity} from './actions/cartActions'
class Cart extends Component{
//to remove the item completely
handleRemove = (id)=>{
this.props.removeItem(id);
}
@AyaBellazreg
AyaBellazreg / Cart.js
Created December 19, 2018 12:48
import React, { Component } from 'react';
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
class Cart extends Component{
render(){
let addedItems = this.props.items.length ?
(
this.props.items.map(item=>{