How ya' doin'?
e
how you doin
Working on the weather app
trying to find how to put the weather and the button on top of the background.
I have the api working so the background is set.
the background of what
if you make it the background of the <body> everything else should be on top
using the css background property
the navigator.geolocation gets your GPS and tells you what the weather is. Then uses that to make the background change
either of those options help/make sense?
that's what i would do
I would think that the background image would always be in the background? Maybe add it to the body instead of the HTML?
Hello can I ask someone a quick question? I am trying to create an inline-block, but it is not working
Thanks!
@rdavidson3 - well, that box1 is what you're trying to add? It is the only thing on that row of the page, the
<h2> element before it is display:block so the inline-block of the next div starts on a new "row" of the output. If you put two divs together after that h2, make both have the class of box1, it should probably work. Oh - this is also a problem - you have to write the CSS selector for your class as .box1 in order for it to apply to those divs... So put a second div with class="box1" and add the . to .box1 in the CSS panel, and it should display two divs side by side. Add some content in the div so they show up. Oh, and if you want the divs to show up, use background-color for the color so that the entire box will be filled...
that makes so much sense lol. And it totally worked Thanks @khaduch
rdavidson3 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3513 | @khaduch |http://www.freecodecamp.org/khaduch
Guys, can someone run my Portfolio Webpage code locally and test it to see if the result is the same as it is on codepen?
because when i try it locally, the colors are completely different from the way they are in codepen
preferably side by side with code pen
@Quantomistro3178 Seems the same for me (using Firefox)
thats chrome
@Quantomistro3178 not only color, but also font. i think your local is not using he same css as the code pen. please verify the same css is being used by both
wait
@Quantomistro3178 In the right bottom corner of codepen there is an export button. Use that one and it should work :)
@GitHub-Henry if you're referring to the external css, I copied the CDN links that I put in codepen.
@Otto-AA do i export it as .zip?
@GitHub-Henry Yeah, when I export it from codepen. Even though the code still looks the same....
@GitHub-Henry But the colors are still mixed up when I run the code on chrome through notepad++. oh well.
i'm probably overlooking some obvious mistake.....
@Quantomistro3178 css must be different, check each line to find the difference
@GitHub-Henry I literally CTRL-C/CTRL-V'd both the html and css from codepen
@Quantomistro3178 Also the linkings of the settings (as in your screenshot?)
@Quantomistro3178 https://text-compare.com/
I either made a mistake with the links, or its just my browser. Or maybe its notepad++. is that possible?
@Quantomistro3178 try using the text-compare.com tool, there should be a difference
@Quantomistro3178 Notepad++ only tells the browser to open. Similar to clicking on a link or double-clicking your local file
@GitHub-Henry Its ok. I've been holding off the portfolio project for a few months already, I don't wanna get back too deep into it just now. I'll finish it when I have more free time.
@Quantomistro3178 i think the portfolio should be one of the LAST projects. you will have more skills to produce a better portfolio, also you will have completed projects to put into your portfolio. so, in my thinking, better later than sooner
I was just curious about how the code was running differently locally than on codepen
@Quantomistro3178, @Otto-AA showed they looked the same, they are different cuz the css is different in your version
@GitHub-Henry very true about the portfolio project being the last.
@GitHub-Henry yeah, I understand now.
@Quantomistro3178 i'm sure you'll see the error after you get back to it, :+1:
@GitHub-Henry I was wondering, if I <h1> and don't define the size myself, will the font change according to screen size?
depends, you can define h1 by pixel or by units that change based on size
quantomistro3178 sends brownie points to @github-henry :sparkles: :thumbsup: :sparkles:
:cookie: 490 | @github-henry |http://www.freecodecamp.org/github-henry
quantomistro3178 sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 388 | @otto-aa |http://www.freecodecamp.org/otto-aa
@Quantomistro3178 just make some folks feel good about getting them, not much else
@Otto-AA appreciate your input, thanks, :shipit: :dizzy:
github-henry sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 389 | @otto-aa |http://www.freecodecamp.org/otto-aa
is there anyone who can explain me one thing (js functions) and help with 1 thing on priv chat ? keep in mind that you will deal with moron .....
thank you so much
PLEASE NOTE: We donāt require full code for question 4. Instead, provide enough code/context to
explain how you would solve this, and deal with any issues.
Go to: http://www.whoishostingthis.com/compare/ .
Change this page so that the second host (in this case, Innovation Hosting) is discounted by 10% and
the price per month is highlighted in red.
Your code should be able to run on page load and produce the expected result. Using any of the
filters on the left-hand side of the page should also work. For example, if a user ticks āUnlimited
Bandwidthā and āFree Domainā, the second result should be discounted by 10% and shown in red.
Please provide an outline of the code and how you would approach modifying the calculatorās output
to discount this price by 10%, and change the formatting, to make it look like this:
explain how you would solve this, and deal with any issues.
Go to: http://www.whoishostingthis.com/compare/ .
Change this page so that the second host (in this case, Innovation Hosting) is discounted by 10% and
the price per month is highlighted in red.
Your code should be able to run on page load and produce the expected result. Using any of the
filters on the left-hand side of the page should also work. For example, if a user ticks āUnlimited
Bandwidthā and āFree Domainā, the second result should be discounted by 10% and shown in red.
Please provide an outline of the code and how you would approach modifying the calculatorās output
to discount this price by 10%, and change the formatting, to make it look like this:
it is this exercise for a test
Hey there. I have some basic notions on css and html but I'm still a beginner and I'm having trouble with decision-making, was hoping to get some opinions from people who already have got some experience.
What's the deal with Bootstrap? Is it some sort of shortcut, or is it a good choice overall? Should I be using it or am I better off writing from scratch? How much will it help me?
Actually a bit lost here. Thanks in advance
What's the deal with Bootstrap? Is it some sort of shortcut, or is it a good choice overall? Should I be using it or am I better off writing from scratch? How much will it help me?
Actually a bit lost here. Thanks in advance
@luizanyn If you're even slightly worried about the 'design' of the interface, you won't go very far without Bootstrap
Especially if there's grids involved
@Quantomistro3178 I am indeed worried about the design so that's a yes, you should be using Bootstrap, I guess.
I worry mostly about not fully understanding the code I am using when reaching to Bootstrap and how much can I do to customize it
there's another option called materialize and looks better than bootstrap if the topic its design
my suggestion is to not learn bootstrap at all. it's a dying framework that doesn't teach you how to really use css.
don't use any css libraries. write everything from scratch when you are starting out. relying on bootstrap and other libraries will hurt you significantly in the long run.
even more with things like flexbox and grid showing up still I do use bootstrap on the fcc projects to make it a bit faster I would say
@luizanyn i know. I'm really not good with bootstrap and would rather not use it if it weren't for the grid thing. but im really not the expert here
var quot;
function load(){
var https = new quotes();
https.onreadystatechange = function()
{
if(this.readyState==4 && this.status==200){
document.getElementById("p").innerHTML = function quote(quotee)
{
quotee.quoteText;
};
}
};
https.open("GET","https://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=jsonp&lang=en&jsonp=?",true);
https.send();
}
@kevinkiklee @tiagocorreiaalmeida @Quantomistro3178 thank you all for your input. :) the whole thing makes me confused because I do get the feeling that I'm not really learning in the long run when using frameworks.
I'll check out Materialize tho! Thanks again.
I'll check out Materialize tho! Thanks again.
luizanyn sends brownie points to @kevinkiklee and @tiagocorreiaalmeida and @quantomistro3178 :sparkles: :thumbsup: :sparkles:
:cookie: 251 | @quantomistro3178 |http://www.freecodecamp.org/quantomistro3178
:cookie: 332 | @kevinkiklee |http://www.freecodecamp.org/kevinkiklee
:cookie: 446 | @tiagocorreiaalmeida |http://www.freecodecamp.org/tiagocorreiaalmeida
guuys what is the wrong in this code why it did not print the quotetext
and learning bootstrap is not easier than learning regular css/scss. it's harder imo. it's like putting extra work in for no reason.
master flexbox.
@1532j0004kg this seems kinda wrong:
document.getElementById("p").innerHTML = function quote(quotee)
{
quotee.quoteText;
};you define the function quote and set the innerHTML equal to the function (and not an output of the function)
id:p elements will replaced by the quote.quoteText, I think.
@1532j0004kg oh, and that
var https = new quotes() seem like it should be var https = new XMLHttpRequest()
this is my code.
text is not print
Wait, there's a <p1> tag in html too? i thought it was just <p>
@1532j0004kg well, they are user defined if you defined them. else (like in your case) they are undefined. Means
->
->
-> everything you want to do with https won't work
quotesis undefined->
new quotes() is undefined->
https is undefined-> everything you want to do with https won't work
i defined
ok,
then you tell it:
which is the same as
so https equals undefined
quotes is undefined, therefore new quotes() is undefined as well.then you tell it:
var https = new quotes();which is the same as
var https = undefined (because new quotes() is undefined as well)so https equals undefined
the quotes
quotes are the objests where i want to define it.
Hey everyone, what would be a good way to host downloaded resources so that you can link to them when building a website? For example, google drive or dropbox?
@1532j0004kg Please take a look here first and then if you still have questions ask again: https://www.w3schools.com/xml/xml_http.asp
Anyone here familiar with Jekyll?
ive just been putting all my stuff on github, but i dont have much for pictures or other media
for these projects anyway
chrisandsuch sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 910 | @mot01 |http://www.freecodecamp.org/mot01
yea, i dont think its meant for putting your music library on there - but if it's just a few pictures i dont see why not
@Otto-AA yes this exercise PLEASE NOTE: We donāt require full code for question 4. Instead, provide enough code/context to
explain how you would solve this, and deal with any issues.
Go to: http://www.whoishostingthis.com/compare/ .
Change this page so that the second host (in this case, Innovation Hosting) is discounted by 10% and
the price per month is highlighted in red.
Your code should be able to run on page load and produce the expected result. Using any of the
filters on the left-hand side of the page should also work. For example, if a user ticks āUnlimited
Bandwidthā and āFree Domainā, the second result should be discounted by 10% and shown in red.
Please provide an outline of the code and how you would approach modifying the calculatorās output
to discount this price by 10%, and change the formatting, to make it look like this:
explain how you would solve this, and deal with any issues.
Go to: http://www.whoishostingthis.com/compare/ .
Change this page so that the second host (in this case, Innovation Hosting) is discounted by 10% and
the price per month is highlighted in red.
Your code should be able to run on page load and produce the expected result. Using any of the
filters on the left-hand side of the page should also work. For example, if a user ticks āUnlimited
Bandwidthā and āFree Domainā, the second result should be discounted by 10% and shown in red.
Please provide an outline of the code and how you would approach modifying the calculatorās output
to discount this price by 10%, and change the formatting, to make it look like this:
@RogeMateos
Any specific part you want help with?
Won't do the exercise for you mate :)
i am asking for approach
@RogeMateos Is this exercise up-to-date?
Using any of the
filters on the left-hand side of the page should also work. For example, if a user ticks āUnlimited
Bandwidthā and āFree Domainā, the second result should be discounted by 10% and shown in red.
This doesn't seem to work for me
@RogeMateos Else I would use javascript/jquery to trigger click events
now it changes but i am trying to do it anyway changing the color and adding 50 per cent
my approach is document.getElementById(men).style.color="#d32e12";
but it is not id is class
and perhaps injecting text with inne
jquery or vanilla javascript
i think maybe vanila javascript iit is better
but i can use jquery , perhaps i tried both
you could do something like
$('.hostclass:nth-child(2) .price.currency-eur').something...
with jquery to get it (hostclass is the class of the div which contains each host, didn't look up its name)
$('.hostclass:nth-child(2) .price.currency-eur').something...
with jquery to get it (hostclass is the class of the div which contains each host, didn't look up its name)
Hey everyone, how can I use react with bootstrap. Is there a specific way to integrate these?
mabey the problem is with using this on codepen?
make sure to use the className and not class
@moT01 Oh yeah! I forgot about that one. Thank you so much!
chrisandsuch sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 911 | @mot01 |http://www.freecodecamp.org/mot01
@lordkingstar just post it once someone can look into it they will(even myself)
please can any one help me create series of x which are on the background of this link https://scontent-lhr3-1.xx.fbcdn.net/v/t35.0-12/23715391_515791765445807_1090716163_o.png?oh=9d4dcee0a00c8b4f8aeffb3d7ccb571f&oe=5A13B66C
Does any one know how to fix a footer to the bottom of a page?
Irrespective of the screen size?
My footer works fine on wide screens, but on mobile, as the bootstrap columns collapse, the footer apears over content
@onomesotu send code
is something wrong?
Thanks
its good to be back
hi, how can I make rounded corner on a div that contains other divs, it seems like if it has sub-divs then adding border-radius doesn't work.. here's my codepen: https://codepen.io/anon/pen/LOevPK
@brittanyrutherford If you apply a
border: 1px solid blue; on .gigs > li > .date you'll see what is happening. It's creating a border-radius on the div. It just has no effect on the children elements.
What you can do is set
border-top-left-radius and border-top-right-radius to .gigs > li > .date > .month and border-bottom-left-radius and border-bottom-right-radius to .gigs > li > .date > .day to get the effect you want.
@brittanyrutherford for testing.. addding border helps...
to restrict children view u can use
to restrict children view u can use
overflow: hidden; ... soo all "extra" content will hide
@moigithub I am still in that codepen. Just tested
overflow: hidden;. It's not working.
@onomesotu This seems like what you want: https://css-tricks.com/snippets/css/sticky-footer/
@brittanyrutherford little offtopic tip: Using codepen there is a "tidy html/css/javascript" function in the code tabs (e.g. HTML) at the arrow menu. It will make it much easier to read ;)
@brittanyrutherford what about that?
.gigs > li > .date *:first-child {
border-radius: 10px 10px 0 0;
}
.gigs > li > .date *:last-child {
border-radius: 0 0 10px 10px;
}
just finished my latest "backend" idea: http://glacial-wildwood-63393.herokuapp.com/ still need to do a proper frontend
or at least a proper css ... the JS code is already in a "not to bad" shape I guess
@brittanyrutherford Or as moigithub suggested overflow works aswell
.gigs > li > .date {
width: 70px;
text-align: center;
-ms-border-radius: 10px;
border-radius: 10px;
overflow: hidden;
}
@moigithub :thumbsup:
I have in the cinema watching justice league šš¤©
Was*
Hey guys hello , can someone tell me what knowledge do i need to create an app that shows when an employee is at work?
Im currently learning reactjs
hey guys pls am finding it difficult to do this "Give the text input in your form the class form-control. "
pls kindly assist
@chiedoziemc Do you know how to give a html element (e.g.
<p>My Paragraph</p>) a class?
yea yeah
@chiedoziemc
how do you add a class to this?
just try
<input type="text" class="form-control" placeholder="cat photo URL" required>
@volkranium (Disclaimer: Never done this myself. Just think thats everything you need)
You will need some backend which stores which employees are currently at work. (I'd suggest node.js as this also uses javascript). This server will need an API, so you can send it "employee checked in" or retrieve a list of currently checked in employees. Probably look into herokuapp, I've never looked what it is myself but often heard it in that context ^^
And then the frontend. This is your reactjs part. I'd do two sites: One to check in/check out and one to look who is currently checked in.
You will need some backend which stores which employees are currently at work. (I'd suggest node.js as this also uses javascript). This server will need an API, so you can send it "employee checked in" or retrieve a list of currently checked in employees. Probably look into herokuapp, I've never looked what it is myself but often heard it in that context ^^
And then the frontend. This is your reactjs part. I'd do two sites: One to check in/check out and one to look who is currently checked in.
Hey @tyjanii
@chiedoziemc Seems good :thumbsup:
im practising HTML/CSS in codepen only problem is the colors of the tags are refusing to change
id send a link if anyone is willing to help
Do you mean the colors in the code editor?
@tyjanii
Typo: <h1 class="text-center" style">MECHHIRE.COM<h1>
@Benwebdev thank you id check
tyjanii sends brownie points to @benwebdev :sparkles: :thumbsup: :sparkles:
:cookie: 364 | @benwebdev |http://www.freecodecamp.org/benwebdev
<h1 class="text-center" style=āā>MECHHIRE.COM</h1>
@tyjanii Sidenote: In codepen you generally don't put any <head> or <body> tags into the HTML part. Only put the content of
<body>content</body> there and for the <head>headStuff</head> you can click on the settings icon left to html and put it in there ;)
Is there a way for me to see actual usernames of people on mobile not display names ?
Hard to tag on mobile if username is different to display name
tyjanii sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 390 | @otto-aa |http://www.freecodecamp.org/otto-aa
@tyjanii Fix the type Ben pointed out and in the CSS use
.jumbotron h1 instead of only using h1. Because the most specific selector will be used. (!important > inline style > id > class and specific selector > unspecific selector). And bootstrap uses .jumbotron h1 to make the text grey I think
tyjanii sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
api offline
@tyjanii Ctrl+Alt+I opens the Developer tools with console.
I think Cmd+Opt+I on the mac
I think Cmd+Opt+I on the mac
I post that in the wrong channel š¤š¤
But your welcome @tyjanii