These are chat archives for FreeCodeCamp/HelpFrontEnd

30th
Mar 2018
zootechdrum
@zootechdrum
Mar 30 2018 03:12
@gulsvi @sjames1958gm thanks so much. guys. I really appreciate it.
CamperBot
@camperbot
Mar 30 2018 03:12
zootechdrum sends brownie points to @gulsvi and @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 2694 | @gulsvi |http://www.freecodecamp.org/gulsvi
:star2: 9148 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Ghost
@ghost~55a04b725e0d51bd787af54c
Mar 30 2018 05:47
hi
Is anyone on?
Dhaval Vira
@dhavalveera
Mar 30 2018 05:48
Hi
guys why is data.stream undefined?
Frosty427
@Frosty427
Mar 30 2018 06:35
image.png
how would i make this div take up the other half of the page?
like a left and right kind of thing
the light blue is taking up 50% of the page and i need the darkblue to do the same
kerafyrm02
@kerafyrm02
Mar 30 2018 07:57
hi ppl. who needs help?
Dhaval Vira
@dhavalveera
Mar 30 2018 07:57
for which purpose
kerafyrm02
@kerafyrm02
Mar 30 2018 07:58
idk any?
Dhaval Vira
@dhavalveera
Mar 30 2018 07:58
you are Expert in Front-End ?
kerafyrm02
@kerafyrm02
Mar 30 2018 07:58
JS / CSS?
yeah
pretty good anyways
kerafyrm02
@kerafyrm02
Mar 30 2018 08:09
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
      <script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="left-right-container">
    <div class="lef-haf">
      <p class="items"><i class="fas fa-search icons"></i>Follow your interests.</p>
       <p class="items"><i class="fas fa-users icons"></i>Hear What people are talking about.</p>
      <p class="items"><i class="far fa-comment icons"></i>Join the conversation.</p>
    </div>


    <div class="rit-haf">
      <input type="text" name="" value="">
    </div>
    </div>
  </body>
</html>



@font-face {
  font-family: Segoe UI; src: url('Sego UI.ttf');

}
body {
  margin: 0;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-weight: 700;

}

.left-right-container {
  display: flex;
}

.lef-haf {
  width: 50%;
  display: flex;
  background: rgb(29, 161, 242);
  font-size: 18px;
  color: white;
  justify-content: center;
  /* flex-wrap: wrap; */
  align-content: center;
  flex-direction: column;
  height: 100vh;

}





.items {
margin-left: 150px;

}

.icons {
  margin-right: 10px;
}


.rit-haf {
  /* position: relative;
  width: 50%;
  left: 50%; */
  width: 50%;
  height: 100vh;
  background-color: #1b2836;
  color: white;

}
There's your answer frosty
Anyone else need help
Dhaval Vira
@dhavalveera
Mar 30 2018 08:09
@kerafyrm02 pls message me directly
coderNewby
@coderNewby
Mar 30 2018 09:16
@darrenfj thanks
CamperBot
@camperbot
Mar 30 2018 09:16
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2443 | @darrenfj |http://www.freecodecamp.org/darrenfj
Federico Dente
@fez994
Mar 30 2018 11:27
Hello guys i need help with javascript, can someone help me?
Sweet Coding :)
@SweetCodingInc
Mar 30 2018 11:28
@fez994 post your question
Federico Dente
@fez994
Mar 30 2018 11:31

$.getJSON(url, function(data) {

    var lat = data.results[0].geometry.location.lat;
    var lon = data.results[0].geometry.location.lng;

    //console.log(lat);
    });
How can i make the lat and lon variables accessible outside of the $.getJSON function?
@SweetCodingInc
Sweet Coding :)
@SweetCodingInc
Mar 30 2018 11:32
@fez994 okay.. create a new fucntion and pass these values to that function..
$.getJSON(url, function(data) {
  var lat = data.results[0].geometry.location.lat;
  var lon = data.results[0].geometry.location.lng;

  useLatLon(lat, lon);
});

function useLatLon(lat, lon){
  // use them here
}
Federico Dente
@fez994
Mar 30 2018 11:39
@SweetCodingInc Alright it works thank you
CamperBot
@camperbot
Mar 30 2018 11:39
fez994 sends brownie points to @sweetcodinginc :sparkles: :thumbsup: :sparkles:
:cookie: 394 | @sweetcodinginc |http://www.freecodecamp.org/sweetcodinginc
Federico Dente
@fez994
Mar 30 2018 11:47
@SweetCodingInc Do you know how can i make those variables global instead of using them for a function? The problem is that i'm using the google API to get lat and lon based on address, then i use this coordinates to call a second Api wich shows solar radiations data
But doing so i get "No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access."
Sweet Coding :)
@SweetCodingInc
Mar 30 2018 11:47
@fez994 Do you have codepen for this?
@fez994 As for making lat and lon variables global, it's straightforward
var lat, lon;
$.getJSON(url, function(data) {
  lat = data.results[0].geometry.location.lat;
  lon = data.results[0].geometry.location.lng;

  useLatLon(lat, lon);
});

function useLatLon(lat, lon){
  // use them here
}
Federico Dente
@fez994
Mar 30 2018 11:49
I'll post it on codepen but i'll remove the api keys
Sweet Coding :)
@SweetCodingInc
Mar 30 2018 11:53
@fez994 did you try adding ?callback=? at the end of your 2nd api url? (after the api key)
Federico Dente
@fez994
Mar 30 2018 11:53
no
Sweet Coding :)
@SweetCodingInc
Mar 30 2018 11:54
try it see if that works
otherwise, you will have to read their docs and set appropriate headers
Federico Dente
@fez994
Mar 30 2018 11:55
image.png
Got this error now
Sweet Coding :)
@SweetCodingInc
Mar 30 2018 11:56
@fez994 sorry.. my bad.. you need to add &callback=?
I didn't notice you already had query parameters
Federico Dente
@fez994
Mar 30 2018 12:01
image.png
@SweetCodingInc Now i get this weird sintax error
But i don't have any ":"
Sweet Coding :)
@SweetCodingInc
Mar 30 2018 12:02
Yes.. that means the response is problematic
can you paste your url (removing &callback=?) in a new tab and see if you get the data?
Quantomistro3178
@Quantomistro3178
Mar 30 2018 12:02
Hey
Sweet Coding :)
@SweetCodingInc
Mar 30 2018 12:02
just verify it once
Quantomistro3178
@Quantomistro3178
Mar 30 2018 12:02
is the fcc weather API working?
its not executing either the fail or the success functions, am I doing something wrong?
Matej Bošnjak
@mbosnjak01
Mar 30 2018 12:04
@Quantomistro3178 Uncaught TypeError: arr[0].toUpperCase(...).join is not a function maybe this?
Quantomistro3178
@Quantomistro3178
Mar 30 2018 12:04
oh, lemme check that
Federico Dente
@fez994
Mar 30 2018 12:04
@SweetCodingInc What do you mean past our url in a new tab?
Ah nevermind i get it
Sweet Coding :)
@SweetCodingInc
Mar 30 2018 12:04
:laughing:
Matej Bošnjak
@mbosnjak01
Mar 30 2018 12:05
i just removed .join()
and worked
@Quantomistro3178
Quantomistro3178
@Quantomistro3178
Mar 30 2018 12:06
Oh yeah, its working
Federico Dente
@fez994
Mar 30 2018 12:06
@SweetCodingInc Still get the same ":" error
Quantomistro3178
@Quantomistro3178
Mar 30 2018 12:07
but the temp and weather description isn't showing for some reason. Oh well, i'll look into that. @mbosnjak01 Thanks!
CamperBot
@camperbot
Mar 30 2018 12:07
quantomistro3178 sends brownie points to @mbosnjak01 :sparkles: :thumbsup: :sparkles:
:cookie: 257 | @mbosnjak01 |http://www.freecodecamp.org/mbosnjak01
Sweet Coding :)
@SweetCodingInc
Mar 30 2018 12:07
@fez994 yeah.. that's the problem with API
Matej Bošnjak
@mbosnjak01
Mar 30 2018 12:07
temp is there :D
Quantomistro3178
@Quantomistro3178
Mar 30 2018 12:08
got it to work
yeah, I found the mistake
Man, I'm really too lazy to add css and eye-candy to this project...is it worth it?
Federico Dente
@fez994
Mar 30 2018 12:09
@SweetCodingInc Alright thank you anyway, gonna post on the API forum to get some help
CamperBot
@camperbot
Mar 30 2018 12:09
fez994 sends brownie points to @sweetcodinginc :sparkles: :thumbsup: :sparkles:
api offline
Sweet Coding :)
@SweetCodingInc
Mar 30 2018 12:10
@fez994 :+1:
Federico Dente
@fez994
Mar 30 2018 12:25
image.png
@SweetCodingInc Yeah it's the api problem
Stephen James
@sjames1958gm
Mar 30 2018 12:31
@Quantomistro3178 Without css and eye-candy as you call it, it wouldn't be a complete front end project
Much of front end is making it look good
aenkirch
@aenkirch
Mar 30 2018 14:33
Hi guys ! Do you know why I can't submit my code for the "Build A Random Quote Machine" project ?
https://codepen.io/aenkirch/full/VXXQOx/ Here's the CodePen link I'd like to submit, but when I click on "Submit", the page doesn't change and the challenge doesn't valide itself
Marianissimus
@Marianissimus
Mar 30 2018 14:36
@aenkirch because you have code comments written in FRENCH
it's a joke, relax, it's a joke :)
NikolaNbgd
@NikolaNbgd
Mar 30 2018 14:42
Hello Folks. Does anyone of you every used google scripts for html for submit? I wanna when user submit form, to receive an email user data and to get those data in my google spread sheet. I got email, but my google spread sheet is empty. Any help, advice? Thanks in advance!
aenkirch
@aenkirch
Mar 30 2018 14:42
@Marianissimus Haha french rocks !
@Marianissimus But you make me realize I should by now have commented my code in english, I'm definitly going to do this from now on
Nate Mallison
@NJM8
Mar 30 2018 14:51
@aenkirch I have an error about loading mixed content, http in a https page. Maybe that is it?
aenkirch
@aenkirch
Mar 30 2018 14:54
I managed to do it, it was "http" instead of "https" and not "/full/" but "/pen/" that was required
Thanks mates ;)
Sorin Ruse
@sorinr
Mar 30 2018 14:54
@NJM8 thats just an warning not an error
Nate Mallison
@NJM8
Mar 30 2018 14:55
Yes you are right, I'm just not sure if FCC will prevent submission with errors or warnings present
Sorin Ruse
@sorinr
Mar 30 2018 14:57
@aenkirch strange. codepen loads only on https. if you try to go to: http://codepen.io you will see you are redirected to https site
Nate Mallison
@NJM8
Mar 30 2018 15:02
thats good!
Hey I'm looking for some advice on how to correctly debounce a $(document).on('scroll') function. I have a debounce function, I am just rotating a down arrow to be an up arrow after the user scrolls down a specific amount, the problem is after debouncing it if the user scrolls up to the top too fast the arrow doesn't rotate back.
www.natethedev.com is the site.
the arrow there now is not debounced, but I am concerned that will make it slow for some users. Of course I'm only animating one element so maybe I'm being overly concerned
kerafyrm02
@kerafyrm02
Mar 30 2018 15:09
good morning ppl
anyone need help?
Liam Docherty
@ldocherty1
Mar 30 2018 15:11

Why is my navbar text not on the same line for the navbar brand and the <li> text? How can I make it on the same line?

In addition, the position of my navbar when it collapses the 3lines isn't to the right of the screen, how can I make it be positioned on the far right for on mobile views?

HTML

<!-- Navigation bar -->
  <nav class="navbar scrolled-nav navbar-expand-md fixed-top navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Front End Web Developer</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar7">
            <span class="navbar-toggler-icon"></span>
        </button>
    <div class="navbar-collapse collapse justify-content-stretch" id="navbar7">
      <ul class="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 {
    border-bottom: 0.04rem solid #111;
    background-color: ;
    display: none;
}

nav ul li a {
    color: rgb(65, 47, 47);
    font-family: Montserrat, Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    text-transform: uppercase;
}

nav ul li a:hover {
    text-decoration: underline;
    color: #000;
}

.abs-center-x {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

JS

jQuery(document).ready(function($) {
$(document).on("scroll", function() {
    const features_top = $(".features-icons").position().top;
    const top_of_window = $(window).scrollTop();

    if (top_of_window >= features_top) {
        $(".navbar").show();
    } else {
        $(".navbar").hide();
    }
});

});

Here is all my website code, I uploaded it to GitHub

Nate Mallison
@NJM8
Mar 30 2018 15:11
@ldocherty1 I believe you can add align-self-end to that element, that is one of bootstraps flex helpers, also check the size of the element in your inspector, it could be that because it is a nav-brand it makes it a certain size, in which case you need to make the element smaller
kerafyrm02
@kerafyrm02
Mar 30 2018 15:11
uhm
do you have codepen
Liam Docherty
@ldocherty1
Mar 30 2018 15:12
@NJM8 Ok, I'l; have a look thanks.
CamperBot
@camperbot
Mar 30 2018 15:12
ldocherty1 sends brownie points to @njm8 :sparkles: :thumbsup: :sparkles:
:cookie: 373 | @njm8 |http://www.freecodecamp.org/njm8
Nate Mallison
@NJM8
Mar 30 2018 15:12
@ldocherty1 Also check out the bootstrap navbar page, there should be something in there to make it move to the right not the left
Liam Docherty
@ldocherty1
Mar 30 2018 15:12
kerafyrm02
@kerafyrm02
Mar 30 2018 15:12
i can help you fix it instantly
just set it up on codepen
Liam Docherty
@ldocherty1
Mar 30 2018 15:13
ok give me a few mins please
kerafyrm02
@kerafyrm02
Mar 30 2018 15:13
sure
kerafyrm02
@kerafyrm02
Mar 30 2018 15:14
Anyone else need help
im not here long.
Raghav Mundra
@Raghav17
Mar 30 2018 15:17
Hi!
I want my green circle to fit on the other end of the screen. I have tried changing the code but it isn't working, can someone please help?
Nate Mallison
@NJM8
Mar 30 2018 15:18
yeah, lol, why does my website show a double scroll bar if you make it narrow
natethedev.com
kerafyrm02
@kerafyrm02
Mar 30 2018 15:18
how far over Raghav?
one sec nate
ok i guess he's afk
ill help you then
Where do you see the double scrollbar nate?
Raghav Mundra
@Raghav17
Mar 30 2018 15:20
@kerafyrm02 At the other end, leaving a little gap.
Nate Mallison
@NJM8
Mar 30 2018 15:24
@kerafyrm02 when you make the page less than 500px wide or so, just keep making it narrower it'll pop up
I think some element is forcing itself to be larger than the viewport height, but IDK which one
or how, they are all either flexable to allow it to be long or set to 100vh
kerafyrm02
@kerafyrm02
Mar 30 2018 15:28
How come you're using ctx for circles Raghav?
I dont see the scrolllbar nate- are you using chrome?
Ian
@toianw
Mar 30 2018 15:28
@Raghav17 You're missing a closing </canvas> tag in the html and you have a mistake in the js: var cg = document.getElementById("red"); You want to get the element with the id of green.
Nate Mallison
@NJM8
Mar 30 2018 15:32
firefox
wtf, the layout is all screwed up in chrome, maybe I need to clear my cache
Is my name top left on your screen?
kerafyrm02
@kerafyrm02
Mar 30 2018 15:36
there's lots of css issues-
fixed-action-btn {
    position: fixed;
    right: 23px;
    /* bottom: 23px; */
    padding-top: 15px;
    margin-bottom: 0;
    z-index: 997;
}
comment that bottom out
There's lots of unused css commands
im off to work ppl l8r
Nate Mallison
@NJM8
Mar 30 2018 15:38
hmmm. I'm not using that anymore
weird
yeah that's from materializecss. the framework I'm using
Nate Mallison
@NJM8
Mar 30 2018 15:45
seems to only be less than 600 px on firefox and only between 400 px and 600px on chrome. which I have a rule for
Ian
@toianw
Mar 30 2018 15:49

@NJM8 The problem seems to be right there on line 1 of your css. This rule:

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

That overflow-x: hidden on the html seems to be causing the problem

Sorin Ruse
@sorinr
Mar 30 2018 15:49
@Raghav17 what about thinking you need a parent container having same width and height then 4 children divs each with 1/2 width and height of the parent. then starting from top left child going clockwise you just apply some border radius to make exterior borders like a circle?
Nate Mallison
@NJM8
Mar 30 2018 15:56
@toianw I found that my picture sizing for the bottom picture was too big at the smallest size. How does hiding the X overflow cause the vertical viewport scroll? I deleted that line and it doesn't seem to be doing anything for me anyways. I think I was having a horizontal scroll problem earlier and fixed it
I see removing that on the live version works!
Maybe now I can keep my larger picture at the smallest size, as it isn't centered which I don't like
Peter N
@pmnord
Mar 30 2018 15:58

Hey chat, I'm trying to make one of my grid columns align right and the other align left so that everything will be neatly centered. How do I go about this? Here is my CSS for the grid

.form-grid {
display: grid;
grid-template-columns: 40% 40%;
justify-content: center;
grid-row-gap: 1em;
}

Christian
@Neralizer
Mar 30 2018 16:02
can anyone help me with a custom project? trying to create a web app that converts cel to fahr, like the first JS algorithm
not working so far
Tiago Correia
@tiagocorreiaalmeida
Mar 30 2018 16:03
@Neralizer give a look on your console
I htink you forgot to import jquery
Christian
@Neralizer
Mar 30 2018 16:07
you're right! I included, but still not working
Sorin Ruse
@sorinr
Mar 30 2018 16:07
@Neralizer first just add jq lib as @tiagocorreiaalmeida said.second where do you get the input value you want to convert???
Nate Mallison
@NJM8
Mar 30 2018 16:09
@Neralizer Where did this come from? looks like a code challenege somewhere? It is never going to work if you only change code between those lines
Tiago Correia
@tiagocorreiaalmeida
Mar 30 2018 16:10
Sorin Ruse
@sorinr
Mar 30 2018 16:11
@Neralizer add this: alert($('#cel').val()); in js right after you are preventing default to understand what i mean. you need to read that value and then pass it to your convertToF function that should return the temp in F
Christian
@Neralizer
Mar 30 2018 16:11
on the right track, thanks @sorinr @tiagocorreiaalmeida @NJM8
CamperBot
@camperbot
Mar 30 2018 16:11
neralizer sends brownie points to @sorinr and @tiagocorreiaalmeida and @njm8 :sparkles: :thumbsup: :sparkles:
:cookie: 374 | @njm8 |http://www.freecodecamp.org/njm8
:cookie: 510 | @tiagocorreiaalmeida |http://www.freecodecamp.org/tiagocorreiaalmeida
:star2: 1410 | @sorinr |http://www.freecodecamp.org/sorinr
Nate Mallison
@NJM8
Mar 30 2018 16:11
As @sorinr said the input is not being passed to the function, and the output is incorrect as well, $("output").html(convertToF) won't work, you need :
let newTemp = convertToF(cel);
$("output").html(newTemp);
Sorin Ruse
@sorinr
Mar 30 2018 16:13
@Neralizer :+1:
Neil
@NNeil1
Mar 30 2018 16:52
Someone help me target text that isn't inside an element?
"The Combo Pack" isn't in an element, I need to try and style it
Nate Mallison
@NJM8
Mar 30 2018 17:02
@NNeil1 I think everything on the page needs to be in an element. Otherwise it is just random text floating around. Put it in a span or a p with a id or class and use that to style it
Neil
@NNeil1
Mar 30 2018 17:02
Yeah, unfortunately my current site has been built on WordPress, so there is no direct way to go in, and wrap it in an element :(
Stephen James
@sjames1958gm
Mar 30 2018 17:11
@NNeil1 It is in an element - <nav>
Neil
@NNeil1
Mar 30 2018 17:12
@sjames1958gm I know it's inside Nav, but i can't target it with just nav though?
actually, maybe I can if i then over rule all the other spans inside nav
Stephen James
@sjames1958gm
Mar 30 2018 17:12
@NNeil1 You mean you can't target it without affecting it's chidren
@NNeil1 Yes, I think that is your solution
Neil
@NNeil1
Mar 30 2018 17:13
Thanks a lot @sjames1958gm
CamperBot
@camperbot
Mar 30 2018 17:13
nneil1 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9150 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Raghav Mundra
@Raghav17
Mar 30 2018 17:24
Hi!
I have created a "row" class in a div so that I can arrange the circle in a row, but when I am adding class = "col-xs-6" they are changing their size and not behaving correctly, can anybody please help?
alessiochiffi
@alessiochiffi
Mar 30 2018 17:28
Hi!
Dardan Demiri
@dardandmr
Mar 30 2018 17:28
@Raghav17
Anything in a canvas is not responsive
You can make the canvas responsive with bootstrap but not what's inside of the canvas
that should be done with JS
alessiochiffi
@alessiochiffi
Mar 30 2018 17:29
Hi! I am using Redux for other purposes, and I was wondering if is possible using standard React-Navigation with no integration in redux just registering the screens and
Raghav Mundra
@Raghav17
Mar 30 2018 17:29
Ohh, Can you please help me outh with it?
Dardan Demiri
@dardandmr
Mar 30 2018 17:29
@Raghav17 yes
is Canvas a Must in your porject ?
I have done mine without canvas
Raghav Mundra
@Raghav17
Mar 30 2018 17:31
@dardandmr No, It's not. I just thought about learning canvas as I saw many people using it.
Should I use buttons?
Dardan Demiri
@dardandmr
Mar 30 2018 17:31
For your controls yes
like Starting the Game, making it strict and so on
Raghav Mundra
@Raghav17
Mar 30 2018 17:32
And for the color part?
Dardan Demiri
@dardandmr
Mar 30 2018 17:33
the color parts should be empty divs
with a background color
Raghav Mundra
@Raghav17
Mar 30 2018 17:33
Ohh, alright! Thanks bud. :smile:
alessiochiffi
@alessiochiffi
Mar 30 2018 17:33
I am using Redux for other purposes, and I was wondering if is possible using standard React-Navigation with no integration in redux just registering the screens and using this.props.navigation.navigate as a function to navigate
Stephen James
@sjames1958gm
Mar 30 2018 17:34
@NNeil1 :+1:
Gulsvi
@gulsvi
Mar 30 2018 17:36
@Raghav17 Is this more what you're trying to do to get them in a row?
  <div class="gamespace">
    <div class="row">
      <div class="col-xs-6">
        <canvas id="red" class="img-responsive center-block" width="200" height="100"></canvas>
      </div>
      <div class="col-xs-6">
        <canvas id="green" class="img-responsive center-block" width="200" height="100"></canvas>
      </div>
    </div>
  </div>
Dardan Demiri
@dardandmr
Mar 30 2018 17:36
@Raghav17 Thanks for your review ( btw this is how you say thanks ) :P
By mentioning the name :P
CamperBot
@camperbot
Mar 30 2018 17:36
dardandmr sends brownie points to @raghav17 :sparkles: :thumbsup: :sparkles:
:cookie: 298 | @raghav17 |http://www.freecodecamp.org/raghav17
Raghav Mundra
@Raghav17
Mar 30 2018 17:37
@dardandmr Haha, Thanks @dardandmr . Here's a cookie for you. :P
CamperBot
@camperbot
Mar 30 2018 17:37
raghav17 sends brownie points to @dardandmr :sparkles: :thumbsup: :sparkles:
:cookie: 314 | @dardandmr |http://www.freecodecamp.org/dardandmr
Dardan Demiri
@dardandmr
Mar 30 2018 17:40
@Raghav17 That was tastyyy
blob
What is this BUG !!!
I was trying to make a 100daysOfCode challange
:(
Raghav Mundra
@Raghav17
Mar 30 2018 17:42
@dardandmr Checked out your Github, foud your projects very interesting. Followed you on twitter now. :+1:
Dardan Demiri
@dardandmr
Mar 30 2018 17:42
Two algorithms left to claim the Front End Certificate
@Raghav17 Thanks bro
CamperBot
@camperbot
Mar 30 2018 17:42
dardandmr sends brownie points to @raghav17 :sparkles: :thumbsup: :sparkles:
api offline
Stephen James
@sjames1958gm
Mar 30 2018 18:02
@dardandmr :+1:
Dardan Demiri
@dardandmr
Mar 30 2018 18:09
@sjames1958gm what do you think why did this happen
Stephen James
@sjames1958gm
Mar 30 2018 18:09
@dardandmr I have seen if you get 1 or less stars on a day it doesn't count
Dardan Demiri
@dardandmr
Mar 30 2018 18:10
but it was working till now
I had 20 days with just one
and it counted that
this is strange bug and not a good one
:@
Stephen James
@sjames1958gm
Mar 30 2018 18:11
Weird it shows nothing on Thursday - but shows you are already on Saturday?
It shows me on tomorrow as well
Dardan Demiri
@dardandmr
Mar 30 2018 18:11
really strange
Zebralight
@zebralight
Mar 30 2018 18:15
hello. I was wondering why even after setting the margin on all section elements to 0, I'm getting this margin with my img elements sitting flush to the bottom of their parent element instead of being vertically centered even though I set align-items to center using flexbox: https://jsfiddle.net/kg84quja/22/
Stephen James
@sjames1958gm
Mar 30 2018 18:19
@zebralight your images are the full height of your articles so they are centered the space above the images is the bottom margin of the h3
Sorin Ruse
@sorinr
Mar 30 2018 18:23
@zebralight as @sjames1958gm said if you wanna reset something then you should also consider resetting h1->h6 . i observed this is frequently a forgotten thing in css
Zebralight
@zebralight
Mar 30 2018 18:25
@sjames1958gm thanks. setting margin to 0 fixed it!
@sorinr I don't understand what you mean by resetting h1->h6
I'd like to though
Sorin Ruse
@sorinr
Mar 30 2018 18:27
@zebralight reset the browser defaults of all headings starting h1 to h6. :)
Zebralight
@zebralight
Mar 30 2018 18:28
Sorin Ruse
@sorinr
Mar 30 2018 18:29
@zebralight yep
Zebralight
@zebralight
Mar 30 2018 18:29
@sorinr thanks. I'll look into it
CamperBot
@camperbot
Mar 30 2018 18:29
zebralight sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1411 | @sorinr |http://www.freecodecamp.org/sorinr
Sorin Ruse
@sorinr
Mar 30 2018 18:30
@zebralight :+1:
Dardan Demiri
@dardandmr
Mar 30 2018 18:42
@sjames1958gm
freeCodeCamp/freeCodeCamp#16988
alpox
@alpox
Mar 30 2018 18:46
@dardandmr Hey, are you now studying in zurich?
DarkxPunk
@DarkxPunk
Mar 30 2018 18:46
How is everyone today?
Zebralight
@zebralight
Mar 30 2018 19:04
I was looking to resize an element based on the background image and I was wondering if there is a better solution than the one proposed here: https://stackoverflow.com/questions/600743/how-to-get-div-height-to-auto-adjust-to-background-size
Dardan Demiri
@dardandmr
Mar 30 2018 19:06
@alpox Right now I am not in Zurich, but after a month or so I will be there
Why are you from Zurich ?
@DarkxPunk Great
How about you CSS Master
?
James Moore
@James-N-M
Mar 30 2018 19:22
hey guys
so
I made each card in my page have a on click event, and on click I want to select another element within that element
specifically the 2nd child and then grab the text in the second child and put it in another box somewhere
$(document).on('click', '.card-body', function(){
let element = this.children[1];
$("#coinSelected").text = element.text;
// $("#coinSelected").text = this.text;
});
$(document).on('click', '.card-body', function(){ let element = this.children[1]; $("#coinSelected").text = element.text; // $("#coinSelected").text = this.text; });
alpox
@alpox
Mar 30 2018 19:26
@dardandmr Close. I study at the UZH in zurich (oerlikon). I live in andelfingen in direction of schaffhausen though.
DarkxPunk
@DarkxPunk
Mar 30 2018 19:31
@dardandmr Surviving. Very slow work day/
Ken Haduch
@khaduch
Mar 30 2018 20:31
@James-N-M - do you have a URL for this - like a codePen pen??
DarkxPunk
@DarkxPunk
Mar 30 2018 20:35
I got a challenge for yall...
Ken Haduch
@khaduch
Mar 30 2018 20:35
@James-N-M - one thing that you might have a problem with if you have multiple #coinSelected elements is that you cannot have multiple elements with the same ID.
DarkxPunk
@DarkxPunk
Mar 30 2018 20:35
I am awful at grid, but can you take this: https://codepen.io/DarkxPunk/pen/eMEgqJ and convert it from flex to grid?
LydaTech
@lydatech
Mar 30 2018 20:51
@DarkxPunk yoiur tab system breaks on resize. Grid is for 2d layout vs flex's 1d
DarkxPunk
@DarkxPunk
Mar 30 2018 20:52
@lydatech You mean it wraps?
LydaTech
@lydatech
Mar 30 2018 20:52
@DarkxPunk yeah tabs normally doesnt wrap
DarkxPunk
@DarkxPunk
Mar 30 2018 20:52
@lydatech Yeah it is fine if they dont wrap
Ken Haduch
@khaduch
Mar 30 2018 20:59

@James-N-M - well, I did a quick experiment that got something to work, it might be what you're after - I made some guesses. With just a couple tweaks to your code that you showed above, not really sure exactly what your HTML code looks like, but this:

$(document).on("click", ".card-body", function() {
  let element = this.children[1];
  let $coinSelect = $("#coinSelected");
  $coinSelect.text(element.innerText); // $("#coinSelected").text = this.text;
});

works in my test pen. I think that you might have just gotten a little confused in using jQuery and vanilla JS together?

Neil
@NNeil1
Mar 30 2018 21:02
How do I hide Scroll bar in Firefox? Can't use Overflow: none; since that targets everything on my website. I have tried overflow-y: none but that didn't work either. I just need to hide the scroll bar while I edit my menu, as it's getting in the way
James Moore
@James-N-M
Mar 30 2018 21:04
@khaduch Thanks for getting back to me ! i did some stuff and got it to do what i want for now ! thanks brother
CamperBot
@camperbot
Mar 30 2018 21:04
james-n-m sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3837 | @khaduch |http://www.freecodecamp.org/khaduch
James Moore
@James-N-M
Mar 30 2018 21:24
@khaduch it doesnt work on my production environment so ... gonna try your version after all ! lol thanks again <#
CamperBot
@camperbot
Mar 30 2018 21:24
james-n-m sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
api offline
James Moore
@James-N-M
Mar 30 2018 21:24
<3
Ken Haduch
@khaduch
Mar 30 2018 21:26
@James-N-M - okay, give it a shot and if it doesn't work in your production environment, perhaps something else is going on... Like i said, I guessed at some things like the HTML structure that you might have, so I might not have gotten it close enough to what you were using...
Gulsvi
@gulsvi
Mar 30 2018 21:26
@NNeil1 It's overflow-y: hidden;
James Moore
@James-N-M
Mar 30 2018 21:27
@khaduch After a merge of development repository into a production, is it good practise to reset server?
James Moore
@James-N-M
Mar 30 2018 21:33
$(document).on("click", ".card-body", function() { console.log("Heloo this is working"); let element = this.children[1]; let $coinSelect = $("#coinSelected"); $coinSelect.text(element.innerText); // $("#coinSelected").text = this.text; });
$(document).on("click", ".card-body", function() {
console.log("Heloo this is working");
let element = this.children[1];
let $coinSelect = $("#coinSelected");
$coinSelect.text(element.innerText); // $("#coinSelected").text = this.text;
});
anyone know why this is potentially not working in a production environemnt
Gulsvi
@gulsvi
Mar 30 2018 21:34
```js
// enter your code here
```
@James-N-M What errors do you get in the debug console?
James Moore
@James-N-M
Mar 30 2018 21:35
$(document).on("click", ".card-body", function() {
    console.log("Heloo this is working"); 
    let element = this.children[1];
    let $coinSelect = $("#coinSelected");
    $coinSelect.text(element.innerText); // $("#coinSelected").text = this.text;
  });
no errors sadly lol !
Gulsvi
@gulsvi
Mar 30 2018 21:36
I think we may have to see the HTML too - or get a prototype in codepen to debug
James Moore
@James-N-M
Mar 30 2018 21:36
it displays hello this is working in dvelopment
<div class="container">
    <div class="card-group">
        <div class="card">
            <div class="card-body" >
                <h5 class="card-title">Bitcoin</h5>
                <p class="card-text" id="bitcoin"></p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Ethereum</h5>
                <p class="card-text" id="ethereum">Value.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">BitcoinCashInfo</h5>
                <p class="card-text" id="bitcoinch">Value</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">DashCoin</h5>
                <p class="card-text" id="dashcoin">Value</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">LiteCoin</h5>
                <p class="card-text" id="litecoin">Value</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
</div>

    <form method="POST" action="/purchaseTotal">
        @csrf
        <div class="row justify-content-center">
            <div class="form-group col-md-8">
                <label for="customers">Customers</label>
                <select class="form-control" id="customers" name="customer">
                    <option value=""></option>
                    <option value="brady">Brady</option>
                    <option value="jim">Jim</option>
                </select>
            </div>
        </div>

        <div class="row justify-content-center">
            <div class="form-group col-md-8">
                <label for="coins">Coin Purchasing</label>
                <input type="text" id="coinSelected" class="form-control" value="Choose A Coin" name="coinSelected"> 
            </div>
        </div>

        <div class="row justify-content-center">
            <div class="form-group col-md-8">
                <label for="amount">Currency</label>
                <span class="input-group-addon">$</span>
                <input type="number" value="100" name="currency" min="0" step="0.00001" data-number-to-fixed="2" data-number-stepfactor="100" class="form-control currency" />
            </div>
        </div>

        <button type="submit" class="btn btn-primary">Calculate Total Owed</button>
    </form>
</div>
Gulsvi
@gulsvi
Mar 30 2018 21:40
@James-N-M Use .val() for input fields, not .text()
$coinSelect.val(element.innerText);
Ken Haduch
@khaduch
Mar 30 2018 21:41
Are you seeing the "Heloo this is working" at all? Or is that not working, either... Are you loading jquery.js in your code?
Gulsvi
@gulsvi
Mar 30 2018 21:41
I'm not sure why you don't get the "hello this is working" in production though
Ken Haduch
@khaduch
Mar 30 2018 21:43
@James-N-M - Are you loading jquery.js in your code? Could you share a URL for your production environment? (Well, I suppose that you'd be seeing errors in the console if you weren't...)
James Moore
@James-N-M
Mar 30 2018 21:43
I just used used a link
to link jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
in my first app.layout
or w.e its called in blade lol
Ken Haduch
@khaduch
Mar 30 2018 21:44
if it's a good link it would work.
James Moore
@James-N-M
Mar 30 2018 21:44
of ot ??
Ken Haduch
@khaduch
Mar 30 2018 21:45
'twas a fat-fingered entry... :)
James Moore
@James-N-M
Mar 30 2018 21:45
haha
im not seeing hello this is working
sadly
im seeing it in development
but not in production
Ken Haduch
@khaduch
Mar 30 2018 21:47
@James-N-M - I'm seeing "Heloo this is working" when I click in the Bitcoin box. And the others, too...
James Moore
@James-N-M
Mar 30 2018 21:47
LOL
What the
Well your my new offical tester i guess hahahahahhaha
This is my first side project in the history of ever
well one that im getting paid for so alot of this will get scraped but its my first iteration of it, my database is garabage nothing is normalized codes all over the place hahahah my next step is a solid refactor if they decide to pay me for the first iteration
@khaduch Alright so ! its working on dev now
im gonna pull
and after i pull let me know if it works ill leave this chat window open and works means that it throws the value in that text box !
choose a coin text box
Sorry for blowing this up but for anyone out there PICK UP A SIDE PROJECT ! omg I've learned a dumb amount of stuff about actually getting something on the internet, digital ocean is amazing it makes the process easy as fuck I feel like ive learned a ridiculous amount in the last day or so, just about configuring a web server etc. Its really amazing
Ken Haduch
@khaduch
Mar 30 2018 21:52
@James-N-M - well, I made a change on-the-fly in the JS code, changing from ".text" to ".val()" @gulsvi said to do that in a comment above. But it is not getting the name of the coin but the value pushed into the Coin Purchasing box? Oh, but maybe that's what you're looking for?
James Moore
@James-N-M
Mar 30 2018 21:53
@khaduch honestly i just wanted to whip something up really quick
to see if there even somewhat interested
ITs kind of a sketchy deal im in , some guy i know randomly asked me to do something for him for this company so hes essentially the middle man, and is doing nothing I have no idea how much hes making off what im doing for him but,
@khaduch First side project swag
@tiagocorreiaalmeida I wanna code fight you lol but, i dunno i think i have to go through a startup process before i can
Tiago Correia
@tiagocorreiaalmeida
Mar 30 2018 21:55
its quite fast
but for this one I think you will be late :\
but we can do it after
James Moore
@James-N-M
Mar 30 2018 21:55
@tiagocorreiaalmeida its asking me to do some arcade thing nothings clickable
@tiagocorreiaalmeida it just says arcade.... but ill do it at some point and well do one, is it just like acm styled problems and we battle it out to see who does them first/pass tests
"blackbox" tests
Curtis
@CurtisJCamp
Mar 30 2018 21:57
Hey I was wondering if anybody could help me out with my tic tac toe game. I want the computers turn to show up slower after the human player.
James Moore
@James-N-M
Mar 30 2018 21:58
@CurtisJCamp this is cooler than anything ive ever made after 3 years of computer science
LOL
Curtis
@CurtisJCamp
Mar 30 2018 21:58
Lol thanks man
James Moore
@James-N-M
Mar 30 2018 21:58
@CurtisJCamp but i think jquery has a animation thing ???
@CurtisJCamp so maybe animate the X appearing to give it that vibe
Curtis
@CurtisJCamp
Mar 30 2018 21:59
Yeah I think you're talking about the .show and .hide right?
Tiago Correia
@tiagocorreiaalmeida
Mar 30 2018 22:00
yeah @James-N-M have you gotten trough the initial process?
Curtis
@CurtisJCamp
Mar 30 2018 22:00
I am using that for a couple other things, I'm just having trouble integrating that into the eventlistener's
Moisés Man
@moigithub
Mar 30 2018 22:04
settimeout ?? @CurtisJCamp
to make comp turn slow
Curtis
@CurtisJCamp
Mar 30 2018 22:05
I like that, let me try that real quick
James Moore
@James-N-M
Mar 30 2018 22:14
@tiagocorreiaalmeida Im probs not going to today
I'm working on this project, then .... probs gonna post up and wathc a movie then work on school stuff
Curtis
@CurtisJCamp
Mar 30 2018 22:24
Hey I've never used setTimeout before and I'm not exactly sure where to implement it @moigithub
do I use it on the minimax function?
Moisés Man
@moigithub
Mar 30 2018 22:25
setTimeout( ()=>{ alert('hello world')} , 3000);
it will wait 3 seconds.. before poping ' hello world'
( )=> {...}<--- arrow function
above is the same as
setTimeout( 
function (){  
alert('hello world') 
} , 3000);
soo if u wanna slow comp turn.. find the code which trigger comp turn.. and wrap in on a settimeout
setTimeout( /*the function call to make computer turn */ , interval )
Curtis
@CurtisJCamp
Mar 30 2018 22:29
Ohh i got it thanks @moigithub and @James-N-M
CamperBot
@camperbot
Mar 30 2018 22:29
curtisjcamp sends brownie points to @moigithub and @james-n-m :sparkles: :thumbsup: :sparkles:
:cookie: 292 | @james-n-m |http://www.freecodecamp.org/james-n-m
:star2: 3734 | @moigithub |http://www.freecodecamp.org/moigithub
Curtis
@CurtisJCamp
Mar 30 2018 22:34
setTimeout( function bestSpot(){ return minimax(origBoard, aiPlayer).index; } , 3000); am I doing this right?
James Moore
@James-N-M
Mar 30 2018 22:35
http://159.89.121.251/buycoin somebody try this and when you click a card, tell me does it say hello this is workin the console / does it update the coin text box value
Curtis
@CurtisJCamp
Mar 30 2018 22:37
Yep I get a "Helloo this is working" and an updated coin text box value
James Moore
@James-N-M
Mar 30 2018 22:39
im so confused LOL
for what ever reaspm
when i open the link it doesnt work
Do you guys think its like something to do with Cacheing ??
@CurtisJCamp thanks though buddy
CamperBot
@camperbot
Mar 30 2018 22:40
james-n-m sends brownie points to @curtisjcamp :sparkles: :thumbsup: :sparkles:
:cookie: 323 | @curtisjcamp |http://www.freecodecamp.org/curtisjcamp
DarkxPunk
@DarkxPunk
Mar 30 2018 23:03
Anyone can help me with some flex positioning?