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
@nic9075 i dont see an error
what is it asking for
it probly wants something in the tag
<a href="http://freecatphotoapp.com">
something here missing</a>
What Atom package should I install for JSX syntax highlighting?
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
@DunderStruck straight forward and to the point, looks good to me
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
@DunderStruck i dont get it
isn't that the most efficient way
@moT01 checked you solution for "Sum All Odd Fibonacci Numbers" sumFibs(75025) and was fairly disappointed
did i forget to indent my code too?
too few ifs and indentation
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
@DunderStruck , I agree with @GitHub-Henry . Very clear and concise.
@DunderStruck first, i will try to cache all that
document.getElementById parts into variables and use the variables instead
@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.
@GitHub-Henry i was too lazy to explain why he needs to do that. glad u did it :) :+1:
@sorinr teamwork
:)
<!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
@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
@ashwins93 I am using omg-fluid
But doesn’t work
sorry i didn't see that, so you are using bootstrap 4?
Yes
And also, I was trying to add a border, to debug
But the border doesn’t show up too
okay did you try changing the width of the image itself
in the dev tools
Yes, but then the image was no longer responsive
@gunasai so it changes when you change the width
but when you set max-width it doesn't change
Yup
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?
imgs are always a problem to deal with. try giving that container a background with that image with background-size: cover and so on
@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
try using the same image
That’s weird
give the url the full path including extention like jpg or what it is
@gunasai haha it works fine in codepen
did you check the console for any errors in your local setup?
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
Its already filling the div isn't it?
Like, I don’t wan’t the whitespace on left and right
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
Okay, that works
Thanks 🙂
:+1:
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
you found the bug
@gunasai try atom live reload
@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?
guys need help in google graph
how can i set minimum height to bar lines
vertical bar lines
(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
gm @alpox how are you? :D
@tiagocorreiaalmeida :wave: hio, good, good, and you? :D
same :D
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
@tiagocorreiaalmeida I didn't understand this part:
to show it on a new request to the same place
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
@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
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
@tiagocorreiaalmeida Yea
does this looks good so far ? :P
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?
https://codepen.io/Gh05d/pen/yzWrzd?editors=0010
Does anybody know how I can pin the table header, so that it is always visible?
maybe position fixed
no, that fixes the whole page and prevents it from being scrollable.
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
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?
sure but you made that on one of the first exercises from fcc
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
someone here?
Yes
Always...
haha
i have a question
Ask away
Disclaimer: I'm not saying I will be able to answer it.
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
stop the loop
how
okay valid question
for example
click is a event handler.. it doesnt fire immediatelly but when u "click"
for-loop is sync
for-loop is sync
i would say the code continues
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?
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();
}
@moigithub so it stops immediatly?
@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
mot01 sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
:cookie: 373 | @iangracia |http://www.freecodecamp.com/iangracia
@moT01 so if i change the variable to false the loops stop immediatly? If a button changes the variable
var cont = true; //<--global
$("#button").on("click",()=>{ cont =false });
for (var i in 1000) {
if(cont===false) break; //stop the loop
}
@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
alpox sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
:cookie: 374 | @iangracia |http://www.freecodecamp.com/iangracia
ok thanks everyone for your help @moigithub @moT01 @alpox
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
noted @alpox
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.
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! ;)
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
is there a codepen for it ?
@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
@alpox they have that class
@marko88ks they? There are multiple navbars?
@marko88ks Try putting a space between .navbar and .backgroundColor in your css
no , just one
@alpox
@LeeConnelly12 better not :D
@marko88ks just make an codepen from it
@LeeConnelly12 i try that , still not worrking
trhat wont work ofcourse the problem is not related to css styling
@marko88ks inspect the offset top in the scroll event. It might stay 0 when the navbar is fixed
and you did it right if they are both in the same element class
@marko88ks can you show your html code?
@marko88ks Can you show the html for the nav?
ok just a sec
navbar and fixed top are in the same elemtn???
strange the way you writted the js
@marko88ks nvm i'm being an idiot, had a brain fart.
wrong js file ! my mistake http://prntscr.com/h1ghmx
here0s a simple example
of it console loging the offset
you probably have some issues with the classes
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.
@tiagocorreiaalmeida ok tnx anyway , i look again , to find a mistake
marko88ks sends brownie points to @tiagocorreiaalmeida :sparkles: :thumbsup: :sparkles:
:cookie: 405 | @tiagocorreiaalmeida |http://www.freecodecamp.com/tiagocorreiaalmeida
@palingheorghe What's the value of roundsPlayed before play is called?
0?
@LeeConnelly12 roundsPlayed is initialized with 0
@palingheorghe Play the sound in play before you increment roundsPlayed
wow you're totally right!
Thanks @LeeConnelly12 !
palingheorghe sends brownie points to @leeconnelly12 :sparkles: :thumbsup: :sparkles:
:cookie: 129 | @leeconnelly12 |http://www.freecodecamp.com/leeconnelly12
but why was this happening though
@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
@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
@marko88ks I made a very simple test - if you didn't mess up classes, it should work:
https://codepen.io/alpox/pen/gGNgoM
https://codepen.io/alpox/pen/gGNgoM
@marko88ks If you use
$(".navbar").addClass("backgroundColor") ofc.
@alpox ok man , i try that now , thx
marko88ks sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1390 | @alpox |http://www.freecodecamp.com/alpox
Hi, can someone explain this JS scope problem I'm having?
@alpox can you look this https://codepen.io/pen/
@marko88ks You gotta save :D i see an empty pen
^^
XD
@marko88ks Sure, post the code
`
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:
@mbpiner Thats not a scoping problem, thats an asynchronous execution problem
you should use "
` " at the top and "```" at the bottom
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.
use 3 ticks.
@LeeConnelly12 Got it about the ticks. thx
mbpiner sends brownie points to @leeconnelly12 :sparkles: :thumbsup: :sparkles:
:cookie: 130 | @leeconnelly12 |http://www.freecodecamp.com/leeconnelly12
@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
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
mbpiner sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1391 | @alpox |http://www.freecodecamp.com/alpox
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
@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
@alpox do you see the problem?
@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.
@alpox Sorry, you mean getCurrentPosition? Theres that and getLocation in the code
Ok yea thats the only one with the callback
@mbpiner
getCurrentPosition. That is the one which works asynchronously. Ofc. you can add another callback to getLocation - to be called after getLocation fully finished
@alpox thanks a lot man , just one more question : how to turn off overflow-x?
marko88ks sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
api offline
@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
@alpox could you help me with a flexbox issue
@alpox ok man
@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
@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/
@alteducation It gets fixed on other pages
on the home page its always like that
@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 :)
i mean on the forum.alternativeeucation.in @alteducation
@ashwins93 after the inital hovering of mouse it seems to be fine
in my browser it reamains the same even on hovering
@ashwins93 im on chrome
I'm using firefox
@ashwins93 hover over the resources dropdown
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
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.
@alteducation You seem to be using Materialize
@tiagocorreiaalmeida THANK YOU SO MUCH <3 <3 I have been stuck on this challenge since months <3
forlenza sends brownie points to @tiagocorreiaalmeida :sparkles: :thumbsup: :sparkles:
:cookie: 406 | @tiagocorreiaalmeida |http://www.freecodecamp.com/tiagocorreiaalmeida
@alteducation Try:
nav a {
white-space: nowrap;
}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?
@alpox still having the issue
@alteducation I'm getting a lot of errors on the console
@alpox
`
function getLocation(callback){
navigator.geolocation.getCurrentPosition(function(pos) {
callback(pos.coords.latitude)
//long = pos.coords.longitude;
});
}
getLocation( result => { console.log(result); });
```
`
function getLocation(callback){
navigator.geolocation.getCurrentPosition(function(pos) {
callback(pos.coords.latitude)
//long = pos.coords.longitude;
});
}
getLocation( result => { console.log(result); });
```
@alteducation -moz- specific errors
@alpox Figured it out :smile: thank you so much haha been going nuts over that for HOURS
mbpiner sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
api offline
rip camperBot?
ty @camperbot
@mbpiner nice :D
@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 :)
@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
Guys I need help. I am exhausted. I know CSS and HTML. But I cannot build sites
it just ... doesnt work together : D
they have some padding set up @alteducationation
I need some inspiration
or some like advanced CSS tutorials to understand why and how these pieces are put together
@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 .
@Martialis39 lol what kind of inspiration do you want? may be some animations?
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
@Martialis39 download free html templates and fiddle with them, then try to build it. when to get stuck refer the source code
@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
@alteducation thats really a wtf-css moment again :D
@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
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
@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
@alteducation that is evidently visible
lol
okay now i fixed something
how do i share it with you again?
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%;
}
}
@ashwins93 wow it works. what did you do bro :fire:
@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
@ashwins93 haha, can you tell me what specifically was causing the issue?
@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)
@ashwins93 wow, thanks i wouldn't have figured that out. thanks a tonn!!
alteducation sends brownie points to @ashwins93 :sparkles: :thumbsup: :sparkles:
:cookie: 393 | @ashwins93 |http://www.freecodecamp.com/ashwins93
@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
@ashwins93 https://forum.alternativeeducation.in/ it appears like this now
haha
so we need to reconcile between jsfiddle and the actual site
@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
Great!
@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
i don't understand what effect you are aiming at
how can you color padding alone?
you could color the border
@ashwins93 i am trying to get the gray color to cover both the resources text and the down arrow i tag fully
@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;
}
@LeeConnelly12 bro why are you using all these selectors? i cannot compherend this :smile:
@alteducation I just copied them from your site
lol to get more specificity
@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
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
lol
@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
the hardest part of being developer is reading other people code and mind.
and always being professional
@linkin-park i didn't realize developers were supposed to be mind readers
lol
yes indeed :)
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
you wont have any clue why he / she wrote the code like that
and there is always politics
is @MCTwoDigitZero around...?
they both show?
I got the screen at 350px or something like that
or maybe I got the ide wrong
@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%;
}
@tiagocorreiaalmeida yah, but now trying making it wider and 'shorter'...
@flyfishingbarbara What's wrong with it?
seems fine
@flyfishingbarbara the icons size?
next and previous?
@tiagocorreiaalmeida they don't show up right...?
they do hum
in what size are you checking?
how do I 'screen shot'..ill show ya
print key
and then paste here
control -p..?
press alt + prt sc key
next to f12
@LeeConnelly12 ....did that and they control v and nothing...
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
@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....
this is 1000px wide
@flyfishingbarbara if you scroll bellow they are there
this is < 1000px
@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..?
@LeeConnelly12 u're still here?
@flyfishingbarbara you need to resize the images
in order to that happens
@LeeConnelly12 thnks for the prt scr info
at this point they are quite big
@tiagocorreiaalmeida thnks
tht'as really the only "issue" the images size
@palingheorghe Yeah whats up
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... :(
it would be too cool if you can select the grid size for tic tac toe
what would be the complexity?
@palingheorghe Have you got a codepen or jsfiddle for this? it would be easier to debug in chrome
@palingheorghe nice
@LeeConnelly12 I'm trying my best
@palingheorghe Looking through it atm
But I'm not getting along at all with this function
@linkin-park complexity of what exactly? The calculation of min-max?
@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);
}
@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.
well i choose 10X10 as the board size , what is complexity to make the game draw @alpox
@palingheorghe That comment was already there
@palingheorghe I didnt add that comment
@linkin-park make the game draw? Well thats just a runtime complexity of O = omega = 100
@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
@ashwins93 pretty much 100! :/ ouch.
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....
Faculty of 100 i mean
but probably we would limit the depth to say about 20 moves
like how stockfish does
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
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
damn man every time i see your name it makes me feel sad @linkin-park
rip chester
@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
@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..
@linkin-park it's just 1 am
lolz its just
Yeah. It's the coders most productive hour
@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
@palingheorghe lol I usually like it when everyone is asleep. The world is so peaceful at night
your may be right
but human being arent machine.
so timing is very important biological clock
but human being arent machine.
so timing is very important biological clock
@ashwins93
@linkin-park well mine seems to be broken😂
We Indians are known to work overtime everytime
Lol
Everybody has their own biological clock I guess...
thats bad @ashwins93
here they work only on specified time
even if the system is broken
@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
If you would consider to go only 3 levels deep (set 3 stones), you have to calculate
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
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
i was llike what ? whenn i came here :P
they treat us very bad :(
but if they do here they will be sued :P
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
@ashwins93 Probably :D
I even removed the 3 move depth checking
I thought why not
Lol the game freezes on the first move alone
@ashwins93 Then it calculates in the worst case
8! - can take some seconds
After that the possibilities reduce drasticallyso the pc is happy
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
Yeah mine was on the brink of crashing. I ran it with all apps closed
@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
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
bye all , going for a walk :)
@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
@alpox then we have to manually traverse the stack
what is this ?
40320 items in the stack
the talks on
@linkin-park this what?
what is the topic
Minimax
Oh!
@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
Then it's 40320 x 9?
@linkin-park Minimax and its runtime complexity
this is boring!
ill be back
About 360k
Ofc.
O(9!) - worst case
I guess omega - best case - would be around 1 :D
In zero-sum games, the minimax solution is the same as the Nash equilibrium.
from wiki
Lol
Don't know about nash :D
Heard about Nash.
:what
Saw the movie
But didn't understand
Beautiful Mind
But i used the negamax variant of the minimax algorithm for the tic tac toe - less code :D
okay wiki for great good :)
@alpox does it yield the same result?
@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
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 :)
@thodorisanta haha you have been saying the same for every project?
dont be rude @ashwins93
@alpox I'll check that out
the projects you make here dont make you great at css that much
@tiagocorreiaalmeida I wasn't being rude
He says he is bad at css but he is actually good
@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"
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"
my bad then @ashwins93 sorry eheh
You are not bad at css dude stop saying that @thodorisanta
@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
Where can I go to team up with other people on a project?
hello clarice
:D
~anthony hopkins
@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
just think of the methods (not css syntax yet) of how to make sure they are aligned correctly
@longnt80 im not sure i get what you mean
@thodorisanta I mean try to think how you would align those circles with pen and paper
@longnt80 horizontally?
align the inner at the center of the outer
yeah but just
align: center; wont do the job
wish it was this easy :P
I gave you the snippet yesterday:
.outer {
position: relative;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
@longnt80 can you explain what each part means?
1 sec
@thodorisanta https://codepen.io/longnt80/pen/wrLjWp
@thodorisanta you can play around with those positioning properties to see what it does
try removing
top or left or transform