Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Aug 17 09:32
    User @bjorno43 unbanned @linkin-park
  • Jun 20 21:19
    @bjorno43 banned @shenerd140
  • Apr 25 17:13
    @mstellaluna banned @cmal
  • Jan 08 22:05
    @mstellaluna banned @dertiuss323
  • Nov 07 2018 04:42
    User @texas2010 unbanned @ows-ali
  • Nov 02 2018 16:25
    @texas2010 banned @ows-ali
  • Oct 12 2018 05:50
    @bjorno43 banned @NACH74
  • Oct 05 2018 23:02
    @mstellaluna banned @JomoPipi
  • Sep 16 2018 12:21
    @bjorno43 banned @yash-kedia
  • Sep 16 2018 12:16
    @bjorno43 banned @vnikifirov
  • Sep 05 2018 08:12
    User @bjorno43 unbanned @androuino
  • Sep 05 2018 07:38
    @bjorno43 banned @androuino
  • Aug 23 2018 16:57
    User @bjorno43 unbanned @rahuldkjain
  • Aug 23 2018 16:23
    @bjorno43 banned @rahuldkjain
  • Jul 29 2018 14:13
    User @bjorno43 unbanned @jkyereh
  • Jul 29 2018 01:00
    @bjorno43 banned @jkyereh
  • Jul 10 2018 22:09
    @bjorno43 banned @manafn
  • Jul 06 2018 15:20
    @texas2010 banned @imlegend19
  • Jul 03 2018 12:28
    @bjorno43 banned @vbvmatta
  • Jun 29 2018 13:54
    @bjorno43 banned @OGTechnoBoy

```$(document).ready(function() {
$('a[href*=#]').bind('click', function(e) {
e.preventDefault(); // prevent hard jump, the default behavior

            var target = $(this).attr("href"); // Set the target as variable

            // perform animated scrolling by getting top-position of target-element and set it as scroll target
            $('html, body').stop().animate({
                    scrollTop: $(target).offset().top
            }, 600, function() {
                    location.hash = target; //attach the hash (#jumptarget) to the pageurl
            });

            return false;
    });

});

$(window).scroll(function() {
var scrollDistance = $(window).scrollTop();

    // Show/hide menu on scroll
    //if (scrollDistance >= 850) {
    //        $('nav').fadeIn("fast");
    //} else {
    //        $('nav').fadeOut("fast");
    //}

    // Assign active class to nav links while scolling
    $('.page-section').each(function(i) {
            if ($(this).position().top <= scrollDistance) {
                    $('.navigation a.active').removeClass('active');
                    $('.navigation a').eq(i).addClass('active');
            }
    });

}).scroll();```

is what I tried before

omg
I hate when code does that
Christopher McCormack
@cmccormack
@jdc20181 ``` go on their own line
Morchid Chellali
@Morched23MJ
class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      submit: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(event) {
    this.setState({
      input: event.target.value
    });
  }
  handleSubmit(event) {
    this.setState({
      submit: event.target.value
    });
    event.preventDefault();
  }
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input type="text" value={this.state.input} onChange={this.handleChange} />
          <button type='submit'>Submit!</button>
        </form>
        <h1>{this.state.submit}</h1>
      </div>
    );
  }
};
Apparently this doesn't solve the challenge. What's wrong with my code? I should handle the submit, and render it in a Header.
Challenge link: https://learn.freecodecamp.org/front-end-libraries/react/create-a-controlled-form
Aditya
@ezioda004
@Morched23MJ Try logging event.target.value in
this.setState({
      submit: event.target.value
    });
ReesesLover123
@ReesesLover123
<html>
<head>
<link title="Project8" rel="stylesheet" href="Project8.css" type="text/css" />
<link title="Project8Alt" rel="stylesheet" href="project8alt" type="text/css"/>
<style>
</style>
</head>
<body>
<div class="author"> Hello
<img src="meirl.gif"/>
</div>
<h1> This is a cat.</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2> I lied, there's not a cat.</h2>

<h3> There's no cake either.</h3>

</body>
</html>

css- div.author {
position:absolute;
right: 350px;
width: 50px;
height: 50px;
}
p {

color:red;
background-color:aqua;
border: 1em solid #FFFF19;
}

The image floats to the right on the normal style, but with the alternate stylesheet it's heavily to the left. What do
AJ Brommy
@AJ-Brommy
href="project8alt"
there is no file extension
newmoon
@newmoon
Good catch!
Also, the <link> tags appear incorrect - do they have a title attribute?
<link rel="stylesheet" type="text/css" href="yourCSSFileName.css">
Nerando Johnson
@Nerajno
@AJ-Brommy .... thanks I got it fixed
AJ Brommy
@AJ-Brommy
@Nerajno cool news :)
jtoloyede
@jtoloyede
Hi guys, I'm new here.
I'm trying to use the mock URL "https://www.freecodecamp.com/email-submit" for form in the project "Product Landing Page" but I'm getting( Refused to display 'https://www.freecodecamp.org/email-submit?' in a frame because it set 'X-Frame-Options' to 'sameorigin'. ) as an error. Can someone please help me out?
Morchid Chellali
@Morched23MJ

const inputStyle = {
  width: 235,
  margin: 5
}

class CheckUserAge extends React.Component {
  constructor(props) {
    super(props);
    // change code below this line
    this.state = {
      input: '',
      userAge: ''
    }
    // change code above this line
    this.submit = this.submit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(e) {
    this.setState({
      input: e.target.value,
      userAge: ''
    });
  }
  submit() {
    this.setState({
      userAge: this.state.input
    });
  }
  render() {
    const buttonOne = <button onClick={this.submit}>Submit</button>;
    const buttonTwo = <button>You May Enter</button>;
    const buttonThree = <button>You Shall Not Pass</button>;
    return (
      <div>
        <h3>Enter Your Age to Continue</h3>
        <input
          style={inputStyle}
          type="number"
          value={this.state.input}
          onChange={this.handleChange} /><br />
        {buttonOne}
        {
          this.state.userAge != '' && this.state.userAge < 18 ? buttonThree : buttonTwo
        }
      </div>
    );
  }
};
Even though I set the condition this.state.userAge != '' within the render method, the buttonTwo/Three is still displayed, when it should not, as the view has just been mounted.
Challenge link: https://learn.freecodecamp.org/front-end-libraries/react/use-a-ternary-expression-for-conditional-rendering
Aditya
@ezioda004
You're rendering buttonOne all the time, whereas it should be rendered initially only, after that based on input it should change to buttonTwo and buttonThree
Hint: Nested ternaries
Morchid Chellali
@Morched23MJ

@ezioda004, I replaced it with this:

{
          (buttonOne && this.state.userAge == '') || (this.state.userAge < 18 ? buttonThree : buttonTwo)
        }

Still not working. || operator is not valid in JSX?

{
          this.state.userAge == '' ? buttonOne : this.state.userAge < 18 ? buttonThree : buttonTwo
        }
Thanks @ezioda004!
Morchid Chellali
@Morched23MJ
Just completed React challenges.
It was a lot of mental energy consumption. :D
AJ Brommy
@AJ-Brommy
Congrats :)
Stephen James
@sjames1958gm
@Morched23MJ :+1:
jsjoe82
@jsjoe82
Hey, folks. I've got this: https://codepen.io/jsjoe82/pen/PywEqr/ It's my codepen for the survey form. In it, I have my radio buttons setup and their labels. I got the radio buttons to go to the left of the labels, but now the buttons are above the words on the left side of the page where everything else so far is good.
<div class="input-holder">
          <div class="left-side">
            <label for="satisfaction" id = "cantgetno">Given your experiences so far, would you reccomend Free Code Camp to a friend? :
          </div>
          <div class="right-side">
            <ul style="list-style: none;">
          <li class="radio"><label>There was an option not to?<input name="radio-buttons" value="DUH"  type="radio" class="userRatings" ></label></li>
            <li class="radio"><label>It couldn't hurt<input name="radio-buttons" value="Sure"  type="radio" class="userRatings" ></label></li>
            <li class="radio"><label>Ehhhhh<input name="radio-buttons" value="Onthefence"  type="radio" class="userRatings" ></label></li>
            </ul>
          </div>
        </div>
Unsure of how to make the words under .left-side be at the top of the radio buttons instead of being at the bottom of them on the left side.
Stephen James
@sjames1958gm
@jsjoe82 The only way I know of to adjust the content like that is with flex box
glitz20
@glitz20
anybody who knows how to implement javascript in html?
Dhaval Vira
@dhavalveera
Yes, i know how to Implement JavaScript to HTML @sabin20
glitz20
@glitz20
So I did this to include js in html
<body>
        <script src="bgcolor.js"></script>
@dhavalveera
and this is my bgcolor.js
$(window).scroll(function() {

  // selectors
  var $window = $(window),
      $body = $('body'),
      $panel = $('.panel');

  // Change 33% earlier than scroll position so colour is there when you arrive.
  var scroll = $window.scrollTop() + ($window.height() / 3);

  $panel.each(function () {
    var $this = $(this);

    // if position is within range of this panel.
    // So position of (position of top of div <= scroll position) && (position of bottom of div > scroll position).
    // Remember we set the scroll to 33% earlier in scroll var.
    if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {

      // Remove all classes on body with color-
      $body.removeClass(function (index, css) {
        return (css.match (/(^|\s)color-\S+/g) || []).join(' ');
      });

      // Add class of currently active div
      $body.addClass('color-' + $(this).data('color'));
    }
  });    

}).scroll();
this is supposed to change the bg color on scroll, but it is not working
but it is working here
Dhaval Vira
@dhavalveera
@sabin20 add JavaScript either in <head></head> either end of the <body> tag like near </body></html>
worldwidewev
@worldwidewev
anyone have a sec to look over some code?
Dhaval Vira
@dhavalveera
on which Code ?
worldwidewev
@worldwidewev
javascript
i'm getting a reference error and cant figure out how to properly define a variable
will probably be a very simple solution, i'm new to all this :)
Dhaval Vira
@dhavalveera
post this question in JavaScript group
worldwidewev
@worldwidewev
i posted in HelpJavaScript as well
Dhaval Vira
@dhavalveera
ok
Mohammed Boudad
@matrixersp
Which version of Bootstrap is used in FCC challenges?
Jesse
@ki4jgt
Anyone familiar with epub.js? I'm using this code and haven't got a clue why I can't click the area and have the page turn.
<!DOCTYPE html>
<html>
    <head>
        <style>
            html, body {padding: 0px;
                        margin: 0px;}
        </style>
    </head>
    <body>
        <div id = "area"></div>
    </body>
    <footer>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/epubjs/dist/epub.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
        <script>
            var book = ePub("pg57939-images.epub");
            var rendition = book.renderTo("area", { method: "default", width: "100%", height: "100%" });
            var displayed = rendition.display();

            function Next() {
                rendition.next();
            }
            function Prev() {
                rendition.prev();
            }

            $(document).click(function(e){
                Next();
            });
        </script>
    </footer>
</html>