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?
@walidashri lol, was trying to implement exactly that one, but whenever I start dealing with
position: absoluteon the menu bar, it breaks completely
@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
I don't see anything like // comment or <!-- comment -->
i think css comment is
/* comment */
oh, i see them now
@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
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
you'll see if you remove the class, your border-radius then functions
so the btn-group-vertical might have an override
@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
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
doesn't make any sense to me
indexOf(arr1,0)???
i'm not sure what you're trying to test
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
when you do arr0.indexOf(arr1,0)
it's like saying
mary.indexOf(aarmy, 0)
do you see the issue?
jdc101214 sends brownie points to @sparklie3 :sparkles: :thumbsup: :sparkles:
:cookie: 319 | @sparklie3 |http://www.freecodecamp.com/sparklie3
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 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 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
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.
err sorry img element
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 - 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 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.
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
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
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?
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
you can if you want, ...i would say go with the api, ...you will have to for the projects after it anyway
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
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
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
@niconielsen so everything ive learnt so far up to jQuery should be fine?
I'm working on the wikipedia search assignment and have an issue. Could anyone take a look?
my random button isnt randoming
i think i might know...
?
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>
doesn't random just return one article, or does it return more than one?
this
for example
thanks @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
in the json throwed
@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 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
@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
<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
or im lazy
What is CDN?
@toccomy http:cloudinary.com/ <-- upload
@toccomy http://cloudinary.com/ <-- upload
@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
@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
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
.attr function
@diederikquak
iconSRC is a variable, removethe " surrounding it, it should be document.getElementById("#img")attr('src',iconSRC);
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 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 955 | @sorinr |http://www.freecodecamp.com/sorinr
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
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 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 700 | @alpox |http://www.freecodecamp.com/alpox
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
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)
@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 ....
@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 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
@alpox long before html 5 came for gaming
@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)
@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
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?
@alpox any new technology in computer science is first suitable for gaming then anything else , be it computer themselves , AIs or wasm ;)
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 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/
@alpox but this also makes it faster... using Rust instead of C for this would be a lot safer and quicker in execution too.
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
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 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 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
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
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
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 ?
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
@Waqas909 Are you using Chrome by chance? Twitch.tv has problems with Chrome sometimes - something to do with the way Chrome handles flash.
@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
asmaaamer sends brownie points to @waqas909 :sparkles: :thumbsup: :sparkles:
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
waqas909 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1159 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
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
@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
@eliecerthoms I think lots of people use Wordpress for that
@TylerMoeller You seem pretty far
The Non-profit Project
It's good motivation imo
to keep going
There's 7 more Demo's I think
<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...
@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
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
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>
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'll look into it though
@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>
@TylerMoeller yup. tried that, and at least applying it in CSS is failing.
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?
toccomy sends brownie points to @waqas909 :sparkles: :thumbsup: :sparkles:
ah. spontaneously started working. I coulda sworn I tried it this way before.
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?
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
@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.
should i just copy&paste the url?
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
you gotta think positive man
waste of time to try and learn to convert a table to divs. just more nightmare nonsense.
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.
@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.
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
@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?
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
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.
you're trying to do something*
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.
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
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.
@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
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
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.
@TylerMoeller thanks
pankajkaushik78 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1162 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@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
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
you did any course yet
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.
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
@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.
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
check it
I don't think Will I Am is learning programming. He's just blathering.
.-.
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.
instead of actual programming
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
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
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
thanks @TylerMoeller
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
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
job??
This is just a hobby here - learning how to do front-end work.
main profession
@PankajKaushik78 i am an accountant
:clap:
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
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
but what does have value, are the projects you build
here
you can show them off to your Uni / Company
I'm guessing main reason you redid your projects @TylerMoeller ?
When I finished every project, I'm gonna do that :-)
I'm with
that was a typo fix but "*" makes it italic o.o
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 :)
\
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
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
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
i was actually trying to do that but i couldn't figure out how to organize my images the way i wanted
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
That's why bootstrap is so powerful, make a page responsive by using pre-defined classes.
:)
@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?
<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 =
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
What it's called to have something appear after a certain amount of time of using the pen?
nvm!
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 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 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;
@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
jichoat sends brownie points to @bobbawoolf :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @bobbawoolf |http://www.freecodecamp.com/bobbawoolf
@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;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
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;
}
@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
@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
@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
@BobbaWoolf I need code to assess why it's beside him in the first place
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
oops
sorry
meant for somebody else
@Vicfs
li{display: inline;}
@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?
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 I'm just making a page for my favourite tv show :D
favorite
@BobbaWoolf I still think you are killing the poor guy :(
@Vicfs your previous class
li .btn is working fine. but you need to apply inline to li and not a
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
littleread sends brownie points to @callumquick :sparkles: :thumbsup: :sparkles:
:cookie: 305 | @callumquick |http://www.freecodecamp.com/callumquick
@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 :)
@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. :)
@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);
}
```
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?
@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
and showcase social media pages
but i dont have any
emilyaringoen sends brownie points to @callumquick :sparkles: :thumbsup: :sparkles:
:cookie: 306 | @callumquick |http://www.freecodecamp.com/callumquick
@Tejanth Just make something tbh ^_^ About your favorite tv show etc
for example
$.getJSON("http://ip-api.com/json", function(json) {
//Do something with that JSON file here to get that lat and long
});
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
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
thanks guys!
@Mr-Kumar-Abhishek will do...thanks for taking the time to respond.. :)
?
@callumquick no "appearr" is the class I want it to add, that class sets the opacity to
1