These are chat archives for FreeCodeCamp/HelpFrontEnd

3rd
Feb 2018
Roman Cervantes
@romancm
Feb 03 2018 01:08
Anyone interested in sharing their atom/vscode settings on my project?
Eric Weiss
@eweiss17
Feb 03 2018 01:52
anyone doing anything interesting?
Gaurav
@gauravmagan
Feb 03 2018 02:06
hi i have infact added the scripts but the console says file not found
Screen Shot 2018-02-01 at 6.53.53 PM.png
Screen Shot 2018-02-01 at 6.56.48 PM.png
is there anything wrong
Gaurav
@gauravmagan
Feb 03 2018 02:11
Screen Shot 2018-02-02 at 9.06.04 PM.png
Screen Shot 2018-02-02 at 9.06.12 PM.png
hi i have infact added the scripts but the console says file not found
Ken Haduch
@khaduch
Feb 03 2018 02:17
@gauravmagan - is this a codepen project? Do you have the full URL for the files - starting with https:// ?
I guess I cannot see what you have in the assets folder...
I haven't used a CodePen project, so can you share the URL for it?
Nate Mallison
@NJM8
Feb 03 2018 02:19
@gauravmagan It looks like maybe the file path is incorrect. about.html is in the views folder, to use src='assets/etc' the assets folder needs to be in the same directory as about.html
so just go up a level
I think src='/assets/etc' should do it
so it will start looking for assets from the project root directory not the folder it currently is in
DMsalati
@DMsalati
Feb 03 2018 08:29
can someone tell me why offset isnt working on my code ?
</head> <body class="container-fluid"> <header class="row"> <div class="col-md-6 col-md-offset-3"> <h1>Random Quote Generator</h1> <h2>Inspirational Quotes</h2> </div> </header>
</head> <body class="container-fluid"> <header class="row"> <div class="col-md-6 col-md-offset-3"> <h1>Random Quote Generator</h1> <h2>Inspirational Quotes</h2> </div> </header>
Matej Bošnjak
@mbosnjak01
Feb 03 2018 08:31
Most likely no on what you provided. You should post your whole code. Best would be to put it in codepen and then link it here
DMsalati
@DMsalati
Feb 03 2018 08:36
i just tried it on codepen and it works, but not on my file
William Watts
@Braillon7
Feb 03 2018 09:58
@DMsalati it doesn't work on which file?
@DMsalati if it works on codepen and not somewhere else maybe it's how you set up your file. Make sure bootstrap is uploaded. I see nothing wrong with your code. Another thing you could do is col-md-12 and text-align center in your styling. That's the same thing as md-6 and offset-3 it sounds like it me.
A. J. Bozdar
@moajday
Feb 03 2018 10:27

I am not entirely sure what following two programs do:

function showPrimes(n) {
        nextPrime: for (let i = 2; i < n; i++) {
            for (let j = 2; j < i; j++) {
                if (i % j == 0) continue nextPrime;
            }

            console.log( i );
        }

and

function showPrimes(n) {
        for (let i = 2; i < n; i++) {
            if (!isPrime(i)) continue;

            alert(i);
        }
    }
    function isPrime(n) {
        for (let i = 2; i < n; i++) {
            if ( n % i == 0) return false
        }
    return true;
    }

These are two examples available on JS.info website. None of them log or alert anything. :(

Is anyone available at this time?
Stephen James
@sjames1958gm
Feb 03 2018 10:28
@ajbozdar Those are functions - they have to be called to do anything. Do you have code that calls the functions?
A. J. Bozdar
@moajday
Feb 03 2018 10:30
I know they are functions. There are alert and console.log to test them.
Stephen James
@sjames1958gm
Feb 03 2018 10:31
@ajbozdar If you call the first one showPrimes(10) for example it will console log out 2, 3, 5, 7
@ajbozdar The code you posted for the first one is missing the last } but I am guessing it is there in the real code
@ajbozdar - running the first one
showPrimes(10)
2
3
5
7
A. J. Bozdar
@moajday
Feb 03 2018 11:00
@sjames1958gm Let me check.
Ayush Bahuguna
@relentless-coder
Feb 03 2018 11:02
Hey, I am facing a rather weird problem. I have served pages via nodejs, and the problem is as I scroll up and down, the elements take a second to appear, it doesn't happen all the time, but let's 2 out of 5 times, this happens
A. J. Bozdar
@moajday
Feb 03 2018 11:08
@sjames1958gm What is continue in program? How it works? What's its coding name? Is it kind of an attribute?
Stephen James
@sjames1958gm
Feb 03 2018 11:10
@ajbozdar
continue inside a loop will jump to the next loop iteration (or if it has a label (here nextPrime)) it will jump to the label.
I have seldom, almost never, seen continue <label> in real code.
A. J. Bozdar
@moajday
Feb 03 2018 11:14

Is my program error free now?

function showPrimes(n) {
        nextPrime: for (let i = 2; i < n; i++) {
            for (let j = 2; j < i; j++) {
                if (i % j == 0) continue nextPrime;
    }

    console.log( i ); // a prime should be logged in console.
  }
}
showPrimes(10);

It still logs nothing.

I changed n to 10; no response.
Stephen James
@sjames1958gm
Feb 03 2018 11:15
@relentless-coder Are these basic HTML pages? Do they load a lot of extra files? Does it only happen when you scroll right after the page is loaded?
I would open devtools and use the network tab to see if there is a loading delay, at least start there
@ajbozdar Where are you calling the function?
There needs to be a line of code after the function like
showPrimes(10)
A. J. Bozdar
@moajday
Feb 03 2018 11:16
If you have never seen continue in real code then JS.info is probably overusing labels.
Stephen James
@sjames1958gm
Feb 03 2018 11:16
@ajbozdar The second example has continue without the label, that is what I usually see.
A. J. Bozdar
@moajday
Feb 03 2018 11:18
Oops! My mistake. I am sorry. Look onto above code. It is just there in the end.
A. J. Bozdar
@moajday
Feb 03 2018 11:25
You mean second code is better than the first code, right?
Stephen James
@sjames1958gm
Feb 03 2018 11:38
@ajbozdar Yes, I believe so
@ajbozdar by just having the function called isPrime it is much easier to know what the code is doing.
ahmed-issa-mohd
@ahmed-issa-mohd
Feb 03 2018 11:45
Can anyone tell me how border-image-slice Property works ?
ahmed-issa-mohd
@ahmed-issa-mohd
Feb 03 2018 11:53
how is it working ?
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 12:01
did u read that?
ahmed-issa-mohd
@ahmed-issa-mohd
Feb 03 2018 12:02
yse
image.png
yes
Stephen James
@sjames1958gm
Feb 03 2018 12:03
@ahmed-issa-mohd It is saying how much of the border image to I slice off (how much do I use) to fill the border.
A larger number picks more of the image for the border (which then scales the image down to fit in the border)
ahmed-issa-mohd
@ahmed-issa-mohd
Feb 03 2018 12:04
thankS
Stephen James
@sjames1958gm
Feb 03 2018 12:20
@ahmed-issa-mohd :+1:
eclip-se
@eclip-se
Feb 03 2018 12:31
Helooo
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 12:31
Hi @eclip-se
eclip-se
@eclip-se
Feb 03 2018 12:35
image.png
guys, i'm trying to learn all this stuff and i'm locked in choice when i'll think about time and what should i really focus on.. i have some knowledge already, but when i'll try to analyze and rethink whats really hapenning in term of pure hmtl/css for the start, i dont know how to train myself with project. Currently my idea is to look at themeforest or other theme selling site, pick one design, open in photoshop make notes like this .
the question is, what should i focus on and what project i should start with to learn efficiently.
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 12:37
work through the FCC projects maybe?
eclip-se
@eclip-se
Feb 03 2018 12:38
maybe yes, before i go there, i wanted to ask here ..
asking here is more an insight, another source and point of view.
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 12:40
sorry but that's what im doing, im just working on the FCC ones. Maybe others more experienced could give you better advice @eclip-se
eclip-se
@eclip-se
Feb 03 2018 12:41
Thanks man! :)
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 12:43
You're welcome :) @eclip-se
Ayush Bahuguna
@relentless-coder
Feb 03 2018 12:54
@sjames1958gm hey, I have checked that already, and all files are loaded. Also, this weird behavior happens whenever I scroll a bit fast
pragya1248
@pragya1248
Feb 03 2018 13:03
hey! i m not able to move my 'About Portfolio Contact' to the left by using 'float: left' in CSS. Help me out.
LydaTech
@lydatech
Feb 03 2018 13:06
@pragya1248 its on the left
pragya1248
@pragya1248
Feb 03 2018 13:06
oh yeah
sorry
LydaTech
@lydatech
Feb 03 2018 13:07
@pragya1248 so did you need help?
Stephen James
@sjames1958gm
Feb 03 2018 13:12
@relentless-coder So just plain HTML/CSS no React or Angular or other rendering framework?
Ayush Bahuguna
@relentless-coder
Feb 03 2018 13:12
@sjames1958gm ejs templates rendered as html through nodejs
Stephen James
@sjames1958gm
Feb 03 2018 13:15
@relentless-coder THat is odd, if everything is already loaded then I wouldn't expect scrolling issues.
Any dynamic (js) behavior on scrolling.
Ayush Bahuguna
@relentless-coder
Feb 03 2018 13:20
@sjames1958gm yes, I am toggling display of a div based on the scroll height.
let me try removing that first
Stephen James
@sjames1958gm
Feb 03 2018 13:21
@relentless-coder I don't have any special insight, just asking the questions I'd ask myself
A. J. Bozdar
@moajday
Feb 03 2018 13:25
Does prompt function accept integers?
dinesh
@1532j0004kg
Feb 03 2018 13:27

function pairElement(str) {
 var arr = [[],[]];
 var i = 0;
 // return    len = str.length;
 while(i < str.length)
  {
      if(str[i] == 'G')
        {
          arr[i][0] ="G";
          arr[i][1] = "C";
        }
  //if(str[i] == 'C')
    //    {
      //    arr[i][0] ="G";
        //  arr[i][1] = "C";
       // }

    /*  if(str[i] == 'C')
        {
          arr[i][0] ="C";
          arr[i][1] = "G";
        }

      if(str[i] == 'T')
        {
          arr[i][0] = "T";
          arr[i][1] = "A";
        }
      if(str[i] == 'A')
        {
          arr[i][0] = "A";
          arr[i][1] = "T";
        } 
 */   
      i++;
    }
  return arr;
}
pairElement("GCG");
Stephen James
@sjames1958gm
Feb 03 2018 13:27
@ajbozdar How do you mean accept?
You give integer to prompt to display?
User enters integer?
@1532j0004kg Since you don't know string.length ahead of time, you should probably add to arr a different way rather than
with hardcoded two []
dinesh
@1532j0004kg
Feb 03 2018 13:29
this code shows the error
but when i replace the i with 0 , its executing , can u please help me to solve this !
A. J. Bozdar
@moajday
Feb 03 2018 13:29
I ask user to enter a number then I want to add and console log the addition.
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 13:30
trynna design a webpage for a porject, but not really creative, can anyone give me ideas please?
A. J. Bozdar
@moajday
Feb 03 2018 13:30
let addition = prompt("Your Number");
let sum = (addition + 7);
console.log(sum);
This is what I am trying to do.
However I get concatenation in the end.
Stephen James
@sjames1958gm
Feb 03 2018 13:31
@ajbozdar The user can enter a number, but the value returned is a string.
use parseInt to convert string to number
A. J. Bozdar
@moajday
Feb 03 2018 13:31
parseInt ???
dinesh
@1532j0004kg
Feb 03 2018 13:31
@sjames1958gm can u explain better , please
Ayush Bahuguna
@relentless-coder
Feb 03 2018 13:31
@sjames1958gm hey, i figured it out. I accidentally placed code highlighting service inside the scroll event .
dinesh
@1532j0004kg
Feb 03 2018 13:32
then how " if i giving the value directly " it works ?
Stephen James
@sjames1958gm
Feb 03 2018 13:32
@relentless-coder Cool ! Always fun to find the problem
dinesh
@1532j0004kg
Feb 03 2018 13:32

function pairElement(str) {
 var arr = [[],[]];
 var i = 0;
 // return    len = str.length;
 while(i < str.length)
  {
      if(str[i] == 'G')
        {
          arr[0][0] ="G";
          arr[0][1] = "C";
        }
  //if(str[i] == 'C')
    //    {
      //    arr[i][0] ="G";
        //  arr[i][1] = "C";
       // }

    /*  if(str[i] == 'C')
        {
          arr[i][0] ="C";
          arr[i][1] = "G";
        }

      if(str[i] == 'T')
        {
          arr[i][0] = "T";
          arr[i][1] = "A";
        }
      if(str[i] == 'A')
        {
          arr[i][0] = "A";
          arr[i][1] = "T";
        } 
 */   
      i++;
    }
  return arr;
}
pairElement("GCG");
like this
Stephen James
@sjames1958gm
Feb 03 2018 13:32
@1532j0004kg var arr = [[], []] this assumes only two values in the string.
A. J. Bozdar
@moajday
Feb 03 2018 13:32
@sjames1958gm This is interesting.
Stephen James
@sjames1958gm
Feb 03 2018 13:32
@1532j0004kg Push the new array onto arr
@1532j0004kg like arr.push(["G", "C"]);
start with arr empty
@ajbozdar did you get it?
A. J. Bozdar
@moajday
Feb 03 2018 13:34
I get it. @sjames1958gm Is it possible to do without parseInt? I'm sharing my function now.
function add7() {
        let addition = parseInt(prompt('your integer please')) + 7;
        console.log(addition);
    }
    add7();
dinesh
@1532j0004kg
Feb 03 2018 13:35
@sjames1958gm thanks
CamperBot
@camperbot
Feb 03 2018 13:35
1532j0004kg sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8931 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Feb 03 2018 13:35
@ajbozdar Well you can use a leading + to convert a string to number
var one = "1"
+one + 2
A. J. Bozdar
@moajday
Feb 03 2018 13:35
Is my function useful? @sjames1958gm
Stephen James
@sjames1958gm
Feb 03 2018 13:36
@ajbozdar If you need to add 7 a lot then yes :)
A. J. Bozdar
@moajday
Feb 03 2018 13:37
@sjames1958gm Thank you :D
CamperBot
@camperbot
Feb 03 2018 13:37
ajbozdar sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8932 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Feb 03 2018 13:37
@ajbozdar Well, let me say that a function should probably return the addition
function add7() {
        let addition = parseInt(prompt('your integer please')) + 7;
        return addition;
    }
@ajbozdar A more javaScript way would be to remove the addition variable;
function add7() {
        return  parseInt(prompt('your integer please')) + 7;
    }
dinesh
@1532j0004kg
Feb 03 2018 13:38
@sjames1958gm its working suuccessfully , but still i have a dought .

function pairElement(str) {
 var arr = [[],[]];
 var i = 0;

 while(i < str.length)
  {
      if(str[i] == 'G')
        {
          arr[0][0] ="G";
          arr[0][1] = "C";
        }
  if(str[1] == 'C')
        {
          arr[1][0] ="G";
          arr[1][1] = "C";
        }

      i++;
    }
  return arr;
}
pairElement("GCG");
how its working ?
it output correctly !!!
Stephen James
@sjames1958gm
Feb 03 2018 13:40
@1532j0004kg No it doesn't - it only outputs an array of two it should be three elements
@1532j0004kg
For example, for the input GCG, return [["G", "C"], ["C","G"],["G", "C"]]
Your code outputs [["G", "C"], ["G", "C"]]
A. J. Bozdar
@moajday
Feb 03 2018 13:41
@sjames1958gm Function should return the addition but to see the addition either I need to alert or console.log. Am I right?
Stephen James
@sjames1958gm
Feb 03 2018 13:42
@ajbozdar In this simple case yes, but the caller of your function could show it.
console.log(add7());
dinesh
@1532j0004kg
Feb 03 2018 13:42
ok @sjames1958gm yes its outputing like u said !\
but still i knew the string length right ?
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 13:43
can anyone help me think of what to put on my webpage for this project please?
dinesh
@1532j0004kg
Feb 03 2018 13:43
then how its not working ?
A. J. Bozdar
@moajday
Feb 03 2018 13:43
@sjames1958gm That's precise and exact. I like it. :)
Stephen James
@sjames1958gm
Feb 03 2018 13:44
@1532j0004kg var arr = [[],[]]; this code here assumes two values in the string.
Your code only updates entries 0, 1 in the array so you cannot get three values
Start with
arr = [];
and then push onto that array str.length number of times in your while loop
then it doesn't matter how big str is
A. J. Bozdar
@moajday
Feb 03 2018 13:44
@sjames1958gm In addition to freecodecamp, which lessons on www do you find the best for JS? It seems javascript.info is confusing.
dinesh
@1532j0004kg
Feb 03 2018 13:45
ohhhh ok broieeee , i got it !!!! thanks a lot for ur explanation :sparkles:
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 13:45
w3schools, try it @ajbozdar
Stephen James
@sjames1958gm
Feb 03 2018 13:45
@1532j0004kg :+1:
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 13:45
A. J. Bozdar
@moajday
Feb 03 2018 13:47
@515014K thank you
CamperBot
@camperbot
Feb 03 2018 13:47
ajbozdar sends brownie points to @515014k :sparkles: :thumbsup: :sparkles:
:cookie: 171 | @515014k |http://www.freecodecamp.org/515014k
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 13:47
image.png
how can i make that look better?
Stephen James
@sjames1958gm
Feb 03 2018 13:48
@ajbozdar YouTube channels - learncodeacademy is one Traversy Media this is another
A. J. Bozdar
@moajday
Feb 03 2018 13:53
@sjames1958gm :+1: I am looking into them. :)
@MuhammedKarim thank you
CamperBot
@camperbot
Feb 03 2018 13:54
ajbozdar sends brownie points to @muhammedkarim :sparkles: :thumbsup: :sparkles:
:cookie: 115 | @muhammedkarim |http://www.freecodecamp.org/muhammedkarim
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 13:54
you're welcome @ajbozdar
Stephen James
@sjames1958gm
Feb 03 2018 13:55
@ajbozdar :+1:
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 13:57
Could anyone asnwer my question please?
Stephen James
@sjames1958gm
Feb 03 2018 14:08
since that is a poem you could center it, maybe add some color - just enough to hilight it
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 14:11
oh ok, will do @sjames1958gm
A. J. Bozdar
@moajday
Feb 03 2018 15:31
@MuhammedKarim I like poetry (English literature and linguistics) very much, but I am not in position to guide you for your Front End Development. However, I would discuss a scenario with you. Here it is: Whenever I read a poem, I imagine how the writer wrote it. For instance: Composed on Westminister Bridge is written by Sir Wordsworth. He wrote it early at the dawn near around Westminister Bridge. I then visualise a river, a bridge, a crescent in sky, and an old man smoking a cigar while wearing a turkish or jewish hat. I would then prefer to design a background for the poem using right colours like black and white in given context.
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 15:34
See that poem is about Madinah, i have pictures just above the poem of Madinah :) I really like ur viewpoint tho! Appreciate it :D @ajbozdar
A. J. Bozdar
@moajday
Feb 03 2018 15:36
For your poem you can using green and white colours, choose a background which highlights something significant from Madinah, like the mountains there. You can romanticize the desert even, and grow palm trees.
Have fun, Cheers! @MuhammedKarim
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 15:39
Thanks a lot bro, will see what i can do :) @ajbozdar
CamperBot
@camperbot
Feb 03 2018 15:39
muhammedkarim sends brownie points to @ajbozdar :sparkles: :thumbsup: :sparkles:
:cookie: 262 | @ajbozdar |http://www.freecodecamp.org/ajbozdar
A. J. Bozdar
@moajday
Feb 03 2018 15:40
I have 262 brownie points. I never knew it. This is amazing. :shipit:
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 15:41
go to your FCC and you can see your brownie points there... i think lol @camperbot
A. J. Bozdar
@moajday
Feb 03 2018 15:48
@MuhammedKarim You are welcome. Indeed, I am going to check there.
Hemakshi Sachdev
@hemakshis
Feb 03 2018 15:59
Good Evening everyone! I wanna start with the Game of Life project but I'm very confused on how to get started and make the grids.. I thought I would make them using divs but then I read in the "Let's Discuss" post of GoL that using divs made the board laggy... please help me on how to go about in this project
A. J. Bozdar
@moajday
Feb 03 2018 16:10

Please tell me if I am coding right?

function capitalize() {
        let text = prompt("Some text here!");
        return text[0].toUpperCase() + text.slice(1);
    }
    console.log(capitalize());

Thanks!

Ruben Dario
@rubendmatos1985
Feb 03 2018 16:12
hello guys i gpt stuck here
could you help me
i dont know what i mus to do
the task names it seek and destroy
Hemakshi Sachdev
@hemakshis
Feb 03 2018 16:18
@rubendmatos1985 What are you not able to understand
Ken Haduch
@khaduch
Feb 03 2018 16:20
@rubendmatos1985 - you have to write a function that will take arguments consisting of an array, which is the initial argument, and then any number of arguments that follow it. A typical invocation of the function will look like this: destroyer([1, 2, 3, 1, 2, 3], 3, 2); - the array is the first argument [1, 2, 3, 1, 2, 3], and the 3 and 2 are the additional arguments. They have provided a link for the arguments object - you use that to access all of the function arguments, and in this case, you want to use it to get the arguments that follow the initial array. The problem statement says: Remove all elements from the initial array that are of the same value as these arguments. So you find any arguments in the initial array that are contained in the list of the arguments that follow the initial array and remove them, return an array that has any remaining arguments. For the example that I put above, you would remove any 2 and 3 from the initial array, and return [1, 1] You have to be able to handle any number of additional arguments, so this one has two, some have three, but you can write code that will handle any number of arguments, so don't just hard code 2 and 3 as the count of values.
Ken Haduch
@khaduch
Feb 03 2018 16:27
@rubendmatos1985 - as I said, they give a link to the documentation for the Arguments object, and the array .filter() method. You can also use for loops and just do all of the code that way, or use some of the higher-order functions like filter() to do the job.
Teo
@Teo03
Feb 03 2018 16:34
Can someone take a look. I created a modal but when I click on the "Add recipe" button it shows nothing. Here is my code:
import React from 'react';
import Modal from 'react-bootstrap-modal';
import ReactDOM from 'react-dom';
export class AddRecipe extends React.Component {
    constructor(){
        super();
        this.state = {
            show: false
        }
        this.closeModal = this.closeModal.bind(this);
        this.showModal = this.showModal.bind(this);
    }
    showModal(){
        this.setState({
            show: true
        });
    }
    closeModal(){
        this.setState({
            show: false
        });
    } 
       render(){
        return (
        <div>
           <button onClick={this.showModal}>Add Recipe</button>

           <Modal show={this.state.show} onHide={this.closeModal}>
           <Modal.Header>
               <Modal.Title>Add Recipe:</Modal.Title>
           </Modal.Header>
           <Modal.Body>
               <h2>Name:</h2>
             <input />
                <hr />
           <h3>Instructions</h3>
             <textarea></textarea>
           </Modal.Body>
           <Modal.Footer>GG</Modal.Footer>
       </Modal>
        </div>
        );
    }
}
ReactDOM.render(<AddRecipe />, document.getElementById('app'));
Spacetime
@justinemar
Feb 03 2018 17:00
Why are you calling the function for the modal ? do you want the modal to close once a recipe is added?
Oh nevermind, i never than this project you meant to open the modal.
Teo
@Teo03
Feb 03 2018 17:02
The problem is that when I click it doesen't open
Spacetime
@justinemar
Feb 03 2018 17:09
can you inspect the page and see if the modal is there ? there's some cases that it's just out of the viewport.
Teo
@Teo03
Feb 03 2018 17:14
I checked it's ok
Still when I click nothing appears
Sweet Coding :)
@SweetCodingInc
Feb 03 2018 17:19
@Teo03 any errors on console?
Teo
@Teo03
Feb 03 2018 17:20
Only this: TypeError: Cannot read property 'createClass' of undefined
Sweet Coding :)
@SweetCodingInc
Feb 03 2018 17:21
That means react is not loaded correctly
How did you create this app?
Using create-react-app?
Teo
@Teo03
Feb 03 2018 17:23
No, should I send you my package.json?
Sweet Coding :)
@SweetCodingInc
Feb 03 2018 17:24
share you build file instead
is it webpack?
no worries...
Teo
@Teo03
Feb 03 2018 17:25
yes it's webpack
Sweet Coding :)
@SweetCodingInc
Feb 03 2018 17:25
is it there on github?
Teo
@Teo03
Feb 03 2018 17:26
I haven't still pushed it
I can do it now if you need
Sweet Coding :)
@SweetCodingInc
Feb 03 2018 17:28
yes please
Teo
@Teo03
Feb 03 2018 17:30
@SweetCodingInc Here is a link: https://github.com/Teo03/recipe_box
Sweet Coding :)
@SweetCodingInc
Feb 03 2018 17:32
@Teo03 hold on
Teo
@Teo03
Feb 03 2018 17:32
@SweetCodingInc Ok no problem
Sweet Coding :)
@SweetCodingInc
Feb 03 2018 17:36
@Teo03 just a note.. never push your node_modules to the repo
is it okay if I fork and submit pull request?
Teo
@Teo03
Feb 03 2018 17:36
@SweetCodingIn Yes of course
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 17:41
how can i align something to the center? not just the text, i mean an element
in html*
A. J. Bozdar
@moajday
Feb 03 2018 17:45

@MuhammedKarim

< YourElement style = text-align: center; >  </YourElement>

The grammar is same for whatever you want to align to the center of your page.

Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 17:48
thanks bro but its not working for me :( ill send it to you privately
Luc Martin
@fmartin5
Feb 03 2018 17:50
@ajbozdar Your capitalize function looks correct, but it will only change the first letter of user input
And maybe you should add a check for the empty string
A. J. Bozdar
@moajday
Feb 03 2018 17:51
@MuhammedKarim You can sure contact me via private messages, but if you paste your code here, someone will help you out in case I am not available.
@fmartin5 Check for the empty string? Could you please explain this more?
Luc Martin
@fmartin5
Feb 03 2018 17:53
Yes because text[0] will be undefined if textis empty @ajbozdar
Example if(text == "") return "";
Sweet Coding :)
@SweetCodingInc
Feb 03 2018 18:04
@Teo03 looks like there is some issue with the library itself
how can i center that iframe with the youtube vid?
Sweet Coding :)
@SweetCodingInc
Feb 03 2018 18:29
@Teo03 jquense/react-bootstrap-modal#54 known issue with react v16 +
Ken Haduch
@khaduch
Feb 03 2018 18:38
@MuhammedKarim - one way that it works is to wrap it in a div, and set a class on the div with the CSS property text-align: center;
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 18:39
just got it bro @khaduch iframe {margin:auto; display:block}
Ken Haduch
@khaduch
Feb 03 2018 18:39
@MuhammedKarim :+1:
Apollo
@enigmacipher
Feb 03 2018 18:52
Is there a better way to validate email other than type validation
With the type validation, I can enter apollo@gmail to submit the email. Is there a way to make entering the domain name required so I'd have to type apollo@gmail.com?
Sweet Coding :)
@SweetCodingInc
Feb 03 2018 18:53
@enigmacipher regular expression
Apollo
@enigmacipher
Feb 03 2018 18:56
@SweetCodingInc cool. Thanks :smile:
CamperBot
@camperbot
Feb 03 2018 18:56
enigmacipher sends brownie points to @sweetcodinginc :sparkles: :thumbsup: :sparkles:
:cookie: 229 | @sweetcodinginc |http://www.freecodecamp.org/sweetcodinginc
Teo
@Teo03
Feb 03 2018 19:17
@SweetCodingInc Ok, thanks for the help anyway
CamperBot
@camperbot
Feb 03 2018 19:17
teo03 sends brownie points to @sweetcodinginc :sparkles: :thumbsup: :sparkles:
:cookie: 231 | @sweetcodinginc |http://www.freecodecamp.org/sweetcodinginc
StrategyIsKey23
@23beyblade
Feb 03 2018 19:58
Hey guys, I'm having some trouble formatting my Social Media buttons in my code. I want them to have a picture of the social media button logo in the middle of them, but Im having trouble trying to get that to work. Can anyone help? Much appreciated! :) Code is Below:
'''
<div id="section4">
<h1 class="text-center">
<strong> Social Media: </strong>
</h1>
<!-- Style buttons with images, find out how to -->
            <a href="https://www.google.ca" target="_blank">
                <button style="padding: 24px 24px 24px 24px;"  class="btn round"  type=""> </button>


            <button>    <input type="image" height="100px" width="100px" src="https://cdn.pixabay.com/photo/2016/04/28/23/55/snapchat-1360003_960_720.jpg" class=" round" name=""> <

        <button style="padding: 24px 24px 24px 24px; background: url('https://cdn.pixabay.com/photo/2016/04/28/23/55/snapchat-1360003_960_720.jpg');" class="round centre btn img-responsive" type="">

        </button >
        <button style="padding: 24px 24px 24px 24px;" class="btn round " type="">

        </button>
        <button style="padding: 24px 24px 24px 24px;" class="btn round " type="">

        </button>
    </a>
    </div>
    '''
CamperBot
@camperbot
Feb 03 2018 19:58
:bulb: to format code use backticks! ``` more info
Darren Littlejohn
@darrenlittlejohn
Feb 03 2018 19:58
How do you go backbup a line in node repl to correct a mistak
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 20:14
If i wanna put a picture and put a paragraph of text in line as the pic, so like they are grouped together. how would i do that with html and css?
image.png
like this but with the picture on the right and lext on the left, then the next one opposite and so on...
zootechdrum
@zootechdrum
Feb 03 2018 20:28
guys i am having the hardest time creating a drop down menu
here is the link to my codepen
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
    <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#">Page 1-1</a></li>
      <li><a href="#">Page 1-2</a></li>
      <li><a href="#">Page 1-3</a></li>
    </ul>
  </li>
oops wrong thing to paste here is the link to my codepen
I am trying to get page1 to work
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 20:31
@zootechdrum
zootechdrum
@zootechdrum
Feb 03 2018 20:33
@MuhammedKarim I will try that thanks
CamperBot
@camperbot
Feb 03 2018 20:33
zootechdrum sends brownie points to @muhammedkarim :sparkles: :thumbsup: :sparkles:
:cookie: 116 | @muhammedkarim |http://www.freecodecamp.org/muhammedkarim
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 20:33
You're welcome
@zootechdrum
Muhammad Anis Ur Rahman
@MARahman49
Feb 03 2018 21:19
Hi all
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 21:20
Salaam :)
Muhammad Anis Ur Rahman
@MARahman49
Feb 03 2018 21:20
i just wanna ask how many lesson are there on HTML and CSS
W salam
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 21:20
on where? on FCC?
Muhammad Anis Ur Rahman
@MARahman49
Feb 03 2018 21:20
what if i wanna jump to JS
@MuhammedKarim Yea mate
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 21:21
i think you can, but best to learn HTML and CSS first, it says 5 hours but i did it in like 30-40 mins
its not long at all
Muhammad Anis Ur Rahman
@MARahman49
Feb 03 2018 21:21
hmmm
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 21:21
just go for it bro, best to do it in order
Muhammad Anis Ur Rahman
@MARahman49
Feb 03 2018 21:21
ok no problem
let c u soon
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 21:22
c ya bro @MARahman49
Muhammad Anis Ur Rahman
@MARahman49
Feb 03 2018 21:25
your level is 116 i think
what are you learning mate
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 21:25
not level, just brownie points
im on the portfolio project atm @MARahman49
Muhammad Anis Ur Rahman
@MARahman49
Feb 03 2018 21:27
hmmm thats are points?
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 21:28
yup
if u complete each level on the map you get a point...i think
if i thank you like this u get a point @MARahman49
CamperBot
@camperbot
Feb 03 2018 21:29
muhammedkarim sends brownie points to @marahman49 :sparkles: :thumbsup: :sparkles:
:cookie: 28 | @marahman49 |http://www.freecodecamp.org/marahman49
Muhammad Anis Ur Rahman
@MARahman49
Feb 03 2018 21:29
hmmm great
(y)
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 21:29
so u have 28 points in total... not bad bro
Muhammad Anis Ur Rahman
@MARahman49
Feb 03 2018 21:29
where are you from
i think i will have over 200 till morning
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 21:30
good luck bro :) @MuhammedKarim
England
  • i meant to tag u, not myself lool
Muhammad Anis Ur Rahman
@MARahman49
Feb 03 2018 21:30
:D
great
whats your experience in programming
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 21:31
not any lool @MARahman49
but i can still try and help you in html, css and js
Muhammad Anis Ur Rahman
@MARahman49
Feb 03 2018 21:33
seriously that would be great
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 21:37
Sure :) @MARahman49 but im no expert tho, just to let u know
Muhammad Anis Ur Rahman
@MARahman49
Feb 03 2018 21:37
Hmmm no problem mat
we will help each other
Ivan Ngundela
@ingundela
Feb 03 2018 21:41
hello everyone, I hope you all doing great…please need some help with a new project… I’m trying to achive full with hero image the link is https://ingundela.github.io/foremost/ but I’m still able to scross when I’ve not add any thing else… Thank in advance
Muhammad Anis Ur Rahman
@MARahman49
Feb 03 2018 21:42
add dropdowns
slidshows
@ingundela
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 21:46
@MARahman49 deal :P
Ivan Ngundela
@ingundela
Feb 03 2018 21:46
@MARahman49 don’t understand… what I want o to have th image moving up a bit so that I can achive the full page height
Muhammad Anis Ur Rahman
@MARahman49
Feb 03 2018 21:49
you dont wanna see that overflow image right?
@ingundela you want to have that full image like no movement
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 21:49
@ingundela style="height:100%"
try that bro
Zaerald Denze Lungos
@zd-zero
Feb 03 2018 21:51

Hi, I want to ask a question about a challenge in Exact Change
if I have

checkCashRegister(19.50, 20.00, 
 [
   ["PENNY", 1.01], 
   ["NICKEL", 2.05],
   ["DIME", 3.10], 
   ["QUARTER", 4.25],
   ["ONE", 90.00], 
   ["FIVE", 55.00], 
   ["TEN", 20.00], 
   ["TWENTY", 60.00],
   ["ONE HUNDRED", 100.00]
 ]);

about the ["FIVE", 55.00] does it means I have 55/5 = 11 Five dollars cash?

Ivan Ngundela
@ingundela
Feb 03 2018 21:55
@MARahman49 this is a 1900x 800 image with that image on the right… just want it to be full height … the way it is now you are able to scroll and it is not suppose to do that
@MuhammedKarim when I change height: 100vh, to 100% the all image is gone
Markus Kiili
@Masd925
Feb 03 2018 21:55
@zd-zero It means 55 dollars in fives.
Zaerald Denze Lungos
@zd-zero
Feb 03 2018 21:56
or should I add
PENNY value + NICKEL value + DIME value ....
to get the total cash drawer
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 21:56
@ingundela the scrolling depends on the browser size...right?
Zaerald Denze Lungos
@zd-zero
Feb 03 2018 21:56
@MuhammedKarim you should use style="height: 100vh"
Muhammad Anis Ur Rahman
@MARahman49
Feb 03 2018 21:57
@ingundela add that image to body background or either have a css property with x-overflow:hidden;
Zaerald Denze Lungos
@zd-zero
Feb 03 2018 21:57
for 100 % viewport height (vh)
for any height of browser,
Muhammad Anis Ur Rahman
@MARahman49
Feb 03 2018 21:57
he added image after his navbars i think thats why he face issue
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 21:57
ohh ok, thanks for letting me know :) @zd-zero
CamperBot
@camperbot
Feb 03 2018 21:57
muhammedkarim sends brownie points to @zd-zero :sparkles: :thumbsup: :sparkles:
:cookie: 290 | @zd-zero |http://www.freecodecamp.org/zd-zero
Muhammad Anis Ur Rahman
@MARahman49
Feb 03 2018 21:57
@zd-zero that was a js challange?
Markus Kiili
@Masd925
Feb 03 2018 21:58
@zd-zero That is the contents of the drawer in coins and notes. If you have for example a five dollar note, you cannot give 2 dollars back etc.
Ivan Ngundela
@ingundela
Feb 03 2018 21:58
@MuhammedKarim yes, if you check my portfolio website http://ingundela.com/ this is what I want to achive… when open you get full height image...
Zaerald Denze Lungos
@zd-zero
Feb 03 2018 21:58
ye, i get it now, because I got confused, thank you guys
Ivan Ngundela
@ingundela
Feb 03 2018 21:59
@MuhammedKarim I could use the exact the same code but it is not working becouse in this new project I’ve added uppder-bar
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 21:59
nice website bro, i like it @ingundela
I'm sorry idk what uppder-bar is
Muhammad Anis Ur Rahman
@MARahman49
Feb 03 2018 21:59
@ingundela add that image to body background
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 22:00
Are you using bootstrap?
Muhammad Anis Ur Rahman
@MARahman49
Feb 03 2018 22:00
@ingundela thats a wordpress portfolio?
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 22:01
@MARahman49 what coding have u done so far?
Ivan Ngundela
@ingundela
Feb 03 2018 22:02
@MuhammedKarim it’s not wordpress
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 22:02
image.png
Muhammad Anis Ur Rahman
@MARahman49
Feb 03 2018 22:02
@MuhammedKarim JS Java Andriod PHP
Ivan Ngundela
@ingundela
Feb 03 2018 22:02
@MARahman49 done it but the upper-bar and navbar moved down
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 22:02
how can i make that text appear next to the image? in line with it...?
cool @MARahman49
@ingundela i didnt ask if its wordpress lol he asked
Muhammad Anis Ur Rahman
@MARahman49
Feb 03 2018 22:03
add text-align:right property to image i think
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 22:04
highly doubt that would work bro @MARahman49
Muhammad Anis Ur Rahman
@MARahman49
Feb 03 2018 22:04
try
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 22:04
didn't work bro
Lee
@LeeConnelly12
Feb 03 2018 22:05
@MARahman49 You would make the image display inline-block with a set width of like 20% and then give the text a set width of like 80% width display inline block
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 22:05
@Masd925 could you advise me on this please?
oh ok @LeeConnelly12 lemme try it, thanks
CamperBot
@camperbot
Feb 03 2018 22:05
muhammedkarim sends brownie points to @leeconnelly12 :sparkles: :thumbsup: :sparkles:
:cookie: 189 | @leeconnelly12 |http://www.freecodecamp.org/leeconnelly12
Lee
@LeeConnelly12
Feb 03 2018 22:06
@MuhammedKarim I mean it depends on how the code is setup, have you got a link to the site or codepen we could see?
Muhammad Anis Ur Rahman
@MARahman49
Feb 03 2018 22:06
hmmm
css sucks
need practice on daily basis
Markus Kiili
@Masd925
Feb 03 2018 22:07
@MuhammedKarim Using float is one way.
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 22:10
@Masd925 @LeeConnelly12 both of yours combined made it work :)
just one issue, how do i make it look normal?
Ivan Ngundela
@ingundela
Feb 03 2018 22:11
Any sugestion guys?
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 22:12
sorry bro, im a noob :( @ingundela
Lee
@LeeConnelly12
Feb 03 2018 22:12
@MuhammedKarim You can do what @Masd925 suggested. Remove float right from the text and just float the image to the left
Muhammad Anis Ur Rahman
@MARahman49
Feb 03 2018 22:12
@ingundela pen it
Ivan Ngundela
@ingundela
Feb 03 2018 22:12
@MARahman49 added background image in body and I could get the full height image but all the content move down
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 22:12
check it now, it still doesn't work the normal way... @LeeConnelly12
Ivan Ngundela
@ingundela
Feb 03 2018 22:12
@MARahman49 like to the center of the page...
how to fix that
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 22:13
@ingundela margin:0?
Lee
@LeeConnelly12
Feb 03 2018 22:13
@MuhammedKarim You want to center it?
@MuhammedKarim Wrap the image and text in a div and then set the div to display block margin auto
Ivan Ngundela
@ingundela
Feb 03 2018 22:14
@MuhammedKarim stillno luck mate
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 22:14
oh wait....i think i just got it, i just needed space between the image and text @LeeConnelly12
Lee
@LeeConnelly12
Feb 03 2018 22:15
@MuhammedKarim For a space between the image and text you could add margin-right to the image
@MuhammedKarim Or margin-left to text
Muhammad Anis Ur Rahman
@MARahman49
Feb 03 2018 22:15
@LeeConnelly12 thats pen is editable kindly help him mate
Ivan Ngundela
@ingundela
Feb 03 2018 22:16

hero{

background: url('../img/foremost-hero.jpg');
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
background-size: cover;
position: relative;
top: 0;
bottom: 0;
height: 100vh;
z-index: 1;
}
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 22:16
i got it bro, check it now :) @LeeConnelly12
@MARahman49 he's helping just fine bro!
Ivan Ngundela
@ingundela
Feb 03 2018 22:20
@MuhammedKarim maybe if we could make the image to move up till we get the full image height
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 22:20
@ingundela can you put it in codepen please?
Ivan Ngundela
@ingundela
Feb 03 2018 22:21
@MuhammedKarim doing it
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 22:21
ok
Ivan Ngundela
@ingundela
Feb 03 2018 22:25
@MuhammedKarim I’m not able to get the image in there
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 22:26
copy ur image and paste it here
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 03 2018 22:32
then use the link generated for the codepen
and it should work
Ivan Ngundela
@ingundela
Feb 03 2018 22:35
@MuhammedKarim I’m not wining mate
Lee
@LeeConnelly12
Feb 03 2018 22:44
@ingundela You have to host that image somewhere, so upload it to imgur and use the imgur link. You can't use local files on codepen