These are chat archives for FreeCodeCamp/HelpFrontEnd

24th
Oct 2017
Nikolai A Leeds
@nic9075
Oct 24 2017 00:07

hello I have a question about one of the exercises in the front end here is the code
<p>Cat Photos<a href="http://freecatphotoapp.com"></a></p> can someone tell me where the error is with the anchor text?

hello

Tom
@moT01
Oct 24 2017 00:08
@nic9075 i dont see an error
what is it asking for
it probly wants something in the tag
Moisés Man
@moigithub
Oct 24 2017 00:09
<a href="http://freecatphotoapp.com">something here missing</a>
Kaz Baig
@kbaig
Oct 24 2017 00:40
What Atom package should I install for JSX syntax highlighting?
Daniel Combs
@DunderStruck
Oct 24 2017 01:31
I could use a bit of help on the get weather location challenge. I've got it functionally working for the most part (the icon isn't displaying, but it was the other day so that's weird?), but I feel like my code is extremely messy. Any tips on cleaning it up? https://codepen.io/dunderbutt2000/pen/BwJaBO
oh hey the icon is displaying now lol
Henry
@GitHub-Henry
Oct 24 2017 02:04
@DunderStruck straight forward and to the point, looks good to me
Daniel Combs
@DunderStruck
Oct 24 2017 02:09
Yea, I just feel like I used "document.*" too much. Almost made me feel like this lol. https://img.devrant.io/devrant/rant/r_102813_Wx1Vb.jpg
Tom
@moT01
Oct 24 2017 02:35
@DunderStruck i dont get it
isn't that the most efficient way
korzo
@korzo
Oct 24 2017 02:45
@moT01 checked you solution for "Sum All Odd Fibonacci Numbers" sumFibs(75025) and was fairly disappointed
Tom
@moT01
Oct 24 2017 02:46
did i forget to indent my code too?
korzo
@korzo
Oct 24 2017 02:49
too few ifs and indentation
Tom
@moT01
Oct 24 2017 02:54
once in a while i go check out some of those old solutions of mine when im helping someone
wondering how i did it
some of em are pretty bad
Tessa
@TheTessaMurphy
Oct 24 2017 02:58
@DunderStruck , I agree with @GitHub-Henry . Very clear and concise.
Sorin Ruse
@sorinr
Oct 24 2017 03:25
@DunderStruck first, i will try to cache all that document.getElementById parts into variables and use the variables instead
Henry
@GitHub-Henry
Oct 24 2017 03:27
@DunderStruck actually you bring up a good point, when you use document id as often as you do you make JS go out and get the element each time you execute the command. If you do that once, put it in a variable, you could reference the variable and make JS only go out once. It is a good practice. Yeah, what @sorinr said, but @sorinr used fewer words.
Sorin Ruse
@sorinr
Oct 24 2017 03:30
@GitHub-Henry i was too lazy to explain why he needs to do that. glad u did it :) :+1:
Henry
@GitHub-Henry
Oct 24 2017 03:33
@sorinr teamwork
Sorin Ruse
@sorinr
Oct 24 2017 03:33
:)
Gunasai Garapati
@gunasai
Oct 24 2017 03:52
Screen Shot 2017-10-23 at 11.35.01 PM.png
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/styles.css">
  <title>Guna's Portfolio</title>
</head>
<body>
<div class="container">
  <div class="row">
    <img src="./images/yellow-metal-design-decoration.jpg" class="img-fluid">
  </div>
</div><!-- container -->

<script src="scripts/jquery.slim.min.js"></script>
<script src="scripts/popper.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>
</body>
</html>
.container {
  border: 1px red solid;
}
Guys need help with this
I'm trying to fit the image inside the container div, meaning it must span the width of container
But some how I can't get it to be. And also, when I try to add a border just to see the boundary, I don't find the border appearing
Ashwin
@ashwins93
Oct 24 2017 03:59
@gunasai set img's max-width property to 100%
or since you are using bootstrap set the image's class to img-responsive or img-fluid depending on the version of bootstrap
Gunasai Garapati
@gunasai
Oct 24 2017 04:00
@ashwins93 I am using omg-fluid
But doesn’t work
Ashwin
@ashwins93
Oct 24 2017 04:01
sorry i didn't see that, so you are using bootstrap 4?
Gunasai Garapati
@gunasai
Oct 24 2017 04:01
Yes
And also, I was trying to add a border, to debug
But the border doesn’t show up too
Ashwin
@ashwins93
Oct 24 2017 04:02
okay did you try changing the width of the image itself
in the dev tools
Gunasai Garapati
@gunasai
Oct 24 2017 04:03
Yes, but then the image was no longer responsive
Ashwin
@ashwins93
Oct 24 2017 04:06
@gunasai so it changes when you change the width
but when you set max-width it doesn't change
Gunasai Garapati
@gunasai
Oct 24 2017 04:07
Yup
Ashwin
@ashwins93
Oct 24 2017 04:07
can you upload it to codepen?
its just an image i'll try pasting it in codepen myself
gimme a sec
but i don't have the image
is the image available online?
Sorin Ruse
@sorinr
Oct 24 2017 04:09
imgs are always a problem to deal with. try giving that container a background with that image with background-size: cover and so on
Gunasai Garapati
@gunasai
Oct 24 2017 04:10
@sorinr I’ve tried and the image doesn’t show up at all
It’s working on codepen weirdly
I’ve changed the image though
Ashwin
@ashwins93
Oct 24 2017 04:11
try using the same image
That’s weird
Sorin Ruse
@sorinr
Oct 24 2017 04:14
give the url the full path including extention like jpg or what it is
Ashwin
@ashwins93
Oct 24 2017 04:14
@gunasai haha it works fine in codepen
Ashwin
@ashwins93
Oct 24 2017 04:15
did you check the console for any errors in your local setup?
Gunasai Garapati
@gunasai
Oct 24 2017 04:15
That’s the url
I’ll do it now
But now, how do I fill the image inside the div
max-width:100%;
Isn't working
Ashwin
@ashwins93
Oct 24 2017 04:17
Its already filling the div isn't it?
Gunasai Garapati
@gunasai
Oct 24 2017 04:17
Like, I don’t wan’t the whitespace on left and right
Ashwin
@ashwins93
Oct 24 2017 04:20
remove margin
sorry remove padding in container
add class p-0 to the container class element
<body>
  <div class="container p-0">
    <img src="https://static.pexels.com/photos/5836/yellow-metal-design-decoration.jpg" class="img-fluid ">
  </div>
</body>
like this
Gunasai Garapati
@gunasai
Oct 24 2017 04:22
Okay, that works
Thanks 🙂
Ashwin
@ashwins93
Oct 24 2017 04:22
:+1:
Gunasai Garapati
@gunasai
Oct 24 2017 04:23
It still doesn’t work in my local environment
But I’ll try to figure it out
Okay, now I get it. There’s some problem with the atom live-preview
The code was not being updated in the browser
Ashwin
@ashwins93
Oct 24 2017 04:33
you found the bug
Henry
@GitHub-Henry
Oct 24 2017 04:51
@gunasai try atom live reload
alpox
@alpox
Oct 24 2017 07:10
@sorinr i dont exactly remember. Was it maybe because of the http/https issue of codepen?
Or did they want ti provide the right headers for not having to use jsonp?
Yerrapotu Manojkiran
@nani554
Oct 24 2017 07:11
guys need help in google graph
how can i set minimum height to bar lines
vertical bar lines
Alex
@LosAngalex
Oct 24 2017 07:40
(xpost codeReview) Hi all -- I made a portfolio site for myself and I'm having some issues with the mobile view. 1. My containers stack weird on the individual project pages. They should be in an order of "text - image - text- image" but instead it's like "image - text - text - image". Another weird issue is that it scrolls to the side. I'm not sure if I put some extra padding somewhere, but it's on like every page (again, mobile view). the site is uxuialex.com
Tiago Correia
@tiagocorreiaalmeida
Oct 24 2017 08:50
gm @alpox how are you? :D
alpox
@alpox
Oct 24 2017 09:00
@tiagocorreiaalmeida :wave: hio, good, good, and you? :D
Tiago Correia
@tiagocorreiaalmeida
Oct 24 2017 09:02
same :D
Tiago Correia
@tiagocorreiaalmeida
Oct 24 2017 09:09
got aquestion about the procject im building maybe you can point in the right direction ;) we have an api called yelpfusion when called I get some bars back based on a localtion I searched for it can be a city/district/zipcode/country or other, after showing the user the response data the user can set that is going to that bar, my question is how to store this data and how to show it on a new request to the same place, cause at this point it would force for each bar that comes in the api request to make a db request to see if the bar exists there and if so return how many people are going
hope it wasnt confusing
anyway the problem here is the performance
alpox
@alpox
Oct 24 2017 09:12

@tiagocorreiaalmeida I didn't understand this part:

to show it on a new request to the same place

Tiago Correia
@tiagocorreiaalmeida
Oct 24 2017 09:19
imagine after setting you are going to that bar later someone comes and request for a city that contains the bar you said you were going there should be saying that there's 1 person going
just an example
alpox
@alpox
Oct 24 2017 09:21
@tiagocorreiaalmeida Ah well you need a database for that, for sure
And each request will have to ask the database for data
performance is a no-brainer here
Tiago Correia
@tiagocorreiaalmeida
Oct 24 2017 09:22
yeah so the idea is right
will have to set a low limit on the api
like 10
bars that return back
just an example
but yeah I dont think there's any other work around
alpox
@alpox
Oct 24 2017 09:28
@tiagocorreiaalmeida Yea
Spyrantis Theodoros
@thodorisanta
Oct 24 2017 09:43

does this looks good so far ? :P

https://codepen.io/oshikurou/pen/VMORWw

Pascal Clanget
@Gh05d
Oct 24 2017 09:53
Hi guys, would be nice to get some feedback:
https://codepen.io/Gh05d/pen/yzWrzd?editors=0010
Does anybody know how I can pin the table header, so that it is always visible?
Tiago Correia
@tiagocorreiaalmeida
Oct 24 2017 10:02
maybe position fixed
Pascal Clanget
@Gh05d
Oct 24 2017 10:04
no, that fixes the whole page and prevents it from being scrollable.
alteducation
@alteducation
Oct 24 2017 10:05
hi can someone help me with this flexbox navigation bar
the li elements are shrinked when the page is loaded
hovering over them seems to fix it
please enlarge to view desktop view and press run again
Pascal Clanget
@Gh05d
Oct 24 2017 10:14
I fixated the table and the scrolling works, but now the rows are broken:
.table-fixed {
  tbody {
    height: 290px;
    overflow-y: auto;
    width: 100%;
    display: block;
  }

  thead, tr, td, th {
    display: block;
  }

    tbody td, thead > tr> th {
    float: left;
  }
}
Hi Please can somebody help me with the conversion?
Tiago Correia
@tiagocorreiaalmeida
Oct 24 2017 12:36
sure but you made that on one of the first exercises from fcc
Tiago Correia
@tiagocorreiaalmeida
Oct 24 2017 12:41
first you need to delcare your temperature variable on the top
second you can't have your function insidethe showeather function even less inside ajax response you wont be able to access the function on click, just palce it outiside everything and inside the ajax request set the temperature to the value that comes back from there after that only you have to do on click to change its check if the value is c turn to F and otherway around
hope it wasnt confusing
in other words here is your code
var x = document.getElementById("weather");
var temp = document.getElementById("temp");
var scale = 'C';
var temperature= 0;
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showWeather);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}
function showWeather(position) {
    $.getJSON("https://fcc-weather-api.glitch.me/api/current?lat=" + position.coords.latitude + "&lon="+position.coords.longitude,function(a){
      temperature  = a.main.temp;
      x.innerHTML = "<img src='" + a.weather[0].icon + "'></img>" +"<h3><strong>Weather</strong></h3><p>"+ a.weather[0].main +"</p>"+"<h3><strong>Temperature</strong>";
      temp.innerHTML =  temperature;
    });
}

  function changeTemp(){
    if(scale === 'C') {
    scale = 'F';
    temperature = (temperature *1.8) + 32;
    } else {
    scale = 'C';
    temperature = temperature;
  } temp.innerHTML =  temperature;
  }
with what I just said above
now you will have to fix the conversion
that's up to you and gl
Ian Gracia
@iangracia
Oct 24 2017 15:28
someone here?
Lee
@LeeConnelly12
Oct 24 2017 15:28
Yes
Always...
Ian Gracia
@iangracia
Oct 24 2017 15:28
haha
i have a question
Lee
@LeeConnelly12
Oct 24 2017 15:28
Ask away
Disclaimer: I'm not saying I will be able to answer it.
Ian Gracia
@iangracia
Oct 24 2017 15:30

So lets say you have this code:

 $("#button").on("click",()=>{  stop the loop });

for (var i in 1000) { continue the loop }

What happens if i click the button when i = 567? Does it stop immediatly? Or does it have to iterate through to 1000 before it can process other code?

If for example each iteration in the loop takes a second to complete
@LeeConnelly12
Tom
@moT01
Oct 24 2017 15:34
stop the loop
how
Ian Gracia
@iangracia
Oct 24 2017 15:34
okay valid question
for example
Moisés Man
@moigithub
Oct 24 2017 15:34
click is a event handler.. it doesnt fire immediatelly but when u "click"
for-loop is sync
Tom
@moT01
Oct 24 2017 15:35
i would say the code continues
Ian Gracia
@iangracia
Oct 24 2017 15:35
for (var i in 1000) { if a variable is true continue the loop }
if i press the button the variable turns false
when does the loop stop?
huynhmatt
@huynhmatt
Oct 24 2017 15:35
Good morning, folks. I am trying to write a code that downloads files from a URL and throws it into a folder. Right now, it goes to the URL, downloads the file, but deletes and remakes the folder to put in another file and repeats until all files are done. I want it to have all the files in a single folder. I believe the placement of FileOutputStream in the For loop is the cause, but when I put it outside it causes Windows to through a .zip invalid error. Any ideas?
        for (int i = 0; i < address.length; i++) {
            URL url = new URL(address[i]);
            BufferedInputStream bis = new BufferedInputStream(url.openStream());
            FileOutputStream fis = new FileOutputStream(file);
            System.out.println("Downloading from " + address[i]);
            byte[] buffer = new byte[1024];
            int count = 0;
            while ((count = bis.read(buffer, 0, 1024)) != -1) {
                fis.write(buffer, 0, count);
            }
                fis.close();
                bis.close();
        }
Ian Gracia
@iangracia
Oct 24 2017 15:36
@moigithub so it stops immediatly?
Tom
@moT01
Oct 24 2017 15:37
@iangracia my guess is the code will keep looping until you tell it stop - you're telling me your telling the loop to stop - at that point it should stop
CamperBot
@camperbot
Oct 24 2017 15:37
mot01 sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
:cookie: 373 | @iangracia |http://www.freecodecamp.com/iangracia
Ian Gracia
@iangracia
Oct 24 2017 15:37
@moT01 so if i change the variable to false the loops stop immediatly? If a button changes the variable
Moisés Man
@moigithub
Oct 24 2017 15:38
var cont = true; //<--global

 $("#button").on("click",()=>{  cont =false  });

for (var i in 1000) { 
   if(cont===false) break;   //stop the loop
}
alpox
@alpox
Oct 24 2017 15:38
@iangracia no. Events happen asynchronously each cycle of the eventloop. The eventloop of javascript doesnt enter another event evaluation round before all code of the last iteration of the eventloop is processed. This means that the click event handler would in any case be executed after the for loop counted to end
CamperBot
@camperbot
Oct 24 2017 15:38
alpox sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
:cookie: 374 | @iangracia |http://www.freecodecamp.com/iangracia
Ian Gracia
@iangracia
Oct 24 2017 15:39
ok thanks everyone for your help @moigithub @moT01 @alpox
CamperBot
@camperbot
Oct 24 2017 15:39
iangracia sends brownie points to @moigithub and @mot01 and @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 886 | @mot01 |http://www.freecodecamp.com/mot01
:star2: 3693 | @moigithub |http://www.freecodecamp.com/moigithub
:star2: 1389 | @alpox |http://www.freecodecamp.com/alpox
Tom
@moT01
Oct 24 2017 15:41
noted @alpox
Alan Price
@alanpaulprice
Oct 24 2017 15:50
Hey guys, I was wondering if anyone could help me figure out why my tic tac toe AI choses the losing move at the end of a game? https://codepen.io/alanprice/pen/GEvMvb
It works great up until that last choice.
Alan Price
@alanpaulprice
Oct 24 2017 15:55
Even though I've been stuck on this for hours, I think I may have just cracked it .. right after caving and asking for help! haha
I'll be back if it's still broken! ;)
Marko Rajkovic
@marko88ks
Oct 24 2017 16:02
can someone please help me , when i scroll down , my navbar wont change the color! I do exactly the same like one video on youtube and nothing. this is how look`s like my code in all files
Untitled-1.jpg
Tiago Correia
@tiagocorreiaalmeida
Oct 24 2017 16:05
is there a codepen for it ?
alpox
@alpox
Oct 24 2017 16:08
@marko88ks you seem to add the backgroundColor class to elements with type fixed-top. This can only work like this if the navbar has the class fixed-top
Marko Rajkovic
@marko88ks
Oct 24 2017 16:08
@alpox they have that class
alpox
@alpox
Oct 24 2017 16:09
@marko88ks they? There are multiple navbars?
Lee
@LeeConnelly12
Oct 24 2017 16:09
@marko88ks Try putting a space between .navbar and .backgroundColor in your css
Marko Rajkovic
@marko88ks
Oct 24 2017 16:09
no , just one
@alpox
alpox
@alpox
Oct 24 2017 16:10
@LeeConnelly12 better not :D
Tiago Correia
@tiagocorreiaalmeida
Oct 24 2017 16:10
@marko88ks just make an codepen from it
Marko Rajkovic
@marko88ks
Oct 24 2017 16:10
@LeeConnelly12 i try that , still not worrking
Tiago Correia
@tiagocorreiaalmeida
Oct 24 2017 16:10
trhat wont work ofcourse the problem is not related to css styling
alpox
@alpox
Oct 24 2017 16:10
@marko88ks inspect the offset top in the scroll event. It might stay 0 when the navbar is fixed
Tiago Correia
@tiagocorreiaalmeida
Oct 24 2017 16:11
and you did it right if they are both in the same element class
alpox
@alpox
Oct 24 2017 16:11
@marko88ks can you show your html code?
Lee
@LeeConnelly12
Oct 24 2017 16:11
@marko88ks Can you show the html for the nav?
Marko Rajkovic
@marko88ks
Oct 24 2017 16:11
ok just a sec
Tiago Correia
@tiagocorreiaalmeida
Oct 24 2017 16:14
navbar and fixed top are in the same elemtn???
strange the way you writted the js
Lee
@LeeConnelly12
Oct 24 2017 16:14
@marko88ks nvm i'm being an idiot, had a brain fart.
Marko Rajkovic
@marko88ks
Oct 24 2017 16:16
wrong js file ! my mistake http://prntscr.com/h1ghmx
Tiago Correia
@tiagocorreiaalmeida
Oct 24 2017 16:18
here0s a simple example
of it console loging the offset
you probably have some issues with the classes
Petru Alin Gheorghe
@palingheorghe
Oct 24 2017 16:18

Hi guys! I have a small question... Do you know why is this not working..?

playSound(["greenSound", "redSound"]);

    function playSound(playColors){

        intervale = setInterval(function(){
                play(playColors);
        },2000);
    }

    function play(moves){
        roundsPlayed++;
        ion.sound.play(moves[roundsPlayed]);
        if(roundsPlayed == rounds){
            roundsPlayed = 0;
            clearInterval(intervale);
        }
    }

ion.sound.play - is the play function from a library I'm using, this works fine, the problem is my function is not playing the sound at the interval I want. First you hear a beep then u hear 2 beeps at the same time and it stops.
I have a roundsPlayed variable declared globally.

Marko Rajkovic
@marko88ks
Oct 24 2017 16:20
@tiagocorreiaalmeida ok tnx anyway , i look again , to find a mistake
CamperBot
@camperbot
Oct 24 2017 16:20
marko88ks sends brownie points to @tiagocorreiaalmeida :sparkles: :thumbsup: :sparkles:
:cookie: 405 | @tiagocorreiaalmeida |http://www.freecodecamp.com/tiagocorreiaalmeida
Lee
@LeeConnelly12
Oct 24 2017 16:22
@palingheorghe What's the value of roundsPlayed before play is called?
0?
Petru Alin Gheorghe
@palingheorghe
Oct 24 2017 16:23
@LeeConnelly12 roundsPlayed is initialized with 0
Lee
@LeeConnelly12
Oct 24 2017 16:25
@palingheorghe Play the sound in play before you increment roundsPlayed
Petru Alin Gheorghe
@palingheorghe
Oct 24 2017 16:26
wow you're totally right!
Thanks @LeeConnelly12 !
CamperBot
@camperbot
Oct 24 2017 16:26
palingheorghe sends brownie points to @leeconnelly12 :sparkles: :thumbsup: :sparkles:
:cookie: 129 | @leeconnelly12 |http://www.freecodecamp.com/leeconnelly12
Petru Alin Gheorghe
@palingheorghe
Oct 24 2017 16:27
but why was this happening though
Tiago Correia
@tiagocorreiaalmeida
Oct 24 2017 16:28
@marko88ks the only problem I can think of its something related to the classes
check if the class is really added if so
its a css issue
cause navbar.backgroundcolor
wont work probably
since there's a few calsses before the backgroundcolor in the element
but check step by step
Marko Rajkovic
@marko88ks
Oct 24 2017 16:30
@tiagocorreiaalmeida i check everthing , i don now where else to look . I cant belive , this is few lines of code and I cant figure out where is the problem
alpox
@alpox
Oct 24 2017 16:34
@marko88ks I made a very simple test - if you didn't mess up classes, it should work:
https://codepen.io/alpox/pen/gGNgoM
@marko88ks If you use $(".navbar").addClass("backgroundColor") ofc.
Marko Rajkovic
@marko88ks
Oct 24 2017 16:35
@alpox ok man , i try that now , thx
CamperBot
@camperbot
Oct 24 2017 16:35
marko88ks sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1390 | @alpox |http://www.freecodecamp.com/alpox
mbpiner
@mbpiner
Oct 24 2017 16:43
Hi, can someone explain this JS scope problem I'm having?
Marko Rajkovic
@marko88ks
Oct 24 2017 16:45
@alpox can you look this https://codepen.io/pen/
alpox
@alpox
Oct 24 2017 16:46
@marko88ks You gotta save :D i see an empty pen
Ashwin
@ashwins93
Oct 24 2017 16:46
^^
XD
Lee
@LeeConnelly12
Oct 24 2017 16:48
@marko88ks Sure, post the code
mbpiner
@mbpiner
Oct 24 2017 16:50

`
var a = [];
var c = [2,2,2];
var b = 0;
function doStuff(){
a = c.map(function(x){
b = x;
});
console.log(b);
}
doStuff();


var lat = 0;
function getLocation(){
navigator.geolocation.getCurrentPosition(function(pos) {
lat = pos.coords.latitude
});
console.log(lat);
}
getLocation();
`

ooops :worried:
alpox
@alpox
Oct 24 2017 16:50
@mbpiner Thats not a scoping problem, thats an asynchronous execution problem
Lee
@LeeConnelly12
Oct 24 2017 16:51
you should use "` " at the top and "```" at the bottom
alpox
@alpox
Oct 24 2017 16:51
In the 1. case, your function doStuff executes synchronously. In the 2. case, getLocation - specifically, getCurrentPosition works asynchronously. This means, that latwill be set AFTER your console.log already executed.
Lee
@LeeConnelly12
Oct 24 2017 16:51
use 3 ticks.
mbpiner
@mbpiner
Oct 24 2017 16:52
@LeeConnelly12 Got it about the ticks. thx
CamperBot
@camperbot
Oct 24 2017 16:52
mbpiner sends brownie points to @leeconnelly12 :sparkles: :thumbsup: :sparkles:
:cookie: 130 | @leeconnelly12 |http://www.freecodecamp.com/leeconnelly12
mbpiner
@mbpiner
Oct 24 2017 16:53
@alpox Ahh I saw a stackoverflow post about that while i was trying to figure it out.
So I need to use a callback or a promise to put the latitude and longitude inside a global variable I can move around? Whats the simplest way to do that? Thx
CamperBot
@camperbot
Oct 24 2017 16:53
mbpiner sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1391 | @alpox |http://www.freecodecamp.com/alpox
mbpiner
@mbpiner
Oct 24 2017 16:56
Basically Im doing the weather project and I decided to add functionality beyond displaying the local weather that will allow someone to also type in a different location, and pull the Lat/Long from googles geocoding API and then make a weather api call for that given location
alpox
@alpox
Oct 24 2017 16:57
@mbpiner You already have a callback. What you have to do is to run the rest of the code after the callback came back - and after you set the variable. So you have to call the additional functions from the callback you gave to getCurrentLocation
Marko Rajkovic
@marko88ks
Oct 24 2017 17:00
@alpox do you see the problem?
alpox
@alpox
Oct 24 2017 17:01

@marko88ks Very funny (not) thing: your overflow-x: hidden; in

body,html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

Blocks the jquery scroll event. It never gets called.
If you take that one out (overflow-x: hidden) it works.

mbpiner
@mbpiner
Oct 24 2017 17:01
@alpox Sorry, you mean getCurrentPosition? Theres that and getLocation in the code
Ok yea thats the only one with the callback
alpox
@alpox
Oct 24 2017 17:02
@mbpiner getCurrentPosition. That is the one which works asynchronously. Ofc. you can add another callback to getLocation - to be called after getLocation fully finished
Marko Rajkovic
@marko88ks
Oct 24 2017 17:04
@alpox thanks a lot man , just one more question : how to turn off overflow-x?
CamperBot
@camperbot
Oct 24 2017 17:04
marko88ks sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
api offline
alpox
@alpox
Oct 24 2017 17:05
@marko88ks Well you don't turn it off. You just care for it not to happen - that all elements stay in range
So that by default no overflow happens
alteducation
@alteducation
Oct 24 2017 17:05
@alpox could you help me with a flexbox issue
Marko Rajkovic
@marko88ks
Oct 24 2017 17:05
@alpox ok man
alpox
@alpox
Oct 24 2017 17:06
@marko88ks There is as example an image which goes out on the right side. You'd have to bring it fully in range
@alteducation Maybe :D
alteducation
@alteducation
Oct 24 2017 17:09
@alpox i used flexbox to create a navbar here is it in action https://forum.alternativeeducation.in/. the issue when the page is loaded the navbar appears convoluted and when i hover my mouse over the resources dropdown it gets fixed. here is the same code on jsfiddle https://jsfiddle.net/siliconchild/1rt5q0xn/3/
Ashwin
@ashwins93
Oct 24 2017 17:10
@alteducation It gets fixed on other pages
on the home page its always like that
Marko Rajkovic
@marko88ks
Oct 24 2017 17:10
@alpox sorry man , i am so boring .. can you tell me how to change the colors of navabar when the nav change the section , one color in section1 , other color in section2 etc :)
Ashwin
@ashwins93
Oct 24 2017 17:11
i mean on the forum.alternativeeucation.in @alteducation
alteducation
@alteducation
Oct 24 2017 17:11
@ashwins93 after the inital hovering of mouse it seems to be fine
Ashwin
@ashwins93
Oct 24 2017 17:11
in my browser it reamains the same even on hovering
alteducation
@alteducation
Oct 24 2017 17:12
@ashwins93 im on chrome
Ashwin
@ashwins93
Oct 24 2017 17:12
I'm using firefox
alteducation
@alteducation
Oct 24 2017 17:12
@ashwins93 hover over the resources dropdown
Ashwin
@ashwins93
Oct 24 2017 17:12
yeah i'm hovering
unless i click to go to a different page the navbar stays that way
since you are using the same navbar on all pages why don't you copy paste the navbar code from the other page
you seem to be changing only the background color of the forum discussion button
the links remain the same
alteducation
@alteducation
Oct 24 2017 17:14
The Navbar on the other pages are based on bootstrap. I'm trying to move away from bootstrap, moreover the forum css interferes with bootstrap.
Ashwin
@ashwins93
Oct 24 2017 17:15
@alteducation You seem to be using Materialize
Naaman Saif
@Naaman-Saif
Oct 24 2017 17:16
@tiagocorreiaalmeida THANK YOU SO MUCH <3 <3 I have been stuck on this challenge since months <3
CamperBot
@camperbot
Oct 24 2017 17:16
forlenza sends brownie points to @tiagocorreiaalmeida :sparkles: :thumbsup: :sparkles:
:cookie: 406 | @tiagocorreiaalmeida |http://www.freecodecamp.com/tiagocorreiaalmeida
alpox
@alpox
Oct 24 2017 17:17
@alteducation Try:
nav a {
    white-space: nowrap;
}
Ashwin
@ashwins93
Oct 24 2017 17:19

The Navbar on the other pages are based on bootstrap. I'm trying to move away from bootstrap, moreover the forum css interferes with bootstrap.

you have problems using bootstrap?

alteducation
@alteducation
Oct 24 2017 17:20
@alpox still having the issue
Ashwin
@ashwins93
Oct 24 2017 17:21
@alteducation I'm getting a lot of errors on the console
mbpiner
@mbpiner
Oct 24 2017 17:21
@alpox
`
function getLocation(callback){
navigator.geolocation.getCurrentPosition(function(pos) {
callback(pos.coords.latitude)
//long = pos.coords.longitude;
});
}
getLocation( result => { console.log(result); });
```
Ashwin
@ashwins93
Oct 24 2017 17:21
@alteducation -moz- specific errors
mbpiner
@mbpiner
Oct 24 2017 17:22
@alpox Figured it out :smile: thank you so much haha been going nuts over that for HOURS
CamperBot
@camperbot
Oct 24 2017 17:22
mbpiner sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
api offline
Lee
@LeeConnelly12
Oct 24 2017 17:22
rip camperBot?
ty @camperbot
alpox
@alpox
Oct 24 2017 17:23
@mbpiner nice :D
alteducation
@alteducation
Oct 24 2017 17:24
@ashwins93 i'm using bootstrap 3.3 and it uses floats and clears. i have to fiddle with those when i make edits. I just thing flexbox is much simpler. Also i dont use bootstrap that much, so its better to remove it and make the site more lite weight. There is materialize too on the site, all these were used when i started making webpages as i didn't knew to create styles on my own without relying on frameworks. I'm trying to get rid of all frameworks and go vanilla :)
Ashwin
@ashwins93
Oct 24 2017 17:25
@alteducation going vanilla is fine, but you gotta make all those rules bootstrap or materialize makes to get the same effect
i just saw what rules are affecting the nav of materialize there are a whole bunch of rules
Martialis39
@Martialis39
Oct 24 2017 17:26
Guys I need help. I am exhausted. I know CSS and HTML. But I cannot build sites
it just ... doesnt work together : D
Ashwin
@ashwins93
Oct 24 2017 17:26
they have some padding set up @alteducationation
Martialis39
@Martialis39
Oct 24 2017 17:26
I need some inspiration
or some like advanced CSS tutorials to understand why and how these pieces are put together
alteducation
@alteducation
Oct 24 2017 17:26
@ashwins93 here it's more a necessity, The forum is powered by disocurse and if I use bootstrap then it interferes with the forum styling .
Ashwin
@ashwins93
Oct 24 2017 17:26
@Martialis39 lol what kind of inspiration do you want? may be some animations?
Martialis39
@Martialis39
Oct 24 2017 17:26
Help!! I implore you!
No just basic layout stuff
I was going to do a simple site for my friends business
no back at all, just a presence on the web
and I am stumped
alteducation
@alteducation
Oct 24 2017 17:27
@Martialis39 download free html templates and fiddle with them, then try to build it. when to get stuck refer the source code
Ashwin
@ashwins93
Oct 24 2017 17:28
@alteducation first off i find that, the materialize nav a s are set to display block
but yours are still inline i believe
they don't have padding or margin
while the bootstrap/materialize ones have
alpox
@alpox
Oct 24 2017 17:29
@alteducation thats really a wtf-css moment again :D
alteducation
@alteducation
Oct 24 2017 17:29
@ashwins93 the issue is present here https://jsfiddle.net/siliconchild/1rt5q0xn/3/ no framerworks are used here
@alpox yeah totaly cluless, trying to come up with a solution since morning
Ashwin
@ashwins93
Oct 24 2017 17:30
no seriously you should see the code inspector
the bootstrap is making a lot of rules for the nav, i was surprised there is so much involved
alteducation
@alteducation
Oct 24 2017 17:32
@ashwins93 the nav on the website apart from the forum page is pure bootstrap, only the one on the forum page is based on flexbox
Ashwin
@ashwins93
Oct 24 2017 17:32
@alteducation that is evidently visible
lol
okay now i fixed something
how do i share it with you again?
alteducation
@alteducation
Oct 24 2017 17:34
could you use the jsfiddle link to try it
i made changes
i don't know if this link saves that i haven't used jsfiddle before
nav{

    font-family:'Open Sans',sans-serif;

    width:100%;

    background-color:#fff;
    border-bottom:1px solid #e7e7e7;
}

.navigation{
    display:flex;
    max-width:1120px;
    width:95%;
    margin: 0 auto;
}
#navlogo{
    font-family:'Dosis',sans-serif;
    font-weight:700;
    color:#5FCF80;
    font-size:25px;
    margin:20px 10px;
    text-transform:uppercase;

    justify-content:flex-start;
}
#navlogo span{
    font-weight:100;
}

nav ul{
    margin:0;
    justify-content:flex-end;
    display:flex;
    list-style-type:none;
    width:100%;

}
nav li{
    position: relative;
    margin: 1% 1%;

    text-align:left;


}
.fa-chevron-down{
    color: #717f86;
    font-size: .8rem;
}
nav a{
    color: #717f86;
    font-weight:700;
    text-decoration:none;
    display: block;
    margin:20px 10px;
}
nav a:visited{
    color: #717f86;
}
nav a:hover{
    color: #5FCF80;

}

.hmburger{
    font-size:2em;
    cursor:pointer;
    padding:15px;
    display:block;
    justify-content:flex-end;
}


#toggle{
    display:none;
}
.nav-dropdown ul{
    display:none;
    padding: 0;
    position:absolute;
    top: 100%;
    left:0;
    flex-direction:column;
    border: 1px solid rgba(0,0,0,.15);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    font-size: .9rem;
    width: 100%;
    background-color: #fff;
    z-index:9999;
}
.nav-dropdown:hover ul{
 display:flex;


}
.nav-dropdown:hover{
  background-color:#e7e7e7;
}
.nav-dropdown li{
}

#hg-button{

    border: 1px solid #5fcf80;
    border-radius:25px;
    color: #5fcf80;
}
#hg-button-text{
    color: #5fcf80;
}



@media (min-width: 991px){
    .hmburger{
        display: none;
    }
}

@media (max-width: 991px) {
    nav ul{
        justify-content:center;
        width:100%;
        flex-direction:column;
        text-align:center;
    }
    .navigation{
        flex-wrap:wrap;
        justify-content: space-between;

    }
    .nav-dropdown li{
      padding:1%;
    }
    #navlogo{
        font-size:24px;
    }
    .menu{
        height:0;
        overflow:hidden;
    }
    #toggle:checked + .menu{
        height:100%;
    }
}
i changed only the CSS
alteducation
@alteducation
Oct 24 2017 17:35
@ashwins93 wow it works. what did you do bro :fire:
Ashwin
@ashwins93
Oct 24 2017 17:36
@alteducation Bootstrap to the rescue
i just read the bootstrap source code and made the same rules
also i found that your anchor tags were getting their heights from the logo
alteducation
@alteducation
Oct 24 2017 17:36
@ashwins93 haha, can you tell me what specifically was causing the issue?
Ashwin
@ashwins93
Oct 24 2017 17:37
@alteducation the nav buttons weren't of the same height
the logo was taller than other buttons
so it caused the text of other buttons to stick to the baseline
kinda happens in a spreadsheet all the time
so i changed the anchor tags to have a height of 100%
then i remembered anchor tags are inline display items so they can't have a height parameter so i changed them to block level items (could have been inline block)
alteducation
@alteducation
Oct 24 2017 17:38
@ashwins93 wow, thanks i wouldn't have figured that out. thanks a tonn!!
CamperBot
@camperbot
Oct 24 2017 17:38
alteducation sends brownie points to @ashwins93 :sparkles: :thumbsup: :sparkles:
:cookie: 393 | @ashwins93 |http://www.freecodecamp.com/ashwins93
Ashwin
@ashwins93
Oct 24 2017 17:38
@alteducation and then i gave the same margin you gave for the navlogo by copy pasting the rules
The code inspector makes our lives really easy
alteducation
@alteducation
Oct 24 2017 17:41
@ashwins93 https://forum.alternativeeducation.in/ it appears like this now
Ashwin
@ashwins93
Oct 24 2017 17:41
haha
so we need to reconcile between jsfiddle and the actual site
alteducation
@alteducation
Oct 24 2017 17:44
@ashwins93 on jsfiddle the i tag for the drop down is no threre. I think its causing the issue
@ashwins93 not loaded font awesome on jsfiddle
@ashwins93 display inline block fixes that
Ashwin
@ashwins93
Oct 24 2017 17:45
Great!
alteducation
@alteducation
Oct 24 2017 17:55
@ashwins93 if i add a padding to the li element it goes back to being the old way, i need the padding to make the gray hover color on resources li drop down look complete
Ashwin
@ashwins93
Oct 24 2017 18:04
i don't understand what effect you are aiming at
how can you color padding alone?
you could color the border
alteducation
@alteducation
Oct 24 2017 18:07
@ashwins93 i am trying to get the gray color to cover both the resources text and the down arrow i tag fully
Lee
@LeeConnelly12
Oct 24 2017 18:13
@alteducation try something like this?
body > nav > div > ul > li.nav-dropdown > a:hover body > nav > div > ul > li.nav-dropdown > ul {
           background-color: #717f86;
      }
alteducation
@alteducation
Oct 24 2017 18:14
@LeeConnelly12 bro why are you using all these selectors? i cannot compherend this :smile:
Lee
@LeeConnelly12
Oct 24 2017 18:17
@alteducation I just copied them from your site
Ashwin
@ashwins93
Oct 24 2017 18:18
lol to get more specificity
Lee
@LeeConnelly12
Oct 24 2017 18:19
@ashwins93 I just tested it, this works (kind of)
body > nav > div > ul > li.nav-dropdown:hover ul {
    background-color: grey
}
May need to change the z-index on the text inside your li's tho
Ashwin
@ashwins93
Oct 24 2017 18:19
an achor tag (when hovered) which is a descendant of li with a class of nav-dropdown which is a descendant of ul which is a descendant of div which is a descendant of nav which is a descendant of body
thats what the selector roughly means
AND which is also a ul
Lee
@LeeConnelly12
Oct 24 2017 18:20
lol
alteducation
@alteducation
Oct 24 2017 18:25
@LeeConnelly12 sorry. I was not talking about the drop-down, but the resources text and the arrow i tag, it has a grey background color but it cuts of making it look artificial. I'm trying to get the grey background to stretch beyond the dropdown to the right a little more
linkin-park
@linkin-park
Oct 24 2017 18:30
the hardest part of being developer is reading other people code and mind.
and always being professional
Ashwin
@ashwins93
Oct 24 2017 18:31
@linkin-park i didn't realize developers were supposed to be mind readers
lol
linkin-park
@linkin-park
Oct 24 2017 18:31
yes indeed :)
Barbara Pentoney
@flyfishingbarbara
Oct 24 2017 18:31
hi all! help plz-how can I make the caption/next and prev icons and slide bars show no matter how small I have display/image....??https://codepen.io/flyfishingbarbara/pen/yzQbeQ
linkin-park
@linkin-park
Oct 24 2017 18:32
you wont have any clue why he / she wrote the code like that
and there is always politics
Barbara Pentoney
@flyfishingbarbara
Oct 24 2017 18:33
is @MCTwoDigitZero around...?
Tiago Correia
@tiagocorreiaalmeida
Oct 24 2017 18:35
they both show?
I got the screen at 350px or something like that
image.png
or maybe I got the ide wrong
Lee
@LeeConnelly12
Oct 24 2017 18:36
@alteducation I added padding 0 1% to your nav li's and it looks a bit better
nav li {
    position: relative;
    margin: 1% 1%;
    text-align: left;
    padding: 0px 1%;
}
Barbara Pentoney
@flyfishingbarbara
Oct 24 2017 18:38
@tiagocorreiaalmeida yah, but now trying making it wider and 'shorter'...
Lee
@LeeConnelly12
Oct 24 2017 18:38
@flyfishingbarbara What's wrong with it?
seems fine
Tiago Correia
@tiagocorreiaalmeida
Oct 24 2017 18:39
@flyfishingbarbara the icons size?
next and previous?
Barbara Pentoney
@flyfishingbarbara
Oct 24 2017 18:39
@tiagocorreiaalmeida they don't show up right...?
Tiago Correia
@tiagocorreiaalmeida
Oct 24 2017 18:40
they do hum
in what size are you checking?
Barbara Pentoney
@flyfishingbarbara
Oct 24 2017 18:40
how do I 'screen shot'..ill show ya
Tiago Correia
@tiagocorreiaalmeida
Oct 24 2017 18:40
print key
and then paste here
Barbara Pentoney
@flyfishingbarbara
Oct 24 2017 18:41
control -p..?
Lee
@LeeConnelly12
Oct 24 2017 18:41
image.png
press alt + prt sc key
next to f12
Barbara Pentoney
@flyfishingbarbara
Oct 24 2017 18:44
@LeeConnelly12 ....did that and they control v and nothing...
Tiago Correia
@tiagocorreiaalmeida
Oct 24 2017 18:45
when you resize your window do you scroll down or expect the icons to be on top?
cause they are at the midle of the img
what you might want to do is resize
the piocture
or in this cause the slider hiehgt or something like that
Barbara Pentoney
@flyfishingbarbara
Oct 24 2017 18:51
@tiagocorreiaalmeida when it's about 1000px wide and ie a couple of inches long I only see ie green from the leaf-I don't see any caption/icons etc....
Lee
@LeeConnelly12
Oct 24 2017 18:53
image.png
this is 1000px wide
Tiago Correia
@tiagocorreiaalmeida
Oct 24 2017 18:53
@flyfishingbarbara if you scroll bellow they are there
Lee
@LeeConnelly12
Oct 24 2017 18:53
image.png
this is < 1000px
Barbara Pentoney
@flyfishingbarbara
Oct 24 2017 18:55
@tiagocorreiaalmeida yes, I know...I want them to show no matter what size window is without having to scroll like this pen. https://codepen.io/Em-An/pen/XgOMmY
see the difference..?
Petru Alin Gheorghe
@palingheorghe
Oct 24 2017 18:57
@LeeConnelly12 u're still here?
Tiago Correia
@tiagocorreiaalmeida
Oct 24 2017 18:58
@flyfishingbarbara you need to resize the images
in order to that happens
Barbara Pentoney
@flyfishingbarbara
Oct 24 2017 18:58
@LeeConnelly12 thnks for the prt scr info
Tiago Correia
@tiagocorreiaalmeida
Oct 24 2017 18:58
at this point they are quite big
Barbara Pentoney
@flyfishingbarbara
Oct 24 2017 18:59
@tiagocorreiaalmeida thnks
Tiago Correia
@tiagocorreiaalmeida
Oct 24 2017 19:00
tht'as really the only "issue" the images size
Lee
@LeeConnelly12
Oct 24 2017 19:01
@palingheorghe Yeah whats up
Petru Alin Gheorghe
@palingheorghe
Oct 24 2017 19:01

I again have a problem with the setInterval function... I really hate this one.....

    aiTurn(["greenSound", "redSound"]);


    function aiTurn(playColors){

        intervale = setInterval(function(){
                play(playColors);
        },1500);
    }

    function play(moves){
        ion.sound.play(moves[roundsPlayed]); //moves should be globally 
        roundsPlayed++;
        console.log(roundsPlayed);
        if(roundsPlayed == rounds){        
            clearInterval(intervale);
            roundsPlayed = 0;
            huTurn = true;
            turnColorsOnOff();
        }

    }



    function turnColorsOnOff(){
        if(huTurn){
            let color;
            let turnMoves = [];
            /*
            $(".button-size").mouseup(function(){
                $(this).css("background-color", color);
            }).mousedown(function(){
                color = $(this).css("background-color");
                $(this).css("background-color",$(this).attr("id"));
            });
            */
            $(".button-size").bind("mouseup touchend", function(){
                    $(this).css("background-color", color);
            });
            $(".button-size").bind("mousedown touchstart", function(){

                    color = $(this).css("background-color");
                    ion.sound.stop($(this).attr("id") + "Sound");
                    $(this).css("background-color",$(this).attr("id"));
                    ion.sound.play($(this).attr("id") + "Sound");
                    turnMoves.push($(this).attr("id")+"Sound");

            });
        }else{
            $(".button-size").unbind("mouseup");
            $(".button-size").unbind("touchend");
            $(".button-size").unbind("mousedown");
            $(".button-size").unbind("touchstart");
        }


        setTimeout(function(){
            huTurn = false;
            turnColorsOnOff();
            aiTurn(["greenSound", "redSound"]);
        }, 10000);
    }

For 20s everything works fine... ai takes his turn, plays the sounds he needs to and then i get my turn for only 10s, and then again everything works ok and then things start going crazy and the play function it's getting called again and again and again

I really don't get it... :(
linkin-park
@linkin-park
Oct 24 2017 19:02
it would be too cool if you can select the grid size for tic tac toe
what would be the complexity?
Lee
@LeeConnelly12
Oct 24 2017 19:03
@palingheorghe Have you got a codepen or jsfiddle for this? it would be easier to debug in chrome
Lee
@LeeConnelly12
Oct 24 2017 19:05
@palingheorghe nice
Petru Alin Gheorghe
@palingheorghe
Oct 24 2017 19:09
@LeeConnelly12 I'm trying my best
Lee
@LeeConnelly12
Oct 24 2017 19:10
@palingheorghe Looking through it atm
Petru Alin Gheorghe
@palingheorghe
Oct 24 2017 19:10
But I'm not getting along at all with this function
alpox
@alpox
Oct 24 2017 19:11
@linkin-park complexity of what exactly? The calculation of min-max?
Lee
@LeeConnelly12
Oct 24 2017 19:12
@palingheorghe
function play(moves){
        ion.sound.play(moves[roundsPlayed]); //moves should be globally 
        roundsPlayed++;
        console.log(roundsPlayed);

                // The first time play is ran roundsPlayed is 1 and rounds is 2
                // So you never actually clear the interval in the ai turn and you keep creating a new interval
        if(roundsPlayed == rounds){        
            clearInterval(intervale);
            roundsPlayed = 0;
            huTurn = true;
            turnColorsOnOff();
        }

    }
    function play(moves){
        ion.sound.play(moves[roundsPlayed]); //moves should be globally 
        roundsPlayed++;
        console.log(roundsPlayed);
        if(roundsPlayed == rounds){        

            roundsPlayed = 0;
            huTurn = true;
            turnColorsOnOff();
        }
                // You should clear the inveral when the function has finished running so you don't keep creating the interval
        clearInterval(intervale);

    }
Petru Alin Gheorghe
@palingheorghe
Oct 24 2017 19:17
@LeeConnelly12 why should I make 'moves' a global var? I'm using the array 'moves' as an argument so when I'll call the function I'll always call with a specific array.
linkin-park
@linkin-park
Oct 24 2017 19:17
well i choose 10X10 as the board size , what is complexity to make the game draw @alpox
Lee
@LeeConnelly12
Oct 24 2017 19:18
@palingheorghe That comment was already there
@palingheorghe I didnt add that comment
alpox
@alpox
Oct 24 2017 19:18
@linkin-park make the game draw? Well thats just a runtime complexity of O = omega = 100
Ashwin
@ashwins93
Oct 24 2017 19:18
@linkin-park the minimax algorithm will crash the computer on a 10 by 10 board lol
the computer will forever be thinking to make its first move
alpox
@alpox
Oct 24 2017 19:19
@ashwins93 pretty much 100! :/ ouch.
Petru Alin Gheorghe
@palingheorghe
Oct 24 2017 19:19
oh yeah you're right sorry, should've deleted it =)) , @LeeConnelly12 I tried clearing the interval at the end of the function, now if the 'rounds' is 2 my function is only called once because it finishes right before the 2nd one....
alpox
@alpox
Oct 24 2017 19:19
Faculty of 100 i mean
Ashwin
@ashwins93
Oct 24 2017 19:20
but probably we would limit the depth to say about 20 moves
like how stockfish does
alpox
@alpox
Oct 24 2017 19:20
Sure otherwise it would just crash everything
@ashwins93 But that would still be 100! / 80! which is still a runtime complexity of O(10^40)
I don't think a normal computer could do that in a reasonable time
Ashwin
@ashwins93
Oct 24 2017 19:23
my computer will sing the song of its ancestors
high notes
linkin-park @linkin-park googling on mimax alg
ashwins93 @ashwins93 sure you can do that
linkin-park @linkin-park hides
Ashwin
@ashwins93
Oct 24 2017 19:29
damn man every time i see your name it makes me feel sad @linkin-park
rip chester
linkin-park
@linkin-park
Oct 24 2017 19:37
@ashwins93 isnt time to go for sleep?
i believe it should be very early morning
what are you doing this late , if i may ask @ashwins93
Petru Alin Gheorghe
@palingheorghe
Oct 24 2017 19:38
@LeeConnelly12 it's fine, don't lose too much time on this... I'll try to fix it on my own... Maybe I should change the whole code.. Who knows... It looks ugly and messy anyways..
Ashwin
@ashwins93
Oct 24 2017 19:38
@linkin-park it's just 1 am
linkin-park
@linkin-park
Oct 24 2017 19:39
lolz its just
Ashwin
@ashwins93
Oct 24 2017 19:39
Yeah. It's the coders most productive hour
Petru Alin Gheorghe
@palingheorghe
Oct 24 2017 19:40
@alpox how do you calculate the complexity? @ashwins93 not for me tho... I always am at my best at 8am-4pm
at 1am I'm tired and it's anime/smoking time
Ashwin
@ashwins93
Oct 24 2017 19:41
@palingheorghe lol I usually like it when everyone is asleep. The world is so peaceful at night
linkin-park
@linkin-park
Oct 24 2017 19:41
your may be right
but human being arent machine.
so timing is very important biological clock
@ashwins93
Ashwin
@ashwins93
Oct 24 2017 19:42
@linkin-park well mine seems to be broken😂
We Indians are known to work overtime everytime
Lol
Petru Alin Gheorghe
@palingheorghe
Oct 24 2017 19:42
Everybody has their own biological clock I guess...
linkin-park
@linkin-park
Oct 24 2017 19:43
thats bad @ashwins93
here they work only on specified time
even if the system is broken
alpox
@alpox
Oct 24 2017 19:44
@palingheorghe The complexity calculation depends very much on the algorithm. Min-max is a more or less easy one to calculate the complexity for, mainly because lets take the normal 3x3 field. You calculate the maximum amount of time the algorithm can take in worst case. That would be when noone played yet and the computer has its first move. You have 3*3 = 9 possibilities to set a stone. For each of those stones, you try what would happen after that move - the next player would have 8 possibilities left to set a stone. The next one 7 etc. until noone can set a stone anymore (worst case ofc. - noone wins until the last stone) so you would have to calculate 9 * 8 * 7 * 6 * 5 * 4 * 3 * 2 * 1 possibilities which is the faculty of 8, written 8!.
If you would consider to go only 3 levels deep (set 3 stones), you have to calculate 9 * 8 * 7 which can be written as 9! / 6! because the / 6! just removes the 6 * 5 * 4 * 3 * 2 * 1 part of the equation
Ashwin
@ashwins93
Oct 24 2017 19:44
Yeah but what can we do. Its just in the genes. During the tax periods I go back home at 7 am and report to office again at 11
linkin-park
@linkin-park
Oct 24 2017 19:44
i was llike what ? whenn i came here :P
they treat us very bad :(
but if they do here they will be sued :P
Ashwin
@ashwins93
Oct 24 2017 19:45
I'll try to move out
@alpox so that was what my computer was trying to do when I blidnly pasted the code for my project
alpox
@alpox
Oct 24 2017 19:46
@ashwins93 Probably :D
Ashwin
@ashwins93
Oct 24 2017 19:46
I even removed the 3 move depth checking
I thought​ why not
Lol the game freezes on the first move alone
alpox
@alpox
Oct 24 2017 19:47
@ashwins93 Then it calculates in the worst case 8! - can take some seconds
Ashwin
@ashwins93
Oct 24 2017 19:47
After that the possibilities reduce drasticallyso the pc is happy
alpox
@alpox
Oct 24 2017 19:47
Except you have a very slow computer - then it can crash it a bit :D
@ashwins93 Yea. If it has to calculate the first move it can take some time
Ashwin
@ashwins93
Oct 24 2017 19:47
Yeah mine was on the brink of crashing. I ran it with all apps closed
alpox
@alpox
Oct 24 2017 19:48
@ashwins93 It calculates up to 40'320 possibilities - through function calls because its recursively. That would be faster through normal looping, but that would be a hell to program
Ashwin
@ashwins93
Oct 24 2017 19:48
If I let the computer play as X then it takes even more time. It takes so long to decide the centre spot is the best
linkin-park
@linkin-park
Oct 24 2017 19:48
bye all , going for a walk :)
alpox
@alpox
Oct 24 2017 19:49
@ashwins93 Thats why i put there heuristics - if it has to calculate as first player, just set it in the middle - only otherwise calculate min-max
Ashwin
@ashwins93
Oct 24 2017 19:49
@alpox then we have to manually traverse the stack
linkin-park
@linkin-park
Oct 24 2017 19:49
what is this ?
Ashwin
@ashwins93
Oct 24 2017 19:49
40320 items in the stack
linkin-park
@linkin-park
Oct 24 2017 19:49
the talks on
alpox
@alpox
Oct 24 2017 19:50
@linkin-park this what?
linkin-park
@linkin-park
Oct 24 2017 19:51
what is the topic
Ashwin
@ashwins93
Oct 24 2017 19:51
Minimax
linkin-park
@linkin-park
Oct 24 2017 19:51
Oh!
alpox
@alpox
Oct 24 2017 19:51
@ashwins93 Dude i messed up and forgot the leading 9 before in the description :D i fixed it. actually its 9! and not 8!
So 362880 possibilities
Ashwin
@ashwins93
Oct 24 2017 19:52
Then it's 40320 x 9?
alpox
@alpox
Oct 24 2017 19:52
@linkin-park Minimax and its runtime complexity
linkin-park
@linkin-park
Oct 24 2017 19:52
this is boring!
ill be back
Ashwin
@ashwins93
Oct 24 2017 19:52
About 360k
alpox
@alpox
Oct 24 2017 19:52
Ofc. O(9!) - worst case
I guess omega - best case - would be around 1 :D
linkin-park
@linkin-park
Oct 24 2017 19:53
In zero-sum games, the minimax solution is the same as the Nash equilibrium.
from wiki
Ashwin
@ashwins93
Oct 24 2017 19:53
Lol
alpox
@alpox
Oct 24 2017 19:54
Don't know about nash :D
Ashwin
@ashwins93
Oct 24 2017 19:54
Heard about Nash.
linkin-park
@linkin-park
Oct 24 2017 19:54
:what
Ashwin
@ashwins93
Oct 24 2017 19:54
Saw the movie
But didn't understand
Beautiful Mind
alpox
@alpox
Oct 24 2017 19:54
But i used the negamax variant of the minimax algorithm for the tic tac toe - less code :D
linkin-park
@linkin-park
Oct 24 2017 19:54
okay wiki for great good :)
Ashwin
@ashwins93
Oct 24 2017 19:55
@alpox does it yield the same result?
alpox
@alpox
Oct 24 2017 19:56
@ashwins93 Sure, it does the same as minimax but doesn't need 2 methods
This is because it just always negates the result because you can assume that both players try to maximize
Spyrantis Theodoros
@thodorisanta
Oct 24 2017 19:56

tell me your opinions on the Simon game UI i just build. What should i fix and what looks good so far.
i suck at css so any help will be great :)

https://codepen.io/oshikurou/pen/VMORWw

Ashwin
@ashwins93
Oct 24 2017 19:57
@thodorisanta haha you have been saying the same for every project?
Tiago Correia
@tiagocorreiaalmeida
Oct 24 2017 19:58
dont be rude @ashwins93
Ashwin
@ashwins93
Oct 24 2017 19:59
@alpox I'll check that out
Tiago Correia
@tiagocorreiaalmeida
Oct 24 2017 19:59
the projects you make here dont make you great at css that much
Ashwin
@ashwins93
Oct 24 2017 19:59
@tiagocorreiaalmeida I wasn't being rude
He says he is bad at css but he is actually good
Spyrantis Theodoros
@thodorisanta
Oct 24 2017 19:59
@ashwins93 hahah i cant get better on css :P
give me the hardest JS and i will fight till i make it! but css is a dead zone for me :P
i cant find a tutorial that will help me become better on "position things on page the way i want" and "make any shape the exact way i want it from scratch"
Tiago Correia
@tiagocorreiaalmeida
Oct 24 2017 19:59
my bad then @ashwins93 sorry eheh
Ashwin
@ashwins93
Oct 24 2017 20:00
You are not bad at css dude stop saying that @thodorisanta
Spyrantis Theodoros
@thodorisanta
Oct 24 2017 20:02
@ashwins93 normally i just put things in there i find from googling stuff. and im not sure what exactly they do. then i end up putting to much stuff. Plus i positioned everything inside the inner circle with the top:..; amd left:..; attributes and i gave them values like top: -25%; which i think is not the best thing
Clarice
@NinjaPlease84
Oct 24 2017 22:00
Where can I go to team up with other people on a project?
Tiago Correia
@tiagocorreiaalmeida
Oct 24 2017 22:05
hello clarice
:D
~anthony hopkins
Stephen James
@sjames1958gm
Oct 24 2017 22:17
@NinjaPlease84 https://gitter.im/FreeCodeCamp/LetsPair?source=orgpage
There is a letspair chat pages
Long Nguyen
@longnt80
Oct 24 2017 23:15
@thodorisanta I think to use position in css, just imagine how you would draw those circle and make sure they perfectly align at the center of each other
just think of the methods (not css syntax yet) of how to make sure they are aligned correctly
Spyrantis Theodoros
@thodorisanta
Oct 24 2017 23:17
@longnt80 im not sure i get what you mean
Long Nguyen
@longnt80
Oct 24 2017 23:18
@thodorisanta I mean try to think how you would align those circles with pen and paper
Spyrantis Theodoros
@thodorisanta
Oct 24 2017 23:18
@longnt80 horizontally?
Long Nguyen
@longnt80
Oct 24 2017 23:18
align the inner at the center of the outer
Spyrantis Theodoros
@thodorisanta
Oct 24 2017 23:19
yeah but just align: center; wont do the job
wish it was this easy :P
Long Nguyen
@longnt80
Oct 24 2017 23:20
I gave you the snippet yesterday:
.outer {
    position: relative;
}

.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}
Spyrantis Theodoros
@thodorisanta
Oct 24 2017 23:23
@longnt80 can you explain what each part means?
Long Nguyen
@longnt80
Oct 24 2017 23:24
1 sec
@thodorisanta you can play around with those positioning properties to see what it does
Long Nguyen
@longnt80
Oct 24 2017 23:29
try removing top or left or transform