Hey guys, I just started the "tribute" project and had a curious question. Do you remember all of the properties and functions off the top of your head? I find myself having to double check my notes to remember things like "font-family" or how to italicize a font. It seems impossible to remember all of these different options
@ThurstianTsui For me personally, I see memorization as a bonus. 99% of the time, I'm getting help with syntax no matter what I'm working on. Which is good in a way because it means I'm using new things or exploring concepts I haven't used as much. The stuff I use all the time inevitably ends up sticking and starts to become second nature.
I struggled to remember a lot of them. The best thing you can do is just have a reference available. Learning programming is less about memorization and more about knowing how to use your tools and how to look up documentation.
@sethmchris @NathanMcSparran Thanks for putting that to bed. Was starting to worry that I was expected to memorize everything. I've got the w3 schools reference open and it's been a great resource for finding functions. Any other recommendations for references to use?
thurstiantsui sends brownie points to @sethmchris and @nathanmcsparran :sparkles: :thumbsup: :sparkles:
:cookie: 244 | @sethmchris |http://www.freecodecamp.com/sethmchris
:cookie: 265 | @nathanmcsparran |http://www.freecodecamp.com/nathanmcsparran
I use w3 schools because it's a simple at a glance type of reference
I agree. Thanks for the information!
You're welcome :)
@ThurstianTsui I like W3 Schools too for a quick reminder. If I want a more in-depth look, I often check MDN, usually from a Google search.
I was wondering if anyone could help me out with a problem im having. I have a parallax image at the top of my website and the image inside the parallax container is of high resolution however it is zoomed in ALOT so that the picture looks horribly pixelated. I can't resize the image because it takes away from the parallax. Any ideas?
@todadqa got a pen? i could take a look
no promises
Hey does anyone know how I could upload an image to the internet to use on my website? Like how when you google search an image and you can hit view image and it takes you to a page with just the image and use that as your src. Does anyone know how I could do that?
@eshaffer321 upload it to a photo site, then it will have a url you can use
<a href="./puppy.jpg"><img src="./puppy.jpg"></a> I think
Is there a way to get the top left color yellow when it gets full screen?
@Julius-R you could look into css media queries
@moT01 i can't get it to display the image that link something such as imgur provides brings it to the image and doesn't display it on my website
i havent used it, but ive seen people say not to use that site for this purpose, ...they don't allow it or something
not sure
do you have a codepen? i would take a look
@moT01 what I'm trying to do it make a thumbnail of one of codepen.io projects. I see they have an embedded link, but I dont like the way that it is displayed and would like it to be custom.
@moT01 here is the codepen http://codepen.io/eshaffer321/pen/oBQymp
your image isn't an image url
should end in a .jpg or other image type
might be the problem
wait, am i missing something, ..isnt the thumbnail there that you want
yeah but i wanted it without the extra things that the embedding from codepen adds
like the little android and apple symbols
so that if i post something else that isnt on codepen.io there is some consistency
like that? use that as the source url
@moT01 thanks! thats exactly what i needed! how did you get it?
eshaffer321 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 507 | @mot01 |http://www.freecodecamp.com/mot01
opened the url you were using, right clicked the picture and then copy image location, and opened it in a new tab
oh thats was simple :P
thanks a lot though, that will be very useful in the future
yup
@eshaffer321 there's a little arrow on the top right of codepen, ...opens a dropdown menu, if you click analyze you might get some tips
top right of each section
got a hefty debugging project if somebody is familar with the twitch project section
whats up
been looking at the dev tools (console) and google searching
can't find my problem
any other info?
worked months ago
probly the url
yea, that url wont work anymore, ...go check the projects page
it will say on there the new url
ya but i signed up for an api key
my client id is my key
oh
but why else would it have stopped working all of a sudden
it's not all of a sudden, it stopped working when twitch updated their api, i just got around to looking at it now
I know but based on their documentation, mine should still work
obiously doesn't, : {"error":"Bad Request","status":400,"message":"Not a valid callback function"}
@eweiss17 If I understand your code, you're making a $.ajax call to:
https://api.twitch.tv/kraken/streams/' + user + '?callback=?',. In that success function, you make a getJSON call to the same URL which then makes a $.ajax call to the twitch user's channel (which returns no JSON). I don't see how that ever worked?
You have two identical API calls for each user which then try to make a third API call to data['_links']['channel'] which returns a 400 error message in your console
(I think because the user's twitch channel won't give you JSON, only /streams/, /channels/, and /users/)
it fails at the first api call
@moT01 Wow it works, what was wrong?
@moT01 Will you write mine for me now? :)
i got rid of the .getjson and the callback=?, and added the format: json parameter
i was looking at the difference here, http://stackoverflow.com/questions/5922175/jquery-getjson-vs-ajax-json, to be honest i didn't know the difference
@SkyCoder01 sure http://codepen.io/moT01/pen/zNyrOa?editors=0111
lol :)
@eweiss17 i think getjson is specific for json formatted requests, ...ajax can get other types
oh thanks for the help @moT01
eweiss17 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 508 | @mot01 |http://www.freecodecamp.com/mot01
i am stuck at this point
can anyone guide me through this :)
hey guys i need help with the search and disable - functions through the page
any help would be appreciated
hi, i have built my portfolio. Can someone have a look and fix the image in home and about section i want image to be responsive, in the center of thesection. my pen is http://codepen.io/Deepak8717/pen/xRodaq?editors=1100
@Deepak8717 try #home, img{
margin: auto;
}
margin: auto;
}
@jtan3 thanks
deepak8717 sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 302 | @jtan3 |http://www.freecodecamp.com/jtan3
try putting your container in a row and column to see if that fixes the picture
@jtan3 can you check once again is it okey now ? i feel the the home image is not in circle.
@jtan3 can you also tell me why the image are coming out of the div when resizing ?
look at your portfolio section
you have rows and co-sm-6
try it in your home and about section
@Deepak8717 you also spelled portfolio wrong
Thanks again @jtan3 can you explain why rows and co -sm-6 in home and about section ?
deepak8717 sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:warning: deepak8717 already gave jtan3 points
do you know bootstrap?
there's 12 columns . I think it might be responsive if you used the bootstrap columns.
you made your portfolio section responsive using the bootstrap columns
@Deepak8717 it doesn't have to be col-sm-6. Its up to you.
What does it mean by : User Story: I will see a placeholder notification if a streamer has closed their Twitch account (or the account never existed). You can verify this works by adding brunofin and comster404 to your array of Twitch streamers.
What is a placeholder notification?
@joopt those account don't exists
@joopt they want you to display them as well the other accounts
@jtan3 i do not agree. first the website is responsive its just the image and second even the portfolio images are runing out of the section when resized.
@Deepak8717 did you try it out?
@Deepak8717 you have images in your other section and they resized.
Hi everyone, I was wondering if someone can assist me with my zipline. I'm building my personal portfolio, and I was wondering how do I add my projects to my site?
@rarevalo92 are you using codepen for you projects?
@jtan3 yes I am.
@rarevalo92 click on one of your projects and at the bottom there's a button embed
@rarevalo92 copy and paste that link
@jtan3 thank you Johnny, I will try that. appreciate the fast response :)
@jtan3 can you see why body css is not working .
@Deepak8717 link?
what's wrong?
font has not changed @jtan3
@jtan3 can i msg you privately ?
sure
http://www.w3schools.com/cssref/css_selectors.asp try reading this
hii..im tryin to create a portfolio webpage, but the navbar displays in block
and i want it to display inlined
Hi people
the code for tribut page reveals different outputs when one of these is used
why is it so?
isn't bootstrap from twitter
?
hello
yes bootstrap is from twitter
then why do th both reveal a different out for the same code of tribute page
?
new version of bootstrap
Bootstrap navigation not working properly Please help
@muneermk
It Worked !!! Thanks @jtan3
muneermk sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 303 | @jtan3 |http://www.freecodecamp.com/jtan3
at first
Why this didnt worked?
i think its because its the new version of bootstrap
ya ok
@muneermk thats the bootstrap version 4 which is still in testing phase, does not work properly yet
Ok Thank you guys
how would i assign html text input to a js variable??
@Athabasco if you mean you need to get value from a html input tag and assign it to a var,
just select that element and use
just select that element and use
.value method, like thisvar input = document.querySelector('selector').value;
@jtan3 thnks. i also added that link nd it worked
guys I need help with the .keypress method
$('#input').keypress(function (e){
if ( e.which == 13 ) {
e.preventDefault();
}
var query = $('#input').val();
$('#random').html(query)
})
either the keypress is not working or I'm not passing the values right.
halp?
@JohnnyBizzel thanks
radekjohn sends brownie points to @johnnybizzel :sparkles: :thumbsup: :sparkles:
:star2: 1274 | @johnnybizzel |http://www.freecodecamp.com/johnnybizzel
why is my portfolio is with gray areas? can someone explain to me how to fix it?
http://codepen.io/snirben/pen/YNdWWj
http://codepen.io/snirben/pen/YNdWWj
by the way: it is ok to give everything id? or should I use class?
https://codepen.io/viorelfoamete/full/wgRwvm/ can you guys tell me why I have a space between the navbar and the background image of my homepage?
@viorelfoamete add in css:
.navbar {
margin-bottom: 0;
}
Inside of @keyframes animation - can you select different elements, modify their elements or you can only select one (for example h1, and that's it)?
Some kind of noob example:
@keyframes animation {
h1 {
<!-- some kind of animation here -->
}
h2 {
<!-- some kind of animation here, as well -->
}
}
@sorinr thanks
viorelfoamete sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1172 | @sorinr |http://www.freecodecamp.com/sorinr
@viorelfoamete also to mask that little white spaces in the corners of the navbar you can give your body: background: #000;
@viorelfoamete welcome
@sorinr i set up navbar border-radius:0px; for those white spaces
@sorinr you’re by any chance from romania ? :D
hey guys
i need help
on one specific area
how can i make the close buttons functional?
i am asking because every close button has to operate on its own tree
so i cant make a general rule about buttons
i have to give them unique id's that are similar in a way to their parents
but how can i write a function for a specific button that i don't know the name of?
Can I get some opinions on my calculator project please?
http://codepen.io/AdamHJacks/pen/dNQwGx
http://codepen.io/AdamHJacks/pen/dNQwGx
Hey guys!! This is the second time I have ever tried installing a JQuery plugin into a website and I could use a little help. Nothing is appearing when I open this code in the browser. This is my code: https://github.com/janepohorecka/Maria-Photography This is what I am trying to install: https://austenpayan.github.io/skippr/
Could someone please help me with this? I would really, really appreciate it :)
I did exactly what the instructions said to do.
<script type="text/jquery" src="jquery-3.1.1.min.js"></script>
I dont think this is ok
try to make it like this src="/jquery-3.1.1.min.js">
@kirbyedy thank you!!! That worked!!
janepohorecka sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1773 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Hey campers. :)
So I am working on the Twitch App. When I call a channel which is offline I get the error message: "Cannote read property of channel of "null"."
This is an example API call. https://wind-bow.gomix.me/twitch-api/streams/freecodecamp?callback=?
And here is my code:
// if channel is offline
if (jsonData.stream === "null"){
}And a link to the full project: http://codepen.io/philipp32/full/QdrgYR/
@philipp32 its getting stuck before that
i hardcoded the freecodecamp channel into the url
didn't make it to that test
Howdy campers -- Looking for a bit of help importing react components. Anybody around able to take a look at my (extremely basic) setup?
@dkohlruss shoot
I'll just post my js/jsx in here... Here is my index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import userInput from './components/user_input';
const App = () => {
return (
<div>
<userInput />
</div>
);
}
ReactDOM.render(
<App />,
document.querySelector('#root')
);
@dkohlruss would be great if you have codepen or something.
Is there a way to structure external js files into a codepen?
@dkohlruss no...
you will have to put everything in the same js file
but nvm...
show your code in
./components/user_input.jsx
import React from 'react';
const userInput = () => {
console.log("test");
return <input />;
};
export default userInput;
Hi I am Goran
oops, ignore that console.log statement
Can sombody help
Look this https://codepen.io/DimiG031/pen/RKqmQQ
if it's matters, I'm using the create-react-app boilerplate off of npm
I start with coding few day ago, I need to set my buttons, when click to go to background image
@dkohlruss hold on.. let me check
mine background is in slideshow
?
@dkohlruss sorry for delay
you need to be using
React.createClass to create a react component
something like
in your app component
import React from 'react';
import ReactDOM from 'react-dom';
import userInput from './components/user_input';
const App = React.createClass({
render : function(){
return(
<div>
<userInput/>
</div>
);
}
});
ReactDOM.render(
<App />,
document.querySelector('#root')
);
export default App;
same thing for
user_input component
Alrighty, thanks
function sayHello2(name){
var text='Hello'+name;
var say=function(){
console.log(text);
};
return say;
}
sayHello2("David");function(){console.log(text}?
Hold on a moment... isn't React.createClass just a helper for those who aren't using ES6?
Oh duh... No babel dependencies in my package_json
@dkohlruss yes... even though you're using arrow function, it's still not a
class syntax
*.json
it can be argued that yours is ES5 syntax with a little ES6 sugar
I was under the impression it was bad form to use non-changing components as classes and that they're better off being declared as constants
@dkohlruss I like this boiler plate a lot more https://github.com/alicoding/react-webpack-babel
I'll give it a shot, thanks
i have a doubt
can we use the bootstrap grid to an image and some text to align them in two columns ?
can we use the bootstrap grid to an image and some text to align them in two columns ?
can you do that and I will get a look
var input = "test";
function myFunction() {
input = document.getElementById("searchbox").value;
}
$("#test").html(input);
what are you trying to do? @Toffanelly
getting the search term from the input?
@AshwathShivaz yes
@meli94 The function is run when i click the button next searchbox. It is supposed to assign the textbox content to the input variable
use this intead: var input = $('#test').val();
you don't need to create a function :) someone has already done it for you! @Toffanelly
in your function, by the way, I think that the problem is the return statement which I don't see
@meli94 Its not working either way :(
I done evrything , and now I can`t do tahat function for the buttons
@Toffanelly send me the link of your code pen so I can understand better
@meli94 even if a use
$('#searchbox').val(); , It only works with the value i assign beforehand and does not change while i type
Hey guys, just built my Twitch viewer, any suggestions/critique?
http://codepen.io/taltmann42/full/dNwvXB/
http://codepen.io/taltmann42/full/dNwvXB/
@Toffanelly there are few problems: 1 you're declaring the var input twice
2 You're not using <form> in your HTML
3 it's missing an action after your for loop
@taltmann42 looks great
Hey Coders! I want to put a boarder around my Divs so I can see their affect, but when I do, the boarder changes the padding and margins. Is there a way to outline a div so I can see it but not have it impact the other components? I'm using Codepen
@rexbrooker you have two options here:
- use
outlineinstead ofborderin the CSS - add
box-sizing:border-boxto the div (via CSS), then the border is not added to the elements width
@meli94 And how would adding the <form> help me?
@Toffanelly
<form>
<input type="text" id="searchbox" placeholder="Search for...">
</form>$(document).ready(function() {
$("form").submit(function(e) {
e.preventDefault(); ///<< prevent the page refresh
var input = $('#searchbox').val();
//$("#test").html(input);
//input = input.replace(/[^\w\s]/gi, '');
var url = 'https://en.wikipedia.org/w/api.php?action=opensearch&search=' + input + '&format=json&callback=?';
$.getJSON(url, function(val) {
$('#container').html('');
//var arr = JSON.stringify(val);
for (i = 0; i < val[1].length; i++) {
$("#container").append("<a target=\"_blank\" class=\"well result\" href=\"" + val[3][i] + "\"><h3>" + val[1][i] + "</h3><h5>" + val[2][i] + "</h5>" + "</a>");
}
return $('#searchbox').val('');
});
});
});
@taltmann42 Outline worked a charm! Thank you very much!
rexbrooker sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 481 | @taltmann42 |http://www.freecodecamp.com/taltmann42
What's a good way to assign padding and margins to CSS items? If I give a bottom margin to an image class, and a top margin to Text, when the text follows the image, it gives it a gap that's too big. I know how to fix it, but was hoping someone could give me a pointer on better practice
hello. what do you guys think about my portfolio page ? please give me some feedback, good or bad xD https://codepen.io/viorelfoamete/full/wgRwvm/
Hey guys, I'm starting a small new project, it's a simple utility interface for doing some management work at my job. I'm an almost-graduate CS student, so I know most basics in web development, but I have some concerns with which technology to chose and the structure of my app. I was about to do a React/Redux single page app with a REST backend, but the SPA part sounds a bit overkill in my opinion and I'm not too sure how I should do it otherwise. I know it's a bit unclear, but honestly I don't know much about what features I'll have to implement, I just know that I can chose whatever technology I want to use. Any suggestions?
@viorelfoamete apart from a spelling mistake it looks great! '' I've made a tribute for completing freeCodeCamp - challange.-''
@meli94 thanks
viorelfoamete sends brownie points to @meli94 :sparkles: :thumbsup: :sparkles:
:cookie: 291 | @meli94 |http://www.freecodecamp.com/meli94
var fruits=['cherry', 'apples','bananas'];fruits.sort(); and console.log(fruits.sort())?
@Hello911 none kinda, except that the console.log one outputs the result to the console. The sort method of the array prototype sorts the array, but also returns the result.
Hi, do i really need to do the "Build a Personal Portfolio Webpage Incomplete " stage? Because i did the "Tribute Page" stage but i still don't know JS to do the Portfolio project yet.
Because JS is after the portfolio project.
You should be able to do it with what you've learned so far.
@YanivStern you don't need javascript for the portfolio as far I can tell you
It's mainly html and css
@fortMaximus OK....after a bit of a delay I coded from scratch this tribute to Maximilian Kolbe, a Franciscan Friar who swapped places with a condemed man in Auschwitz. I saw a random note on this when searching for something else the other day....and it hit a nerve. http://codepen.io/IanMacMillan/full/mRzqmb/
Yes, the structure of the code is similar to Quincy's, but I've learnt so much from it. The Jumbotron, how to lay out columns and change the offset with different screen widths....
On to the next challenge!
Nicely done Ian. I definitely have a similar style to mine as well. Since then, I've developed a few new ideas that I'll work on after I finish the certifications - to polish up the portfolio
@NathanMcSparran Thanks.
ianmacmillan sends brownie points to @nathanmcsparran :sparkles: :thumbsup: :sparkles:
:cookie: 266 | @nathanmcsparran |http://www.freecodecamp.com/nathanmcsparran
@IanMacMillan really nice. congrats
html and css are very strong actually and can handle with many projects like that
What function can I use to show the index of an element in an array?
@IanMacMillan :+1:
@Luiko thanks
:cookie: 395 | @luiko |http://www.freecodecamp.com/luiko
yanivstern sends brownie points to @luiko :sparkles: :thumbsup: :sparkles:
@viorelfoamete Thanks. Having to add an older but working bootstrap library into CodePen (default v4 alpha not working) threw me at first.
ianmacmillan sends brownie points to @viorelfoamete :sparkles: :thumbsup: :sparkles:
:cookie: 131 | @viorelfoamete |http://www.freecodecamp.com/viorelfoamete
@IanMacMillan i did the same thing :shipit:
Hey guys, I'm working on my client's site and I'm having trouble getting all the content of my modals to show up. Demo: https://amitp88.github.io/Khmer-Family-Cafe/ Repo: https://github.com/AmitP88/Khmer-Family-Cafe/tree/gh-pages
I have no idea why the dish title, price, and descriptions aren't showing up in the modal, even though they are showing up in the DOM tree
I have no idea why the dish title, price, and descriptions aren't showing up in the modal, even though they are showing up in the DOM tree
@AmitP88 the text is below the menu that's why you don't see it. Also the modal backdrop seems to be above the modal itself
@taltmann42 what do you mean by below the menu?
@taltmann42 do you mean like below the modal itself?
@AmitP88 okay the title of the dish is below the menu. the price isn't shown because it's not inside the modal. You have this structure:
- modal
- menu-infobut it should be
- modal
-- menu-info
@taltmann42 ahh I see. I'll check it out
the menu-info has no special positioning, it's still in the row itself, but doesn't get transfereed to the modal, like the picture for example
@AmitP88 ah and the description... well white text on white background ;)
header#banner.navbar.navbar-default.navbar-fixed-top
.container does anyone know what is this # sign doing here
.container does anyone know what is this # sign doing here
@jay397 it selects the
header element with the id banner
i see thankyou @taltmann42
jay397 sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 483 | @taltmann42 |http://www.freecodecamp.com/taltmann42
@Kev-CS hey, have you seen this? next.js might help
@taltmann42 lol I see
@taltmann42 ok, i'll work on it and let you know if I get it working :) thank you
amitp88 sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 484 | @taltmann42 |http://www.freecodecamp.com/taltmann42
function getIndexToIns(arr, num) {
arr=arr.sort(function(a,b){
return a-b;
});
var result=arr.filter(function(el){
return el>=num;
});
if (result===[]){
return ar.length;
}else return arr.indexOf(result[0]);
}
getIndexToIns([2,5,10], 15);
@Hello911 shouldn't you filter the elements inside the function?
@taltmann42 which function?
...
the function you have to write
getIndexToIns
aaah sorry, the indentation made it look like it's outside
@Hello911 then, how does your if work? you check if the array is empty, and if it is, you return its length? (should be
arr.length btw, not ar.length)
@Hello911 you also can't check if an array is empty that way, the right if would be
result.length === 0 (which is not what you want in this case)
yeah i correcte the spelling. -1 is returned
then result[0] is not in the array
I passed.
THanks man @taltmann42
hello911 sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 485 | @taltmann42 |http://www.freecodecamp.com/taltmann42
result===[] doesn't work ur right
@taltmann42 it works now, thank you for your help! :D
amitp88 sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:warning: amitp88 already gave taltmann42 points
@Luiko I'm reading what you sent me, looks interesting, I'll be reading on thank you
kev-cs sends brownie points to @luiko :sparkles: :thumbsup: :sparkles:
:cookie: 396 | @luiko |http://www.freecodecamp.com/luiko
Does anyone know where to start when trying to fix "Octal literals are not allowed in strict mode" I have this challenge on a good track but when running the first test, which I have working in console, I get that error....
function makeFriendlyDates(arr) {
var monthKeys = {
01 : "January",
02 : "February",
03 : "March",
04 : "April",
05 : "May",
06 : "June",
07 : "July",
08 : "August",
09 : "September",
10 : "October",
11 : "November",
12 : "December"
};
function addEnd(num){
switch (num){
case "1":
return num + "st";
case "2":
return num + "nd";
case "3":
return num + "rd";
default:
return num + "th";
}
}
function convertDates (str){
var date = str.split("-");
var dateObj = {};
dateObj.year = date[0];
dateObj.month = monthKeys[parseInt(date[1],8)];
dateObj.day = addEnd(date[2].substr(1,date[2].length));
return dateObj;
}
var dateOne = convertDates(arguments[0][0]);
var dateTwo = convertDates(arguments[0][1]);
console.log(dateOne);
console.log(dateTwo);
var result = [];
if(dateOne.year === "2016"){
if(dateTwo.year === "2016"){
result.push(dateOne.month + " " + dateOne.day + ", " + dateTwo.day);
return result;
}
}
}
makeFriendlyDates(['2016-07-01', '2016-07-04']);
I did the Wikipedia Viewer project based on the opensearch action. basically you get your results if it's title begins with your search. For example the Albus Dumbledor page will only show up if you search Albus, not if you only write Dumbledore. My question is: is it ok? Will it count as a completed project? If not, how can i fix it?
Hello everybody, could anyone help me with
positioning a divs
I have a big div-container, and inside this div there are 2 divs
where do they go?
I want a smaller div one appear on the north of another one
I don't want them to overlay but 1 should stick to the 2nd one from the top
Like stacked?
YEa
but you don't want to place the code in that order?
I can place
the code in that order
what css should i write?
col-offset-* not working . can you please tell me why ?
<div class="col-md-8 col-md-offset-4">
<h3> Timeline of life of Ma Yuan</h3>
<ul>
<li> born in 1970</li>
</ul>
</div>
@MandeepMann I think you took too much offset, change for 2 ?
@Karniej
still stuck at sam problem
still stuck at sam problem
<div class="col-md-10 col-md-offset-2">
@MandeepMann try col-md-8 and col-md-offset-2
@MandeepMann it takes 2 from the right and 2 from the left
@Karniej no still the same result
@MandeepMann are you using codepen?
@MandeepMann i am sorry i am not an expert
@jtan3 yes I am
@jtan3 yes I am using codeine
codepen
codepen is using the new version of bootstrap
@jtan3 yes that worked using older version ...thank you for that
@jtan3 do you know how to do this in newer version ... on bootstrap website it says the sam away as older version
@MandeepMann i think the new version still has bugs
not sure how to do it on the new one
Hello! What's wrong with this code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="1">
</head>
<body id="thebody" onload="show_pattern()">
<div id="div" style="position:absolute"></div>
</body>
<script>
function show_pattern(){
var y=25, x=25;
var width=500, height=500;
var rand_color;
var colors=["red","green","yellow","blue","olive","black"];
var the_body=document.getElementById("thebody");
while(width>30){
var this_div=document.getElementById("div");
var this_body=document.getElementById("thebody");
this_div.style.left=x+'px';
this_div.style.top=y +'px';
this_div.style.height=height +'px';
this_div.style.width=width +'px';
rand_color=Math.floor(Math.random()*6);
this_div.style.background=colors[rand_color];
the_body.appendChild(this_div);
x=x+25;
y=y+25;
width-=50 +'px';
height-=50 +'px';
}
}
</script>
</html>Help please
hello
Do you know why borders are not displayed between each div? http://codepen.io/Yaaqov/pen/LxXKrg
I've been struggling with this for hours
Any good way to nicely increment this ? https://gist.github.com/phumberdroz/98819f2eb31c931b9c37954f90d36f96
see line 5, 6, 9 and then 16, 17, 20
I use ejs so I could use javascript in the backend but well..
@Yaaqovv try adding https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
ANYONE here experienced with D3, building an horizontal timeline?
Anyone here do the d3 projects and can help me figure out why my rects aren't displaying?
Hey guys, so for the Random Quotes Machine project, I’m not sure that the challenges on JSON and Ajax were really helpful. How/where are we supposed to grab the quotes ?
You can create an array or use a quotes array
quotes api*
@olivier101 https://www.youtube.com/watch?v=8SJI8qnMb-o
That is a video showing how to do it with an api
@PizzaPokerGuy Okay nice! Thanks :)
0livier1o1 sends brownie points to @pizzapokerguy :sparkles: :thumbsup: :sparkles:
:cookie: 333 | @pizzapokerguy |http://www.freecodecamp.com/pizzapokerguy
@PizzaPokerGuy love your videos
@jtan3 thanks man
pizzapokerguy sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 304 | @jtan3 |http://www.freecodecamp.com/jtan3
Could anybody let me know how to go about getting React to work on codepen? I have Babel included as my preprocessor, have React & ReactDOM set as external libraries... But no such luck in getting anything to display. Works fine locally
http://codepen.io/dkohlruss/pen/vgvJMK Here is the codepen
The error I get in the console is: Uncaught ReferenceError: require is not defined
at pen.js:45:14
at pen.js:45:14
So it seems like it's something to do with Babel, maybe?
header#banner.navbar.navbar-default.navbar-fixed-top
.container
a.scrollable(href='#top')
img(src='http://qlip.in/images/qlip.png', alt='qlip | UI/UX Design and Development', title='qlip | UI/UX Design and Development')
button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#navbar', aria-expanded='false')
.container
a.scrollable(href='#top')
img(src='http://qlip.in/images/qlip.png', alt='qlip | UI/UX Design and Development', title='qlip | UI/UX Design and Development')
button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#navbar', aria-expanded='false')
why is it the coder only use #,and 。 signs to indicate classes. that's different from what i learned
as far as i know , we should use <class= "">.
Nevermind, fixed my issue.
@jay397 the hashtag indicates an ID, not a class
@dkohlruss i'm sorry for interrupting , i am just a beginner, what about the dot sign , does it indicate an class ?
@jay397 exactly class
@dkohlruss sorry again for extend the space, @kurumkan thank you , just one more question, i didn't learn this usage before, and it is still in html, i saw the coder used some @ signs in CSS too ,@use postcss-nested;
@use autoprefixer;
@use postcss-simple-vars;
@use postcss-discard-comments;
$fargglad:#722872;
$morkfarg:#592059;
$morkgra:#888;
jay397 sends brownie points to @dkohlruss and @kurumkan and @use :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for use
:cookie: 381 | @kurumkan |http://www.freecodecamp.com/kurumkan
:cookie: 174 | @dkohlruss |http://www.freecodecamp.com/dkohlruss
where can i find the full info about this usage
and there is no closing sign after each dot
Hi. I’m looking for a little help on positioning. I’m trying to write up an interactive tooltip, but I’m struggling with positioning it. Is there a calculation that I can use?
Here’s a sample of what I’m working with.
https://gist.github.com/jktravis/ec5be842a7eefaf2ec0013bf7737e4ea
https://gist.github.com/jktravis/ec5be842a7eefaf2ec0013bf7737e4ea
you should put it in a jsfiddle @jktravis i cant really see what your trying to do. for tooltips i just use the title option
Here ya go @aj-willi https://jsfiddle.net/jktravis/rfo5rpag/
Basically, there’s a boostrap well with an h4, a button, and a list. The button will eventually trigger the popup (I guess that’s a better term for it rather than tooltip.) Inside it, I plan on putting an input field that will add stuff to this list.
I guess I called it tooltip, because that seems like the logical first step. /shrug
ah so you want like a pop up with text?
check out this, might help http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup
Will do. Thanks.
or if you want on hoover over, not too hard to change i think
Yeah. Just wasn’t sure how to get it centered nicely over the trigger.
have you tried aligning to center?
hey guys im having trouble with my buttons how do i make it so that when I click betweeen online and offline it doesn't remove everything?
@joopt show the code
i'm having the same problem as @joopt
your pen doesn't even load over here. I think you have a closing curly brace somewhere you don't need in your js
opps
So, I’m not sure if that w3schools example really helps me. I think what I need is a way to calculate the position on the fly. Thanks @aj-willi
jktravis sends brownie points to @aj-willi :sparkles: :thumbsup: :sparkles:
:cookie: 264 | @aj-willi |http://www.freecodecamp.com/aj-willi
@jktravis no worries, sorry im not too knowledgeable on that
@jay397 you got confused because the referred coder uses
preprocessors. The one for HTML probably being Jade (nowadays called pug templates.) The one for css probably SASS.
not sure if that's the correct way to use the hide/show for jquery
@jay397 Preprocessors are some kind of translators of templates with their own language, which gets translated into the languages used by the browser.
Pug (Jade) as preprocessor for HTML is a language which compiles to HTML. The pug files are called template files (Templates for HTML)
Pug (Jade) as preprocessor for HTML is a language which compiles to HTML. The pug files are called template files (Templates for HTML)
@jtan3 if you use hide/show on the container which has all streamers as its children, they will be all gone because of the html structure.
If you hide a html element, also its child elements will be hidden (Since the hidden main element is a container holding the rest)
If you hide a html element, also its child elements will be hidden (Since the hidden main element is a container holding the rest)
So if you want to hide only some of the children, there needs to be some identifier on the elements to target them properly and only hide/show the elements referred to
hello!
@alpox thanks ill try it out
jtan3 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 767 | @alpox |http://www.freecodecamp.com/alpox
i'm doing my second project and i'm trying to change the color of my header to orange and it won't work. i'm not in the html section i'm trying to do it with css
please help
@chelseas9210 what do you have so far?
body {
background-image: url("https://images8.alphacoders.com/292/292379.jpg");
}
header{
color:orange;
}
background-image: url("https://images8.alphacoders.com/292/292379.jpg");
}
header{
color:orange;
}
the image worked
but the orange won't work
@chelseas9210
color is for the font-color, if you want to change the background-color of an element, you have to use background-color
ok maybe i need to put font-color too?
color:
@chelseas9210 depends, do you want the text to be orange, or the element?
font-color:
yes text please
@chelseas9210 then
color should be fine... do you have a link to the codepen?
D: i don't want to show it to anyone lmao but i do
you can send it privately
ok thank you
Hello world
Where would I upload a logo to use on my portfolio page?
Or any image for that matter
You can use dropbox, imgur, flickr, or github.
Cool thank you
Or really anything else that will host a file.
@jktravis Which do you use?
I favor github
@jktravis Thank you
ssharps711 sends brownie points to @jktravis :sparkles: :thumbsup: :sparkles:
:cookie: 355 | @jktravis |http://www.freecodecamp.com/jktravis
you can github pages to host whole static sites
using the github hosted page would probably look best to a prospective employer, only thing better than that would be, owning your own website I'd imagine.
Hi community. I am at the "random quote machine" project (challenge 259). It requires sending a tweet. I have to admit that the web resources I have found so far are way over my head. I see OAuth and PHP everywhere and have the feeling that the learning curve towards the Twitter API is very steep. In short, is there any guidance how to do that?
@berndbausch you probably won't need any of that. This is an example tweet:
https://twitter.com/intent/tweet?text=The%20next%20time%20you%20raise%20a%20hand%20to%20me%20will%20be%20the%20last%20time%20you%20have%20handsso you only have to build the URL with the text-parameter and set it as hreffor an <a> tag
Thanks much. That is simple enough. I guess I went into the wrong direction then.
yup the documentation shows you what things you can do with the API + OAuth + Backend but for such a simple thing as tweeting something that's totally enough
I am now trying to find my brownie points to give you one, because that was a real brick wall. If I don't find them, no hard feelings please :)
@berndbausch just write thanks and mention
radekjohn sends brownie points to @berndbausch :sparkles: :thumbsup: :sparkles:
:cookie: 3 | @berndbausch |http://www.freecodecamp.com/berndbausch
@berndbausch like me : -)
hi, guys. I nearly finished my wikipedia viewer
@radekjohn enter key not working :worried:
I will learn Gitter in time .... Thanks @taltmann42 and @radekjohn
berndbausch sends brownie points to @taltmann42 and @radekjohn :sparkles: :thumbsup: :sparkles:
:cookie: 265 | @radekjohn |http://www.freecodecamp.com/radekjohn
:cookie: 488 | @taltmann42 |http://www.freecodecamp.com/taltmann42
Aha!
@radekjohn sorry first thing i noticed :P apart from that, looks clean :) maybe increase the space between the results because now it looks like the headline of the next articles belongs to the previous one
except of one problem. when i do a search, and then do another, the results of previous search stay on the bottom of the page
@radekjohn that's because you prepend the results
$("#output").prepend("
@taltmann42 yes, thanks, maybe it needs more styling. It is not finished yet
radekjohn sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 489 | @taltmann42 |http://www.freecodecamp.com/taltmann42
which is fine, since you list all results
but it keeps prepending the results from a new search too. To prevent that, just use
$("#output").html("") before entering the loop, this will delete the content from the output
@taltmann42 thanks i will try it right now
radekjohn sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:warning: radekjohn already gave taltmann42 points
@taltmann42 thats it. tha was fast.
good night to all
@radekjohn :thumbsup:
Hey people I have problem. I've created a logo as a jpf file, but I can't upload it. The thing is, I don't want the background to be visible what do I do?
save as .png
@VilfredSikker needs to be a .png for transparent background.
I'm done with my tribute page what link do I put it the box to go to the next challenge?
@Jaketh thanks! haha went all over the net and then thought of the perfect community here :)
vilfredsikker sends brownie points to @jaketh :sparkles: :thumbsup: :sparkles:
:cookie: 331 | @jaketh |http://www.freecodecamp.com/jaketh
the link in your address bar while you have the pen open. @itchick85
ok thanks
@VilfredSikker No problem :D