These are chat archives for FreeCodeCamp/HelpJavaScript

10th
Feb 2018
Dovydas Stirpeika
@Giveback007
Feb 10 2018 00:10
no problem
Conor Murphy
@cmurphy580
Feb 10 2018 01:19
i have a store.js file and i'm trying to implement ReduxPromise but i no idea how to apply the middleware with the createStore. Here's what i have:
import { createStore, compose, applyMiddleware } from 'redux';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
//import ReduxPromise from 'redux-promise';
import { syncHistoryWithStore } from 'react-router-redux';
import { browserHistory } from 'react-router';

//import the root reducer
import rootReducer from './reducers/index';

const defaultState = {
  todays_news: null,
  term_results: null,
  provider_news: null
}

const enhancers = compose(
  window.devToolsExtension ? window.devToolsExtension() : f => f
);

const store = createStore(rootReducer, defaultState, enhancers);

//const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore);

export const history = syncHistoryWithStore(browserHistory, store);

if (module.hot) {
  module.hot.accept('./reducers/', () => {
    const nextRootReducer = require('./reducers/index').default;
    store.replaceReducer(nextRootReducer);
  });
}


export default store;
abraham anak agung
@padunk
Feb 10 2018 02:04
@cmurphy580 maybe this?
const store = createStore( 
  rootReducer, defaultState,
  enhancers(
    applyMiddleware(ReduxPromise)
  )
 );
Nazar
@IsaakNazar
Feb 10 2018 04:28
guys , does anybody learned React JS through udemy courses, if yes, then which is best?
what about wes bos React?
Johnny
@JohnnyBizzel
Feb 10 2018 04:38
@IsaakNazar Stephen Grider's courses are good. Wes Bos I don't know but his Javascript30 course is ok.
Nazar
@IsaakNazar
Feb 10 2018 04:41
@JohnnyBizzel cool thank U :+1:
CamperBot
@camperbot
Feb 10 2018 04:41
isaaknazar sends brownie points to @johnnybizzel :sparkles: :thumbsup: :sparkles:
:star2: 1794 | @johnnybizzel |http://www.freecodecamp.org/johnnybizzel
Lean Junio
@leanjunio
Feb 10 2018 04:43
Hey guys, can anybody explain how an async function such as fs.readFile('path', (err, data)) works?
Johnny
@JohnnyBizzel
Feb 10 2018 04:44
@leanjunio Any async function needs to "wait" for the data to complete. Then continue operation usually with a callback function.
Dovydas Stirpeika
@Giveback007
Feb 10 2018 05:26

@leanjunio
https://youtu.be/Bv_5Zv5c-Ts?t=1h37m35s

start at 1h 37m 35s

Wang-Chun-Ping
@qaqa9996
Feb 10 2018 07:31
Help! How to var \t \n \ \b for var?!!
Thanks!
Raghav Mundra
@Raghav17
Feb 10 2018 07:36

Hey, Can anyone please help.

$name.html('<a href="' + data.stream._links + '">' + chanData.display_name + '</a>');

Can you please tell me if there is anything wrong with this code?

Razvan Jackson
@RazvanJackson
Feb 10 2018 08:24
Someone here familiar with webpack?
Sweet Coding :)
@SweetCodingInc
Feb 10 2018 08:24
@RazvanJackson post your question
Razvan Jackson
@RazvanJackson
Feb 10 2018 08:24
const path = require('path')

module.exports = {
    entry: path.resolve(__dirname, 'client') + '/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
    watch:true,
    module:{
        loaders: [
            {
                test: /jsx?$/,
                include: path.resolve(__dirname, 'client') + '/index.js',
                exclude: /(node_modules)/,
                loader: 'babel-loader',
                query:{
                    presets: ['react', 'es2015']
                }
            }
        ]
    }
}
i have this in webpack.config.js
if i want to load the index.html from ./client/index.html
when i use webpack-dev-server
what do i have to add
Razvan Jackson
@RazvanJackson
Feb 10 2018 08:37
Solved it
devServer:{
        contentBase: path.resolve(__dirname, 'client')
    }
Sweet Coding :)
@SweetCodingInc
Feb 10 2018 08:58
@RazvanJackson That one is costly approach
you html-webpack-plugin instead
Razvan Jackson
@RazvanJackson
Feb 10 2018 08:59
now i have another error
Sweet Coding :)
@SweetCodingInc
Feb 10 2018 09:00
First do npm install --save html-webpack-plugin
Razvan Jackson
@RazvanJackson
Feb 10 2018 09:00
ERROR in ./client/index.js
Module parse failed: Unexpected token (4:16)
You may need an appropriate loader to handle this file type.
| import ReactDOM from 'react-dom'
|
| ReactDOM.render(<div>sal</div>, document.querySelector('#root'))
Sweet Coding :)
@SweetCodingInc
Feb 10 2018 09:01
This is how your webpack.config.js should look
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: path.resolve(__dirname, 'client') + '/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
    watch: true,
    module: {
        loaders: [
            {
                test: /jsx?$/,
                include: path.resolve(__dirname, 'client') + '/index.js',
                exclude: /(node_modules)/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015']
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'client/index.html',
            inject: 'body',
            hash: true
        })
    ]
}
Razvan Jackson
@RazvanJackson
Feb 10 2018 09:02
... now i don't have problems with HTML
It's not parsing jsx...
Sweet Coding :)
@SweetCodingInc
Feb 10 2018 09:03
@RazvanJackson why do you have include in your loaders config?
It should be just
module: {
        loaders: [
            { test: /\.jsx?$/, exclude: [/node_modules/], loader: 'babel-loader' },
Razvan Jackson
@RazvanJackson
Feb 10 2018 09:04
lol
works
thanks @SweetCodingInc
CamperBot
@camperbot
Feb 10 2018 09:04
razvanjackson sends brownie points to @sweetcodinginc :sparkles: :thumbsup: :sparkles:
:cookie: 272 | @sweetcodinginc |http://www.freecodecamp.org/sweetcodinginc
Razvan Jackson
@RazvanJackson
Feb 10 2018 09:04
the include was the problem
Sweet Coding :)
@SweetCodingInc
Feb 10 2018 09:04
then create a new file at the root called .babelrc
so that you can get rid of this part
query: {
  presets: ['react', 'es2015']
}
@RazvanJackson do you have this on your github?
I'll fork and update it
Razvan Jackson
@RazvanJackson
Feb 10 2018 09:05
Nop, i've just started it
Thanks for help man :)
Sweet Coding :)
@SweetCodingInc
Feb 10 2018 09:05
:+1:
@RazvanJackson Also, don't use this
devServer: { ... }
the devServer config is for special purpose
and you're not using that here
so configuring devServer is overkill for your requirement
just stick with hml-webpack-plugin if all you want to do is specify index html
Razvan Jackson
@RazvanJackson
Feb 10 2018 09:08
For the moment i'll leave like that
Sweet Coding :)
@SweetCodingInc
Feb 10 2018 09:08
okay
Slomon80
@Slomon80
Feb 10 2018 10:08
Hi guys
Stephen James
@sjames1958gm
Feb 10 2018 11:57
@Slomon80 Hello
Sweet Coding :)
@SweetCodingInc
Feb 10 2018 11:59
@sjames1958gm :wave:
Stephen James
@sjames1958gm
Feb 10 2018 11:59
@SweetCodingInc Hey :coffee:
Muhammad Hasham
@MohammadHasham
Feb 10 2018 12:24
anybody doing backend projects or have done? i need some help
Razvan Jackson
@RazvanJackson
Feb 10 2018 12:48
Failed prop type: The prop `to` is marked as required in `Link`, but its value is `undefined`.
any solution?
<Link to="/about" className="nav-link">Portofolio</Link>
Stephen James
@sjames1958gm
Feb 10 2018 12:49
@RazvanJackson That is the only Link you have? Seems like there is to= there :)
Razvan Jackson
@RazvanJackson
Feb 10 2018 12:50
@sjames1958gm i have 2 more link
<li className="nav-item">
                                    <Link to="/portofolio" className="nav-link">Portofolio</Link>
                                </li>
                                <li className="nav-item">
                                    <Link to="/about" className="nav-link">About</Link>
                                </li>
                                <li className="nav-item">
                                    <Link to="/contact" className="nav-link">Contact</Link>
                                </li>
@sjames1958gm any idea?
Stephen James
@sjames1958gm
Feb 10 2018 12:54
@RazvanJackson that is weird.
Razvan Jackson
@RazvanJackson
Feb 10 2018 12:55
nvm
;))
I'm retarded
i had one Link without to
Stephen James
@sjames1958gm
Feb 10 2018 13:00
@RazvanJackson Classic programming mistake. Always assume it is something stupid thing you did first :)
Nazar
@IsaakNazar
Feb 10 2018 13:57
hi guys, my code doesnt work.
<div id="localTime"></div>
<script>

function getLocalTime() {
  var d = new Date();
  var hours = d.getHours();
  var min = d.getMinutes();
  document.getElementById('localTime').innerHTML =
  hours + ":" + min;
}
setTimeout(getLocalTime, 60000);

</script>
maybe like this?
function getLocalTime() {
  var d = new Date();
  var hours = d.getHours();
  var min = d.getMinutes();
  document.getElementById('localTime').innerHTML =
  hours + ":" + min;
  setTimeout(getLocalTime, 60000);
}
getLocalTime();
Fabien SHAN
@X140hu4
Feb 10 2018 14:05
@IsaakNazar What are you trying to achieve?
Matej Bošnjak
@mbosnjak01
Feb 10 2018 14:05
He's trying to get local time :D
Nazar
@IsaakNazar
Feb 10 2018 14:06
@X140hu4 time instead 20:05 shows 20:5
Fabien SHAN
@X140hu4
Feb 10 2018 14:06
Because its 5 minutes not 05 minutes
Matej Bošnjak
@mbosnjak01
Feb 10 2018 14:06
05 can be done
try with if statement ... if minute is < 10 ... add 0+minute
Fabien SHAN
@X140hu4
Feb 10 2018 14:07
If you want to change that you can use this formula: ('0' + min).slice(-2);
Matej Bošnjak
@mbosnjak01
Feb 10 2018 14:07
or that
Fabien SHAN
@X140hu4
Feb 10 2018 14:07
I used this for my pomodoro recently haha
Rahsheen Porter
@rahsheen
Feb 10 2018 14:50
y'all still talking about formatting hours and minutes?
FlashHero
@FlashHero
Feb 10 2018 15:41
So if I have a repository in github of only public and src folders from create-react-app, how would I merge these folders with another computer which already has everything set up from create-react-app, but only wants to merge the public and src folders. Every time I git pull them into another computer, it goes outside of my-app the main folder or it deletes other files like package.json,how do i just merge these folder and nothing else
Nazar
@IsaakNazar
Feb 10 2018 16:11
@X140hu4 thx
CamperBot
@camperbot
Feb 10 2018 16:11
isaaknazar sends brownie points to @x140hu4 :sparkles: :thumbsup: :sparkles:
:cookie: 321 | @x140hu4 |http://www.freecodecamp.org/x140hu4
Stephen James
@sjames1958gm
Feb 10 2018 16:24
The local files are not in git?
FlashHero
@FlashHero
Feb 10 2018 16:27
@sjames1958gm I've set up a remote and pulled them but it keeps adding them outside of my-app which is the main folder
@sjames1958gm yes so I have a newly set up folder from create-react-app and I don't have those files that the remote repository has
but I want the remote repository 'spublic and src folder to replace or update the newly created react app's public and src folders
Ayush Bahuguna
@relentless-coder
Feb 10 2018 17:13
@FlashHero i don't think you can pull specific files from git. If the files are present in a server, then you can use scp or pscp to copy files
Stephen James
@sjames1958gm
Feb 10 2018 17:27
@FlashHero You could pull to another directory and then copy them in manually.
I am not sure you can clone into an existing directly
FlashHero
@FlashHero
Feb 10 2018 17:52
@sjames1958gm @relentless-coder thanks
CamperBot
@camperbot
Feb 10 2018 17:52
flashhero sends brownie points to @sjames1958gm and @relentless-coder :sparkles: :thumbsup: :sparkles:
:cookie: 393 | @relentless-coder |http://www.freecodecamp.org/relentless-coder
:star2: 8959 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Muhammad Hasham
@MohammadHasham
Feb 10 2018 17:55
anyone doing or done with Image Search Abstraction Layer
Alex
@alexandrupintilei
Feb 10 2018 17:59
Can someone help me and tell me why this code dosent work in my browser(chrome) even is allright? thx
https://codepen.io/balexoy/pen/gvmobj
Ayush Bahuguna
@relentless-coder
Feb 10 2018 18:01
@alexandrupintilei california dreaming, nice!!!. Now, as I click the button the text changes, is that what's not working in your browser?
Alex
@alexandrupintilei
Feb 10 2018 18:05
@relentless-coder no, when i click on twitter img, dosent return nothing
Alex
@alexandrupintilei
Feb 10 2018 18:35
addblock was the problem
cheers
Ayush Bahuguna
@relentless-coder
Feb 10 2018 18:35
yes, it is working fine in my browser
lfvpCO
@lfvpCO
Feb 10 2018 19:02
function golfScore(par, strokes) {
  // Only change code below this line

if (strokes === 1){
    return "Hole-in-one!";
  } else if (strokes <= par - 2){
    return "Eagle";
  } else if (strokes === par - 1) {
    return "Birdie";
  } else if (strokes === par) {
    return "Par";
  } else if (strokes === par + 1) {
    return "Bogey";
  } else if (strokes === par + 2) {
    return "Double Bogey";
  } else if (strokes >= par + 3) {
    return "Go Home!";
  }

  if (strokes === 1){
    return "Hole-in-one!";
  } else if (strokes <= par - 2){
    return "Eagle";
  } else if (strokes === par - 1) {
    return "Birdie";
  } else if (strokes === par) {
    return "Par";
  } else if (strokes === par + 1) {
    return "Bogey";
  } else if (strokes === par + 2) {
    return "Double Bogey";
  } else if (strokes >= par + 3) {
    return "Go Home!";
  }
  // Only change code above this line

}

// Change these values to test
golfScore(5, 4);
what is the problem here.. mine is the firts one and the second one works perfect.
Aditya
@ezioda004
Feb 10 2018 19:04
@lfvpCO They both look identical.
lfvpCO
@lfvpCO
Feb 10 2018 19:04
yessss
but I have spent 2 HOURS traying to figure out what is going on with this code.. when I use mine in freecodecamp (first one) doesnt work… but the second one works perfect.
Aditya
@ezioda004
Feb 10 2018 19:06
@lfvpCO Just checked and the first one works fine.
And lets me pass the challenge, seems weird you couldnt.
lfvpCO
@lfvpCO
Feb 10 2018 19:07
yes mate… something happens
Tom
@moT01
Feb 10 2018 19:08
both work for me
lfvpCO
@lfvpCO
Feb 10 2018 19:09
they are the same..
Conor Murphy
@cmurphy580
Feb 10 2018 19:33
@padunk awesome! thank you!
CamperBot
@camperbot
Feb 10 2018 19:33
cmurphy580 sends brownie points to @padunk :sparkles: :thumbsup: :sparkles:
:cookie: 436 | @padunk |http://www.freecodecamp.org/padunk
Conor Murphy
@cmurphy580
Feb 10 2018 19:58
i'm working a store file and i want to include redux-promise. Does anyone know where i would attach it? Here is what i have so far:
import { createStore, compose, applyMiddleware } from 'redux';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import ReduxPromise from 'redux-promise';
import { syncHistoryWithStore } from 'react-router-redux';
import { browserHistory } from 'react-router';

//import the root reducer
import rootReducer from './reducers/index';

const defaultState = {
  todays_news: null,
  term_results: null,
  provider_news: null
}

const enhancers = compose(
  window.devToolsExtension ? window.devToolsExtension() : f => f
);

const store = createStore(rootReducer, defaultState, enhancers);

//const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore);

export const history = syncHistoryWithStore(browserHistory, store);

if (module.hot) {
  module.hot.accept('./reducers/', () => {
    const nextRootReducer = require('./reducers/index').default;
    store.replaceReducer(nextRootReducer);
  });
}


export default store;
Razvan Jackson
@RazvanJackson
Feb 10 2018 20:21
Any websites to deploy react app?
Conor Murphy
@cmurphy580
Feb 10 2018 20:27
heroku
Razvan Jackson
@RazvanJackson
Feb 10 2018 20:29
@cmurphy580 smth else :)
Conor Murphy
@cmurphy580
Feb 10 2018 20:30
i think you can use github pages, but not completely sure how its done
Tiago Correia
@tiagocorreiaalmeida
Feb 10 2018 22:03
@RazvanJackson glitch
Idowu Wasiu
@Hoxtygen
Feb 10 2018 22:23
Hello guys, any hope of getting help on a php script? Yeah, I know this is mainly JS but I don't know where else to go
Matej Bošnjak
@mbosnjak01
Feb 10 2018 22:24
@Hoxtygen ask question and somebody will eventually answer..who knows the answer
AbrisM
@AbrisM
Feb 10 2018 22:27
Idowu
u can try the backend chat
Idowu Wasiu
@Hoxtygen
Feb 10 2018 22:27
learning PHP right now, and got to the part where you use tokens as a security measure when submitting forms.....I wrote out the codes but isn't working for me... What I noticed is the tokens generated dont seem to match.... Here is the code

<?php
//Because you are updating a database, you want to add the security of a token. Start a session at the very beginning of the file:
      session_start();

      //create a token
      $salt = "Somesalt";
    $token = sha1(mt_rand(1,1000000) . $salt);
    $_SESSION["token"] = $token;

    $message = "";

    if (isset($_POST['save']) AND $_POST['save'] === 'Save') {
      # check the token
      $badToken = true;
      if (empty($_POST['token']) || $_POST['token'] !== $_SESSION['token']) {
        $message = "Sorry, try it again. There was a security issue.";
        $badToken = true;
      } else {
        $badToken = false;
        unset($_SESSION['token']);


    define("HOSTNAME", "localhost");
    define("USERNAME", "root");
    define("PASSWORD", "clustersmysql");
    define("SQLDB", "mydatabase");

  $dbconnect = @new mysqli(HOSTNAME, USERNAME, PASSWORD, SQLDB);
  if ($dbconnect->connect_error) {
    die("Connection Error: " . $dbconnect->connect_error);
  } else {
    # Get the data
    $desc = filter_input(INPUT_POST, "desc", FILTER_SANITIZE_STRING, FILTER_FLAG_NO_ENCODE_QUOTES);
    $code = (int) $_POST['code'];

    //verify the data
    if(!$desc OR !$code)     {
      $message  .= 'Description and Code are required<br>';
    } else {
      # prepare the data
      if (get_magic_quotes_gpc()) {
        $desc = stripslashes($desc);
      }
      $desc = $dbconnect->real_escape_string($desc);
      $code = (int) $code;
      //set up the query
      $query = "INSERT INTO `table1` (`description`, `code`) VALUES "
               . " ('$desc', '$code') ";
          //Run the query and display appropriate message
          if (!$result = $dbconnect->query($query)) {
            $message .= "Unable to add rows<br>";
          } else {
            $message .= "Row added successfully";
            }
      }//else prepare the data ends
    }//else get the data ends.
  }//empty ends
}//isset ends


 ?>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Processing Data Entry Forms in PHP</title>
    <style media="screen">
      body     {
        background-color: orange;
        font-family: "Oswald";
        line-height: 1.5;
        text-align: center;
      }

      legend     {
        font-weight: bold;
        text-align: left;
      }

      form     {
        display: table;
        margin: 0 auto;
        padding-top: 150px;
      }

      form li     {
        display: table-row;
      }

      form li label       {
        display: table-cell;
      }
    </style>
  </head>
  <body>
    <h1>Data Entry</h1>
    <p><?php echo $message; ?></p>
    <form action="data_entry1.php" method="post" name="maint" id="maint">
      <fieldset class="maintform">
        <legend>Add a Row</legend>
        <ul>
          <li><label for="desc">Description *</label>
            <input type="text" name="desc" id="desc">
          </li>
          <li><label for="code">Code *</label>
            <input type="text" name="code" id="code">
          </li>
        </ul>
        <input type="submit" name="save" value="Save">
        <a href="data_entry1.php" class="cancel">Cancel</a>
        <!-- Within the form fieldset, create a token and post it to the session as a hidden input -->
        <input type="hidden" name="token" value="<?php echo $token; ?>">
      </fieldset>
    </form>
  </body>
</html>
AbrisM
@AbrisM
Feb 10 2018 22:29
what is the purpose of the right column?
FlashHero
@FlashHero
Feb 10 2018 22:30
I don't understand the use of webpack when it came to requiring modules because one of the app I made with node worked without webpack. Can someone explain I think I'm not understanding something here
Idowu Wasiu
@Hoxtygen
Feb 10 2018 22:30
@AbrisM Is that question to me?
AbrisM
@AbrisM
Feb 10 2018 22:31
everyone
the activity part
room updates?
Gulsvi
@gulsvi
Feb 10 2018 22:40
@AbrisM Not everyone is in a browser like you, so they have no idea what you're talking about :)
In the right-hand column, you're seeing a list of all the people who have joined this room (529 people) currently
below that, you get repo activity on github for the Free Code Camp codebase at: https://github.com/freeCodeCamp/freeCodeCamp
It's configured differently - in other rooms, you get room activity updates about who has been banned
alpox
@alpox
Feb 10 2018 22:53
@FlashHero Node has its own package management and you can just run it.
Webpack comes into play when you want to "bundle" an app for the use in the browser
As you want to spread javascript over multiple files (Like node modules and files which you can require), you need something to put all that code together for that the browser can easily consume it all. Adding each single script in the exact right order to the html file in the head would not end up good.
Webpack does the same as the node packaging system, but puts together all scripts into one (or few) bundle(s). It also handles the assets etc.
To sum up:
Webpack --> Browser execution on the client
Node --> Native execution (mostly server or console applications)
FlashHero
@FlashHero
Feb 10 2018 23:12
@alpox oh that makes sense thanks
CamperBot
@camperbot
Feb 10 2018 23:12
flashhero sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1536 | @alpox |http://www.freecodecamp.org/alpox
alpox
@alpox
Feb 10 2018 23:24
@FlashHero np