These are chat archives for FreeCodeCamp/HelpFrontEnd

6th
Jan 2018
David Belmares
@DavidBelmares
Jan 06 2018 00:16
I'm still having trouble with this exercise days after starting it. It's supposed to find specified values (the non zero indexes of the function's input) and remove them from the input array (in the zero index of the function's input as an array). This is really making me want to stop learning JS, it's so annoying. Thanks if you can help :)
``````function destroyer(arr) {
// Remove all the values

var output = arr[0];
for (i = 1; i < arr.length; i++) {
output.delete(arr[i]);
}

return output;

}``````
jayisray
@jayisray
Jan 06 2018 00:22
@DavidBelmares I think you are assigning the element of arr to output
so if arr is an array of integers, your output has the value of an integer
Let’s say your array is {1,2,3,4,5}, your output variable is equal to 1 and in your forloop you are trying to do 1.delete
David Belmares
@DavidBelmares
Jan 06 2018 00:33
the first element of arr is an array
iso
@iso1048
Jan 06 2018 00:34
Hi. How can control which element the browsers scrollbar acts on? For example, if you click on an image on the unsplash website (https://unsplash.com/), an element pops up, and the scrollbar operates on this element that popped up.
Stephen James
@sjames1958gm
Jan 06 2018 00:38
@gothamknight You use the overflow or overflow-x / overflow-y css properties
Aditya
@ezioda004
Jan 06 2018 00:38
@DavidBelmares Thats not how you use `delete`, its used as `delete array[index]` but this method is deprecated. In the hint they said to try using `filter()` and argument object. Maybe try doing that? Remember that `arr` argument can contain more than 3 values
Stephen James
@sjames1958gm
Jan 06 2018 00:39
@DavidBelmares The first element of arr is not an array.
arr is the array, the remaining values passed have to be accessed using arguments object
David Belmares
@DavidBelmares
Jan 06 2018 00:42
I did try using filter but that was just really frustrating
and the first element of arr is an array, here's an example of an input
Stephen James
@sjames1958gm
Jan 06 2018 00:46
@DavidBelmares Just to be clear when called with
`destroyer([1, 2, 3, 1, 2, 3], 2, 3)`
arr will be [1, 2, 3, 1, 2, 3]
The 2 and 3 are accessed via the arguments object
David Belmares
@DavidBelmares
Jan 06 2018 00:46
yes
oh
Stephen James
@sjames1958gm
Jan 06 2018 00:47
Yeah, part of what you are supposed to learn here is how you can pass more values to a function than the function has in the definition
and that the arguments object is how you can get to these extra values.
iso
@iso1048
Jan 06 2018 02:18
@sjames1958gm did not really achieve the effect I was after. Any other suggestions?
Shubham Sharma
@shubham1604
Jan 06 2018 02:37
How to scale image to its parent div
?
Sorin Ruse
@sorinr
Jan 06 2018 03:03
@shubham1604 it depends on wht you want to achieve. do you want the img full height and width of the parent? should it fit only the width of the parent and have an auto height to maintain the img ratio? etc
Pranav Doshi
@pranavdoshi
Jan 06 2018 04:13
@pranavdoshi
guys i have doubt need help
getting this error
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
i am doing the random quote project
https://codepen.io/pranavdoshi/pen/baYpPv
iso
@iso1048
Jan 06 2018 04:18
@pranavdoshi the url you are using is http, but codepen is served over https so you will not have access to the json from that url
@pranavdoshi so you will need to use another api (or create an object/array of quotes yourself)
Pranav Doshi
@pranavdoshi
Jan 06 2018 04:23
ohhh
anyone knows about free api for quotes?
iso
@iso1048
Jan 06 2018 04:31
(repost )Hi. How can control which element the browsers scrollbar acts on? For example, if you click on an image on the unsplash website (https://unsplash.com/), an element pops up, and the scrollbar operates on this element that has popped up (not on the original display)
Bjorn van de Peut
@bjorno43
Jan 06 2018 04:47
@gothamknight The scrollbar has nothing to do with that. On the website you've given as an example, a hidden element is made visible when you click on an image. That element overlays the DOM completely. The scrollbar you see isn't the same scrollbar as the one originally on the website.
abraham anak agung
@padunk
Jan 06 2018 04:50
@gothamknight css `overflow` on your modal?
iso
@iso1048
Jan 06 2018 04:57
@bjorno43 @padunk thanks guys. Could I pm either of you for some further help?
CamperBot
@camperbot
Jan 06 2018 04:57
gothamknight sends brownie points to @bjorno43 and @padunk :sparkles: :thumbsup: :sparkles:
:cookie: 175 | @bjorno43 |http://www.freecodecamp.org/bjorno43
:cookie: 413 | @padunk |http://www.freecodecamp.org/padunk
abraham anak agung
@padunk
Jan 06 2018 05:00
@gothamknight sure
primuscovenant
@primuscovenant
Jan 06 2018 05:02
@heroiczero thx
CamperBot
@camperbot
Jan 06 2018 05:02
primuscovenant sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 2128 | @heroiczero |http://www.freecodecamp.org/heroiczero
Bjorn van de Peut
@bjorno43
Jan 06 2018 05:03
@gothamknight If it's FCC related, you're free to contact me via PM. I'm too busy right now to help out with unrelated projects. Sorry
iso
@iso1048
Jan 06 2018 05:04
@bjorno43 its just a personal project. no worries
David Belmares
@DavidBelmares
Jan 06 2018 05:53
I know I look like an idiot at this point, but I think I understand the exercise a bit more now. I know there's supposed to be a function inside filter that decides which elements of the array stay, but I'm stuck.
``````
function destroyer(arr) {

var args = [arr].slice.call(arguments); // contains all arguments

var output = args[0];
var toRemove = args.slice(1);

return output.filter(function destroy {output[item] != toRemove[item]});

}

destroyer([1, 2, 3, 1, 2, 3], 2, 3);``````
Thanks if you can help
Fabien SHAN
@X140hu4
Jan 06 2018 06:07
@DavidBelmares First your syntax inside filter is not correct
Aditya
@ezioda004
Jan 06 2018 07:12
@DavidBelmares You're on the right track but the filter syntax as mentioned is not correct. Try reviewing the filter challenge, note that the argument given inside the filter arrays function is the iterated value of the array you're applying filter on. Example
``````var array = [1, 2, 3, 4, 5];
var newArr = array.filter(function(val){
console.log(val);
// val is 1, 2, 3, 4, 5
return val > 3;
});
console.log(newArr);
// newArr = [4, 5]``````
Razvan Jackson
@RazvanJackson
Jan 06 2018 11:46
Does someone have free time and TeamViewer to help me with an animation
Matej Bošnjak
@mbosnjak01
Jan 06 2018 12:07
Supp. Is there a way to make my app use certain .css file based on certain JS if statemets?
Destinexx
@Destinexx
Jan 06 2018 14:03
lol front-end
Marc
@MWBauer
Jan 06 2018 15:41
morning everyone!
:wave: :coffee:
@onomesotu That looks pretty good. Great job. I'm working on mine. You ok if I just steal your code? lol j/k Would never do that.
Marc
@MWBauer
Jan 06 2018 15:47
So what's going on ?
Matej Bošnjak
@mbosnjak01
Jan 06 2018 15:56
doing weather app cause i'm bored
SwastikUdupa
@SwastikUdupa
Jan 06 2018 16:03
@mbosnjak01 maybe use the getElementByWhatever().style.property to do that?
That going inside the if conditions.
Matej Bošnjak
@mbosnjak01
Jan 06 2018 16:05
@SwastikUdupa that would be too much of js doing styles ... i'll just switch .css files based on certain conditions
at leats in my current case
SwastikUdupa
@SwastikUdupa
Jan 06 2018 16:06
Aah sounds cool. So weather app is what this is for?
Matej Bošnjak
@mbosnjak01
Jan 06 2018 16:08
just for some practice with using API. example: https://fcc-weather-api.glitch.me/api/current?lat=35&lon=139 .... also did some work with swapi.co
Marc
@MWBauer
Jan 06 2018 16:10
I'm gonna need to study api a whole lot more.
I pretty much had this room do that exercise for me because it was a bit complicated for the newb.
Matej Bošnjak
@mbosnjak01
Jan 06 2018 16:11
https://swapi.co/ - you can practice on this one as well, it's big and give you opportunity to make more complicated calls :)
Marc
@MWBauer
Jan 06 2018 16:12
lol Ummm..don't know if complicated or big are what i'm looking for. But thanks.
Right now I'm trying to find my shadowed box that I did previously, but cant find it.
Matej Bošnjak
@mbosnjak01
Jan 06 2018 16:14
first api i tried to use was big and complicated ... now those smaller ones like ffc weather api are pure fun :D
Puyan Wei
@puyanwei
Jan 06 2018 16:15

Hi there, I'm trying to make a SPA using only vanilla js.

I have this event listener listening out for changes in the hashes of the url, but it says that my getNoteView is not a function when it is. I can also run this in my console (copy and pasting index.js) and it finds the function there.

controller.js

``````  function Controller(list, listView, tag) {
this.list = list;
this.listView = listView;
this.tag = tag;
}

Controller.prototype.getListView = function() {
return this.listView.converted;
};

Controller.prototype.outputListView = function() {
return (document.getElementById(this.tag).innerHTML = this.getListView());
};

Controller.prototype.getNoteView = function(number) {
return "<div>" + this.list.notelist[number].text + "</div>";
};

Controller.prototype.outputNoteView = function(noteOutput) {
return (document.getElementById(this.tag).innerHTML = noteOutput);
};

Controller.prototype.makeURLChangeToSeeNote = function() {
window.addEventListener("hashchange", this.showNote);
};

Controller.prototype.showNote = function() {
var noteNumber = window.location.hash.split("#notes/")[1];
var noteContent = this.getNoteView(noteNumber);
this.outputNoteView(noteContent);
};``````

index.js

``````(() => {
var list = new List();
list.add("Favourite drink: Seltzer");
list.add("Favourite drink: Singapore Sling");
var listView = new ListView(list);
listView.convert();
var controller = new Controller(list, listView, "app");
controller.outputListView();
controller.makeURLChangeToSeeNote();
})();``````
Ken Haduch
@khaduch
Jan 06 2018 16:19
@puyanwei - sometimes (at least I think I have seen) that it tells you something is not a function if the object variable that you are using is `null` or some other value that is not the correct object type?
@puyanwei - what is `List()` ? I'm just trying to run this code and getting `List is not defined` - And probably `ListView()` as well?
Puyan Wei
@puyanwei
Jan 06 2018 16:24
Hmm, ok i've pushed to github if you want to clone it - https://github.com/puyanwei/Notes-App-SPA
They are all contructors
You need to npm install first, npm start to start a local server, then open index.html on localhost 8000
Neil
@NNeil1
Jan 06 2018 16:38
any idea how I can make my bullet points closer to my list items? I tried list-style-option: inside and that worked, but then my sentences messed up when on a new line
Tiago Correia
@tiagocorreiaalmeida
Jan 06 2018 16:40
you can use li:before
ok nm :D
SwastikUdupa
@SwastikUdupa
Jan 06 2018 16:40
Put li's content in a span which is relatively positioned, then you can control the space by the left property of the span.
Tiago Correia
@tiagocorreiaalmeida
Jan 06 2018 16:40
got the wrong quesiton
@NNeil1 is there a codepen for it?
SwastikUdupa
@SwastikUdupa
Jan 06 2018 16:41
like, <li><span>point 1</span></li>
Neil
@NNeil1
Jan 06 2018 16:41
@SwastikUdupa but this would need a span for every list item, right? I already read this on Google, looking for different alternative. @tiagocorreiaalmeida I do all my work offline, not on Codepen :P
SwastikUdupa
@SwastikUdupa
Jan 06 2018 16:42
then, li span{position:relative; left=-some px;}
Ohh
Yeah it would.
Padding on the list element?
Tiago Correia
@tiagocorreiaalmeida
Jan 06 2018 16:43
@NNeil1 try to update it to somewhere so I can see what you really have and try to make a few changes and tell you how would be better to do it ?
:D
Neil
@NNeil1
Jan 06 2018 16:43
Then I will have a problem on smaller screens
with using padding @SwastikUdupa
@tiagocorreiaalmeida will upload the list now
Matej Bošnjak
@mbosnjak01
Jan 06 2018 16:44
https://i.imgur.com/cciNFo3.jpg so what's this and how to remove it ... it shows up when I write ° sign
Neil
@NNeil1
Jan 06 2018 16:44
SwastikUdupa
@SwastikUdupa
Jan 06 2018 16:47
You alread have a span class right?
Why not just use that to create the desired result?
Neil
@NNeil1
Jan 06 2018 16:48
I'm familiar with using that to move the bullet points over, but I was looking for a possible alternative than that
Also that moves the content, not the bullet points
Ken Haduch
@khaduch
Jan 06 2018 16:49
@puyanwei - I'm trying to cheat and just built (dummied up) a jsbin bin with your code in it, and I got it to the point where I'm seeing the same error, just not sure if it is exactly the same conditions that you are seeing it. In my version, it seems that when the code is trying to to `this.getNoteView(noteNumber)` that `this` is pointing to the "Window" instead of the instance of the controller. That could be a difference between how I have my jsbin set up, and how your project actually runs, but it seems that it could be a clue?
Puyan Wei
@puyanwei
Jan 06 2018 16:53
@khaduch thanks, do you know how i can point it to the instance of the controller?
CamperBot
@camperbot
Jan 06 2018 16:53
puyanwei sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3657 | @khaduch |http://www.freecodecamp.org/khaduch
Ian
@toianw
Jan 06 2018 16:53
@puyanwei try this:
``````  Controller.prototype.makeURLChangeToSeeNote = function() {
window.addEventListener("hashchange", this.showNote.bind(this));
};``````
Ken Haduch
@khaduch
Jan 06 2018 16:54
@puyanwei - well, looks like @toianw has a potential solution... Looks like it worked in my jsbin! Thanks @toianw!
neovks
@neovks
Jan 06 2018 16:58
hi sorry just a noob question, I'm doing the jQuery section of the map and I don't understand something, in the exercice "Target a Specific Child of an Element Using jQuery" we have to add the bounce animation to the second elements of the wells with this function \$(".target:nth-child(2)").addClass("animated bounce"); and it works but how does it know I am targeting the well ? edit : typo
Puyan Wei
@puyanwei
Jan 06 2018 16:58
@toianw @khaduch Ahh i understand, because I use the window.location.split, this refers to that instead. Thanks guys!
CamperBot
@camperbot
Jan 06 2018 16:58
puyanwei sends brownie points to @toianw and @khaduch :sparkles: :thumbsup: :sparkles:
:cookie: 503 | @toianw |http://www.freecodecamp.org/toianw
api offline
:bulb: to format code use backticks! ``` more info
SwastikUdupa
@SwastikUdupa
Jan 06 2018 16:58
`li {padding-left:1em}`
Tiago Correia
@tiagocorreiaalmeida
Jan 06 2018 16:59
why do you need such padding left?
Ken Haduch
@khaduch
Jan 06 2018 16:59
@neovks - you can go back and edit your post, just FYI - click on the three dot option list that pops up next to the timestamp for your post when you hover over it, and select the "Edit"... you have a limited amount of time to do that, but it helps sometimes! (If the option is greyed out, then your time for editing it is over...)
Tiago Correia
@tiagocorreiaalmeida
Jan 06 2018 16:59
do you want the items centered with the dots closer is that?
SwastikUdupa
@SwastikUdupa
Jan 06 2018 16:59
Try adding that to your css @NNeil1
Neil
@NNeil1
Jan 06 2018 17:00
I originally had a -100px left/right padding so I could have my content in the middle. Guess I'm going have to remove that to fix the issue with my bullet points @tiagocorreiaalmeida @SwastikUdupa
SwastikUdupa
@SwastikUdupa
Jan 06 2018 17:01
Content in the center as in?
Neil
@NNeil1
Jan 06 2018 17:03
List items in the middle with the bullet points next to them
SwastikUdupa
@SwastikUdupa
Jan 06 2018 17:04
You could use div for that, maybe?
Neil
@NNeil1
Jan 06 2018 17:05
@SwastikUdupa trying to do that now. It's supposed to look like this - https://codepen.io/freeCodeCamp/full/NNvBQW
Daniel Romero
@Ranacode
Jan 06 2018 17:06
@neovks you can do a console.log without the .addClass function to see what element are you targeting
``console.log( \$(".target:nth-child(2)") )``
Check this resource to understand better about the nth-child() pseudoselector
neovks
@neovks
Jan 06 2018 17:08
@Ranacode ok I will try that thanks a lot
CamperBot
@camperbot
Jan 06 2018 17:08
neovks sends brownie points to @ranacode :sparkles: :thumbsup: :sparkles:
:cookie: 356 | @ranacode |http://www.freecodecamp.org/ranacode
David Belmares
@DavidBelmares
Jan 06 2018 17:13
@ezioda004
@ezioda004 Thanks
CamperBot
@camperbot
Jan 06 2018 17:13
davidbelmares sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 351 | @ezioda004 |http://www.freecodecamp.org/ezioda004
David Belmares
@DavidBelmares
Jan 06 2018 17:13
@gothamknight Thanks
CamperBot
@camperbot
Jan 06 2018 17:13
davidbelmares sends brownie points to @gothamknight :sparkles: :thumbsup: :sparkles:
:cookie: 480 | @gothamknight |http://www.freecodecamp.org/gothamknight
Calvin
@oakypokey
Jan 06 2018 17:31
Hey! Is anyone here familiar with react? I'm really new to it and I'm not exactly sure what the best way to implement a feature is
David Belmares
@DavidBelmares
Jan 06 2018 17:32
To those who helped me with the Seek and Destroy exercise, I've come to a solution :D
``````
function destroyer(arr) {

var args = [arr].slice.call(arguments); // contains all arguments

var output = args[0];
var toRemove = args.slice(1);

return output.filter(function(val) {
return !args.includes(val);
});

}``````
Eric Weiss
@eweiss17
Jan 06 2018 17:33
@oakypokey what feature...? I'm also a noob at it but maybe i could help
Markus Kiili
@Masd925
Jan 06 2018 17:35
@DavidBelmares That `arr` in `[arr].slice.call(arguments);` is redundant.
David Belmares
@DavidBelmares
Jan 06 2018 17:35
Oh, I thought it was empty in the documentation because you had to fill it in in your own code
Markus Kiili
@Masd925
Jan 06 2018 17:37
@DavidBelmares You could refactor that into:
``````function destroyer(arr) {
var args = [].slice.call(arguments,1);

return arr.filter(function(val) {
return !args.includes(val);
});

}``````
That array before slice can be any array, or the `Array.prototype` object.
Neil
@NNeil1
Jan 06 2018 18:02
I am doing tribute page, and going through checklist. Can someone explain what this means '''Fulfill the below user stories. Use whichever libraries you need. Give it your own personal style.'''
CamperBot
@camperbot
Jan 06 2018 18:02
:bulb: to format code use backticks! ``` more info
Neil
@NNeil1
Jan 06 2018 18:02
`Fulfill the below user stories. Use whichever libraries you need. Give it your own personal style.`
Calvin
@oakypokey
Jan 06 2018 18:03
@NNeil1 user stories are just like the objectives in the checklist right? and i think they want you to be creative so you have the ability to use external libraries if you so choose
Neil
@NNeil1
Jan 06 2018 18:04
Ah, okay. I have done the page, and just been checking the requirements and it said this, so I got stuck. I've built the page using BootStrap - Would this qualify? @oakypokey
Calvin
@oakypokey
Jan 06 2018 18:05
@NNeil1 I believe so yes. I only used bootstrap in mine i think
Neil
@NNeil1
Jan 06 2018 18:05
Awesome, thanks mate! @oakypokey
CamperBot
@camperbot
Jan 06 2018 18:05
nneil1 sends brownie points to @oakypokey :sparkles: :thumbsup: :sparkles:
:cookie: 291 | @oakypokey |http://www.freecodecamp.org/oakypokey
Neil
@NNeil1
Jan 06 2018 18:11
Can anyone who can a spare 5 minutes just review my code before I submit. I have uploaded it all to Codepen here: https://codepen.io/NNeil1/pen/QaOOXe
Calvin
@oakypokey
Jan 06 2018 18:13
@NNeil1 you have to `<html>` tags at the beginning of ur html
other than that i think you're golden
Neil
@NNeil1
Jan 06 2018 18:14
Thanks @oakypokey , I moved my offline code to codepen and it had me remove doctype, probably made the mistake there. thank you for going over it through :D
CamperBot
@camperbot
Jan 06 2018 18:14
nneil1 sends brownie points to @oakypokey :sparkles: :thumbsup: :sparkles:
api offline
Onome Sotu
@onomesotu
Jan 06 2018 18:14
@MWBauer haha..no worries.. there is always something to learn from someone elses code :)
Onome Sotu
@onomesotu
Jan 06 2018 18:21
@NNeil1 The code is alright. But you didn't have to do it like the example in the video. You could have added your own design, you learn better and faster that way.
Otherwise, good job! +1
:+1:
Neil
@NNeil1
Jan 06 2018 18:26
@onomesotu Ah okay! I am moving on to the portfolio next, so I am going to design that myself and see how I do. I have no other knowledge of design other than what FCC has taught me, to be honest I am only designing this to get through it because I am more interested in backend rather than making stuff look good but I need to learn this first :P
Neil
@NNeil1
Jan 06 2018 19:20
If i have a class navigation and background color set as black, and then I have a h1 tag inside the navigation tag, how come color wont change when i apply it in css? but it will if i place it outside the navigation tag?
Kevin Kindorf
@kkindorf
Jan 06 2018 19:21
@NNeil1 you could try something like .navigation h1 {color:red};
Neil
@NNeil1
Jan 06 2018 19:26
@kkindorf thanks :)
CamperBot
@camperbot
Jan 06 2018 19:26
nneil1 sends brownie points to @kkindorf :sparkles: :thumbsup: :sparkles:
:cookie: 346 | @kkindorf |http://www.freecodecamp.org/kkindorf
Neil
@NNeil1
Jan 06 2018 19:26
what is the difference between `.navigation.h1` and `.navigation h1`
Markus Kiili
@Masd925
Jan 06 2018 19:35
Neil
@NNeil1
Jan 06 2018 19:42
Very useful that @Masd925 just bookmarked
Ronald Ceballos
@Ronald03
Jan 06 2018 22:06
Hey guys!
any body here constantly working on front-end and helping !?
Bjorn van de Peut
@bjorno43
Jan 06 2018 22:14
I don't think any healthy person is working "constantly". But if you read the topic of this chat, it says: Get help on our Frond End Development projects
@Ronald03 That doesn't mean you can't ask about other frond end questions of course. But it could happen that users are unable to help you if your question isn't covered in FCC's learning course :)
Ronald Ceballos
@Ronald03
Jan 06 2018 22:20
hahaha you might be right!! @bjorno43 . The reason is ask is cause Im facing a weird bug. Im designing a site and have the Home and the "Videos" section designed. The navbar and the footer is the same on all sections, now im creating a Contact Us section and the navbar and footer are getting shrank when I copy them to the next html file
I cant see why -_-
@bjorno43 uuuh So this is just for FCC projects mmm. I might need to ask on another place -_-
Bjorn van de Peut
@bjorno43
Jan 06 2018 22:24
@Ronald03 I think it's best that you create a codepen with your project. You can share that so others are able to see what you're talking about. You can find our main chatroom here. That's where most of those questions are asked. It's fine to ask here as well though
Right now your question seems like a CSS issue to me and is most likely quite easy to fix
Hala-kasim
@Hala-kasim
Jan 06 2018 22:26
hi, is there anyone can work with react plz?
Ronald Ceballos
@Ronald03
Jan 06 2018 22:28
@bjorno43 Yeah CodePen might be the best idea, however I was thinking on sharing my github -_-. let see If I put it on a codepen
Bjorn van de Peut
@bjorno43
Jan 06 2018 22:29
@Ronald03 The reason for Codepen is because the chat actually runs it inside here when you post the link. And we're able to see the result directly
Ronald Ceballos
@Ronald03
Jan 06 2018 22:30
yeah, let me do that real quick, hope you might take a look at it. @bjorno43
Bjorn van de Peut
@bjorno43
Jan 06 2018 22:30
@Ronald03 Of course. I'm not going anywhere
Ronald Ceballos
@Ronald03
Jan 06 2018 22:44
@bjorno43 take a look at the pen.
Bjorn van de Peut
@bjorno43
Jan 06 2018 22:44
@Ronald03 Let's see
Bjorn van de Peut
@bjorno43
Jan 06 2018 22:49
@Ronald03 I'm having a hard time understanding the problem. What do you mean with "shows shrank"? And where is the footer? I'm not seeing it
Ronald Ceballos
@Ronald03
Jan 06 2018 22:53
The first code before the comment is just the navbar. after the comment if the entire code for the HOME page. the footer is there for the Home page. but I did not separated it because i guess the fix of the navbar will fix the footer, seems it does the same
Bjorn van de Peut
@bjorno43
Jan 06 2018 22:54
@Ronald03 Perhaps you could show me 2 screenshots. 1 with how it's supposed to look and 1 with the shrinked menu / footer. You can u3pload them here: http://home.icecub.nl/ImageUpload It will give you the links towards the images (you can upload both at the same time)
Ronald Ceballos
@Ronald03
Jan 06 2018 22:54
@bjorno43 when you go to the pen, the first and only thing you see is the navbar. when you comment that code out, and uncomment the other code, you will see how the navbar should looks like.
ok, lets see @bjorno43
this is just the code of the navbar that I copied from the Home page code:
Bjorn van de Peut
@bjorno43
Jan 06 2018 22:57
Alright. So basicly you're trying to get the menu only to be full width like in the first pic?
Ronald Ceballos
@Ronald03
Jan 06 2018 22:58
yes, that how it should be, Full width. cause is the same html code and the same css code. but that is not what the browser understand
Bjorn van de Peut
@bjorno43
Jan 06 2018 22:59
Well now I understand what you want, I can see what's going on. Give me a couple of mins
Danshil Mungur
@danshilm
Jan 06 2018 23:00
@Ronald03 are you trying to get this:
Ronald Ceballos
@Ronald03
Jan 06 2018 23:02
@danshilm i think you are trying to send a screenshoot but I cant see it.
Danshil Mungur
@danshilm
Jan 06 2018 23:02
Yeah :s
Hmm, I'll try fiddling with your pen and get back
Ronald Ceballos
@Ronald03
Jan 06 2018 23:05
haha ok
@bjorno43 ok Cool!
Bjorn van de Peut
@bjorno43
Jan 06 2018 23:11
@Ronald03 Just to be clear: Are you trying to remove that QB logo in the menu?
Because that's what's causing your issue
Ronald Ceballos
@Ronald03
Jan 06 2018 23:14
on which line you talking about?
Bjorn van de Peut
@bjorno43
Jan 06 2018 23:17
`<img src="http://nebula.wsimg.com /1e5` <-- you have a space here between .com and /
But that's not what's causing the issue. I already found what's going on :)
Ronald Ceballos
@Ronald03
Jan 06 2018 23:18
hahaha is it something stupid??? lol
@bjorno43 I check my code, there is not such space
Bjorn van de Peut
@bjorno43
Jan 06 2018 23:21
If you look at the full code, you'll notice: `<div class="container-fluid div-container">` underneath the menu. `container-fluid` causes a full width on the elements. Without that, you lose it. So you'll need to wrap your entire nav menu inside: `<div class="container-fluid" style="padding:0;"> ... </div>` and enable the `width: 100%;` on your body element in css again to make it work
Ye it might be that I caused that myself, lol
Ronald Ceballos
@Ronald03
Jan 06 2018 23:24
@bjorno43
Bjorn van de Peut
@bjorno43
Jan 06 2018 23:25
So the code should be like this:
``````<div class="container-fluid" style="padding:0;">
<nav class="navbar navbar-expand-sm nav-bg navbar-dark">
<div class="container">

<a class="navbar-brand" href="#">
<img src="http://nebula.wsimg.com/1e5daf4a68a3b3104fc57c26186cb8f3?AccessKeyId=F356DAB05986C19E1B0B&disposition=0&alloworigin=1" alt="logo" style="width:60px;">
</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item ">
<a class="nav-link" href="#"> HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> VIDEOS</a>
</li>
<li class="nav-item pull-right">
<a class="nav-link" href="#"> CONTACT US</a>
</li>
</ul>
</div>
</div>
</nav>
</div>``````
And enable the width:100% on body in CSS
Ronald Ceballos
@Ronald03
Jan 06 2018 23:26
So, why applying "container-fluid" to the <nav> does not fix it!? mmm
Bjorn van de Peut
@bjorno43
Jan 06 2018 23:26
Because nav isn't a block element I guess
Ronald Ceballos
@Ronald03
Jan 06 2018 23:30
@bjorno43 Ok, so I applied to the codepen the changes that you suggest, and it does work. However, by just applying 'width:100%' to the body on css, it works!!!
I thought the body would not lose its width and by default always set to 100%
Bjorn van de Peut
@bjorno43
Jan 06 2018 23:32
Ye. `width:100%;` only works up to the parent element. So if you have a 300px wide div and put a 100% width div inside that, it will only be 300px. In order to get 100% body width on an element, every parent element must be 100% body width as well
Ronald Ceballos
@Ronald03
Jan 06 2018 23:33
yeah!! THANK YOU SO MUCH @bjorno43
CamperBot
@camperbot
Jan 06 2018 23:33
ronald03 sends brownie points to @bjorno43 :sparkles: :thumbsup: :sparkles:
:cookie: 178 | @bjorno43 |http://www.freecodecamp.org/bjorno43
Bjorn van de Peut
@bjorno43
Jan 06 2018 23:33
That's why I always start my CSS on every new project with:
``````html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}``````
Ronald Ceballos
@Ronald03
Jan 06 2018 23:34
Ill make sure to practice that!!!
Bjorn van de Peut
@bjorno43
Jan 06 2018 23:35
But you're welcome :) Glad I could help you out^^
Dee
@xirokx
Jan 06 2018 23:40
on my tribute page my <li> are showing up like this:
i feel like i have to go back and understand bootstrap system
i get its 12 columns but what I dont get is how you can place anything anywhere using it..#frustratedannoyed
any help / resources would be appreciated - thanks
the user stories are:

User Story: I can view a tribute page with an image and text.

User Story: I can click on a link that will take me to an external website with further information on the topic.

I need to get my head around this
Bakhtiiar Muzakparov
@muzakparov
Jan 06 2018 23:45
hi guys
Bjorn van de Peut
@bjorno43
Jan 06 2018 23:46
@xirokx If you don't want to go back through FCC's courses, you can go here: https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp to get the basics again
Bakhtiiar Muzakparov
@muzakparov
Jan 06 2018 23:51

`<form name="registration"></form>` and `document.registration.accept.disabled=...`

I understand that we can refer by to form element by `document.registration`, but where do we get `.accept.disabled` from?