These are chat archives for FreeCodeCamp/HelpFrontEnd

5th
Aug 2017
CallMeOrange
@EgnaroDev
Aug 05 2017 00:02
:watch: ...
Gulsvi
@gulsvi
Aug 05 2017 00:04
I have about 3-1/2 weeks
CallMeOrange
@EgnaroDev
Aug 05 2017 00:04
@SkyC0der Do And No Ke E
Hmm..
Gulsvi
@gulsvi
Aug 05 2017 00:04
Is that hawaiian :p
CallMeOrange
@EgnaroDev
Aug 05 2017 00:04
lol I'm trying to say Danke
Gulsvi
@gulsvi
Aug 05 2017 00:05
Distributed Advanced Neuronal Knowledge Engineering
CallMeOrange
@EgnaroDev
Aug 05 2017 00:05
@SkyC0der DistributedAdvancedNeuronalKnowledgeEngineering
Gulsvi
@gulsvi
Aug 05 2017 00:05
lol
CallMeOrange
@EgnaroDev
Aug 05 2017 00:06
Where did you get that?
CallMeOrange
@EgnaroDev
Aug 05 2017 00:06
lol at first I thought I was told to google Danke
Gulsvi
@gulsvi
Aug 05 2017 00:07
Definitely Awesome Not Knowing Everything
I guess they missed some
CallMeOrange
@EgnaroDev
Aug 05 2017 00:07
xD
iso
@iso1048
Aug 05 2017 00:08
@SkyC0der so what are the differences in the variations of js? Is js commonly interchanged with es?
Gulsvi
@gulsvi
Aug 05 2017 00:09
@gothamknight My understanding is that ES set the new standard, then it's a matter of time for all the implementations to catch up and support it. This is why async / await, for example, is only recently supported in most browsers
Ideally, though, there is no difference between two implementations that support the same version of ECMAScript
iso
@iso1048
Aug 05 2017 00:12
do the different variations/implementations use different keywords to relate to the same code standardised by ECMAscript or something? @SkyC0der
Gulsvi
@gulsvi
Aug 05 2017 00:15
@gothamknight I'm not sure about that - I've only used regular old JavaScript. Haven't looked at V8/Chakra to see how they interpret JS or handle it differently
Or JScript, any of those other implementations
CallMeOrange
@EgnaroDev
Aug 05 2017 00:16
TOOOOMany
iso
@iso1048
Aug 05 2017 00:16
as you can probably tell, i find all this confusing.
CallMeOrange
@EgnaroDev
Aug 05 2017 00:32
@SkyC0der
function spinalCase(str) {
  var array = str.match(/[A-Z]/g);
 var test = "";
  for (var i = 0; i < array.length; i++){
    console.log(str);
  }
  return test;
}
spinalCase("The AndyGriffithShow");
If I log str then I get 4 of str's because of array's length but how would I use only one str with array[i]?
I was thinking of nested loop
or not... I'll get too many str's
Pagnito
@Pagnito
Aug 05 2017 00:37
anyone ever use mobile mozilla?
CallMeOrange
@EgnaroDev
Aug 05 2017 00:37
I think we are only one here :/
So my answer is no lol
Pagnito
@Pagnito
Aug 05 2017 00:38
it boasts about speedbut its shit compare to chrome
CallMeOrange
@EgnaroDev
Aug 05 2017 01:35
@Pagnito Dude heard of Assassination classroom?
There is second season on crunchyroll
Mercy Manrique
@mers89
Aug 05 2017 01:53
need help with the weather app. Im using openweatherapp but when I click on the api it gives me a sample link. Anyway to get around getting sample link. I did one of the free subscriptions to get access to the api's
iso
@iso1048
Aug 05 2017 01:55
@mers89 i think it is better to use darksky api
Mercy Manrique
@mers89
Aug 05 2017 02:03
@gothamknight thanks. I was going off a tutorial that explains the process, but they use openweather app
CamperBot
@camperbot
Aug 05 2017 02:03
mers89 sends brownie points to @gothamknight :sparkles: :thumbsup: :sparkles:
:cookie: 350 | @gothamknight |http://www.freecodecamp.com/gothamknight
Johnny
@jtan3
Aug 05 2017 02:05
@mers89 i think in the instruction they tell you use https://fcc-weather-api.glitch.me/ now?
Coy Sanders
@coymeetsworld
Aug 05 2017 02:09
@mers89 one problem now is that if you use codepen its always through https
and the free version of openweathermap is non-secure and won't work
I used apixu in case you want a different version, darksky you have to hack around to get it to work and its not really recommended to do it that way
theres also yahoo weather I heard
CallMeOrange
@EgnaroDev
Aug 05 2017 02:12
Yahoo!
Daniel
@DanJP2016
Aug 05 2017 02:25
you can use https://ipapi.co/json? to get the location and add https://cors-anywhere.herokuapp.com to the front of your openweather api call to get it to work with https. That is what I ended up doing
Mercy Manrique
@mers89
Aug 05 2017 02:27
thanks everyone :)
Pagnito
@Pagnito
Aug 05 2017 03:05
@EgnaroDev nah
@EgnaroDev what is it
CallMeOrange
@EgnaroDev
Aug 05 2017 03:26
its an anime, really popular
You should check it out
glitz20
@glitz20
Aug 05 2017 03:30
hey guys how can I make these images responsive to scree size? https://codepen.io/sabin20/pen/EvPgMd
hey guys how can I make these images responsive to scree size? https://codepen.io/sabin20/pen/EvPgMd
Ken Haduch
@khaduch
Aug 05 2017 04:04

@sabin20 - I"m not 100% sure about this, but typically the img-responsive is used in conjunction with the Bootstrap grid, so with that you have some container (a parent div) that is going to re-size as the screen changes width, and then the image adjusts along with the size of the div.
For example - and this doesn't necessarily mesh well with the use of flexbox, if I take away the display:flex and make the images the child of a "row" div, and wrap each image with a div that has a class "col-sm-2", then as the width of the viewport is adjusted, the images will downsize until the "sm" breakpoint is reached, where they align vertically.

It might not be the result that you are after, but I think that that is what you need to do, or something similar to that, to get the images to resize in response to different viewport sizes. If you make all of the column divs "col-xs-2", then they will never break into a vertical configuration, and will size down to a small image size.

I hope that helps?

glitz20
@glitz20
Aug 05 2017 04:18
@khaduch so you advise me to use rows?
Ken Haduch
@khaduch
Aug 05 2017 04:37
@sabin20 - you need some kind of "parent" element for the image that will resize. Or you might be able to make the width of the images a percentage of the page width? But just having the image itself with no correlation to the page width will not make them Auto-size responsively.
glitz20
@glitz20
Aug 05 2017 04:37
@khaduch got it
@khaduch thanks
Liam Docherty
@ldocherty1
Aug 05 2017 10:17
Why doesn't my smooth scrolling work from '#part1' to '#part2' ?
https://jsfiddle.net/qg7jbxs2/4/
$(document).ready(function(){
  $("fa fa-angle-double-down").on('click', function(event) {

    if (this.hash !== "") {
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        window.location.hash = hash;
      });
    } // End if
  });
});
mustimuu
@mustimuu
Aug 05 2017 11:13
hello guys
guys. i am working on a wordpress template. and i want to link to an extern stylesheet. I dont want to work in their 60000 code css file. How can i do so
Ken Haduch
@khaduch
Aug 05 2017 12:02
@ldocherty1 - It seems that you had a few problems. I updated a copy of the jsfiddle here that works. Have a look and see if you can get to it?
Ken Haduch
@khaduch
Aug 05 2017 12:08

@ldocherty1 - the main changes were here:

  $(".fa.fa-angle-double-down").on('click', function(event) {
        event.preventDefault();
    debugger;
    if (this.parentElement.hash !== "") {
      event.preventDefault();

      // Store hash
      var hash = this.parentElement.hash;
console.log(`hash = ${hash}`);
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        window.location.hash = hash;
      });
    } // End if

although I fiddled around with the HTML and jquery settings - but I think that the main things were the selector for your "fa-angle-double-down" and the reference for this.hash should have been this.parentElement.hash.

I guess that I did change to the full version of jquery instead of the "slim" version? that might have made a difference because I'm going back and seeing what all of the changes did.
mustimuu
@mustimuu
Aug 05 2017 12:15
hello
can someone help me with wordpress??
I want to link to an external stylesheet
I do not want to use their css file
Ken Haduch
@khaduch
Aug 05 2017 12:24
@mustimuu - I seem to be the only other one here at this point, and I don't know anything about wordpress. Sorry! Maybe someone who knows wordpress will come along?
Koderkid1936
@Koderkid1936
Aug 05 2017 12:30
`
Koderkid1936
@Koderkid1936
Aug 05 2017 12:38
I floated all the div elements to the left but made sure to give them the right dimensions for them to be centered yet all the divs move to the edge of the element even after I applied margins and paddings is there a way around this ?
Ken Haduch
@khaduch
Aug 05 2017 12:51
@Koderkid1936 - do you have some code to post or a URL to your project or something?
Koderkid1936
@Koderkid1936
Aug 05 2017 12:53
@khaduch bare with me

`<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Hello</title>
    <meta name="description" content="An interactive getting started guide for Brackets.">
    <link rel="stylesheet" href="main.css">
</head>
<body>


    <div id="wrapper">

        <div id="header">
            <h1>Free Layouts</h1>
        </div>

        <div id="col1">
            col1
        </div>

        <div id="col2">
            col2
        </div>

        <div id="col3">
            col3
        </div>

        <div id="footer">
            footer
        </div>

    </div>



</body>

</html>
`

This is the HTML

`body, h1, h2, h3, h4, li, ul, {
margin: 0px;
padding: 0px;
}

body{
width: 960px;
height: 1200px;
margin: 0 auto 1em;
}

wrapper{

width: 960px;
height: 1200px;
margin: 0 auto 1em;

}

header{

width: 928px;
height: 128px;
margin-bottom: 4px;
padding-left: 16px;
padding-right: 16px;
background-color: silver;

}

col1 {

height: 480px;
margin-top: 4px;
margin-bottom 12px;
margin-right: 12px;
padding-left: 16px;
width: 424px;
background-color: brown;
float: left;

}

col2{

height: 480px;
margin-top: 4px;
margin-bottom 12px;
padding-right: 16px;
margin-left: 12px;
width: 424px;
background-color: brown;
float: left;

}

col3{

height: 480px;
padding-right: 16px;
padding-left: 16px;
width: 872px;
margin-bottom: 4px;
margin-top: 12px;
background-color: beige;
float: left;

}

footer{

height: 60px;
padding-left: 16px;
padding-right: 16px;
margin-top: 4px;
background-color: mediumaquamarine;
clear: both;
width: 928px;

}`

how did that happen
`
Ken Haduch
@khaduch
Aug 05 2017 12:58
@Koderkid1936 - to post code you want to put three backticks ``` on separate lines before and after your block of code. Only those three backticks on the line, nothing else. You can also go back and edit / delete posts for a few minutes after you make them, so you can clean up some of the extraneous code.
Koderkid1936
@Koderkid1936
Aug 05 2017 12:59
@khaduch thanks and how do I delete them
CamperBot
@camperbot
Aug 05 2017 12:59
koderkid1936 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3170 | @khaduch |http://www.freecodecamp.com/khaduch
Koderkid1936
@Koderkid1936
Aug 05 2017 13:00
@khaduch nvm
@khaduch
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Hello</title>
        <meta name="description" content="An interactive getting started guide for Brackets.">
        <link rel="stylesheet" href="main.css">
    </head>
    <body>


        <div id="wrapper">

            <div id="header">
                <h1>Free Layouts</h1>
            </div>

            <div id="col1">
                col1
            </div>

            <div id="col2">
                col2
            </div>

            <div id="col3">
                col3
            </div>

            <div id="footer">
                footer
            </div>

        </div>



    </body>
</html>
thats the html
body, h1, h2, h3, h4, li, ul, {
    margin: 0px;
    padding: 0px;
}

body{
    width: 960px;
    height: 1200px;
    margin: 0 auto 1em;
}

#wrapper{
    width: 960px;
    height: 1200px;
    margin: 0 auto 1em;
}

#header{
    width: 928px;
    height: 128px;
    margin-bottom: 4px;
    padding-left: 16px;
    padding-right: 16px;
    background-color: silver;


}

#col1 {
    height: 480px;
    margin-top: 4px;
    margin-bottom 12px;
    margin-right: 12px;
    padding-left: 16px;
    width: 424px;
    background-color: brown;
    float: left;

}


#col2{
    height: 480px;
    margin-top: 4px;
    margin-bottom 12px;
    padding-right: 16px;
    margin-left: 12px;
    width: 424px;
    background-color: brown;
    float: left;
}

#col3{
    height: 480px;
    padding-right: 16px;
    padding-left: 16px;
    width: 872px;
    margin-bottom: 4px;
    margin-top: 12px;
    background-color: beige;
    float: left;
}

#footer{
    height: 60px;
    padding-left: 16px;
    padding-right: 16px;
    margin-top: 4px;
    background-color: mediumaquamarine;
    clear: both;
    width: 928px;
}
thats the CSS
Ken Haduch
@khaduch
Aug 05 2017 13:07
@Koderkid1936 - I copied your code into a CodePen page, and here is the link - now what are you asking about, if this is displaying the problem that you are trying to solve?
Koderkid1936
@Koderkid1936
Aug 05 2017 13:10
@khaduch do you see how col1,col2 and col3 are moving to the the edge of the parent element (the wrapper)? Why are they not centered? that is my question what did I forget to include or do wrong for that to happen?
@khaduch or maybe..... it's their width??????????? :O
@khaduch I know that Padding + height/width = Total height/width but does that inlcude margin also? or does margin not affect overall width?
Ken Haduch
@khaduch
Aug 05 2017 13:22
@Koderkid1936 - if I go into devtools and just increase the margin-right value on #col1 then it pushes #col2 over to the right.
Koderkid1936
@Koderkid1936
Aug 05 2017 13:43
@khaduch nvm I just calculated it all wrong the pixels I mean
@khaduch thanks anyway
CamperBot
@camperbot
Aug 05 2017 13:43
koderkid1936 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: koderkid1936 already gave khaduch points
Liam Docherty
@ldocherty1
Aug 05 2017 14:00
@khaduch Thanks for the jsfiddle it works. However, when I copied and pasted it into atom it don't work I think it has something to do with the jquery link. Remember you said "I guess that I did change to the full version of jquery instead of the "slim" version? that might have made a difference because I'm going back and seeing what all of the changes did." was that the issue? What jQuery link should I use
CamperBot
@camperbot
Aug 05 2017 14:00
ldocherty1 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3171 | @khaduch |http://www.freecodecamp.com/khaduch
Hemakshi Sachdev
@hemakshis
Aug 05 2017 14:01
Hey Everyone!! Can please someone help me. Why is not my :active part of the buttons not working.. I don;t want that white background while clicking.. I have made changes in the CSS, but I guess I'm missing something. Would love your help :)
Ken Haduch
@khaduch
Aug 05 2017 14:14
@ldocherty1 - you have to use the version of jquery that has the .animate() method in it. I am not familiar with the "slim" version - but I'm guessing that it doesn't contain some of the bells and whistles like .animate()? From the documentation here - it looks like the "slim" version has a lot of stuff stripped out.
Liam Docherty
@ldocherty1
Aug 05 2017 14:22
@kedolago Ok, I tried looking up what jQuery version has '.animate()' within it http://api.jquery.com/animate/ However, it still don't work? super strange <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
Steve
@thecoog
Aug 05 2017 14:39
riddle me this: can i change the border in each row/column of a table to something unique for each?
Elizabeth Paul
@Kowalatam
Aug 05 2017 14:50
@thecoog dunno, maybe giving each row/column a specific id then styling the css ?
seems like work though if they are a lot , dunno
Steve
@thecoog
Aug 05 2017 14:50
@Kowalatam do you think they would overlap each other?
Elizabeth Paul
@Kowalatam
Aug 05 2017 14:51
@thecoog yeah, that's true. hmm. but why do you want to do that though
Steve
@thecoog
Aug 05 2017 14:53
@Kowalatam
blob
I want to have them stand out with their own unique border that shows their type
Elizabeth Paul
@Kowalatam
Aug 05 2017 14:56
@thecoog maybe a space between the borders might help, with margin maybe.. im just guessing here maybe someone else can be of more helo :)
help
Steve
@thecoog
Aug 05 2017 14:56
@Kowalatam thank you.
CamperBot
@camperbot
Aug 05 2017 14:56
thecoog sends brownie points to @kowalatam :sparkles: :thumbsup: :sparkles:
:cookie: 282 | @kowalatam |http://www.freecodecamp.com/kowalatam
Elizabeth Paul
@Kowalatam
Aug 05 2017 14:57
@thecoog lol, i didn't do anything but ur welcome :)
Mohamed Nabil Ayoub
@MohNabil
Aug 05 2017 15:04
hi campers, what does that error: "Please provide longitude as lon and latitude as lat as numbers/floats means?
Andrew Horn
@sophyphreak
Aug 05 2017 16:15
Hey, I'm doing the Twitch JSON project with React, but I've been having some weird problems. React seems to be re-rendering over and over again, and I'm not sure why. This would normally be something I would try to fix on my own, but since this is a JSON project, the server eventually timed me out. Anyone want to take a look at it? Thanks so much!
alpox
@alpox
Aug 05 2017 16:35
@sophyphreak Just show your codepen here. React usually only rerenders on change of a prop or state
Moisés Man
@moigithub
Aug 05 2017 16:36
also calling setState will make it rerender.. there are some life cycle events where u should NOT call setState.. or will create a infinite loop
Yeah that's what I thought. That's why I'm confused
What kinds of lifecycle events where I shouldn't set state (because infinite loop)?
alpox
@alpox
Aug 05 2017 16:45
@sophyphreak Sry read wrong. Your major problem is that you do you rest calls directly in the render
Or rather you call it through another function from there.
This means that the component
  1. renders
  2. calls ajax
  3. gets data,
  4. renders with new data
  5. calls ajax
  6. gets data
  7. renders with new data
  8. ....
Do your ajax calls in the componentDidMount lifecycle method instead
Matúš Námešný
@LordMathis
Aug 05 2017 16:47
@sophyphreak or in constructor
Moisés Man
@moigithub
Aug 05 2017 16:48
also check ur this context
Andrew Horn
@sophyphreak
Aug 05 2017 16:48
roger on the moving the ajax to constructor or componentDidMount
@moigithub , what about the this context?
@alpox @LordMathis Thanks!
CamperBot
@camperbot
Aug 05 2017 16:49
sophyphreak sends brownie points to @alpox and @lordmathis :sparkles: :thumbsup: :sparkles:
:star2: 1297 | @alpox |http://www.freecodecamp.com/alpox
:cookie: 355 | @lordmathis |http://www.freecodecamp.com/lordmathis
Moisés Man
@moigithub
Aug 05 2017 16:49
using es6 classes dont autobind this
soo using this on some methods dont point to the same object
Andrew Horn
@sophyphreak
Aug 05 2017 16:51
ok. So I should just be careful that this is bound before passing a function to a child component?
alpox
@alpox
Aug 05 2017 16:53
@moigithub In his case the this is still right
Since he doesn't pass around class methods to other components it still works out
Andrew Horn
@sophyphreak
Aug 05 2017 17:04
cool thanks
hifede
@hifede
Aug 05 2017 17:07
thanks @SkyC0der for your help yesterday. now i'm having trouble with sizing my thumbnails and positioning them on the page. anybody could help? https://codepen.io/arolf_flora/pen/XajbJa?editors=1100
CamperBot
@camperbot
Aug 05 2017 17:07
hifede sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2311 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Aug 05 2017 17:13

@hifede Instead of this:

 <div class="col-6 offset-3">
<h1><b>Work</b></h1>
   </div>

  <div class="row"> 
   <div class="col-6 offset-0">

   <a class=  target="_blank" href="https://codepen.io/arolf_flora/full/KvzMmE">
  <img class= "img-responsive" src="https://image.ibb.co/dEyvuv/Ke_pernyo_foto_2017_08_04_22_15_34.png" alt="Kiran Gandhi Tribute Page">
</a>

</div>
    </div>

Try something more like this to use the bootstrap grid correctly:

<section class="work">
  <div class="row">
    <div class="col text-center">
      <h1><strong>Work</strong></h1>
    </div>
  </div>
  <div class="row">
    <div class="col-6">
      <a target="_blank" href="https://codepen.io/arolf_flora/full/KvzMmE">
        <img class="img-fluid" src="https://image.ibb.co/dEyvuv/Ke_pernyo_foto_2017_08_04_22_15_34.png" alt="Kiran Gandhi Tribute Page">
      </a>
    </div>
  </div>
</section>
col has to be in a row, <b> is now <strong> in HTML5, fixed class= target="_blank", offset-0 doesn't exist, and img-responsive is only used in Bootstrap 3, not v4. The <section> tag can be used to separate the sections of your page.
Liam Docherty
@ldocherty1
Aug 05 2017 17:24
What jQuery link do I use with my jsfiddle for my smooth scrolling to work? https://jsfiddle.net/qg7jbxs2/6/
Smooth scrolling works in the jsfiddle. However, on atom it don't work due to the jQuery link not sure what one to use as I tried the 3.2.1 version and it didn't work on atom.
hifede
@hifede
Aug 05 2017 17:26
thank you @SkyC0der for this, gonna do the same with all my sections. however, i am not sure about resizing and positioning my thumnails, could you help. also, apparently every time a set the parameters for "img" my circled image chenges as well which i wouldnt like
CamperBot
@camperbot
Aug 05 2017 17:26
hifede sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:warning: hifede already gave skyc0der points
Gulsvi
@gulsvi
Aug 05 2017 17:26
@hifede Sure, what do you mean about resizing/positioning your thumbnails?
@ldocherty1 The latest jQuery should work great: https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
hifede
@hifede
Aug 05 2017 17:43
@SkyC0der in the meanwhile i got them into a square, now i have a problem positioning them all into one line
Liam Docherty
@ldocherty1
Aug 05 2017 17:44
@SkyC0der Thanks do you mind checking my jsiffdle out and telling me what I'm missing for the smooth scrolling to work when I click the arrow? https://jsfiddle.net/eweqvgf0/
CamperBot
@camperbot
Aug 05 2017 17:44
ldocherty1 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2312 | @skyc0der |http://www.freecodecamp.com/skyc0der
Liam Docherty
@ldocherty1
Aug 05 2017 17:46
@SkyC0der On atom I added this <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> and it still didn't work maybe the code then?
Moisés Man
@moigithub
Aug 05 2017 17:47
@hifede "row" are horizontal elements.. if u put each "square" on its "own row" then it will apear one on its "own line"
@ldocherty1 incomplete code ?? missing some closing brackets curly/parenthesis
Liam Docherty
@ldocherty1
Aug 05 2017 17:52
@SkyC0der How strange.. I updated my code in my jsfiddle and it's working on their but not on atom?
Gulsvi
@gulsvi
Aug 05 2017 17:52
@ldocherty1 I was going to see, seems like it's smooth scrolling fine in your JSFiddle
@hifede Everything in bootstrap must go in a container. Inside containers, you have rows, and inside rows you have columns. All of your content goes in columns. Anything outside of a column/row/container is not going to behave as you would expect.
<div class="container">
  <div class="row">
    <div class="col">
      content
    </div>
  </div>
</div>

adjust the col size as needed, add more as needed. No more than 12 per row.
Notice, for example, how I changed your title from:

 <div class="col-6 offset-3">
<h1><b>Work</b></h1>
   </div>

To:

  <div class="row">
    <div class="col text-center">
      <h1><strong>Work</strong></h1>
    </div>
  </div>
hifede
@hifede
Aug 05 2017 18:10
@SkyC0der sorry if i'm being a bit slow - i did as i think you said but i am having some issues. first, the border size under "work" changed. and for some reason, only 2 of my 3 thumbnails are in line https://codepen.io/arolf_flora/pen/XajbJa?editors=1100
CallMeOrange
@EgnaroDev
Aug 05 2017 18:21
lol I have the same image of "Coming soon"
hifede
@hifede
Aug 05 2017 18:23
i managed to put them in a row by adjusting the size: <div class="col col-1 offset-2">
lol sorry i mean
Liam Docherty
@ldocherty1
Aug 05 2017 19:40
@SkyC0der Good news, I fixed the issue that I had earlier with the smooth scrolling.
thinsoldier
@thinsoldier
Aug 05 2017 19:41
Should I be using ruby sass or node sass or libsass?
Gulsvi
@gulsvi
Aug 05 2017 20:05

@hifede With your thumbnail class, it seems you want each image to have a height x width = to 15% of the screen width.

  height: 15vw; 
  width : 15vw;

Let the bootstrap grid do that for you instead. A row is 12 columns, so col-2 would be 16.67% the width of a row. About the same as 15vw in your case.

  <section class="work container">
    <div class="row">
      <div class="text-center">
        <h1><strong>Work</strong></h1>
      </div>
    </div>
    <div class="row">
      <div class="col-2">
        <a target="_blank" href="https://codepen.io/arolf_flora/full/KvzMmE">
          <img class="img-fluid" src="https://image.ibb.co/dEyvuv/Ke_pernyo_foto_2017_08_04_22_15_34.png" alt="Kiran Gandhi Tribute Page">
        </a>
      </div>
      <div class="col-2">
        <a target="_blank" href="https://codepen.io/arolf_flora/full/KvzMmE">
          <img class="img-fluid" src="http://www.creativeacademymanchester.co.uk/wp-content/uploads/2016/11/coming-soon.png" alt="Coming Soon">
        </a>
      </div>
      <div class="col-2">
        <a target="_blank" href="https://codepen.io/arolf_flora/full/KvzMmE">
          <img class="img-fluid" src="http://www.creativeacademymanchester.co.uk/wp-content/uploads/2016/11/coming-soon.png" alt="Coming Soon">
        </a>
      </div>
    </div>
  </section>
I think col-4 would look better, personally, or perhaps a combination of classes to make the images a little bigger on small screens
Gulsvi
@gulsvi
Aug 05 2017 20:10
@thinsoldier You can use whichever libraries you want here at Free Code Camp. No requirements to use a specific CSS preprocessor for our front-end development projects.
@ldocherty1 Congrats :) :clap: :confetti_ball:
David Lower
@davidlower
Aug 05 2017 20:15
Hi could someone help me with a javascript issue
What is the difference between the following sets of code. I know it is probably really simple but it is confusing me as to when I should use either declaration of a function
var peterRabbit = function (num) {
arguments;
arguments;
arguments;
};
function peterRabbit(num) {
arguments;
arguments;
arguments;
}
thanks in advance
Gulsvi
@gulsvi
Aug 05 2017 20:21
@davidlower For the first example, var peterRabbit = function(num) {, the function can only be called in the lines of code that follow the function. For the second example, the function is defined as soon as the surrounding function (or your entire script) is executed
peterRabbit(5); // undefined

var peterRabbit = function (num) {
    arguments;
    arguments;
    arguments;
};
peterRabbit(5); // no errors, you get a return from the function

function peterRabbit(num) {
    arguments;
    arguments;
    arguments;
}
David Lower
@davidlower
Aug 05 2017 20:22
Ok just wrapping my head around it
Gulsvi
@gulsvi
Aug 05 2017 20:23
It's about function expressions vs. function declarations
David Lower
@davidlower
Aug 05 2017 20:23
ayy nice I can read about those keywords you just used
Thanks for that last tip
Gulsvi
@gulsvi
Aug 05 2017 20:24
Here's a bunch of different people talking about it :) https://stackoverflow.com/questions/336859/var-functionname-function-vs-function-functionname @davidlower
David Lower
@davidlower
Aug 05 2017 20:24
Are perfect I’ll have a read of that later
wow lots of comments
So could you explain it like this is a simple way.
Gulsvi
@gulsvi
Aug 05 2017 20:27
I think I gave a good summary of it above
Those are really the main differences - when the function can be called
There are other more minor differences, but if you're just trying to wrap your head around it, I'm afraid those minor differences might cause more confusion
David Lower
@davidlower
Aug 05 2017 20:29
No I think what you have written actually does make sense. I think I need to dive deep into the actually foundations of JS and understand the core basics even more
@SkyC0der thanks for the help. Much appreciated
Gulsvi
@gulsvi
Aug 05 2017 20:30
Any time
David Lower
@davidlower
Aug 05 2017 20:31
don’t you get a brownie as I said thanks
Gulsvi
@gulsvi
Aug 05 2017 20:38
I don't care about brownies, but yeah, that's weird :)
@SkyC0der thanks
CamperBot
@camperbot
Aug 05 2017 20:38
sorry skyc0der, you can't send brownie points to yourself! :sparkles: :sparkles:
Gulsvi
@gulsvi
Aug 05 2017 20:46
No idea why copy/pasting your @SkyC0der thanks doesn't work, but typing it out from scratch does work
var myCharCodes = '@SkyC0der thanks'.split('').map(v => v.charCodeAt(0))
var theirCharCodes = '@SkyC0der thanks'.split('').map(v => v.charCodeAt(0))
var difference = myCharCodes.filter(val => !theirCharCodes.includes(val)).concat(theirCharCodes.filter(val => !myCharCodes.includes(val)));

console.log(difference); // []
David Lower
@davidlower
Aug 05 2017 20:48
try again then
thank you @SkyC0der
CamperBot
@camperbot
Aug 05 2017 20:48
davidlower sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2313 | @skyc0der |http://www.freecodecamp.com/skyc0der
David Lower
@davidlower
Aug 05 2017 20:48
There we go
anyway thanks for the help. Have a good night
Gulsvi
@gulsvi
Aug 05 2017 20:51
lol, gn
aRtoo
@artoodeeto
Aug 05 2017 21:15
aight. im giving up. i need help. convert numbers to roman numerals.
i have this.
function convertToRoman(num) {
  /*
  var I = 1;
  var V = 5;
  var X = 10;
  var L = 50;
  var C = 100;
  var D = 500;
  var M = 1000;
  */

  var result ="";

  while(num !== 0){

  if(num>=1 && num<=4){
    result += 'I';
    num -=1;
   console.log(num + 'uno');

  }else if(num>=5 && num<=9){
    result = 'V';
    num -= 5;
    console.log(num  + 'dos');

  }else if(num>=10 && num<=49){
    result += 'X';
    num -= 10;
    console.log(num  + 'tres');

  }else if(num>=50 && num<=99){
    result += 'L';
    num -= 50;
    console.log(num  + 'kwartro');

  }else if(num>=100 && num<=499){
    result += 'C';
    num -= 100;
    console.log(num  + 'singko');

  }else if(num>=500 && num<=999){
    result += 'D';
    num -= 500;
    console.log(num + 'sais');

  }else if(num>=1000){
    result += 'M';
    num -= 1000;
    console.log(num + 'syete');
  }

  }


 return result;
}

convertToRoman(78);
iso
@iso1048
Aug 05 2017 21:19
@artoodeeto I had something similar to begin with too, then someone told me about having arrays which store the roman numeral and another array to store the numbers:
  var numbers = [ 1000, 900, 800, 700, 600, 500, 400, 
                  300, 200, 100, 90, 80, 70, 60, 50, 40,
                  30, 20, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1 ];

  var numerals = [ 'M', 'CM', 'DCCC', 'DCC', 'DC', 'D', 
                   'CD', 'CCC', 'CC', 'C', 'XC', 'LXXX', 
                   'LXX', 'LX', 'L', 'XL', 'XXX', 'XX', 
                   'X', 'IX', 'VIII', 'VII', 'VI', 'V', 
                   'IV', 'III', 'II', 'I' ];
aRtoo
@artoodeeto
Aug 05 2017 21:20
@gothamknight hmm. im gonna try this sir.
thanks
alpox
@alpox
Aug 05 2017 21:25
@gothamknight there is no need for most of the numbers you put there, butthe aporoach is a good one :)
Gulsvi
@gulsvi
Aug 05 2017 21:29

@artoodeeto This was the map I was referring to yesterday:

var values = {
  1000:  "M",
   900: "CM",
   500:  "D",
   400: "CD",
   100:  "C",
    90: "XC",
    50:  "L",
    40: "XL",
    10:  "X",
     9: "IX",
     5:  "V",
     4: "IV",
     1:  "I"
};

Or, a 2D Array:

  var values = [
    [1, "I"],
    [4, "IV"],
    [5, "V"],
    [9, "IX"],
    [10, "X"],
    [40, "XL"],
    [50, "L"],
    [90, "XC"],
    [100, "C"],
    [400, "CD"],
    [500, "D"],
    [900, "CM"],
    [1000, "M"]
  ];
Two arrays work too - as shown by Gothamknight. Lots of approaches ;)
aRtoo
@artoodeeto
Aug 05 2017 21:30
@SkyC0der i tried this yesterday but i was confused. i dont know how to handle that.
iso
@iso1048
Aug 05 2017 21:31
@alpox I guess i didnt really think beyond what I was given at the time
Gulsvi
@gulsvi
Aug 05 2017 21:31
Good time to practice @artoodeeto It's important to be able to access data from a lookup table
This is one thing they tried to teach us in the profile lookup challenge
aRtoo
@artoodeeto
Aug 05 2017 21:32
@SkyC0der the 2d array is easy to access the lookup i might refresh my i knowledge on thatq
@SkyC0der thanks again and again sir
CamperBot
@camperbot
Aug 05 2017 21:32
artoodeeto sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2314 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Aug 05 2017 21:33
You're welcome, bro sir master
:p
iso
@iso1048
Aug 05 2017 21:38
@SkyC0der have you considered what to make using the star wars api?
hifede
@hifede
Aug 05 2017 21:39
@SkyC0der thanks, however if i do it wit col-x only, my first thumbnail won't be square anymore. also, hey are no longer in one row.
CamperBot
@camperbot
Aug 05 2017 21:39
hifede sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2315 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Aug 05 2017 21:42
@gothamknight I haven't thought about it yet :)
@hifede col-x doesn't affect the border radius of your images, they aren't in the same row because of your thumbnail class settings in your CSS
iso
@iso1048
Aug 05 2017 21:45
@SkyC0der there is also a pokemon api haha
Gulsvi
@gulsvi
Aug 05 2017 21:49
@gothamknight lol
tobororobot
@tobororobot
Aug 05 2017 22:18
Anyone here
iso
@iso1048
Aug 05 2017 22:19
yeah
tobororobot
@tobororobot
Aug 05 2017 22:21
I have a general question the front end development program - like how does the projects portion function?
I’m running through the modules, answering questions, just wondering if my mind is absorbing much from the modules, or if it will really start to make sense when working on the project portion of the program
iso
@iso1048
Aug 05 2017 22:26
Yeah the projects are essential. You will run into problems when doing the projects, then you can go back and look at the models and ask questions on here and do your own reading to try and find the solutions. Dont worry if you cant remember everything you are learning at the moment - i had to look over them a couple times
I dont know if that answered your question....
tobororobot
@tobororobot
Aug 05 2017 22:37
@gothamknight thanks, you answered my question
CamperBot
@camperbot
Aug 05 2017 22:37
tobororobot sends brownie points to @gothamknight :sparkles: :thumbsup: :sparkles:
:cookie: 351 | @gothamknight |http://www.freecodecamp.com/gothamknight
tobororobot
@tobororobot
Aug 05 2017 22:38
thats what I was wondering, I’ve just felt like I’ve been working through the problems and not really absorbing some things.
Thanks!
iso
@iso1048
Aug 05 2017 22:41
@tobororobot cool. yeah don't worry about it.
Mohamed Nabil Ayoub
@MohNabil
Aug 05 2017 23:01
how can i open a link in json object like this "icon":"https://cdn.glitch.com/6e8889e5-7a72-48f0-a061-863548450de5%2F09n.png?1499366021215” using jquery
korzo
@korzo
Aug 05 2017 23:02
@MohNabil It's image. What do you mean by open ?
Mohamed Nabil Ayoub
@MohNabil
Aug 05 2017 23:03
use the image with jquery not the url itself
iso
@iso1048
Aug 05 2017 23:07
@MohNabil you mean set the src of an img tag?
Mohamed Nabil Ayoub
@MohNabil
Aug 05 2017 23:08
i want to put the icon image in a div with jQuery but if i use .html i will put the url itself
CallMeOrange
@EgnaroDev
Aug 05 2017 23:09
$(.targetDiv).html("<img src='+json.icon+'>");
json.icon == a url for an image
You want to set an image in a div element?
iso
@iso1048
Aug 05 2017 23:12
$(".targetDiv .img").attr("src", json.icon); is another way
@gothamknight what's .img for?
Mohamed Nabil Ayoub
@MohNabil
Aug 05 2017 23:18
@EgnaroDev @gothamknight thanks guys for your help
CamperBot
@camperbot
Aug 05 2017 23:18
mohnabil sends brownie points to @egnarodev and @gothamknight :sparkles: :thumbsup: :sparkles:
:cookie: 550 | @egnarodev |http://www.freecodecamp.com/egnarodev
:cookie: 352 | @gothamknight |http://www.freecodecamp.com/gothamknight
CallMeOrange
@EgnaroDev
Aug 05 2017 23:20
:+1:
iso
@iso1048
Aug 05 2017 23:20
@MohNabil $(".targetDiv .img") selects all elements with the class .img that are within the element with the class .targetDiv
CallMeOrange
@EgnaroDev
Aug 05 2017 23:21
Shouldn't img select all img elements?
Never mind