to*
@jdtdesigns Thank you very much! I've never heard of the property box-sizing before!
kevinhisel sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 917 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Sigh...
@kevinhisel Just keeps padding and border from effecting height/width of the element.
wtf
My browse was shutted down itself
Like someone took control of my pc
Hey, can anyone help me with "Where are thou" I made an algorithm that i thought would work and it does for the first two cases, but for some reason in the third it should only return 2 objects, but the other objects also have the source argument so my algorithm returns them too, i dont understand the problem anymore
nvm i get why its doin that now
I have to look up practically everything i do while making the tribute page. Did I do something wrong and what should i do?
@WillTheCruzan meaning you have to learn how to do it?
that's what the challenge is all about ;)
I just feel like i forgot everything i learned
happens to us all
that's why it's important to keep coding until stuff sticks
if you take constant breaks before absorbing the info through constant repetition, you most likely won't remember it
alright thanks @jdtdesigns
willthecruzan sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 918 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
also how do i put text in front of an image?
@jdtdesigns sorry im back...
Had PC issues
What's up @MathematicsCoding
Alright
I need online button to return online only
@WillTheCruzan have you tried the bootstrap JumboTron feature? Change the background to be an image perhaps?
I wrote some code but browse shutting down itself ruined it...
What approach are you trying to take
Did you see these if statement?
I dont know what code to write to return online instead
@WillTheCruzan https://v4-alpha.getbootstrap.com/components/jumbotron/
Figuring that out is part of this challenge
:\
@MathematicsCoding You shouldn't be firing an ajax request for the status type buttons
I don't think you want the answer, is what I'm saying - wondering if you had an idea about how you wanted to do it.
you should get all streams on page load and just add/remove a class on them based on which button is pressed
ugh
FCC provides some sound files for the simon game (ex. https://s3.amazonaws.com/freecodecamp/simonSound1.mp3) but when I try to use it on codepen it says there is no Access-Control-Allow-Origin header so it can't access it... I'm not sure how to get around that.
I will try figure it out later...
Cya guys
The text wont center
<a class="center-text" href="https://en.wikipedia.org/wiki/Abraham_Lincoln" target="_blank">Learn More</a>
figure out what?
nvm i got it
'
did you realize you had text and center reversed lol
does anyone see what could be causing nothing to show up
@conradkay
//this.changeHandler
@conradkay you're also missing a semi colon on line 13
@moT01 @DVecc thanks!
conradkay sends brownie points to @mot01 and @dvecc :sparkles: :thumbsup: :sparkles:
:cookie: 124 | @dvecc |http://www.freecodecamp.com/dvecc
:cookie: 634 | @mot01 |http://www.freecodecamp.com/mot01
as a tip you can always hit the drop down arrow and click analyze js to have it tell you what errors are occuring
its always the tiny errors that are never caught!
ok
after adding the semi colon I'm still receiving a unclosed regular expression error I'm trying to find
having trouble with "Where art thou" anyone up to help?. I just need to figure out how to make sure that the collection has BOTH of the keys from source
@Pagnito I can help i think
whats your current code?
function whereArtThou(collection, source) {
var arr = [];
for (var keyd in source) {
for (var key in collection) {
if (source[keyd] === collection[key][keyd]) {
arr.push(collection[key]);
}
}
return(arr);
}
this is what i came up with
@MathematicsCoding Here's an example of how to go about it. I made a few changes here and there to clean up the code. I also added a couple things in the css. Hope this helps. ;) https://codepen.io/jdtadlock/pen/jmMOyJ?editors=0100
How do I add a border to an image? I've tried several different techniques on google but none seemed to work.
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption text-center">
</div>
</div>
Make sure you're using this bootstrap build and not 4.0
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Free code camp's tutorials use 3 and not 4.0 so some things may not work the same if you use 4.0
@jdtdesigns Damn it you did it for me lol
Thanks man
Gtg :\
@MathematicsCoding Welcome! Take a look at it and figure it all out before moving foward. You'll learn a couple of things that will help you down the road. ;)
thanks @DVecc ! got it to work!
willthecruzan sends brownie points to @dvecc :sparkles: :thumbsup: :sparkles:
:cookie: 125 | @dvecc |http://www.freecodecamp.com/dvecc
How am i supposed to make the buttons on the portfolio project?
The ones that take you to the different section of your portfolio?
yes
Basically you have a button object in you nav bar with a target of #About or whatever section you want it to take the user to
and then in your html you start the section with
<section id="#(whatever section it is called)"></sec>
and put your code inbetween the section tags
and when they click on the button it will jump to the section on the page with the corresponding ID
ohhh ok!
thanks @DVecc
willthecruzan sends brownie points to @dvecc :sparkles: :thumbsup: :sparkles:
:warning: willthecruzan already gave dvecc points
I would recommend reading the bootstrap documentation on whatever components you are trying to work with, it's extremely helpful
@conradkay hey was ina diffirent chatroom...can u explai what ur doing. im looking at the code but im not sure how it checks for multiple values or keys
guys an advice on my nav bar. anything I can add to make it look more full? i feel like it looks to plain - http://s.codepen.io/RPIE3/debug/EmyBOW/ZoABajoDEydr
hey guys when using bootstrap <div class=col-ms-4> it positions my text on the left column but id like to use the middle one how can I select the middle column if all 3 columns are all the same
add a class to the column and then style it
@Reeson55 you could do an additional empty
<div class=col-ms-4> before that or<div class="col-ms-4 offset-md-4”>
@Reeson55 Use column offsets: http://getbootstrap.com/css/#grid-offsetting and don't forget to put your columns in a row:
<div class="row">
<div class="col-md-4 col-md-offset-4">
Middle column
</div>
</div>
Alright what do you think?
@jdtdesigns did it for me with online and offline buttons and some improvement
But I have changed some designs
huh I think I messed up things...
@MathematicsCoding If you want my honest opinion, I think you need to take what JD wrote as a guideline and write your own code. :)
This is definitely not your coding style:
$('.stream-list').find(id == 'all' ? 'li' : id == 'online' ? '.online' : '.offline').show();
:\
I will try to change it but what did I do wrong
It worked before
You didn't add .stream-list class to the ul ;)
Thought didnt need it..
And like i said, you need to go through my code and make sure it all makes sense before moving on.
if not, you're just wasting your time :/
I have already take a look at your code :\
do you know what
id == 'all' ? 'li' : id == 'online' ? '.online' : '.offline' means?
That is only code I have no idea what that meant :\
Figured out whats wrong
exactly lol
figure out what code does before moving on
Its because I deleted a single class :\
I have noticed you made "Bio -" sticked with username xD
I fixed it tho
I understand how almost all JS code works but this code
id == 'all' ? 'li' : id == 'online' ? '.online' : '.offline'
Are they like if statements?
What does
? represent?
@MathematicsCoding You should never use <br>'s except in testing
@jdtdesigns why?
you should use text elements for text
you use css to create spacing between element
Yeah but whats wrong with <br>?
it's a bad practice in production code
since there are 50 ways to create space between two elements, there's never a good reason to have a <br> in production
I could delete
Bio - instead
That would looks better
or just wrap the bio line in a <p> ;)
I saw you did it but Bio - was in wrong position
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br
Notes
Do not use <br> to increase the gap between lines of text; use the CSS margin property or the <p> element.
....
Getting it from all angles lol
:p
Alright deleted <br>
Lots of people use <br> too much
Yeah...
I learned new lessons from you guys lol
But I gotta learn one more lesson
$('.stream-list').find(id == 'all' ? 'li' : id == 'online' ? '.online' : '.offline').show();
Explain that code? :\
freeCodeCamp Wiki:
:point_right: The freeCodeCamp wiki can be found on our forum.Please follow the link and search there.
I think JD sent you down a rat hole with a nested ternary
:)
@MathematicsCoding
<if condition> ? <true> : <false>
Maybe easier to understand written out as if/else
but i did nest one more ternary inside another, which is a little tricky @MathematicsCoding
there are plenty of tutorials on ternary expressions in js though
Here's a FCC boring dude that explains it pretty well :D
https://www.youtube.com/watch?v=s4sB1hm73tw
https://www.youtube.com/watch?v=s4sB1hm73tw
Yeah that guy will make me happy
But first...
I need to make this "offline" color red I have done it but it didnt stay with status -
They were on different line
basically, i'm just finding all the li's inside
.stream-list using the id of the button as the conditional. Instead of doing a standard if/elseif/else i use a ternary to write one line shortcode.
@MathematicsCoding
Don't try to over think ternaries. They are pretty simple logic operators
Alright
Thanks for that video tho
I will probably learn that in JS book too :\
So ternaries is just shortcut code for if statements?
yep, but they can be used for logical operations or setters
very useful to shorten your code
I see
ESL_SC2
That person really play Starcraft all day?
Like 24/7..
huh ternary operator is really simple...
So like
? = if statement and : = else
if ( condition ) {
// true
} else {
// false
}
condition ? true : false
any react experts here?
yeah
console.log((condtion) ? true : false);
right?
no need for (condition)
SO instead of console.log how would I return it?
why?
Ah () inside is a variable not parameter?
var blah = num;
if ( blah = condition ) {
// true
} else {
// false
}
console.log((blah) ? true : false);
lol, you're adding code
yeah?
some condition ? do something if true : do something if false
not (some condition) ? ....
false?
if(blah===condition) {
return true
} else {
return false
}
@chakrihacker ``` not ``````
Three of them
@jdtdesigns but these code I posted above
Right example?
@MathematicsCoding single equal is assignment and
=== is checking condition
yeah...
@MathematicsCoding .... don't add the brackets is what i was saying
I just made it up
var some_truth = true;
some_truth ? console.log('it is truth') : console.log('it is false');
ah...
So that would return 'it is truth'
@jdtdesigns
blah === condition ? 'true content' : 'false content'
correct
I see
@jdtdesigns you are assigning some_truth variable as true
@chakrihacker For a simple example yep
is my example solves your question?
who's question?
Alright thanks for the lessons about ternary lol
@chakrihacker mine...
He was teaching me
Well I didnt ask a question
Never mind Misunderstood
ok
Cya guys
cya
Goo evening everyone
what link should I add to codepen.io to make work my mobile dropdown menu work ?
@JasonCorp84 from the JS settings, add
jQuery then Bootstrap.js
hello! Can anyone suggest me how to make a dashboard? i need the dashboard on a webpage.
@fortMaximus thank you!
jasoncorp84 sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 739 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
Can anyone take a look at my Tribute Page? I mean, is this enough to pass or there's no requirement, except for the link ad picture?
@Jaizon you're pretty much good to go. This is one of the best looking tribute pages I've seen over here :+1:
the requirements for the projects are the user stories
@Jaizon it looks marvelous :) just clean up the images to the bottom ;)
you have a type
This is a tribte to:
@fortMaximus Ty, but, even with no responsiveness? I saw that my images got all messed up when resizing.
jaizon sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 740 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
tribute*
goingto correct all you saying, just a moment
didn't check for responsive, I'll do now
@Jaizon it’ll do you good if you’d use bootstrap on the img's :)
yea, it doesn't look as good on smaller screens @Jaizon
@uiharu-s I forgot the class for that, I was worried about finishing up with just css and html, just used bootstraps for grid purpose
I think it's
img-fluid in Bootstrap 4 and img-responsive in 3
you know when you click on a name in a nav bar and it auto scrolls that to that point in the page, how difficult is it?
debating on if I should do a one page design, or three pages
impossible :p
easy, jk @NMC96
@NMC96 it’s pretty easy
what framework do I have to use for it?
the idea is that you'll have to divide the page into section, using
divs with ids
@uiharu-s alright, col's + img-fluid
Could it not be as simple as putting everything into sections, and then doing onClick
yes, that's it
and adding a function to make a certain div at the top of the page
i.e the beginning of the page the user clicked on
I've been thinking for past half hour how to do it, saying it out loud makes it sound so simple lol
onClick or
href="#section-id-name"
Can I get some feedback on my portfolio?
how would the href work with ids?
@NMC96 could be as simple as id’s
lol
i didn't know href could link up with ids lmao
lol
me too, at first
@DVecc looks great :D
that was so simple
like lol
no animation on it so it looks like its from the 90's but ill sort that out later on
@DVecc
col-md-* might be more suited for most ppl’s devices than col-lg-
@NMC96 lol
can't remember who posted there portfolio, but it looks pretty decent. Well done. The only thing I would change would be the color and font off the opening header and opening bio about yourself. Other than that it looks great
@NMC96 look up scrollspy, might be useful
That verticle scroll using scrollspy is exactly what I needed
thanks for that @uiharu-s
nmc96 sends brownie points to @uiharu-s :sparkles: :thumbsup: :sparkles:
:cookie: 309 | @uiharu-s |http://www.freecodecamp.com/uiharu-s
body {
margin-top: 60px;
}
margin-top: 60px;
}
why is it in CSS
@Become0 to give the whole page a top margin of 60 pixels?
what do you mean exactly
and yay @NMC96 :D
<a href="http://www.dailyreport.in/wp-content/uploads/2016/06/P.V.-Narasimha-Rao.jpg"> <img src="http://www.dailyreport.in/wp-content/uploads/2016/06/P.V.-Narasimha-Rao.jpg" class="img-circle" alt="Photo of the Man"> </a>
^is there something wrong with this?
The bootstrap class is not working
@utkarshonly If you're using Bootstrap 4, use
rounded-circle instead of img-circle
Oh. Okay thanks!
If you want to use Bootstrap 3, and you're using Codepen, click "Settings", click "CSS", and replace your link to Bootstrap with this one: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css @utkarshonly
guys, please help me out
I have to create a dashboard on a webpage. I have no idea how to do it. Can anyone please suggest.
I have to create a dashboard on a webpage. I have no idea how to do it. Can anyone please suggest.
can someone look here - http://s.codepen.io/RPIE3/debug/EmyBOW/nqAwveKLGoOr#page2
I had it working before, but now it linking the ID but not scrolling down lol
when you click html it should scroll
@LoneWolf08 any more details for everyone? :)
Hey guys. Im basically trying to put my custom logo into my Codepen project. And the only solution i came up was to copy url of an existing logo on tech crunch.com
Is there a way to add a custom one ?
upload logo to image hosting
then use the url from the image host to put it on codepen
@NMC96 ID values shouldn't start with a
#, for example: <div id="page2"> not <div id="#page2">
@uiharu-s my database is in SQL server
@NMC96 I don't have my own server or hosting.
@Ninikitos A lot of people use https://postimage.io for image hosting. It's free.
@SkyCoder01 Thanks will try )))
ninikitos sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1159 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Can someone take a look a it now? Just a quick feedback before I submit
Hi everyone, I am working on the random quotes machine, could someone please help me that I can not load a different quote, after I clicked the button it won't request another quotes :( http://codepen.io/elliotzengyi/pen/GmqvvK
and I have to use http:// because codepen doesn't allow me to request http json via https
Hey guys. Using a bootstrap navbar. But for some reason when i resize the page drop down does not work. Here is my code
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand nav-item nav-link active" href="#"><span class="sr-only">(current)</span>
<img id="brand-image" alt="Website Logo" src="https://s24.postimg.org/jdspbb51h/Logo.png" class="img-responsive">
</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Socials</a>
<a class="nav-item nav-link" href="#">Portfolio</a>
<a class="nav-item nav-link" href="#">Contact Me</a>
</div>
</div>
</nav>
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand nav-item nav-link active" href="#"><span class="sr-only">(current)</span>
<img id="brand-image" alt="Website Logo" src="https://s24.postimg.org/jdspbb51h/Logo.png" class="img-responsive">
</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Socials</a>
<a class="nav-item nav-link" href="#">Portfolio</a>
<a class="nav-item nav-link" href="#">Contact Me</a>
</div>
</div>
</nav>
Please help me) Send like an hour already
@Jaizon :+1:
@Ninikitos ofc its not working if u don't add in codepen ssettings->javascript part jquery first and boostrap.js after :)
@sorinr MAAAAAAAANNNN !!!
@sorinr IT helped !!!
@sorinr THANK YOU !! Didn't know about that part
ninikitos sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1271 | @sorinr |http://www.freecodecamp.com/sorinr
@Ninikitos welcome
Hi, I need help for the Local Weather app. I am able to get the long and lat by using the following code i am unable to get response to the weather app data what is wrong with this $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + long + "&appid=**",function(data){
console.log("Data: " + data );
});
console.log("Data: " + data );
});
@ckshobha how do u get lat and lon?
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition);
}
navigator.geolocation.getCurrentPosition(showPosition);
}
i am able to get lat and long value perfectly right
but beyond that I dont see any code execution
let me know if u need the complete snippet of code
@ckshobha combining geolocation with openweather api is a pain
not sure if it works anymore...
hmn okie.
@ckshobha geolocation needs https access. openweather, free plan, accepts only http. change ether location service or weather api
@ckshobha if u want to keep geolocation, thats more accurate, look at weather apis like apixu, wunderground that accepts calls on https on the free plan
smb mentioned https://crossorigin.me/
could be equally useful for making http api http/s enabled
crossorigin stopped working for me a while ago
darksky api has https
Could someone help me with getting geolocation data please. I'm working on the weather app
@gothamknight What's your problem?
@Yankoth you mind if I send you a pm?
@gothamknight No problem
function orderMyLogic(val) {
if (val < 10) {
return "Less than 10";
} else if (val < 5) {
return "Less than 5";
} else {
return "Greater than or equal to 10";
}
}
// Change this value to test
orderMyLogic(5);
@Remus432
if (val < 10) {
return "Less than 10";
} else if (val < 5) {
return "Less than 5";
}switch the 10 with 5 so it returns "Less than 5" before "Less than 10"
@Jaizon The albums part, looks pressed
Can anyone tell me how are they animating so beautifully with scroll?
https://ethereum.org
https://ethereum.org
my random quotes machine.
it takes very long time to load another quote because my internet is so slow in China. Can anyone tell me the speed in your side please?
@elliotzengyi it is good :+1: but really want a twitter button
@Faiz7412 Try ScrollReveal https://scrollrevealjs.org/
^_^ I will add the twitter button, thank you. @heroiczero
elliotzengyi sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 1179 | @heroiczero |http://www.freecodecamp.com/heroiczero
@elliotzengyi almost instant on my side.
@keonsam thank you. I was thinking to storage 20 quotes into an array while page loading. so even it's slow in my side, it may also instantly change.
elliotzengyi sends brownie points to @keonsam :sparkles: :thumbsup: :sparkles:
:cookie: 337 | @keonsam |http://www.freecodecamp.com/keonsam
hey guys, I have a string & I want to turn it without changing it to Array to use reverse method ,, got it ??
@lokeshdevraj Thanks! But they seem to be using more than just scrollrevealjs. Their animations are moving according to scroll, and reversing too when scrolled up. The transitions are impressive!
faiz7412 sends brownie points to @lokeshdevraj :sparkles: :thumbsup: :sparkles:
:cookie: 36 | @lokeshdevraj |http://www.freecodecamp.com/lokeshdevraj
@blastit
what is the correct code for the profile lookup? I've tried about 3 different times
what is the correct code for the profile lookup? I've tried about 3 different times
for (var i = 0; i < contacts.length; i++) {
if (contacts[i].firstName === firstName) {
if (contacts[i].hasOwnProperty(prop)) {
return contacts[i][prop];
} else {
return "No such property";
}
} else {
return "No such contact";
}
}if (contacts[i][prop]) {
return contacts[i][prop];
}
return "No such property";
@blastit i think this is already fine.
missed the }); lol.
hey anyone, in react how is it possible to strike-trough different list items, in an array?
@blastit contacts[i][prop] .... without hasOwnProperty
@elliotzengyi , I have a string & I want to turn it without changing it to Array to use reverse method ,, got it ??
like palindrome ..
@blastit if (contacts[i][prop] === prop ) {......
hi @AbdallahSarhan I don't have any ideas about that. have you tried slice() & +=?
@elliotzengyi this is what i am trying right now xD
but why you don't want to change it to an arry?
because i tried before with another algorithm and the console returns perfect result , but i didn't pass xDDD :(
function reverseString(str) {
var result = "";
for (var i = str.length - 1; i >= 0; i--) {
result += str[i];
}
return result;
maybe try this
looks stupid but also work...
@elliotzengyi works well tho hehe, thank you
abdallahsarhan sends brownie points to @elliotzengyi :sparkles: :thumbsup: :sparkles:
:warning: @elliotzengyi's account is not linked with freeCodeCamp. Please visit the settings and link your GitHub account.
@AbdallahSarhan you're welcome.
Hi, how do I use JSON/AJax to access http API from a https webpage? It gives me errors when I try to do that
I am building the voting app. Though it's a backend project, I use React Redux as the frontend, and I have a few questions:
- I need a way to display "Delete" button if a poll belongs to the signed in user. Should I store userId and poll owner's id in redux state so that I can compare them? Someone could edit the local storage to make the userId equal to poll owner's id, therefore exposing the delete button.
- On the backend, how do I check that a user has enough privilege to delete a poll?
hey
is anyone experienced here in react?
where should I go to learn react free?
hysterical-amusement.surge.sh
@keonsam
@csnktms what's up with react
@kuriakinzeng hey
i have a todolist
ok
i can add and delete todos
are you using redux?
i would like to apply strike through to items
no
and if it is applied, i would like to push them to the completed section
hmm ok?
i show u the code
import React, { Component } from 'react';
class ToDoList extends Component {
constructor(props) {
super(props);
this.state = {list: [], items: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleRemove = this.handleRemove.bind(this);
}
handleChange(event) {
this.setState({items: event.target.value})
console.log(event.target.value);
}
handleSubmit(event) {
this.setState({
list: [...this.state.list, this.state.items],
items: ''
})
event.preventDefault();
}
handleRemove(index) {
const filteredArray = this.state.list.values.filter((_, i) => i !== index); // used underscore as a convention to address nothing is going there
this.setState({
list: filteredArray
});
}
render() {
return (
<div className='header main'>
<form onSubmit={this.handleSubmit} >
<label>
<input className='new-todo'
placeholder='What needs to be done?'
type="text"
value={this.state.items}
onChange={this.handleChange} />
</label>
</form>
<ul className='todo-list'>
{this.state.list.map((item, index) => (
<li className='list-view' key={index+1}>{item}<button className='list-view-button' onClick={this.handleRemove.bind(this, index) }>X</button></li>
))}
</ul>
<div className='footer'>
Remaining: {this.state.list.length}
</div>
</div>
);
}
}
export default ToDoList;
ok
and handleRemove doesn't work?
so first of all, that would be the best If I could strike-through the todos, without deleting and pushing them into a completed section
it is working
remove is working
i would like to line-through it
so strikethrough is just a styling thing right
yep
how is it possible to achive it with every individual item i click on?
in each item in your todo list
other than saving the text, save whether it's done
if done is true, apply the strikethrough
how should I implement it in the code? could u show me an example?
im a bit confused.
@uiharu-s has shown the element
got it
Hey , hi .. .Can anyone explain how do we go about creating the file in codepen .. i'd like the html editor css editor and script editor to be on the same plane together.. ?
but you're not keeping track of what's done right?
Anthing i'm doing wrong ?
@csnktms I need to go, but I suggest that your item and handleSubmit is in this format:
const newItem = { content: 'Buy milk', done: false }
this.setState({ item: newItem })
@JayyRaaj i think the layout is fixed
that said, you could put all your code in the html part I'm sure
Hi, I'm trying to achive similiar function of random quote machine sample code. But I run into same
type of bug when I try to access random quote API. I assume they are caused by accessing http api
from https webpage. I tried the methods below but they didn't work 1.replace JSON with jsonp data type 2.change codepen from https to http 3.change API URL from http to https 4.Add "https://crossorigin.me" ahead of the api url This is my code pen code: https://codepen.io/chocobrownie/pen/mmEJgq Please let me know if there's any feedback.
type of bug when I try to access random quote API. I assume they are caused by accessing http api
from https webpage. I tried the methods below but they didn't work 1.replace JSON with jsonp data type 2.change codepen from https to http 3.change API URL from http to https 4.Add "https://crossorigin.me" ahead of the api url This is my code pen code: https://codepen.io/chocobrownie/pen/mmEJgq Please let me know if there's any feedback.
You could use http for codepen
Just change your url to http
This is what I get when I change it: "Access to Font at 'https://production-assets.codepen.io/assets/telefon/bold/af889c53-1ee3-4868…50-3-b7a87e0fbd213943fae0c0ef5985635dd43fa9c24876b2725127a13ccaf4ab6a.woff' from origin 'http://codepen.io' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'https://codepen.io' that is not equal to the supplied origin. Origin 'http://codepen.io' is therefore not allowed access"
Also I heard that http is deprecated so it is good to try to avoid it
@kuriakinzeng
Please help:
How do I get my navbar to always be on top and above the main content? I used z-index:99; but it still is overlapping the content instead of above the content.
How do I get my navbar buttons to highlight white or active when clicked? My "ABOUT " button stays active.
Hello
@brendavee looks ok to me, just it has opacity of 0.9 so its basically see through
if thats what you mean...
for the second question search for scroll spy @brendavee
@brendavee - the navbar is always "over" the content - overlapping. the
z-index will not change that. What you have to do is put some padding-top in your div elements so that they do not scroll underneath. SOmething like that usually works.
hi ! Need help.Which the best way to make sticky footer
@AnnaVih here is five ways to do that: https://css-tricks.com/couple-takes-sticky-footer/
How to put those image frames people use on their portfolios?
I have a question: How come the page reports "data.shift" is not a function in my code? https://codepen.io/chocobrownie/pen/mmEJgq
hi everyone
var randomIndex = Math.floor(Math.random * 10);
//Change Content
$("#quote-content").html(quotesArr[randomIndex][0]);
$("#quote-title").html("-- " + quotesArr[randomIndex][1]);I tried to load random quotes from an array but it says "TypeError: Cannot read property '0' of undefined"
could you please give me some advice?
where did you define your quotesArr?
i can read it via quotesArr[0][0]
but can not via quotesArr[randomIndex][0]
in getJSON
@chocobrownie because data is an object, not array
var quotesArr = [];
$.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=10", function(json) {
json.forEach(function(val, index){
quotesArr.push([val.content, val.title]);
});
});
@elliotzengyi Math.floor(Math.random() * 10);
you forgot "()"
@Czpl in my case it is an object inside an array https://quotesondesign.com/api-v4-0/
random is a method
OMG
You can look at the example at the bottom of the page of discription
i am so stupid
@Czpl This is the output url https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=mycallback
and also i keep getting errors like
Uncaught Error: Bootstrap tooltips require Tether (http://tether.io/)
at VM5410 bootstrap.min.js:7
at VM5410 bootstrap.min.js:7
at VM5410 bootstrap.min.js:7
at VM5410 bootstrap.min.js:7
at VM5410 bootstrap.min.js:7
at VM5410 bootstrap.min.js:7
not sure what it means but doesn't affect my page
i am adding the twitter button now
@chocobrownie use that https://quotesondesign.com/wp-json/posts
you didnt specify parameters in your url
@elliotzengyi because you are using bootstrap 4
it need tether
needs*
load "https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js" before bootstrap
thanks, i removed the entire bootstrap js, now my page works great
i only need its css, lol
@Czpl I don't understand why it worked, what did you mean by I didn't specify parameter?
i checked again, it was &_jsonp=mycallback fault
it wraps response in /**/mycallback()
What does that mean?
What is mycallback function?
Oh so the output has a problem, the whole out put is within a function input bracket
But what caused that? I was simply following sample code
from their docs adding _jsonp parameter it returns a function you can execute
how could i make my Will Cruzan float to the left?
<div class = "container-fluid">
<ul class = "nav nav-pills float-right" <li class="nav-item">
<a class="nav-link active" href="#">Will Cruzan</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Contact Me</a>
</li>
</ul>
<ul class = "nav nav-pills float-right" <li class="nav-item">
<a class="nav-link active" href="#">Will Cruzan</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Contact Me</a>
</li>
</ul>
@WillTheCruzan "float-left"?
you could make it in separate list, and then float it left
<div class="container-fluid">
<ul class="nav nav-pills float-left">
<li class="nav-item">
<a class="nav-link active" href="#">Will Cruzan</a>
</li>
</ul>
<ul class="nav nav-pills float-right">
<li class="nav-item">
<a class="nav-link active" href="#">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Contact Me</a>
</li>
</ul>:bulb: to format code use backticks! ``` more info
when i do that it then creates 2 bar menus
it makes it so that Will Cruzan is above the rest
well you didnt show your css
.nav-pills{
font-size:1.7em;
background-color: black;
opacity: .7;
margin-left: -1%;
margin-right: -1%;
}
body {
background-image:url("https://images2.alphacoders.com/683/thumb-1920-68370.jpg");
background-size:cover;
}
it should work then
alright ima try again
Got it to work thank you @Czpl !
willthecruzan sends brownie points to @czpl :sparkles: :thumbsup: :sparkles:
:cookie: 266 | @czpl |http://www.freecodecamp.com/czpl
Is it necesaary to be a good programmer to become a good web developer?
@Czpl I found a problem with your method, https://quotesondesign.com/wp-json/posts does not give random quotes anymore, it is always the same
the _jsonp parameter was a problem
It gives me error if I do it this way, cuz the cross domain thing. jsonp is to avoid this problem
@Czpl
XMLHttpRequest cannot load https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access.
@kirbyedy i tried all methods and did not work.Maybe something wrong with my code
Someone help me with footer please...i lost 2 hours and still can not find out
Hi All..pls can someone help me with the base url of twitchtv api ?
@chocobrownie then you have to use that _jsonp
function generate() {
$.ajax({
url: "https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=myCallback",
jsonp: "callback",
dataType: "jsonp",
success: function(data) {
window[data];
}
});
}
function myCallback(data) {
console.log(data);
}
this should work
How to centre this picture ?
try adding the class text-center
@Czpl No, console.log didn't give me anything this time... I just think maybe this is a broken API? Maybe I should stop wasting time on it?
How could I center a title in the middle of a background?
@WillTheCruzan https://css-tricks.com/snippets/css/a-guide-to-flexbox/
:bulb: to format code use backticks! ``` more info
Woops!
Change the background-color property of the blue and yellow classes to their respective colors. Notice how the colors look different next to each other than they do compared against the white background.
What am I doing wrong?
<style>
body {
background-color: #FFFFFF;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
div {
display: inline-block;
height: 100px;
width: 100px;
}
</style>
<div class="blue"></div>
<div class="yellow"></div>
This message was deleted
@Egglton - just a helpful note - you can go back and edit your recent posts by clicking on the three dots next to the timestamp, and then make changes so you don't have to repost. You have a few minutes after the post was made to edit or delete it. It keeps the chat from getting too cluttered with repeated / junky posts.
@khaduch Thanks!
egglton sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2789 | @khaduch |http://www.freecodecamp.com/khaduch
@Egglton - not sure what you are asking in your post - there appears to be a small gap between the two divs? But what are you really wanting to know?
@khaduch It asks to change each class's background property to it's respective color (blue and yellow). But when I submit the answer above, it doesn't allow me to progress. Not sure if it is a bug or something I am missing
@Egglton - perhaps they want you to use the hex format notation for the blue and yellow?
<style>
body {
background-color: #FFFFFF;
}
.blue {
background-color:#0000FF;
}
.yellow {
background-color:#FFFF00;
}
div {
display: inline-block;
height: 100px;
width: 100px;
}
</style>
<div class="blue"></div>
<div class="yellow"></div>
@Egglton - which lesson is this, please?
@khaduch Applied Visual Design: Learn about Complementary Colors. I should mention this is on the beta. That is why I think it may be a bug. But I wanted to check first to see if I was missing something small.
@Egglton - oh, that's why I can't find it. Can you post the URL for the lesson, maybe I can see it directly?
@Egglton - I'm seeing the same thing. The divs are different colors, but the tests are not passing. Check for a bug that might be filed before filing another one, if you are going to file a bug report.
@Egglton - I see a bug report that says that this works in Chrome browser, but not in FireFox - are you using FireFox or other browsers?
@khaduch That would do it
I just went and tried it in Chrome and it seems to pass if you put the correct color codes in there.
@khaduch Gotcha. Thanks for your help!
egglton sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: egglton already gave khaduch points
@Egglton - if you want to read the discussion, it is issue #10749 - the actual link I'm looking at is freeCodeCamp/freeCodeCamp#10749
Man....now i want to test out the beta....now i need to start over :(
@chocobrownie Not sure if you got this figured out - they have a code sample on using ajax in the documentation. You'll get the same quote every time you click the "New Quote" button unless you specify "cache: false":
$.ajax({
url: "https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=",
cache: false,
success: function(data) {Add that to your $.ajax and your project will be finished :)
Its a sky
throws ultra ball
Ah pokemon
The only place where you can capture cute little monsters and make them your slaves
Hm
Good morning @Paradox5 :)
:balloon:
closest emoji to an ultra ball I think
How do I put a title in the middle of an image background?
Cant deny that chespin is adorable
@WillTheCruzan If you're using
background-image in your CSS, you should be able to place text anywhere you want over it. Otherwise, you have to use position: absolute
how do I move text a few lines down?
Margin-top: 50px
Use margin-top
Try that
oh ok
No capital
God dang it captial autocorrect
Grrr
<header>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lobster" />
</link>
</header>
<div class = "container-fluid">
<ul class = "nav nav-pills float-left"
<li class="nav-item">
<a class="nav-link active" href="#">Will Cruzan</a>
</ul>
<ul class="nav nav-pills float-right"
</li>
<li class="nav-item">
<a class="nav-link active"
href="#">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Contact Me</a>
</li>
</ul>
<div class = "pageOne">
<h1 class="text-center">Will Cruzan</h1>
</div>
<div class="btnlist text-center">
<a class="btn btn-default" href'#'>Twitter</a>
<a class="btn btn-default" href'#'>GitHub</a>
<a class="btn btn-default" href'#'>CodePen</a>
</div>
</div>
im almost done with the tic tac toe with the two player version. Now i have to add the bot (vs computer). but i seriously have no clue on how to do that. one way would be to throw in random computer moves but thats too random and easy to do. so(maybe if i put it as an "easy" diffuculty)... any ideas? :P
Oh god text overload
Ok cant help you with chess not there yet unfortunately
@WillTheCruzan whats the problem
And please format the code in the future
<header>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lobster" />
</link>
</header>
<div class = "container-fluid">
<ul class = "nav nav-pills float-left"
<li class="nav-item">
<a class="nav-link active" href="#">Will Cruzan</a>
</ul>
<ul class="nav nav-pills float-right"
</li>
<li class="nav-item">
<a class="nav-link active"
href="#">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Contact Me</a>
</li>
</ul>
<div class = "pageOne">
<h1 class="text-center">Will Cruzan</h1>
</div>
<div class="btnlist text-center">
<a class="btn btn-default" href'#'>Twitter</a>
<a class="btn btn-default" href'#'>GitHub</a>
<a class="btn btn-default" href'#'>CodePen</a>
</div>
</div>
css:
.nav-pills{
font-family: lobster;
font-size:1.7em;
background-color: white;
opacity: .7;
margin-left: -1%;
margin-right: -1%;
}
.btn-default{
background-color: black;
border-color: black;
font-size: 1.7em;
}
background-color: blue;
.title{
font-family: lobster;
padding: 0px;
margin-top: 50px;
}
body {
background-image:url("https://images2.alphacoders.com/683/thumb-1920-68370.jpg");
background-size:cover;
height: 800px;
}
.float-right {
background-color: white;
}
.float-left{
background-color: white;
}
I cant seem to change the h1 text font and margin (sorry if this a lot)
@WillTheCruzan can you send a link to your codepen instead? That's a lot of unformatted hard to read code :p
oops im sorry
lol, it's okay
Ok add an id to the h1
Then margin top it
Or class
Which ever you prefer
thats what i did but it wont work
Because i dont see any thing related to the h1
Wait a minute
<ul class = "nav nav-pills float-left" <li class="nav-item">
<a class="nav-link active" href="#">Will Cruzan</a>
</ul>
<ul class="nav nav-pills float-right" </li>
<li class="nav-item">
<a class="nav-link active" href="#">About Me</a>
</li>> at the end of your <ul> tags. and your </li> is misplaced on the fourth line. Plus, if you float all of that, your title is going to sit right on top of everything.
Do tou want the h1 below the buttons @WillTheCruzan
yes
Sky
Just move the h1 element below the buttons
Boom
Oh
Or use br
No, do not use <br>....
Why not
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br
Notes
Do not use <br> to increase the gap between lines of text; use the CSS margin property or the <p> element.
sigh
TIL
¯\_(ツ)_/¯
the issue is that when I add the title class to h1 it doesn't "link" with the css .title
Hello :). I'm trying to get back to FCC after not doing any programming for two months and I'm trying to recall what I've learned in the past. Could you guys tell me if my use of
https://codepen.io/tstusr/pen/ZKpXQx?editors=1010
I'm trying to get a working early version of the weather app so I can build from there
data is correct here?https://codepen.io/tstusr/pen/ZKpXQx?editors=1010
I'm trying to get a working early version of the weather app so I can build from there
Y
function caseInSwitch(val) {
var answer = "";
// Only change code below this line
switch (val) {
case 1:
val = "alpha";
break;
case 2:
val = "beta";
break;
case 3:
val = "gamma";
break;
case 4:
val = "delta";
break;
}
// Only change code above this line
return answer;
}
// Change this value to test
caseInSwitch(1);
@Remus432 you are setting val not answer
oh
yeah val is the argument
thanks man
@tstusr441 You are using
function(data) correctly, but not parsing the JSON correctly. There is no JSON yet either way because you need an API key for your weather API url, and it needs to start with HTTP://. To save you some time as you get back into coding, codepen will start requiring HTTPS:// soon, so it's probably best to choose a different weather API like Weather Underground, Apixu, or Dark Sky. Those are all free and support HTTPS.
Hey, i'm having an issue where i'm doing a story on the country "Norway", i've added the national song, but i want the text to break after a couple of words, been trying with <br>, but the sentences are still too long. Thanks for help in advance.
@Streeter220 You can apply a width to the text in your CSS
<br> is meant for poems, addresses, etc. so it should be breaking the line for you. If it isn't maybe there's an error somewhere - show us your code and maybe we can help
My h1 wont link with .title any ideas?
ah, thanks. i Solved it by giving my <p> a class, and making the width of the div smaller. But will this make any problems?
hey wazzup guys
Morning, Jorge
@Streeter220 That seems like it should work too. Can't really say if it will cause any problems without seeing all of your code, but in general, no, it's a good approach.
all good Sky?
@SkyCoder01 , is there a way to center a <p> in the middle of the screen without using margins?
I broke my toe...aside from that, doing just fine
@Streeter220 Use text-align: center on the outer element
you did? that sucks! haha .. do u have a cast?
@WillTheCruzan I think you need to try and use the navbar instead of nav pills. https://v4-alpha.getbootstrap.com/components/navbar/
I tried to write something up quickly for you, but you have some fancy CSS and it's probably better to let you play around with that instead ^^
I tried to write something up quickly for you, but you have some fancy CSS and it's probably better to let you play around with that instead ^^
No cast! Just tape to keep it from moving and a lot of ice, elevation
An air boot I have to wear for 4 weeks....
alright thanks @SkyCoder01 !
willthecruzan sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1161 | @skycoder01 |http://www.freecodecamp.com/skycoder01
ahh ok nice .. yeah at least no cast, that's good .. i guess u won't be moving a lot in the next few weeks
I can walk around alright, just have to be careful not to bump my toe into anything.
But yeah, no sports... for a while
@SkyCoder01 Tried doing text-align: center to my paragraphs class or id, but didn't center it, what am i doing wrong, haha.
It's really hard to say without seeing more of the code. On a blank page, that should work fine.
yeah .. must suck, i've never broken a bone. One time i kinda dislocated my knee and the popped it back in at the same time, that sucked ..
Ouch, that sounds painful
What other options than <br> can i use, i'm trying to divide each verse, works with <br>, but been told i shouldnt use it?
@Streeter220 If it's for a song, that is what <br> is meant for.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br
The HTML <br> element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.
Poems, street addresses, etc.. That's what it is designed to do :)
Do not use it to make a bunch of vertical space though - use margins.
guys need help with footer!The footer not lay on the bottom of page.Try few thing it didn't work
ah okay, thanks :D
hey Sky .. how did you do the smallest common multiple challenge ? not the code, but how did you tackle the problem?
Thanks @SkyCoder01
tstusr441 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1162 | @skycoder01 |http://www.freecodecamp.com/skycoder01
@AnnaVih it does lay at the bottom of the page?
@OrangeKulture no
@OrangeKulture I used the euclidean algorithm to get the Greatest Common Divisor. Wikipedia had some pseudo code that helped me walk through it, I'll try to find the link
@OrangeKulture if I go to your pen and go full page and scroll, then i see the footer at the bottom of your site
@#%^ .. i meant @AnnaVih
@AnnaVih what would you like to do with the footer?
@SkyCoder01 and then you run it through the array of numbers?
least common multiple of a,b = (a*b) / the greatest common divisor of a,b
https://en.wikipedia.org/wiki/Least_common_multiple#Computing_the_least_common_multiple
https://en.wikipedia.org/wiki/Least_common_multiple#Computing_the_least_common_multiple
I would appreciate it if someone could critique my fast try for the tribute page and tell what I should change.
Yeah, then you run that formula through each number in the array
right .. yeah that makes sense
I was just trying to do it all on my own, you know coming up with the logic .. and I suck at high level math, so i was not aware of that algorithm
well i dont suck, i just havent done any classes or anything
i want footer lay exactly on the bottom of page...but for the moment there is white space around 3mm between footer and page
@AnnaVih ahh ok ...
hold on
It's boring, but the wikipedia articles on Least Common Multiple, Greatest Common Divisor, and Euclidean Algorithm will help you come up with a good solution
@TDGA I don't know much but there are too many container div. One container div is enough I guess
@SkyCoder01 yeah i did already solved it .. but i wrot my own function kinda .. im sure there's ways to make it with less code, but i was trying to do come up with the logic on my own ...
dam was that a mistake :smile: :smile:
lol, bet you learned a lot :)
@mapacarta yea I need to clean the code up a bit.
@AnnaVih its the margin you have on the <p> elements
i was just typing that
yeah i did .. here is my code in case you wanna tear it apart .. i was sure there was supposed to be a much simpler way .. but anways..
@TDGA not sure but you shouldn't nest a container inside another
function smallestCommons(arr) {
var newArr = [];
var total, firstRes, secondRes, test;
var count = 1;
// sort array smallest to largest
arr.sort(function(a, b) {
return a - b;
});
// new array with all values between two ints
for (var i = arr[0]; i <= arr[1]; i++) {
newArr.push(i);
}
for (var d = 0; d < arr.length; d++) {
test = arr[d] * count;
while (true) {
if (testArr(test)) {
if (arr[d] === arr[0]) {
firstRes = test;
} else {
secondRes = test;
}
count = 1;
break;
}
count++;
test = arr[d] * count;
}
}
if (firstRes === secondRes) {
console.log(firstRes);
}
// function to test if it's divisible by all
function testArr(val) {
var score = 0;
for (var j = 0; j < newArr.length; j++) {
if (val % newArr[j] === 0) {
score += 1;
}
}
if (score === newArr.length) {
return true;
} else
return false;
}
} // end
smallestCommons([1, 13]);
shit that's long .. sry people for the spam
@AnnaVih the default for bootstrap gives that p tag a bottom margin of 1 rem (at least with bootstrap 4)
@mapacarta Isn't it ok if I nest two containers inside one so I can change the entire thing and the 2 containers separably?
Love seeing how everyone figures this stuff out. Nice work @OrangeKulture but yeah, maybe more efficient to do it differently. Mine is pretty long too - around 25 lines of code I think.
@SkyCoder01 thanks, yeah .. there's def room for improvement .. i guess we newbs use a lot of loops :smile:
orangekulture sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1163 | @skycoder01 |http://www.freecodecamp.com/skycoder01
@TDGA "due to padding and more, neither container is nestable." days bootstrap documents
@TDGA you should use row
@gulptech and what does it mean?
@SkyCoder01 ... and by we, I mean me ... (insert .okay rage face meme here)
@AnnaVih it means every time you use a <p> element there will be margin added to the bottom (1 rem)
@mapacarta ok thanks will change it
:warning: @mapacarta's account is not linked with freeCodeCamp. Please visit the settings and link your GitHub account.
tdga sends brownie points to @mapacarta :sparkles: :thumbsup: :sparkles:
lol, @OrangeKulture :rage4:
@AnnaVih rem is a unit of measure like em, px, etc
hahah
if only cbot would serve our conversation needs by supply the right meme at the right time .. the world would be a better place
@gulptech yes i know what is rem em px, but how it can help?
@AnnaVih bootstrap adds that to all p tags..so you need to take that into account when using it
@AnnaVih since you used a p tag in your footer...there will be a margin at the bottom
hmm...I am liking the beta of freecode camp so far. I just wish they listed the requirments for the challenges insead of going to the example page and running the tests.
how do I make buttons link to a different page?
hi, can someone thats good with JSONP that has a few munutes help me debug a problem I'm having with my twitch API project?
@gulptech how so ? u mean the challenge page with the video?
beta looks promising .. can't wait for the release
yep...i know the videos don't work...but the user stories(requirements) are not listed
i have been wanting to start out on some backend projects .. ive done a lil node and mongo in the past, but i saw they want us to use Cloud 9 .. so im not sure what to use
@gulptech oh right! yeah u can't do much .. i was also hoping they included some more challenges on some other certificates here, but i guess they won't include more content here, if they're working on the beta
@AnnaVih thanks for the pen, I cheated a bit :D
Hello everyone, I'm struggling to add a frame around my page "Tribute Page" ! Any help will be appreciate. Thanks a lot. Regards.
cbot should at least say what it can do .. dont u think?
you called?
list functions
commands
commands:
- isCommand
- cbot
- botversion
- botstatus
- botenv
- archive
- init
- tooNoisy
- rooms
- find
- commands
- music
- announce
- eightball
- wiki
- thanks
- about
- showInfoCallback
- explain
- bot
- hi
- index
- thank
- log
- archives
:)
umm ok .. thats someting
hahah maan i would love to work on AI
@mapacarta ??
@kembolino You might be interested in the Jumbotron class: http://v4-alpha.getbootstrap.com/components/jumbotron/
cbot knows all :D
you called?
@mapacarta ?? (..suspenseful music...)
can we get explanation of commands on chat?
I don't think half of those commands work, I tried them in camperbotplayground the other day. Maybe some of them are specific to certain rooms.
the very essence of cbot resides within FCC, tho .. yes? :D
camperbot play ground sounds fun ..
pure joy :joy:
hahah yeah .. if i ever become a decent coder, i'd love to play around with some AI logic, definitely fun for me
@AnnaVih I was having a hard time in building personal portfolio task, I was about to quit making it. I saw your pen and it helped me. so thanks
mapacarta sends brownie points to @annavih :sparkles: :thumbsup: :sparkles:
:cookie: 227 | @annavih |http://www.freecodecamp.com/annavih
<div class="btnlist text-center">
<a class="btn btn-default" href'#'>Twitter</a>
<a class="btn btn-default" href'#'>GitHub</a>
<a class="btn btn-default" href'#'>CodePen</a>
</div>
How can I make these buttons links?
<a class="btn btn-default" href'#'>Twitter</a>
<a class="btn btn-default" href'#'>GitHub</a>
<a class="btn btn-default" href'#'>CodePen</a>
</div>
How can I make these buttons links?
href?
oh my bad im stupid
@SkyCoder01 @OrangeKulture Building chat bots for streaming services is a great way to get started with some basic AI ;)
Not stupid @WillTheCruzan :) just coding.
@jdtdesigns oh man .. that sounds awesome, have you done any yourself?
One of the first ^^
@mapacarta you are welcome... i did not sleep 2 nights for it=)))
have u guys seen the tshirt that says ... hold on, let me find it
Nope, haven't seen that one
www
hahaha
hahahaha
@OrangeKulture A few. I currently have one that i'm working on in my free time. Here's a couple of vids I streamed to youtube. I'll probably keep adding them as I had about 30 people show up in chat to watch lol.
https://www.youtube.com/watch?v=GRuhtODBFd8
https://www.youtube.com/watch?v=GRuhtODBFd8
really cracks me up
@jdtdesigns oh shit dude, for sure .. that's awesome
gonna watch them
what environment do you use?
@AnnaVih here is mine: http://codepen.io/mapacarta/full/Njrvvr/
@AnnaVih still too ugly
it's a mix of quite a few things (Conemu, Sublime, cygwin, linux shells, xmpp clients, irssi clients) @OrangeKulture
took awhile to get a nice env together on windows
@mapacarta so you can change it now)
i have a nice one on a mac at work too :D
@jdtdesigns that sounds awesome .. hopefully one day
<div class="row">
<div class="col-md-16"><button type="button" class="btn btn-primary btn-lg"><i class="fa fa-facebook"></i></button></div>
<div class="col-md-16"><button type="button" class="btn btn-primary btn-lg"><i class="fa fa-facebook"></i></button></div>
<div class="col-md-16"><button type="button" class="btn btn-primary btn-lg"><i class="fa fa-instagram"></i></button></div>
<div class="col-md-16"><button type="button" class="btn btn-primary btn-lg"><i class="fa fa-linkedin"></i></button></div>
</div>
I'm trying to build this profile back but none of my bootstrap is working. thoughts?
*Profile page
@Redfox403 did you import the fa css file?
font-awesome.min.css i think its called
```
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
also you can't have col-md-16
the max no. of rows is 12
I thought I did. This is the link I have on my page: //maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css
ahh gotcha.
I didn't know there was a limit.
@Redfox403 the numbers in any particular row must always add up to 12
that's how the grid works
that's how the grid works
whats the coding to make a new tab when openning a link?
Hi guys! Can someone help me with minimax algorithm? ty :))
so if you have one col-md-4 another should be col-md-8
@UnovaXan Thanks!
redfox403 sends brownie points to @unovaxan :sparkles: :thumbsup: :sparkles:
:cookie: 272 | @unovaxan |http://www.freecodecamp.com/unovaxan
@WillTheCruzan
target="_blank"
I am stuck... and I don't want to watch other people's code and complete Tic Tac Toe's AI
@WillTheCruzan target="_blank"
thanks @UnovaXan and @SkyCoder01
willthecruzan sends brownie points to @unovaxan and @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 273 | @unovaxan |http://www.freecodecamp.com/unovaxan
:star2: 1165 | @skycoder01 |http://www.freecodecamp.com/skycoder01
cbot
you called?
hey cbot
cbot hey
you called?
cbot slut
you called?
@drowningpool5 XD
it listens well
haha
@OrangeKulture You'll also get some real seasoned devs coming into your chat. I had a 15 year dev come in and give me tips. I ALWAYS take tips from these guys/girls. The information will usually take you to the next level. ;)
I changed the link and the grid but it still looks wrong. All my buttons are showing like a list on the left side of my screen..
guys any tips on Tic Tac Toe?
@Redfox403 Click on "Settings" in codepen, then click on "CSS". Add this link to bootstrap: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
@jdtdesigns oh yeah for sure .. i bet it's really good. Even at my level, you get to learn a lot from other ppl
@SkyCoder01 you're a saint. Thanks!
redfox403 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1166 | @skycoder01 |http://www.freecodecamp.com/skycoder01
:angel:
@OrangeKulture How many years have you been coding?
@drowningpool5 my process was, ...have the computer check for winning moves... check for blocking moves, and i just added a few cases other than those two, ...hit center if its open, or hit a corner if its open, ...its almost unbeatable
@jdtdesigns not too many at all .. maybe 2 on and off , i've started full time learning less than a year ago
or about a year .. i did a lot of reading on a lot of stuff, before i decided to really just do this
played around with LUA and corona for about another year, before all of this probs .. that's a lot of fun too
How do I get temp_f from this api? I'm using
$.ajax({
url: "https://http://api.wunderground.com/api/31b64aae5013a9b7/conditions/q/37.776289,-122.395234.json",
dataType: "jsonp",
success: function(data) {
var temp_f = data["current_observation"]["temp_f"];
console.log(temp_f);
$("#temperature").html(temp_f);
}
});API: http://api.wunderground.com/api/31b64aae5013a9b7/conditions/q/37.776289,-122.395234.json
@OrangeKulture Nice, the journey never ends :P
Nevermind, had an error in my URL :P
hey can someone explain to me this code i found, i cant figure out there more complicated conditions inside the filter() and how return false and return true is working here
function whatIsInAName(collection,source) {
// What's in a name?
var arr = [];
var keys = Object.keys(source);
var filtered = collection.filter(function(item1){
for(var key in source){
if(source[key]!==item1[key])
return false;
console.log(item1[key])
}
return true;
})
console.log(filtered)
}
and why does item1[key] works, isnt it only supposed to apply to source
@Pagnito Do you know how .filter() works in general?
yea i think, it filter out all the elements that pass a certain condition
@jdtdesigns still there?
@Pagnito In a business call. Be back in just a minute.
k
@Pagnito The filter iterates over the array and returns each item one by one to the callback function. You can then use the data inside each of the array values to either remove that value by returning false or keeping it by returning true.
So they're iterating over the collection and for each value in the collection array, they're looping over the source array and checking if the current collection object key matches the key in the source object. If they do, remove that object from the collection, else keep it there.
how come item1[key] works tho, isnt key only applies to for in loop for source?
Hello all!
can someone here help me with PHP?
@Misaiah what's the question?
key is the current key in the collection object @Pagnito
@jdtdesigns I was wondering, is the only significance in using PHP establishing the linkage between a server and a website?
it's a string value of the key, so you can pass it to the source loop too
@jdtdesigns but it was declared in the for in source
correct, so you can use it inside the for anywhere you plase @Pagnito ;)
I have created a site, and am trying to complete my contact us form and dont see a way around using PHP. I feel that it would be necessary in using it because it never hurts to learn I suppose @jdtdesigns
@jdtdesigns ah
and I know nothing about PHP
@Misaiah If it's just a contact form, you don't need php.
but to link the informatino submitted in the contact form to an email....still no need for PHP?
@Misaiah use this:
<form action="https://formspree.io/your@email.com"
method="POST">
<input type="text" name="name">
<input type="email" name="_replyto">
<input type="submit" value="Send">
</form>
its that easy?
yep, formspree service is great for simple data that needs to passed to an email
it handles the backend for you
Do I have to sign up for the formspree service?
just don't use it for secure stuff like credit cards and such
nope @Misaiah works out of the box ;)
okay. And in that case, PHP would be recommended?
php or any other backend will be used for that @Misaiah
you'd need to do token verification with your payment service before taking/charging payments
okay. and you can embed PHP in an html file right? or do you have to creat an external php document linked to the html?
php isn't html, but you can write html inside a php file
so no, you can't just write php in static html
won't work
so it would be best to use <link.....rel....type/>?
basically to creat a .php file?
and linke it to the html?
link*
@jdtdesigns one thing i still dont uderstand is in the third case, the source object has two keys and one matches all three collection objects, but it should return only the ones that have both the keys of the source
whatIsInAName([{ "a": 1, "b": 2 }, { "a": 1 }, { "a": 1, "b": 2, "c": 2 }], { "a": 1, "b": 2 })
if the server has php installed, then you can submit to a php file and the php file can handle the request
@Misaiah
I think I understand. I am just trying to link my site to my gmail and thought the only way around that is PHP
@Misaiah That's more complex as google requires oauth verification before sharing account data with sites
@Pagnito link me to the fcc challenge please
@Misaiah If you use your gmail with your contact form, use a burner account or bots will send you lots of spam :p
Hmmm. do you recomend me creating another email from a different server @jdtdesigns ?
a burner account? @SkyCoder01
Set u a new gmail.com email account
@jdtdesigns the code works, but i still cant understand how it filters out the ones that have all the keys matching source
just create a contact_submission@gmail.com account @Misaiah
Can anyone help me here? Navs are pretty hard to me so I got one from Bootstraps documentation and changed as I wanted, but now I see that when it collapses it just disappear and there's no button to make it visible again
One that you don't mind getting spam on. Bots scan web pages for email addresses and send junk mail
I see. good Idea! and I can use that with :smile:
<form action="https://formspree.io/contact_submission@gmail.com"
method="POST">
Text <input type="text" name="name">
Email <input type="email" name="_replyto">
<input type="submit" value="Send">
@SkyCoder01 @jdtdesigns ?
correct
Yes :)
awesome! thank you guys!! @SkyCoder01 @jdtdesigns
misaiah sends brownie points to @skycoder01 and @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 919 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
:star2: 1167 | @skycoder01 |http://www.freecodecamp.com/skycoder01
@Jaizon I think navbar-dark is from a previous alpha version of Bootstrap 4. If you replace your first line of code with this, it will work:
<nav class="navbar navbar-toggleable-md navbar-inverse bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav1" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>You'll also need to add jQuery and Bootstrap.js to the JavaScript settings in your codepen.
@Jaizon Actually, use
navbar-inverse instead of navbar-light in that example above (edited)
How do I change the color of the text in a nav bar? I cant get it to change.
http://codepen.io/WillTheCruzan/pen/qmaBvP?editors=1100
http://codepen.io/WillTheCruzan/pen/qmaBvP?editors=1100
I cleaned up unnecessary code and added some comments to maybe help you @Pagnito
function whatIsInAName(collection, source) {
return collection.filter(function(obj) {
var key;
for ( key in source ) {
// if value of source['first'] doesn't match value of obj['first]
// remove the object from the collection
// the value of the first object in the collection matching obj['first'] is Romeo
if(source[key]!==obj[key])
return false;
}
return true;
});
}
@WillTheCruzan In your CSS, use this:
.navbar-light .navbar-nav .nav-link {
color: purple; /* or whatever color you want :) */
}
ohhhh ok
You'll have to apply a similar CSS for the active element and the brand element. Like:
.navbar-light .navbar-nav .nav-link {
color: purple; /* or whatever color you want :) */
}
.navbar-light .navbar-nav .nav-link.active {
color: green;
}
.navbar-light .navbar-brand {
color: red;
}Best way to figure this stuff out is to right-click the element and choose "Inspect" to see how it is styled by bootstrap.
@SkyCoder01 I changed that but still, when it collapses the button now shows up, but the drop down menu doesn't appear when clicked
@Jaizon Did you add jQuery and Bootstrap.js to the JavaScript settings in your codepen?
yep
nvm, I see you did - make sure that jQuery is listed first - above bootstrap.js
@SkyCoder01 Oh, thank you, now it works
jaizon sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1168 | @skycoder01 |http://www.freecodecamp.com/skycoder01
thanks @SkyCoder01 ! Also, how would I change the color of the navbar-brand?
willthecruzan sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1169 | @skycoder01 |http://www.freecodecamp.com/skycoder01
@jdtdesigns so when it goes over the second object in collection which didnt get get pushed out the first time, then it doesnt find the 2nd source key in it and so then it pushes it out
@WillTheCruzan I put it up there in that second CSS example, it's the third one listed. Practice using your developer tools inspector and see if you can find it - really helpful for future projects. Great work on the new navbar, by the way.
@Pagnito It may help to use a smaller data set and play around with it in a codepen to see what's going on.
.every() would be a better choice inside that filter, IMO - returns true or false based on a condition without you having to set up a for..in loop with a condition that returns false.
(don't let me jump in and confuse though :) )
@SkyCoder01 Post your .every example for him too. ;)
return collection.filter(prop => {
return Object.keys(source).every(name => {
return prop[name] && prop[name] === source[name];
});
});
I realize now I should have used .hasOwnProperty(), but it worked at the time.
and you throw in es6 just for kicks too lol
started doing that about halfway through the challenges lol
I thought for...in was ES6? Maybe for..of?
for..in definitely not ES6 lol
yeah
for in is old school
sry stepped away for some food, ok, yea i see, i seen the every method and i think i understand that solution, but i also wanted to understand the other one too
can you add css to bootstrap clases?
@aceroAD Yes, you can
var count = 0;
function cc(card) {
// Only change code below this line
return "Change Me";
// Only change code above this line
}
// Add/remove calls to test your function.
// Note: Only the last will display
cc(2); cc(3); cc(7); cc('K'); cc('A');
You will write a card counting function. It will receive a card parameter and increment or decrement the global count variable according to the card's value (see table). The function will then return a string with the current count and the string "Bet" if the count is positive, or "Hold" if the count is zero or negative. The current count and the player's decision ("Bet" or "Hold") should be separated by a single space.
@Remus432 I don't see any of your code. Can you post what you've done so far?
var count = 0;
function cc(card) {
// Only change code below this line
if (card == 2,3,4,5,6) {
count++;
return count + " Bet";
}
else if (card == 7,8,9) {
return count + " Hold";
}
return "Change Me";
// Only change code above this line
}
// Add/remove calls to test your function.
// Note: Only the last will display
cc(2); cc(3); cc(7); cc('K'); cc('A');
var count = 0;
function cc(card) {
// Only change code below this line
if (card == 2,3,4,5,6) {
count++;
return count + " Bet";
}
else if (card == 7,8,9) {
return count + " Hold";
}
return "Change Me";
// Only change code above this line
}
// Add/remove calls to test your function.
// Note: Only the last will display
cc(2); cc(3); cc(7); cc('K'); cc('A');
@Remus432 Comparisons can't be used like that. For example,
2 is greater than 1 and less than 7 though (hint)
2 == 2,3,4,5,6 would return false because 2 is not equal to 2,3,4,5,6.2 is greater than 1 and less than 7 though (hint)
sky
need help here
You're at twitch already? :) you've been coding!
why is my variable i is undefined?
yeah man
:D
@SkyCoder01 Don't you wish we could chain operations like that lol
lol, would make things convenient if JS could just read our minds a little more :)
@alfredim88 This is a good read on why that's not working for you: http://stackoverflow.com/questions/13343340/calling-an-asynchronous-function-within-a-for-loop-in-javascript
TL;DR, use a .forEach() instead of a for loop.
TL;DR, use a .forEach() instead of a for loop.
good hint
Thank's @SkyCoder01
alfredim88 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1170 | @skycoder01 |http://www.freecodecamp.com/skycoder01
But can you explain me why the streamers variable is scooped and the i is not?
the
i is the variable that's changing on every loop
streamers is the same array with the same elements inside the whole time
Try this and you'll see the same issue:
for (var i = 0; i < 10; i++) {
setTimeout(function() {
console.log(i)
});
}
not clear yet
but i will read about it
take a look at my wiki challenge
CAN i use background image in CodePan ???
yes
@alfredim88 Nice work. Try hitting the "Tidy" button for your code - it will help make it more readable. The down arrow, in the top, right-hand corner of the HTML, JS, and CSS panels. "Tidy HTML", "Tidy CSS", "Tidy JS", there's also an analyze option that will give some pointers.
ok Thank you @SkyCoder01
alfredim88 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: alfredim88 already gave skycoder01 points
nice tips!
Those settings have helped me a bunch
made it! thank you @SkyCoder01
alfredim88 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: alfredim88 already gave skycoder01 points
I cant get my navbar to go to the very top of the page
margin = 0
i did that
body margin
oh the body has a margin?
yes
try it
@SkyCoder01 Thanks, I'll have a look !
kembolino sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1171 | @skycoder01 |http://www.freecodecamp.com/skycoder01
@WillTheCruzan Add the
fixed-top class to your navbar
I'm guessing you mean you want to keep it at the top when you scroll?
well the nav bar is like 20 pixels below the top of the page
have you tried the body margin = 0?
yes
not working?
yea
good
:)
yes as in yes to not working
LOL
paste your link here
:joy:
lol
Time to share code :p
you don't have the body margin = 0
i dont?
oh i think i forgot to hit save
@WillTheCruzan hint*
<div class="first-page">
yeah!
that's wky the body margin is not working
@WillTheCruzan just add fixed-top class to the navbar like @SkyCoder01 said
got it! thanks @SkyCoder01 and @alfredim88
willthecruzan sends brownie points to @skycoder01 and @alfredim88 :sparkles: :thumbsup: :sparkles:
:star2: 1172 | @skycoder01 |http://www.freecodecamp.com/skycoder01
:cookie: 268 | @alfredim88 |http://www.freecodecamp.com/alfredim88
what is brownie points?
points given when you say thanks to someone
that's it?
If you get enough brownie points, you get a free trip to Las Vegas :)
(not really)
lol
do you get any acess because of brownie points?
No, they're worthless :)
lol ok
You get one for every challenge you complete and every time someone says thanks
it's nice to be apreciated
That's true
gonna finish my challenge
I have the whole day to code tomorrow because im still sick
@SkyCoder01 Hmm i think they can be good to show off for job applications, but nothing more
are any of you guys in school?
Yeah
what grade are you in?
I'm in college
@WillTheCruzan College, halftime
what are you guys going to college for?
@WillTheCruzan change the from margin-top to padding-top .pageOne
Linguistics
no idea what that is lol
Study of languages :)
@SkyCoder01 Oh rly? My friend studies linguistics of russian and german :D
Or, as some say, getting ready to be a barrista when I graduate lol
now if he could only speak more than english it would be great :)
I study Romance Linguistics, spanish italian portuguese, etc..
thanks @gulptech
willthecruzan sends brownie points to @gulptech :sparkles: :thumbsup: :sparkles:
:cookie: 303 | @gulptech |http://www.freecodecamp.com/gulptech
when i get into high school im going to take coding classes
I wish I did that, just took typing classes lol
lol
what does <meta> do?
Lots of things: https://github.com/joshbuchea/HEAD#meta
http://codepen.io/WillTheCruzan/pen/qmaBvP
I cant get rid of the white space any suggestions?
I cant get rid of the white space any suggestions?
@SkyCoder01 Hmm i have enough coding classes now :D with studies in CS
Sky ive been meaning to ask
Whats your wpm
@alpox lol, I can imagine. My roommate is a CS major
@SkyCoder01 Cool :D does he help you code?
@Paradox5 Around 70 unless I take one of those typing tests online and do it over and over lol
Cool
@alpox Yeah, he helps a lot, we go to a JavaScript meetup on the weekends too
@SkyCoder01 Cool :D ive never been to any meetups. Is it worth it?
I'm not even sure if there are any in switzerland
He's the one who got me to sign up for free code camp, so I could understand what he was talking about lol
Ah :D nice. And you like it enough to stay?
The one we go to is great - like 150 people :)
So many :smile: faces
Cool thing :D and what do you do at such meetups?
Yeah, I have to admit though, i like the design side of things much more than the coding
We just sit around, drink coffee, beer and work on code on our laptops
chat with people about problems we have and usually someone say - oh someone over here can help you with that!
Sounds beautiful
Then we sit down, go over each others code and help each other out. It's fun
This sounds cool, right :D
You can always try to start one? That probably would look good for a job too
@alpox Not sure how close you are to Zurich, but https://www.meetup.com/opentechschool-zurich/
At least some people who might want to do another meetup :)
@SkyCoder01 I go to university to zurich :D
@SkyCoder01 Sounds cool, but they seem to prefer C++ :D
Ive never seen a sentence from you without a smile @alpox
:smiley:
Hi guys, i have a table with 9 td, how do i randomly display an "X" or an "O" on them?
@fez994 A loop?
If it's jquery, you can loop through all elements with a class name or tag (<td> using $.each
otherwise, with vanilla js, getElementsByClassName or getElementsByTagName and use a for loop
otherwise, with vanilla js, getElementsByClassName or getElementsByTagName and use a for loop
Yeah i was thinking about generating a random number like var random = Math.floor(Math.random() * 9); and simply put that number in the position on the table
wait i'll put my code into a pen
I haven't done tic tac toe yet, but learning a lot from the challenges everyone else are hitting
@fez994 Yeah, you could give each square a class name and then with your current random number code, you assign a random square the aiChoice letter:
function aiMove() {
if(playerChoice === "X") {
aiChoice = "O";
} else {
aiChoice = "X";
}
console.log('ITS AI TURN');
var random = Math.floor(Math.random() * 9);
document.getElementsByClassName('piazza')[random].textContent = aiChoice
}^^ You'll need to check it isn't already selected by the user and choose another, but that's the general idea.
@Paradox5 Hmm i have to express my feelings, you know? :D
@fez994 Go sure to eliminate the already occupied positions from the result
@SkyCoder01 I've done it yesterday afternoon. Was fun :D
Probably best to have an array with squares remaining and choose from that?
Except that that stupid AI doesn't want to let me win
@SkyCoder01 An array with positions, yes
Oh yeah, sorry, I didn't see it! You mentioned it above and I forgot to ask - think I was talking to three people at once
@SkyCoder01 Ah well http://codepen.io/alpox/pen/pPbMog?editors=0010
The styling is not very good, i cared more about functionality
You can tell the computer thinks hard for the right move :)
Function
Wonder if you can have the AI play against the same AI and learn - maybe there's a deep flaw in minimax?
@SkyCoder01 @alpox Thank you guys, i'm slowing figuring it out
fez994 sends brownie points to @skycoder01 and @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 971 | @alpox |http://www.freecodecamp.com/alpox
:star2: 1175 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Breaking news tic tac toe ai takes over the world
^^ Exactly :p
I'm trying to put in a navbar on my tribute page using this site. https://www.w3schools.com/bootstrap/bootstrap_navbar.asp for some reason it doesn't work in codepen. any ideas why?
@chouston3 W3 Schools uses Bootstrap 3, but codepen gives you Bootstrap 4 by default. Open your codepen settings and replace bootstrap 4 with this link to Bootstrap 3: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
@SkyCoder01 Haha thats just because of my timeout :D
Oh lol, I was imagining some intense computation
(for 9 squares) :joy:
@SkyCoder01 I didn't try that :D i could once try it ^^
I mean AI vs AI
@SkyCoder01 Thanks! I was pulling my hair out trying to figure out why it didn't work
chouston3 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1176 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Have it play each other 1000 times non-stop and keep score :)
no problem, chouston! Happens to everyone
@SkyCoder01 Ya maybe once :D
@SkyCoder01 I noticed that minimax sometimes prefers a lock-in of its enemy against a win in the same round
Means it could win in this round but it chooses not to because it can do a move where you have no chance to win anymore in the next round
A sentence without a smile
:(
@Paradox5 Ah cmon that can happen :D
:)
:D
:flags:
I seriously can't figure out how to get rid of the white space http://codepen.io/WillTheCruzan/pen/qmaBvP
nvm i fixed it
Hi all!
Today I have made some primitive css animations 'helper'. Hope some might make use of it.
https://codepen.io/the0ffh/full/MmjGzo/
Today I have made some primitive css animations 'helper'. Hope some might make use of it.
https://codepen.io/the0ffh/full/MmjGzo/
@WillTheCruzan you are not closing the ".first-page" div
Hey Guys. I am making weather app and i got this error(Access to Script at 'https://code.jquery.com/jquery-2.2.5.min.js' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 404.). I don't understand what is the error? .can anyone help me what should i do?
Hi all - I am still trying to finish my portfolio page. It works on desktop, but links on the navigation bar are not working when I view my portfolio page from my iPhone? Any suggestions? Here's the link to my page: http://codepen.io/veronicarbulu/full/GmRQOK/
@Leena8392 you are probably trying to request the info over HTTP and codepen only allows HTTPS responses
@veronicarbulu it does work for me if use emulated size for iphone .. what happens when you see it on mobile?
@veronicarbulu probably ur buttons are too small?
@OrangeKulture Hi - A couple of things: 1) the links on the navigation bar do not work. So when i click on portfolio or contact for instance, it doesn't take me to the right part of my site. Issue #2: I was hoping my naviagation bar could be fixed to the top on my iphone as well, but it doesn't. It just moves along when I scroll down the page
@moigithub Hi - I tried making my buttons bigger as well, but it didn't work. I just don;t know what I'm doing wrong. I'm wondering if it's the browser on my iphone
@veronicarbulu try adding jquery and then bootstrap js , after the jquery
@OrangeKulture Under JS?
the nav bar is fixed at the top .. that's why it will scroll along with the rest of the page. You can make it as if it's not fixed and it should just stay at the top? probably .
@veronicarbulu yeah under js .. include jquery first and then bootstrap .. i know bootstrap js handles a lot of the nav bar things .. im not saying that'll solve everything, but im sure it;ll help
trying it now @OrangeKulture
@veronicarbulu yeah im guessing the navbar thing should be relatively easy to fix .. a quick google search can point you in the right direction
yeah, basically when you set the navbar with a property of fixed , it will not dissappear, it'll sort of "follow" when you scroll
@OrangeKulture Thanks. I tried including the jQuery and bootstrap under JS, but the links are still broken on my phone.