kevinhisel sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 917 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
willthecruzan sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 918 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
//this.changeHandler
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
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
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption text-center">
</div>
</div>
willthecruzan sends brownie points to @dvecc :sparkles: :thumbsup: :sparkles:
:cookie: 125 | @dvecc |http://www.freecodecamp.com/dvecc
<section id="#(whatever section it is called)"></sec>
willthecruzan sends brownie points to @dvecc :sparkles: :thumbsup: :sparkles:
:warning: willthecruzan already gave dvecc points
<div class=col-ms-4>
before that or<div class="col-ms-4 offset-md-4”>
<div class="row">
<div class="col-md-4 col-md-offset-4">
Middle column
</div>
</div>
$('.stream-list').find(id == 'all' ? 'li' : id == 'online' ? '.online' : '.offline').show();
id == 'all' ? 'li' : id == 'online' ? '.online' : '.offline'
means?
?
represent?
Bio -
instead
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.
$('.stream-list').find(id == 'all' ? 'li' : id == 'online' ? '.online' : '.offline').show();
<if condition> ? <true> : <false>
.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.
? = if statement
and : = else
if ( condition ) {
// true
} else {
// false
}
condition ? true : false
var blah = num;
if ( blah = condition ) {
// true
} else {
// false
}
console.log((blah) ? true : false);
if(blah===condition) {
return true
} else {
return false
}
===
is checking condition
var some_truth = true;
some_truth ? console.log('it is truth') : console.log('it is false');
blah === condition ? 'true content' : 'false content'
jQuery
then Bootstrap.js
jasoncorp84 sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 739 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
This is a tribte to:
jaizon sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 740 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
img-fluid
in Bootstrap 4 and img-responsive
in 3
div
s with id
s
href="#section-id-name"
col-md-*
might be more suited for most ppl’s devices than col-lg-
nmc96 sends brownie points to @uiharu-s :sparkles: :thumbsup: :sparkles:
:cookie: 309 | @uiharu-s |http://www.freecodecamp.com/uiharu-s
rounded-circle
instead of img-circle
#
, 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
ninikitos sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1271 | @sorinr |http://www.freecodecamp.com/sorinr
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);
Change the order of logic in the function so that it will return the correct statements in all cases.Can someone help me with it?
@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"
elliotzengyi sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 1179 | @heroiczero |http://www.freecodecamp.com/heroiczero
elliotzengyi sends brownie points to @keonsam :sparkles: :thumbsup: :sparkles:
:cookie: 337 | @keonsam |http://www.freecodecamp.com/keonsam
faiz7412 sends brownie points to @lokeshdevraj :sparkles: :thumbsup: :sparkles:
:cookie: 36 | @lokeshdevraj |http://www.freecodecamp.com/lokeshdevraj
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";
function reverseString(str) {
var result = "";
for (var i = str.length - 1; i >= 0; i--) {
result += str[i];
}
return result;
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.
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;
const newItem = { content: 'Buy milk', done: false }
this.setState({ item: newItem })
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.
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 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?
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]);
});
});
<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
.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;
}
willthecruzan sends brownie points to @czpl :sparkles: :thumbsup: :sparkles:
:cookie: 266 | @czpl |http://www.freecodecamp.com/czpl
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);
}
:bulb: to format code use backticks! ``` more info
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>
egglton sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2789 | @khaduch |http://www.freecodecamp.com/khaduch
<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>
Still fails me :worried:
egglton sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: egglton already gave khaduch points
@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 :)
background-image
in your CSS, you should be able to place text anywhere you want over it. Otherwise, you have to use position: absolute
<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>
<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)
<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>
^^ You have a missing >
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.
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.
data
is correct here?
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);
Can someone help me with it?I am stuck
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.
willthecruzan sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1161 | @skycoder01 |http://www.freecodecamp.com/skycoder01
@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.
tstusr441 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1162 | @skycoder01 |http://www.freecodecamp.com/skycoder01
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]);
orangekulture sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1163 | @skycoder01 |http://www.freecodecamp.com/skycoder01
: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:
@mapacarta ?? (..suspenseful music...)
mapacarta sends brownie points to @annavih :sparkles: :thumbsup: :sparkles:
:cookie: 227 | @annavih |http://www.freecodecamp.com/annavih
<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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
redfox403 sends brownie points to @unovaxan :sparkles: :thumbsup: :sparkles:
:cookie: 272 | @unovaxan |http://www.freecodecamp.com/unovaxan
target="_blank"
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
redfox403 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1166 | @skycoder01 |http://www.freecodecamp.com/skycoder01
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
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)
}
<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>
whatIsInAName([{ "a": 1, "b": 2 }, { "a": 1 }, { "a": 1, "b": 2, "c": 2 }], { "a": 1, "b": 2 })
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">
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.
navbar-inverse
instead of navbar-light
in that example above (edited)
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;
});
}
.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.
jaizon sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1168 | @skycoder01 |http://www.freecodecamp.com/skycoder01
willthecruzan sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1169 | @skycoder01 |http://www.freecodecamp.com/skycoder01
.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.
return collection.filter(prop => {
return Object.keys(source).every(name => {
return prop[name] && prop[name] === source[name];
});
});
for in
is old school
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');
How the hell I have to make it?I tried using switch and if and else statements and didn't work
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');
2 == 2,3,4,5,6
would return false because 2 is not equal to 2,3,4,5,6.alfredim88 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1170 | @skycoder01 |http://www.freecodecamp.com/skycoder01
i
is the variable that's changing on every loop
for (var i = 0; i < 10; i++) {
setTimeout(function() {
console.log(i)
});
}
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
kembolino sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1171 | @skycoder01 |http://www.freecodecamp.com/skycoder01
fixed-top
class to your navbar
<div class="first-page">
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
willthecruzan sends brownie points to @gulptech :sparkles: :thumbsup: :sparkles:
:cookie: 303 | @gulptech |http://www.freecodecamp.com/gulptech
@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.
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
chouston3 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1176 | @skycoder01 |http://www.freecodecamp.com/skycoder01