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
what is it asking for
it probly wants something in the tag
<a href="http://freecatphotoapp.com">
something here missing</a>
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
isn't that the most efficient way
@moT01 checked you solution for "Sum All Odd Fibonacci Numbers" sumFibs(75025) and was fairly disappointed
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:
<!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
or since you are using bootstrap set the image's class to
img-responsive or img-fluid depending on the version of bootstrap
But doesn’t work
And also, I was trying to add a border, to debug
But the border doesn’t show up too
in the dev tools
but when you set max-width it doesn't change
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
It’s working on codepen weirdly
I’ve changed the image though
That’s weird
give the url the full path including extention like jpg or what it is
I’ll do it now
But now, how do I fill the image inside the div
max-width:100%;
Isn't working
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
Thanks 🙂
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
@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?
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
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
And each request will have to ask the database for data
performance is a no-brainer here
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
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?
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
Always...
i have a question
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
how
for example
click is a event handler.. it doesnt fire immediatelly but when u "click"
for-loop is sync
for-loop is sync
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();
}
@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
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
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
@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
@marko88ks Try putting a space between .navbar and .backgroundColor in your css
@alpox
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
strange the way you writted the js
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
Thanks @LeeConnelly12 !
palingheorghe sends brownie points to @leeconnelly12 :sparkles: :thumbsup: :sparkles:
:cookie: 129 | @leeconnelly12 |http://www.freecodecamp.com/leeconnelly12
@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.
marko88ks sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1390 | @alpox |http://www.freecodecamp.com/alpox
XD
`
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
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.
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
@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
@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/
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 :)
@ashwins93 after the inital hovering of mouse it seems to be fine
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.
@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
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
`
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); });
```
@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
ty @camperbot
@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
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?
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
@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
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
lol
okay now i fixed something
how do i share it with you again?
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 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?
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
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
@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
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:
@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
@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
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
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'...
seems fine
next and previous?
@tiagocorreiaalmeida they don't show up right...?
in what size are you checking?
and then paste here
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..?
@flyfishingbarbara you need to resize the images
in order to that happens
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
But I'm not getting along at all with this function
@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 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
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....
like how stockfish does
@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
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
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..
@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
We Indians are known to work overtime everytime
Lol
Everybody has their own biological clock I guess...
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
they treat us very bad :(
but if they do here they will be sued :P
@alpox so that was what my computer was trying to do when I blidnly pasted the code for my project
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
@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
@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
@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
ill be back
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
But didn't understand
Beautiful Mind
But i used the negamax variant of the minimax algorithm for the tic tac toe - less code :D
@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?
the projects you make here dont make you great at css that much
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"
@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
: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
@thodorisanta I mean try to think how you would align those circles with pen and paper
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%)
}
@thodorisanta https://codepen.io/longnt80/pen/wrLjWp
@thodorisanta you can play around with those positioning properties to see what it does