:smile:
is it anything to do with hidden-sm-up?
I kept confusingly writing sm instead of xs
also, i don't think you need to specify col-xs-12 at all because that's the default
@r1chard5mith no its not something is telling me it is this
☰
but when i have tried to change it and copy the code again directly from bootstrap default navbar it still does not render
the </a> is greyed out
where did you copy it from?
do you have bootstrap js loaded?
I have most of it working, except it won't let me divide with double digits. They way I have it set up, after each button press it pushes the value of that button to an operate array. Then when the equals sign is pressed, it does all the operations and stuff in between them using a for loop. All the other double digit math works, except for division.
@r1chard5mith
@miriam-z if the weird character is the problem this might be the solution
@Cameron-Burkholder It sounds a bit complicated to do it that way?
sorry
maybe i misunderstood
you catch strings and then when they press equals, you convert them to numbers and do the math?
It is probably overcomplicated but this is the way that I thought to do it. It pushes numbers into the array though.
@miriam-z sorry - i should say, look at the comments - it's a character that might not work - try something else there
@Cameron-Burkholder I think you need to rethink your approach
when they push a number, you want to load that on the end of a string
so that they can enter multi-digit numbers in the big box
Just using the .append() function?
strings are mostly like arrays
except they're immutable, so if you push onto them it will seem to work but won't
lol
you need to reassign the string instead like
yup
my advice would be take a minute and think about how the calulator should work
draw a flowchart or similar
if they press equals, calculate - otherwise, if they pressed an operation, move to the next number-input
otherwise, they pressed a number, so put it on the end of the string, if there's room
when they press calculate, you turn the strings into numbers and do the calculation
@Cameron-Burkholder one other thing id suggest is that you have the same duplicate code for all the numbers...but if you had a class that was the same for number buttns and you used like data-value="1", data-value="2" in the HTML you could set it up such that
$('.number').on('click', function() { var selectedNumber = $(this).data('value'); // do rest of code }
also - I know it's a lot to take in - instead of saying "if they pressed 7, write 7" etc. you can grab the id of the button that they did press using this.id or the content of it, etc.
@teamamerica9 right on
How far are you guys in FCC? @r1chard5mith @teamamerica9
hi @Cameron-Burkholder im actually not doing fcc but a friend of mine did it and i thought it was a really cool idea so i thought id hang around in chat sometimes when im free and see if i can help answer any q
i have a fulltime job doing mostly backend web development though
what language should I learn for the back-end of my website?
Oh ok. What languages? Also, as I have it right now, when any number button is clicked I add that number to a global string, and then when the equals is pressed I do math with that. BUT, because I'm using a string, all I get is string concatenation. Can I cast to a number somehow?
@teamamerica9
theres lots of options ... a lot of people use some of the following frameworks to get up and running quickly...ruby on rails, django, laravel, flask are some popular ones
@Cameron-Burkholder you can use the parseInt function
i do python and scala dev for work for now personally
@Cameron-Burkholder I'm doing the react projects now, having done the front end and d3 bits
the number one best tip I have for anyone learning web development is "start every search with mdn"
try, eg; mdn cast to number etc.
the mozzilla docs are the best by far
mozilla
I should have said parseFloat()
I tried base 10, and that went very badly. I'll try parseFloat next. Basically, I got "4 + 5 = -6054909068265068"
With parseFloat() I can't use decimal values though
Nevermind I read the log wrong
@r1chard5mith parseFloat fixes somethings but it also makes things very strange in terms of decimal arithmetic
@Cameron-Burkholder you are accumulating the current number inf num...and then in divider you do parseFloat(num)
but you never clear num
@Cameron-Burkholder are you just trying to prevent floating point errors?
so it becomes
1. press 5, num is now "5"
2. press divide (num is now "5") (operate is now [5]
3. press 3 (num is now 53") (operate is now [5,/, 53]
hello everyone ^_^ I have been trying to go at fixing a text alignment problem and was wondering if someone could help me.
@teamamerica9 so I keep adding the number info to num, and then when any of the operators or the equals sign are pressed I parse the number and pass it into my math array. Yeah I think not clearing num is what is causing the strangeness. The last digit is correct, but any ones before that are off
center it.
Thanks @teamamerica9 . Clearing num after each operate.push(parseInt(num, ra)); fixed it. Now I'm on to the last thing: chaining pemdas
cameron-burkholder sends brownie points to @teamamerica9 :sparkles: :thumbsup: :sparkles:
:cookie: 10 | @teamamerica9 |http://www.freecodecamp.com/teamamerica9
@espdesign you would have to nest each image/figcaption in a
figure and get rid of this guy:*{
margin: 0px;
padding: 0px;
}
doesnt feel good to fix it and still not understand why its fixed.
read more on the code you are using @espdesign to fully understand what it is doing :p
@sf-jd I would say I understand the positioning fairly well. I just dont know why its doing it !!! T_T
in my experience, which is very limited, designers need a good read of the box model
as paddings and margins sometimes get confusing for them
but thats only on the maybe 20 designers i've worked with :/
and they dont really gave a flying f about letting devs know what they meant by padding and margin anyways xD
@sf-jd as in what the margin and padding they added purpose was?
I've attempted to incorporate PEMDAS in the JavaScript Calculator by first doing multiplication and division, and putting that result back into my operate array, and then doing addition and subtraction, but it doesn't always work.
i dont even try to understand what designers do, but yes, in that neighborhood
:)
@Cameron-Burkholder they don't use pemdas in the example - they just roll the methods from left to right
@Cameron-Burkholder you made great progress
Thanks @r1chard5mith . Wait - so I don't need to implement PEMDAS
cameron-burkholder sends brownie points to @r1chard5mith :sparkles: :thumbsup: :sparkles:
:cookie: 367 | @r1chard5mith |http://www.freecodecamp.com/r1chard5mith
check their example
if you had like 20 operations, it would be too complicated
I thought about making it full scientific, but i don't think that's the point of it
there's no brackets in the ui anyway etc.
just roll through the ops from left to right and accumulate the result
do you have the +/- key working?
oh my bad, sorry
i added that
mine is here if you're interested - yours looks way better http://codepen.io/r1chard5mith/pen/VKwkYm
I looked at the user stories and I think I'm done. Thanks for all the help @r1chard5mith
cameron-burkholder sends brownie points to @r1chard5mith :sparkles: :thumbsup: :sparkles:
:warning: cameron-burkholder already gave r1chard5mith points
Now you have to make a clock :)
Is anyone working on Show the Local Weather in the Intermediate Front End project?
I'm strugling to get a button to do what I want from an iframe. Maybe I should stick to backend tasks
anybody explain what getDOMNode() use for in react js, plzzzzzzzzzz??????????????????????
Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/NNvBQW/.?
what is the line mean "var rawMarkup = marked(value, {sanitize: true});"?
http://codepen.io/luis4flames/pen/jrNqrR
can someone have a quick glance and see if you can see what my twitter button wont open a new tab?
can someone have a quick glance and see if you can see what my twitter button wont open a new tab?
@AshriSoft looks good, a couple suggestions: prevent multiple decimals from being shown
......, also show the operator pressed
ashrisoft sends brownie points to @qualitymanifest :sparkles: :thumbsup: :sparkles:
:star2: 1413 | @qualitymanifest |http://www.freecodecamp.com/qualitymanifest
I haven't had trouble with the FCC curriculum's pacing so far, but now for the intermediate front-end projects I feel like I need a ton of outside resources just to pull them off, any suggestions? I'm semi-lost
why this stupid react bootstrap doesn't work http://codepen.io/pbweb/pen/BLLLQm?editors=1011
@kurumkan I don't know react but u have syntax error there
can I make the random quote generator with some quotes created by me?
I think it would be funnier
I though for a moment that it was completly necessary to do it with APIs
i did it with an api but it gave me a headache figuring out how to get the cross domain errors sorted out.
didnt really get them fixed 100%
Guys, this will really be off topic but... So, I have to create e-comerce website for diploma (I don't know, how to say that in english), but unfortunately, I am not skilled enought to even create such easy website. My question is, is there any website, where I could find, how to create such websites from scratch? Ofcourse, I can't use CMS - obviously. Any Ideas? Thanks.
anyone have any ideas as to why I cant color my html element https://codepen.io/GrantKnaver/pen/BLLLow
I have medium knowledge of Back end, and Databases, soo, they are no problem. My problem is, Front end :/
You can't color html
nvm
wowowowowow
I'm yet to finish it but this is as far as I'll go today
what do you think?
function cpuSeq() {
seq = [Math.floor(Math.random() * choices.length)];
cpuSeq.push(seq);
$("#"+seq).trigger("click");
console.log(seq + " cpu choice");
}
document.ready(function(){
alert("start");
cpuSeq();
});
@123xylem try also to rename your cpuSeq function into my-cpuSeq coz its conflicting ith the same var name cpuSeq declared globally
123xylem sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 715 | @sorinr |http://www.freecodecamp.com/sorinr
What you need friend?
fl0ryc3l sends brownie points to @sf-jd :sparkles: :thumbsup: :sparkles:
:cookie: 299 | @sf-jd |http://www.freecodecamp.com/sf-jd
function cpuSeq() {
setTimeout(function() { var ind = [Math.floor(Math.random() * choices.length)];
seq=choices[ind]; //seq is the value of random choice element
$("#"+seq).trigger("click");
console.log(cSeq + " cpu array" +pSeq);
}, 1000);
cSeq.push(seq);
while(cSeq.length<10){
cpuSeq();
}
//HOW DO I STOP CPU CLICK ADDING TO PLAYERCLICK ARRAY????? pSeq.shift();
}
My simon game is progressing slowly.. Question is... How do i get my cpu to keep clicking itself without infi looping?
I have set this timout function that clicks and adds to an array on each click. It stops when the array is a certain length.. but this function just fills the array quickly and only clicks once... Any ideas?
Hey everyone. I'm trying to access the user's nearest city for the local weather app. Here's the code I have so far:
//get client's ip address
$.getJSON('//freegeoip.net/json/?callback=?', function(data){
var items = (JSON.stringify(data, null, 2));
console.log(items);
var city = items["city"];
console.log(city);
});
The first console.log returns a nice object:
{
"ip": "210.13.83.19",
"country_code": "CN",
"country_name": "China",
"region_code": "31",
"region_name": "Shanghai",
"city": "Shanghai",
"zip_code": "",
"time_zone": "Asia/Shanghai",
"latitude": 31.0456,
"longitude": 121.3997,
"metro_code": 0
}
However, the second console.log returns 'undefined'. I'm not sure why.
@robertridley1988 NO need to stringify response, You can directly access properties over response like this
$.getJSON('//freegeoip.net/json/?callback=?', function(data){
var city = data.city
console.log(city);
});robertridley1988 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 551 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Hello pls i need alot of help with my portfolio webpage design https://codepen.io/Maryam0011/pen/qaaWrY/
am stuck
Hi guys! In the Bottom of my Project I added a facebook (font-awesome) icon (bottom-right corner). unfortunately it isn visible in a browser on my computer, but on my mobile phone. I searching for hours and trying different icon sources - but it doesnt help. Can anyone help me please?
The site is: https://codepen.io/v4/full/wzWNwN/
The site is: https://codepen.io/v4/full/wzWNwN/
I'm happy to help, but why does your "Dr. Norman Borlaug" say it was written and coded by you? That is the example from the project.
@tourdejord pls can u help me too cos all my pictures are not right dont knw wht to do
@Maryam0011 one second. Without even looking at your code I'm going to assume that you don't yet understand box-elements and how they affect each other. one moment.
@tourdejord It was coded by me, that was my first project and i wanted to reconstruct it. i have not used any code from the example. Im, sorry i will change it.
@dracul3a no need to apologize. It's open source. I use youtube straight up instructional video's and copy character for character the code before attempting on my own. I just thought you were trying to take credit for someone else's work in a very poor way. lol. But it's cool. I get it.
@Maryam0011 I think my assumption was wrong. You seem to be on the right track. What exactly are you trying to fix or create. I see some images are unusually larger than others. Are you trying to get each image to effectively fit each section?
@tourdejord Oh ok :D. Do you have any idea why my font-awesome icons doenst work?
@dracul3a its https issue you loaded your pen over https and linked http link of font-awesome cdn. Either load your pen over http or use https version of font-awesome link like https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css
tourdejord sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 552 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
@tourdejord i want the images to be side by side in coloums and what wrong with my header is showing it as list, my font awesome are to showing too
@Maryam0011 I think you used bootstrap classes but did not include bootstrap.css. If your new to codepen check this article https://medium.freecodecamp.com/codepen-tips-and-best-practice-cf926ebd0b11
@dracul3a And you need to include Jquery before including bootstrap.js and check docs of navbar component https://getbootstrap.com/components/#navbar Your mobile navbar seems not working
@vinaypuppal Oh i forgot that i included it in the header and in the document. Thanks you so much! :+1:
dracul3a sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 553 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
http://codepen.io/123xylem/pen/jrAKPN?editors=1011
So I have a potential fudamental error... Need to be able to click a panel and only have it push the answer for USER...
At the moment when the CPU clicks a panel it pushes that answer aswell... So i need to either declare its a user clicking or code something into the cpuFunction
$(".panel").on("click",function(){
var panelId=$(this).attr("id");
audioF[panelId.toLowerCase()].play(); //<-----use id as key
$("#"+panelId).toggleClass("animate");
pSeq.push(panelId); //HERE I PUSH CLICKED PANEL INTO ARRAY But CPU click also triggers this :(
// console.log(panelId,"player");
});
function cpuSeq() {
count++;
newChoice(); //seq is the value of random choice element
interval =
setInterval(function() {
$("#"+seq).trigger("click");
cSeq.push(seq);
console.log(cSeq + cSeq.length);
newChoice();
if(cSeq.length>=count){clearInterval(interval);
cSeq=[];}
}, 1000);
}
Hey, is anyone really good at responsive web design been using ben frain's book on the topic, I'm trying to apply it to my portfolio page but its not going as smoothly as it does in the book
the book recommends changing px values to ems with a formula they give but when I try to do that with the height of div elements doesn't quiet work out. http://codepen.io/ThabaniM/full/BLNrQp/
nvm I think i have got it, I needed to set an explicit px value for the body/container tag
function newChoice(){
ind= [Math.floor(Math.random() * choices.length)];
seq=choices[ind];
return seq;
}
$("#start").on("click",function(){cpuSeq();
})
$(".panel").on("click",function(){
var panelId=$(this).attr("id");
audioF[panelId.toLowerCase()].play(); //<-----use id as key
$("#"+panelId).toggleClass("animate");
pSeq.push(panelId);
// console.log(panelId,"player");
});
function cpuSeq() {
count++;
newChoice(); //seq is the value of random choice element
interval =
setInterval(function() {
if(cSeq.length>=1){ for(i=0;i<cSeq.length;i++){
// HERE IS MY ATTEMPT IF cpuSeq has notes in it... play them again before making new ones.
audioF[cSeq[i].toLowerCase].play(); } }
audioF[seq.toLowerCase()].play();
cSeq.push(seq);
console.log(cSeq + cSeq.length, pSeq);
newChoice();
if(cSeq.length>=count){clearInterval(interval);
cSeq=[];}
}, 1000);
}
I'm trying to do my Front End projects without jQuery, so I can really understand what is going on behind the scenes. I'm struggling with AJAX. Any recommendations on what to read on this topic. I've read through the MDN documentation and read through everything I could find online. I am particularly stuck on the setRequestHeader part.
Hello guys. Why the gelocation is not working when I'm testing it in codepen
@sorinr here's my pen: http://codepen.io/kingmhar/pen/yJGXdV
morning all, I need some basic help. I am trying to start my tribute page but have no clue. I have tried to log in on codepen.io but it takes me to Github instead. any ideas?
kirahmadlare sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 716 | @sorinr |http://www.freecodecamp.com/sorinr
@kirahmadlare navigator.geolocation needs a secure connection thats why you need https
@Baby007mix a codepen account? its free and you can use your github auth data. if you don't have a github account just create one
@Baby007mix here is the link for creating an account on codepen: https://codepen.io/signup/free
@sorinr Thanks for your response. I have already created a Github Account. It says that my email address has already been taken when I try to sign up! so I am confused.
baby007mix sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 717 | @sorinr |http://www.freecodecamp.com/sorinr
@sorinr do you have an idea how can I convert lat and long to a CITY name?
@kirahmadlare i'm calling this url to get further info:
'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + lat + '%2C' + lon + '&language=en'
http://codepen.io/TaillessC/pen/VKKbkr/ i have some problems i cant get the data by json but i dont know why
http://codepen.io/TaillessC/pen/VKKbkr/ this is my work
i need some help really
in my portfolio webpage https://codepen.io/Maryam0011/pen/qaaWrY
baby007mix sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: baby007mix already gave sorinr points
hey, i'm attempting to learn Sass, but it seems the "%" is a special character. Is there any equivalent for when I want to do something like: border-radius: 50%;
@Maryam0011 I guess you forgot it. Shoul be <div class="collapse navbar-collapse navbar-right"> so you should use after navbar-right ">
hi guys someone help please i m using simple weather function for the challenge but i have a problem saying simple weather is not a function
ps i did include this in my code <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js"></script>
ps i did include this in my code <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js"></script>
hi i am facing problem in "Use the Twitchtv JSON API"
can anyone help me out ?
can anyone help me out ?
I am completing challenge in building a tribute page. Can anyone help me?
poking around :nth-child selector. What am i doing wrong here..
isn't
p:nth-child(1)suppose to select my first lorem ipsum paragraph?
Hey @carlfrie I don't know how to make the grey margins https://codepen.io/FreeCodeCamp/full/NNvBQW/
@SteveAmaki crap, can't type. It's because you got an element before your <p> elements. And it's looking for a parent element
@SteveAmaki If you specify it as you did without something before your <p>... It'd consider
body as parent. But now it has none, having your nav in front? Enclose it in a div maybe and use it as a parent? Just an idea.
steveamaki sends brownie points to @kat-mag :sparkles: :thumbsup: :sparkles:
using nth-of-type now. I think that works best for what Im doing
@leo9319 are you using any css framework like Bootstrap?
It looks like the gray area is just a jumbotron inside a container
If you're using Chrome as your browser, the inspector helps a lot!
try doing something like...
<div class="container">
<div class="jumbotron">
content here
</div>
</div>leo9319 sends brownie points to @steveamaki :sparkles: :thumbsup: :sparkles:
:cookie: 122 | @steveamaki |http://www.freecodecamp.com/steveamaki
actually, you dont even have to use the jumbotron
just container
quick question has anybody here been hired straight after completing free code camp course ?
@leo9319 What Border? Can you share your URL?
Taking about the grey border @SteveAmaki
hi, im working on the Pomodoro Clock. Does the setInterval sometimes speed up and slow down?
The gray area is just a container with a css style background: gray;
@SteveAmaki I managed to get a solution. Thanks a lot mate! cheers! :D
leo9319 sends brownie points to @steveamaki :sparkles: :thumbsup: :sparkles:
:warning: leo9319 already gave steveamaki points
pc*
Can make a group
I am trying to create header like this webpage
can you tell me how ?
@SteveAmaki
@nikhil-m
and then float left.
yup done the same
still facing some issues
@nikhil-m try adding this to your CSS
#first img {
width: 100%;
}
Your image is too big for its container (#first)
hey guys, my gh-pages live site won't update with newly added content
I updated my master and gh-pages branches with a skills list in the contacts section, but it won't show on my live site: https://amitp88.github.io/New-Portfolio/#contact
here's the repo: https://github.com/AmitP88/New-Portfolio
it's been like 10 mins now since the update in my repo and it's still not showing up on my live site =(
@AmitP88 That is odd. If you don't see any build errors, make sure your master branch is up to date, delete the gh-pages branch, and re-create it again. Sometimes that works. If not, here are other troubleshooting steps: https://help.github.com/articles/troubleshooting-github-pages-builds/
ah ok. yeah, both my master and gh-pages branches are up-to-date, but i'll try that
I even downloaded the repo from my gh-pages branch and launched index.html and the skills list showed up on there
really weird
i'm not getting any console errors on the live site either
If anyone can help me debug my function for the twitch.tv project i would appreciate it. I am getting no functionality for the case when a user doesn't exist. I tried rewriting as an
$.ajax() method instead of simply .getJSON() to try and use the error: attribute but still had no luck. https://codepen.io/jrandall/pen/pEjqQN?editors=1112
omg ok, so I deleted my gh-pages branch and recreated it (it autoupdated the branch so everything's in it), but now my linkedin image wont show up on the live site (404 load error)
and the image is in my gh-pages branch too
ugh, so freakin weird!
=(
@AmitP88 that sucks! usually when something horrible like that happens and you get really stuck it helps to debug someone else's code. for example, helping me debug my issue may be just the break you need
;)
since i have been stuck for two days straight now lmao
lol @jrandallhansen yeah, i've been there. I'm really rusty with js and jquery (bad I know), but I'll do what I can
@AmitP88 lol just teasing a bit to bring some humor to the situation. if you take a look and anything jumps out at you let me know. thanks buddy
jrandallhansen sends brownie points to @amitp88 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for amitp88
id help you too but i have zero experience with GH yet
what functionality are you trying to achieve?
right now i just want the API call to return the correct
console.log statement for each case
if you look at the console it is coming back correctly for two of the three cases (user online or offline). for the case when user does not exist i cant get any statement to the console
i wrote two attempts (one is through
.getJSON but commented out) and both have the issue
hmmm, I don't think i'd be able to help with this one. I'd post it on the HelpJavascript room though, they'd most likely be able to help you out
@jrandallhansen
...channels/blablabla,kekek,ololo... returns only on users, i think u need compare arrays on users and global array for see difference and dead accounts.
for example, i treat each page (one page = one request for my realization) and when page response me 404, i mark user as
dead
lmao I reloaded my live site and now it's showing me a 404 Site not found error XD
when I didn't even do anything this time
did their servers crash or something?
nikhil-m sends brownie points to @steveamaki :sparkles: :thumbsup: :sparkles:
:cookie: 123 | @steveamaki |http://www.freecodecamp.com/steveamaki
@jrandallhansen change in settings->js the order of loading: first jquery.js and after bootstrap
@sorinr When i changed that I actually got a statement on the console but it was the wrong one. so at least i have progress. what does the order change?
@AmitP88 thanks for trying @ndrsrv how can i check for that 404 response? part of the challenge is to have a specialized case for the 404 response. so rather than separate into a different array i can just adjust the reaction to gettting the response
jrandallhansen sends brownie points to @amitp88 and @ndrsrv :sparkles: :thumbsup: :sparkles:
:cookie: 337 | @ndrsrv |http://www.freecodecamp.com/ndrsrv
:warning: could not find receiver for amitp88
@ahmad1174
$(document).ready(function() {
$("#target1").css("color", "red");
$("#target1").prop("disabled", true);
$("#target4").remove();
$("#target2").appendTo("#right-well");
$("#target5").clone().appendTo("#left-well");
$("#target1").parent().css("backgorund-color","red");
Give the parent of the #target1 element a background-color of red?
what is wrong in this code?
$(document).ready(function() {
$("#target1").css("color", "red");
$("#target1").prop("disabled", true);
$("#target4").remove();
$("#target2").appendTo("#right-well");
$("#target5").clone().appendTo("#left-well");
$("#target1").parent().css("backgorund-color","red");
Give the parent of the #target1 element a background-color of red?
what is wrong in this code?
@ahmad1174 closing } maybe?
$(document).ready(function() {
$("#target1").css("color", "red");
$("#target1").prop("disabled", true);
$("#target4").remove();
$("#target2").appendTo("#right-well");
$("#target5").clone().appendTo("#left-well");
$("#target1").parent().css("backgorund-color","red");
}
@ahmad1174 also, background is mispelled in the last target.
backgORUnd
Hello. I have been trying that after pressing the Tweet button, there is a pre-written tween with the quote. I have not been able to find out how to do this. My button includes the tittle of the page and although every time the "Get quote" button is pressed, the title is changed for the quote, it is not included in the tweet. Any ideas?
https://codepen.io/zarruk/pen/jrrbAB?editors=1010
https://codepen.io/zarruk/pen/jrrbAB?editors=1010
@zarruk I used this to do it on my project. Obviously content = whatever your quote is
$('#tweet-quote').attr('href', 'https://twitter.com/intent/tweet?text='+content).attr('target', '_blank');
also my button that tweets obviously has the id tweet-quote
@zarruk
this might helpful
https://dev.twitter.com/web/tweet-button/parameters
if you add
data-text="custom share text"inside your
<a href="https://twitter.com/share" class="twitter-share-button" data-text="custom share text">section you will see something like
I'm trying to get a <section> of my website to be full page (100%). It works when I have
body {height: 100%} but then I loose the <footer> at the bottom of the page. I have tried section {height: 100%} but it doesn't work. Any ideas? Here's the pen if you want to have a look: https://codepen.io/RickLee/pen/BLzpAR
I need help, how do I make my tweet button tweet the first quote I put on screen? it says undefinedundefined http://codepen.io/Joakosz/full/ZppWky/
This is my tribute page: https://codepen.io/emmanuelamador/full/ZpOqAZ/ I just tried recreating the original from the tutorial here without looking at the code: https://codepen.io/FreeCodeCamp/full/NNvBQW/ Tell me, is mine okay and does it have to be exactly alike? It's similar but there might be differences if your nitpicking. I couldn't recreate the thumbnail effect. I'm a newb so please critique and tell me what I should and shouldn't do.
@emamador you took a little bit seriously the alike thing, why don't you try making your own tribute page?, I will say that you did a good job, it looks alie, you are lacking a <div class="well"> , <div class="jumbotron"> and some omore stuff
@JoacoSz lol yeah. next time I won't copy the project example. I'll do my own. I tried doing it without looking at the code and just recreating it with everything that I've learned from the tutorials. Next time the actual content will be totally different. Thanks.
emamador sends brownie points to @joacosz :sparkles: :thumbsup: :sparkles:
@rangerrick337 what you want exactly ? header and footer always visible ? and section between them ?
what do you guys think of my quote generator?
@wrivera51 that worked, thanks! Google tells me it won't work on older browsers, is there anyway to do it with the height css?
rangerrick337 sends brownie points to @wrivera51 :sparkles: :thumbsup: :sparkles:
:cookie: 149 | @wrivera51 |http://www.freecodecamp.com/wrivera51
@JoacoSz too many colors in my opinion and cursive font :)...
and
h7, h8 and h9 didn't exist
it stops on 6
but free code camp site doesn't allow me to go further
@AlexanderDom I know ahout the h thing, I just put random numbers that are > 6 when I want tiny letters
.h7 { } .h8 {} .etc
@lyubamarinova what do you mean you cant go any further? you can access challenges and projects in https://www.freecodecamp.com/map
otherways
<h9> is never closed, <img> can't contain something if you wan't html opinion @JoacoSz
@AlexanderDom explain the <img> thing, what do you mean?
@JoacoSz i mean that
<img src="" alt="" /> that's how image element must be /> means that it's autoclosed like input elements or br or hr
joacosz sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:cookie: 385 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
<style>
/* PARALLAX */
body, html {
height: 100%;
}
.parallax {
/* The image used */
background-image: url('http://res.cloudinary.com/dvnpariof/image/upload/v1474308988/html_css_javascript_jquery_x8hgdd.jpg');
padding-top: 20px;
filter:brightness(30%);
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.jumbotron {
height: 100%;
padding:100px 0px;
margin: 0px 125px 0px 125px;
color: white;
background: transparent;
}
</style>
<!--parallax-->
<div class="parallax">
<!-- About me-->
<div class="container-fluid jumbotron" id="section1">
<h1>Web Development</h1>
<div class="col-xs-9"><br>
<p>I am a web developer currently living in Cypress, CA. I enjoy building diverse websites from small businesses to
interactive web applications. If you would like more information or would like to hire, you can contact me<a href="http://localhost/portfolio/portfolio.php#section3"> here</a>.</p>
<p>Design (HTML, CSS, jQuery)</p>
<p>Development & Database Setup (PHP, MySQL, SQL)</p>
</div>
<div class="col-xs-3">
<img class="img-responsive" src="https://res.cloudinary.com/dvnpariof/image/upload/v1470496297/12936657_1089804404416345_5148942723251757505_n_zrkauk.jpg"
alt="me" style="width:220px;height:220px" id="me">
</div>
</div>
</div>
@lyubamarinova wow! pretty nice. I like your personal touches like the color scheme, but what is this for: <link rel = "stylesheet"
href="//maxcdn.bootstrap.min.css"/> I thought bootstrap was built into codepen.io
Looks like your text is in that class in the html
@gnosyaj Also, in codepen put your <style> code in the CSS section to keep HTML and CSS seperate
do you know how to fix it?
@gnosyaj Did you try putting
color: white; in your .parallax class styling?
@lyubamarinova well it's good practice to write it out. I just thought it was something else that's why i'm asking.
@gnosyaj hmm, looks like your
filter: brightness(30%) is applied to the whole parallax element which is affecting your text as well. Maybe it would work to put that somewhere else? I'll have a try
@JoacoSz your awesome quote site reminds me of the old style internet. Everything works good though. the only thing is that if you generate a longer quote then the button moves and all the content below it and the size of the page changes...so it gets annoying.
@rangerrick337 where would i put it so that the text remains white and the background dark?
@emamador yeah, I've noticed that, any suggestions on how to change that?
@gnosyaj I think this will fix you up! http://stackoverflow.com/questions/26621513/darken-css-background-image
@rangerrick337 i think i figured it out. i just have to remove jumbotron and size up the fonts thank you though!
gnosyaj sends brownie points to @rangerrick337 :sparkles: :thumbsup: :sparkles:
:cookie: 105 | @rangerrick337 |http://www.freecodecamp.com/rangerrick337
@JoacoSz idk increase the width of the quote div or put some space between the button and the quote box somehow. maybe. or make the text responsive somehow. can i edit your code?
hey guys, so I got my portfolio site the way I want to on desktop view, and now i'm trying to get it looking good on mobile. https://amitp88.github.io/New-Portfolio/ it mostly looks good on mobile too, except for the text boxes looking cluttered, but my main part is that on mobile, there is excess white space when I scroll to the right. how do I get rid of this for mobile view?
I tried using bootstraps' container-fluid and col-xs-12 (for the smallest viewport) but it just messed things up more and still didnt get rid of the excess whitespace
@AmitP88 You class skills with display:flex; is causing it.
in the contact section.
@SteveAmaki ah I see. so I should remove that and stick with using the container-fluid and col- divs?
I'm cleaning up my code atm but I'll definitely use that
btw what do you think of my site so far?
:)
how do I do that?
@SteveAmaki :)
@SteveAmaki thank you :)
amitp88 sends brownie points to @steveamaki :sparkles: :thumbsup: :sparkles:
:cookie: 125 | @steveamaki |http://www.freecodecamp.com/steveamaki
haha
Here's what google has to say about brownie points.
https://www.google.com/search?q=brownie+ine+codecamp&oq=brownie+ine+codecamp&aqs=chrome..69i57.4319j0j4&sourceid=chrome&ie=UTF-8#q=brownie+points
https://www.google.com/search?q=brownie+ine+codecamp&oq=brownie+ine+codecamp&aqs=chrome..69i57.4319j0j4&sourceid=chrome&ie=UTF-8#q=brownie+points
Im not sure how CodeCamp uses it.. I think it unlocks certain perks.. not entirely sure. Its my first week using Codecamp
Please someone help me. I'm trying to complete the tribute page project. I cannot figure out how to center the image. I have searched the web but the things I tried still didn't work. http://codepen.io/n_horn/details/ZppRGG/
@N1CKL3 I see. A little to the left. Let me check again.
@N1CKL3 i did this on mine: display: block; margin-right: auto; margin-left:auto; and maybe set a width
but i didn't use the img-thumbnail class that you have so i don't know how its going to affect the boostrap classes.
@KoniKodes @emamador Maybe it is the thumbnail. It was centered until I added in the thumbnail
@N1CKL3 You don't need the style tag in the html. You have added Bootstrap to your setting, which is good. But you haven't styled anything yet. As @emamador said, iif may be the thumbnail. try to add img:{margin:auto;} in your css.
@N1CKL3 Here's my remedy..
function truncateString(str, num) {
if(num <= 3) {
return str.slice(0,num) + "...";
} else {
// ??
}
}
truncateString("A-tisket a-tasket A green and yellow basket", 2);
Last 2 challenges are passing fine, however I am struggling on how to add the '...' without affecting the string length, any suggestions?
@SteveAmaki @KoniKodes @emamador Thanks guys! I tinkered with it a bit. It's the thumbnail. If I center it and then add in the thumbnail the border is huge. I don't really understand because the example tribute page has a thumbnail photo. Maybe it has to do with the size of the photo?
n1ckl3 sends brownie points to @steveamaki and @konikodes and @emamador :sparkles: :thumbsup: :sparkles:
:cookie: 126 | @steveamaki |http://www.freecodecamp.com/steveamaki
:warning: could not find receiver for emamador
:cookie: 372 | @konikodes |http://www.freecodecamp.com/konikodes
@N1CKL3 Since you're using Bootstrap already, take advantage of the grid system
Use the container class to center things.
HELP!
I want to have a scrolling effect when Video and Timeline buttons are clicked. Right now its just jumping into the section.
@N1CKL3 @SteveAmaki this is another solution. centered with still using the thumbnail class:http://codepen.io/emmanuelamador/pen/QKKJNE it's the display: block; that allows you to center it. I still think you should listen to @SteveAmaki and use the grid system because that's what was taught in the tutorials. you should learn and know the grid system. tell me if it's centered
The grid system will also give you a unified look to your site since it aligns to each other.
hence.. grid
@SteveAmaki I think this article may help you...
http://stackoverflow.com/questions/4801655/how-to-go-to-a-specific-element-on-page/11986153#11986153
You'll need to use either native JS or JQuery...
PS: Good evening all! :)
steveamaki sends brownie points to @gbsimon87 :sparkles: :thumbsup: :sparkles:
:cookie: 328 | @gbsimon87 |http://www.freecodecamp.com/gbsimon87
@SteveAmaki, for the jquery example, you can adjust the speed, it doesn't have to be the fixed 500
@emamador @SteveAmaki Thanks guys. I'm trying. I understand the idea of rows but the col-size-# concept is a bit confusing. I will have to go back and look at the lessons with the chart they linked.
n1ckl3 sends brownie points to @emamador and @steveamaki :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for emamador
:warning: n1ckl3 already gave steveamaki points
@N1CKL3 col-xx-xx will decide how much space that div will take(the grid is 12 units if i remember correctly)
@N1CKL3 the size represent the different screen sizes. the number has to add up to 12 to complete a row.
i need some serious help
so from line 13-33
i am trying to return the length of my string but when i compare it to step not happens?
*nothing
when you return something the browser is suppose to read that like a variable holding data right?
@N1CKL3 Here's a great resource to understanding the rows and columns in bootstrap
http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
@wearenotgroot @SteveAmaki @gbsimon87 Thanks guys. I really appreciate all the help!
n1ckl3 sends brownie points to @wearenotgroot and @steveamaki and @gbsimon87 :sparkles: :thumbsup: :sparkles:
:warning: n1ckl3 already gave steveamaki points
:cookie: 329 | @gbsimon87 |http://www.freecodecamp.com/gbsimon87
:star2: 1757 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
that should be a number
@mpettaw2 the problem is
if(mMove===step){mMove is your function, if you wanted value from it you should probably execute it.
so
mMove()
@SteveAmaki hey Steve, so I cleaned up my code and your solution worked, but I still get a tiny little slit of vertical whitespace on mobile view. Anything else I can do to remove this last bit?
all I did was remove the display: flex from any code that pertains to the contacts section
@AmitP88 will check it out when I get home. Send me a private message with the url to your project
@mpettaw2 it is but you cant compare it like that. you need to store some value to a variable
amitp88 sends brownie points to @steveamaki :sparkles: :thumbsup: :sparkles:
:warning: amitp88 already gave steveamaki points
let me try that
@mpettaw2 remember setInterval only execute the function continously until stop by clearInterval and it will not return anything, so your best bet is to update or set a variable to some value inside the function you gave the setInterval to execute
Hey. I'm recreating Chrome starting webiste (google and these 8 recently visited website tabs). I created 8 divs and they are all perfectly divided into 2x4 blocks but the thing is; they are on the left. I tried using "position: center" and "text-align: center" but it didn't worked. Then I changed my "float: left" into "display:inline-block;" but it still won't put them in the center. Can anyone help me?
?
Nonetheless, your parent div, where the 2x4 blocks are, try giving it a css style of text-align: center;
@gbsimon87 That's the code for a single tab right now:
width: 100px;
height: 120px;
background-color: yellow;
display:inline-block;
margin: 5px;
text-align: center;
}
width: 100px;
height: 120px;
background-color: yellow;
display:inline-block;
margin: 5px;
text-align: center;
}
@gbsimon87 As u can see I've included text-align: center;
@gbsimon87 http://codepen.io/Flashards/pen/qaaQpL
If you text-align the 2x4 block itself, you're telling it to have all the elements inside of it be text-aligned. To center all the blocks themselves, nest them under a parent div...
you can take different approaches, either set both margin-left and margin-right to auto, or setting the parent div to text-align center
you can take different approaches, either set both margin-left and margin-right to auto, or setting the parent div to text-align center
A number of things, it isn't the best practice to set styles specifically to ids, use classes instead
Secondly, you're giving the same styles to differeny blocks, why not just create one style with those values in it and apply that one style to the different divs?
I'll send you a file back to demonstrate what I mean...
@gbsimon87 ok. thanks for attention. so what was the issue there with the blocks?
flashards sends brownie points to @gbsimon87 :sparkles: :thumbsup: :sparkles:
:cookie: 330 | @gbsimon87 |http://www.freecodecamp.com/gbsimon87
@Flashards I hope this helps...
I tried changing the colors around so that you can see where the different divs are...
http://codepen.io/gbsimon87/pen/xEEQjQ
I tried changing the colors around so that you can see where the different divs are...
http://codepen.io/gbsimon87/pen/xEEQjQ
flashards sends brownie points to @gbsimon87 :sparkles: :thumbsup: :sparkles:
:warning: flashards already gave gbsimon87 points
No worries...
The key points for this semi-hack are...
The key points for this semi-hack are...
- fixed width (it can have transparent background so the user doesn't see the inteded width)
- Margin, 0 auto...0 for the pixels, auto so that it's evenly distributed
Thirdly, see how I only created ONE class, and applied that class to the individual div elements?
@gbsimon87 I have a quick question on the bootstrap grid. From what I understand. The size you choose is based off of the minimum screen size you would like the page to fit on and then it will auto correct itself for screens that are larger. That's why a lot of people choose xs. The columns could be for having lists or paragraphs spaced out within your row but it needs to add up to 12. If you only have 1 column then you automatically choose 12. Is that correct?
@gbsimon87 Yes. I was expecting some thing like: parentDiv1 > childrenDivs { not just parentDiv1
@N1CKL3 In order for bootstrap to 'work' correctly as it is set up to be, EVERY row needs 12 columns
Sorry, let me rephrase.
you can't have...
<div class="row">
<div class="col-xs-4">
</div>
<div class="col-xs-7"
</div>
<div class="col-xs-6">
</div>
</div>
See how the columns inside that row add up to 17? They MUST add up to 12
But you can use any combination you'd like, as long as it adds up to 12..
Now most people start with xs columns first as they are intended for mobiles (extra small)
Now most people start with xs columns first as they are intended for mobiles (extra small)
So often you'll see design that for cellphones only show two colums, but for larger screens, say a large screen monitor, it may show 4 columns, as it gives more space
@Flashards using that method is also accepted, you must find a way that's comfortable for you...
@N1CKL3 as the site I sent you says...
On a big screen it might look better with the content organized in three columns, but on a small screen it would be better if the content items were stacked on top of each other.
On a big screen it might look better with the content organized in three columns, but on a small screen it would be better if the content items were stacked on top of each other.
Bootstrap's grid system will adjust for you, but just make sure the col-xs-# values add up to 12 inside the individual rows
You didn't need to end up on 12 if you start a new row
@AlexanderDom Correct, as I said per individual, it's hard to fully express on chat without writing a full essay sometimes
@AlexanderDom it's good practice to start though, before heading into offsets
At least in my experience
Yes @gbsimon87 , but not everybody want always all and it's sad
i don't talk about offset just that if you want one line with 6 and 3 it's ok ;)
@gbsimon87 Okay, perhaps I worded it wrong but I do understand that it must add up to 12 columns within a row. I don't want you to think that I didn't read the link in its entirety. I'm willing to put in the research and time but I like to make sure that I properly understood it. Last question. If you choose 12 then that would just be the entire row? For example, a picture you put within a row and col-xs-12 will take up the whole row BUT the picture will still be in its original size.
col-xs-12 doesn't affect the picture but it does mean that there is only 1 column within the row?
@gbsimon87 Alright! Yes, I 100% understand it now! Thank you for sending that link. I bookmarked it and I appreciate you solidifying my understanding of the subject. Thanks!
n1ckl3 sends brownie points to @gbsimon87 :sparkles: :thumbsup: :sparkles:
:warning: n1ckl3 already gave gbsimon87 points
@N1CKL3
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_img_thumbnail2&stacked=h
Open that page up, minimize your browser, and expand it with the mouse, as in make the browser window smaller and larger, and view the effect on the pictures and the div elements :)
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_img_thumbnail2&stacked=h
Open that page up, minimize your browser, and expand it with the mouse, as in make the browser window smaller and larger, and view the effect on the pictures and the div elements :)
@AlexanderDom Je vais a Paris le mois prochaine!
C'est ma premiere fois!
@gbsimon87 bien bien :) mois prochain, but it's good
for vacation ?
aaah vrai, le mois...
Oui, avec ma copine
And @N1CKL3 no worries, keep at it!
Oui, avec ma copine
And @N1CKL3 no worries, keep at it!
@gbsimon87 ok good choice for vacation
+ .copine :]
Oui, elle a ete beaucoup de fois, c'était la ville préférée de son père.
Comment dit-on, cite ou ville?
Comment dit-on, cite ou ville?
Plus-tôt ville que cité, cité est utilisée pour la banlieue - les villes proches de la ville
Hello. I have been trying that after pressing the Tweet button, there is a pre-written tweet with the quote. I have not been able to find out how to do this. My button includes the tittle of the page in the tweet and although every time the "Get quote" button is pressed, the quote is assigned to the title of the page, such quote is not included in the tweet. Any ideas?
https://codepen.io/zarruk/pen/jrrbAB?editors=1010
https://codepen.io/zarruk/pen/jrrbAB?editors=1010
Hello, is there anyone else having difficulty with the Twitch App project?
i tried to look at the sample code but all accounts are closed... any I don't really understand the documentation for calling the twitch API since i keep getting "no client ID error"