These are chat archives for FreeCodeCamp/HelpFrontEnd

21st
Nov 2017
David Hall
@haldav
Nov 21 2017 00:07
Greetings
Randy
@rdavidson3
Nov 21 2017 00:08

Hello everyone, Would anyone be willing to help me out? I am trying to create a 4x4 grid in which one set of boxes will be on the left and the other set will be on the right of the screen, leaving the middle open.

(one set of boxes are stacked on each other on the left of the screen and one set is stacked on the right side of the screen)

David Hall
@haldav
Nov 21 2017 00:10
@rdavidson3 - How many boxes do you want to display?
Randy
@rdavidson3
Nov 21 2017 00:11
hello @haldav I am trying to display 4 in total
I have the codepen if you wish to look over it
David Hall
@haldav
Nov 21 2017 00:12
@rdavidson3 - cool. Lemme check it out.
thanks :)
Shvetal
@verv0eren
Nov 21 2017 00:19
Shouldn't that be called 2 x 2 grid? ,🤔
Anyways you can use bootstrap grid system
Randy
@rdavidson3
Nov 21 2017 00:21
lol. I've been corrected. But, I have been trying to use bootstrap. I cannot get it to do what I need it to
David Hall
@haldav
Nov 21 2017 00:21
@rdavidson3 - for the row div's: use pull-right for the boxes on the right and pull-left for the boxes on the left. That will leave you a space in the middle.
Randy
@rdavidson3
Nov 21 2017 00:24
so simple! >< lol thanks a bunch @haldav
CamperBot
@camperbot
Nov 21 2017 00:24
rdavidson3 sends brownie points to @haldav :sparkles: :thumbsup: :sparkles:
:cookie: 336 | @haldav |http://www.freecodecamp.org/haldav
David Hall
@haldav
Nov 21 2017 00:36
@rdavidson3 - ur welcome
I'm having some issues with the weather app. Has anyone worked it yet?
Adel
@AdelMahjoub
Nov 21 2017 00:44
@haldav what kind of issues
David Hall
@haldav
Nov 21 2017 00:48
I'm having trouble getting the API to work
Adel
@AdelMahjoub
Nov 21 2017 00:48
@haldav what error do you get
@haldav and which api you use
David Hall
@haldav
Nov 21 2017 00:49
I'm logging results to the console to check my work and the city comes back undefined. I'm using https://fcc-weather-api.glitch.me/
The lat and long do return properly
Is there any more documentation than just https://fcc-weather-api.glitch.me/?
Adel
@AdelMahjoub
Nov 21 2017 00:52
@haldav the cicy is under the name property
@haldav if you get name undefined, then I guess nothing more to do in your side
@haldav check with different coords
David Hall
@haldav
Nov 21 2017 00:54
I've been trying the name property, but it still returns as undefined
I'll try differerent coords
Still undefined
David Hall
@haldav
Nov 21 2017 01:08
@AdelMahjoub - Now I'm getting this error: {"error":"Please provide longitude as lon and latitude as lat as numbers/floats."}
Adel
@AdelMahjoub
Nov 21 2017 01:09
@haldav check your code, you must have provided invalid coords
David Hall
@haldav
Nov 21 2017 01:14
@AdelMahjoub - I'm using the Free Code Camp geolocation function to retrieve the coords
Moisés Man
@moigithub
Nov 21 2017 01:22
https://fcc-weather-api.glitch.me/api/current?lat=35&lon=139
thats the example make sure u DONT include the : before the numbers @haldav
David Hall
@haldav
Nov 21 2017 01:32
@moigithub - My variable is: var api = "https://fcc-weather-api.glitch.me/api/current?lat='+ lat + '&lon='+ long + '"
lmilliken
@lmilliken
Nov 21 2017 01:48
hello! I'm wondering if someone can explain to me why the Record Collection challenge keeps on returning the collection: https://www.freecodecamp.org/challenges/record-collection
for example, to test updateRecords(), just enter return "test"; but the console still displays the whole collection
am I missing something?
Ben Hart
@Benjmhart
Nov 21 2017 01:50
@lmilliken - I can't see what you did, only my own solution, link a pastebin or something?
could anyone help me with CSS on this tic tac toe project? having trouble getting bootstrap to let me adjust the height of some column divs and give them borders - the class is .spot
lmilliken
@lmilliken
Nov 21 2017 01:54
@Benjmhart , this is what I'm seeing https://www.screencast.com/t/hD7rl8V7Jt, tried to clear the cookies but no luck
Ben Hart
@Benjmhart
Nov 21 2017 01:54
oops - solved the resize
oh - you want it to return the collection
you just need to add the new record
lmilliken
@lmilliken
Nov 21 2017 01:58
no, I want it to return "test"
but it's still returning the whole collection
Ben Hart
@Benjmhart
Nov 21 2017 02:00
well your little black debugger is just testing the value of collection in this exercise, not the output of your function
so if you really want it to say test, make the collection variable =test
lmilliken
@lmilliken
Nov 21 2017 02:02
this is interesting, it's the first time that I've seen the black debugger not execute a function
do you use another tool/debugger to test your code and confirm your results?
Ben Hart
@Benjmhart
Nov 21 2017 02:04
like - it's executing the function - but it's just checking the object, because that's the test
Sorin Ruse
@sorinr
Nov 21 2017 02:04
@Benjmhart you need your border like: border:2px solid black; instead of border: 20px
lmilliken
@lmilliken
Nov 21 2017 02:04
thanks @Benjmhart !
CamperBot
@camperbot
Nov 21 2017 02:04
lmilliken sends brownie points to @benjmhart :sparkles: :thumbsup: :sparkles:
:cookie: 327 | @benjmhart |http://www.freecodecamp.org/benjmhart
Ben Hart
@Benjmhart
Nov 21 2017 02:05
when I'm doing those algorithm exercises I typically just work with whatever the black debugger is testing, but other tools would be the javascript console in chrome or firefox (using console.log)
@sorinr thanks!
CamperBot
@camperbot
Nov 21 2017 02:05
benjmhart sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1362 | @sorinr |http://www.freecodecamp.org/sorinr
Ben Hart
@Benjmhart
Nov 21 2017 02:22
...more css trouble - anyone know why my overlay is on stuck underneath my bootstrap columns?
Tom
@moT01
Nov 21 2017 02:25
you can change the z-index to pull it to the front
z-index: 1;
Ben Hart
@Benjmhart
Nov 21 2017 03:40
any idea why my setTimeout function just runs the function instantly? (same pen as above) - you need to choose O
oh it didn't go through earlier but thanks @moT01
CamperBot
@camperbot
Nov 21 2017 03:40
benjmhart sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 913 | @mot01 |http://www.freecodecamp.org/mot01
Ben Hart
@Benjmhart
Nov 21 2017 03:44
nvm - got it
help needed
Ken Haduch
@khaduch
Nov 21 2017 04:54
@bannedghost - what is it you are trying to do?
Saad_famin
@saadfamin
Nov 21 2017 08:25
1.JPG
Can anyone help with how I can do that ?
Rajanikant Deshmukh
@aruke
Nov 21 2017 08:35
@saadfamin Can you send the link?
Harut
@harut-g
Nov 21 2017 09:15
@saadfamin white background of body and image in top
Mercy Manrique
@mers89
Nov 21 2017 09:41
Almost done with my tic-tac-toe challenge. Just need minor help on the css buttons. I made my tic-tac-toe board via buttons. The problem is that when they are selected they become a bit larger throwing off the styling of the board. I tried doing a class for hover, highlighted, visited, and active buttons. I tried the same approach for the <a> link thinking it might solve the issue. (actual button in css "btn-medium") https://codepen.io/mers89/pen/aVbNZz
Alfonso Lamadrid
@almdrx
Nov 21 2017 09:58

@mers89 It appears that whenever your text changes (at 100px font-size changing from '#' to 'X' or 'O') is pushing any outer or adjacent element in the row... perhaps css is not the problem there, but a matter of html?

have you considered using some sort of inner wrapper for each of the "grid cells" content and an outer wrapper to hold their position in the grid? Don't know if that is the best approach, but a cleaner structure could def help

Alvaro
@minutazos
Nov 21 2017 10:01
The css thing solved, it was a problem with the ftp....
Onome Sotu
@onomesotu
Nov 21 2017 10:25
Hello all
In my weather app, I have implemented a dynamic background image that changes depending on the weather condition
It works as it should on local build, but when I linked it to github pages, the javascript works alright, but the background image doesn't load
Does this have anything to do with github?
A-J Roos
@Asjas
Nov 21 2017 10:30
No. I myself host my weather app on github pages and the images on github and works as expected. @onomesotu
That's the link, on inspection, it says could not load image
but image load just fine on my computer
A-J Roos
@Asjas
Nov 21 2017 10:32
@onomesotu You need to link to image to https://github.com/user/Project/image-url not user.github.io. The image can't load from there. That's why you get a 404 not found error
Your image urls should point to https://github.com/onomesotu/weather/tree/master/pictures. That is where your images are located
Onome Sotu
@onomesotu
Nov 21 2017 10:34
ah! I see
yes, local build uses file path
now it's on github, the file path will be different i guess
but when you use a normal background picture....you don't have to point the file path like that, why is it different now?
@Asjas
Onome Sotu
@onomesotu
Nov 21 2017 10:40
For example
Here is a css from my portfolio on github,
#main {
    margin: 0 auto;
    height: 100vh;
    color: #DDB853;
    background: url("../img/pressure.jpg") no-repeat center;
    background-size: cover;
    padding-top: 150px;
    font-size: 1.3em !important;
}
the image url is same as what i had on local....why is this different? @Asjas
A-J Roos
@Asjas
Nov 21 2017 10:41
@onomesotu Your filepath for hosting on https://onomesotu.github.io/weather/ for your images will be https://github.com/onomesotu/weather/tree/master/pictures. You need to explicitly tell it to get there images there. Github.io doesn't know ../img/ means https://github.com/onomesotu/weather/tree/master/pictures
Onome Sotu
@onomesotu
Nov 21 2017 10:48
@Asjas Yeah I understand stand that.. what I was asking was in a situation where i used a static background picture.. i did not have to change the image url like my portfolio page for example.. that css up there is still what's on github. So do you have any idea why that worked just fine? or was it because it was static?
A-J Roos
@Asjas
Nov 21 2017 10:49
@onomesotu No the reason is the url for this weather website isn't just https://onomesotu.github.io/ it's https://onomesotu.github.io/weather. You need to calculate that in how you configure your url
Go check the console log and you'll see it's trying to pull fromhttps://onomesotu.github.io/. Which is incorrect. It needs to pull from https://onomesotu.github.io/weather
You need to update the image url to use the weather part of the url
This image url https://onomesotu.github.io/pictures/Clouds.jpg doesn't exist. But https://onomesotu.github.io/weather/pictures/Clouds.jpg does. You need to fix your file path @onomesotu
Onome Sotu
@onomesotu
Nov 21 2017 10:55
@Asjas perfect explanation @Asjas thanks
CamperBot
@camperbot
Nov 21 2017 10:55
onomesotu sends brownie points to @asjas :sparkles: :thumbsup: :sparkles:
:cookie: 298 | @asjas |http://www.freecodecamp.org/asjas
Onome Sotu
@onomesotu
Nov 21 2017 10:55
I don't even have to use the console
You are right with where the image is pulled from
on my portfolio page, the background image pulls from https://onomesotu.github.io/
and it is trying to do the same for my weather app... and thus returns 404.. so i explicitly have to point it to the correct path
A-J Roos
@Asjas
Nov 21 2017 10:57
Correct. The relative path isn't calculating for the weather part of the url
Onome Sotu
@onomesotu
Nov 21 2017 10:57
which is this https://onomesotu.github.io/weather
excellent
Thanks
My thought process was that github will access my files using the exact file path as on local build
Cheers man @Asjas
A-J Roos
@Asjas
Nov 21 2017 10:59
Glad to have helped :)
Onome Sotu
@onomesotu
Nov 21 2017 11:02
Does the size of the image (say it's height for example) have an effect on how it appears as a background image?
for example, if an image has an height less that 1280, say 1100 does the browser compensate for it by stretching it a bit or it doesn't stretch it at all?
Ben Line
@Benwebdev
Nov 21 2017 11:04
Online to help with Frontend for a few hours, just tag me 🤟🏼😊
A-J Roos
@Asjas
Nov 21 2017 11:05
It should. Depends if you set it to cover.
Markus Kiili
@Masd925
Nov 21 2017 11:05
@onomesotu With the CSS background property you can control how the background image is presented https://developer.mozilla.org/en-US/docs/Web/CSS/background
Onome Sotu
@onomesotu
Nov 21 2017 11:08
@Masd925 yes, i did set it to cover, but i have white space still at some different screen width
@Asjas
Ryan
@Ryan-ED
Nov 21 2017 11:14
Hey guys. I'm really struggling with the Twitch TV app. Can anyone tell me what exactly I'm doing wrong? https://codepen.io/RyanED/pen/boOZgO/
Rajanikant Deshmukh
@aruke
Nov 21 2017 11:15
@Ryan-ED Please see https://wind-bow.gomix.me/
It says only few routes are supported
Supported routes are /users/:user, /channels/:channel, and /streams/:stream. /users/login is not supported
Ryan
@Ryan-ED
Nov 21 2017 11:18
@rajanikantdeshmukh do I substitute the :user for the username?
Rajanikant Deshmukh
@aruke
Nov 21 2017 11:18
Yes. and only single username works at a time
CamperBot
@camperbot
Nov 21 2017 11:20
ryan-ed sends brownie points to @okay :sparkles: :thumbsup: :sparkles:
api offline
Ryan
@Ryan-ED
Nov 21 2017 11:20
@rajanikantdeshmukh okay i see. it works now. they didnt explain that very well at all. i've been struggling for days. you can't find any good help for this challenge. thanks!
CamperBot
@camperbot
Nov 21 2017 11:20
ryan-ed sends brownie points to @rajanikantdeshmukh :sparkles: :thumbsup: :sparkles:
:cookie: 301 | @rajanikantdeshmukh |http://www.freecodecamp.org/rajanikantdeshmukh
A-J Roos
@Asjas
Nov 21 2017 11:21
@onomesotu I see the app still isn't displaying images. I can't see what you are seeing
Onome Sotu
@onomesotu
Nov 21 2017 11:21
Rajanikant Deshmukh
@aruke
Nov 21 2017 11:21
Well, use the APIs given on https://wind-bow.gomix.me/ and follow the user stories given in challenge
Onome Sotu
@onomesotu
Nov 21 2017 11:21
how long does it take for changes to be implemented?
A-J Roos
@Asjas
Nov 21 2017 11:22
1 or 2 minutes usually. Mine usually takes that long
Onome Sotu
@onomesotu
Nov 21 2017 11:22
this is almost 15 minutes now :(
Rajanikant Deshmukh
@aruke
Nov 21 2017 11:22
@Ryan-ED I completed twitch API project just today.. Have a look
Ryan
@Ryan-ED
Nov 21 2017 11:23
@rajanikantdeshmukh but then how do other projects show multiple users?
Rajanikant Deshmukh
@aruke
Nov 21 2017 11:24
I asked the same question yesterday.. It seems everyone is showing it but it’s not mentioned in user stories
A-J Roos
@Asjas
Nov 21 2017 11:25
@rajanikantdeshmukh You should be displaying quite more than just 1 user.
@Ryan-ED Why not loop through the array in a for loop generating the html needed to display all the users?
That will work
Rajanikant Deshmukh
@aruke
Nov 21 2017 11:25
I guess then either the example or the user story needs to be updated
Ryan
@Ryan-ED
Nov 21 2017 11:26
@Asjas yeah im on it already haha. but first i have to get the id's before i can get the steams right?
i feel like theres gonna be a nested ajax call here
A-J Roos
@Asjas
Nov 21 2017 11:28
@Ryan-ED Correct. Looking at the example codepen on FCC they loop through the array with foreach and call $getJSON on each element of the array
Ryan
@Ryan-ED
Nov 21 2017 11:29
@Asjas ah i didnt look at the code haha. against the rules
A-J Roos
@Asjas
Nov 21 2017 11:29
I understand. I finished it a while ago. I don't remember how they did it. I myself used the real twich api, but it's a bit trickier as you need to generate api keys and use them
I didn't use https://wind-bow.gomix.me/twitch-api/
But yes. I'll suggest looping through the array with foreach. Then generate the url based on each user in the array and do a $ajax / $getJSON for each foreach.
Ryan
@Ryan-ED
Nov 21 2017 11:31
i wanted to use the new API but then that means exposing my private API key on codepen. not sure if thats a good idea @Asjas
A-J Roos
@Asjas
Nov 21 2017 11:31
No. You can / should use https://wind-bow.gomix.me/twitch-api/. Just loop through the array and it will work as needs be
Onome Sotu
@onomesotu
Nov 21 2017 11:35
@Asjas can you please check now? I already have the correct url but it still won't load :( I am losing my mind already
A-J Roos
@Asjas
Nov 21 2017 11:36
@onomesotu It's updated and no longer throwing a 404 error
But it's not rendering a image. And in the Chrome Developer Tools under Network I see it's pulling two images. Not one.
This url https://github.com/onomesotu/weather/tree/master/pictures/Clouds.jpg is redirecting to https://github.com/onomesotu/weather/blob/master/pictures/Clouds.jpg
Onome Sotu
@onomesotu
Nov 21 2017 11:39
why is that?
any idea? :)
ok, I am going to change that tree to blob and see how it goes
dinesh
@1532j0004kg
Nov 21 2017 11:56
https://codesandbox.io/s/jz9k75zzz3 in this why the font color is not changing
anybody know?
A-J Roos
@Asjas
Nov 21 2017 12:01
@1532j0004kg font-color isn't a valid css property. The correct property to set the color of a font is color
dinesh
@1532j0004kg
Nov 21 2017 12:02
color
still not working ,,, anything i need to add externally?
A-J Roos
@Asjas
Nov 21 2017 12:04
@1532j0004kg I haven't used codesandbox before. So I can't say if it isn't linking. But I used your same HTML & CSS in this jsfiddle https://jsfiddle.net/xrxgc9qp/ and it works
dinesh
@1532j0004kg
Nov 21 2017 12:05
ok i will try that one
that is good editor?
A-J Roos
@Asjas
Nov 21 2017 12:07
@1532j0004kg It's one I use for quick testing. I don't use it at all for projects. I develop on my local machine and host on github.
if you want to use codesandbox you'll have to find out why the style.css isn't being applied. I don't know that website
dinesh
@1532j0004kg
Nov 21 2017 12:11
which is the good editor
i want to work.
A-J Roos
@Asjas
Nov 21 2017 12:11
A good online editor is codepen AFAIK. It's the one I use online
dinesh
@1532j0004kg
Nov 21 2017 12:11
ohh ok
A-J Roos
@Asjas
Nov 21 2017 12:11
But I develop very rarely online.
dinesh
@1532j0004kg
Nov 21 2017 12:11
okkk
Josceline Feng
@JoscelineF
Nov 21 2017 12:32
Hello, could anybody help me find out the bug in the js code below?
$(function () {
function randomColor() {
var rColor1, rColor2,rGradient;
rColor1 ='#' + Math.random().toString(16).slice(2, 8);
rColor2 = '#' + Math.random().toString(16).slice(2, 8);
rGradient = 'linear-gradient(to right,' + rColor1 + ',' + rColor2+')';
return rGradient;
};
$("#new-quote").on("click", function () {
$('body').css('background', 'randomColor()');
});
});
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 21 2017 12:33
@JoscelineF Do you have a codepen for that?
Josceline Feng
@JoscelineF
Nov 21 2017 12:33
sorry, I don't have ....
I wish to change the LINEAR GRADIENT background color of the body when click the button "#new-quote" ...however doesn't work
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 21 2017 12:34
ok, then it will need a little bit longer... ;)
Josceline Feng
@JoscelineF
Nov 21 2017 12:34
body{
background: linear-gradient(to right, #cf31ed,#93f3b7) ;
}
@Otto-AA Thank you so much~~!
CamperBot
@camperbot
Nov 21 2017 12:35
joscelinef sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 394 | @otto-aa |http://www.freecodecamp.org/otto-aa
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 21 2017 12:36
@JoscelineF here $('body').css('background', 'randomColor()'); you pass it the string 'randomColor()', not the output of the function
@JoscelineF When you remove those 's it works: https://codepen.io/A_A/pen/bYvEZa
Josceline Feng
@JoscelineF
Nov 21 2017 12:39
Oh! thanks ~~
seems still not work in my local chrome browser, maybe there's some bug elsewhere, I'll check. Anyway, thanks a lot~~ @Otto-AA
CamperBot
@camperbot
Nov 21 2017 12:41
joscelinef sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
api offline
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 21 2017 12:42
@JoscelineF Good luck :)
Onome Sotu
@onomesotu
Nov 21 2017 12:45
@Asjas I fixed the problem
Actually, the url should't be the location of the image on github...
github has gh-pages agnostic url
so if you do something like /pictures/image.jpg
it automatically replaces it with the gh-page url
So it works now
what do you think? Do you see the white space i talked about?
rscales02
@rscales02
Nov 21 2017 12:52
 $('.game').click(function() {
        var userClick = $(this).attr('id');
        clickSound(userClick);

        clearInterval(repeatDelay);

        console.log(repeatDelay);
        repeatDelay = setInterval(function(){
            console.log('click');
            loseTimer(combination);
        }, dTime);
I am trying to reset this interval with each user click, it seems to just call a new instance of repeatDelay with each call...
Markus Kiili
@Masd925
Nov 21 2017 13:01
@onomesotu Try setting height:100% on both html and body.
A-J Roos
@Asjas
Nov 21 2017 13:05
@onomesotu Your body isn't the full 100vh. If you use the Chrome Developer tools and you hover over the body element you'll see it's the same as the image. That blank space is there because the body isn't taking up the full space
Onome Sotu
@onomesotu
Nov 21 2017 13:17
@Asjas if i set it too 100vh then on mobile, we have the same issue becuase the contents will overflow 100vh and we have white space in the middle
Ivona
@amaranthaST
Nov 21 2017 13:19
Hiii, can somebody please help me with centering my social media links?
I have tried putting margin: 0 auto: and no difference, I know that center-text won't help because of anchor elements but is there any other way except putting manually margins?
here is my pen:
https://codepen.io/amaranthaST/pen/OOgqNx
rscales02
@rscales02
Nov 21 2017 13:30
@amaranthaST you want github centered?
Ivona
@amaranthaST
Nov 21 2017 13:30
@rscales02 yes facebook github and linkedin
Onome Sotu
@onomesotu
Nov 21 2017 13:31
@Masd925 i have changed it, in mobile view the contents over spill the background image
can you please check?
in chrome development tools, the height property of the body is overriden
rscales02
@rscales02
Nov 21 2017 13:36
@amaranthaST your media images don't load for me, so that might be another problem you need to look at...
A-J Roos
@Asjas
Nov 21 2017 13:37
@onomesotu yes the reason it overspills is because it's too large to display in a single mobile page
Onome Sotu
@onomesotu
Nov 21 2017 13:38
but shouldn't there be room for scrolling?
Greg Harrison
@greg-harrison
Nov 21 2017 13:40
Hi everyone! I'm having an issue getting Redux to initialize correctly on a really basic React app that I'm working on. Would someone be able to take a look?
A-J Roos
@Asjas
Nov 21 2017 13:43
@onomesotu Have you tried keeping it as 100vh and setting the mobile query to 100%?
rscales02
@rscales02
Nov 21 2017 13:46
@amaranthaST try margin-left: 50%;
Ivona
@amaranthaST
Nov 21 2017 13:46
@rscales02 ok I will check
rscales02
@rscales02
Nov 21 2017 13:46
in #socmed
Onome Sotu
@onomesotu
Nov 21 2017 13:50
@Asjas what is mobile query?
A-J Roos
@Asjas
Nov 21 2017 13:52
@onomesotu It's called @media mobile queries. You can learn more about it here mdn
Onome Sotu
@onomesotu
Nov 21 2017 13:52
oh media queries
Onome Sotu
@onomesotu
Nov 21 2017 14:08
@Asjas I solved it thanks
CamperBot
@camperbot
Nov 21 2017 14:08
onomesotu sends brownie points to @asjas :sparkles: :thumbsup: :sparkles:
:cookie: 299 | @asjas |http://www.freecodecamp.org/asjas
Onome Sotu
@onomesotu
Nov 21 2017 14:09
i added the property overflow: auto; to the body and html selector
everything seems to be working well now
rscales02
@rscales02
Nov 21 2017 14:48
@amaranthaST did that work for you?
Teo
@Teo03
Nov 21 2017 14:56
Can somone look at my code, I don't know how to position the simon box at the center (https://codepen.io/Teo03/pen/yPvbwY)
Kaz Baig
@kbaig
Nov 21 2017 14:58
@Teo03 Do you mean the whole circle?
rscales02
@rscales02
Nov 21 2017 14:58
use position: absolute; and position: relative;
in parent and child respectively
Kaz Baig
@kbaig
Nov 21 2017 14:59
@Teo03 if you mean the whole .outer-circle, add margin: auto; and hey presto
Teo
@Teo03
Nov 21 2017 15:13
@kbaig @rscales02 thanks guys
CamperBot
@camperbot
Nov 21 2017 15:13
teo03 sends brownie points to @kbaig and @rscales02 :sparkles: :thumbsup: :sparkles:
:cookie: 444 | @kbaig |http://www.freecodecamp.org/kbaig
:cookie: 316 | @rscales02 |http://www.freecodecamp.org/rscales02
my page is not responsive y?
i mean the text.
Kaz Baig
@kbaig
Nov 21 2017 15:34
@1532j0004kg fyi you don't want to use center tags, they're not supported in HTML5 https://www.w3schools.com/tags/tag_center.asp
dinesh
@1532j0004kg
Nov 21 2017 15:52
is not responsive y?
at the time of hovering black background is not wowrking for whole text ?
Kaz Baig
@kbaig
Nov 21 2017 16:07
Not quite sure what you're asking...
dinesh
@1532j0004kg
Nov 21 2017 16:29
see my site, at the time of hovering , black background is not appearing for all...zoom full and see
Kaz Baig
@kbaig
Nov 21 2017 16:30
you mean #1?
dinesh
@1532j0004kg
Nov 21 2017 16:30
zoom the output screen
Kaz Baig
@kbaig
Nov 21 2017 16:30
You want the whole div to be black when you hover on it?
dinesh
@1532j0004kg
Nov 21 2017 16:30
s
Kaz Baig
@kbaig
Nov 21 2017 16:31
what output screens?
dinesh
@1532j0004kg
Nov 21 2017 16:32
i want to make the whole div to black when hovering,
as u said
Kaz Baig
@kbaig
Nov 21 2017 16:32
then add the hover rule to the div, not the children of the div
dinesh
@1532j0004kg
Nov 21 2017 16:33
i want to make it for child only
Kaz Baig
@kbaig
Nov 21 2017 16:33
you just said you want the whole div to be black
dinesh
@1532j0004kg
Nov 21 2017 16:34
zoom my output and check the hover
Kaz Baig
@kbaig
Nov 21 2017 16:34
I don't know what that means
dinesh
@1532j0004kg
Nov 21 2017 16:34
zoom it
Kaz Baig
@kbaig
Nov 21 2017 16:34
zoom what?
in / out of what?
how about you just provide a screenshot or something
dinesh
@1532j0004kg
Nov 21 2017 16:35
output
ok wait
how to screeshot?
by using print or other?
A-J Roos
@Asjas
Nov 21 2017 16:37
@1532j0004kg If you google your OS and how to take a screenshot you should find search results on how to do it
dinesh
@1532j0004kg
Nov 21 2017 16:37
ok
dinesh
@1532j0004kg
Nov 21 2017 16:44
i dont know
i tried but cant able to find
zoom this one and mouseover the options u will see .
Zachary
@Bazill03
Nov 21 2017 17:49

Looking for some help with a JS extension. I'm trying to build branching dialogue and I'm trying to use dialoguejs to do it. In this readme it gives an example on how to set it up using require and npm. I'm not doing that, I've taken the file and attatched it with a script tag. That works find for loading the dialogue files but whenever I try to interact with the dialogue it returns null. The readme shows I need to create a dialogue object with:

var mydialogue = require('dialoguejs');

But I'm not using require. Is there something else I need to use?

Ben Hart
@Benjmhart
Nov 21 2017 17:52
ran into a snag on my tic tac toe AI - https://codepen.io/Benjmhart/pen/qVxyLQ?editors=1111 - can anyone tell me why my options variable on line 161 is coming back undefined after I run it through the checkavl function? (using the test I describe on line 163)
Kaz Baig
@kbaig
Nov 21 2017 17:53
@Bazill03 you can only use require in node
@Bazill03 the file that you added using a script tag, where did you get it from?
Zachary
@Bazill03
Nov 21 2017 17:54
I downloaded it from github.
Kaz Baig
@kbaig
Nov 21 2017 17:55
@Bazill03 which file
or the whole repo?
Zachary
@Bazill03
Nov 21 2017 17:56
dialogue.js in the lib folder
Kaz Baig
@kbaig
Nov 21 2017 18:00
@Bazill03 I think in this case you would prob just refer to it via the Dialogue object. Is that what you're doing?
Do you have a pen or something that we can see the code in
Zachary
@Bazill03
Nov 21 2017 18:03
No, all my codes in my repo. I've tried var dialogue = Dialogue but I'm not sure that's the correct way to do it.
Kaz Baig
@kbaig
Nov 21 2017 18:04
@Bazill03 Here's one issue. If you go down to line 196 of the file, https://github.com/scottbw/dialoguejs/blob/master/lib/dialogue.js, you can see that it depends on a node module
So it's likely not going to work just by pulling the one file in
Unless you're working in node
Zachary
@Bazill03
Nov 21 2017 18:04
I've already corrected that to
Dialogue.load = function(actor, file) {
    console.log(file);
    $.ajax({
        url: file,
        async: true,
        success: function (data){
            Dialogue.parse(actor, data.toString());
        },
        error: function (xhr, status, errorThrown) {
            // handle error
        }
    });
};
Kaz Baig
@kbaig
Nov 21 2017 18:14
@Bazill03 Are you sure the callback is passing the data in the same format in either case
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 21 2017 18:16
@Bazill03 Is the repo on github and can you link to it?
Zachary
@Bazill03
Nov 21 2017 18:16
My repo?
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 21 2017 18:21
@Bazill03 Did you take care that it finished loading the data before trying to access it? (The loading function is asynchrounous)
Zachary
@Bazill03
Nov 21 2017 18:22
I don't think that I did.
Okay, well that's a start.
Kaz Baig
@kbaig
Nov 21 2017 18:23
Is it returning null or undefined
Zachary
@Bazill03
Nov 21 2017 18:23
It's giving me [object Object] now.
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 21 2017 18:24
Have to go now, but good luck with it :)
Zachary
@Bazill03
Nov 21 2017 18:24
@Otto-AA It's working!
Kaz Baig
@kbaig
Nov 21 2017 18:24
oh then maybe look up the difference between fs.readFile and $.ajax to read files
ooooo
nice one!
Zachary
@Bazill03
Nov 21 2017 18:25
Yeah, it's loading the dialogue file at the beginning of the script which wont scale well but it's definitely a start.
Kaz Baig
@kbaig
Nov 21 2017 18:25
What is this for if you don't mind me asking
Zachary
@Bazill03
Nov 21 2017 18:26
I'm making a text-based game.
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 21 2017 18:26
looks cool for now :)
Zachary
@Bazill03
Nov 21 2017 18:27
Yeah it's not all the way there yet. I'm trying to add core features and expand the story from there.
Kaz Baig
@kbaig
Nov 21 2017 18:29
:O
Zachary
@Bazill03
Nov 21 2017 18:30
Yeah, after this is an armor system and a combat system that isn't as insanely boring as what I have now. :p
Amadeusz
@AmekxOne
Nov 21 2017 20:32
Can anyone help me with the Twitch Viewer app, please? Whatever I do, the datatwo JSON is returned with undefined as channel name, instead of using those from the channels variable :X
$(document).ready(function(){    
    var channels = ["imaqtpie", "freecodecamp"];
    for(var i=0;i<channels.length;i++){
        $.getJSON("https://wind-bow.glitch.me/twitch-api/streams/"+channels[i]+"?callback=?",function(data){
            $.getJSON("https://wind-bow.glitch.me/twitch-api/users/"+channels[i]+"?callback=?",function(datatwo){
                console.log(datatwo);    
            });
        });
    }

});
Kaz Baig
@kbaig
Nov 21 2017 20:39
@AmekxOne easy quick fix is to replace for loop with forEach
Reason is that the API call is asynchronous, so by the time the call is made, the loop is over and so i is no longer defined
Amadeusz
@AmekxOne
Nov 21 2017 20:40
@kbaig thank you, I'll try it out immediately!
CamperBot
@camperbot
Nov 21 2017 20:40
amekxone sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 449 | @kbaig |http://www.freecodecamp.org/kbaig
Amadeusz
@AmekxOne
Nov 21 2017 20:42
it works, thanks once again @kbaig
CamperBot
@camperbot
Nov 21 2017 20:42
amekxone sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
api offline
Kaz Baig
@kbaig
Nov 21 2017 20:44
@AmekxOne no problem :)
Mercy Manrique
@mers89
Nov 21 2017 22:00
thanks @alfonsolmdrx ill try to somehow edit the css. Im trying to see what gives the "x" and the "o" its sizing. As well as what is giving the boxes its height size before the game has even began
CamperBot
@camperbot
Nov 21 2017 22:00
mers89 sends brownie points to @alfonsolmdrx :sparkles: :thumbsup: :sparkles:
:cookie: 3 | @alfonsolmdrx |http://www.freecodecamp.org/alfonsolmdrx
Mercy Manrique
@mers89
Nov 21 2017 22:00
@alfonsolmdrx I meant edit the html
Gustavo Santana
@santanaG
Nov 21 2017 22:11
I am looking through MDN and cannot find for the life of me an event that I can attach to an element and be triggered when it is first rendered or inserted into the DOM… any thoughts? I just want an event that will bubble for an element when it first appears onscreen
Gustavo Santana
@santanaG
Nov 21 2017 22:15
target Read only EventTarget The event target (the topmost target in the DOM tree). <— does this not mean that the eventTarget would be static?
Maybe I should have experimented with Load, let me see what I find, brb
Ben Hart
@Benjmhart
Nov 21 2017 22:27
would someone be able to help me on tic tac toe? I'm stuck on this variable that keeps coming back undefined - 161 - the function I'm running is on line 115 - when i console.log the value in the function its fine, but the variable is undefined in the context i need it.
Siddarth Krishnan
@siddarthk123
Nov 21 2017 22:33
hey
is anyone there?
Kaz Baig
@kbaig
Nov 21 2017 22:35
@siddarthk123 you should just ask a question if you have one :)
Siddarth Krishnan
@siddarthk123
Nov 21 2017 22:35
kaz
could you help me out wiith android java programming?
i am stuck on a bug.
Kaz Baig
@kbaig
Nov 21 2017 22:35
This is front end mate
Siddarth Krishnan
@siddarthk123
Nov 21 2017 22:35
i need help fxing it
but do you know java?
Kaz Baig
@kbaig
Nov 21 2017 22:36
...
no
Siddarth Krishnan
@siddarthk123
Nov 21 2017 22:36
can you help me fixc something
though
in android studio
through skype?
Kaz Baig
@kbaig
Nov 21 2017 22:36
I don't know Java friend
Perhaps try the main room
ichad17
@ichad17
Nov 21 2017 22:45
holla, im trying to get a bloody unordered list to float next to a h1 element inside a container thats acting as the top of the website, but the h1 element is getting pushed to the bottom of the container and i cant solve it!
Mercy Manrique
@mers89
Nov 21 2017 23:10
can someone help me as well. I am still stuck on the tic-tac-toe game. When I click on the boardgame it resizes itself than the original styling. I tried inline styling, adding pseudo code for hover effects, editing the css, editing the bootstrap. I cant find whats changing the size of the button once it is clicked. (.btn-medium) Im so close to finishing. https://codepen.io/mers89/pen/aVbNZz
Cameron Pick
@Fullmight
Nov 21 2017 23:25
I think bootstrap is resizing your buttons to fit the text in them
so if you manually set a fixed width and height that will resolve the issue
but I don't know if that is the best solution
Stephen James
@sjames1958gm
Nov 21 2017 23:26
@mers89 You could also use a fixed width font such as courier new
Cameron Pick
@Fullmight
Nov 21 2017 23:26
oh good idea
Christopher Susi
@chrisandsuch
Nov 21 2017 23:37
Anyone wanna give me some feedback on https://codepen.io/chrisandsuch/pen/dZddmV