These are chat archives for FreeCodeCamp/HelpFrontEnd

25th
Feb 2018
Chi
@chiyc
Feb 25 2018 00:00
1 2 4 8 16 32 64 128
1 0 0 0 0 0 0 0
Then you put a 1 for any odd numbers and a 0 for any even numbers
So for example if you have 176, you do integer division by 2 again:
1 2 5 11 22 44 88 176
1 0 1 1 0 0 0 0
Donnie
@Donnie-D
Feb 25 2018 00:12
Could someone please help me run through the following syntax please?
//This bit below is what I can't make sense of
var script = $("<script />", {
    src: "http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-1.json",
    type: "application/json"
  }
);
$("head").append(script);
Chi
@chiyc
Feb 25 2018 00:15
@Donnie-D The first bit is like assigning var script = <script src="http://...." type="application/json" />
$("<script />", options)
Is like creating an HTML <script /> element and appending the attributes provided in the options object
Donnie
@Donnie-D
Feb 25 2018 00:17
is this JS or jQuery syntax? (sorry if its a silly question)
Chi
@chiyc
Feb 25 2018 00:17
jQuery
jQuery is usually marked by use of $
Donnie
@Donnie-D
Feb 25 2018 00:19
i have learned a bit of jQuery but perhaps this is some advanced level syntax? I haven't come across this sort yet. Could you be kind enough to drop me a link where I could see more about it please?
I only know jQuery to be like $("head").append(script);
$() is a really loaded function
AbrisM
@AbrisM
Feb 25 2018 00:21
Anyone familiar with subnetting??
Donnie
@Donnie-D
Feb 25 2018 00:21
seems like it hah
Chi
@chiyc
Feb 25 2018 00:21
@AbrisM Like CIDR subnet masks?
Donnie
@Donnie-D
Feb 25 2018 00:22
thanks though. I shall start on reading now and see if it gets in my head lol
AbrisM
@AbrisM
Feb 25 2018 00:24
Hmm, like subnetting networks
like if I want to make a 192.128.1/24
Chi
@chiyc
Feb 25 2018 00:25
Do you mean 192.128.1.0?
Actually
AbrisM
@AbrisM
Feb 25 2018 00:25
Yes, but with a subnet hahaha
Chi
@chiyc
Feb 25 2018 00:25
Not that it really matters :smile:
Do you mean actually setup a forwarding table on a router?
AbrisM
@AbrisM
Feb 25 2018 00:28
hmm not sure
We're not doing routers yet, but we're doing subnetting and ANDING
Chi
@chiyc
Feb 25 2018 00:29
Oh, learning about binary numbers and boolean logic?
AbrisM
@AbrisM
Feb 25 2018 00:30
Boolean not yet, but binary yes
I understand the decimal to binary conversion
and adding binaries together
but the subnetting/Anding is confusing lol
Chi
@chiyc
Feb 25 2018 00:32
ANDing is looking to see if an IP address matches up to a subnet
192.128.1.0/24 is 11000000.10000000.00000001.x
An IP address that's part of that subnet has the same first 24 digits
Ohhh, I see what you're asking
Chi
@chiyc
Feb 25 2018 00:38
If you're given a subnet mask and an IP address, then you apply the AND operator to each of the digits to get the network address
AbrisM
@AbrisM
Feb 25 2018 00:50
AND operator hmm
Curtis
@CurtisJCamp
Feb 25 2018 01:05
Hey I was wondering if somebody can help me out with my pomodoro clock. When my work timer goes to zero it waits a full "minute" to display the break timer in the progress bar.
https://codepen.io/CurtisjCamp/pen/gvdjOY?editors=0010
Chi
@chiyc
Feb 25 2018 01:32
So at 0 minutes, you instead want it to show the starting time for the break?
anthonygallina1
@anthonygallina1
Feb 25 2018 01:32
hmmm seems to work here
but secs not mins
Chi
@chiyc
Feb 25 2018 01:39
@CurtisJCamp What's shown on your Pomodoro clock for your work time does not actually line up with your workCount variable
Curtis
@CurtisJCamp
Feb 25 2018 01:40
Yes that's exactly what I want to happen @chiyc
And I will change the timer to a minute once I'm done testing it
Chi
@chiyc
Feb 25 2018 01:41
But when your clock shows 0 minutes, your timer function still thinks that workCount is at 1 minute
OH
Curtis
@CurtisJCamp
Feb 25 2018 01:48
OH? lol
Chi
@chiyc
Feb 25 2018 01:48
Sorry, I was mistaken
I put a console.log in the wrong place :grin:
Curtis
@CurtisJCamp
Feb 25 2018 01:48
I feel like I just have some part of the JS in the wrong order
ohh I gotcha
Chi
@chiyc
Feb 25 2018 01:52
Ohhh, I think I know why
Possibly
On the first minute of your break time, your code still fires line 102
Curtis
@CurtisJCamp
Feb 25 2018 01:53
I'm open to everything, this has been bugging me for an hour already
Chi
@chiyc
Feb 25 2018 01:54
You probably want an else {} after your if statement
Or you just move lines 101-102 to above your if statement
aadtyaraj01
@aadtyaraj01
Feb 25 2018 01:56
@khaduch oh...yes i'll have to change that
Curtis
@CurtisJCamp
Feb 25 2018 01:58
Thank you so much. I added an if else statement and that fixed it thankyou @chiyc
CamperBot
@camperbot
Feb 25 2018 01:58
curtisjcamp sends brownie points to @chiyc :sparkles: :thumbsup: :sparkles:
:cookie: 366 | @chiyc |http://www.freecodecamp.org/chiyc
Chi
@chiyc
Feb 25 2018 01:58
Dope!
You're welcome! :smile:
Liam Docherty
@ldocherty1
Feb 25 2018 02:14

Hi,

How can I make my background image header.jpg cover the whole of the first header section instead of half?

https://github.com/ldocherty1/Unit28_Assignment1

<!-- Masthead -->
    <header class="masthead text-white text-center">
        <div class="container">
            <div class="row">
                <div class="col-xl-9 mx-auto">
                    <h1 class="brand-heading type-it bounceInDown animated"></h1>
                    <p class="intro-text bounceInDown animated type-it2">I am a Front End developer based in the UK. If you are a business seeking a web presence or an employer looking to hire, you can get in touch with me here.</p>
                    <a class="btn btn-primary btn-xl rounded js-scroll-trigger bounceInDown animated" href="#services">Find Out More <i class="fa fa-chevron-down" aria-hidden="true"></i></a> </div>
            </div>
        </div>
    </header>
header.masthead {
    position: relative;
    background-color: #343a40;
    background: url(../images/header.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    padding-top: 8rem;
    padding-bottom: 8rem;
}
啊吖嗄
@LinHuijuan
Feb 25 2018 02:53
Why do I link pictures like this, but the pictures are not shown?
<imag src="https://zh.wikipedia.org/wiki/%E5%91%A8%E6%81%A9%E6%9D%A5#/media/File:Zhou_Enlai_in_1940s(color).jpg">
Rouy
@Roudy_Hanna_twitter
Feb 25 2018 02:55
@gulsvi oh man i really wanna fake visit Hawaii!!!
Gulsvi
@gulsvi
Feb 25 2018 02:57
:palm_tree: :palm_tree: :airplane: :)
@LinHuijuan Two issues, that links to a web page for that picture, not the picture itself. Also, it's the <img> tag not the <imag> tag.
<img src="https://upload.wikimedia.org/wikipedia/commons/3/30/Zhou_Enlai_in_1940s%28color%29.jpg">
Use that instead ^
@ldocherty1 You need to remove the padding to make it fill up all of your header
Gulsvi
@gulsvi
Feb 25 2018 03:03
That's the box model ^ @ldocherty1 and an important concept in Front End Development
啊吖嗄
@LinHuijuan
Feb 25 2018 03:08
@gulsvi Can you tell me how this link is made?
啊吖嗄
@LinHuijuan
Feb 25 2018 03:15
@gulsvi thank you ,i know how to do it now .
CamperBot
@camperbot
Feb 25 2018 03:15
linhuijuan sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2622 | @gulsvi |http://www.freecodecamp.org/gulsvi
bocolo1
@bocolo1
Feb 25 2018 03:15
Why is this div not going to a small height? http://www.zen76171.zen.co.uk/somediv.html
Liam Docherty
@ldocherty1
Feb 25 2018 03:27
@gulsvi I removed the padding. however, the width decreased? thanks for the response as well much appreciated
CamperBot
@camperbot
Feb 25 2018 03:27
ldocherty1 sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2623 | @gulsvi |http://www.freecodecamp.org/gulsvi
Jacob Pieczynski
@JacobPie
Feb 25 2018 03:42
Hey guys! I am working on the Twitch Viewer and whenever I type in a new search entry, the css doesn't carry over. Can anyone help me? https://codepen.io/JakePie/full/vdzRmB/
roughnut
@roughnut
Feb 25 2018 04:36
Hey guys, any idea what is going on here with this linear gradient in Chrome. It works horizontally, but vertically, it doesn’t. https://codepen.io/roughnut/pen/WMgabW
Ken Haduch
@khaduch
Feb 25 2018 04:57

@roughnut - the problem appears to be the fact that there is no content on the page and it looks like it just repeats a very small vertical slice that runs across the page. You can see it work if you add this HTML to the HTML panel:

<div class="fullPage"></div>

and this CSS

.fullPage {
    height: 100vh;
}
Ken Haduch
@khaduch
Feb 25 2018 05:02
@roughnut - it seems to be related to the margin: 8px; default on the body element, at least in the Opera browser. Which browser are you using - Chrome? It must be doing the same thing there...
@roughnut - you can also add the height: 100vh; to the body element CSS that you have.
Ken Haduch
@khaduch
Feb 25 2018 05:14
@JacobPie :point_up: February 24, 2018 10:42 PM - did you get this working? I tried your page and it looks like each page is styled the same? So maybe I'm not sure what you're asking about if you are still having a problem with it...
roughnut
@roughnut
Feb 25 2018 05:59
@khaduch That worked! Thanks!
CamperBot
@camperbot
Feb 25 2018 05:59
roughnut sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3757 | @khaduch |http://www.freecodecamp.org/khaduch
啊吖嗄
@LinHuijuan
Feb 25 2018 06:05
https://codepen.io/freeCodeCamp/pen/NNvBQW
How does the white border of this picture come true?
啊吖嗄
@LinHuijuan
Feb 25 2018 06:12
The source code does not add white box to the picture?
Siddhartha Chatterjee
@sidinsomniac
Feb 25 2018 06:33

I am using "dragover" for an eventListener. The program is working great, but the UI sucks since whenever I am dragging an element, it's functioning the way it should, but the cursor changes to a "not-allowed" cursor. I want to add a custom cursor in it's place.

Have searched frantically everywhere, all I could come up with is using the following:

  1. event.preventDefault();
  2. event.dataTransfer.effectAllowed= 'copyMove';
  3. event.dataTransfer.dropEffect= 'move';
  4. return false;

And still it won't work. Keeps on showing either the "not-allowed" cursor, or the "default" cursor while dragging.

And solutions? Will be extremely grateful. At my wit's end here.

Fabien SHAN
@X140hu4
Feb 25 2018 06:38
@LinHuijuan Its because its from bootstrap
@X140hu4 If you go to Settings>CSS, there is a link to use bootstrap 3.3.5. In the HTML the image has a class of thumbnail. If you go the bootstrap link you can see the bootstrap style.
You can see this code:
.thumbnail>img{display:block;max-width:100%;height:auto}
...
.thumbnail{display:block;padding:4px;margin-bottom:20px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:border .2s ease-in-out;-o-transition:border .2s ease-in-out;transition:border .2s ease-in-out}
...
.thumbnail>img{margin-right:auto;margin-left:auto}
Fabien SHAN
@X140hu4
Feb 25 2018 06:43
The second one is the one that give that styles the element wrapping the image.
@sidinsomniac You can use an eventlistener on mouseup/mousedown. https://stackoverflow.com/questions/30052111/how-to-change-the-cursor-icon-when-dragging-in-html5
Siddhartha Chatterjee
@sidinsomniac
Feb 25 2018 06:52
@X140hu4 Thank you. :)
I tried doing that, but isn't working :(
CamperBot
@camperbot
Feb 25 2018 06:52
sidinsomniac sends brownie points to @x140hu4 :sparkles: :thumbsup: :sparkles:
:cookie: 329 | @x140hu4 |http://www.freecodecamp.org/x140hu4
Fabien SHAN
@X140hu4
Feb 25 2018 06:53
@sidinsomniac Maybe an issue with your scopes?
Kelvin Man
@kelvinman
Feb 25 2018 07:16
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
            $("div").append(a[0].content + "<p>— " + a[0].title + "</p>")
        });
    });
});
</script>
</head>
<body>

<button>Get JSON data</button>

<div></div>

</body>
</html>
I am working on random quote machine but I tried different ways to get the JSON data to show but it still won't show. I already tested the button click and make sure it works.
啊吖嗄
@LinHuijuan
Feb 25 2018 07:40
@X140hu4 ok,thank you so much.
CamperBot
@camperbot
Feb 25 2018 07:40
:cookie: 330 | @x140hu4 |http://www.freecodecamp.org/x140hu4
linhuijuan sends brownie points to @x140hu4 :sparkles: :thumbsup: :sparkles:
Fabien SHAN
@X140hu4
Feb 25 2018 07:46
@kelvinman Have you tried with https in the link?
啊吖嗄
@LinHuijuan
Feb 25 2018 07:54
@X140hu4 i can't understand what the meaning of this,<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">, In that example just now.
can you tell me?
Max
@maxiwer
Feb 25 2018 08:02
Hello coders.
Could you tell me whether I completed "Build a Personal Portfolio Webpage" challenge or not?
Here's my work:
https://codepen.io/maxiwer/full/Moavoa/
br3ntor
@br3ntor
Feb 25 2018 08:09
@maxiwer You haven't fulfilled all the user stories.
Max
@maxiwer
Feb 25 2018 08:11
@br3ntor For example?
br3ntor
@br3ntor
Feb 25 2018 08:12
@maxiwer You've completed 2 out of 4 of the listed user stories from the instructions on the project page https://www.freecodecamp.org/challenges/build-a-personal-portfolio-webpage
Fabien SHAN
@X140hu4
Feb 25 2018 08:20
@LinHuijuan Read about the grid system and review the bootstrap lessons in fCC. https://getbootstrap.com/docs/3.3/css/#grid
@LinHuijuan They are defining how much space the div should take depending of the screen size
啊吖嗄
@LinHuijuan
Feb 25 2018 08:31
@X140hu4 ok,i'll read it!thank you again!
@X140hu4 thank you
CamperBot
@camperbot
Feb 25 2018 08:32
linhuijuan sends brownie points to @x140hu4 :sparkles: :thumbsup: :sparkles:
api offline
Nam V. Do
@fantasy2943
Feb 25 2018 09:02
i need help
Joshua Swift
@joshuaswift
Feb 25 2018 09:31
Hey guys, I'm really struggling to center my bootstrap buttons, along with making them block-level when user is viewing on mobile. Any advice? This is what I have so far
import React, { Component } from "react";
import * as timerStates from "../../timerStates";

class TimerButton extends Component {
  constructor() {
    super();

    this.getButton = this.getButton.bind(this);
  }

  getButton() {
    if (this.props.timerState === timerStates.NOT_SET)
      return (
        //TO-DO change buttons to block level components
        <div className="text-center">
          <div className=" row">
            <div className="col-md-4 col-lg-2">
              <button
                className="btn btn-success btn-block"
                onClick={this.props.startShortBreak}
              >

                Short Break
            </button>
            </div>
          </div>
          <div className="row">
            <div className="col-md-4 col-lg-2">
              <button className="btn btn-success btn-block" onClick={this.props.startTimer}>
                Start
            </button>
            </div>
          </div>
          <div className="row">
            <div className="col-md-4 col-lg-2">

              <button
                className="btn btn-success btn-block"
                onClick={this.props.startLongBreak}
              >
                Long Break
            </button>
            </div>
          </div>
        </div>
      );




    if (this.props.timerState === timerStates.RUNNING)
      return (
        <button
          className="btn btn-lg btn-stop center-block"
          onClick={this.props.stopTimer}
        >
          Stop
        </button>
      );

    if (this.props.timerState === timerStates.COMPLETE)
      return (
        <button
          className="btn btn-lg btn-reset center-block"
          onClick={this.props.stopTimer}
        >
          Reset
        </button>
      );
  }

  render() {
    return <div className="row">{this.getButton()}</div>;
  }
}
export default TimerButton;
Fabien SHAN
@X140hu4
Feb 25 2018 09:35
@joshuaswift Your col-lg is too small
In this case, the wider the screen, the wider the element should be right?
On lg screens you can set it to 5 or 6 for example. col-lg-6
Joshua Swift
@joshuaswift
Feb 25 2018 09:36
@X140hu4 ah silly me. Yeah you're right.
Fabien SHAN
@X140hu4
Feb 25 2018 09:38
@joshuaswift Which BS are you using?
Joshua Swift
@joshuaswift
Feb 25 2018 09:40
@X140hu4 react-bootstrap which uses bootstrap v3
@X140hu4 I just realised I misread your original reply, I actually need the button to be wider when viewing on mobile
Joshua Swift
@joshuaswift
Feb 25 2018 09:48
@X140hu4 I basically need the buttons to be block level when mobile and smaller, centered buttons when viewing on desktop
Fabien SHAN
@X140hu4
Feb 25 2018 09:52
You want them on three rows on smaller devices and one line on larger one?
Joshua Swift
@joshuaswift
Feb 25 2018 09:57

Take a look at the link below, I've managed to get them looking how I want but just struggling to center them now

https://sleepy-meadow-77466.herokuapp.com/

Its most likely my fundamental misunderstanding of how bootstrap columns work haha
Nam V. Do
@fantasy2943
Feb 25 2018 10:07
hey guys,Please look at my Pen,Why do not every part of my web is connected to each other, leaving a blank space? https://codepen.io/fantasy2943/pen/jZpKbE
Fabien SHAN
@X140hu4
Feb 25 2018 10:14
@fantasy2943 Do you know how to use the developer tool of your browser?
For some reason your h elements have margin top and bottom
Donnie
@Donnie-D
Feb 25 2018 12:08
how does one include jQuery in repl.it ? lol
Sweet Coding :)
@SweetCodingInc
Feb 25 2018 12:09
@Donnie-D const jquery = require('jquery');
or const $ = require('jquery');
Donnie
@Donnie-D
Feb 25 2018 12:10
I wrote the following but it throws error
let jquery = require('jquery');

var foo = { foo: 'Me', too: 'you' };
var $foo = $(foo);
console.log($foo);
changed let with const just hoping that'd work but same result
Sweet Coding :)
@SweetCodingInc
Feb 25 2018 12:11
@Donnie-D var $foo = $(foo); should be var $foo = jquery(foo);
because the require('jquery') is stored in const jquery
Donnie
@Donnie-D
Feb 25 2018 12:12
@SweetCodingInc wow that worked
Sweet Coding :)
@SweetCodingInc
Feb 25 2018 12:12
why do you need jquery for this though?
Donnie
@Donnie-D
Feb 25 2018 12:12
but why not $ and use jquery instead?
Sweet Coding :)
@SweetCodingInc
Feb 25 2018 12:13
@Donnie-D If you change let jquery = require('jquery'); to let $ = require('jquery'); it will work with $
It doesn't work on repl.it becuase they've restricted access to the window object.
Donnie
@Donnie-D
Feb 25 2018 12:14
long story. just learning more jquery matey. Thought I knew it reasonably when i came across a snippet yesterday while trying to get my head round CORS and found a whole new dimension of it (*sigh...)
Sweet Coding :)
@SweetCodingInc
Feb 25 2018 12:15
You're better off using codepen or https://repl.it/languages/web_project section of repl if you wanna practice jquery
jQuery is primarily for DOM manipulation and you can't do that in pure javascript repl
Stephen James
@sjames1958gm
Feb 25 2018 12:23
@Donnie-D I use jsbin when I am simply experimenting
Donnie
@Donnie-D
Feb 25 2018 12:23
on https://repl.it/languages/web_project there is a small per-written HTML . how am i to make a start ?
Sweet Coding :)
@SweetCodingInc
Feb 25 2018 12:24
@Donnie-D On top of the editor, you will see 3 tabs, 1 for html, 1 for js and 1 for css
out your code in appropriate tabs
Donnie
@Donnie-D
Feb 25 2018 12:25
got it
thanks @sjames1958gm @SweetCodingInc . (how would i live a day without this forum :smile: )
CamperBot
@camperbot
Feb 25 2018 12:27
donnie-d sends brownie points to @sjames1958gm and @sweetcodinginc :sparkles: :thumbsup: :sparkles:
:cookie: 310 | @sweetcodinginc |http://www.freecodecamp.org/sweetcodinginc
:star2: 9027 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Sweet Coding :)
@SweetCodingInc
Feb 25 2018 12:28
@Donnie-D :+1:
Stephen James
@sjames1958gm
Feb 25 2018 12:35
@Donnie-D :checkered_flag:
Singh Harpal
@harry9656
Feb 25 2018 12:39
need help with Smallest Common Multilple challenge
function smallestCommons(arr) {
  // Calculates the gcd with the euclid's algorithm
  function gcd(a,b){
    if(a == b) return a;
    else if(a>b) return gcd( a - b, b);
    else return gcd(a, b - a);
  }
  // Calculate the lcm by
  function lcm(a,b){
    return (a/gcd(a,b))*b;
  }

  // Sort the array
  arr = arr.sort(function(a,b){
    return a-b;
  });

  // finalLcm accumulator
  var finalLcm = arr[0];
  // loop through every value from min to max
  for(var i = arr[0]+1; i<= arr[1];i++){
    finalLcm = lcm(finalLcm,i);
  }
  return finalLcm;
}
it overflows my stack call.
Singh Harpal
@harry9656
Feb 25 2018 12:45
What is good measure to know when my code will overflow?
Stephen James
@sjames1958gm
Feb 25 2018 12:45
@harry9656 Have you tried testing your gcd algorithm by itself
Singh Harpal
@harry9656
Feb 25 2018 12:45
@sjames1958gm I know it is my gcd algorithm
Stephen James
@sjames1958gm
Feb 25 2018 12:46
@harry9656 Generally it means your recursion is not stopping correctly
Stephen James
@sjames1958gm
Feb 25 2018 12:51
@harry9656 Do you know which input is causing the problem?
Singh Harpal
@harry9656
Feb 25 2018 12:51
the [13,23] range
the last one
i know the numbers get so big.
if use an iterative algorithm instead of the recursion it solves the problem.
I wanted to know if there is a rule of thumb when to use recursion vs when to use an iteration? Sometimes i find recursion more expressive then iteration, and that is why i was asking how safe it is to use recursion.
Stephen James
@sjames1958gm
Feb 25 2018 13:08
@harry9656 If the inputs are going to be unbounded, then recursion can be problematic. If you know that the environment implements tail-call optimization then you can use recursion as desired.
Singh Harpal
@harry9656
Feb 25 2018 13:13
@sjames1958gm thanks, the term i was looking for was unbounded.
CamperBot
@camperbot
Feb 25 2018 13:13
harry9656 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9028 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Singh Harpal
@harry9656
Feb 25 2018 13:13
:smile:
coderNewby
@coderNewby
Feb 25 2018 13:15
@DarrenfJ thanks for help in PM yesterday. helped great.
CamperBot
@camperbot
Feb 25 2018 13:15
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2404 | @darrenfj |http://www.freecodecamp.org/darrenfj
Liam Docherty
@ldocherty1
Feb 25 2018 13:43

Hi,

How can I make my background image header.jpg cover the whole of the first section instead of half?

Github website download link

<!-- Masthead -->
    <header class="masthead text-white text-center">
        <div class="container">
            <div class="row">
                <div class="col-xl-9 mx-auto">
                    <h1 class="brand-heading type-it bounceInDown animated"></h1>
                    <p class="intro-text bounceInDown animated type-it2">I am a Front End developer based in the UK. If you are a business seeking a web presence or an employer looking to hire, you can get in touch with me here.</p>
                    <a class="btn btn-primary btn-xl rounded js-scroll-trigger bounceInDown animated" href="#services">Find Out More <i class="fa fa-chevron-down" aria-hidden="true"></i></a> </div>
            </div>
        </div>
    </header>


header.masthead {
    position: relative;
    background-color: #343a40;
    background: url(../images/header.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    padding-top: 8rem;
    padding-bottom: 8rem;
}
Stephen James
@sjames1958gm
Feb 25 2018 13:50
@ldocherty1 cover should get it to cover all of the header element.
What are you meaning by first section?
@harry9656 :+1:
Mukesh Kumar Angrish
@MukeshAngrish
Feb 25 2018 13:55
Hey guys, can anyone help me with Recipe Box project. I'm getting no output, but there is no error in the console
Stephen James
@sjames1958gm
Feb 25 2018 13:59
@MukeshAngrish Looks to be like your App component renders the title and the add button (which I see on the screen), but no recipes
Mukesh Kumar Angrish
@MukeshAngrish
Feb 25 2018 14:02
@sjames1958gm I intentionally commented that earlier to complete the recipes code, completely forgot to add it back😅. Thanks bud.
CamperBot
@camperbot
Feb 25 2018 14:02
mukeshangrish sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9029 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Feb 25 2018 14:02
@MukeshAngrish :+1:
Mukesh Kumar Angrish
@MukeshAngrish
Feb 25 2018 14:11
@sjames1958gm Hey, So I included recipes into the render method, but I'm still not getting any output, neither an error. Can you check that again?
Stephen James
@sjames1958gm
Feb 25 2018 14:14
@MukeshAngrish Your map function is not returning anything
@MukeshAngrish where const boxes = map
krckyboy
@krckyboy
Feb 25 2018 14:38
Does anyone have experience with https://shop.killervideostore.com/ ?
Mukesh Kumar Angrish
@MukeshAngrish
Feb 25 2018 14:50
@sjames1958gm anything you can suggest to remedy that? 😁
Stephen James
@sjames1958gm
Feb 25 2018 14:55
@MukeshAngrish return from inside your map function.
const boxes = recipes.map((recipe) => {
        return (<div key = { recipe.name }>
        . . .|
        )}
@MukeshAngrish it will expose more errors for you to debug :)
@sjames1958gm same return missing Ingredients
Mukesh Kumar Angrish
@MukeshAngrish
Feb 25 2018 14:58
@sjames1958gm Actually I did try that earlier, but seeing so many errors I thought it is the wrong syntax.
Stephen James
@sjames1958gm
Feb 25 2018 14:58
@MukeshAngrish No, it is just loading components for the first time where there are errors.
Mukesh Kumar Angrish
@MukeshAngrish
Feb 25 2018 15:03
@sjames1958gm Oh .. okay
Stephen James
@sjames1958gm
Feb 25 2018 15:04
@MukeshAngrish I am always forgetting to return inside of map - so it was easy to spot
Mukesh Kumar Angrish
@MukeshAngrish
Feb 25 2018 15:09
@sjames1958gm So that's your secret of debugging. 😂
Stephen James
@sjames1958gm
Feb 25 2018 15:09
@MukeshAngrish yes make mistakes so many times you know what to look for :)
Mukesh Kumar Angrish
@MukeshAngrish
Feb 25 2018 15:10
@sjames1958gm Yeah, will do that for sure. 😄
Mukesh Kumar Angrish
@MukeshAngrish
Feb 25 2018 15:17
@sjames1958gm I think I jinxed it. The output came for a second and I went to edit the css to make it look good.
Now it isn't interpreting the javascript in the editor
bocolo1
@bocolo1
Feb 25 2018 15:48
How do you scroll to your last message or to the last reply to you?
Stephen James
@sjames1958gm
Feb 25 2018 15:55
@MukeshAngrish Look for red circle in js window means errro
@MukeshAngrish it is showing an error but I don't see one
Onome Sotu
@onomesotu
Feb 25 2018 16:24
if I have an array say var arr = [[1],[2]], is there a way to use join() but return number types instead of a string?
var arr = [[1],[2]];
arr.join(); // returns string '1,2'
Sweet Coding :)
@SweetCodingInc
Feb 25 2018 16:26
@onomesotu what do you mean number types instead of a string ?
what do you want as output?
Onome Sotu
@onomesotu
Feb 25 2018 16:27
I can map the array like so:
Sweet Coding :)
@SweetCodingInc
Feb 25 2018 16:29
Didn't understand your question
Onome Sotu
@onomesotu
Feb 25 2018 16:29
var arr = [[1],[2]];
arr.map(a => a.join());
it will return ['1', '2'] as strings
Sweet Coding :)
@SweetCodingInc
Feb 25 2018 16:30
Ah!
Onome Sotu
@onomesotu
Feb 25 2018 16:30
i want to return number types
Sweet Coding :)
@SweetCodingInc
Feb 25 2018 16:30
join joins all the elements in the array and returns a string
Onome Sotu
@onomesotu
Feb 25 2018 16:31
but it seems joinonly returns a string
Sweet Coding :)
@SweetCodingInc
Feb 25 2018 16:31
perhaps what you're looking for is the .concat method
Yes.. join returns a string
Onome Sotu
@onomesotu
Feb 25 2018 16:32
ok, i will think about the logic to use concat
Sweet Coding :)
@SweetCodingInc
Feb 25 2018 16:32
@onomesotu You won't be able to do it using .map though.. You will have to use reduce instead
var arr = [[1],[2]];
var x = arr.reduce((f, c) => f.concat(c), []);

console.log(x); // [ 1, 2 ]
Lusaxweb
@lusaxweb
Feb 25 2018 16:57
Max
@maxiwer
Feb 25 2018 16:59
@br3ntor Thanks. But how could I make portfolio thumbnail images?
https://codepen.io/maxiwer/full/Moavoa/
CamperBot
@camperbot
Feb 25 2018 16:59
maxiwer sends brownie points to @br3ntor :sparkles: :thumbsup: :sparkles:
:cookie: 355 | @br3ntor |http://www.freecodecamp.org/br3ntor
Neil
@NNeil1
Feb 25 2018 17:16
Hey guys, when creating a side navigation, what is the proper way to setup your list? As right now I currently have <li><i><a> and it is positioned fine, however when I add in the list name, example - Home - It keeps knocking my lists out of there position. Maybe I'm doing it wrong?
Screenshot when I have added in nav names - https://i.gyazo.com/8b33e931c0a6f0ce73813172cb41e002.png
The problem is my icons are moving even when I lower the font size, I want it so the icons are all in one list (regardless of how the text is positioned) and the text to end in the same place.
Tiago Correia
@tiagocorreiaalmeida
Feb 25 2018 17:30
hey @NNeil1 how are you? is there any codepen for this?
Neil
@NNeil1
Feb 25 2018 17:31
Um, no codepen, Let me try find an alternative. Codepen messes everything up when transferring from offline to online
Tiago Correia
@tiagocorreiaalmeida
Feb 25 2018 17:31
@NNeil1 it shouldnt but sure give it a try
Aditya Sheth
@fantome149_twitter
Feb 25 2018 17:32

<p>The highest number is <span id="demo"></span>.</p>

<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMax(points);

function myArrayMax(arr) {
    var len = arr.length
    var max = -Infinity;
    while (len--) {
      if (arr[len] > max) {
        max = arr[len];
      }
    }
    return max;
}
</script>

</body>
This function loops through an array comparing each value with the highest value found
Aditya Sheth
@fantome149_twitter
Feb 25 2018 17:33
can anyone explain me why are we decreasing value of len
Mukesh Kumar Angrish
@MukeshAngrish
Feb 25 2018 17:33
@sjames1958gm Yeah that's the problem, no error is there. I think codepen is somehow broke. It isn't interpreting anything after line 78. Don't know what to do😞
Aditya Sheth
@fantome149_twitter
Feb 25 2018 17:33
and also why max=-Infinity
someone kindly explain
Tiago Correia
@tiagocorreiaalmeida
Feb 25 2018 17:35
@NNeil1 not sure if this is what you were asking but add text-align left to the li
@NNeil1 sorry your issue is the icons getting lowered by changing a font-size?that's how they behave
im confused
Neil
@NNeil1
Feb 25 2018 17:38
@tiagocorreiaalmeida The main problem is when I'm adding in text with higher font, its moving the icons. I want the icons on the left (So in a straight line, they all could 100% inline), and then the writing to all finish at a certain point.
Tiago Correia
@tiagocorreiaalmeida
Feb 25 2018 17:39
text align left?
Neil
@NNeil1
Feb 25 2018 17:39
Maybe I'm now explaining it right.
Text-align left on the icons
now when adding in nav names
I want them to all start at the same point
Tiago Correia
@tiagocorreiaalmeida
Feb 25 2018 17:39

ul>li {
    padding-left: 20px;
  text-align:left;
}
I mean here
Neil
@NNeil1
Feb 25 2018 17:39
yeah I done that just before @tiagocorreiaalmeida
Tiago Correia
@tiagocorreiaalmeida
Feb 25 2018 17:40
you mean the text start all at the same point?
Neil
@NNeil1
Feb 25 2018 17:40
Yeah, I have sorted out the icons with text align, now I need sort out the nav names, but there messing up
Tiago Correia
@tiagocorreiaalmeida
Feb 25 2018 17:40
define maybe a max-wdith on the icon or just a fixed with
width
@NNeil1 also for your side bar I would define a max-width instead of %
if you resizet he window it gets really little
Neil
@NNeil1
Feb 25 2018 17:42
In PX instead?
I'm new to this
Tiago Correia
@tiagocorreiaalmeida
Feb 25 2018 17:43
yeah
Neil
@NNeil1
Feb 25 2018 17:43
I'm trying to figure out how to resize container based on screenzsize
Tiago Correia
@tiagocorreiaalmeida
Feb 25 2018 17:43
something like max-width: 400px
Neil
@NNeil1
Feb 25 2018 17:43
so it doesn't overflow outside of the parent
Tiago Correia
@tiagocorreiaalmeida
Feb 25 2018 17:46
try something like max-width:350px;
the issue with the text going out is another proreprty you can use but I dont think you wanna hide content?try to make it readable in every size
Neil
@NNeil1
Feb 25 2018 18:13
I am going to sort out max width and all that when I make it responsive to screensize. Right now i'm just trying to position everything so it all works and looks good, then I am going to make different menu for Mobile/Tablet @tiagocorreiaalmeida Thank you for your help though :D
CamperBot
@camperbot
Feb 25 2018 18:13
nneil1 sends brownie points to @tiagocorreiaalmeida :sparkles: :thumbsup: :sparkles:
:cookie: 504 | @tiagocorreiaalmeida |http://www.freecodecamp.org/tiagocorreiaalmeida
Neil
@NNeil1
Feb 25 2018 18:23
@tiagocorreiaalmeida This is what I mean: https://i.gyazo.com/308f2f22dd09b12621d4e0e1fbdbdc17.png
You see that my text starts at different positions because of the icons
Ghost
@ghost~5a3ac208d73408ce4f843d6a
Feb 25 2018 18:50
Hey is anyone here a freelance web dev?
André
@AndrePTLX_twitter
Feb 25 2018 19:32
Hiiii
AbrisM
@AbrisM
Feb 25 2018 19:38
Hi
Edy1988
@Edy1988
Feb 25 2018 19:48
hi guys! In the portfolio project, social media links ... do they have to be buttons? why not links? is it ok to make it as a link?
thanks x
Eric Hasegawa
@EricHasegawa
Feb 25 2018 19:48
Hello, I am working on the tic tac toe project, and my code keeps throwing an error 'Uncaught TypeError: Cannot read property 'score' of undefined' I have no idea why this is happening
Uncaught TypeError: Cannot read property 'score' of undefined
My code is there
Eric Weiss
@eweiss17
Feb 25 2018 19:51
@Edy1988 can be whatever you want. just make sure you follow the milestones for the project
Stephen James
@sjames1958gm
Feb 25 2018 19:57
@EricHasegawa There must be a situation where minimax returns undefined
@EricHasegawa looks like bestMove is never set in some situation
Eric Hasegawa
@EricHasegawa
Feb 25 2018 19:59
@sjames1958gm Okay, I'll take a look at that
I'm following this code tutorial https://www.youtube.com/watch?v=P2TcQ3h0ipQ&t=2724s
I can't tell what is different in my code
Stephen James
@sjames1958gm
Feb 25 2018 20:02
@EricHasegawa are you missing the else for when the player is not aiPlayer?
Eric Hasegawa
@EricHasegawa
Feb 25 2018 20:04
I have that on line 110, unless you're referring to a different instance
Eric Hasegawa
@EricHasegawa
Feb 25 2018 20:09
Hold on, I may have figured it out
Abdullah-Al-Zubair
@a2-zubair
Feb 25 2018 20:18
Hello guys, I'm working on "Twitch.tv" project, it's almost done. But i'm stuck one problem, when i click "All", "Online" or "Offline" button it's give me wrong results. I need your help to understand where i'm doing wrong. Here is my project: Twitch.tv
alpox
@alpox
Feb 25 2018 20:22
@a2-zubair
image.png
You have online AND offline classes on your divs.
This is due to: $(".ch-box").addClass("offline"); if you do this, you select ALL divs which exist with ch-box as class and add that class to it. No matter if it already has a class named online
Same for $(".ch-box").addClass("online");
Neil
@NNeil1
Feb 25 2018 20:26
@tiagocorreiaalmeida the issue I was having earlier was the FA icons where different sizes, changed them all to one icon and it fixed the issue
AbrisM
@AbrisM
Feb 25 2018 20:28
Hi does anyone know how to subnet a network? :)
Eric Hasegawa
@EricHasegawa
Feb 25 2018 20:36
@sjames1958gm I figured it out, thanks!
CamperBot
@camperbot
Feb 25 2018 20:36
erichasegawa sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9030 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Kelvin Man
@kelvinman
Feb 25 2018 20:43
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
            $("div").append(a[0].content + "<p>— " + a[0].title + "</p>")
        });
    });
});
</script>
</head>
<body>

<button>Get JSON data</button>

<div></div>

</body>
</html>
sorry to post this again but still couldn’t figure it out. I tried @X140hu4 suggestions to add HTTPS but still won't work.
alpox
@alpox
Feb 25 2018 20:45
@kelvinman Add a ? at the end of the url
callback=?
Abdullah-Al-Zubair
@a2-zubair
Feb 25 2018 20:46
@alpox i don't understand how to fix this problem, can you help me?
alpox
@alpox
Feb 25 2018 20:46
But if you're working with codepen, also use https :)
@kelvinman
@a2-zubair Best would be to not use .addClass but directly add the class to the html when you .append
Kelvin Man
@kelvinman
Feb 25 2018 20:48
@alpox i added https and callback=? still won’t work
alpox
@alpox
Feb 25 2018 20:48
@kelvinman What error does the console show?
And whats your code now?
Kelvin Man
@kelvinman
Feb 25 2018 20:48
i am actually working localy would that be the cause
?
alpox
@alpox
Feb 25 2018 20:49
Should not
Kelvin Man
@kelvinman
Feb 25 2018 20:50
Refused to execute script from 'https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=jQuery331004140843013798645_1519591774150&_=1519591774151' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled.
alpox
@alpox
Feb 25 2018 20:55
@kelvinman Hmm its weird that jquery raises that. You can maybe try to use .ajax directly with dataType: "jsonp" and remove the callback parameter
Kelvin Man
@kelvinman
Feb 25 2018 21:07
@alpox that works! thank you!
CamperBot
@camperbot
Feb 25 2018 21:07
kelvinman sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1556 | @alpox |http://www.freecodecamp.org/alpox
alpox
@alpox
Feb 25 2018 21:07
@kelvinman :thumbsup:
Neil
@NNeil1
Feb 25 2018 21:20
Can someone explain how I can setup a background image based on a div? I am trying to set a background image without using the body selector. I tried applying a BG image to home-page-container, but couldn't get that working. https://codepen.io/therighttwo/pen/XZxmgE
Daniel Narilton
@spaganger
Feb 25 2018 21:41
how can i make an absolutely positioned div grow downwards like a relative div?
ryanmaddox
@ryanmaddox
Feb 25 2018 21:44
@NNeil1 'code'

HTML code:-

<header id="masthead" class="site-header" role="banner">
<div class="header-shadow"></div>
<hgroup></hgroup>
<nav role="navigation" class="site-navigation main-navigation">

  </nav><!-- .site-navigation .main-navigation -->

</header><!-- #masthead .site-header -->
CSS:-

.header-shadow{
background-image: url('../images/header-shade.jpg');
}
Additional information:

This is an image with shadow and i am using it at the top of the website, so it mustn't have a particular width.

Neil
@NNeil1
Feb 25 2018 21:46

@ryanmaddox I have tried setting a width on the background image, but it just doesn't seem to work.

Edit - Added another Class inside the div and set the background to that. It worked. Now, it is putting all my content below the navigation. Instead of to the side of it.

thanks @ryanmaddox
CamperBot
@camperbot
Feb 25 2018 21:49
nneil1 sends brownie points to @ryanmaddox :sparkles: :thumbsup: :sparkles:
:cookie: 268 | @ryanmaddox |http://www.freecodecamp.org/ryanmaddox
bocolo1
@bocolo1
Feb 25 2018 21:51
If you have a webpage with no html elements, and just the string abc at the top.. Is that considered an html text node?
ryanmaddox
@ryanmaddox
Feb 25 2018 21:56
ok looks good sorry for the misunderstanding
Stephen James
@sjames1958gm
Feb 25 2018 22:01
@EricHasegawa :+1:
jjzep
@jjzep
Feb 25 2018 22:06
let arrayTest = [1, 2, 3]
    arrayTest.forEach(index => index++)
    arrayTest
Can someone tell me why this doesn’t iterate the array values?
alpox
@alpox
Feb 25 2018 22:07
@jjzep What you do there is only increase the value and throw it away. index is just a copy of the original value in the array and it cannot be changed in-place.
It does iterate the array values though. It just does not increase them :)
jjzep
@jjzep
Feb 25 2018 22:08
I see
Aditya
@ezioda004
Feb 25 2018 22:10
Can anyone help me out with this beta challenge?
I have this const {tomorrow: {max : maxOfTomorrow}} = LOCAL_FORECAST;
I'm getting the correct value but it doesnt passes "nested destructuring " test.
Tiago Correia
@tiagocorreiaalmeida
Feb 25 2018 22:11
@NNeil1 but dont you want to use different icons on different places?sorry went out for a while
Neil
@NNeil1
Feb 25 2018 22:12
@tiagocorreiaalmeida I do yes, but they where different sizes that was the issue. I've just replaced them with 4 home icons for now, while I design everything else. But now when I add new elements, it positions them at the bottom of the page - instead at the side of navigation. https://codepen.io/therighttwo/pen/XZxmgE
alpox
@alpox
Feb 25 2018 22:13
@ezioda004 You should be using the function parameter forecast, not the constant
Aditya
@ezioda004
Feb 25 2018 22:14
@alpox Oooh, totally missed that, thanks!
CamperBot
@camperbot
Feb 25 2018 22:14
ezioda004 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1557 | @alpox |http://www.freecodecamp.org/alpox
alpox
@alpox
Feb 25 2018 22:18
@ezioda004 np :)
Jefferson
@jeffersonnnn
Feb 25 2018 22:19

can anyone help with this piece of code? i need to select a value at random from this array, but i can't seem to get the syntax right.

``` handlePick() {
this.setState(() => {
return {
this.state.options[Math.floor(Math.random()*options.length)]
};
});
}

handlePick() {
this.setState(() => {
return {
this.state.options[Math.floor(Math.random()*options.length)]
};
});
}

```

Tiago Correia
@tiagocorreiaalmeida
Feb 25 2018 22:24
@NNeil1 you gonna need to use somethng called position fixed
Neil
@NNeil1
Feb 25 2018 22:24
so I'm going to have to use that on every element?
since all elements go to the bottom
Tiago Correia
@tiagocorreiaalmeida
Feb 25 2018 22:24
on only on the side nav, isnt the idea hidding / showing it?
Neil
@NNeil1
Feb 25 2018 22:24
and i imagine using position fixed a lot is going to be a pain
the idea is to hide/show the nav and produce a hamburger icon yes, when I get round to it
Tiago Correia
@tiagocorreiaalmeida
Feb 25 2018 22:25
you only need to give it on the navbar
it will stay on top of the page
when open
so position fixed
just to have an idea of what exists
Neil
@NNeil1
Feb 25 2018 22:28
Okay, I'll look at that now. thanks @tiagocorreiaalmeida
CamperBot
@camperbot
Feb 25 2018 22:28
nneil1 sends brownie points to @tiagocorreiaalmeida :sparkles: :thumbsup: :sparkles:
:cookie: 505 | @tiagocorreiaalmeida |http://www.freecodecamp.org/tiagocorreiaalmeida
Neil
@NNeil1
Feb 25 2018 22:30
Got it working now, thanks again!
Jefferson
@jeffersonnnn
Feb 25 2018 22:43

@jeffersonnnn
hi guys, i need help getting a proper read on this syntax. I am trying to select a random element in an array. Here is my code

 handlePick() {
    this.setState(() => {
      return {
        this.state.options[Math.floor(Math.random()*options.length)]
      }; 
    });
  }
    this.state = {
       options: ['Thing one', 'Thing two', 'Thing three']
    };
  }

right up above here is the array
any help, please?

alpox
@alpox
Feb 25 2018 22:46
@jeffersonnnn you probably need this.state.options.length instead of options.length
@jeffersonnnn Then also, you return an object, but you only put there a value. A key is missing
Lallo Vigil
@lalov1
Feb 25 2018 23:08
I'm pretty close to having the markdown previewer working, but it seems delayed by 1 character. Can someone tell me what I'm doing wrong? https://codepen.io/lalov1/pen/67c11a2e4030d395f6fc6ceba2b044a9?editors=0110
CamperBot
@camperbot
Feb 25 2018 23:14
:trollface: troll problems? notify admins here
Christopher McCormack
@cmccormack
Feb 25 2018 23:14
@lalov1 you don't want to manually put your markup in the DOM
@lalov1 use your setState only to set your markup values to your state, you may need to use https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
@lalov1 setState is asynchronous so you're setting your innerHTML manually, then react is overriding value after setState completes
Sergey Likhashorskiy
@lihash
Feb 25 2018 23:38
hi guys, sorry for off topic, but may you help me? essence of the question: Where can I read the rules in which the Longest Streak & Current Streak is described. I missed one day but the stack was preserved. Thanks
Sergey Likhashorskiy
@lihash
Feb 25 2018 23:40
@cmccormack thank you!
CamperBot
@camperbot
Feb 25 2018 23:40
lihash sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1334 | @cmccormack |http://www.freecodecamp.org/cmccormack