rkzoltan sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 586 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
LOL
could you explain to me the point of a <div> element? ive read this http://www.w3schools.com/tags/tag_div.asp
but still dont understand
ive just done the first project without using them
any content inside of a div is displayed as a block
if you apply styles for the div, affects all the content inside of it
a div element get used to separate content for the rest
yes
?
a div element is used to separate content from other content
whats the point of seperating it if you dont need to? thats what i dont understand
btw thanks @ChinuxParibus
rkzoltan sends brownie points to @chinuxparibus :sparkles: :thumbsup: :sparkles:
:cookie: 307 | @chinuxparibus |http://www.freecodecamp.com/chinuxparibus
well, lo, let's say that you want to make a division from your content
to tag them
try me
just say thanks and tag the person with @
vasiljevs sends brownie points to @rkzoltan :sparkles: :thumbsup: :sparkles:
:cookie: 119 | @rkzoltan |http://www.freecodecamp.com/rkzoltan
As i said, @RKZoltan you need two columns (one goes from text and the other goes for a vertical navigation bar)
you need to separate the content
<style>
.blue-text {
color: blue;
font-size: 60px;
}
.red-text {
color: red;
font-size: 35px;
}
.thick-red-border {
color: red;
border-width: 10px;
border-style: solid;
border radius: 50%;
}
</style>
<h1 class="blue-text text-center">Bill Gates</h1>
<h2 class="red-text text-center">The Founder of Microsoft</h2>
<center><img class="thick-red-border" src="http://media.new.mensxp.com/media/content/2016/Sep/image-2-1473505464.jpg" alt="Bill Gates" align="middle"></center>
<ol>
<li>1955: William Henry Gates III is born to attorney William Henry Gates II and Mary Gates, a schoolteacher, University of Washington regent and chairwoman of United Way International. He is raised in Seattle.</li>
<li>1967: Gates is enrolled in the Lakeside School, an exclusive private school in Seattle, where he befriends Paul Allen. The two students share an interest in computers and programming. The school notices his knack for technology and asks him to create a computerized schedule of classes.Gates’ 2005 keynote speech at Lakeside School.</li>
<li>1973: Gates enters Harvard as a pre-law major, but soon shifts focus. He quickly runs through the university’s most rigorous mathematics and graduate level computer science courses.</li>
<li>1975: From his dorm room, Gates calls MITS, the maker of the world’s first personal computer. He offers to develop software for the MITS Altair. MITS eventually accepts and buys his language for $3,000 plus royalties. Gates takes his first leave of absence from school to start working on the software venture he refers to as Micro-Soft. </li>
<li>1976: Gates and Allen register the trademark “Microsoft.” Gates writes an open letter to computer hobbyists, condemning the early adopters for sharing, rather than paying for, software. Gates’ “Open Letter.”</li>
<li>1977: Gates takes a second leave of absence from Harvard and sets up Microsoft in Albuquerque, N.M., where MITS is headquartered.</li>
<li>1978: Microsoft’s year-end sales exceed $1 million. Gates gains a reputation for being tough, but focused. </li>
<li>1979: Microsoft headquarters are relocated to Bellevue, Wash., a suburb of Gates’ hometown, Seattle.</li>
<li>1981: Microsoft incorporates and buys the rights to the operating system “DOS” from Seattle Computer Products. The system is modified and renamed MS-DOS, and the company licenses it to IBM for the company’s new personal computer.</li>
<li>1983: Allen leaves Microsoft after developing Hodgkin’s disease. Microsoft announces Windows as an extension of its MS-DOS operating system.</li>
<li>1986: Microsoft headquarters move again, this time to nearby Redmond, Wash. Shortly after, the company goes public.</li>
<li>1987: At age 31, Gates becomes the youngest billionaire ever. He meets his future wife, Melinda French, at a Microsoft event in New York.</li>
<li>1989: Gates founds Corbis, an archive of art and photography from public and private collections. Corbis later becomes one of the largest collections of visual information in the world.</li>
<li>1990: The Federal Trade Commission begins an investigation into possible collusion between IBM and Microsoft.The FTC charges that IBM and Microsoft collaborated to divvy up the market for operating systems in an anticompetitive way, with IBM’s OS/2 capturing the high-end of the market and Microsoft’s Windows covering the low-end of the market.</li>
<li>1994: Gates weds French; the couple goes on to have three children. The Gateses consolidate their charitable giving under the William H. Gates Foundation, named for Gates’ father, who agrees to manage the foundation. It is later absorbed into the Bill & Melinda Gates Foundation.</li>
<li>1995: In July, at age 39 and with a fortune of $12.9 billion, Gates becomes the world’s richest man. Later that summer, Microsoft introduces Internet Explorer to the world, as part of Windows 95. The Road Ahead, Gates’ book about his vision for the digital future, holds the No. 1 spot on The New York Times best-seller list f
see
in one section you can say:
<div class="vertical-bar">Navigation elements</div> and the other say: <div class="main-content">content</div>
by default, all on your page is
inline, not separated at all...
I see
so its like using a list instead of it all flowing together unseperated like with <p>
it seperates it?
but yeah, it separates it
Does anyone know if I should include a css reset if I'm using bootstrap?
@RKZoltan there are 3 kinds of elements on HTML:
inline elements, block elements and inline-block elements
the
inline elements goes for everything that includes text content such as <p>, <span> or h1
@christocarr no need as bootstrap already includes
normalize.css for you see here http://getbootstrap.com/dist/css/bootstrap.css
the
block element goes for everything that includes mor complex content such as div ul or section
the
inline-block element goes for everything that includes specific styles for media elements or nested things like: img or li, or even an a element
btw
Repent for the kingdom of heaven is at hand. Believe the gospel of Jesus Christ.
Repent for the kingdom of heaven is at hand. Believe the gospel of Jesus Christ.
Revelation 14:11
And the smoke of their torment ascendeth up for ever and ever: and they have no rest day nor night, who worship the beast and his image, and whosoever receiveth the mark of his name.
If a person receives the Mark of the Beast, which is a microchip implant or an electronic tattoo, or worships the beast, which is the Roman Catholic Church, or the image of the beast, which is the church-state union that will be formed in the United States, when religious laws are enacted or enforced, then they will be tormented forever in a Lake of Fire.
The worshipping of the beast and image of the beast will take place in churches on both Saturday and Sunday. Do not be deceived into thinking that the worship of the beast and image of the beast will take place only on Sunday.
in churches around the world people will worship the beast and image of the beast
its time to the real Christ's Church arise again...
@xFozzy this is correct way to access property
glove box inside a object var gloveBoxContents = myStorage.car.inside["glove box"];
1 Corinthians 1:10King James Version (KJV)
10 Now I beseech you, brethren, by the name of our Lord Jesus Christ, that ye all speak the same thing, and that there be no divisions among you; but that ye be perfectly joined together in the same mind and in the same judgment.
IS THE FOLLOWING JUST CSS??
style>
.blue-text {
color: blue;
font-size: 60px;
}
.red-text {
color: red;
font-size: 35px;
}
.thick-red-border {
color: red;
border-width: 10px;
border-style: solid;
border radius: 50%;
}
style>
.blue-text {
color: blue;
font-size: 60px;
}
.red-text {
color: red;
font-size: 35px;
}
.thick-red-border {
color: red;
border-width: 10px;
border-style: solid;
border radius: 50%;
}
can this be cut and pasted from html into css and still work???
but not the tag
don't copy the <style> tag
@jdtdesigns thanks
rkzoltan sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 611 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
<div class="row">
<div class="col-xs-12">
<div class="col-xs-12">
nevermind. goodnight world.
good night
I can't get my background-image photo to work on codepen. Any suggestions?http://codepen.io/glgirl28/pen/XKNBZX
@glgirl28 You cant use that google drive image URL as its not public URL,
Failed to load resource: the server responded with a status of 403 ()Upload that image to dropbox or flickr and use the URL generated by these services they will work without any issues
glgirl28 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 587 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Anybody know how to fix my menu so when you shrink the page the links won't move down?
Or in other words, fix the links where they are and not move no matter what
http://codepen.io/amidzicigor/pen/ozwzaQ
Or in other words, fix the links where they are and not move no matter what
http://codepen.io/amidzicigor/pen/ozwzaQ
hi friends this is my pomodoro clock project still need to add something
but already there is a lot of code in js section.
is there any way i can narrow it down?
any suggestion highly appreciable
http://codepen.io/m1s/pen/EgXgVX?editors=0010
but already there is a lot of code in js section.
is there any way i can narrow it down?
any suggestion highly appreciable
http://codepen.io/m1s/pen/EgXgVX?editors=0010
@amidzicigor I changed some html and css. You shouldn't use fixed widths when you're trying to style responsive sites. Flexbox is great for aligning content and creating fluid grids and is now supported in all browsers. ;) http://codepen.io/jdtadlock/pen/qajaLJ?editors=0100
@mones-cse One quick thing is to write your .on() click events like this instead:
$("#resumeBtn").on('click', resume);amidzicigor sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 612 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
you don't need to open an anonymous function to call a function ;) @mones-cse
@mones-cse Another tip is to use jQuery to gather element groups and setup a function that handles the event when one of the items in the group is clicked instead of setting an event for each item individually.
<!-- You might have some html like this with buttons inside a parent wrapper -->
<div class="buttons">
<button id="one">Button One</button>
<button id="two">Button Two</button>
</div>// You can create a group like this
var buttons = $('.buttons').find('button');
// Then you can create a function to handle the click on any of the buttons
buttons.on('click', handler);
function handler() {
var btn = $(this); // refers to the current clicked button
// do somethin with the button
}
@jdtdesigns thanks for the hint will try to apply the changes :)
mones-cse sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 613 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
hey guys i'm stuck on the converting Fahrenheit to Celsius challenge and i am stuck on how to start a solution
Hello. I'm up to the Simon Project challenge and I normally just plug thru and finally figure out my answers. ......... Christopher there is some really great youtube videos that walk you thru some of the challenges I believe the Fahrenheit to Celsius is one... just do a google search and you will find it.
For me... I've spent now a month on this... and I'm stuck.
I need someone who can look at my code a bit. ? Is that possible here? or do I just need to keep plugging away?
Mostly everything seemed to work... but I added another virtual button and my start button and realized my lights and buttons were all tied together.... I think its a variable to reference issue.
hey guys! i finished my first tribute page project but it was a bit bland and boring so i made another one and wanted to share it with you guys. let me know what you think. its nothing special but i just wanted to share it because im just proud that i made it from scratch
Hey guys. I'm working on the Show The Local Weather project, and I'm stumped. Here's my CodePen: http://codepen.io/dpcleveland/pen/KgapaE I'm really close, but for some reason when I click on the temperature to toggle between F and C, it won't swap. The weird part is that I see the temp show up for a split second in C, but then it goes back to F. Can anyone help?
Hello, everyone! Can anyone help me with the position of one of my elements? Here's my code http://codepen.io/flopy_dv/pen/kkwbBp?editors=1010
@dpcleveland You're setting the click from inside the ajax call. You should create some global vars and set them when the ajax is called, then create a click event separately from the ajax.
Daniel.. I'm not much help, you use more jQuery then javascript. I'm not as familiar with the "cute" jQuery short cuts... the only little thing I see is your RETURN within a IF ELSE code. if your in the IF you won't get to the ELSE... so you don't need that I think... and or you may need one within your ELSE too. I can post a link to my answer if it helps? but your code is way shorter with JQuery then mine is with javascript.
@jdtdesigns okay totally makes sense. Was kind of thinking that but wasn't sure. Thanks so much! Will get to refactoring :D
dpcleveland sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
@jem243 Thanks! Yeah, I should probably rewrite the whole think in plain JavaScript just to make sure I know how. I don't think I want to look at a solution right now, but I'd definitely like to look after I'm done if you want to share the link
dpcleveland sends brownie points to @jem243 :sparkles: :thumbsup: :sparkles:
:cookie: 298 | @jem243 |http://www.freecodecamp.com/jem243
I've been watching this room for a few minutes. Up until now I've done all things on my own. But I'm really stuck. I've spent all of september working and reworking SIMON. Key issues I'm having at this point is 1) since I can't use assets (i.e. graphics in pen) without buying a pro version. I have to create or DRAW them. I had the game working except I need to create and add a little timer into the game to create a PAUSE between the computer playing out the repeats. BUT then I went and added a START button, and then the STRICT mode button and at that point I realized my last DOT and my two buttons are colliding. (I think its a reference VAR issue...) but I'm not sure. I reread "Building JAVASCRIPT games by Arjan Eggs" and thought maybe "prototypes" was the way to go. I went and changed my Canvas Code to that and completely crashed everything. So I've reset everything back to normal OBJECTS. So I'm dealing again with just my last DOT and my two BUTTONS coming back with the same color. Which is not what my code says. Here's my CodePEN link if anyone out there has any idea's or suggestions and advanced thankyou for taking the time and looking at it. http://codepen.io/jem243/pen/LRVyyY?editors=0011
@dpcleveland
think this way you are going to use $.getJSON only to get data os this will be one function
and changing temperature is another functionality so you can make it another function
right now your changing function inside getjson so when you try to use that click event it converted celsius to fahrenheit but after immediate you get data again from api and rerun the whole thing
I'm frustrated programming in codepens... As ASSETS are a pain if you don's spring for the PRO plan. I'm at the point in my SIMON... to jump back and program everything in ATOM and then cut and paste things when they work.... But I've been hesitant up to this point that things will work outside of CODEPEN and not within CODEPEN.... so I've always done the projects within the CODEPEN enviorment and had to deal with ASSET linking to various others work out there on the net.
@mones-cse Gotcha. Yeah that totally makes sense. Will split the input / output functions apart - should have done that from the start. Yeah, now I see that it sets the temp originally, then the click changes it but then it overwrites itself because of the original setting earlier in the function.
@mones-cse Thanks!
dpcleveland sends brownie points to @mones-cse :sparkles: :thumbsup: :sparkles:
:cookie: 411 | @mones-cse |http://www.freecodecamp.com/mones-cse
I guess I need to post my question in baby steps and/or there is no one out there that can help me on the last SIMON project? My current most puzzling issue is that I have to DRAW everything manually (i.e. make graphics by code, not by importing SPRITE.) So I have 4 colored DOTS and I had everything working just fine (with the exception of a TIMING issue of WAITING between LIGHTING my DOTs.. ) So I decided to work on the START and STRICT MODE buttons... and now my YELLOW Dot turns to the light blue START button and the STRICT MODE button turns also light blue and erases over my START text...
It feels like its a REFERENCE VAR issue? Anyone out there can help? http://codepen.io/jem243/pen/LRVyyY?editors=0011
@dpcleveland Here's a simple way to create a switch using global vars. Using a boolean that toggles false/true is a great way to create many switch cases in your apps. ;) http://jsbin.com/cijato/edit?js,console,output
After two weeks dealing with this issues... I feel like giving up.... I only once asked for help here and Hai Hu was very helpful back then. Since I'm stuck I'll at least stick around the room and help others on the lower projects... :( I feel so alone searching for a MENTOR.
blah
it's not moving any texts at all
even using margins
not codepen
sometimes I've left codepen and reloaded. If your referring to the 3 windows above... if your referring to your results yes that might be in your CSS or HTML code.
@jem243 The first thing i'm noticing is you're using canvas to create the board and shapes. This can be done much easier just using css.
oh if you use Bootstrap for a project you have to manually add it each and everytime to get the results.
i didnt add bootstrap haha
Hmm... I've thought of that... I'm more of a programmer then a graphic person and I got to thinking that this last week that maybe I need more CSS drawing experience. Normally I would have DRAW pics in GIMP or such and then imported the SPRITES and patterns... but in CODEPEN without a PRO version this isn't possible. I guess I'll start reading more on FANCY CSS options.
@jem243 You don't need images for anything more than photography these days. Css can do pretty much anything else. This is my simon built with only css. http://codepen.io/jdtadlock/full/EyVbOM/
I had even trouble adding the actual SOUND to the ALARM clock. To the point I gave up and just had to add a TEXT as the sound. But with the references to SIMON sounds I plan to go back and add one of the SOUNDS as the Alarm. I'll look at your code now. Thank you JD.
@jdtdesigns Wow, that's super helpful and seems so simple now that I look at it. Thanks :D
dpcleveland sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 615 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
@luis4flames You need to adjust your margins for the box as they are causing the box to overflow outside the body. Also, you need to adjust the margins for the tweet and quote buttons. They are overlapping. Look up offsets in the bootstrap grid to center columns. ;)
@Dirtier Looks nice! The tweet button works fine for me too.
luis4flames sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 616 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
/*twitch tv*/
var channels = ["freecodecamp", "storbeck", "terakilobyte", "habathcx","RobotCaleb","thomasballinger","noobs2ninjas","beohoff","brunofin","comster404","test_channel","cretetion","sheevergaming","TR7K","OgamingSC2","ESL_SC2"];
$(document).ready(function(){
/*here the for loop for i is kept outside the function to understand reason http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example*/
for(i=0;i<channels.length;i++){
getData(i);
}
/*funnction get data*/
function getData(i){
$.getJSON('https://api.twitch.tv/kraken/streams/'+channels[i]+'?client_id=bfcvgu5jg6gsft824hzc3a7qgay19gb&callback=?', function(data) {
screenOut(data,i);
});
}
/*function outputs to screen*/
function screenOut(data,i){
if(data.status == 404){
$('.data').append("<div class = 'col-lg-3 col-md-3 col-sm-4 col-xs-6 holder'><img src = 'http://i.vimeocdn.com/video/499134794_1280x720.jpg' class = 'img-responsive' ><div class = 'status'>NOT_FOUND</div><div class= 'img-text'>"+channels[i]+"</div></div>");
}
else if(data.stream == null){
$('.data').append("<div class = 'col-lg-3 col-md-3 col-sm-4 col-xs-6 holder'><img src = 'http://i.vimeocdn.com/video/499134794_1280x720.jpg' class = 'img-responsive' ><div class = 'status'>OFF-LINE</div><div class= 'img-text'>"+channels[i]+"</div></div>");
}else{
$('.data').append("<div class = 'col-lg-3 col-md-3 col-sm-4 col-xs-6 holder'><img src = '"+data.stream.channel.video_banner+"' class = 'img-responsive' ><div class = 'status'>LIVE</div><div class= 'img-text'>"+channels[i]+"</div></div>");
}
}
});.holder elements
@jdtdesigns Thanks :P I'm just not too sure about the fonts. I played with I shit you not 20 different fonts and finally landed on these
dirtier sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 617 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
@durgakiran I don't see any css or js regarding hover in your code. You can simply add this to your css:
.holder:hover {
background-color: blue;
}
@jdtdesigns i tried using
.hover and .on inside jquery to alter the holder html but didinot work
@durgakiran Probably didn't work due to the order in which you set .hover(). You'd need to set the event after the html was created, otherwise it wouldn't exist on the page yet and the event wouldn't work. ;)
can you tell now why it is not working
@durgakiran It's because the html is not created yet. The data is being received asynchronously so it won't exist on the page instantly. The hover event is called immediately so the html isn't there yet.
Is there a way i can achieve this through jquery
@jdtdesigns
@durgakiran Change your hover event to this and it should work:
$('.holder').on('mouseenter', function(){
$(this).find('.status').fadeOut();
});
you had $(this) written as $('this')
which won't work ;)
Wasn't an async issue after all.
@durgakiran You need to change the way you wrote the .on() as well. Remove the object callback and write it like i did above.
@jdtdesigns just copy pated but still did not work
@durgakiran Your .on() line is placed wrong. You need to move it inside the function
function screenOut(data,i){
if(data.status == 404){
$('.data').append("<div class = 'col-lg-3 col-md-3 col-sm-4 col-xs-6 holder'><img src = 'http://i.vimeocdn.com/video/499134794_1280x720.jpg' class = 'img-responsive' ><div class = 'status'>NOT_FOUND</div><div class= 'img-text'>"+channels[i]+"</div></div>");
}
else if(data.stream == null){
$('.data').append("<div class = 'col-lg-3 col-md-3 col-sm-4 col-xs-6 holder'><img src = 'http://i.vimeocdn.com/video/499134794_1280x720.jpg' class = 'img-responsive' ><div class = 'status'>OFF-LINE</div><div class= 'img-text'>"+channels[i]+"</div></div>");
}else{
$('.data').append("<div class = 'col-lg-3 col-md-3 col-sm-4 col-xs-6 holder'><img src = '"+data.stream.channel.video_banner+"' class = 'img-responsive' ><div class = 'status'>LIVE</div><div class= 'img-text'>"+channels[i]+"</div></div>");
}
$('.holder').on('mouseenter', function(){
$(this).find('.status').fadeOut();
});
}
@jdtdesigns thanks it worked stuck here for almost for 2 hrs
durgakiran sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 618 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
@amidzicigor , have you already tried using position: fixed in the css for #menu ?
I'm working on the Local Weather project. I'm trying to use the OpenWeatherMap API but it's not letting me load data from there saying it's an insecure endpoint :/. Can't use https with OpenWeatherMap since that's a pro version feature. Can't change to a non secure origin since HTML5 Geolocation only works on secure contexts. Any ideas how to work around this other than shifting from OpenWeatherMap?
@akshatamohanty you can cheat with crossorigin.me or change the api
@kirbyedy Thanks! I ended up using this - http://ipinfo.io but the cheat is a nice idea! .. will definitely be useful!
akshatamohanty sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1416 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
@kirbyedy , @akshatamohanty I used jquery.getJSON to access the openweather api and used callback function to get output from the response. - ```jQuery.getJSON("http://api.openweathermap.org/data/2.5/weather?appid=xyz&lat="+loc.latitude+"&lon=" + loc.longitude + "&units=metric",fnSuccess(weather))
.done()
.fail(function(e1) {
showError(e1.statusText + " - " + "Error getting weather. Please try again later.");
console.log(e1);
});
.done()
.fail(function(e1) {
showError(e1.statusText + " - " + "Error getting weather. Please try again later.");
console.log(e1);
});
@arapl3y ^^ - your social icons aren't linking on your webiste ;)
hey guys, so I tested my new site https://amitp88.github.io/New-Portfolio/#intro using chrome dev tools and it looks fine on there. However, on my desktop screen at work, the paragraphs were spread way too much, the buttons were on top of the text, and the image was too small. I noted the start of this problem to be at 1024px and up to 1280px (possibly higher).
basically I wanna know if my site looks ok on different laptop/desktop screens, as I might have to tweak the media queries (or add new ones) to those
Where is the sample API response for Twitchtv JSON API Zipline?
@AmitP88 , the contents on the page look spread out but I did not notice any of the issues you mentioned on my laptop.
hello, i am doing the tic tac toe game, and I am unsure why my results function to analyse the board isn't working. It works fine for win or lose, but not for a tie. Can anyone help with my code? I put the board state in a simple array, 0-8 is board from left to right and top to bottom. win states are the values for 3 in a row. http://codepen.io/christophersiewert/pen/BLkwxR
@AmitP88 you can use http://quirktools.com/screenfly/ which I suggested you before to test on different screen sizes
i am working on the calculator project
Hey @shreyas23sk it seems like all your buttons keep displaying their values. CE & AC should be able to cancel out the events for buttons 1-9. Right now you applying the same event listener logic for all buttons,hence they'll keep displaying the same thing.....
and
$("#evaluate").on("click",function(){ you've selected an id which doesn't exist
hi @mradil16 ! Doing pretty good, just plugging away at the simon game project
Hi I am working on a (suposes to be) responsive website. I want to have a two column on desktop view and 1 collumn view on a tablet or phone. The collumns contain of rectangels which need to have a fixed scale. For the mobile view I want them to be aligned in the center however the column is now aligned left. can someone help me center it? Thanks!
http://codepen.io/michiel-huijse/pen/pEwLmo
http://codepen.io/michiel-huijse/pen/pEwLmo
@shreyas23sk Here's a starting point. You didn't have a value set for the input div. I changed the input div to an input. This will allow you to set up some logic for the user to be able to type in numbers/symbols as well as use the buttons. The logic for a standard calculator is pretty easy. You can make it advanced though once you get the idea. ;) https://codepen.io/jdtadlock/pen/JRJvPJ?editors=0010
@MichielHuijse First things first, remove all of this from your html:
<!DOCTYPE html>
<!--[if IE 9]>
<html class="lt-ie10" lang="en" >
<![endif]-->
<html class="no-js" lang="en" >
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coco Studio</title>
<!-- normalize.css and modernizr.js help with browser compatibility -->
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="foundation-icons/foundation-icons.css">
<link rel="stylesheet" href="css/main.css">
<link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
</head>
<!-- include before </body> tag -->
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
you need to set all of that up in Settings.
It's pretty easy to add all the stuff you need. Just go to Settings->CSS and Settings->JS and use the quick add drop down. It has most of the standard libraries ready to go. For others you can just start typing in the input boxes and it will pop up.
@jdtdesigns yes but when I make the production css file I want it to be in there
@MichielHuijse Codepen will throw errors if you place those tags in the html
@jdtdesigns Ok thanks, this was more or less a copy from a project I am working on in webstorm
michielhuijse sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 619 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Hi! I had asked for help with my Weather App before and someone told me about need for a proxy in order to use the api key the way I was using it. But I still can't get it to work. If anyone has a minute could you look and see if I am missing something else that is making it fail? https://codepen.io/sfmajors/pen/amBrOL
@jdtdesigns so besides that do you know how to make the columns centered on a mobile screen?
@MichielHuijse I'm noticing you're not wrapping your columns in rows. This is required for the columns to work right:
<div class="row">
<div class="large-6 columns"></div>
<div class="large-6 columns"></div>
</div>
to center columns you just add the size and centered
large-centered
@sfmajors373 I'm guessing you either copied a lot of code from somewhere else or you're not understanding how html elements and js element calls work. Your getLocation() was not coded correctly to account for chrome. The geolocator will exist on all browsers so using logic that determines if it exists or not will fail. The way you were calling the ajax will also not work. You have to make ajax calls in the order the data needs to be received(location->weather api->show data on html). Lastly you have a ton of stuff that you're calling, but doesn't exist in your code like functions and variables that are declared but never instantiated above. I got it running for you. Hopefully you'll understand it a little more. ;) http://codepen.io/jdtadlock/pen/pEwVdb?editors=0010
also, you can't mix https with http stuff
I am working on Wikipedia Viewer... I am having trouble starting it... Does anyone know what api address is used to call Wikipedia API? And what would be the JSON format of the call? Your help will be greatly appreciated!
@jdtdesigns So, the top api is what chrome requires?
@SanjayAtGit This ajax call will work ;)
// userInput refers to the html input your user is typing into
// you need to get the value before using this ajax call
$.getJSON('http://en.wikipedia.org/w/api.php?action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=extracts&exintro&explaintext&exsentences=1&exlimit=max&format=json&callback=?&gsrsearch=' + userInput, function(data) {
if ( data.query ) {
// We have results
} else {
// No results
}
});
@SanjayAtGit a couple hours of research when i did the wikipedia challenge :P
That's great! Is it on the wiki site that is given in the FCC challenge at wiki(https://www.mediawiki.org/wiki/API:Main_page)
@jdtdesigns I couldn't find it there!!!
@sfmajors373 Chrome will only allow you to use the navigator if the user runs the site from https. Since most users will load codepen through http, this will fail. So I just use an ip locator for chrome and navigator for others. ;)
@SanjayAtGit It took me awhile to figure it out. I looked at the example and read the api docs.
sanjayatgit sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 620 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
@jdtdesigns What would be the JSON format? How do I figure that out?
@jdtdesigns Ok, I get that now. Thank you very much for your help!!! :)
sfmajors373 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 621 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
@SanjayAtGit If you mean how to use it, the api url has params you give separated by '&' which you can chain one after the other to get results in the format you want. You just have to look through the params to see what each one does.
That's great! That's what I wanted to know! Thanks again for you help @jdtdesigns
sanjayatgit sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: sanjayatgit already gave jdtdesigns points
Codepen requires you return jsonp so that is why you see 'format=json&callback=?' which returns jsonp instead of standard json. @SanjayAtGit
@jdtdesigns Do you happen to know of any good resources for reading up on ajax and api's and such? Also when it is appropriate to look to switch from JS to JQuery. I feel like I have a few legos, a couple Lincoln logs, and some K'nex and I don't know what to do with any of it.
sanjayatgit sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: sanjayatgit already gave jdtdesigns points
@sfmajors373 There are literally hundreds of videos on youtube about apis and ajax. I'd start with jQuery. It's one of the few times I will suggest starting with a library instead of vanilla code. jQuery will help you understand the basics of js and also make it much easier to manipulate the DOM.
@khaduch I made the changes that you suggested and it definitely helped. Everything in the body seems to work great now but my nav-bar unfortunately remains unformatted.
Awesome. That gives me a place to start trying to disentangle all of this.
I am having several issues with the Random Quote Generator Project and would like some help. I decided to include api.forismatic instead of an internal array to quotes. In the javascript, I get "Uncaugt Error: Syntax error, unrecognized expression: http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=parseQuote" I also need help with external css and external js files. Thx John
http://codepen.io/jfkirkpatrick/pen/VKYawZ
http://codepen.io/jfkirkpatrick/pen/VKYawZ
what does <div class="jumbotron"> mean?
what does <div class="row"> mean?
what does <div class="col-xs-12"> mean?
BTW repent for the kingdom of heaven is at hand. Believe the gospel of Jesus Christ
@jfkirkpatrick You had quite a few errors. First you don't include the html/head/title/body tags in the html on codepen. All of those things are added through Settings which I see you did. Also, you can't link to an external stylesheet from your computer or somewhere else. Your css is placed in the css panel, which I see you did lol. The js had some errors with the api url and the way you formatted the api call. Hope this helps. ;) http://codepen.io/jdtadlock/pen/RGgBpg?editors=0010
@RKZoltan It'd be helpful for you to read the Bootstrap docs. ;)
or look up some videos of Bootstrap on youtube
@DavidDarius Your
rand variable is not returning whole numbers. Change rand = Math.random() * 6; to rand = Math.floor(Math.random() * 6);
@hmouhtar No so I may just go back to the internal array Thx for your suggestion
jfkirkpatrick sends brownie points to @hmouhtar :sparkles: :thumbsup: :sparkles:
:cookie: 337 | @hmouhtar |http://www.freecodecamp.com/hmouhtar
@DavidDarius In your HTML, create an empty div where you want to see the quote
<div id="quote"></div> and in your JS, change all $("body").html(.....) to $("#quote").html(....)
@DavidDarius salut. i would create a quotes array and using recommendations of @TylerMoeller i would get the quotes[rand] and display it in its own div
@jdtdesigns JD thank you for your suggestions and I am looking at them now. Will get back to you. John
jfkirkpatrick sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 622 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Hi guys! What is the url of the redirecting page we use on codepen? I've forgot that...
@sorinr No. I meant there is an url I could put at the beginning to my url as a redirecting thing
@zaturek do u talk about crossorigin.me ? if not plz be more explicit and give an example where do u need that "redirect"
zaturek sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
in section2
And I need some more help, cos the link I've build for wikipedia browser works perfectly if I copy it to the address bar, but my .getJSON doesn't give me back the same and good result. http://codepen.io/zaturek/pen/wzdGrZ?editors=1011
@zaturek change the order of loading js libs in pen settings like: 1.jquery 2.jqueryui3.bootstrap
@sorinr Nothing changed
Cant figure out how to put my tweet and new quote button to get place next to eachother and still have it be responsive with screen size, any suggestions?
http://codepen.io/luis4flames/pen/jrNqrR
http://codepen.io/luis4flames/pen/jrNqrR
@luis4flames First you have to use a "main" div with class="container-fluid"
then you have to put each element in rows.
That means a new div with class="row"
than in the row you can put a div for each button like:
<div id="tweet-btn" class="col-sm-4">
<button></button>
</div>
and you have to fill the rest of course
luis4flames sends brownie points to @zaturek :sparkles: :thumbsup: :sparkles:
:cookie: 267 | @zaturek |http://www.freecodecamp.com/zaturek
@jdtdesigns JD Absolutely, beautiful. Thx for all the assistance. John
jfkirkpatrick sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: jfkirkpatrick already gave jdtdesigns points
@zaturek just forked it and changed in the pen settings the order of loading js scripts. thats all
@zaturek i was not kidding you when saying the order of loading external libs is important.
@zaturek I'm getting data back in the console just fine with your pen. As @sorinr recommends, change the order of your script loading to stop this warning from showing up in the console: bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery, or remove bootstrap.min.js entirely from your pen since you aren't using it in your code.
If you want article content instead of just the titles, replace the title= at the end of your url with &list=search&srsearch=.https://en.wikipedia.org/w/api.php?action=query&format=json&callback=?&prop=links&pllimit=max&list=search&srsearch="
@sorinr , @TylerMoeller I don't know why, maybe cos I'm in work and the network settings or something else don't let it happened. But even with your fork, I don't get the right data. Whaterver I'm doing. I deleted the bootstrap from my js settings. But still...
guys why isnt dropdown working on codepen.io? i did all the steps correctly but it isnt working
@zaturek You can try from a phone perhaps - a different network to verify? Your pen is returning a JSON object for me just fine.
@zaturek do you get any feedback from js if you just write a console.log("Hello") ?
@TylerMoeller I'll try it from home I guess...
@sorinr , @TylerMoeller Thanks guys!
:warning: zaturek already gave sorinr points
zaturek sends brownie points to @sorinr and @tylermoeller :sparkles: :thumbsup: :sparkles:
@zaturek it may be a problem with your work network restrictions. i don't know. imagine we cannot reproduce your environment :)
guys on a navbar active <li> how can i change the color under it?
@lukearthwalker background-color: #your_hex !important to override the bootstrap default.
but it doesn't change the color under it only the "top" one
@lukearthwalker ciao. can you post the pen link if you have it on codepen?
there
@lukearthwalker this is what u want?
what the hell is that btw?
that background stuff navbar-default .navbar-nav>.active>a{
background-color: #99ffff !important; this
background-color: #99ffff !important; this
its for identifying your element and class coz by id as you wrote it no chance:) "id=name " probably you wanted id="name" and then just replace all that navbar.... bla bla bla with #name :)
I was working on my portfolio project challenge and after a certain point, I wasn't able to scroll in my page and I don't understand why...I did not modify anything. Also, the links don't work anymore, something is strange...this is the project: http://codepen.io/DanielStoica/pen/RGgWzB
@DanielStoica85 on line 3 in HTML panel you have this
<im<nav class = "navbar navbar-default navbar-fixed-top">remove <im it will work
everything was working just fine...
now the whole page is messed up...wtf?!?
@DanielStoica85 did you remove <im this?? i still see it
@vinaypuppal nevermind, I fixed it, thanks!
danielstoica85 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
i was thinking about function let call it
calculate that takes a string like this 5+5 or 5*5 and returns expected result. And i came to this fucntion. What do you think about it. Can you make it more elegant? const calculate = (expression) => {
const re = /[-+/*]/;
const o = {
addition: (a, b) => a + b,
subtraction: (a, b) => a - b,
multiplication: (a, b) => a * b,
division: (a, b) => a / b
};
let output = expression.split(re).map(n => Number(n));
switch(true) {
case expression.includes('+'): {
return output.reduce(o.addition);
}
case expression.includes('-'): {
return output.reduce(o.subtraction);
}
case expression.includes('*'): {
return output.reduce(o.multiplication);
}
case expression.includes('/'): {
return output.reduce(o.division);
}
}
};
calculate("5+5"); // 10
calculate("5-5"); // 0
calculate("5*5");// 25
calculate("5/5");// 1
@dagman
const calculate = (e) => {
const nums = e.split(/\W/g).map(n => Number(n)),
op = e.match(/\W/g);
return op == '+' ? nums[0] + nums[1] :
op == '-' ? nums[0] - nums[1] :
op == '/' ? nums[0] / nums[1] :
nums[0] * nums[1];
}
calculate('11*11')
@jdtdesigns One doubt
/\W/g this does not cover calculate('11.1*11') i think
@dagman, @vinaypuppal
const calculate = (e) => {
const nums = e.split(/[^.\w]/g).map(n => Number(n)),
op = e.match(/\W/g);
return op == '+' ? nums[0] + nums[1] :
op == '-' ? nums[0] - nums[1] :
op == '/' ? nums[0] / nums[1] :
nums[0] * nums[1];
}
console.log(calculate('11.1*11'))
works with this ;)
vinaypuppal sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 623 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
@jdtdesigns @dagman Not sure what the ultimate goal/requirement is, but neither solution works with negative numbers. Order of operations isn't working either (e.g. 35-5*5=10)
@TylerMoeller It's not meant to be a solution for multiple operators ;)
wnbaorbust sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 736 | @sorinr |http://www.freecodecamp.com/sorinr
@nabins13 Is this a template? It looks like you have used a lot of code that is the same as this pen: http://codepen.io/jbgolatkar/pen/ZpZVNr?editors=1010
i liked it though
@nabins13 Be sure to attribute the original author of the code: https://www.freecodecamp.com/academic-honesty
m planning to change it after i learn a lil bit more of other things
Usually people put it in the footer of the website and perhaps in code comments as well
hey @TylerMoeller here it is http://codepen.io/nabins13/pen/vXmPGJ
check this out is this how we mention the author
??
Hey guys, long time no see.. struggling with JS Objects, particularly checking if a property exists or not. Any clues are appreciated
@nghm use
obj.hasOwnProperty(prop) for checking if a prop exists or not in obj object
@nghm
obj.hasOwnProperty(prop) returns Boolean value i.e either true or false So use if condition to check for that
nghm sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 589 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
@dagman And is it for calculator Project ??
@vinaypuppal i am not saying about "5+5" i were saying about "5 + 5"
@dagman oh okay space, his Regex doesn't look for spaces
@nghm .hasOwnProperty will return true or false so you need to use that as a test to see if that property exists and act accordingly.
MDN is your best friend in all things javascript
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
MDN is your best friend in all things javascript
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
@dagman if its for calculator Project then you can use JS built in function
eval('5 + 5')
nghm sends brownie points to @alhazen1 :sparkles: :thumbsup: :sparkles:
:cookie: 382 | @alhazen1 |http://www.freecodecamp.com/alhazen1
Anyone have any idea why this works in my browser on my computer but not on my phone? http://codepen.io/Dirtier/full/zKzArW/
When I open it in Chrome on my iPhone the button to get a new quote doesn't work
Anyone out there with an iPhone willing to test it? Maybe it's just my phone
@vinaypuppal thanks for looking at it
dirtier sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 590 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
@Dirtier You can debug by connecting your phone to PC/laptop and in PC/laptop chrome browser open
chrome://inspect/ and see in console if any errors
@Dirtier in dev tools I'm seeing this error message Uncaught SyntaxError: Unexpected token =
about this line
about this line
const getQuote =
(data = { cat: 'famous' }) =>
@Dirtier The quote button works fine for me on Safari and Chrome. iPhone 6, iOS 10.
@nabins13 You may want to talk to the author, there is just too much similarity in the code IMO and I'm a bit paranoid about this stuff.
@TylerMoeller @Dirtier may be the problem is with his Browser version as @alhazen1 showed error message about
He needs to Transpile code to ES5 version if he to support old browsers
Fat Arrow Functions which are not supported by that browserHe needs to Transpile code to ES5 version if he to support old browsers
Hmm, arrow functions seem to be pretty well supported except on IE and Opera Mini: http://caniuse.com/#search=arrow%20functions
http://codepen.io/camnicklaus/full/gwmoxp/ I'm about to turn this in...anyone have any quick comments...I gave up trying to align the temp toggle button...and the page is sluggish...maybe because of the large images. when i come back to it, I'll restructure how they load so I can maybe resize them first or??
@Dirtier - it seems to be working fine on my iphone, as well. Popping up new quotes with the "Quote Me' button...
@Dirtier - it does pop up two Twitter tabs, both with the same quote, even on desktop...
@khaduch i see only one Twitter share tab open when i click Tweet btn @Dirtier :smile:
Most people I've asked only get 1 tab. I wonder why that button won't work on my iPhone then. That's so weird
Yea I only get one too. I'm using Chrome
dirtier sends brownie points to @vinaypuppal and @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1733 | @khaduch |http://www.freecodecamp.com/khaduch
:warning: dirtier already gave vinaypuppal points
@jdtdesigns this works for me either i put
i have borrowed you epic return stuff :smile:
10.5 + 2 or 10.5+2i have borrowed you epic return stuff :smile:
const calc = (exp) => {
const re = /[-+/*]/;
const list = exp.match(/\W/g);
let nums = exp.split(re).map(n => Number(n));
return list.includes('+') ? nums[0] + nums[1] :
list.includes('-') ? nums[0] - nums[1] :
list.includes('/') ? nums[0] / nums[1] :
nums[0] * nums[1];
};
Hi everybody. Can someone here help me spot a problem in a line of code I think is not working?
Hey. Can someone explain me why do I need to put "name" in that input and also what autofucus means?
<input type="text" name="full_name" placeholder="FirstName LastName" autofocus="autofocus" value="">
Hello guys, do you still suggest to complete the Twitchtv json api although the problems that it has lately been presenting?
weatherImg = "<img src = '" + json.current_observation.icon_url + "' ";
@nevaIsDreaming - do you know that the value of
json.current_observation.icon_url is valid? Does it have the http:// or https:// included? A fully-formed path, in other words? Or are they giving you a relative path, perhaps just a jpg file, and you have to supply the other part? Any errors showing up in the console? Can you post a URL to your site?
@Dirtier - I have two tabs pop up - Chrome on windows 10, as well as on the iphone, safari browser... it seems to be consistent for me?
I believe that it is a fully formed path. I was using something very similar to that line of code in a previous version of the weather app, but I changed things around to try to include the F/C toggle and now the image is broken, but I can't figure out why. I thought it was that line.
Also, no console errors.
Hello everyone can anyone help me out with my code below. Here i'm making a list with ul and a tag's as :
<div ng-init="menuLists=['Home','About', 'Contact']" ng-init="anchorList=['home.html', 'about.html', 'contact.html']">
<ul>
<li ng-repeat="x in menuists">
<a href="ng-repeat="x in anchorList">
{{ }}
</a>
</li
</ul>
</div>
@nevaIsDreaming - I just added the
> in your weatherImg variable that you are constructing weatherImg = "<img src = '" + json.current_observation.icon_url + "' >";
Ahhh! I knew it had to be something simple like that, but I just couldn't see it. I made the change and it works. Thanks a bunch! @khaduch
nevaisdreaming sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1734 | @khaduch |http://www.freecodecamp.com/khaduch
This message was deleted
This message was deleted
.
.
.
.
.
Help pleas. They are telling me to use Twitchtv's sample api response provided at:
https://gist.github.com/QuincyLarson/2ff6892f948d0b7118a99264fd9c1ce8. How do I use such sample? do I just copy paste it?
no wiki entry for:
pleas they are telling me to use twitchtvs sample api response provided at httpsgistgithubcomquincylarson2ff6892f948d0b7118a99264fd9c1ce8 how do i use such sample do i just copy paste it