@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
@kevinhisel Just keeps padding and border from effecting height/width of the element.
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?
that's what the challenge is all about ;)
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
willthecruzan sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 918 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Had PC issues
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...
I dont know what code to write to return online instead
@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
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.
Cya guys
<a class="center-text" href="https://en.wikipedia.org/wiki/Abraham_Lincoln" target="_blank">Learn More</a>
did you realize you had text and center reversed lol
does anyone see what could be causing nothing to show up
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
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
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
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. ;)
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?
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
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
@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
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 :/
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
figure out what code does before moving on
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
you use css to create spacing between element
since there are 50 ways to create space between two elements, there's never a good reason to have a <br> in production
That would looks better
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.
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.
:)
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
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
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
ESL_SC2
That person really play Starcraft all day?
Like 24/7..
So like
? = if statement and : = else
if ( condition ) {
// true
} else {
// false
}
condition ? true : false
console.log((condtion) ? true : false);
right?
why?
Ah () inside is a variable not parameter?
var blah = num;
if ( blah = condition ) {
// true
} else {
// false
}
console.log((blah) ? true : false);
some condition ? do something if true : do something if false
not (some condition) ? ....
if(blah===condition) {
return true
} else {
return false
}
Three of them
@jdtdesigns but these code I posted above
Right example?
@MathematicsCoding single equal is assignment and
=== is checking condition
@MathematicsCoding .... don't add the brackets is what i was saying
var some_truth = true;
some_truth ? console.log('it is truth') : console.log('it is false');
So that would return 'it is truth'
@jdtdesigns
blah === condition ? 'true content' : 'false content'
@jdtdesigns you are assigning some_truth variable as true
@chakrihacker mine...
He was teaching me
Well I didnt ask a question
Never mind Misunderstood
what link should I add to codepen.io to make work my mobile dropdown menu work ?
hello! Can anyone suggest me how to make a dashboard? i need the dashboard on a webpage.
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 ;)
@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
@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
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
the idea is that you'll have to divide the page into section, using
divs with ids
Could it not be as simple as putting everything into sections, and then doing onClick
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
lol
me too, at first
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-
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
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
why is it in CSS
<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
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.
I had it working before, but now it linking the ID but not scrolling down lol
when you click html it should scroll
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 ?
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">
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
@Ninikitos ofc its not working if u don't add in codepen ssettings->javascript part jquery first and boostrap.js after :)
@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
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 );
});
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
not sure if it works anymore...
@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
could be equally useful for making http api http/s enabled
Could someone help me with getting geolocation data please. I'm working on the weather app
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"
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
^_^ 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
@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
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...
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.
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?
is anyone experienced here in react?
@keonsam
@csnktms what's up with react
i have a todolist
no
and if it is applied, i would like to push them to the completed section
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;
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
how is it possible to achive it with every individual item i click on?
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.
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.. ?
@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.
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.
@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.
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?
but can not via quotesArr[randomIndex][0]
in getJSON
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]);
});
});
you forgot "()"
You can look at the example at the bottom of the page of discription
@Czpl This is the output url https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=mycallback
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
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?
it wraps response in /**/mycallback()
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
<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>
<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>
it makes it so that Will Cruzan is above the rest
.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;
}
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
@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?
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.
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>
@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?
I just went and tried it in Chrome and it seems to pass if you put the correct color codes in there.
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 :)
throws ultra ball
Ah pokemon
The only place where you can capture cute little monsters and make them your slaves
Hm
:balloon:
closest emoji to an ultra ball I think
How do I put a title in the middle of an image background?
@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
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
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
Then margin top it
Or class
Which ever you prefer
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.
Just move the h1 element below the buttons
Boom
Oh
Or use br
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.
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
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);
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.
<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
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?
@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.
@SkyCoder01 , is there a way to center a <p> in the middle of the screen without using margins?
@Streeter220 Use text-align: center on the outer element
@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....
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 ..
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
hey Sky .. how did you do the smallest common multiple challenge ? not the code, but how did you tackle the problem?
tstusr441 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1162 | @skycoder01 |http://www.freecodecamp.com/skycoder01
@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.
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
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:
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
@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)
: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:
if only cbot would serve our conversation needs by supply the right meme at the right time .. the world would be a better place
@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.
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?
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
Hello everyone, I'm struggling to add a frame around my page "Tribute Page" ! Any help will be appreciate. Thanks a lot. Regards.
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
hahah maan i would love to work on AI
@kembolino You might be interested in the Jumbotron class: http://v4-alpha.getbootstrap.com/components/jumbotron/
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.
camperbot play ground sounds fun ..
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?
@SkyCoder01 @OrangeKulture Building chat bots for streaming services is a great way to get started with some basic AI ;)
@jdtdesigns oh man .. that sounds awesome, have you done any yourself?
One of the first ^^
have u guys seen the tshirt that says ... hold on, let me find it
@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
@jdtdesigns oh shit dude, for sure .. that's awesome
gonna watch them
what environment do you use?
@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
<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
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 :))
redfox403 sends brownie points to @unovaxan :sparkles: :thumbsup: :sparkles:
:cookie: 272 | @unovaxan |http://www.freecodecamp.com/unovaxan
I am stuck... and I don't want to watch other people's code and complete Tic Tac Toe's AI
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 hey
@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..
@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
redfox403 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1166 | @skycoder01 |http://www.freecodecamp.com/skycoder01
@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
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
yea i think, it filter out all the elements that pass a certain condition
@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?
can someone here help me with PHP?
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
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
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>
yep, formspree service is great for simple data that needs to passed to an email
it handles the backend for you
just don't use it for secure stuff like credit cards and such
nope @Misaiah works out of the box ;)
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?
so no, you can't just write php in static html
won't work
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
@jdtdesigns the code works, but i still cant understand how it filters out the ones that have all the keys matching source
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 ?
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 :) */
}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?
nvm, I see you did - make sure that jQuery is listed first - above bootstrap.js
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 :) )
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.
I thought for...in was ES6? Maybe for..of?
for..in definitely not ES6 lol
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
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)
need help here
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.
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?
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)
});
}
but i will read about it
take a look at my wiki challenge
@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.
alfredim88 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: alfredim88 already gave skycoder01 points
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
try it
kembolino sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1171 | @skycoder01 |http://www.freecodecamp.com/skycoder01