These are chat archives for FreeCodeCamp/HelpFrontEnd

2nd
Aug 2018
Slade
@Reaperoot_gitlab
Aug 02 2018 01:12 UTC
@fejkens wouldnt it much easier if you just used a navbar on top that collapsed into the hamburger menu and have your script running on the far right. Here is a link to bootstrap navbar guide.
newmoon
@newmoon
Aug 02 2018 03:09 UTC
@Reaperoot_gitlab I believe the Free Code Camp curriculum wants everyone to build an app functionally identical to this one: https://codepen.io/freeCodeCamp/full/NdrKKL
Jack Lyons
@JackEdwardLyons
Aug 02 2018 03:41 UTC
hey guys i have a question about reducing some data, could anyone help?\
Stephen
@stephepush
Aug 02 2018 03:54 UTC

https://codepen.io/stephepush/pen/WKMqwG

I’m having issues with something I’m trying to put together in html and css. An element that I coded way after the header element is somehow above the header element!

Jack Lyons
@JackEdwardLyons
Aug 02 2018 04:03 UTC
Can you please be more specific @stephepush
alpox
@alpox
Aug 02 2018 04:04 UTC
@stephepush thats because all your other elements are taken out of page-flow with position absolute. The section which ended up above is the first element in pageflow and therefore aligns to top
Stephen
@stephepush
Aug 02 2018 04:06 UTC
@JackEdwardLyons The red element with the text “hello” should be below everything else, but instead its on top of everything else. Does that help?
Jack Lyons
@JackEdwardLyons
Aug 02 2018 04:08 UTC
ok, so the red text should be fixed at the bottom (ie) a footer
?
Stephen
@stephepush
Aug 02 2018 04:09 UTC
Not a footer, but below all the other stuff that its on top of. Haven’t gotten to coding the footer yet
Jack Lyons
@JackEdwardLyons
Aug 02 2018 04:09 UTC
ok
Stephen
@stephepush
Aug 02 2018 04:09 UTC
@alpox and I’m trying to figure out what you’re saying and how to solve what you’re saying
Jack Lyons
@JackEdwardLyons
Aug 02 2018 04:11 UTC
it seems you have absolutely positioned your video
try this
@stephepush video { display: block; z-index: -200; width: 100%; overflow: hidden; }
here's your entire css, i tidied it up
$orange: rgb(255, 89, 0);

body {
  background: green;
}

/* navigation styles start here */
header > img {
  height: 2.5rem;
}

header {
  background-color: rgba(0, 0, 0, 0.25);
  z-index: 999;
  text-align: center;
  position: fixed;
  width: 100%;
  display: block;
}

.logo {
  margin: 20px;
}

nav {
  background-color: rgba(0, 0, 0, 0.25);
  position: absolute;
  text-align: left;
  top: 100%;
  left: 0;
  width: 100%;
  transform: scale(1, 0);
  transform-origin: top;
  transition: transform 400ms ease-in-out;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  margin-bottom: 1em;
  margin-left: 1em;
}

nav a {
  color: white;
  text-decoration: none;
  font-size: 1.2rem;
  opacity: 0;
  transition: opacity 150ms ease-in-out;
}

nav a:hover {
  color: $orange;
}

@media screen and (min-width: 600px) {
  .nav-toggle-label {
    display: none;
  }

  header {
    display: grid;
    grid-template-columns: 1fr auto minmax(600px, 3fr);
    grid-gap: 1em;
    display: block;
  }

  .logo {
    grid-column: 1/ span 1;
  }

  nav {
    all: unset;
    grid-column: 2 / 4;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    display: block;
  }

  nav a {
    opacity: 1;
  }

  nav ul {
    display: flex;
  }
}

/*
    Nav toggle/hamburger
*/
.nav-toggle:checked ~ nav {
  transform: scale(1, 1);
}

.nav-toggle:checked ~ nav a {
  opacity: 1;
  transition: opacity 150ms ease-in-out 250ms;
}

.nav-toggle {
  display: none;
}

.nav-toggle-label {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 1em;

  height: 100%;
  display: flex;
  align-items: center;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  width: 2em;
  height: 2px;
  display: block;
  background: white;
  border-radius: 2px;
  position: relative;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after {
  content: "";
  position: absolute;
}

.nav-toggle-label span::before {
  bottom: 7px;
}

.nav-toggle-label span::after {
  top: 7px;
}
/*
    End of Nav toggle/hamburger
*/
video {
  display: block;
  z-index: -200;
  width: 100%;
  overflow: hidden;
}

.cards {
  display: flex;
}

#show-selection {
  width: 100%;
  background-color: red;
  display: block;
}

#splash {
  background-image: url("https://res.cloudinary.com/dmkct6wfu/image/upload/v1533162642/pexels-photo-1277019_xha4yl.jpg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
Stephen
@stephepush
Aug 02 2018 04:15 UTC
Thanks @JackEdwardLyons. The reason why I absoluted the video was because I wanted only a portion to remain at the top. I noticed that when I make the window bigger the video takes up the whol viewport with your new video css...
Jack Lyons
@JackEdwardLyons
Aug 02 2018 04:15 UTC
well you can always give the video a max height?
like 50vh ?
Stephen
@stephepush
Aug 02 2018 04:16 UTC
indeed. its been a while since I built a html and css project. Forgive me for my rustyness, lol
Jack Lyons
@JackEdwardLyons
Aug 02 2018 04:19 UTC
hope it works, good luck
Stephen
@stephepush
Aug 02 2018 04:19 UTC
Yeah, I’ll do further research on my own based on what you’ve given me. I’ve been stuck for the last two days on this. You helped a ton, thank you!
Simon Cordova
@gbsimon87
Aug 02 2018 08:43 UTC
Morning
yozhikvtumane
@yozhikvtumane
Aug 02 2018 11:30 UTC

Hello! I need some help, I can't pass Basic HTML and HTML5: Declare the Doctype of an HTML Document with this code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>Lorem Header</h1>
</body>
</html>

The output says

// running test
The html tags should wrap around one h1 element.
// tests completed
What's wrong?
I have a h1 tag inside html tag isn't it?
Vuk Đuranović
@VukMNE
Aug 02 2018 11:34 UTC
Maybe you need a meta closing tag?
@yozhikvtumane Oh I see now.. there is probably nothing wrong with your code, it is just that fcc testing console can't recognize that you have wrapped html tags around the h1, because you have more code in between..
yozhikvtumane
@yozhikvtumane
Aug 02 2018 11:37 UTC
No meta tag is ok
Vuk Đuranović
@VukMNE
Aug 02 2018 11:42 UTC
try to reset the code, and then just add html tags around the h1
yozhikvtumane
@yozhikvtumane
Aug 02 2018 11:43 UTC
I don't wanna do that
It's gonna be an invalid code
I am gonna post an issue on the forum
phao5814
@phao5814
Aug 02 2018 12:08 UTC
Hey everyone, would appreciate if someone could help me out with this really strange bug I’m getting in my Vue app: https://stackoverflow.com/questions/51653178/vue-warn-error-in-nexttick-notfounderror-failed-to-execute-insertbefore
Mukul Agrawal
@mukul09
Aug 02 2018 13:22 UTC
Hey, Can any one help me here.
how can I download many pdf files from google at once using python script?
yozhikvtumane
@yozhikvtumane
Aug 02 2018 13:27 UTC
From search result?
zootechdrum
@zootechdrum
Aug 02 2018 14:53 UTC
hey quick question about react
can child components have their own state like a parent component does?
yes @zootechdrum
zootechdrum
@zootechdrum
Aug 02 2018 14:57 UTC
@moT01 Thank you! I am trying to click a class on and off and I am having trouble resizing the window of the previewer and editor
I have tried changing the height of the textarea using css but it wont work. The only thing that works is if i change the rows number
k
Slade
@Reaperoot_gitlab
Aug 02 2018 16:12 UTC
@newmoon i did not realize you were working with specific parameters to your assignment. Ill take a look at the assignment.
zootechdrum
@zootechdrum
Aug 02 2018 16:32 UTC
guys I have been trying to resize this window for a while not can someone help me
this is a react question
         <div  id="toolbar">Editor<i onClick={ this.handleClick } className="far fa-edit"></i></div>
        <Editor className= { this.state.condition ? "textarea-normal textarea-bigger" : "textarea-normal" } input = {this.state.input} handleChange={this.handleChange} />
basically when the user clicks the icon i want the editor to resize
@Reaperoot_gitlab
did you mean to put flex-wrap:wrap; in css
Slade
@Reaperoot_gitlab
Aug 02 2018 16:38 UTC
im am trying to make it so at whatever breakpoint i set it to, it will go from nowrap to wrap. in my code ive implemented the bootstrap classes to do the flex-nowrap initially, but i cant get it to convert when i decrease the width of my browser, even though i added the @media to my css.
Tiago Correia
@tiagocorreiaalmeida
Aug 02 2018 16:38 UTC
how does the css looks?
the textarea css
can you paste it here?
Slade
@Reaperoot_gitlab
Aug 02 2018 16:40 UTC
zootechdrum
@zootechdrum
Aug 02 2018 16:48 UTC
without putting to much code here is the css of those specific classes
.textarea-normal{
 textarea:100px;
}
.textarea-bigger{
  textarea:360px;
}
i can apply the height class on the toolbar and it does switch back and fourth
but I can't seem to figure out a way to implement that class on the previewer and the editor
abraham anak agung
@padunk
Aug 02 2018 17:05 UTC
@zootechdrum your can't give a class a className without passing it to your component
and you css is wrong, height: 100px if you want to set the height of textarea
mustimuu
@mustimuu
Aug 02 2018 17:15 UTC
Hello can someone help me
Brad
@bradtaniguchi
Aug 02 2018 17:30 UTC
@mustimuu just post your question and see if someone cal help
mustimuu
@mustimuu
Aug 02 2018 17:42 UTC
<div class="page-content"> 
<?php
$vorespartnere = get_posts( array(
    'showposts'        => -1,
    'post_type'        => 'partnere',
    'orderby'          => 'order',
    'suppress_filters' => false,
    ) );

    $terms = get_terms( array(
        'taxonomy' => 'partnere-kategorier',
        'hide_empty' => false,
    ) ); 
    ?>




        <div class="container">
        <!-- This is the container for the pictures -->
<?php
if ( ! empty( $vorespartnere ) ) {
    foreach ( $vorespartnere as $partnere ){
        $image      = get_field( 'partner_logo', $partnere );
        $text       = get_field( 'partner_beskrivelse', $partnere  );
        $overskrift = get_field( 'partner_overskrift', $partnere  );
?>

<?php 

        if ( ! empty( $image ) && ! is_wp_error() ) {
            ?>
            <div class="col-lg-4">
            <img src="<?php echo $image['url']; ?>" alt=""> </div>  

            <?php
        }

        if ( ! empty( $text ) && ! is_wp_error() ) {
            echo $text;
        }

        if ( ! empty( $overskrift ) && ! is_wp_error() ) {
            echo $overskrift;

        }



    }
}
I want to put the text in a grid like my images
Otherwise it look very bad
Where would i do that?
Ghost
@ghost~59209a78d73408ce4f6102e8
Aug 02 2018 18:17 UTC
Hey, wondering if i can get a critique on my JS calculator? Im curious how my code looks to others. To me it looks very sloppy, but i am at a loss for how to clean up my code to look better. Any advice is appreciated!
https://github.com/willybeans/js_calculator/blob/master/calculator.js
Brad
@bradtaniguchi
Aug 02 2018 18:54 UTC
@willybeans Your indentation looks off, and you can split up some of the common actions into a function, cutting down the overall amount of lines of code by a bit
inovramadani
@inovramadani
Aug 02 2018 19:31 UTC
Guys, why is the commented code using for loop doesn't work while the below one works? Aren't they exactly the same?
I tried several times, when I use the above code in codepen I always get the page hang.
createBoard() {
    var div = [];
    // for (let i = 0; i < 3; i++) {
    //   let children = [];
    //     for (let j = 0; i < 3; j++) {
    //       children.push(this.renderSquare( i * 3 + j));
    //     }
    //   children = <div className="board-row">{children}</div>;
    //   div.push(children);
    // }
    // return div;

    let children1 = [];
    let children2 = [];
    let children3 = [];

    children1.push(this.renderSquare(0));
    children1.push(this.renderSquare(1));
    children1.push(this.renderSquare(2));
    children1 = <div className="board-row">{children1}</div>;
    children2.push(this.renderSquare(3));
    children2.push(this.renderSquare(4));
    children2.push(this.renderSquare(5));
    children2 = <div className="board-row">{children2}</div>;
    children3.push(this.renderSquare(6));
    children3.push(this.renderSquare(7));
    children3.push(this.renderSquare(8));
    children3 = <div className="board-row">{children3}</div>;
    div.push(children1, children2, children3);
    return div;
  }

  render() {  

    return (
      <div>{this.createBoard()}</div>
    );
  }
}
Christopher
@bradley1492
Aug 02 2018 19:33 UTC

Good evening,
in the following codepen I am trying to add a bottom-border to all my .nav-link elements but the border doesn't get displayed. Does anyone know why that is?

https://codepen.io/bradley1492/pen/pZrXQz?editors=1000

Hm funnily only border-left works, but it then also behaves in a funny way

Aditya
@ezioda004
Aug 02 2018 19:35 UTC
@inovramadani for (let j = 0; i < 3; j++), i < 3 will make the loop infinite.
newmoon
@newmoon
Aug 02 2018 19:35 UTC
@inovramadani It's an infinite loop because you should have j < 3 instead of i < 3 in the second loop
for (let j = 0; j < 3; j++) {
  children.push(this.renderSquare( i * 3 + j));
}
@ezioda004 ninja'd
:)
Aditya
@ezioda004
Aug 02 2018 19:36 UTC
:smile:
inovramadani
@inovramadani
Aug 02 2018 19:37 UTC
:cry:
:smile:
oops
didnt recognize that one
newmoon
@newmoon
Aug 02 2018 19:38 UTC
@bradley1492 remove text-decoration: none from your CSS for .nav-link
Christopher
@bradley1492
Aug 02 2018 19:38 UTC
@newmoon oh snap thanks a lot! :)
newmoon
@newmoon
Aug 02 2018 19:41 UTC
Actually, I think I misunderstood. You want a 10px border and you're applying it to an <a> link. Apply that style to the <li> element inside your <a> instead:
.nav-link>li {
  border-bottom: 10px solid black;
}
@bradley1492
Christopher
@bradley1492
Aug 02 2018 19:42 UTC
@newmoon ohhhh yes I see that makes it clear. Hm maybe the inspector would have been a good idea to solve a problem like this for me, I often feel quite lost, when running into such problems...
inovramadani
@inovramadani
Aug 02 2018 19:43 UTC
next question is, how to assign unique key for the buttons created in Square component? Because React will always need a key for items in array.
https://codepen.io/inovramadani/pen/gjzeBO?editors=0010
image.png
Christopher
@bradley1492
Aug 02 2018 19:44 UTC
@newmoon Now it does what I wanted thx
newmoon
@newmoon
Aug 02 2018 19:45 UTC
@bradley1492 Perfect :smile: I usually start with right-click -> inspect when debugging these.
lets me play around with styles and see if there are any conflicts
Christopher
@bradley1492
Aug 02 2018 19:47 UTC
@newmoon Jop I'll start doing that too from now on before asking for help :)
Christopher
@bradley1492
Aug 02 2018 20:15 UTC

Hello I am looking for recources on how to create a navbar that becomes scrollable when the page turns into mobile view.
I would like to create something similar to the effect that can be seen here when toggling down to a smaller screen size with the scrolling menu:

https://codepen.io/freeCodeCamp/full/NdrKKL

Tiago Correia
@tiagocorreiaalmeida
Aug 02 2018 20:57 UTC
I think what you are looing for is overflow-y: auto; @bradley1492
Melanie
@codeherlife
Aug 02 2018 21:52 UTC
I'm looking for a sort of mentor that i can go to and ask questions when I am stuck in understanding Angular- typescript and Java things.... I am currently an intern in software and looking for someone who can help guide me.... Please message me directly if you are interested ... thank you!å
Alex Coder
@jkid314159
Aug 02 2018 22:33 UTC
Hello
zootechdrum
@zootechdrum
Aug 02 2018 23:41 UTC
hello I am trying to expand the height of my textarea but for some reason i can only increase the div height. any suggestions would be appreciated.