These are chat archives for FreeCodeCamp/HelpFrontEnd

7th
Jan 2018
Chase
@hmmChase
Jan 07 2018 00:14
can I use flexbox for my main container div?
ehutchllew
@ehutchllew
Jan 07 2018 00:43
@hmmChase yes
Anthony Drane
@Antiaccess
Jan 07 2018 02:54
Can anyone help me make the navigation menu toggle appear and dissappear when below/above 768px (for mobile/desktop responsive): https://codepen.io/antiaccess/pen/ppdePb
Ken Haduch
@khaduch
Jan 07 2018 03:25
@Antiaccess - hello... did you use the Bootstrap navbar template that they give you on the website? Or are you doing your own version?` One thing that you need to do (for Boostrap's version) is to move the jquery load before the bootstrap.js load.
Anthony Drane
@Antiaccess
Jan 07 2018 03:26
Hey Ken, cheers for the response! I'm not using bootstrap, and I've not yet written any toggle code. I just made it the menu dissappear when the window is greater than 768px (in CSS)
@khaduch
Anthony Drane
@Antiaccess
Jan 07 2018 03:35
I feel so out of my depth... as I'm not really a front-end dev, just trying to get my portfolio running
Ken Haduch
@khaduch
Jan 07 2018 03:35
@Antiaccess - oh, so you're not using bootstrap, then... I'll have to look at your document that you're looking at and see what's supposed to be happening. One thing that you have in CodePEn is that your code is not configured correctly - the HTML panel should not have the entire page in it, only the HTML elements, basically. The CSS panel and config should have all CSS libs and custom CSS, same for the JS panel. But sometimes putting everything into the HTML panel works. It can result in trouble, since the CodePen method of using a template and filling it in sometimes collides with what you're intending to do, if you do things against the CodePen way...
Anthony Drane
@Antiaccess
Jan 07 2018 03:38
oh right! I just imported it into codepen so I could share it. I'm working off a .html document
Ken Haduch
@khaduch
Jan 07 2018 03:54
@Antiaccess - well, I don't think that the way that they are implementing the navbar that it has a toggle appear and disappear per se. I'm still looking at that page to understand.
It looks like they have an expanded navbar at the bottom of the page, and then move it to the top of the page on a wider screen?
Anthony Drane
@Antiaccess
Jan 07 2018 03:56
yeah that sounds right
not exactly what I'm looking for!
but don't really know what to do
thanks @khaduch I'm going to move on and come back to it later
CamperBot
@camperbot
Jan 07 2018 03:59
antiaccess sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3658 | @khaduch |http://www.freecodecamp.org/khaduch
Anthony Drane
@Antiaccess
Jan 07 2018 03:59
ill hang around here though
Ken Haduch
@khaduch
Jan 07 2018 04:03
@Antiaccess - well, Bootstrap has a mobile-responsive navbar that they provide a template for, and then using jquery.js, bootstrap.js (and if you are using Boostrap V4, something called "popper.js") and maybe one other .js file, with the proper setup it handles expansion of the navbar when it becomes collapsed on a narrow screen. Of course, since it is just a bunch of HTML, CSS, and Javascript code, you could certainly do the same thing yourself. It depends on what your goal is. If you just want to have a responsive toggle-able navbar, you can use Boostrap's template, a little customization, and take it from there. You might also find a similar solution without bootstrap, if you are averse to using bootstrap. If you want to learn how to make this happen yourself, then that's another thing. It might be done with some difficulty, perhaps not as tricky as you might think? I haven't done it myself, so I cannot offer an immediate solution for you.
@Antiaccess - here is an example that is really rather simple-looking - https://www.w3schools.com/howto/howto_js_topnav_responsive.asp - it would illustrate the basic things that you need to do to make this mobile responsive collapsible navbar work.
Anthony Drane
@Antiaccess
Jan 07 2018 04:25
cheers @khaduch i think that's going to be easier for me to work with
Ken Haduch
@khaduch
Jan 07 2018 04:27
@Antiaccess - I think that it's pretty straightforward to understand what's going on there, although it's a bare-bones version of a dropdown, in that if you look at a bootstrap version, it has smooth animation to expand it, etc. That probably wouldn't be too hard to add that in with some CSS animation. I hope that it works out for you - come back with any questions you might have.
Yingjie (Iris) Hu
@huyingjie
Jan 07 2018 05:35
I am trying to put github star button on my project site. https://buttons.github.io/
safari shows the button correctly.
Screen Shot 2018-01-07 at 12.35.16 AM.png
But chrome shows texts only.
Screen Shot 2018-01-07 at 12.36.08 AM.png
John
@flyboy1565
Jan 07 2018 05:37
hey guys.. i'm using bootstrap. I have a navbar.. i want to move items into the hamburger button based on size. kinda like using hidden-md hidden-sm...
Yingjie (Iris) Hu
@huyingjie
Jan 07 2018 05:37
How to show github button with chrome correctly?
John
@flyboy1565
Jan 07 2018 05:37
anyone know how to do that?
Yingjie (Iris) Hu
@huyingjie
Jan 07 2018 05:37
I put <script async defer src="https://buttons.github.io/buttons.js"></script> in index.html. and <a class="github-button" href="https://github.com/huyingjie/checklist-checklist" data-icon="octicon-star" data-show-count="true" aria-label="Star huyingjie/checklist-checklist on GitHub">Star</a> in a javascript file.
Znadams
@Znadams
Jan 07 2018 09:22
good morning!
Razvan Jackson
@RazvanJackson
Jan 07 2018 09:23
Good morning!
Who knows to create nice UI please tag me :)
Daniel Romero
@Ranacode
Jan 07 2018 11:10
@RazvanJackson When you say "nice" at what level do you mean?
Victor
@VictorHall
Jan 07 2018 13:21
Hi
Can someone help me with the Exact change exercise please?
Stephen James
@sjames1958gm
Jan 07 2018 13:59
@VictorHall What do you have so far?
Ken Haduch
@khaduch
Jan 07 2018 14:14
@flyboy1565 - your post is a few hours old, but note which version of bootstrap you are using (easier to stick with V3.*, unless they have updated the lessons to use V4?) and follow the information on the bootstrap documentation page. Start with the template that they provide https://getbootstrap.com/docs/3.3/components/#navbar on that page, get that working first, then customize it to your needs.
primuscovenant
@primuscovenant
Jan 07 2018 14:18
@heroiczero thx
CamperBot
@camperbot
Jan 07 2018 14:18
primuscovenant sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 2129 | @heroiczero |http://www.freecodecamp.org/heroiczero
John
@flyboy1565
Jan 07 2018 14:29
@khaduch , thanks for the follow-up. I'm using v3.. I have a normal navbar setup.. but I want to create a hamburger button when the screen goes to a MD and hide 1 elements in that. And so on till we're down to xs
CamperBot
@camperbot
Jan 07 2018 14:29
flyboy1565 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3661 | @khaduch |http://www.freecodecamp.org/khaduch
Hannahcologne
@hannahcologne
Jan 07 2018 14:50
Hi guys! Does anyone have time to take a look at this code for the Random Quote Machine? I can't really figure out why the text does not change when the button is clicked :worried: Thank you!! https://codepen.io/hannahcologne/pen/jYazNp
Ronald Ceballos
@Ronald03
Jan 07 2018 14:51
@hannahcologne lets ee
see
Matej Bošnjak
@mbosnjak01
Jan 07 2018 14:54
@hannahcologne where did you include jquery library inside your code?
cause i don't see it :)
Daniel Romero
@Ranacode
Jan 07 2018 14:55
Yes, you don't have the jquery library
and if you check the developers console tells you: "$ is not defined"
Matej Bošnjak
@mbosnjak01
Jan 07 2018 14:55
just include jquery lib and it should work, otherwise write your code in plain js
Hannahcologne
@hannahcologne
Jan 07 2018 14:57

Oops.. I had it before, like this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
$(document).ready(function() {
$("#changeQuote").on("click", function(){
$(".quotebox").html("Here is the message");
});
});
</script>

but then it still didn't work. Did I include the wrong link?

Matej Bošnjak
@mbosnjak01
Jan 07 2018 14:57
@hannahcologne try <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Ken Haduch
@khaduch
Jan 07 2018 14:57
@flyboy1565 - if you follow the setup information on the navbar docs, that is what you'll end up with, exactly what you're looking for. If you already started using something, then make a test CodePen and copy the code and set it up to see it work. Then use as you need it.
Hannahcologne
@hannahcologne
Jan 07 2018 14:57
thanks @mbosnjak01 and @Ranacode for taking a look!!
CamperBot
@camperbot
Jan 07 2018 14:57
hannahcologne sends brownie points to @mbosnjak01 and @ranacode :sparkles: :thumbsup: :sparkles:
:cookie: 358 | @ranacode |http://www.freecodecamp.org/ranacode
:cookie: 215 | @mbosnjak01 |http://www.freecodecamp.org/mbosnjak01
Daniel Romero
@Ranacode
Jan 07 2018 15:00
I'll recommend you @hannahcolognee put the <script> tags just before the </body>. That's because it's a good practice wait to render the html first in order to access the DOM elements via javascript without problems
Hannahcologne
@hannahcologne
Jan 07 2018 15:00
@mbosnjak01 I have included that link now (https://codepen.io/hannahcologne/pen/jYazNp but it doesn't work for me yet
thanks @Ranacode will try that!
CamperBot
@camperbot
Jan 07 2018 15:00
hannahcologne sends brownie points to @ranacode :sparkles: :thumbsup: :sparkles:
api offline
Daniel Romero
@Ranacode
Jan 07 2018 15:04
By the way, you can go to settings and configure your project, adding the preprocessors, scripts, etc..
Hannahcologne
@hannahcologne
Jan 07 2018 15:07
thank you @Ranacode! will take a look there. Unfortunately my code still doesn't work, even with the JQuery library included :(
CamperBot
@camperbot
Jan 07 2018 15:07
hannahcologne sends brownie points to @ranacode :sparkles: :thumbsup: :sparkles:
api offline
Ian
@toianw
Jan 07 2018 15:12
@hannahcologne you'll need two script tags - one for the jquery and one for your own code. Or you could put your code in the JS pane on codepen rather than the html. You can also include jquery through the settings -> javascript in codepen. That way, you don't need any script tags in the html pane.
Ronald Ceballos
@Ronald03
Jan 07 2018 15:12
@hannahcologne your button is inside the .quotebox, so when you get the quote to shows, it will replace everything under your .quotebox div
I made the following changes to your code:
$(document).ready(function() {
$("#changeQuote").on("click", function(){
$("#test").html("NAme");
});
});
Daniel Romero
@Ranacode
Jan 07 2018 15:14
I find two things @hanna
Ronald Ceballos
@Ronald03
Jan 07 2018 15:14
I added the id="test" to the <p> inside your .quotebox
Daniel Romero
@Ranacode
Jan 07 2018 15:15
@hannahcologne First of all, you was writing jQuery code inside the script that already implement the jQuery library so that's not gonna work. Just removed it and put the code you had on the JS tab on the right side.
Ronald Ceballos
@Ronald03
Jan 07 2018 15:15
image.png
@hannahcologne take a look at that screenshot
Daniel Romero
@Ranacode
Jan 07 2018 15:16
Second thing, You was writing the quote inside the '.quotebox' but it was taking of all your html tags, so you can add this
$(document).ready(function() {
    $("#changeQuote").on("click", function(){
      $(".quotebox p").text("Here is the message");
    });
  });
Ops sorry @ronald you already answer this :P
Ronald Ceballos
@Ronald03
Jan 07 2018 15:17
haha @Ranacode cool!
Hannahcologne
@hannahcologne
Jan 07 2018 15:17
haha wow so many answers :-) Thanks @Ronald03, @Ranacode and @toianw!!
CamperBot
@camperbot
Jan 07 2018 15:17
hannahcologne sends brownie points to @ronald03 and @ranacode and @toianw :sparkles: :thumbsup: :sparkles:
api offline
:cookie: 504 | @toianw |http://www.freecodecamp.org/toianw
:cookie: 318 | @ronald03 |http://www.freecodecamp.org/ronald03
Matej Bošnjak
@mbosnjak01
Jan 07 2018 15:20
@hannahcologne also .. classes like container-fluid, btn btn primary, col-xs-12 ... those are Bootstrap classes, so if you want them to have influence in your design, you should also include bootstrap library css file (link tag inside your head tag), and bootstrap js file on the bottom, under jquery library
Ivan Ngundela
@ingundela
Jan 07 2018 16:30
hello everyone, I’m testing my portfolio website and need some help from you mates… the website is https://www.ingundela.com/ … what is bodering my the loading time of the hero image.. I’ve optimazed all the image make the loading time shorter but when you load the website for the first time the hero image takes to long to load…what should be the way forward to fix it? Thank you in advance
Kevin Kindorf
@kkindorf
Jan 07 2018 16:37
@ingundela one thing you could do is that if the image is taking a while to load, you could set a background color to the div it'll be applied to. that way there won't be any out of place white space but instead there could be a darker gray background for your top div and then the image would loaded on top of that once it's fully loaded. Besides I don't see any issues when I go to your site everything loads quickly
DuskyPixel
@DuskyPixel
Jan 07 2018 16:37
@ingundela https://www.sitepoint.com/five-techniques-lazy-load-images-website-performance/ maybe? I have not personally tried lazy loading but it might help?
Ivan Ngundela
@ingundela
Jan 07 2018 16:39
@kkindorf @DuskyPixel Thank you guys I’ll have a look
CamperBot
@camperbot
Jan 07 2018 16:39
ingundela sends brownie points to @kkindorf and @duskypixel :sparkles: :thumbsup: :sparkles:
:cookie: 147 | @duskypixel |http://www.freecodecamp.org/duskypixel
:cookie: 347 | @kkindorf |http://www.freecodecamp.org/kkindorf
Ivan Ngundela
@ingundela
Jan 07 2018 16:41
@kkindorf is there anything else I should do before a load my webite to the server? like optimazing my code or something like it?…for the image I use photoshop and then imageOptim..
Kevin Kindorf
@kkindorf
Jan 07 2018 16:43
@ingundela does it not load for you? because everytime I open your website I don't notice any problems
Ivan Ngundela
@ingundela
Jan 07 2018 16:45
@kkindorf it does load for me, but still see a grey color for a few second before the actuall image load…
Kevin Kindorf
@kkindorf
Jan 07 2018 16:55
@ingundela there are other web based tools out there that can optimize images but I dont remember the names for them. You'll have to google around to see what other solutions people have come up with if you think it's going to be a significant design issue for your site I found this if it helps https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization
John
@flyboy1565
Jan 07 2018 16:56

so i have this codepen that is just a copy of a bootstrap template for collapse-nav.
https://codepen.io/flyboy1565/full/ENJNjZ/
what i want to do is, based on the break points (xs, sm, md) i want to hide the navbar-nav items.

example would be
lg change to md hide page 3 link
md to sm hide page 3 and page 2 links..

can anyone help me?

Ronald Ceballos
@Ronald03
Jan 07 2018 17:22
You want to hide a link at the time, depending the size of the screen, is that what you are looking for? @flyboy1565
if that's what you are looking for, where do you want the first link to hide to?
John
@flyboy1565
Jan 07 2018 17:58
@Ronald03 I want it to go into the hamburger button
Adam Bohannon
@abohannon
Jan 07 2018 17:59
If I have a really long SVG code in my CSS for a background that's crowding my file... is it acceptable to import it from another file in order to clean up my main styles.css? Just curious.
Dee
@xirokx
Jan 07 2018 18:06
@bjorno43 thanks mate
CamperBot
@camperbot
Jan 07 2018 18:06
xirokx sends brownie points to @bjorno43 :sparkles: :thumbsup: :sparkles:
:cookie: 179 | @bjorno43 |http://www.freecodecamp.org/bjorno43
ehutchllew
@ehutchllew
Jan 07 2018 18:21
@abohannon I don't see why not.
Yossi Fisch
@yoizfefisch
Jan 07 2018 18:43
I am trying to create a fluid iframe and followed a method that I found all over the web, you can see it here. However, the wrapper element in my case is a Flex item and that causes issues on Edge. Can anyone suggest a solution? https://codepen.io/yoizfefisch/pen/wpPLXE
Neil
@NNeil1
Jan 07 2018 19:03
Can someone explain how I add a background color to a navigation bar when I have a logo placed in there within a div? I can change background color without the image, but as soon as I position my logo on the far left, I can't change any background color
Tiago Correia
@tiagocorreiaalmeida
Jan 07 2018 19:05
are you using floats?
Neil
@NNeil1
Jan 07 2018 19:05
Yes I am
Tiago Correia
@tiagocorreiaalmeida
Jan 07 2018 19:06
add overflow hidden
to the div
floats have alot of issues:D
Neil
@NNeil1
Jan 07 2018 19:07
Ah, thanks! What exactly does Overflow do? @tiagocorreiaalmeida
CamperBot
@camperbot
Jan 07 2018 19:07
:cookie: 489 | @tiagocorreiaalmeida |http://www.freecodecamp.org/tiagocorreiaalmeida
nneil1 sends brownie points to @tiagocorreiaalmeida :sparkles: :thumbsup: :sparkles:
Eric Weiss
@eweiss17
Jan 07 2018 19:11
If the component extends outside of the div, overflow hidden will hide it
overflow is what will give you a scroll bar as well
Dmitriy
@nahkar
Jan 07 2018 19:36
hi everyone. Who worked with recompose?
Ronald Ceballos
@Ronald03
Jan 07 2018 19:39
@flyboy1565 well then, it sounds you want to modify how the ".collapse" works. As far as my knowledge that might be complicate.
John
@flyboy1565
Jan 07 2018 19:46
Ok.. I think I'll have to code it in the job then I guess..
Neil
@NNeil1
Jan 07 2018 19:53
What's the best way to position an image? I am using Margin right now, but just had to so a 1100px margin
Eric Weiss
@eweiss17
Jan 07 2018 20:16
really depends what you are trying to accomplish with images
Victor
@VictorHall
Jan 07 2018 20:24
@sjames1958gm I don't understand what "PENNYS", 1.01 represents
Gersho
@Gersho
Jan 07 2018 20:25
the cash register challenge ?
it means there is a total amount of 1.01$ in pennies, so 101 coins
Eric Hasegawa
@EricHasegawa
Jan 07 2018 20:33
I'm having trouble with the javascript calculator project
If anyone could tell me why when you click a number it doesn't update the <span> element, I would really appreciate it
Hold on, I may have figured it out
Nevermind!
Gersho
@Gersho
Jan 07 2018 20:40
since you've figured it out i'll bring you your next issue to solve, you prevent 2 dots in a row, but not 2 dots in the same number ["", "8", "4", "3", ".", "1", ".", "1", "."]
Eric Hasegawa
@EricHasegawa
Jan 07 2018 20:41
Ah I see
I'm trying to get the whole thing to work before I get into error handling honestly
Gersho
@Gersho
Jan 07 2018 20:43
sure ^^ the calculator challenge is a minefield of stuff to fix :D
Eric Hasegawa
@EricHasegawa
Jan 07 2018 20:46
Yeah it's been pretty tough so far, still trying though!
Daniel Romero
@Ranacode
Jan 07 2018 20:53
I have a weird issue with webpack
In another project with the same webpack configuration, I can generate the css from my .scss files
but in my actual project, the .css file is not generated
only the js and html
Dave Brener
@davebrener
Jan 07 2018 20:54
Guys and gals...I need reassurance here. What if I just will never understand JS? I feel like I have been over and over the core concepts, yet when I sit down to write JS, I find that I just can't form the code in my head. Almost like I need some sort of starting point to look at before I can form anything coherent. Anyone else suffer from this issue, and if so, how did you tackle it?
Daniel Romero
@Ranacode
Jan 07 2018 20:54
This is my webpack.config file
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: path.join(__dirname, "client_src/js/index.js"),
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "public")
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader?cacheDirectory=true",
          options: {
            presets: ["env"]
          }
        }
      },

      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [
            {
              loader: "css-loader",
              options: {
                minimize: true,
                importLoaders: 1
              }
            },
            {
              loader: "postcss-loader"
            },
            {
              loader: "sass-loader"
            }
          ]
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("index.css"),
    new HtmlWebpackPlugin({
      title: "SuperChat application JS",
      template: path.join(__dirname, "client_src/index.html")
    })
  ]
};
@davebrener Just be patient, Javascript is easy to get started but hard to understand deeply
Start build simple things using dom manipulation (without jquery) and increment the complex when you feel comfy on your actual knowledge
Eric Hasegawa
@EricHasegawa
Jan 07 2018 20:57
@davebrener I definitely get what you're saying, it's totally normal
And can anyone tell me why on my 34th line of code in the JS file it says that it cannot join the array because it's undefined? I can console.log the array and it comes out fine. But when I try to .join() it the console states that it is undefined. I have no idea why this is.
Gersho
@Gersho
Jan 07 2018 21:02
@davebrener what's your approach when taking on problem ? i usually start by thinking how i would do it if we didn't have computer and only pen&paper, or try to separate the task in little steps, as for your main problem, yeah it happens
Stephen James
@sjames1958gm
Jan 07 2018 21:42
@EricHasegawa Do you have a sequence of inputs that gives this error? Or have you fixed it?
Eric Hasegawa
@EricHasegawa
Jan 07 2018 21:42
@sjames1958gm I have fixed it. Thank you though!
CamperBot
@camperbot
Jan 07 2018 21:42
erichasegawa sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8826 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Jan 07 2018 21:42
@EricHasegawa :+1:
jrandallhansen
@jrandallhansen
Jan 07 2018 22:43
I think i have a pretty simple question here. I am wondering why my jumbotron class spans the whole viewport? I thought unless i do jumbotron-fluid it would not span the whole thing. I want the section to take up about 50-75% of the viewport and be centered. Best way to achieve that? https://codepen.io/jrandall/pen/QaOxpg
iso
@iso1048
Jan 07 2018 22:53

@jrandallhansen try this:

<div class=container>
  <div class="jumbotron text-center">
    <h1>Malala Yousafzai</h1> 
    <p>The Power of Innocence</p> 
  </div>
</div>

(i.e. nesting the div with class jumbotron in a div with the class container)

jrandallhansen
@jrandallhansen
Jan 07 2018 22:54
@gothamknight thank you
CamperBot
@camperbot
Jan 07 2018 22:54
jrandallhansen sends brownie points to @gothamknight :sparkles: :thumbsup: :sparkles:
:cookie: 481 | @gothamknight |http://www.freecodecamp.org/gothamknight
jrandallhansen
@jrandallhansen
Jan 07 2018 22:55
@gothamknight interesting. i was on the guide for bootstrap 4 and it shows the jumbotron class as default not going to edges
jrandallhansen
@jrandallhansen
Jan 07 2018 23:03
Anyone have a recommendation how to correctly align the background image of my jumbotron div? Or perhaps resize the height of the div? I'd prefer to correctly align the image https://codepen.io/jrandall/pen/QaOxpg
Actually i'll probably need to do both. Adjust the height and the alignment
jrandallhansen
@jrandallhansen
Jan 07 2018 23:10
font is bigger so changes a bit but still need to slide the image up to show her face. https://codepen.io/jrandall/pen/QaOxpg
Jake
@JakeG6
Jan 07 2018 23:13
Aloha, could I ask a question about hitting API points here?
VaseJS
@VaseJS
Jan 07 2018 23:22
that sounds like a front-end question