These are chat archives for FreeCodeCamp/HelpFrontEnd

22nd
Mar 2018
Nate Mallison
@NJM8
Mar 22 2018 00:06
@gulsvi Here is the issue I opened on github twbs/bootstrap#25907
They closed it as it is 'intented behaviour'
except that the element no longer has focus as you have opened a new page so it should not behave as such
Gulsvi
@gulsvi
Mar 22 2018 00:08
@NJM8 This should also have the same behavior without using bootstrap
Nate Mallison
@NJM8
Mar 22 2018 00:08
as far as I can tell it doesn't
Gulsvi
@gulsvi
Mar 22 2018 00:08
I'll make a quick codepen to show what I mean
Nate Mallison
@NJM8
Mar 22 2018 00:09
in the issue I opened you'll see there is a link to page I made highlighting the issue
in there I put an unstyled anchor tag. if you click it and come back to the page it does not have styling or focus
Gulsvi
@gulsvi
Mar 22 2018 00:10
This is what I thought you meant: https://s.codepen.io/anon/pen/qomjZm?editors=1111
Click the button and it will have focus and turn blue. It won't lose focus until you click elsewhere on the page
Nate Mallison
@NJM8
Mar 22 2018 00:11
it's not staying blue for me?
Gulsvi
@gulsvi
Mar 22 2018 00:12
Weird. I'm using chrome, I'll try firefox and see if it's different
Same for me in Firefox - remains focused until you click somewhere else on the page
I added a link too, that shows the same
Nate Mallison
@NJM8
Mar 22 2018 00:16
Now I see, it's weird that it doesn't stay styled on my basic anchor tag in the example
Gulsvi
@gulsvi
Mar 22 2018 00:17
This is how they style focused hyperlinks in Bootstrap:
a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):focus {
  outline: 0;
}
So, I guess an <a> tag without a href will act like a button, but when it has the href, it doesn't get styled on focus.
Jack Lyons
@JackEdwardLyons
Mar 22 2018 00:19
hey guys, ive got a really weird problem that i cant seem to solve, using data attribiutes and a drop down to show/hide items
DarkxPunk
@DarkxPunk
Mar 22 2018 00:19
Or well that’s wrong
Jack Lyons
@JackEdwardLyons
Mar 22 2018 00:19
can anyone help?
DarkxPunk
@DarkxPunk
Mar 22 2018 00:19
I just want to be able to have borders overlap XD
While in grid
Gulsvi
@gulsvi
Mar 22 2018 00:19
I'm happy to take a look @JackEdwardLyons
Jack Lyons
@JackEdwardLyons
Mar 22 2018 00:19
:)
ok , i have a pen to help
basically, I need to hide and show, but there are edge cases for items that go together using 'AND' and items that show either way with 'OR'
dont worry about the html too much --- its pretty hairy but thats cause its auto generated with php
i need to focus on the JS
Gulsvi
@gulsvi
Mar 22 2018 00:22
Okay - what is and is not working? :)
Jack Lyons
@JackEdwardLyons
Mar 22 2018 00:22
ok
so, the selection of MATRIX needs to show two items ( http_basic && matrix)
the rest work fine
so if I select http_basic, I can show either http_basic OR digest ... as they are the same sign up forms
if I select MATRIX, I need a little note underneath the form to go with it
@gulsvi i hope that makes sense?
Gulsvi
@gulsvi
Mar 22 2018 00:25
I think so - I'm just not seeing all the code I think, so trying to figure out your approach
Or, need to look at that HTML some more to get an idea of when you'll see "OR" and "AND"
Jack Lyons
@JackEdwardLyons
Mar 22 2018 00:26
yeah sorry about the HTML mess
and yeah, i cant use ID's
so I have to use data attributes
its pretty contrived I know, but I cant really touch much of the HTML as it is php generated and was told that data attributes would be the best way to approach it, because this function will be reused in other places
Gulsvi
@gulsvi
Mar 22 2018 00:31
Not really contrived, just taking me longer than I expected to figure out expected behavior
Definitely looks auto generated
wordpress'ish
Jack Lyons
@JackEdwardLyons
Mar 22 2018 00:31
haha me too hence why i decided to reach out here :)
yeah a similar cms to wordpress
my logic could be better, I have two loops there... thats probably too much?
maybe, the matrix p tag needs to be inside the http_basic table
Gulsvi
@gulsvi
Mar 22 2018 00:35
I was wondering, why not return after a condition is true
When you have data-show-if="AND,http_basic,matrix"
I almost wonder if you want to create an object to show your rules
Jack Lyons
@JackEdwardLyons
Mar 22 2018 00:37
really?
like with different functions for each rule?
Gulsvi
@gulsvi
Mar 22 2018 00:37
It would make it easier to read I think
map out expected functionality via functions for each select item
I have to admit though, without a clear set of rules, it's hard to see what might be going on
Jack Lyons
@JackEdwardLyons
Mar 22 2018 00:40
yeah im trying to figure that myself ::(
it sounds simple in my head
if AND, show element 'a' and element 'b'
if OR show either element 'a' or 'b'
Gulsvi
@gulsvi
Mar 22 2018 00:41
var rules = {
  "AND": {
    "http_basic": show(a),
    "matrix": show(a,b)
  },
  "OR": {

  }
}
Jack Lyons
@JackEdwardLyons
Mar 22 2018 00:43
yeah, i mean in the future, there might be 5 cases of AND
you never know
haha
Gulsvi
@gulsvi
Mar 22 2018 00:43
I hate to recommend a switch, but that might be easier to accommodate future changes
rather than adding more if else conditions
Jack Lyons
@JackEdwardLyons
Mar 22 2018 00:44
yeah
ok im going to tinker away, speak soon @gulsvi ill let you know how it goes
Gulsvi
@gulsvi
Mar 22 2018 00:46
Good luck - I was just trying to see if there's a "recommended" way for handing these hide/show rules based on dropdown values. Seems lots of people like the if/else approach
Almost 2am, bedtime for me...
Jack Lyons
@JackEdwardLyons
Mar 22 2018 00:47
yeah, most cases dont use such complex logic as I want.... they just show one or the other
like thois
niniyzni
@niniyzni
Mar 22 2018 01:22

Hi,

  • In angular 2 I am trying to change the checkbox for third click
  • so after the tick mark for the third click it should the small box as red color.
  • can you tell me how to achieve it.
  • providing my code below.

https://stackblitz.com/edit/angular-3s6hsh?file=app%2Fapp.component.ts



import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular 5';
  //var count = 0;

  // public items: Array<string>;
  public count = 0;

  constructor() {
    // this.items = ["item1", "item2", "item3"]
  }

  getStyle(event) {

    // var target = event.target || event.srcElement || event.currentTarget;
    // console.log("target--->" , target);
    // var idAttr = target.attributes.id;
    // console.log("idAttr--->" , idAttr);

    // var value = idAttr.nodeValue;
    // console.log("#"+value);


    const style = `color: red`;
    console.log("style--->" + style);

    return style;

  }

  public open(event) {

    let count = 0;
    let countIncreased = count + 1;

    if (count % 3 == 0) {
      console.log("getStyle started--->");

      var target = event.target || event.srcElement || event.currentTarget;
      console.log("target--->", target);
      var idAttr = target.attributes.id;
      console.log("idAttr--->", idAttr);

      var value = idAttr.nodeValue;
      console.log("#" + value);

      value.css(`color: red`);
      //value.addCs

      this.getStyle(event);
      console.log("getStyle ended--->");

    }

    alert('Open--->' + countIncreased);
  }


}
Jack Lyons
@JackEdwardLyons
Mar 22 2018 01:44
phew, i think i got it @gulsvi
Stanley Fevrier
@focuslead
Mar 22 2018 02:00
hi i'm looking for some help on how to make this mobile first
the css is for a 3 page website can be found here
the contact page is just not mobile first
Amit Patel
@AmitP88
Mar 22 2018 02:09

hey guys, I'm trying to see if I can decrement the green circle in my pomodoro timer according to the seconds countdown, similar to this: https://www.cssscript.com/demo/circular-countdown-timer-javascript-css3/

How can I use javascript to manipulate css properties in order to achieve this? https://codepen.io/AmitP88/pen/ZxWRmx

also, should I try and use SVG or stick to CSS for this?
Tom
@moT01
Mar 22 2018 02:14
i think css would work @AmitP88
i did a similar transition i think
Amit Patel
@AmitP88
Mar 22 2018 02:15
@moT01 wow, how did you do it?
Tom
@moT01
Mar 22 2018 02:16
the transform origin property i think will allow you to rotate something around a spot like that
Amit Patel
@AmitP88
Mar 22 2018 02:17
and this will let me decrement the border?
Tom
@moT01
Mar 22 2018 02:17
not sure what you mean by decrement the border
but you could get something to rotate around in a circle like the example you linked
so somehow you could do it with the border as well
Amit Patel
@AmitP88
Mar 22 2018 02:20
kinda like this, but counterclock-wise https://codepen.io/carsy/pen/VvqJwm
or you could try svg like in your last codepen link (never tried)
Amit Patel
@AmitP88
Mar 22 2018 02:24
@X140hu4 thanks for the link. although, my issue is trying to figure out how to manipulate the css using javascript, since the seconds countdown is in js
CamperBot
@camperbot
Mar 22 2018 02:24
amitp88 sends brownie points to @x140hu4 :sparkles: :thumbsup: :sparkles:
:cookie: 362 | @x140hu4 |http://www.freecodecamp.org/x140hu4
Rey Adam
@ReyCz_twitter
Mar 22 2018 02:52
hey guys
m trying render a modal after a button is click but im stuck (in reactjs)

handleSubmit(e){
e.preventDefault();
console.log('The button was clicked.');
// onClick={this.handleSubmit}

   this.openModal();

}

Fabien SHAN
@X140hu4
Mar 22 2018 04:51
@AmitP88 You would have to understand how the html/css works and then manipulate it with JS. The first part is hard imho haha
papageg
@papageg
Mar 22 2018 05:48
for some reason turms are sticking if i see somthing i can kinda work on it but i could not tell someone else anyone have a list that i can use to keep reminding myself
JoEezy
@JoEeeezy_twitter
Mar 22 2018 05:57
my random quotes are not showing up anymore on codepen https://codepen.io/yaezah/pen/WzRjqe
I even tried changing the API in case it was the problem
JoEezy
@JoEeeezy_twitter
Mar 22 2018 06:04
does it show up for you guys ?
Fabien SHAN
@X140hu4
Mar 22 2018 06:06
@JoEeeezy_twitter Nope, CORS issue
JoEezy
@JoEeeezy_twitter
Mar 22 2018 06:08
hmm ... i'm assuming it's blocked because i requested too much from their api?
Fabien SHAN
@X140hu4
Mar 22 2018 06:11
@JoEeeezy_twitter Have a look here
Nah its another issue.
@JoEeeezy_twitter If should be solved by asking format=jsonp and adding &jsonp=? to the url
JoEezy
@JoEeeezy_twitter
Mar 22 2018 06:15
wow works perfect thanks
now gonna read more about jsonp i've never seen that before
Sorin Ruse
@sorinr
Mar 22 2018 06:40
@JoEeeezy_twitter for me the api its working and i can get new quotes using your pen
Fabien SHAN
@X140hu4
Mar 22 2018 06:58
@sorinr He has done the modification since then, so it works now :)
Sorin Ruse
@sorinr
Mar 22 2018 06:59
@X140hu4 :+1:
Abhi Indoria
@AIndoria
Mar 22 2018 07:28
Does anyone know why this retruns a TypeError? https://pastebin.com/KZgSM6sb
I know what a type error is, just not sure why it returns as such here
Markus Kiili
@Masd925
Mar 22 2018 07:30
@AIndoria Do you know the line number that throws the error?
Abhi Indoria
@AIndoria
Mar 22 2018 07:30
quote.insertAdjacentHTML("afterbegin", quoteString);
this one @Masd925
Possibly because the <span id=quote> is empty in my HTML?
so when I'm doing getElementbyID it's returning as null?
not sure why the value would be needed as I'm just trying to append it
Markus Kiili
@Masd925
Mar 22 2018 07:43
@AIndoria quote should hold the Element object. Try logging it and also the quoteString. What does it show?
Abhi Indoria
@AIndoria
Mar 22 2018 07:43
quoteString works by getting the normal quote object from the json, lemme try quote.
Markus Kiili
@Masd925
Mar 22 2018 07:45
@AIndoria Second argument needs to be something that can be parsed as html.
Abhi Indoria
@AIndoria
Mar 22 2018 07:45
this is a quote var:
null
Markus Kiili
@Masd925
Mar 22 2018 07:46
@AIndoria Could you paste the html here too.
Abhi Indoria
@AIndoria
Mar 22 2018 07:46
Sorin Ruse
@sorinr
Mar 22 2018 07:46
@AIndoria do you have id=quote just like that or id="quote" ?
Abhi Indoria
@AIndoria
Mar 22 2018 07:48
@sorinr see html above. I have a span id="quote"
Markus Kiili
@Masd925
Mar 22 2018 07:49
@AIndoria Try putting the script element at the end of body or place the script content inside a document ready or onload event handler.
You might be trying to access the dom before it is ready.
Abhi Indoria
@AIndoria
Mar 22 2018 07:50
ffs it worked, thanks @Masd925
CamperBot
@camperbot
Mar 22 2018 07:50
aindoria sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4736 | @masd925 |http://www.freecodecamp.org/masd925
Abhi Indoria
@AIndoria
Mar 22 2018 07:51
so do I always have to put script at the end of the body or inside an onload handler?
Markus Kiili
@Masd925
Mar 22 2018 07:51
@AIndoria Almost always.
Usually your script targets dom elements and then you have to wait for dom to be ready.
Abhi Indoria
@AIndoria
Mar 22 2018 07:53
I'll keep that in mind. Thank you.
coderNewby
@coderNewby
Mar 22 2018 08:35
@DarrenfJ thanks
CamperBot
@camperbot
Mar 22 2018 08:35
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2434 | @darrenfj |http://www.freecodecamp.org/darrenfj
Apollo
@enigmacipher
Mar 22 2018 09:19
Give the 2nd <p> inside the 3rd <div> a 5px white border. Which selector should I use here?
Stephen James
@sjames1958gm
Mar 22 2018 09:27
Apollo
@enigmacipher
Mar 22 2018 09:31
@sjames1958gm both nth-child and nth-of-type can be used to style the entire 3rd div. Here I gotta change only the 2<p> in the 3rd <div>
Stephen James
@sjames1958gm
Mar 22 2018 09:33
@enigmacipher
body div:nth-child(3) p:nth-child(2) {
background-color:blue
}
Apollo
@enigmacipher
Mar 22 2018 10:10
chain. THanks :D @sjames1958gm
CamperBot
@camperbot
Mar 22 2018 10:10
enigmacipher sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9125 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Mar 22 2018 10:11
@enigmacipher :+1:
mustimuu
@mustimuu
Mar 22 2018 10:43
Hello guys
how do i create my own stylesheet in joomla ?
mustimuu
@mustimuu
Mar 22 2018 10:51
anybody i need heeeelp :D
Fabien SHAN
@X140hu4
Mar 22 2018 10:59
Hey
I don't know
Was that helpful :)
mustimuu
@mustimuu
Mar 22 2018 11:17
haha
Hello guys, how do i add a widget under a navigation?
Like any good tutorials, to how to work with widgets
Travis Tan
@TravisTtk
Mar 22 2018 11:37
Hey guys, need some help on figuring out how to make the grey bgcolor to fill entirely verticlly. it only fills window right now.
any tips?
Liam Docherty
@ldocherty1
Mar 22 2018 11:40

Problem:

How can I make my navigation not appear on my #home section. However, when the user scrolls down or clicks on the find more button. When the user gets to the 'features-icons' section how can I make my navigation bar appear for all sections including that and below? https://github.com/ldocherty1/Unit28_Assignment1

What I have tried:

HTML

<nav class="navbar scrolled-nav fixed-top navbar-expand-sm bg-light">
    <a class="navbar-brand" href="#">Front End Web Developer</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse">☰</button>
    <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul class="nav navbar-nav ml-auto">
            <li class="nav-item active"> <a class="nav-link" href="#home">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link active" href="#features-icons">Expectations</a>
            </li>
            <li class="nav-item active"> <a class="nav-link" href="#testimonials">Testimonials</a>
            </li>
            <li class="nav-item"> <a class="nav-link" href="#about">About</a>
            </li>
            <li class="nav-item"> <a class="nav-link" href="#portfolio">Portfolio</a>
            </li>
            <li class="nav-item"> <a class="nav-link" href="#about">Design</a>
            </li>
            <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a>
            </li>
        </ul>
    </div>
</nav>

CSS

.navbar {
    display: none;
}

JS

$("body, html").on("scroll", function() {
    var features_top = $("#features-icon").position().top;
    var top_of_window = $(window).scrollTop();
    if (top_of_window >= features_top) {
        $(".navbar").show();
    } else {
        $(".navbar").hide();
    }
});
I believe it has something has to do with the JS part of my code the problem why my nav isn't displaying.
Stephen James
@sjames1958gm
Mar 22 2018 11:56
@ldocherty1 Just a guess, isn't the top of the body position 0 ?
Hatem Araar
@WatashiHatem_twitter
Mar 22 2018 11:57
is there a method in JS to delete an li element ?
Stephen James
@sjames1958gm
Mar 22 2018 11:57
Add some console.log statements to see what the values of features_top and top_of_window
Hatem Araar
@WatashiHatem_twitter
Mar 22 2018 11:58
@sjames1958gm ?
Stephen James
@sjames1958gm
Mar 22 2018 11:58
@WatashiHatem_twitter You can use removeChild
https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild
@WatashiHatem_twitter If you have a reference to the element
Hatem Araar
@WatashiHatem_twitter
Mar 22 2018 12:02
function deletee(){

        ul.removehild("li");
    }
can I use this to remove an li
I have used and event listener to delete the corresponding li whne I click on the delete button
Fabien SHAN
@X140hu4
Mar 22 2018 12:03
@WatashiHatem_twitter Add the event listener on the parent
Hatem Araar
@WatashiHatem_twitter
Mar 22 2018 12:03
var ul = document.querySelector("ul");
var li3 =document.querySelectorAll("li");
var but = document.querySelectorAll("button");

function deletee(){
        ul.removehild("li");
    }
for(var j = 0; j < li3.length; j++) {
    but[j].addEventListener("click",deletee);
}
Stephen James
@sjames1958gm
Mar 22 2018 12:03
@WatashiHatem_twitter
Assuming that .second is the class on the li
let li = document.querySelector('.second');
if (li.parentNode) {
  li.parentNode.removeChild(li);
}
Hatem Araar
@WatashiHatem_twitter
Mar 22 2018 12:04
what is the mistake in my code
Markus Kiili
@Masd925
Mar 22 2018 12:04
@WatashiHatem_twitter removeChild argument needs to be a Node object, not a string.
Stephen James
@sjames1958gm
Mar 22 2018 12:04
@WatashiHatem_twitter In the event handler use.
event.target
function deletee(event) {
   if (event.target.parentNode) {
      event.target.parentNode.deleteChild(event.target);
   }
}
Hatem Araar
@WatashiHatem_twitter
Mar 22 2018 12:07
function deletee(){
    for(var i = 0; i < li3.length; i++) {
        this.ul.removehild(li3[i]);
    }
}
Stephen James
@sjames1958gm
Mar 22 2018 12:11
@WatashiHatem_twitter Oh, the li is not the click target. You need to associate the button with the li somehow
@WatashiHatem_twitter what does the html look like?
gulptech
@gulptech
Mar 22 2018 12:27
@WatashiHatem_twitter spell removeChild properly first
gulptech
@gulptech
Mar 22 2018 12:59
@WatashiHatem_twitter we can only guess until you show us your html list Stephen said
This message was deleted
<ul>
        <li id="1">1 <button>R</button></li>
        <li id="2">2 <button>R</button></li>
        <li id="3">3 <button>R</button></li>
    </ul>

    <script>
        let but = document.getElementsByTagName('button');

        for(let i = 0; i < but.length; i++) {
            but[i].addEventListener("click", deleteMe, false);
        }

        function deleteMe() {
            let parentLi = this.parentNode;
            parentLi.parentNode.removeChild(parentLi);
        }

    </script>
this would work..modify for your needs
Nate Mallison
@NJM8
Mar 22 2018 13:07
@TravisTtk Your background element should be inside the body tag, and all your external links for css/meta tags/title tag should be inside head
@TravisTtk then you can just define your background style right on the body tag
Like so:
html, body {
    height: 100vh;
    background-color: rgba(220,220,220,0.1);
}
how to align that Next button right?
Dhaval Vira
@dhavalveera
Mar 22 2018 13:33
@naveenrajum what is not aligned to next button ?

<meta name="viewport" content="width-device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script src="bootstrap.min.js"></script>
<script src="dropdown.js"></script>
<script src="collapse.js"></script>
<script src="popover.js"></script>
</head>

<body>

<nav class="navbar navbar-expand-sm navbar-dark bg-dark mb-4">
    <a  class="navbar-band" href="#">Top Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span> </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-item disabled" href="#">Disabled</a>
            </li>
        </ul>
    </div>
</nav>
in this anyone can help me that why Drop-Down Menu is not working while we view it on Mobile
Naveen Raju Mudhunuri
@naveenrajum
Mar 22 2018 13:34
I want to align that Next quote button to right
@dhavalveera
Marianissimus
@Marianissimus
Mar 22 2018 13:38
@dhavalveera You can use this for the parent element: <div class="row d-flex justify-content-between">
( since your container is flex, use the flex property of justify content between )
Abhinav Mishra
@abhinav-m
Mar 22 2018 13:56
I have a query regarding react and redux , i have a form component which needs to store some additional state ( to add dynamic number of options while submitting the form) , it doesn't make sense to store this state in redux to me since it's local for the component .. What is a good practice to do this? should i use react's componetn state itself?
Xapuu
@Xapuu
Mar 22 2018 14:46
If you need the info about the number of options in some other component, definetly put it in the store, otherwise its overkill (at lesat in my opinion) @abhinav-m
Abhijeet Singh
@abhijeetps
Mar 22 2018 15:33
A general survey question, what do you think GitHub lags?
In other words, can you complete: "wouldn't it be cool if GitHub could…"
Clark Weckmann
@clarkhacks
Mar 22 2018 15:34
@aps120797 "Wouldn't it be cool if GitHub could" host dynam pages?
dynamic*
Abhijeet Singh
@abhijeetps
Mar 22 2018 15:36
Cool @clarkhacks ! Thanks. Any more ideas people?
CamperBot
@camperbot
Mar 22 2018 15:36
aps120797 sends brownie points to @clarkhacks :sparkles: :thumbsup: :sparkles:
:cookie: 81 | @clarkhacks |http://www.freecodecamp.org/clarkhacks
Gulsvi
@gulsvi
Mar 22 2018 15:57
@JackEdwardLyons Much cleaner - nice work, congrats!
Gulsvi
@gulsvi
Mar 22 2018 16:43
@naveenrajum Remove all your CSS and use text-right on the parent grid for the button. The overall HTML would be:
  <div class="container">
    <div class="mt-5 row">
      <div class="col-12 text-center">
        <h1>Random Quote Machine</h1>
      </div>
      <div class="col-md-8 col-lg-6 mx-auto jumbotron p-4">
        <div class="quote">
          <p>Well done is better than well said.</p>
          <p class="text-right">-<span>Benjamin Franklin</span></p>
        </div>
        <div class="row mt-4">
          <div class="col-6">
            <button class="btn btn-info">Tweet</button>
          </div>
          <div class="col-6 text-right">
            <button class="btn btn-dark">Next Quote</button>
          </div>
        </div>
      </div>
    </div>
  </div>
@dhavalveera It looks like you haven't included jQuery - that's required, in addition to the bootstrap .js files you have included, for the dropdown menu.
Example: https://s.codepen.io/anon/pen/wmeaGd?editors=1001
Gulsvi
@gulsvi
Mar 22 2018 17:24
@ldocherty1 use $(window).on("scroll"... instead of body, html. Also, the ID appears to be plural #features-icons in your HTML but you have it as #features-icon in your JS.
$(window).on("scroll", function() {
    var features_top = $("#features-icons").position().top;
    var top_of_window = $(window).scrollTop();
    if (top_of_window >= features_top) {
        $(".navbar").show();
    } else {
        $(".navbar").hide();
    }
});
Travis Tan
@TravisTtk
Mar 22 2018 17:50
@NJM8 but that would make the grey bg color cover the entire body wouldn’t it ? How can I set it to fill only on the left side ?
Gulsvi
@gulsvi
Mar 22 2018 17:58
@TravisTtk In your codepen above, I see the left side is gray and the rest is white. Can you be more specific - what is the "left side" in your web page referring to?
image.png
Nate Mallison
@NJM8
Mar 22 2018 18:02
@TravisTtk In that case you want to set a width, probably as a percentage, but that would limit the size of the whole page, so do something like so:
<style>
  #bg {
    background-color: grey;
    height: 100vh;
    width: 33%;
  }
</style>
<body>
  <div id="bg">
    ALL other content here
  </div>
</body>
Travis Tan
@TravisTtk
Mar 22 2018 18:13
@gulsvi Hi i was reffering to the grey background area
Gulsvi
@gulsvi
Mar 22 2018 18:14
@TravisTtk Yes, and it is already filling the left side of your page from what I see.
Travis Tan
@TravisTtk
Mar 22 2018 18:20
@NJM8 thanks ! will try it out
CamperBot
@camperbot
Mar 22 2018 18:20
travisttk sends brownie points to @njm8 :sparkles: :thumbsup: :sparkles:
:cookie: 343 | @njm8 |http://www.freecodecamp.org/njm8
Travis Tan
@TravisTtk
Mar 22 2018 18:25
@NJM8 i just updated my pen . i placed the bg in the body instead and all the other contents seem to have moved with it and also it still doens't fill vertically once i scroll do
Nate Mallison
@NJM8
Mar 22 2018 18:32
oh. duh, I'm sorry. I'm being a brick atm.
Nate Mallison
@NJM8
Mar 22 2018 18:37
@TravisTtk Try this:
body {
  background-image: linear-gradient(
      to right, 
      rgba(220,220,220,0.3) 50%,
      white 50%
    );
    background-color: rgba(220,220,220,0.3); 
    height: 100%;
}
and ditch the div with the bg id
adjust the percentages if you want to slide the line around, just make sure they add up to 100
That's what makes the sharp line, otherwise you get a gradient
which isn't a bad look either. :smile:
nubian16
@nubian16
Mar 22 2018 18:40
Anyone can tell me why Arr4 is coming in blank? thanks in advance
function diffArray(arr1, arr2) {
  var newArr = [];
  var arr3=[];
  var arr4=[];
  var arr5=[];
  arr3=arr1.sort()+","+arr2.sort();
  newArr=arr3.split(",");
  newArr.sort();
  arr5=newArr;

  for(i=0;i<=arr5.length;i+2){
    if(newArr[(i)]!==newArr[(i+1)]){
       arr4.push(arr5[i]);

  }

     return arr4; // arr4 gives no value why?
  }
  // having return arr4; here gives infinite loop why? 
}

diffArray(["andesite", "grass", "dirt", "pink wool", "dead shrub"], ["diorite", "andesite", "grass", "dirt", "dead shrub"]);
Nate Mallison
@NJM8
Mar 22 2018 18:42
@nubian16 What are you trying to do?
nubian16
@nubian16
Mar 22 2018 18:44
@NJM8 Tryinbg to complete this challenge "Diff Two Arrays" , so arr4 should go outside the for loop but it gives me an infinite loop... not sure why ...
Nate Mallison
@NJM8
Mar 22 2018 18:47
I think you may be getting a little too complex
nubian16
@nubian16
Mar 22 2018 18:47
actually just figured it out in another room i+2 needs to be i+=2... still trying to understand what the difference would be between that and i++
JAJAJ starting to think the same
Nate Mallison
@NJM8
Mar 22 2018 18:48
the challenge on the website passes numbers in correct?
Travis Tan
@TravisTtk
Mar 22 2018 18:48
@NJM8 hey I tried 60% 40% but i'm seeing a gradient. no sharp line between both different colors
Nate Mallison
@NJM8
Mar 22 2018 18:49
@nubian16 Like so? diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5])
nubian16
@nubian16
Mar 22 2018 18:49
@NJM8 numbers and then it will give you words as well then a combination of the two
Nate Mallison
@NJM8
Mar 22 2018 18:50
@TravisTtk try 40% 40%, sorry again I didn't quite understand the ratios, if they are even it will make sharp lines
@nubian16 ok so think about the problem one step at a time, they just want the unique elements
and you don't need to sort, so here is how I thought about it, although there are lots of ways. if you walk through each array comparing all the elements to each other that can be a lot of work, what if you have two huge arrays?
Nate Mallison
@NJM8
Mar 22 2018 18:58
so try this: put the two arrays together, make an empty array, push elements into the new array one by one, but only if it doesn't appear in both of the original arrays.
nubian16
@nubian16
Mar 22 2018 19:00
Aaaaaaaaaaaaaaaaa that makes more sense @NJM8 then i could just use indexOf()
makess sense ! thank you!
@NJM8 thank you !
CamperBot
@camperbot
Mar 22 2018 19:01
nubian16 sends brownie points to @njm8 :sparkles: :thumbsup: :sparkles:
:cookie: 345 | @njm8 |http://www.freecodecamp.org/njm8
Nate Mallison
@NJM8
Mar 22 2018 19:01
@TravisTtk and if the white is less than the other it makes a sharp line,
Travis Tan
@TravisTtk
Mar 22 2018 19:01
@NJM8 Thank you so much! been trying so hard to find an answer for this!
CamperBot
@camperbot
Mar 22 2018 19:01
travisttk sends brownie points to @njm8 :sparkles: :thumbsup: :sparkles:
api offline
Travis Tan
@TravisTtk
Mar 22 2018 19:01
@NJM8 just gotta understand why this works now
Nate Mallison
@NJM8
Mar 22 2018 19:02
@nubian16 No problem, I'll key you in to another nice array method that is fairly new
JoEezy
@JoEeeezy_twitter
Mar 22 2018 19:02
https://codepen.io/yaezah/pen/vRZEwY can someone help me please
Nate Mallison
@NJM8
Mar 22 2018 19:02
@TravisTtk here is so reading off the deep end
JoEezy
@JoEeeezy_twitter
Mar 22 2018 19:03
i'm not sure why the api isn't returning anything
Nate Mallison
@NJM8
Mar 22 2018 19:06
@JoEeeezy_twitter $getJSON I think is an asynchronous function. That means it calls out to the api then comes back with data later. As you have your code now function(JSON) runs immediately after the call is made, but before the data comes back
you need to use .then() and a .when wrapper. I think you can pass your success function to getJSON but I'm not quite sure how to do it
JoEezy
@JoEeeezy_twitter
Mar 22 2018 19:09
thanks i haven't tried those yet will reasearch how they work
Nate Mallison
@NJM8
Mar 22 2018 19:09
looks like getJSON uses .done
$.getJSON(url).done(function(data){do stuff});
JoEezy
@JoEeeezy_twitter
Mar 22 2018 19:09
so at the moment it's getting called out but with empty coordinates?
ah thanks for that
Nate Mallison
@NJM8
Mar 22 2018 19:09
or wrap it in a when promise
Gulsvi
@gulsvi
Mar 22 2018 19:10
@NJM8 Actually, this works fine too:
$.getJSON(url, function(data) {
    //do stuff
});
No need for .then() or .done() here, all of that function(data) is a callback that runs after the data is received from the server
The problem I'm seeing right now @JoEeeezy_twitter is that navigator.geolocation service appears to be down at the moment. I'm not getting any location data back in any of my weather apps at the moment.
Nate Mallison
@NJM8
Mar 22 2018 19:12
@gulsvi Thanks, the way I read it I thought it needed something like that
CamperBot
@camperbot
Mar 22 2018 19:12
njm8 sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2684 | @gulsvi |http://www.freecodecamp.org/gulsvi
Nate Mallison
@NJM8
Mar 22 2018 19:12
I used $when for all my stuff. :smile:
Gulsvi
@gulsvi
Mar 22 2018 19:12
$.when is useful for running multiple promisified calls - like promise.all()
I used that in twitch when making all those API calls to the twitch streamers - definitely helpful for making the code a little more concise :)
I can't get a basic location call to work:
navigator.geolocation.getCurrentPosition(function(position) {
    console.log(position); // nothing, no errors, no position object. Nothing...
});
Same with the standard success/error functions - no error, no success:
navigator.geolocation.getCurrentPosition(success, error)

function success(position) {
  console.log(position);
}

function error(err) {
  console.log(err);
}
Nate Mallison
@NJM8
Mar 22 2018 19:15
Oh, I used when with getJSON for twitch because you need getJSON for the work around, I guess I didn't really need when
ah well
still works
Huh, I got my location back in console
Gulsvi
@gulsvi
Mar 22 2018 19:19
Working again now - it goes down sometimes, rarely, but it happens
usually when it goes down, you get some sort of timeout error code, but maybe I didn't hook up the error function correctly to see that
John Belk
@JohnBelk
Mar 22 2018 19:54
Hello world
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 22 2018 20:11
Hello human @JohnBelk
Loki
@jonesking9_twitter
Mar 22 2018 20:50
Hello
Matej Bošnjak
@mbosnjak01
Mar 22 2018 20:50
Hello, Brother of Thor
Loki
@jonesking9_twitter
Mar 22 2018 20:52
Lol
Am new trying to learn how to code
Hello Matej
Matej Bošnjak
@mbosnjak01
Mar 22 2018 20:53
Well if you didn't give tesseract to Thanos you'd be learning incredibly fast right now :P
Loki
@jonesking9_twitter
Mar 22 2018 20:53
Hehehe
Matej Bošnjak
@mbosnjak01
Mar 22 2018 20:53
Just ask if anything is unclear, good luck :D
Loki
@jonesking9_twitter
Mar 22 2018 20:54
I will sir
Following you on github
Thanks sent me here
Want to learn about blockchain and crypto
Matej Bošnjak
@mbosnjak01
Mar 22 2018 20:56
crypro?
Loki
@jonesking9_twitter
Mar 22 2018 20:57
Yes on how they are made
Matej Bošnjak
@mbosnjak01
Mar 22 2018 20:57
i don't think you'll have luck to learn about it here from someone
freecodecamp is oriented on web development
Loki
@jonesking9_twitter
Mar 22 2018 20:59
Web development ok
What are you good at friend
Matej Bošnjak
@mbosnjak01
Mar 22 2018 21:00
I do php, js, jquery, web design only when needed .. about to learn other stuff
Loki
@jonesking9_twitter
Mar 22 2018 21:03
Really kool
php awesome
Try to learn
DarkxPunk
@DarkxPunk
Mar 22 2018 22:04
Can non :hover styles overide :hover styles?
Because I seem to be running into this.
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 22 2018 22:05
@DarkxPunk Pen?
When you target any of the options and then try and get the hover effect off the first it does not work.
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 22 2018 22:09
@DarkxPunk It doesn't seem to be an issue of :hover but i'm sorry, idk how to fix it
DarkxPunk
@DarkxPunk
Mar 22 2018 22:09
Well my last style is clearly overidding :hover but I don’t know why XD
No one out there can save me? XD
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 22 2018 22:11
@DarkxPunk It's not, remove the colour from the last style and it doesn't make a difference
DarkxPunk
@DarkxPunk
Mar 22 2018 22:14
Comment out
/* .target:not(:target) ~ .form-types a:last-of-type, */
and the hover still doesnt work
Its the last style for some reason.\
Not the specific style but the selector I guess?
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 22 2018 22:16
I have no clue, sorry
DarkxPunk
@DarkxPunk
Mar 22 2018 22:17
Well thanks for taking a look. Anyone else wanna take on this challenge?
disjfa
@disjfa
Mar 22 2018 22:30
Overruled by .target:target ~ .form-types a:last-of-type
Check in chrome dev tools using the :hov button, in styles tab somewhere :camel:
DarkxPunk
@DarkxPunk
Mar 22 2018 22:49
@disjfa I am aware of what is overulling it, but I don’t know why its overrulled by this? I would have assumed :hover supersedes.
@disjfa So how do I get around this while still achieving what the overulling style achieves?