anybody here know how to make those menus that get fixed to the top of the screen when you scroll past them?
not like bootstrap's .navbar-fixed that is fixed from the beginning, but one that has a static position, following the flow of the page, but before it is about to leave the viewport it gets fixed to the top of the screen
@bearswamppastor Yep, a web link of some kind, then it should be able to find it
@eliecerthoms Perhaps it is done using a check for scroll height and then transitioning the bar from an in-page element to a navbar-fixed?
@callumquick interesting, gonna try that
@eliecerthoms check this
@walidashri lol, was trying to implement exactly that one, but whenever I start dealing with
position: absoluteon the menu bar, it breaks completely
@eliecerthoms you work in codepen?
@walidashri no, working with a templating engine, but let me see if I can set it up there
Can anyone help me on how I would access the first "extract" key in this JSON data? https://en.wikipedia.org/w/api.php?action=query&format=json&prop=extracts%7Cinfo&titles=Harry+Potter%7CEragon&exsentences=1&exlimit=10&exintro=1&explaintext=1&inprop=url I'm working on the wiki viewer project...
Is anyone good with css/bootstrap who can check why some of my styles are working and some aren't?
I commented my code so you can find which work and which don't more easily, thanks!
http://codepen.io/amidzicigor/pen/bBQPZZ
I commented my code so you can find which work and which don't more easily, thanks!
http://codepen.io/amidzicigor/pen/bBQPZZ
@amidzicigor i don't see the comments so not sure what you mean or where to look
@sparklie3 In the css, there are comments
where are these comments in the css?
I don't see anything like // comment or <!-- comment -->
i think css comment is
/* comment */
oh, i see them now
@sparklie3 lol
@ssgriffen Sadly you're not going to be able to get the extract without knowing in advance the Page ID
@ssgriffen Instead of action=query you'd be better to look at action=opensearch for just searching
@amidzicigor did you copy this css somewhere?
@sparklie3 What do you mean?
i've never used the bootstrap btn on a form input
to describe the class
so for example, i don't see what you use btn btn-default as your css class to begin with, but then again, btn-default isn't really necessary even
@sparklie3 I just found a bootstrap component that aligns buttons vertically. I simply switched the btn with a text box
@sparklie3 Yeah I took out btn-default
@sparklie3 The thing is, if you tab the '.form-signup', it works fine.
if you tab the entire section starting with .form-signup, and put it under the one right before it
hey all
it's because of this class
btn-group-vertical
you'll see if you remove the class, your border-radius then functions
so the btn-group-vertical might have an override
@sparklie3 Hmm
@sparklie3 Know any fixes for this? Is there any other way to get my textboxes to be vertical?
well, you can look up bootstrap to see how exactly btn-group-vertical works
it's a little odd you're using btn for input fields, but then again, i'm not a expert on bootstrap
maybe that's what you do, i've never used btn class for things that aren't buttons
and your input field isn't a button, it's a textbox
or inputbox
off the top of my head, you can set div, create your own class
@sparklie3 Yeah I know, I just created a bootleg setup for the textboxes. There needed to be a btn class for them to line up
What am I doing wrong here?
function mutation(arr) {
var arr0 = arr[0].toLowerCase();
var arr1 = arr[1].toLowerCase();
if (arr0 === arr1){
return true;
} else if(arr0.indexOf(arr1, 0) === arr1.length || arr1.indexOf(arr0, 0) === arr0.length) {
return true;
}
else {
return false;
}
}
mutation(["hello", "Hello"]);
can someone please tell me whats wrong with my code: https://codepen.io/Merryl/pen/JbaYvL?editors=0010
chrome doesnt support getlocation over http and i cant get the api to function over https
amazing stuff really
proxy like crossorigin.me doesnt work either
Firefox is throwing up errors like its gang signs
yeah, my best recommendation is to do a little less copy and paste of code, you'll understand it better or look at the bootstrap https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap.css
@jdc101214 what's wrong with it
it works on my machine
@sparklie3 It a challenge Im supost to pass.
Are oyu running the code under the mutations challenge?
you
no, i'm just copying the code you wrote and putting it in my console
and running the one test you had
THats the challenge
well, your second else if statement
doesn't make any sense to me
indexOf(arr1,0)???
i'm not sure what you're trying to test
arr1 is a varible
arr1 in the failed case is aarmy
your case fails when you run
mutation(["Mary", "Aarmy"])
@MerrylArok Instead of using https codepen, use http and just use http://ip-api.com/json for geolocation objects
your arr1 = aarmy
right
there is not aarmy in mary
when you do arr0.indexOf(arr1,0)
it's like saying
mary.indexOf(aarmy, 0)
do you see the issue?
ya. Just fixed it. Thanks @sparklie3
jdc101214 sends brownie points to @sparklie3 :sparkles: :thumbsup: :sparkles:
:cookie: 319 | @sparklie3 |http://www.freecodecamp.com/sparklie3
np
with .replace in JS, is there a way to target like certain words?
not sure, you'll have to read a little of the docs here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace
unfortuantley, out of my levle of knowledge
@jdc101214 Yes, using a regexp
@jdc101214 To target "word" in "string of words" you can do a regexp like /word/
has anyone worked with new Promise instead of standard callback?
Why is this not working?
function destroyer(arr) {
// Remove all the values
var arr1 = "";
for(var i = 1; i < arr.length; i++){
arr1 = arr.filter(arr[i]);
}
}
destroyer([1, 2, 3, 1, 2, 3], 2, 3);
@jdc101214 Link to the challenge please
@jdc101214 Filter works by not including an entry if the callback returns false, and including it if it's true
?
@jdc101214 You can't just feed filter() arr[i], it has to be a function that compares arr[i] to something
Also, you're missing and reference to the other arguments provided to destroyer()
any* reference
hello
for a lesson, do you have to build a tribute page?
@Tejanth a tribute page is a project to complete as part of your front end certification.
How can I include an image on my tribute page in codepen
@breez803 use the img tag with the link from you image
err sorry img element
thanks
you're welcome.
For those of you that work, study, or doing something else, and still coding, THIS is for you.
https://medium.com/@esterlinaccime/yes-i-do-work-full-time-and-still-contribute-to-more-than-5-github-projects-257e1945c878#.601elxpbm
https://medium.com/@esterlinaccime/yes-i-do-work-full-time-and-still-contribute-to-more-than-5-github-projects-257e1945c878#.601elxpbm
Why does my data [1][0] access "Harry Potter" it seems as if the index is starting from 1 instead of 0? In other words my initial thoughts was data[0][0] should equal Harry Potter, not [1][0], can anyone explain this to me?
@ssgriffen - did you post your code? Or can you?
@ssgriffen - the data that is returned looks like this, at least at the beginning:
So there is a "Harry Potter" at location
["Harry Potter",["Harry Potter","Harry Potter (film series)","Harry Potter and the Philosopher's Stone","Harry Potter and the Deathly Hallows","Harry Potter and the Deathly Hallows \u2013 Part 2","Harry Potter and the Half-Blood Prince (film)","Harry Potter and the Philosopher's Stone (film)","Harry Potter and the Deathly Hallows \u2013 Part 1","Harry Potter and the Cursed Child","Harry Potter and the Half-Blood Prince"],["Harry Potter is a series of fantasy novels written by British author J. K. Rowling. The novels chronicle the life of a young wizard, Harry Potter, and his friends Hermione Granger and Ron Weasley, all of whom are students at Hogwarts School of Witchcraft and Wizardry.","Harry Potter is a British-American film series based on the Harry Potter novels by author J. K. Rowling.","Harry Potter and the Philosopher's Stone is the first novel in the Harry Potter series and J. K. Rowling's debut novel, first published in 1997 by Bloomsbury.","Harry Potter and the Deathly Hallows is the seventh and final novel of the Harry Potter series, written by British author J. K.","Harry Potter and the Deathly Hallows \u2013 Part 2 is a 2011 British-American fantasy film directed by David Yates and distributed by Warner Bros.","Harry Potter and the Half-Blood Prince is a 2009 British-American fantasy film directed by David Yates and distributed by Warner Bros.","Harry Potter and the Philosopher's Stone (released in some countries as Harry Potter and the Sorcerer's Stone) is a 2001 British-American fantasy film directed by Chris Columbus and distributed by Warner Bros.","Harry Potter and the Deathly Hallows \u2013 Part 1 is a 2010 British-American fantasy film directed by David Yates and distributed by Warner Bros.","Harry Potter and the Cursed Child is a two-part West End stage play written by Jack Thorne and based on an original new story by Thorne, J.K.","Harry Potter and the Half-Blood Prince is the sixth and penultimate novel in the Harry Potter series, written by British author J. K."],["https://en.wikipedia.org/wiki/Harry_Potter","https://en.wikipedia.org/wiki/Harry_Potter_(film_series)","https://en.wikipedia.org/wiki/Harry_Potter_and_the_Philosopher%27s_Stone","https://en.wikipedia.org/wiki/Harry_Potter_and_the_Deathly_Hallows","https://en.wikipedia.org/wiki/Harry_Potter_and_the_Deathly_Hallows_%E2%80%93_Part_2","https://en.wikipedia.org/wiki/Harry_Potter_and_the_Half-Blood_Prince_(film)","https://en.wikipedia.org/wiki/Harry_Potter_and_the_Philosopher%27s_Stone_(film)","https://en.wikipedia.org/wiki/Harry_Potter_and_the_Deathly_Hallows_%E2%80%93_Part_1","https://en.wikipedia.org/wiki/Harry_Potter_and_the_Cursed_Child","https://en.wikipedia.org/wiki/HarrSo there is a "Harry Potter" at location
[0], then there is another array at [1], so you are then accessing [1][0] and it will also say "Harry Potter".
@ssgriffen - you can post your JSON data to the tool at http://codebeautify.org/jsonviewer and it will format it into a more readable format.
@ssgriffen - check this out - http://codebeautify.org/jsonviewer/cb625537
@khaduch Okay I just got it
@khaduch thanks
ssgriffen sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2119 | @khaduch |http://www.freecodecamp.com/khaduch
fcc really should have put some of those video challenges at the beginning
@moT01 - they were new additions to the list of resources - but I agree that it would be helpful to have some of that introductory material earlier in the program.
i need help in position images. can somebody help me?
Help please! What is the best way to center an unordered list?
no wiki entry for:
please what is the best way to center an unordered list
I'm building a mock portfolio page. I'm using HTML, CSS and Bootstrap. When I create a new panel, I suddenly get these horizontal dividers at the top of my page. I've tried setting the border, margin and padding to 0 and nothing works.
Hey, I started on FCC a few days ago and I feel like the challenges went from easy, to slightly challenging and not very user friendly, to outright impossible to complete with my current understanding on the subject
@cocobutter82 open the inspector, find what it is
i will be honest and say that I forgot where the inspector is @moT01 lol
@nicopoore theres a video challenges section on the map way down, ...the javascript section there might help
right click > inspect
ok
@moT01 thanks i'll check it out
nicopoore sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 396 | @mot01 |http://www.freecodecamp.com/mot01
then move the mouse over the html code, ...it will highlight what is taking up that space
and the chrome dev tools section
@nicopoore
yea, i didn't know they were there, they would be more useful at the beginning
regarding Build a Random Quote Machine, did you guys hardcoded it?
@moT01 thank you, I will give it a shot
cocobutter82 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 397 | @mot01 |http://www.freecodecamp.com/mot01
I figured it out, i changed from "panel" to "span" and the lines dissapearred. Thank you @moT01
cocobutter82 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:warning: cocobutter82 already gave mot01 points
@angel92004 no
you can if you want, ...i would say go with the api, ...you will have to for the projects after it anyway
@moT01 what API did you use?
quotesondesign.com im pretty sure, ...pretty easy to understand api docs
Hi there, who can tell me what is the name of the board in front of a theater that displays the everyday show plan? Need to build a template like it.
how about the share on twitter. is it an API too. it's my first time learning APIs so it's still kinda confusing to me
@moT01
@angel92004 yea, the exercises didn't go through much, ...no(at least im pretty sure), its just a url.. at least the way i did it, with some parameters
so its just a link in your page that opens a url
Yup, just an url
but the structure of the url is defined where twitters api is defined :)
@moT01 the api exercise wasnt explained thoroughly so that's why i'm confuse. is the block of codes came from where you get the api as well?
@angel92004 Hi, you may check this twitter docs regarding the tweet button: https://dev.twitter.com/web/tweet-button
Hello everybody. Can anyone tell me where i can look to get a list of codes for styling text
morning campers! I'm kinda confused on how to appeand my quotes to to a tweet for my quote generator.
Any suggestions
@vharvey84 You can look here: http://www.w3schools.com/css/css_text.asp
Having trouble with the wiki browser, the link I construct works when I click it, but using it through the function on codepen redirects to the api help:
function clickThis() {
var searchText = document.getElementById("searchText").value;
var encSearchText = encodeURI(searchText);
var apiLink = "https://crossorigin.me/https://en.wikipedia.org/w/api.php?action=opensearch&search=" + encSearchText +"&limit=10&format=json&callback=res"
//console.log(apiLink);
$.get(apiLink, function res(data) {
//console.log(data);
});
// construct call
// construct output
// display output
}
ofc the console.log(data) is uncommented then
Hey guys I've just starting the "Build a Personal Portfolio Webpage" challenge. Have I learnt everything i need to know or do i have to learn basic java stuff? Ive done everything up to jQuery.
@lukaszsobek are you adding https to the codepen url?
in your browser
@cruiset no need for js
yes - i am getting a reply from the api @niconielsen
@niconielsen so everything ive learnt so far up to jQuery should be fine?
@cruiset html & css is just fine
yes
I'm working on the wikipedia search assignment and have an issue. Could anyone take a look?
throwit!
codepen.io/drantho/debug/RoENmz?
my random button isnt randoming
i think i might know...
i think the random article is much simpler
my page might be refreshing when the button clicks
isnt it just a window.open
?
like
function openRandom() {
var win = window.open("https://en.wikipedia.org/wiki/Special:Random", '_blank');
win.focus();
}
@Drantho :bulb: on codepen you need to add target="_blank" to your urls.
strike that, your url is wrong.
Check the instructions.
yeah i just added the format=json but its giving me a different format from my text search json :(
@Drantho why not
<a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">Click here for a random article</a>
@lukaszsobek button! :D
@niconielsen css! :)
i was trying to put a random list on my page
look like not be
probably trying to make it too complicated
doesn't random just return one article, or does it return more than one?
one random
this
for example
@Drantho uuuu, niiiice
thanks @Drantho
:cookie: 269 | @drantho |http://www.freecodecamp.com/drantho
lukaszsobek sends brownie points to @drantho :sparkles: :thumbsup: :sparkles:
re-reading the directions it would be way easier to just navigate to a random article but i would feel bad just avoiding my error
does someone know what is "User talk?
in the json throwed
@niconielsen sorry I dont understand your question
@Drantho The result from the random query looks different than the result from your search query, so your algorithm to get stuff out of the JSON doesn't work. You'd have to write a separate JSON call for the random list.
@Drantho when i go to that api call you pasted, i get 3 articles and 2 whatever
Im trying to add an image link from google on my Tribute page..cannot get any link to work...please advise.<a href="https://www.google.com/imgres?imgurl=http%3A%2F%2Fwww.theautochannel.com%2Fnews%2F2007%2F02%2F18%2F037624.1-lg.jpg&imgrefurl=http%3A%2F%2Fwww.theautochannel.com%2Fnews%2F2007%2F02%2F18%2F037624.html&docid=6ciQvySJIhx-4M&tbnid=MRJ2a84jVJvcwM%3A&vet=1&w=400&h=267&bih=676&biw=1280&q=george%20washington%20carver%20bio%20fuel&ved=0ahUKEwiqjJTMr_jQAhVJ1WMKHTkSDcwQMwgaKAAwAA&iact=mrc&uact=8 "></img>
@niconielsen @Drantho You'll get user discussions around an article on wikipedia
in the random list
@forkerino ahh gotit
@forkerino thanks I was really hoping not to have to deal with 2 different json formats
drantho sends brownie points to @forkerino :sparkles: :thumbsup: :sparkles:
:cookie: 386 | @forkerino |http://www.freecodecamp.com/forkerino
@toccomy you are opening an <a> and closing an <img>
@Drantho well you have two different calls, one gives a list and the other a search, so it isn't completely strange that the result is different.
@toccomy now the question is - are you trying to link to the search result or display the picture returned?
@forkerino the random json doesnt include an exact link or have a description either... ill just do it the boring way
https://mr-kumar-abhishek.github.io/wikipedia-viewer/ <--- need some input , functionality wise is it complete ?? I am still working on the design
@Drantho LOL
@lukaszsobek im trying to simply display
<img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fs-media-cache-ak0.pinimg.com%2F236x%2Fa2%2Fa4%2F8a%2Fa2a48a37921b71b28d6f4c019aa8ce77.jpg&imgrefurl=https%3A%2F%2Fwww.pinterest.com%2Fcobb3410%2Fgeorge-washington-carver%2F&docid=clKSmT0Kt8xrDM&tbnid=SuLt4_lb54a43M%3A&vet=1&w=236&h=196&bih=676&biw=1280&q=george%20washington%20carver&ved=0ahUKEwiNz_3cu_jQAhUBIGMKHXbkClkQMwhwKDQwNA&iact=mrc&uact=8 " class="img-responsive" alt="GWC"></img>
@toccomy That link doesn't work. Copy paste it into a new browser tab to see.
It is not an image, but a page.
@toccomy download the image and upload them in some CDN like cloudinary get its url and use that , hotlinking are blocked on some sites
@toccomy hot linking is not recommended as well i did that with my old tribute page... it broke soon after
that wiki api is kinda cryptic
or im lazy
@Mr-Kumar-Abhishek
What is CDN?
@Mr-Kumar-Abhishek thats ok!
@toccomy https://en.wikipedia.org/wiki/Content_delivery_network <-- read
@toccomy http:cloudinary.com/ <-- upload
@toccomy http://cloudinary.com/ <-- upload
@Mr-Kumar-Abhishek
@Mr-Kumar-Abhishek Great! THanks!
toccomy sends brownie points to @mr-kumar-abhishek :sparkles: :thumbsup: :sparkles:
:cookie: 450 | @mr-kumar-abhishek |http://www.freecodecamp.com/mr-kumar-abhishek
its sad to see your points only go up by 1 after submitting a project lol
thanks for the help and sounding board everyone good night
I don't even know what is twitch tv o.O
@Mr-Kumar-Abhishek A streaming platform - where mostly gamers stream their play live
@alpox yeah... currently with slow network , I could have hardly understand it
for making a twitch tv project I just have to make this ? ?? https://codepen.io/FreeCodeCamp/full/Myvqmo/
https://wind-bow.gomix.me/ <-- isn't this useful ^_^
Hey all - I'm having trouble getting the list items on my navigation bar to display horizontally for my portfolio site. Could someone take a look at my code - let me know what in any case needs corrected (there's bound to be a few things I am new to this) and also give me some advice about the horizontal navigation? I've been reading about how to do it using display: inline; but whatever I'm trying isn't working - also having managed to remove the bullets, they are back HELP! https://codepen.io/codecampamy/pen/zozrBM
@codecampamy found it, the error is in your html - there is a space after the id name (nav-wrapper). Remove this first
@codecampamy then apply the desired style to #nav-wrapper ul li, for more specificity. like so:
#nav-wrapper ul li {
display: inline;
background: red;
list-style-type: none;
}
Brilliant @Marianissimus thank you so much. Have switched it around, why is 'RESOURCES' black when the other items in the list are blue??
codecampamy sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 215 | @marianissimus |http://www.freecodecamp.com/marianissimus
@codecampamy you're welcome
hey guys I am currently stuck because I can't implement the iconsrc in weather app,
```
```
<div><img id="img" src="#"/>and i want to append my javascript code to the src:
var iconSRC = "http://openweathermap.org/img/w/" + icon + ".png";
document.getElementById("#img").src("iconSRC");
<!--COST CALCULATOR SECTION START-->
<section class="cost-calculator">
<div class="container-fluid">
<div class="col-md-6">
<div class="left-box">
<div class="text-box">
<h2>Calculate Your Property Cost</h2>
<!--<form action="#" class="row">-->
<div class="col-md-6">
<label>Project</label>
<div class="selector">
<select class="full-width" id="mrunal" onclick="myFunction()">
<option value="la ">La colina</option>
<option value="royal">Royal Casa</option>
<option value="country">Country side</option>
</select><span class="custom-select full-width">La Colina</span>
</div>
</div>
<script>
function myFunction() {
var a=document.getElementById("mrunal").selectedIndex;
switch(a)
{
case 0: document.getElementById("rate").innerHTML = "599";
break;
case 1: document.getElementById("rate").innerHTML = "799";
break;
case 2: document.getElementById("rate").innerHTML = "1000";
break;
}
}
</script>
<div class = "col-md-6">
<label> Out Rate </label>
<label id= "rate" input type = "number"> </label>
</div>
<div class="col-md-6">
<label>sq. ft. required</label>
<input type="number" id= "reqValue">
</div>
<div class="col-md-6">
<label>Total amount</label>
<label id = "total"></label>
</div>
<div class="col-md-12"><button type="button" onclick="calculate()">Calculate</button>
</div>
<script>
function calculate()
{
var a = document.getElementById("rate").value;
var b = document.getElementById("reqValue").value;
var c = a*b;
document.getElementById("total").innerHTML = b;
}
</script>
<!--</form>-->
</div>
</div>
</div>
<!--COST CALCULATOR SECTION END-->
I am having issue in fetching data label sq ft required
@diederikquak take a look at the jQuery
.attr function
@diederikquak
iconSRC is a variable, removethe " surrounding it, it should be document.getElementById("#img")attr('src',iconSRC);
THX @alpox and @oppiniated :)
diederikquak sends brownie points to @alpox and @oppiniated :sparkles: :thumbsup: :sparkles:
:cookie: 699 | @alpox |http://www.freecodecamp.com/alpox
:cookie: 454 | @oppiniated |http://www.freecodecamp.com/oppiniated
hello, just want to ask why my page doesn't add a automatic scroll after populating the page with search results. Yesterday it's working just fine but today it's not.
http://codepen.io/shaolin30/pen/ZBrqJJ
thanks in advance...
http://codepen.io/shaolin30/pen/ZBrqJJ
thanks in advance...
@androuino remove position fixed from .expSearchBox
@sorinr thanks
androuino sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 955 | @sorinr |http://www.freecodecamp.com/sorinr
@androuino welcome
noo there is mistake this is my html
how can i increase image size in html https://codepen.io/Mebratu/pen/RoYKXz
@18495 An image should never be bigger in HTML then its actual size in pixels. Since your using Bootstrap, give it the class .img-responsive an it will automatically adjust to the width of its parent.
If you want to give the image a fixed width and/or height make a new class in CSS set the width and height for this class.
Hey Guys, I'm building this portfolio page. Can I know how to align button to a specific location? Thanks.
@heyDante Hey, can you give a little bit more info?
<button type="button"> ABOUT </button>
<button type="button"> PORTFOLIO </button>
<button type="button"> CONTACT </button>
These three buttons were created, but these are not aligned in the position I needed
As seen in the demo Portfolio Page , its placed in the top right corner
https://codepen.io/FreeCodeCamp/full/Myvqmo/. <---- do I have to only make till here ?? Thats all ?
Hey guys, quick question...
I'm trying to run some JS code on an Angular application website on my IE9 Virtual Machine and keep receiving " Uncaught Error: [$injector:unpr] ".
Stackoverflow has some info on how to fix it, but I can't amend the Angular code as it is not my website, any ideas?
I'm trying to run some JS code on an Angular application website on my IE9 Virtual Machine and keep receiving " Uncaught Error: [$injector:unpr] ".
Stackoverflow has some info on how to fix it, but I can't amend the Angular code as it is not my website, any ideas?
https://codepen.io/FreeCodeCamp/full/Myvqmo/. <---- do I have to only make till here ?? Thats all ? could anyone confirm this ?
@Mr-Kumar-Abhishek the fcc's its just an example. you can add more streamers. the idea is to use the api and be able to filter the channels
@sorinr okay thanks I will add them after getting the certification :)
mr-kumar-abhishek sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 956 | @sorinr |http://www.freecodecamp.com/sorinr
@Mr-Kumar-Abhishek Yeah you do that thingy. And yes, that url is useful :-) its made for not needing a registration and therefore no api key needed for this project.
@Mr-Kumar-Abhishek Well There are 3 buttons to take into account to add there (You see it right on top) And there are about 3 categories of users - online, offline, no account
You can choose whatever streamers you want to show
@alpox i see. Okay its first time I am seeing twitch tv ... I will just add randoms ... I developed games before but didn't knew gamers have this too now
@Mr-Kumar-Abhishek Thats what i did too :D
@alpox thanks for the heads up again :p
mr-kumar-abhishek sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 700 | @alpox |http://www.freecodecamp.com/alpox
@Mr-Kumar-Abhishek Np :-) What games did you develop?
Or what kind of game
@alpox arcades mostly or strategy based , nothing involving unity or other game engines ... warzone type games https://github.com/Mr-Kumar-Abhishek/warzone2100 or visual novel type games involving ren pi https://www.renpy.org/ others with QT and C++ I will shift using rust for game development in next year
What is the best way to make a navbar using bootstrap so that the words don’t collapse onto each other when the browser is resized?
using container-fluid -> row -> col-xs* isn’t really working
@Mr-Kumar-Abhishek Okay cool thing! :D
I sadly never did any game programming
@jayisray as simply as copy paste their navbar example and change it to ur needs
Hello, I need help with some <div> sizes (my eternal issue haha)
@sorinr copy/past what?
@alpox oh I forgot.... my 2nd game was on php js and html (text based mmorpg) then tried to add sprites and all with help of another developer , it failed with rapid technological changes ....
@jayisray Find it here http://getbootstrap.com/components/#navbar
@sorinr Ha jynx
I would like both <div class="well"> in the Skills section to be the same size, how should I do? :) http://codepen.io/marieanabel/pen/BQYjKG
@alpox was trying to make something like browser quest before browser quest came
@alpox http://browserquest.mozilla.org/ <-- see here
a.query.pages.forEach doesnt work for wikipedia api, how to fix this ?
@AnabelSalomone you mean having the same height?
yes @sorinr
@AnabelSalomone Fix it using css, give them an absolute pixel height
@AnabelSalomone I.e.
div.well {
height: 300px;
}
div.well {
height: 300px;
}
@AnabelSalomone you can try
well {
min-height: 400px;
} and you play with 400
@callumquick i would not go for a fixed height. if you have more content in one "card" you will have to deal with overflow
@sorinr It's true, unless you know in advance how much content you will have (this is a static page so that is likely fine, but yours should work too)
@AnabelSalomone But actually, I think your portfolio site is great! You can tell you have more design skill than I do, mine was/is still atrocious
@Mr-Kumar-Abhishek Heheh, old fashioned :D
@alpox it was many years ago ~
@alpox long before html 5 came for gaming
:D i guess so yea
@AnabelSalomone and i would not go for %gs in showing how much do i know of each language. % is a ratio between two known values
@alpox right webGL is best for developing browser based games or web assembly (for future)
@alpox right now * webGL is best for developing browser based games or web assembly (for future)
@Mr-Kumar-Abhishek is web assembly already out?
@alpox right now * webGL is best for developing browser based games or web assembly (for future)
oops
sorry for the extra echo lol
@alpox web assembly is supported in most of the latest browsers ~
@alpox see here --> http://webassembly.org/demo/
@alpox pretty good isn't it ?
Whats everyone think? I havent setup my social media buttons yet but so far for a new coder hows it look?
Ooops I'm back, had to be afk for a little moment =). Thanks @callumquick for your feedback :)
anabelsalomone sends brownie points to @callumquick :sparkles: :thumbsup: :sparkles:
:cookie: 298 | @callumquick |http://www.freecodecamp.com/callumquick
Can some one guide me to CSS flex work around in IE8?
and @sorinr, thanks for your help and feedback =)
anabelsalomone sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 957 | @sorinr |http://www.freecodecamp.com/sorinr
@Johnnie843 I think maybe the form at the bottom could do with some work to make it look a little bit neater and clear?
@Mr-Kumar-Abhishek yea not bad :D is it only for gaming?
@alpox any new technology in computer science is first suitable for gaming then anything else , be it computer themselves , AIs or wasm ;)
@AnabelSalomone avec plaisir :)
@callumquick gotcha appreciate the input
this is nasty crackers targeting websites and undoing all the SEO of the site.. to much loss for a business
defacements ... MySQL injections .... nasty stuff
@Mr-Kumar-Abhishek i wonder if there will happen any effort on bringing an effort for GUI applications into web assembly
@alpox well, honestly web assembly has a high chance ~ but it is not fully developed yet and crackers don't have a clue how to use that much less crack that. That said most crackers nowadays just run scripts / software attack website without really knowing what really goes on ~
@alpox well, honestly web assembly has a high chance ~ but it is not fully developed yet and crackers don't have a clue how to use that much less crack that. That said most crackers nowadays just run scripts / software to attack websites without really knowing what really goes on ~
Yea i guess so. I just hope that it will be able to build a better base than html/css/javascript for the web
@alpox I was code pairing with this developer and he had his own small business (self employed ) .... crackers attacked his website , now the SEO is all in the dump , and that too it was mostly online business . Luckily I have practical experience with digital marketing SEO... so I think I would be able to assist him in revamping his website .
@Mr-Kumar-Abhishek i somehow missed the part where we switched to security aspects. are you still talking about webassembly?
@alpox lol . Sorry ... I trailed off a bit ~
@alpox what I was coming to is that since web assembly is compiled you see... if the binary gets switched while connection ... there is a chance there of intrusion I suppose ...
@alpox see here it is all c language in the end --> http://webassembly.org/getting-started/developers-guide/
how do i make my text like in this one? https://codepen.io/FreeCodeCamp/full/NNvBQW/
@alpox but this also makes it faster... using Rust instead of C for this would be a lot safer and quicker in execution too.
at the list
Can anyone find any visual bugs?
https://hidden-headland-40310.herokuapp.com/
https://hidden-headland-40310.herokuapp.com/
@Mr-Kumar-Abhishek dont know rust except its name ^^
but why quicker? i doubt that rust us faster than c
Hey everyone, so originally when the weather app was finished, the background images worked just fine. Now they seem to have stopped working on some devices but not others. Works on my computer, but not my phone. Also not working on others computers I've asked to check it out. I thought it was maybe the size of the images so i significantly compressed them but to no prevail. Any suggestions would be helpful. http://codepen.io/davemflick/full/woxMrq/
@BobbaWoolf https://gist.github.com/Mr-Kumar-Abhishek/e247d53d04127bab69f81d8b845f41dd maybe like this ?
@alpox rust is slow in compiling sure.. but the compiled binaries are faster in execution time. Plus rust is safer than C
@davemflick I don't think the problem is caused by the computer. Its probably the browser. Download all of the major browsers and check it there
@Mr-Kumar-Abhishek didnt think there is anything faster in runtime than c and anything even slower to compile :)
@amidzicigor I'll give that a shot, I'm using chrome on my computer and it works. My phone is also chrome but doesn't work. Just tried safari and doesn't work . Thanks for the lead, I'll look into that more
davemflick sends brownie points to @amidzicigor :sparkles: :thumbsup: :sparkles:
:cookie: 57 | @amidzicigor |http://www.freecodecamp.com/amidzicigor
@davemflick What is the image supposed to be? I'm using chrome and I see no images
@alpox check here I have the same results http://benchmarksgame.alioth.debian.org/u64q/rust.html
Depends on the type of weather you currently have. Different images for clear, rain, thunderstorm, snow, etc...
also works fine when i browser-sync to my text editor (sublime)
@Mr-Kumar-Abhishek it looks to me that c is faster than rust in there
@alpox in compile time not execution time
ah these is the compiletime? alright
@alpox if in case the new version of rust is slow in execution time also , I would be more than happy as some the projects I am doing is done on C and performance of the language matters in those projects
Nevermind figured it out, I was using Imgur to host my images. Apparently Imgur and Codepen don't mesh well FreeCodeCamp/FreeCodeCamp#5677
I need some inspiration of twitch tv UIs could someone help me ? https://mr-kumar-abhishek.github.io/observe-twitch-tv/ :(
@vengal4327
Flexibility is not working for me in IE8. Am i doing something wrong?
http://codepen.io/vengal-learn/pen/BQvWav
Flexibility is not working for me in IE8. Am i doing something wrong?
http://codepen.io/vengal-learn/pen/BQvWav
@vengal14327 leave IE8 support ~
Lol. To be honest my application runs in IE8 alone.
@vengal14327 how could flexbox could work in IE8 ? o.O it is unsupported
@vengal14327 start the support from IE 9 atleast. Who keeps IE8 support anyways ...
Hey guys, I'm using nav-pills to create a nav bar at the top, but I can't seem to change the font color of these buttons; they are URLs, should I change the link font color as a whole or is there another way?
I tried changing it through CSS changing the font color of the nav-pills class as that worked for the size of the font but it doesn't work for the color
@nicopoore You can select the button and change it, but if you're using boostrap btns you need to be more specific than bootstrap to be able to override the bootstrap CSS
try giving them extra classes, or an id, and select them that way to override bootstraps font color
It's an unordered list with the classes "nav nav-pills"
and i had been changing the nav-pills class to alter the size, background color and font of the pills
but it doesn't seem to work with colors
i'll try with an extra class, thanks @callumquick
nicopoore sends brownie points to @callumquick :sparkles: :thumbsup: :sparkles:
:cookie: 299 | @callumquick |http://www.freecodecamp.com/callumquick
https://www.lua.org/ <-- most easiest language :D
hello everyone
As part of creating a portfolio page,i created three different html pages,but as per the user story i need to do in such a way as to pull all the pages in one page and in a scroll up manner
so can someone help me do this
@hope4 its quite simple. you navigation should have < a href="#about">, <a href="#portfolio"> etc and you need on the same page some divs, sections etc having the corresponding id like <div id="about">, <div id="portfolio">, etc. so when you click the a link will jump to that section. its called in page linking
Hi guys, I'm having some trubles manipulating api url, is it correct to write:
var location;
$.getJSON("api.openweathermap.org/data/2.5/weather?q="+location, function(json){
......
});
@Mr-Kumar-Abhishek To support older IE versions we have flexibility.js which is polyfill for flexbox: https://github.com/jonathantneal/flexibility
@saylos Make sure to include http:// to the beginning of your url
@saylos or at least //. what will location var be like?
@vengal thanks for the info :)
:warning: could not find receiver for vengal
mr-kumar-abhishek sends brownie points to @vengal :sparkles: :thumbsup: :sparkles:
@vengal4327 I would have helped you if I could do you have a tool to check compatibility of IE8 ?
Hi i have been tried to make nav collapse but it didn't work
i think i have problme with bootstrap
the button apper but not show the navbar
Hello Guys!
https://codepen.io/Waqas909/pen/dOKPpG
Please, It would be helpful if you could help me with this problem. Clicking on the featured channels takes me the target url however the twitch stream doesn't Load!
https://codepen.io/Waqas909/pen/dOKPpG
Please, It would be helpful if you could help me with this problem. Clicking on the featured channels takes me the target url however the twitch stream doesn't Load!
@asmaaamer It's your javascript Jquery reference. To add Jquery, click "Quick add" and add jquery and boostrap from there. If you want to style with boostrap, do so in the CSS tab
@asmaaamer your data-target should be
#navbar-container not .navbar-container and you'll need to apply a color to your navbar to see the button - it is transparent now. Also, do Add bootstrap.css, jquery, and bootstrap.js as @Waqas909 recommends. You can view this pen with a working navbar for comparison: http://codepen.io/TylerMoeller/pen/ozKMRW?editors=1000
Hi guys could I have some feedback on my calculator : http://codepen.io/callumquick/full/MbzddZ/
@Waqas909 Are you using Chrome by chance? Twitch.tv has problems with Chrome sometimes - something to do with the way Chrome handles flash.
@TylerMoeller One second, I'll check on firefox
@TylerMoeller No, it's not the browser, the link opens, you can even see Twitch and it's nav bar, just the stream doesn't load
@Waqas909 thank you i will try it
:cookie: 276 | @waqas909 |http://www.freecodecamp.com/waqas909
asmaaamer sends brownie points to @waqas909 :sparkles: :thumbsup: :sparkles:
@TylerMoeller thank you i will try again
asmaaamer sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1158 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@Waqas909 Seems mine is broken too - only when opening in a new tab. Will need to investigate a fix. The URL is fine, as it the page loads without errors if I navigate there directly.
hi all I'm working on my game-of-life project. This is what I have so far.
https://kkindorf.github.io/game-of-life/build/
I don't think this is working correctly. But I can't quite figure out what I am missing. I'd be grateful is someone could take a look at my code to see what's wrong. All of my logic for the game is in my boardContainer component https://github.com/kkindorf/game-of-life
https://kkindorf.github.io/game-of-life/build/
I don't think this is working correctly. But I can't quite figure out what I am missing. I'd be grateful is someone could take a look at my code to see what's wrong. All of my logic for the game is in my boardContainer component https://github.com/kkindorf/game-of-life
@kkindorf You may get better help on the DataViz channel for that project https://gitter.im/FreeCodeCamp/HelpDataViz
@TylerMoeller Aight Thanks .=.
waqas909 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1159 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@callumquick It's beuaty bro..
beauty*
Well done @callumquick
@Waqas909 Thanks! Really pleased with this one, my best design effort yet I think
callumquick sends brownie points to @waqas909 :sparkles: :thumbsup: :sparkles:
:cookie: 277 | @waqas909 |http://www.freecodecamp.com/waqas909
Yea it's one of the best designs i've seen
@Waqas909 I think it's a codepen, iframe issue. If you open any of your links from the debug version of your page, it works fine: https://s.codepen.io/Waqas909/debug/dOKPpG
do you know of a good wysiwyg editor for blog posts with images?
@TylerMoeller Yea that makes sense, btw I think in the next update to FCC they will add their thing like codepen on FCC
as every blog ever does
So hopefully less problems
That would be nice
@eliecerthoms I think lots of people use Wordpress for that
@TylerMoeller If i may ask, how far are you ?
@TylerMoeller You seem pretty far
I'm slowly working on the React projects
btw check this video out :D https://www.youtube.com/watch?v=V8B4orj0M7Y
The Non-profit Project
It's good motivation imo
to keep going
There's 7 more Demo's I think
:) very nice
yo guys im making my first pen but why doesnt this work
<div class="row">
<div class="col-md-10">
<h1 class="text-primary title">Mark</h1>
</div>
<div class="col-md-1">
<button>About Me</button>
</div>
<div class="col-md-1">
<button>contact</button>
</div>
</div>
<div class="col-md-10">
<h1 class="text-primary title">Mark</h1>
</div>
<div class="col-md-1">
<button>About Me</button>
</div>
<div class="col-md-1">
<button>contact</button>
</div>
</div>
i see the buttons and the text but it doesnt go next to eachother
@TylerMoeller Sure thing, but I started building a blog of my own
now I haven't the slightest...
xD
@markolie20 You need to add bootstrap.css to your project. If you're using codepen, click the settings button at the top, click CSS, and then add bootstrap with the quick-add menu
@TylerMoeller thanks
markolie20 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1160 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Also, you'll only see them next to each other when the screen is wider than 991px
how do I make an element {like a flash file} fill another element {like a table cell}? Do I need a dedicated <div> for the <embed>, because my current <div> encapsulates both <embed> and <button>s? It's not currently displaying it in my code because I can't find simple example .swf files to use, but this is my code: http://codepen.io/NEETWizardJanus/pen/dOwXJv
nope. that didn't fix it.
I dont really like my Twitch Viewer... I think im gonna restart .-.
@Waqas909 Sometimes restarting can help you start fresh and build a better app than if you had just tried to fix your broken app
I rebuilt my first one too, lol. Same with my wikipedia viewer
I tried <div class="embed-div"><embed></div> and CSS: embed-div { width: 100%; height: 100%; position: absolute;} and it didn't fix it.
this should be so easy. why don't I have the fundamentals? I've read about this stuff for days on end.
@NEETWizardJanus We don't learn about embedding flash here at Free Code Camp...you might try a different forum if you don't get a response
it doesn't have to be flash. I'm sure it would be the same with an image file.
Seems it isn't as straightforward as embedding a video player and there may be script issues in codepen to deal with
well the jpg doesn't fill the cell either.
You want it to fill the cell, but not cover the buttons?
Trying to get a button to link(and play) you tube video on tribute page. when cllicked just get a blank page <a href="https://www.youtube.com/watch?v=RQi-nTcS_Ns" class="btn btn-primary btn-lg active center btn-group-justified " role="button">Click for Video Biography</a>
fill the cell. the buttons are overlays.
3 buttons overlaying each image/flash
It works for me with an image, try replacing your <embed> tags with:
<img src="https://placehold.it/800">
hmmm... img makes it larger, but it's still not filling the cell.
Ahh, I see what you're saying. Hmmm... Tables are meant for data, not images and buttons. Better to use divs
I don't know how to layout divs like a table.
I'll look into it though
Any advice would be great
@NEETWizardJanus With most embeds or images you can just set height and width to 100%:
<iframe id="video"
width="100%"
height="100%"
src="https://www.youtube.com/embed/qZKvZzRynLE?enablejsapi=1&controls=0"
frameborder="0"
allowfullscreen
></iframe>
@toccomy add target="_blank"
@TylerMoeller yup. tried that, and at least applying it in CSS is failing.
@TylerMoeller He's on tribute page :package:
ok. tried applying it directly to the HTML and it fixed it. I must be doing the CSS wrong then.
if u want a button to open a link on Codepen @toccomy <a target="_blank href=" " >
opens a new tab
damn i'm so happy this is a thing :P
@Waqas909 Man! Thanks! Ive been trying to figure that out all night. what does target="_blank" exactly do?
:cookie: 278 | @waqas909 |http://www.freecodecamp.com/waqas909
toccomy sends brownie points to @waqas909 :sparkles: :thumbsup: :sparkles:
how do i make my text small like this? https://gyazo.com/93dddb1f3a0d5cc64638053e0f41c3ce
ah. spontaneously started working. I coulda sworn I tried it this way before.
@toccomy Have a look http://www.w3schools.com/tags/att_a_target.asp
target="_blank" specifies to open the link in a new tab
@toccomy Why not embed the video instead?
<iframe width="560" height="315" src="https://www.youtube.com/embed/RQi-nTcS_Ns" frameborder="0" allowfullscreen></iframe>
Then users won't have to leave the page :)
@toccomy Yea I agree with @TylerMoeller It'll be a better option
still not allowing the width: 100%; to be applied in CSS. only directly in HTML. Why?
Unless u want it like that, for whatever purposes :P
hello everyone :)
can I not just change it in CSS with embed { width: 100%; height: 100% } ???
@NEETWizardJanus Seems you're not alone with this problem, some solutions here: http://stackoverflow.com/questions/16584237/how-to-get-height-100-on-object-embed
Hello
@TylerMoeller oh, thanks. I'm really sorry for being so helpless. RTFM seems to be beyond me, like reading a whole phone book to call a friend.
neetwizardjanus sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1161 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
no. all the search results I find aren't doing anything fancy. mine works fine when it's written in the HTML, but not when it's applied via CSS. I guess I'll just have to do it manually.
@ionutinz Hello :)
how can i share a pen in this chat?
should i just copy&paste the url?
@nicopoore copy paste the link
great. none of the table to div converters work.
@sorinr thanks
nicopoore sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 958 | @sorinr |http://www.freecodecamp.com/sorinr
can anyone help me? I'm trying to get the photo on the right of the text to be centered
vertically
Haha ". I'm a future developer and programmer." Great optimism xD
hahahaha
you gotta think positive man
waste of time to try and learn to convert a table to divs. just more nightmare nonsense.
Yup :+1:
I don't think I'm cut out for coding. I've tried off and on for years and I never manage to make anything without a lot of agony.
so how should i do it?
@NEETWizardJanus Keep yourself motivated :+1: Check out the End Non-Profit Projects Demos on youtube! They are great! Here's a link to my fav: https://www.youtube.com/watch?v=V8B4orj0M7Y
@Waqas909 Here is my finished product..any feedback would be great http://codepen.io/toccomy/full/rWoVLv/
@NEETWizardJanus Learning Programming is not easy, there are obstacles you have to cross :-)
Every programmer faces them
@toccomy Umm It looks great! However, the navigation bar doesn't work?
yeah but I'm not making any progress. I started like 35 years ago with QBasic and it took me 10 years to optimize moving an ascii character around the screen.
or is it just for aesthetics ?
Yes I know. Im going to activate it on my profile challenge
I can pick up math so fast, even though I forget it all, I aced my grade 12 equivalent math course for college prerequisites. and yet coding makes me feel like a literal retard.
@NEETWizardJanus Maths and computer science are not the same
aesthetics
@NEETWizardJanus I am a physics university student, and I found coding and algorithms and fixing bugs very challenging
I've found coding way more similar to learning a language than learning maths/physics/other hard sciences
it's logical. I'm smart. I'm also creative. I was an artist. how can I not get good at it after all these years?
I think Motivation is key with learning programming
In your mind, you're seeing yourself as a Failure, that is a very big obstacle to motivation. Instant Kilelr
killer*
@NEETWizardJanus It seems to me that you've never stuck with any one language or system or project for a long period of time, I hope you eventually get onto some of the later FreeCodeCamp projects to give you something to work towards
mine is like this : https://gyazo.com/1ce3ed7c02cf7ded2f1ec7ef85cc7784 but how do I make it like this? https://gyazo.com/a8453bbaa03155bd35a6784dcdd408c1
hellow world
guys my dropdown not working on mobile size.please help https://codepen.io/PANKAJcodes/pen/rWoVmr?editors=1000#0
maybe it's because I have depression. It's not that I automatically think I'm stupid, it's that I work really hard to understand it and I can't find solutions. I just don't understand how after decades and decades of development, there's no system of good documentation that's straight forward and comprehensive. so if it's not the documentation, it's me. possibly a bit of both. I don't know.
Maybe you're doing something that's not your level?
you're trying to do something*
use text-center class @BobbaWoolf
Wait a sec
Nah. I spent a few years with certain languages. I tried some intermediate languages in between Basic and C++. {I forget what they were. Pascal??} I made a nice clock in C++ in high school. I went back to review my code and it's a complete nightmare of like 3+ layers of include files.
@nicopoore try to add margin-left: 50%; to you .profile-picture class
I am ambitious. but it's hard to be motivated to do simple things that aren't challenging or do anything interesting.
yeah i've done it but its still the same :/
This Journey is worth it, believe it or not.
Have a look at this video, i found it to be very motivating: https://www.youtube.com/watch?v=pvAsqPbz9Ro
send me full code
I mean that clock I made in high school was a digital LED clock with a non-standard layout. It was hexagonal. I redid it in HTML recently and it took me a month. http://codepen.io/NEETWizardJanus/pen/OXVwJN
@PankajKaushik78 jQuery needs to load before bootstrap.min.js - make sure jQuery is listed first.
actually the original layout was more like this: http://codepen.io/NEETWizardJanus/pen/jrNXJy
lemme check
@NEETWizardJanus Seeing that you build it... Should tell you, you're capable for more. Just at the moment you are rusty
That's what it sounds like :3
didn;t wwork @TylerMoeller
I need a complete brainwashing. mind-altering drug regimen.
@PankajKaushik78 You still don't seem to have jquery listed first
@PankajKaushik78 div class="jumbotron">
<div class="container">
<h1 class="text-center">Dr. Norman Borlaug</h1>
<p class="text-center">The man who saved a billion lives</p>
<div class="thumbnail"><img src="https://static1.squarespace.com/static/5256f6e4e4b086e2b62842e2/t/54bbbd61e4b077c90273b411/1421589862757/?format=1000w"><div class="caption text-center" class="text-center">Dr. Norman Borlaug, second from left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</img></div>
</div>
</div>
<h2 class="text-center">Here's a time line of Dr. Borlaug's life:</h2>
<ul class="text-center" style="list-style-type:disc"> <li><strong>1914 - Born in Cresco, Iowa</li>
<li>1933 - Leaves his family's farm to attend the University of Minnesota, thanks to a Depression era program known as the "National Youth Administration"</li>
<li>1935 - Has to stop school and save up more money. Works in the Civilian Conservation Corps, helping starving Americans. "I saw how food changed them", he said. "All of this left scars on me."
</li>
<li>1937 - Finishes university and takes a job in the US Forestry Service
</li>
<li>
1938 - Marries wife of 69 years Margret Gibson. Gets laid off due to budget cuts. Inspired by Elvin Charles Stakman, he returns to school study under Stakman, who teaches him about breeding pest-resistent plants.
</li>
<li>1941 - Tries to enroll in the military after the Pearl Harbor attack, but is rejected. Instead, the military asked his lab to work on waterproof glue, DDT to control malaria, disenfectants, and other applied science
</li>
<li>
1942 - Receives a Ph.D. in Genetics and Plant Pathology
</li>
<li>1944 - Rejects a 100% salary increase from Dupont, leaves behind his pregnant wife, and flies to Mexico to head a new plant pathology program. Over the next 16 years, his team breeds 6,000 different strains of disease resistent wheat - including different varieties for each major climate on Earth.
</li>
<li>1945 - Discovers a way to grown wheat twice each season, doubling wheat yields
</li>
<li>1953 - crosses a short, sturdy dwarf breed of wheat with a high-yeidling American breed, creating a strain that responds well to fertalizer. It goes on to provide 95% of Mexico's wheat.
</li>
<li>1962 - Visits Delhi and brings his high-yielding strains of wheat to the Indian subcontinent in time to help mitigate mass starvation due to a rapidly expanding population
</li>
<li>1970 - receives the Nobel Peace Prize
</li>
<li>1983 - helps seven African countries dramatically increase their maize and sorghum yields
</li>
<li>1984 - becomes a distinguished professor at Texas A&M University
</li>
<li>2005 - states "we will have to double the world food supply by 2050." Argues that genetically modified crops are the only way we can meet the demand, as we run out of arable land. Says that GM crops are not inherently dangerous because "we've been genetically modifying plants and animals for a long time. Long before we called it science, people were selecting the best breeds."
</li>
<li>2009 - dies at the age of 95.
</li>
<blackquote>
<h3>"Borlaug's life and achievement are testimony to the far-reaching contribution that one man's towering intellect, persistence and scientific vision can make to human peace and progress."</h3> <p><footer>- Indian Prime Minister Manmohan Singh</p></footer>
<h4>If you have time, you should read more about this incredible human being on his <a href="https://en.wikipedia.org/wiki/Norman_Borlaug" target="_blank">Wikipedia entry.</h4> </a> </h4>
</blackquote> </div>
bobbawoolf sends brownie points to @pankajkaushik78 :sparkles: :thumbsup: :sparkles:
:cookie: 124 | @pankajkaushik78 |http://www.freecodecamp.com/pankajkaushik78
lemme check again
but that's not currently legal. although it looks like they're intending to make therapies using certain kinds of drugs legal. who knows when that will be.
i love u @TylerMoeller haha
@TylerMoeller thanks
pankajkaushik78 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1162 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
lol happy to help
but whats the reason behind it
@PankajKaushik78 as @TylerMoeller said your loading order of libs is important because bootstrap.js needs jquery. so you should first load jq and after bootstrap
ok ok
bootstrap.min.js uses jQuery, so if jQuery hasn't loaded yet, it will fail. If you press Ctrl+Shift+J, it will give you an error you can search for with more info
ohk
you did any course yet
can someone help me with a javascript challenge
also my main text CREATIVE PK is not responsive @TylerMoeller @sorinr
@TylerMoeller its dropdown is also not reponsive..help
You'll need to debug your CSS - when you specify px instead of % it can make things no longer responsive
my life is such a mess. $1K for a new computer, and my youtube videos now start freezing after a few minutes consistently.
ohk
lemme try
#navcss{
margin-left:150px;
}
@PankajKaushik78 usually text its not responsive by default. so if you have a text defined 18px it will stay 18px no matter you are on desktop or mobile. you have to change it by using media queries
i think if i set % it will be responsive
@PankajKaushik78 be aware that % in case of fonts are kinda triky. i would prefer to use em
wow. Will I Am in this video? Will I Am. Idiot He Is.
em will be responsive??
xD
But i mean.. it's made for modern day teens
who actually take him as a role model
some of them ^^
but seeing an idiot learn programming, why cant you continue :D
%age not workin @TylerMoeller
check it
I don't think Will I Am is learning programming. He's just blathering.
yea i agree
.-.
actually alot of people in my school are crazy about programming
but all they do is play around with scratch xD
@PankajKaushik78 nope. i said you have to control the font-size manually. maybe you whant to ennlarge a font to be more visible on smaller screens. if you use % what do u think will happen?
yeah. I figured the younger generations are a lot more into it.
and the school is ACtualyl the one teaching them scratch
instead of actual programming
agreed @sorinr
and they're like 16/17
i mean scratch is programming
to be honest, I actually found my microprocessing class when I attempted to take robotics the easiest programming out of all of them.
@PankajKaushik78 It's working exactly the way you set it up - 50% to the left of the parent container
Yea they are easy
in terms of undersanding the concepts
of course I never did anything fancy like making advanced procedures with it.
@TylerMoeller :worried: i cant understand its difficult
like uh... memory stacks? I dunno.
Yea most people don't, these students have been doing it for 2 years...
In my opinion the school should start teaching them actual programming languages...
I'm still surprised to How new Computer Science is to schools
For now, probably best to read the bootsrap docs in more detail and use the sample code they provide. @PankajKaushik78
You may want to spend a few hours playing around with the code to see how it works. After that, you'll be much better prepared to write your portfolio without issues.
You may want to spend a few hours playing around with the code to see how it works. After that, you'll be much better prepared to write your portfolio without issues.
hm. maybe it's just for a special kind of autism that can also be reached through like ADHD medication for people that doen't have autism or ADHD.
well if u ever feel down, just remember this
Programmers are wizards of tomorrow - Gabe Newel
ohk @TylerMoeller ...how can i contact you btw
thanks @TylerMoeller
I'm here pretty regularly
pankajkaushik78 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: pankajkaushik78 already gave tylermoeller points
anyway I hope you cheer up mate! I'm gonna go now. Was nice having a chat with u
ok
on which challenge you are @TylerMoeller
I'm slowly working on data vizualization and backend projects - finished with all the front end projects: https://www.freecodecamp.com/tylermoeller
ohk nice
job??
@TylerMoeller lol
great :smile:
This is just a hobby here - learning how to do front-end work.
what to do you do
main profession
@TylerMoeller yep. same for me and i enjoy it
@PankajKaushik78 i am an accountant
i m just 15 :smile:
:clap:
good for u. you have plenty of time :)
I wish I learned all of this at age 15 :)
yea
do front end dev certificate from code camp help in getting job
With any education, you get out of it what you put into it. The certificate is just a piece of paper in the end
@TylerMoeller i have a son that age and i would not wish his teaching me code :) i prefer the other way
LOL :)
haha
recruiters prefer certificates
@TylerMoeller shud i skip and go to javascript challenges for while
@PankajKaushik78 i don't care about certificates. just peace of "paper"
Up to you @PankajKaushik78, some people like to take a break and do more javascript so they can come back to their portfolio and add new features
then how will you/any get job then @sorinr
yea it has no value
but what does have value, are the projects you build
here
you can show them off to your Uni / Company
ya theat u plug in portfolio
I'm guessing main reason you redid your projects @TylerMoeller ?
Yes, and I'll probably do them all over again :)
@PankajKaushik78 i just don't search for a job
xD
When I finished every project, I'm gonna do that :-)
I'm with
that was a typo fix but "*" makes it italic o.o
I think you can escape it
with\* with*
o.o That explains why u correct everyone! You worked for Microsoft for 10 years as an engineer!! Btw No offence Google Assistant > Siri > Cortana @TylerMoeller
Fact
Fact
.-. "#" makes everything bold
@Waqas909 It's Github markdown shortcuts that you're using :)
You have to escape the hashtag #Fact
\
hey, can anyone tell me why the images in my portfolio fill the entire width of the screen when i resize down?
@Vicfs That's how col-md-* works. Anything below md is assumed to be 12 unless specified otherwise
Use col-xs-* and col-sm-* to control how they look on smaller screens
An example: http://codepen.io/TylerMoeller/pen/qNrbok
do i include them to the same class line i added the medium one?
Yes
can i ask you another question unrelated to this problem?
Sure
you see the frames i have around my subsection titles?
i think i coded them in a stupid way and i'm not satisfied at all, can you teach me an alternative?
would that be the most adequate?
i don't really mind whether it's easy or hard
To help with this kind of styling, it's good to study inline elements vs. block elements and get an idea of how the box model works
ok thanks @TylerMoeller i'll probably ask more later :)
vicfs sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1163 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@Vicfs the hard way will be to design all by yourself(by css) by scratch. thing that i would recommend
you mean without using a framework?
yep
i was actually trying to do that but i couldn't figure out how to organize my images the way i wanted
this way you r in full control of your css
think that an img tag is an inline tag
Anyone around that could take a look at my code for my page? https://codepen.io/Jicho/
I am trying to get the two headers side by side using the row class; I think I have it coded right. It just isn't working :/
I am trying to get the two headers side by side using the row class; I think I have it coded right. It just isn't working :/
@Jichoat It only works on medium screens and bigger now.
Try playing with col-xs and col-sm too.
@forkerino Oh, you are right /facepalm Thanks Pieter!! Will using the xs or sm affect how it appears on computer screens?
jichoat sends brownie points to @forkerino :sparkles: :thumbsup: :sparkles:
:cookie: 388 | @forkerino |http://www.freecodecamp.com/forkerino
@Jichoat Only if you don't include the bigger ones. For example if you want to have it full width on xs (smartphone) screens use col-xs-12, but if you want to switch to 6 columns on small screens and larger, also use col-sm-6.
@forkerino So I could make it like <div=class"col-xs-12 col-sm-6"> for it to work for both smartphones and tablets?
@Jichoat yes, that will make the column 12 columns wide for xs screens and 6 columns for everything that is bigger.
@forkerino That's really neat, never thought I could use bootstrap like. Thanks again :D you rock!
jichoat sends brownie points to @forkerino :sparkles: :thumbsup: :sparkles:
:warning: jichoat already gave forkerino points
@Jichoat :metal:
That's why bootstrap is so powerful, make a page responsive by using pre-defined classes.
@forkerino or any grid system
:)
@forkerino Could I do the same with an image? Right now on my main page (now that I have the header figured out) I have that picture set as <div class="img-responsive"> Could I use <div="img-responsive img-center"> or would it be better to throw it into it's own row in the center col?
anyone know how this works
<div class="row">
<div class"col-xs-3">
<b class="other-text">Computers in my life</p>
</div>
<div class="col-xs-9">
<img src="https://www.arcticsecrets.nl/media/seo/game-computer/game-computer.png" alt="game computer">
</div>
</div>
<div class"col-xs-3">
<b class="other-text">Computers in my life</p>
</div>
<div class="col-xs-9">
<img src="https://www.arcticsecrets.nl/media/seo/game-computer/game-computer.png" alt="game computer">
</div>
</div>
why this doesnt work*
the image doesnt go next to the text
@markolie20 It might be the typo in your HTML
<p> tag, try changing <b class...
@Jichoat img-center doesn't exist in Bootstrap, I think. Try center-block.
@callumquick the only thing that happens is that the text stops being bold
@markolie20
<div class="col-xs-3"> You are missing the =
@TylerMoeller @callumquick thanks
markolie20 sends brownie points to @tylermoeller and @callumquick :sparkles: :thumbsup: :sparkles:
:cookie: 301 | @callumquick |http://www.freecodecamp.com/callumquick
:star2: 1164 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@forkerino well that might explain things, it would help if I was real modifiers :P Thanks again, I suppose I will have to do more google searching x.x
jichoat sends brownie points to @forkerino :sparkles: :thumbsup: :sparkles:
:warning: jichoat already gave forkerino points
how do i make this ?https://gyazo.com/e139e721430c350522401773d31151a4
What it's called to have something appear after a certain amount of time of using the pen?
nvm!
@BobbaWoolf http://www.w3schools.com/css/css_navbar.asp
hope this helps
Hello, I'm on the point where I have to build a tribute page. How do I have a caption under the photo the way the guy has it?
i need help guys
I have a picture working properly on smartphone size screens, but not on regular monitors.
<div class="col-xs-12 col-md-12 center-block">
This my div class that I am using, isn't it suppose to be working?
@lvphan Look into the bootstrap caption classes
@lvphan Specifically the thumbnail class
@Jichoat What do you want it to do on regular monitors?
@callumquick On regular monitors I would like the image centered; I have it working on xs just not on md screens......can't imagine my monitor would be considered lg ._.
@Jichoat I need more code context to tell you why it isn't centered
Here is my project
You'd probably be better to use CSS, select it and set
content-align:center;
@Jichoat Sick!
@callumquick Okie Thanks. Thought there might be away to bootstrap it :)
jichoat sends brownie points to @callumquick :sparkles: :thumbsup: :sparkles:
:cookie: 302 | @callumquick |http://www.freecodecamp.com/callumquick
@BobbaWoolf Haha Thanks
jichoat sends brownie points to @bobbawoolf :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @bobbawoolf |http://www.freecodecamp.com/bobbawoolf
@Jichoat I found the issue
@callumquick I'm still lurking
@Jichoat Your div is "center-block", and 12 columns wide, but your image inside it can still sit wherever it wants
@Jichoat CSS select the image and try
align-content: center; or:margin: 0px auto;
@callumquick I wouldn't sit center in the 12 columns?
@Jichoat It won't unless you tell it to
Hey! Any alternatives to
<select name="cars">for drop down, alternatives which I can style easier with CSS ?
@Jichoat The margin: 0px auto; line tells it: use 0 margin on top and bottom (feel free to change it) and automatically decide the right,left margins to center the object
@Jichoat It ensures it is centered, I have tested it on your codepen and it works
@Jichoat Bootstrap likely doesn't handle this functionality well simply because it is so easy to do (and customise) yourself
@Waqas909 Look into Bootstrap or Semantic UI dropdowns, they require a little bit of Javascript to activate but my more stylable
@callumquick Thanks for the Suggestions, I'll have a look!
waqas909 sends brownie points to @callumquick :sparkles: :thumbsup: :sparkles:
:cookie: 303 | @callumquick |http://www.freecodecamp.com/callumquick
@callumquick So it would look like this?
.center-block {
display: block;
margin-left: 0px auto;
margin-right: 0px auto;
}
.center-block {
display: block;
margin-left: 0px auto;
margin-right: 0px auto;
}
@Waqas909 Find it here http://getbootstrap.com/components/#dropdowns
@Jichoat No, the issue is that your div is already centered (you can check that on the developer tools): but your image is not centered within the div
@Jichoat Select the img tag and apply those styles, that will center it inside the div
@callumquick OH I see now!!
@Jichoat Also instead of margin-right and margin-left lines you can simplify it to just
margin: 0 auto;, the first number (0) does the top and bottom, the auto does the left and right
@callumquick Now that I am grabbing the image, do I need to have the Div centered at this point?
@Jichoat Depends, if it isn't centered it could move the image with it (imagine the div off to the left, but the img centered inside it, the img would look off center)... however since your div is taking up all 12 columns due to
col-xs-12 and col-md-12 it basically takes up all the space and so additional centering is probably overkill
@callumquick Awesome works perfectly, on my computer now :P Thanks for pointing that to me!!
jichoat sends brownie points to @callumquick :sparkles: :thumbsup: :sparkles:
:warning: jichoat already gave callumquick points
bootstrap is so good for mock ups :d
bootstrap is so good for mock ups :D
@Mr-Kumar-Abhishek Is it not often used in production grade?
@callumquick well .... it is used for prototypes .... you build over it then .
@callumquick afterwards most of the designs of bootstrap is overridden
@callumquick only the grid system remains
@Mr-Kumar-Abhishek I suppose when I started my CSS wasn't good enough to build things that bootstrap does, but now I pretty much only use the grid and the navbar
@Mr-Kumar-Abhishek Yeah I was gonna say, but overriding Bootstrap or Semantic can get quite annoying with specificity
@callumquick It is just another drop in the water ~.. specific design has limits how big it could be, software doesn't have limits how big it could be.
how do I make his name stay ontop of the picture instead? https://gyazo.com/84e1d60af77d655aed7094eb2180a97b
why isn't my nav bar displaying inline?
@Vicfs I don't know but dayyyyuum you're good !
hm no, i'm actually pretty terrible
what makes me :worried:
@BobbaWoolf I need code to assess why it's beside him in the first place
k want me to send in the page or the link?
i mean code
@Vicfs Not sure, your menu class is probably cascading down to the items and right-aligning them up against the side
@BobbaWoolf Send me your codepen link, it helps me to assess it
@callumquick
li{display: inline;}
oops
sorry
meant for somebody else
@Vicfs
li{display: inline;}
why did my li .btn display: inline not work though?
@Vicfs oh wait ... you were using bootstrap ?
yea
@Vicfs be more specific :D
@Vicfs the class which I gave will work for any
li element ... so add a specific class for it ~
@Vicfs that goes both ways .
@BobbaWoolf why do you want to kill Grant Gusting so soon :o ?!
yea but when i add the .btn class it doesn't work, do you know why is that?
@Vicfs let me take another glance ~
@Mr-Kumar-Abhishek wa?
@BobbaWoolf its a tribute page right ?
i mean i could just add the inline property for all my li elements because all of them are being displayed inline anyways, but that not might be the case in the future
@BobbaWoolf tributes are for people in heaven ... as far as I know
@Mr-Kumar-Abhishek OH you've got the wrong idea mate!
@Mr-Kumar-Abhishek you can offer a tribute for someone alive
@Mr-Kumar-Abhishek I'm just making a page for my favourite tv show :D
favorite
@BobbaWoolf I still think you are killing the poor guy :(
@Mr-Kumar-Abhishek LoL ! I'm not ^^
@Vicfs your previous class
li .btn is working fine. but you need to apply inline to li and not a
i'm not though
Hoe do a center an unordered list with boostrap?
I can center the text but not the dots
*How do you
or How do I make that the name "Barry Allen" is under Grant Gustin? https://gyazo.com/05db39c867515e5eef95b1a7f00e13c3
@littleread Center the
<ul> as well as the <li>s within it
ok i'll tray that thanks @callumquick
littleread sends brownie points to @callumquick :sparkles: :thumbsup: :sparkles:
:cookie: 305 | @callumquick |http://www.freecodecamp.com/callumquick
*try
@Vicfs when you declare a class
li .btn it acts over the tag having .btn class not the tag above it
@Vicfs so the tag having
.btn class is a so it acts over a
@Vicfs however, it is the
li which is stacked vertically .
@Vicfs so the
inline should applied to li and not a
and how do i remedy that without having to apply the inline property direct to li?
@Vicfs
<li class="navlinks"><a href="#"></a></li> , .navlinks{ display: inline}
@Vicfs be specific , as i said it goes both ways :)
@BobbaWoolf you could probably make a list, depends on what you want
@Vicfs there are other ways too....
@Mr-Kumar-Abhishek i tried that, it seems the btn class got ignored, not sure though
@Vicfs but in all cases you have to be more specific
@Vicfs
<li class="navlinks"><a href="#" class="btn"></a></li> , .navlinks{ display: inline}
@Vicfs include it then ~
I just wanted to share what I have finished for today. This took me a very long time and I'm still not done. http://codepen.io/pilotwhiterabbit/pen/RoErqO I'll finish this tomorrow. :)
@pilotwhiterabbit good work !
@Mr-Kumar-Abhishek thanks i got it to work now even though i'm still confused
vicfs sends brownie points to @mr-kumar-abhishek :sparkles: :thumbsup: :sparkles:
:cookie: 452 | @mr-kumar-abhishek |http://www.freecodecamp.com/mr-kumar-abhishek
@Vicfs I just forgot there was a btn class too while giving the example ~ the explanation remains the same
Feeling confused as to why my code is not working. This is for the local weather project. Here is my code for finding current location, weather for that location and then trying to add the data to my webpage. ``` var latitude;
var longitude;
if (navigator.geolocation) {
window.onload = function () {
var currentPosition;
function getCurrentPosition(position) {
currentPosition = position;
latitude = currentPosition.coords.latitude;
longitude = currentPosition.coords.longitude;
}
$.getJSON(" http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&APPID=0433a45ebc56292fa1c639b6fce3cc63", function(data) {
var rawJson = JSON.stringify(data);
var json = JSON.parse(rawJson);
document.getElementByID("temp").innerHTML = Math.round((json.main.temp) - 273.15);
}); }
navigator.geolocation.getCurrentPosition(getCurrentLocation);
}
```
@Mr-Kumar-Abhishek thanks!
pilotwhiterabbit sends brownie points to @mr-kumar-abhishek :sparkles: :thumbsup: :sparkles:
:cookie: 453 | @mr-kumar-abhishek |http://www.freecodecamp.com/mr-kumar-abhishek
@BobbaWoolf make grids for images to achieve what you are looking for
is it just me or do people over complicate things over js ??
Hi all, so when my webpage loads there's always a very light flash of black. My background is white but when I refresh I can faintly see a black background (less than a second). I'm not sure if it's normal but its kinda irritating, to be honest. Can anyone help?
@emilyaringoen your codepen link or repository clone URI ?
nah... people don't over complicate things over js... I am just more close to the metal of computers ... using c and assembly
@emilyaringoen It seems to me that you aren't correctly calling
getCurrentPosition(), but also getCurrentPosition() no longer works on insecure origins so you're probably not even getting the latitude and longitude, maybe you should get that info from something like http://ip-api.com/json
any idea on how to get my contact form to stay at the bottom right of my page regardless of page resizing?
Hi, i would like to ask why all the links populated after search linked only to the first link after click. Thanks in advance. https://codepen.io/shaolin30/pen/ZBrqJJ
@callumquick I'm confused by the like you sent. How do I use that like to get info?
@androuino Seems to be working to me
hey guys
@emilyaringoen Use $.getJSON or $.ajax like normal, and it will return that object as JSON, and you can get the lat and long from it
for one of my tasks i need to build a portfolio
and showcase social media pages
but i dont have any
@callumquick thanks! I'll try that.
emilyaringoen sends brownie points to @callumquick :sparkles: :thumbsup: :sparkles:
:cookie: 306 | @callumquick |http://www.freecodecamp.com/callumquick
@androuino seems to be working, if i understood what you asked
@Tejanth Just make something tbh ^_^ About your favorite tv show etc
oh alright!
for example
$.getJSON("http://ip-api.com/json", function(json) {
//Do something with that JSON file here to get that lat and long
});
thanks!
np!
hello fellow campers, I am pondering whether I should start working on the backend track...currently done everything up to the weather app on the FE track, dabbling with ReactJS as well as nodejs. I am a sysadmin by profession and learning JS because it's a lot of fun. I also recently got into cloud ops and want to leverage it for my projects. Would you recommend that I stick with FE a bit longer before taking on the backend stuff?
@Tejanth If you have no portfolio pages or social media pages, just put in placeholders :) For example, make a facebook button but just make the dead link with
<a href="#"></a>
@repeterande do what interests you.. bored with doing FE ?? Do BE ..
@Tejanth But I think you have to try to make it as a portfolio
@repeterande I'd say feel free to mix and match, I've been doing BE on the side while powering through the FE side, it definitely helps with some of the understanding of how your page will function as an app
ty callum
wait i have a question
is the portfolio about me?
@Mr-Kumar-Abhishek I am not bored with FE but I am mainly interested in the logic of apps and want to built something "complete" (for lack of a better description)
@callumquick thanks for your insights, I will try it out and see if I can get the hang of it
repeterande sends brownie points to @callumquick :sparkles: :thumbsup: :sparkles:
:cookie: 307 | @callumquick |http://www.freecodecamp.com/callumquick
@repeterande then move to BE... it will be "complete"
@repeterande If you want to build something "complete", learn a little BE, enough to get a Node.js server up and running and deliver a few pages to it for example
@Tejanth No, You can make anything but try to make it as a protfolio if you know what I mean :)
Hey guys
http://codepen.io/Waqas909/pen/zoyzzY
I have a drop down menu, set to opacity 0 on document.ready.
Then i have it, so when the document is ready, that div gets class which sets it's opacity to 1 but it doesnt work??
http://codepen.io/Waqas909/pen/zoyzzY
I have a drop down menu, set to opacity 0 on document.ready.
Then i have it, so when the document is ready, that div gets class which sets it's opacity to 1 but it doesnt work??
@Tejanth Usually a portfolio page is about yourself, I think in this case it should be because then you can use it later to show to employers for example
alright!
thanks guys!
yw!
wait what are brownie points?
Points, earned by Helping Campers!
@Mr-Kumar-Abhishek will do...thanks for taking the time to respond.. :)
how do u notify that people helped you
?
you say "Thanks" + their name "@Example
@Waqas909 Could be the typo in your JS of "appearr"
I don't help much ~
@callumquick no "appearr" is the class I want it to add, that class sets the opacity to
1
about @Mr-Kumar-Abhishek
:cookie: 453 | @mr-kumar-abhishek |http://www.freecodecamp.com/mr-kumar-abhishek
^ that is few cookies
@callumquick @BobbaWoolf Thanks!
tejanth sends brownie points to @callumquick and @bobbawoolf :sparkles: :thumbsup: :sparkles:
:cookie: 308 | @callumquick |http://www.freecodecamp.com/callumquick
:cookie: 121 | @bobbawoolf |http://www.freecodecamp.com/bobbawoolf
@Waqas909 Ah, ok I found the issue
@Tejanth Np bro! Glad to help!
@callumquick What is the issue .-. ?
about @camperbot
:star2: 2746 | @camperbot |http://www.freecodecamp.com/camperbot
@Waqas909 You add the class
.appearr which makes opacity 1, but you made opacity 0 in an ID selector #menu... so specificity means that opacity:1 in the class selector can't override the opacity:0 in the ID selector, so it stays as opacity:0, invisible
@camperbot help Twitch TV
hmm...
what were the commands now...
help Twitch
no wiki entry for:
twitch
@Mr-Kumar-Abhishek Just say help and then what you want help with
@Mr-Kumar-Abhishek Yeah
help Twitch TV
no wiki entry for:
twitch tv
help Twitch TV API
no wiki entry for:
twitch tv api
@callumquick But the thing is, I want the starting opacity to be 0 and then when the twitch logo is moved up then it shud appear, so when document is ready, I want to add that class which sets the opacity to 1 with a transition effet .-.
@Waqas909 I would recommend instead of addClass opacity:1, instead maybe animate the opacity from 0 to 1, it'll give a cool effect too
@Waqas909 add !important after the 1
opacity: 1 !important;
@Waqas909 Basically a class can't override what you've already got, and !important isn't a good idea
Or isn't always
thanks for the info @callumquick :)
mr-kumar-abhishek sends brownie points to @callumquick :sparkles: :thumbsup: :sparkles:
:cookie: 309 | @callumquick |http://www.freecodecamp.com/callumquick
@moT01 Thanks,
@callumquick Why is it not always a good iea, It works for this case ?
@callumquick Why is it not always a good iea, It works for this case ?
@Waqas909 Try in your CSS selector for .appearr to make the selector #menu.appearr
waqas909 sends brownie points to @mot01 and @callumquick :sparkles: :thumbsup: :sparkles:
:cookie: 414 | @mot01 |http://www.freecodecamp.com/mot01
:cookie: 310 | @callumquick |http://www.freecodecamp.com/callumquick
could maybe add another selector then
Yea ! Thanks "#menu.appear" works
@Waqas909 That should make the class able to override as it is more specific... specificity exists for a reason, !important can cause weird behaviours when you try to layer more classes on or other !importants
alright that makes sense :D
@Waqas909 As I thought, it was to do with specificity: the #menu.appearr approach is preferable to the !important method, because now you're still free to change the opacity again!
@Waqas909 That it a really cool page design though, well done! The animations are slick
@callumquick Thanks! It's definitely looking better than my old one xD
waqas909 sends brownie points to @callumquick :sparkles: :thumbsup: :sparkles:
:warning: waqas909 already gave callumquick points
I am so blind sometimes... the info is right in front of me and I am not looking at it :fire:
Programming101 xD
nah.... I got this from one of my new co-workers ~ he used to do it now I am doing it :p
xD yea blame it on him ofc
I am intuitive by nature ~
:p
:clap:
swap that intuition by sense and you get blind while programming :p
xD
@Mr-Kumar-Abhishek Which project are you working on?
I think he's rebuilding his old ones
@callumquick its simple twitch tv api :p
@Mr-Kumar-Abhishek Did you use the proxy workaround or did you figure out the twitch api?
Hey everybody. I have already gotten a local weather thing to work, but I’m trying to redo it and make it more fancy now. The first one I did was a simple one day data api here:
http://codepen.io/Jspadgett82/pen/rLNbBO
But now I’m trying to use a five day weather report to pull some data from, but it’s not working the same even with the same methods. Can anyone tell me what I’m missing in the translation of the two things? Here’s the api link for the 5 day:
http://api.openweathermap.org/data/2.5/forecast/daily?lat=39.6858&lon=-86.4106&cnt=5&appid=40f59e6113fb2dc24936838e8d72288a
http://codepen.io/Jspadgett82/pen/rLNbBO
But now I’m trying to use a five day weather report to pull some data from, but it’s not working the same even with the same methods. Can anyone tell me what I’m missing in the translation of the two things? Here’s the api link for the 5 day:
http://api.openweathermap.org/data/2.5/forecast/daily?lat=39.6858&lon=-86.4106&cnt=5&appid=40f59e6113fb2dc24936838e8d72288a
btw @Jspadgett82 You havent finished all the user stories :P
@callumquick https://wind-bow.gomix.me/ <----
User Story: I can see a different icon or background image (e.g. snowy mountain, hot desert) depending on the weather.
I’m not worried about that atm. I’m redoing it.
meh... I am just an application developer ~ need to go to the web ~
:# Just saying
lol, it’s fine.
@Jspadgett82 Your JSON link seems to work fine (it gives me the JSON) so maybe you're manipulating it wrong?
my first project
@callumquick Yeah, I can get it to come up as well. But getting external confirmation helps. I’ll try it again, thanks.
jspadgett82 sends brownie points to @callumquick :sparkles: :thumbsup: :sparkles:
:cookie: 311 | @callumquick |http://www.freecodecamp.com/callumquick
@callumquick Just noticed, You attend Cambridge!?!?!
@Jspadgett82 Your calls to stuff like json.main.temp etc are no longer valid, you need to look at the new JSON object and see what properties you need to access, it looks like stuff like json.list[0-4].temp etc
@Waqas909 Haha yes I do happen to, but my location being Cambridge is wrong, it probably says that as I was at uni when I made my GitHub account
@callumquick haha Nice :P So you took the Computer Engineering Course?
Cause I'm actually interested in applying for it
@Waqas909 I am actually a physicist :P I am learning web development because I love all kinds of programming, and also design, and I hope to eventually try software engineering (I do a lot of scientific programming in things like Python and C++)
@callumquick Respect :+1:
@Waqas909 But beware, web development and computer science are very different things :/
Yep
@callumquick That ‘complete’ one was using http://api.openweathermap.org/data/2.5/weather?lat=39.6858&lon=-86.4106&appid=40f59e6113fb2dc24936838e8d72288a
I’m redoing it with a different codepen page with the five day api, but using data.list[0-4].whatever.whatever is giving me issues. Is there a reason to use json.stuff.stuff instead? It worked with data before.
I'm hoping to learn more about software engineering, doing the computer engineering course
@callumquick I can do web development but computer science... I will stick to physics
Hi guys. I was wondering if someone could help me with assigning a background image to a div. How do I make it stretch to the full width of the page?
@Waqas909 Cambridge CompSci course is amongst the best in the world, it is worth applying if you think you are up to iot
@callumquick Well I'm hearing that they love IB students
@callumquick So i think I might have a chance :P
@Jspadgett82 Oh no sorry, I use json as my object name, if you call it data that is fine too
@Jspadgett82 If you could show me the new codepen page I might be able to spot a mistake
@Waqas909 They love people who're good at what they do regardless of how they do it, if you're talented they're looking for you
@callumquick Do you think if I'm done with Free CodeCamp
https://gyazo.com/6b9f48f803f69ad81d36bc941af6e6e2 Why is he Out of the line what D hell!!!!!
it'll help massively?
because the End Non-profit Projects are pretty big
@callumquick Alright. It was a legitimate question. I am learning this all from nothing so yeah… just making sure I didn’t miss something. And yeah, i realized that after I said that <.<
http://codepen.io/Jspadgett82/pen/XKdjOv
That’s the current being worked on one.
http://codepen.io/Jspadgett82/pen/XKdjOv
That’s the current being worked on one.
@MoJoe13 In CSS assign the background-url, then say background-size: stretch
@Waqas909 It's definitely something to note down in your favour
@callumquick Everything outside of the weatherForecast function grabs the .json data, but everything inside does not.
@MoJoe13 Set your div height and width to 100% and then set your background image size to 100%
~~~
background-size: 100% 100%;
@Waqas909 If you've done non-profit projects that's essentially work experience
and Since reading their Website, most people doing CS prob dont know much about programming, I hope that gives me a good lead in the competition
@callumquick still confused--would you glance at the start of my codepen? it seems like I am not getting any data from ip-api.com/json http://codepen.io/eringoen/pen/gLBjLK?editors=0000
@Jspadgett82 What is this line doing?
var country = data.list[0].temp.day; seems to me the "data" it has is only location based, not the weather data
@callumquick I hope you dont mind me asking such questions, as your answers actually mean alot to me Thanks
waqas909 sends brownie points to @callumquick :sparkles: :thumbsup: :sparkles:
:warning: waqas909 already gave callumquick points
@emilyaringoen
$(document).ready(function() {
var lat, lon, units;
$.get('', function(data) {
$("#data").text(data);
});
});This is the function getting the data yes? But it's not getting it from anywhere because in $.get() your first argument is "" i.e. nothing :) Make it $.get("http://ip-api.com/json", function... and that should work
Maybe who knows I do get accepted (Hopefully) and we end up doing it the same year :3
@callumquick In my one day api…
var ltemp = data.main.temp;was getting me the data from the api and working for what I needed. That’s what I was going off of so I could use that.
var country = data.list[0].temp.day;Is just placeholder for me to test and use the variable name to edit .html so I can see I’m drawing it from the api correctly.
but wait.. you would be doing the graduate course...
@Waqas909 The CS course at Cambridge is pretty abstract, there is some practical work but a lot of theory too
@Waqas909 I don't mind answering questions, I get them all the time as you can imagine
haha show off xD
@Waqas909 :) It's a good thing to show
Agreed :D
@Jspadgett82 But it won't be displaying anything unless you're giving it something it can work with for the
var country you see
@callumquick haha oops I was messing around and must have deleted the url. But even with it there it doesn't get any data. It just adds [object, object]
@emilyaringoen Yes! That is the data :) You need to manipulate these objects to get what you need, try to console.log() the data instead and investigate it in the consoloe
about{
margin-top: 80px;padding-bottom: 80px;
color: white;
height:100%;
width:100%;
background-image:url("http://res.cloudinary.com/mojoe/image/upload/v1481752239/Portfolio_Background_9_xc4lrx.jpg");
background-repeat: no-repeat;
background-size:100%;
}
you need to ask about @someone!
http://ip-api.com/json @emilyaringoen Or go to this URL and unravel the object yourself
@callumquick thanks.
emilyaringoen sends brownie points to @callumquick :sparkles: :thumbsup: :sparkles:
:warning: emilyaringoen already gave callumquick points
It's still not working.
@callumquick I don’t, actually. :/ Can you tell me why that’s the case compared to my first go at this?
http://codepen.io/Jspadgett82/pen/rLNbBO
I am just not getting, then why this works when what I’m testing in my new one isn't
http://codepen.io/Jspadgett82/pen/rLNbBO
I am just not getting, then why this works when what I’m testing in my new one isn't
@MoJoe13 It is notoriously hard to do for some reason
@MoJoe13 Could you link us your codepen?
@Jspadgett82 Have you modified all your calls and objects to reflect the new JSON object the 5-day forecast is giving you different to the 1-day?
hi whats a portfolio page
@MoJoe13 What is that you want to achieve, because everything looks right :package: and pretty!
@DeacoZ A page about you to show people to learn about what you do
@DeacoZ Well, I’ve seen all sorts of different methods to do one, but typically a page to showcase your work and a bit about yourself.
ok thanks
@Waqas909 :) I was just wondering how can I set these background images to fit the full width of the page. Thanks for looking into this :)
mojoe13 sends brownie points to @waqas909 :sparkles: :thumbsup: :sparkles:
:cookie: 279 | @waqas909 |http://www.freecodecamp.com/waqas909
@callumquick I actually think I’m a little lost, honestly. I’m trying to completely, from scratch, redo do it all, just using my old one as reference on how to use $.getJSON. But using the same methods doesn’t seem to work. I’m trying to figure out why doing seemingly the same thing doesn’t seem to work. I might not be explaining it well enough because I’m not exactly sure what I’m doing wrong either, heh.
@MoJoe13 The Div element you picture is inside, needs to have full width first of all
@Jspadgett82 Which one is your new 5-day one? Can you link it again sorry
@Jspadgett82 That way I can comb it through and see what's going wrong
you add
width:100%;to your div element (with that pic)
@callumquick
http://codepen.io/Jspadgett82/pen/XKdjOv
Is the one I’m starting over with. I’m just using the same methods I did before to test that I’m able to get the same results. It’s not happening. This is where I’m getting lost.
http://codepen.io/Jspadgett82/pen/XKdjOv
Is the one I’m starting over with. I’m just using the same methods I did before to test that I’m able to get the same results. It’s not happening. This is where I’m getting lost.
@Waqas909 Well I did that. It's the div with the id="about". I set the height:100%; width:100% but it's still not working. Sorry for bugging you with this but I feel I have to get to the bottom of this.
@MoJoe13 Oh no Don't feel sorry xD, If i was bothered I wouldn't be helping you. Helping is part of the learning process. So feel free to help anyone you possible can
@MoJoe13 That’s for sure. I’m still figuring EVERYTHING out… so I help folks when I think I know the answer xd
XD* too. It’s not often >.>
@MoJoe13 Hello I think i found it, First of all You have an open <div class="Container-fluid">
@MoJoe13 That class "container-fluid" is preventing it from going full width
@MoJoe13
That class has padding built in, so if you want to keep that class you have to add this property to style it
That class has padding built in, so if you want to keep that class you have to add this property to style it
.container-fluid{
padding:0;
}
Good Luck with your project!
@Waqas909 Seriously? lol. I never thought to try that.
What am I doing wrong here?
function destroyer(arr) {
// Remove all the values
var arr1 = "";
for(var i = 1; i < arr.length; i++){
arr1 = arr.filter(arr[i]);
}
}
destroyer([1, 2, 3, 1, 2, 3], 2, 3);
@Waqas909 I just re-did my portfolio page recently and just kept my navbar area separate from my container-fluid dive and made it fixed cause I was having code rage. I’ll have to remember that v.v
@Jspadgett82 I think your api call is being block by the client, look in the developer console when you run your page
@callumquick That’s actually good to know if that’s happening. On to another browser, if that’s the issue o.x
@Jspadgett82 It is the most annoying thing about API calls, you never know what's gonna try to block it: client, CORS, Chrome security, anything
@jdc101214 Filter doesn't work like that, you need to pass it a function which returns true or false for each value being considered
@callumquick I guess I just assumed that since my original one worked it wouldn’t be an issue. I’m tempted to just say forget it and try a single day v.v
@callumquick Thanks
jspadgett82 sends brownie points to @callumquick :sparkles: :thumbsup: :sparkles:
:warning: jspadgett82 already gave callumquick points
@Jspadgett82 The API calls can bug out for any reason, I had one once that worked when I wanted 10 items from the API, but was blocked when I wanted 15
@Jspadgett82 Two birds one stone xD
@callumquick I am definitely new to API’s, so that’s also good to know, if frustrating.
@Waqas909 Indeed, indeed.
Waqas Abbasi
@Waqas909