//Temperature convert on toggle
var tempSwitch = function () {
$(".onoffswitch").change(
function tempSwitchHandler () {
if (this.checked) {
alert("this works");
}
})
}
I've got a toggle switch on my weather app to switch between celcius and fahrenheit, so I'm trying to use jquery to do something when the toggle is switched
this isn't working so far, any ideas?
Hi!
I am making a navbar with bootstrap and needing to use images for the logos within the navbar menu.
Hello I am having issues adding images
either from css or HTML
although it is not showing any responsiveness
anyone else experiencing the same issue?
any thoughts on this?
@miriam-z did you link the bootstrap css?
I was having the same issue
yes its not a problem with the stylesheet, I feel its the images themselves
I have put each image within a seperate <li> tag and they are all in the <ul> tag
try <img class="responsive">
I have tried that, I mean they stay in a fixed position
and don't change position depending on the browser viewport size. An the positioning is not set to fixed either.
is it on it's own div?
this is the code
<section id="nav-header">
<nav class="navbar navbar-dark navbar-nav navbar-full" id="navbar-top">
<div class="container">
<!--<p class="logo"><img src="images/bb-logo.png" alt="bigbus-logo" style="width:266px;height:33px;"></p>-->
<!--<p class="locator"><img src="images/locator.png" alt="locator" style="width:30px;height:30px;"></p>-->
<!--<p class="ticket"><img src="images/ticket.png" alt="ticket" style="width:30px;height:30px;"></p>-->
<ul id="top-nav-list">
<li class="nav-item logo"><img src="images/bb-logo.png" alt="bigbus-logo" style="width:266px;height:33px;"></li>
<li class="nav-item locator"><img src="images/locator.png" alt="locator" style="width:30px;height:30px;"></li>
<li class="nav-item ticket"><img src="images/ticket.png" alt="ticket" style="width:30px;height:30px;"></li>
<li class="nav-item hidden-md-down">Find a Bus Stop</li>
<li class="nav-item hidden-md-down">Eng / Gpb £</li>
</ul>
</div><!--end:container-->
</nav><!--end:nav-->
</section>
it looks right to me
do u have any idea why I can't link images to my pencode?
somehow its not working so well
do you have your code
I can take a look
sure
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<title>Front-End Developer in Miami</title>
</head>
<body>
<div class="container-fluid">
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="navbar-left">
<li><img src=""></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav><!--Menu ends-->
<!--Main starts-->
<div class="jumbotron">
<div class="container">
<div class" row">
<div class="col-md-9">
<h1>Juan Angelogianopulos</h1>
<p>
<strong>Front-End Developer and graphic designer</strong>, with practical experience in digital marketing, branding strategy, and art direction; devoted to functional programming and information architecture.
</p>
</div>
<div class="col-md-3">
<img class="responsive" src="http://www.istockphoto.com/photo/responsive-design-mockup-gm516755340-89126979?st=_p_web%20designer">
</div>
</div>
</div>
</div>
<section id="portfolio">
<div class="container">
<h2>PORTFOLIO</h2>
<ul class="grid">
<li><img src=""></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</div>
<section id="contact">
<div class="container">
<h2>CONTACT</h2>
<form id="contactForm">
<div class="form-item">
<label for="name"></label>
<input id="name" type="text" placeholder="Name" required>
</div>
<div class="form-item">
<label for="email"></label>
<input id="email" type="text" placeholder="Email" required>
</div>
<div class="form-item">
<label for="phone"></label>
<input id="Phone" type="text" placeholder="Phone" required>
</div>
<div class="form-item">
<label for="message"></label>
<textarea id="message" rows="5" placeholder="Message" required></textarea>
</div>
<br>
<button type="submit">Send</button>
</form>
</div>
</div>
</div>
</section>
</bod
This is the part that shows a broken link
<div class="col-md-3">
<img class="responsive" src="http://www.istockphoto.com/photo/responsive-design-mockup-gm516755340-89126979?st=_p_web%20designer">
</div>
<img class="responsive" src="http://www.istockphoto.com/photo/responsive-design-mockup-gm516755340-89126979?st=_p_web%20designer">
</div>
@angelogianopulos you must use markdown
for that code
i.e. three backticks at the start and 3 at the end
on the right hand side of your comment box there is an M with an arrow pointing dowwards
it gives you the markdown options
so your question is why are the images not rendering?
yes
it shows a broken link
you have incorrect syntax
<p class="responsive"><img src="http://www.istockphoto.com/photo/responsive-design-mockup-gm516755340-89126979?st=_p_web%20designer"></p>
let me try that
try wrapping it in a <p> tag or <div> tag
you can't write img class=
let me know if it works
also are you pointing your url to the image on istockphoto itself?
have you not a local copy on your machine in your project folder?
yes it has worked for me in the past
okay
is not working
you could try through css
and the background-image url option
same thing
this is the url
issue
it looks like it
why don't you try to download the image into your project folder and link the image from your folder
have your tried adding a width and height
i will need to DL the project onto my cmputer
alt="image name" style="width:266px;height:33px;"
whatever dimensions you want the image to be
will try that!
try it and let me know
thanks @miriam-z for your help
angelogianopulos sends brownie points to @miriam-z :sparkles: :thumbsup: :sparkles:
:cookie: 249 | @miriam-z |http://www.freecodecamp.com/miriam-z
your welcome
I solved my problem by wrapping the images into a div instead
much better than the ul option
@0x0936 thanks
c0d0er sends brownie points to @0x0936 :sparkles: :thumbsup: :sparkles:
:star2: 1812 | @0x0936 |http://www.freecodecamp.com/0x0936
Working on the Simon Game, and after I was able to have the pattern play itself when the combo was updated, the buttons would not change color when pressed. In order the change their color, I used CSS classes like
.button:focus. However, they're not changing color after implementing the automated system
Here's a link to the CodePen
In the personal portfolio page, seems a little odd they require page navigation when it wasn't covered in the lessons. I have absolutely no problem reaching out and figuring it out on my own, but I guess I'm just curious if that's why something that wasn't covered is included as a requirement... to test our ability to grow and learn above and beyond what the lessons teach?
Anybody else having trouble getting their quote matchine to work in firefox?
Figured it out. Was using https to call http. Who knew?
Silly question, how do you send brownie points?
@TheTessaMurphy thanks
walidashri sends brownie points to @thetessamurphy :sparkles: :thumbsup: :sparkles:
:cookie: 231 | @thetessamurphy |http://www.freecodecamp.com/thetessamurphy
Just out of curiosity, what happens to the projects (like the tribute page) once we submit them? Is there any kind of feedback?
You guys have any idea why I cant style seem-ably anything through my javascript
https://codepen.io/GrantKnaver/pen/pNvyZE
here is my javascript...
document.getElementsByTagName("body").style.backgroundColor = "green";
any ideas
@grantknaver getElementsByTagName returns a collection
maybe try ```var elements = document.getElementsByTagName("body");
elements[0].style.backgroundColor = "green";```
gotcha but when I select an id it does the same
document.getElementsByTagName("body")[0].style.backgroundColor = "green";
^ that works
@jeremiahbiard try this document.body.style.backgroundColor = "green";
Sorry, meant @grantknaver -- try this: document.body.style.backgroundColor = "green";
Tessa's solution works as well :+1:
thanks
@TheTessaMurphy @jeremiahbiard thanks
grantknaver sends brownie points to @thetessamurphy and @jeremiahbiard :sparkles: :thumbsup: :sparkles:
:cookie: 232 | @thetessamurphy |http://www.freecodecamp.com/thetessamurphy
:cookie: 346 | @jeremiahbiard |http://www.freecodecamp.com/jeremiahbiard
in angular js Can we view the partials in the chromes sources tab ...as i am able to view my JS , CSS of a compnent only thing missing all the HTML partials ...i am also anle to view the index.html file but not the partials .....any suggestions on this?
shouldn't this generate a random color
var number = Math.floor(Math.random()*256);
rgb(number,number,number);
how about this...
var randomColor = rgb(Math.floor(Math.random()256) + "," + Math.floor(Math.random()256) +","+ Math.floor(Math.random()*256));
document.body.style.backgroundColor = rgb(randomColor);
document.body.style.backgroundColor = rgb(randomColor);
@grantknaver I use math random in my program. I have this: Math.floor(Math.random() *6 -- you might be missing the asterik is your first two math randoms.
That is an idea but... my selectors are giving me hell should this work or is it my computer
document.getElementById("id1").style.backgroundColor = "orange";
can someone tell me whats up with my JavaScript? im working on my portfolio page trying to create a nav bar, and the JS is throwing up a bunch of errors.
@grantknaver That looks like it should work.
ya... uggg
one problem after another
Hi...any one knows angular js?
@jax11000 What are you trying to do here?
@TheTessaMurphy trying to do the portfolio page challenge. specifically im trying to make a nav bar that when you click the button it jumps you to the corresponding place on the page... if that makes sense.
@jax11000 yes it makes sense, but you don't need the if statement at all. I'm curious why your doing this is in js. It can be done entirely in html and styled with css.
i was looking at ways to make a nav bar, as ive never done it before at all, and the instruction i read told me to do it.
@TheTessaMurphy so what youre saying is it will work fine without the javascript stuff i have written?
@jax11000 you can do the nav bar in css and html
But if you want it to collapse and stuff you could probably use javascript
@jax11000 comment out your javascript code and see if your nav bar works
@aarya1302 probably going to sound stupid but... how exactly would i go about testing that?
@jax11000 Yes, that's what I'm saying. http://www.w3schools.com/css/css_navbar.asp has a very good tutorial on how to create a nav bar. That's the first thing to do, just set up a navbar. Then, to get to different parts of your page, you give your div an id and in the navbar you call that id.
thank you, i feel like its going to take years to really know all this stuff lol @TheTessaMurphy
jax11000 sends brownie points to @thetessamurphy :sparkles: :thumbsup: :sparkles:
:cookie: 233 | @thetessamurphy |http://www.freecodecamp.com/thetessamurphy
I know this is a silly question, but how do people send brownie points?
i think its just when you "@" that person and say thank you
@jax11000 thank you.
thetessamurphy sends brownie points to @jax11000 :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @jax11000 |http://www.freecodecamp.com/jax11000
:)
xD
var obj = {
"somestuff":"someotherstuff"
};
$(document).ready(function() {
$("#getQuotes").on("click", function(){
$.getJSON(obj, function(json){
$(".message").html(JSON.stringify(json));
});
});
});
Can anyone help me with this
?
I have been trying to make the button get this json object but nothing happens when i press it
That's the project
@aarya1302 you don't need $.getJSON function to read your local obj. this function is trying to access the obj as an url and you get a 404 not found error
@sorinr what do i use instead?
@grantknaver Is this what you were looking for? backColor = "rgb(" + Math.floor(Math.random() 256) + "," + Math.floor(Math.random() 256) + "," + Math.floor(Math.random() *256) + ")";
document.getElementById("data").style.backgroundColor = backColor;
document.getElementById("data").style.backgroundColor = backColor;
@aarya1302 you can make your obj as an array of quotes and create a function that will random return a quote from the array. take a look at this example
@aarya1302 only that i'm returning quotes sequentially not randomly
Thanks @sorinr
aarya1302 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 820 | @sorinr |http://www.freecodecamp.com/sorinr
Nice quote machine btw
@aarya1302 its more a full around with xml. my original quote pen is: quotes
Hello World! :)
welcome to FreeCodeCamp @NitinNair89!
welcome back
Wow @sorinr
what's up?
That's a good looking website
How long did it take you to do that?
don't remember but i think no more then 30 min - 1 hour including the api's research time
OMG
You are an expert
nope. i'm not. but having some prev experience with html/css/js helped me
does anybody know why my
.timer div include work and break 4 small buttons even timer div is behind the work and break buttons? code is very short, thanks, http://codepen.io/c0d0er/pen/eBmgQP?editors=1010
@c0d0er I didn't understand your question :(
@NitinNair89
<div class='col-xs-12 col-sm-6 work'>
<h3>work</h3>
<button class='wo1 small'>-</button>
<span class='time2'>2</span>
<button class='wo2 small'>+</button>
</div>
<div class='timer'>// this div is under above tags, why this div include the above tags?
@c0d0er include means what exactly? I put a color for the break class and all div appear to be separate:
.break{
background-color:green;
}
Hi guys, why is my variable assignment not working in this code?
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){
var lat = position.coords.latitude;
});
}
console.log(lat);
navigator.geolocation.getCurrentPosition(function(position){
var lat = position.coords.latitude;
});
}
console.log(lat);
@NitinNair89
why this div include the above tags? should be why this timer div's background color include the above tags?
@c0d0er Did you see my css?
@NitinNair89 the timer div blue background color does cover the work and break button area
@NitinNair89 i saw that
@c0d0er That's because your bootstrap grid is broken. Whenever you exhaust the total number of columns in a row for a specific device screen, you need to add a clearfix and visible class like below:
<div class='col-xs-12 col-sm-6 break'>
<h3>break</h3>
<button class='br1 small'>-</button>
<span class='time1'>1</span>
<button class='br2 small'>+</button>
</div>
<div class="clearfix visible-xs-block"></div> <!-- Since xs has exhausted 12 columns -->
<div class='col-xs-12 col-sm-6 work'>
<h3>work</h3>
<button class='wo1 small'>-</button>
<span class='time2'>2</span>
<button class='wo2 small'>+</button>
</div>
<div class="clearfix visible-xs-block"></div> <!-- Since xs has again exhausted 12 columns -->
<div class='timer'>
...
...
Similarly, if other device screens also exhausted their columns, you can combine the clearfix classes like:
<div class="clearfix visible-xs-block visible-sm-block"></div> <!-- xs and sm has exhausted 12 columns -->
@NitinNair89 i add this <div class="clearfix visible-xs-block"></div>, but still shows the same thing
@c0d0er I added, and it shows correct for me
could you give me your codepen link?
ok, let me fork it
your current code will work only for 'xs' and 'sm'. For larger screens add 'md' and 'lg' as well
@c0d0er
the timer div still include the work and break buttons in your code
@NitinNair89 the timer div still include the work and break buttons in your code
@NitinNair89 thanks
c0d0er sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 344 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
@c0d0er refresh the pen
@NitinNair89 refreshed same
@NitinNair89 now changed
I did not give any background colors for break and work.. also added the "lg" column
@c0d0er this is what u want example ?
Shall I delete my pen? I hope it helped you
@sorinr yep, thanks
c0d0er sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 821 | @sorinr |http://www.freecodecamp.com/sorinr
@NitinNair89 sure, please
:)
@c0d0er welcome
@sorinr why do you add the
row class of div which wrap the work break buttons and big circle area?
@c0d0er coz this is the normal structure of the grid in bootstrap. the row can contain columns
@sorinr what is the consequenz if not add row? or the benefits to add row?
You get a messy grid that won't work always
and undetectable problems with the layout
@NitinNair89 @sorinr got it, thanks!
c0d0er sends brownie points to @nitinnair89 and @sorinr :sparkles: :thumbsup: :sparkles:
:warning: c0d0er already gave nitinnair89 points
:warning: c0d0er already gave sorinr points
@NitinNair89 @sorinr i added only row div wrap the work break button, it fixed the issue too
That's good, but for a fully functional grid you need
container > rows > columns hiearchry
@c0d0er if you want to use bootstrap i would just stick with the docs here http://getbootstrap.com/css/#grid to be sure the all layout is going to work as expected
@NitinNair89 do i need to always use something like this?
<div class="container">
<div class="row">
<div class="col-*-*"></div>
@sorinr thanks
c0d0er sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: c0d0er already gave sorinr points
@NitinNair89 do i need to add
<div class="container"> before <div class='row'> in the following code? <h1 class='title'>Pomodoro Clock</h1>
<div class='row'>
<div class='col-xs-12 col-sm-6 col-md-6 col-lg-6 break'>
<h3>break</h3>
<button class='br1 small'>-</button>
<span class='time1'>1</span>
<button class='br2 small'>+</button>
@c0d0er Yeah, I usually follow that :D
Think of container like a wrapper or something that will hold everything
So yes, you can add container before the row in your above code
@NitinNair89 is this correct?
<h1 class='title'>Pomodoro Clock</h1>
<div class="container">
<div class='row'>
<div class='col-xs-12 col-sm-6 col-md-6 col-lg-6 break'>
<h3>break</h3>
<button class='br1 small'>-</button>
<span class='time1'>1</span>
<button class='br2 small'>+</button>
yes, for a wider width, you can use
container-fluid
@NitinNair89 why do i need add this? i already add container-fluid in the beginning e.g. the following
<div class='container-fluid text-center'>
<h1 class='title'>Pomodoro Clock</h1>
<div class='row'>
<div class='col-xs-12 col-sm-6 col-md-6 col-lg-6 break'>
<h3>break</h3>
Then you don't need to add
Sometimes, you might need different containers inside different
<section> tags and a common full width container to wrap every other containers you have in your code. :)
@c0d0er you can also take a look here https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for using flexbox instead of bootstrap's grid
Any one knows any IDE which provides localhost like webstorm ???
but is free to use unlike webstorm?
but is free to use unlike webstorm?
@sorinr @NitinNair89 got it, thanks!
c0d0er sends brownie points to @sorinr and @nitinnair89 :sparkles: :thumbsup: :sparkles:
:warning: c0d0er already gave sorinr points
:warning: c0d0er already gave nitinnair89 points
@Rakesh18754 For HTML,CSS,JS I use Brackets
You can also simple use Eclipse with Tomcat or install WAMP server
@NitinNair89 when i add
<div class='container'> before <div class='row'>, my work and break buttons come closer each other, the distance of the work and break buttons getting shorter, why?<div class='container-fluid text-center'>
<h1 class='title'>Pomodoro Clock</h1>
<div class='container'>
<div class='row'>
<div class='col-xs-12 col-sm-6 col-md-6 col-lg-6 break'>
<h3>break</h3>
<button class='br1 small'>-</button>
<span class='time1'>1</span>
<button class='br2 small'>+</button>
</div>
@Rakesh18754 or u can use node.js
@c0d0er That's because the container class adds margins. Try the same with container-fluid
@NitinNair89 even with container-fluid there is little margins, but if without any container or container-fluid wrapping work break buttons, then it doesnt have any margin, why?
That's how your browser interpret it. You can add your own class and define some specific margins without using the containers.
@c0d0er There's always a default margin unless you specify
margin:0 in your CSS
@NitinNair89 you are correct, i think that is because i used margin: 0 somewhere
:P
anyone know flexbox well, trying to get a flexbox with a title and underneath a image on the left and a UL on the right middle.
i want put the timeline below the thumbnail do have any suggestion so my page will look a little better?
Could someone help me out with this? Click on a text area to put whatever the form overlaps my footer
@joshandevera Set some height and width for the image
@Nifled Didn't understand clearly
@NitinNair89 Did you see the screenshot?
here it is again
@NitinNair89 should i do that on css or is there a bootstrap class for that?
do it in css @joshandevera Also add the responsive image class from bootstrap
@Nifled how did you code your footer? absolute / fixed?
@ricky11 something like: example ?
@NitinNair89 It's absolutely positioned
here's what is looks like normally, then what it looks like when i click on the text area
@sorinr hi, once you set flex-direction: column;, how do you then get the image and the paragraph on one row?
doest flex-direction: column; mean it all has to be in columns?
@ricky11 display: inline-flex;
@Nifled Yeah i guessed. The absolute position causes this. What if you remove the absolute positioning?
@sorinr thanks, i will look in to what inline-flex does
ricky11 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 823 | @sorinr |http://www.freecodecamp.com/sorinr
@NitinNair89 I've tried that, and many other things too :worried:
But it always does the same thing.
@Nifled I am not sure, can u share the code?
@sorinr instead of display:inline-flex, we can also use float:left also?? or no?
@ricky11 with flexbox no need to use floats
@ricky11 here some good video on flexbox:video
@sorinr cool.. do you know how flexbox makes a image responsive and scales it down when viewport width is reduced?
http://codepene.io/joshdv92/pen/ZBYpQw how can i center and resize the photo
@ricky11 here a pen(not mine) to inspire for responsive imgs: pen
@sorinr cool. i checked it out, but not sure which part of the img css makes the image responsive, just image:100%; ?
hi guys, Let me know your thoughts on this portfolio project, thanks http://codepen.io/Nikhilmufc7/full/MbYaGX/
@nikhilmufc7 move your img from imgur to someother hosting place. codepen does not work with imgur
does anyone know how i can send someone my gitter contact info ?
Hi campers, done with half part of tic tac toe. Any feedback?
Only two players game is working as of now.
http://codepen.io/parvinder09/full/LRogZE/
Only two players game is working as of now.
http://codepen.io/parvinder09/full/LRogZE/
Hai guys! I want to make my Portfolio page but can't make work my jQuery. Can somebody check what is the problem?
@Recas the last one: type="text/javascript" src=".../file.php"? Don't know if that's correct
@Recas jQuery works for me on your site. So I guess your code has an error
the php thing is just the webhost added
@Recas k
so, in your browser the background is now red?
nope
I just executed a jQuery function with the developer tools
and this one worked
so u can use libary
that's something
xD
=D
@Recas docoument
is not defined :P
(write document instead)
poh afoasf al -.- xd
thx
fk my life
xd
and this $("button").addClass("animated bounce"); jQuery animations no longer support?
@Recas try include jQuery UI
Don't know if that's what you need but it's worth a try ;)
@nikhilmufc7 Looks good!The only problem I'm seeing is that your about-section image is not showing.
@Recas the 'animated bounce' class is not from jQuery but from 'Animate' CSS by drayden
include the animate.css file in your code
bounce is also in jQuery UI: https://api.jqueryui.com/bounce-effect/
/or was, I don't know
@Otto-AA That doesn't look good :P
@NitinNair89 But it bounces ^_^
@Otto-AA Yeah, but still.. :P
@NitinNair89 Yeah, I know :)
:laughing:
yea, i'm tried to include the jquery ui cdn but nothing happend, so the solution will be the animate.css as you mentioned Nitin
thought it's a jquery thing because of freecodecamp basic jquery lesson
it might be as @Otto-AA says
@Recas You can find bounce animations everywhere :smile:
@Recas If you want to see more of these: https://codepen.io/search/pens?q=bounce&limit=all&type=type-pens
yes, but jquerry's version seems pretty repulsive
:D
mkey, thanks the helps
docoument :clap: :D
;)
finally it bounce XDD
now I can do the real work
libaries working
@Recas I was working hard, for hours and hours, and now... it bounces =D
actually... it almost true
I suffered evening too, to make this libaries working
anyone help me , Bastien VINH <--- you guys know him ?
@buiphuking nope. but here his LinkedIn page if that helps and is the right guy: https://www.linkedin.com/in/bastienv/en
Anyone can help me with positioning my slider for "Strict" in the Simon game? The slider is on top of the text "Strict" and i can't move it. Here is the pen: http://codepen.io/hristijankiko/pen/KNwVWr
Does anyone see where the error is coming from? http://codepen.io/DanStockham/pen/vXVQNO?editors=0010
It's not so much a syntax error then it is with an error in React.
Something is coming up as undefined.
@DanStockham I couldn't help you on that have not done react yet...sorry
@hristijankiko Remember when you want to
absolute position, the parent should have the position relative so the absolute position can take effect within the parent content!
@U-ways The .switch class is the parent of all the absolute elements for the slider. Am i missing somthing?
@hristijankiko 1 moment I will have a look now :D
@U-ways Okay thanks :)
hristijankiko sends brownie points to @u-ways :sparkles: :thumbsup: :sparkles:
:cookie: 547 | @u-ways |http://www.freecodecamp.com/u-ways
how ushers life tis cold cold morning?
@hristijankiko
Your parent element was too small :D Below are the changes made:
.switch
width: 100px /* increased width by 40px */
.slider
width: 50% /* decreased width by 50% */
top: 0
right: 0 /* Removed left so it will settle at the right */
bottom: 0
@hristijankiko Doesn't look best. But this is just for outlining what you need to do! You will be able to figure out the rest from here!
@U-ways Okay i will try to fix it :)
@hristijankiko Is that invoker as your avatar? :D (played Dota1/2 for over 6000hours back in the good old days :P Invoker was my favourite hero!
hiya @F22rapt long time no see :)
hai
been thru a lot lately hehe. just now able to get back to studying bootstrap
cool
love it when things click :D
:P
any advice from the group are most welcome for my personal page : http://codepen.io/ricky11/full/VmYWdw/
@ricky11 the arrow has a dead link (#)
@Otto-AA oh its just a fa fa icon arrow, no link there.
then don't put it in <a>...</a> but instead give it a CSS of cursor:pointer;
And tbh, it looks really overloaded. So it's quite nice, but not for a real Personal Page ;)
GM guys, I am struggling with aligning social media codes
@angelogianopulos GM=?
@Otto-AA good morning maybe GM?
yes good morning
Ok, 2pm for me ;P
<div class="col-md-6 right">
<h2>AROUND THE WEB</h2>
<ul>
<li><a href="#" class="button social">
<i class="fa fa-fw fa-linkedin"></i> </a>
</li>
<li><a href="#" class="button social">
<i class="fa fa-fw fa-github"></i></a></li>
</ul>
</div>
<h2>AROUND THE WEB</h2>
<ul>
<li><a href="#" class="button social">
<i class="fa fa-fw fa-linkedin"></i> </a>
</li>
<li><a href="#" class="button social">
<i class="fa fa-fw fa-github"></i></a></li>
</ul>
</div>
I am in the US eastern time 9am here
@angelogianopulos do you have a codepen with it?
yes
@angelogianopulos have you tried using flexbox to align ? display:flex align-items:center something like that. sadly flexbox is not taught here.
can you share that link, makes it much easier for me ;)
sure
@angelogianopulos flexbox is a nice thing to learn. Another way would be simply:
footer li { display: inline-block; }
that aligned my icons!! But it won't change the color to white
@angelogianopulos What do you want to be white?
no worries I fixed it!
Thanks for your help @Otto-AA
angelogianopulos sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 361 | @otto-aa |http://www.freecodecamp.com/otto-aa
Hi i have problem with getJson dont work can someone help me?
$.getJSON("http://ip-api.com/json", function(ipJson){
var url = "http://api.openweathermap.org/data/2.5/weather?q=" + ipJson.city + "&units=imperial&APPID=090df93fca915b0729df1d32d8d37595";
$("#data").html(url);
});
$.getJSON("http://ip-api.com/json", function(ipJson){
var url = "http://api.openweathermap.org/data/2.5/weather?q=" + ipJson.city + "&units=imperial&APPID=090df93fca915b0729df1d32d8d37595";
$("#data").html(url);
});
dont show url
@marcinkluska do you have it in codepen?
what's your console.log messages say? @marcinkluska
probably cross browser origin issue @Otto-AA ? What you think?
@NitinNair89 I wouldn't know why there should be one.
But tbh I mostly start thinking about these problems when I've got a Pen to work with O.o
most of them think so :P
Because that's pretty much guessing
:)
:laughing:
Is there any list for all smileys?
just type : and some alphabets :P
:walking:
:alien:
lol
hahahaha
what advantages are gained from nesting grid columns?
a complicated but stable grid
dammit coding, stop being complicated!
dammit painters, stop using colors ;P
yeah exactly!
:panda_face:
:koala:
:department_store:
:tada: I hope I don't get blocked for spamming emojis :P
sensitive bot is sensitive?
i don't know
there is sooo much to go through
there won't likely be an end of learning :laughing:
can someone give me good docs on how to build a chatbot?
but the more you do, the better results you'll see
@NitinNair89 not really, but that could be interesting: https://medium.freecodecamp.com/creating-a-chat-bot-42861e6a2acd#.a2jlr8nrq
im sitll stuck on the portfolio <.>
i duno what i should do for a layout/..
maybe some inspiration for you @F22rapt http://www.onextrapixel.com/2013/01/23/60-clean-and-simple-examples-of-portfolio-design/
tanks
@Otto-AA Thanks for the article, had a lot of info, but i can't create one by reading it :(
nitinnair89 sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 362 | @otto-aa |http://www.freecodecamp.com/otto-aa
hi, using twbs, at small screens the left button list become unclickable, can't find how to fix it http://codepen.io/SultanCodeCamper/full/JboXwv/
@NitinNair89 But you can get inspired and many ideas for layouts and stuff. And if you need you can visit the page (if available) and inspect the code ;) Thought you meant something different
making the next twithc chatbot?
twitch*
@Otto-AA I wanted to build a simple custom bot for work (I have managed to build one using simple file reading techniques with fixed set of commands) and it is not human-like .. I know NLP is way far too much for me right now :(
@NitinNair89 you could do some kind of console instead, where you type a command like google abc and then it executes it. That would be a bit easier :)
Anyway, buy guys
@Otto-AA Yep, did that ;) bye @Otto-AA see ya later
bye
ah wait i twas late
so if i make a nav bar in which each section is on another page, would that mean i have to create seperate pages for each?
you can do it in same page @F22rapt
this is what i'd like to do http://jeremypeters.co.uk/ with my buttons
@F22rapt that's different pages per section..and different folders too (for SEO) ..each folder probably having an index.htm/html or index.php file (that's why you can't see the file name in the URL)
folders..?<.>
yea
when you click the menu, you can see the change in URL
if you check my website, i have made it in single page so the URL won't change :)
Don't think much
<.> eh
ar eyou tlaking like a uhm..scroll?
yep
ok
i type so gud 10/10
:P
does container fluid automagically center headers?
nope
hmmm ok
Maybe im jsut missing something. im not seeing where in the code they center it
pen?
text-center class?
oh no its not centered. derp. just the preview image that looks that way xD
margin:0 auto ?
lol
ok
xuse me :D
excused :D
would Position abosolute be a good way to move my headers down the page?
You can.. but not good for responsivesness.. though it depends
*responsive-ness
@F22rapt @NitinNair89 i think moving navigation to the bottom on desktops its kinda bad UX because when u first look at a page you always see the top half of the page and then you look down at the bottom of the page. hope it makes sense
wait who said anything about moving nav bar to the bottom?
sorry when you said headers i was imagined the nav part :)
xD no probs useful information is useful nontheless
hey, everyone! can i ask someone for help with Bootstrap & Navbar collapsing? can't fix it in Portfolio task :\
i can't make examples from getbootstrap.com to work
still learning bootstrap ymself :(
@kolyambo Did you import jquery and bootstrap files?
your jquery file should be before the bootstrap one
@NitinNair89 MATE, YOU SAVED ME :D thank you a really lot :)
kolyambo sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 346 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
it work now
Hi guys. I am able to login IN codepen.io.
Through the freecodecamp given link
@kolyambo welcome :)
@NitinNair89 Do you have your console somewhere in the internet?
I would love to see it :)
console?
@Otto-AA
@NitinNair89 The thing witch google commands? Didn't you say you did one
oh that! @Otto-AA I don't. it's at work. Will upload it when i get time :)
@NitinNair89 ah ok. :smile:
but it's easy
it's just like how to add the tweet button to the quotes machine
@Otto-AA
So when I add a div to my site for a new section it doesnt separate the divs. When I put a new heading inside the new div it creates a gap. How can I fix that?
I've got it thanks
what are some basic/intermediate react apps i can do since i find game of life hard
@burningPluto any h1,h2, etc are having by default some margins. take a look to this example example just add to h1in css margin: 0; to see the effect
Can anyone help me with this: https://gist.github.com/BehindTheMath/15ab3dd9417e6ef146f32db8633ee6a8
Even though funcTwo is a named function, it's not scoped locally.
@BehindTheMath u get a ref error coz the funcTwo is attached to the var obj. its like writing:
var obj ={ funcTwo: function(){console.log("funcTwo called.");}};
I'm using firefox to work on my weather app because chrome doesn't allow geolocating. In firefox I keep getting this error. --Error: Bootstrap's JavaScript requires jQuery -- but I've loaded jquery both into my css and my js settings within codepend. I'm stuck.
@TheTessaMurphy did you load it before bootstrap?
@TheTessaMurphy chrome allows geolocation only that ou have to run the pen or app over https not http
no, should I have?
give it a try ;)
@atharvajava
function palindrome(str) {
// Good luck!
str=str.toLowerCase();
str=str.replace(/[^\Wa-z0-9]/gi," ");
str=str.replace(/[.,\s]/g, '');
str=str.replace(/\//g, "");
str=str.replace("(", "").replace(")", "").replace("-", "");
var a=str.split("");
a=a.reverse();
a=a.join("");
if(str===a){
return true;
}
else {
return a;
}
}
palindrome("0_0 (: /-\ :) 0-0");
hi guys any idea what i am doing wrong here
@Otto-AA No, still getting the error message. Plus this: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can remove its sandboxing. -- My quote machine works just fine in firefox, and also uses jquery, so maybe it's my code. Also, now that I think about it, I'm not using bootstrap. I haven't done any styling at all.
@TheTessaMurphy Can you link the pen?
I've got a bunch of geolocation stuff commented out because I want to get the open weather api working first. I've also removed bootstrap from javascript, at least for the moment.
@TheTessaMurphy In the js-settings, put your bootstrap.min.js at the bottom and it should work :)
@TheTessaMurphy what @Otto-AA is saying is that you have to load js libs like jquery first, then bootstrap.js after, then bootstrap-ui.js , etc
@sorinr yes, thank you I got that. I've stopped getting the error code but am still getting the warnings and my code still doesn't work.
thetessamurphy sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 824 | @sorinr |http://www.freecodecamp.com/sorinr
@Otto-AA thank you
thetessamurphy sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 363 | @otto-aa |http://www.freecodecamp.com/otto-aa
Although I am getting undefined which I suppose is a step in the right direction.
Hi all, I'm working on the Random Quote Machine. I have it working but wanted to make some changes locally. I exported to zip from codepen. In the local copy codepen generated however, my new quote button does not work. The tweet button does work so codepen linked the script file correctly not sure what I need to do make the new quote button work. I'd appreciate any help. My codepen is here http://codepen.io/jayceleathers/pen/WoNQVK
getting closer checked the console and I'm getting this when I press the button
'Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_=1478456954914. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘http://null’).'
'Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_=1478456954914. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘http://null’).'
good evening all, any wordpress wizards on???
wordpress/ajax
no one???
@wimhuiskes not really :/
Could someone tell me what I'm missing in this code? I'm not getting anything.
$("#btnWeather").on("click", function(){ $.getJSON("http://api.openweathermap.org/data/2.5/forecast/daily?q=api.openweathermap.org/data/2.5/weather?q=Bremerton&APPID=ee6596241130f193adf1ba90e625cc10",function(result){
alert("Weather: "+ result.main.temp);
});});
@TheTessaMurphy Are you sure that the key is valid?
(Just opened http://api.openweathermap.org/data/2.5/forecast/daily?q=api.openweathermap.org/data/2.5/weather?q=Bremerton&APPID=ee6596241130f193adf1ba90e625cc10 and got
(Just opened http://api.openweathermap.org/data/2.5/forecast/daily?q=api.openweathermap.org/data/2.5/weather?q=Bremerton&APPID=ee6596241130f193adf1ba90e625cc10 and got
{"cod":401, "message": "Invalid API key. Please see http://openweathermap.org/faq#error401 for more info."} as a result
Try this @TheTessaMurphy , I used it with my API Key and it worked for me.
@TheTessaMurphy this is the JSON that I received
{
coord: {
lon: -122.63,
lat: 47.57
},
weather: [
{
id: 804,
main: "Clouds",
description: "overcast clouds",
icon: "04d"
}
],
base: "stations",
main: {
temp: 285.96,
pressure: 1017,
humidity: 87,
temp_min: 284.15,
temp_max: 288.15
},
visibility: 16093,
wind: {
speed: 4.6,
deg: 180
},
clouds: {
all: 90
},
dt: 1478456100,
sys: {
type: 1,
id: 2923,
message: 0.1609,
country: "US",
sunrise: 1478444650,
sunset: 1478479417
},
id: 5788054,
name: "Bremerton",
cod: 200
}
@SEGrooms Still not working on my pen. Although if it worked for you, that's good, right?
Hello!
Does Anyone know how to change background color OnClick with smooth transition
@TheTessaMurphy copy and paste this into your browser URL: http://api.openweathermap.org/data/2.5/weather?q=Bremerton&appid=ee6596241130f193adf1ba90e625cc10
I'm aware on how to change color, but how do i make it a smooth transition
@Waqas909 add
transition: background-color 1s ease-in-out or something like that to the elements CSS
@TheTessaMurphy showed up when you pasted this link into your URL??
@Otto-AA Thanks, needed a start. I'll look into it!
waqas909 sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 364 | @otto-aa |http://www.freecodecamp.com/otto-aa
I got this. {"cod":401, "message": "Invalid API key. Please see http://openweathermap.org/faq#error401 for more info."}
Hmmm…you’re sure that you have the correct API key?
This is my key. I'll try it again. 8a874af5a7e56ffad7280ba108e941ef
@SEGrooms It worked! Thank you thank you thank you!
thetessamurphy sends brownie points to @segrooms :sparkles: :thumbsup: :sparkles:
:cookie: 376 | @segrooms |http://www.freecodecamp.com/segrooms
YAY!!! :D
you’re welcome! I was in your shoes like 4 weeks ago! Keep chugging along! :clap:
hello you help me with the code https://codepen.io/marcinkl1987/pen/pEPrLR
why #data dont change on url?
what is wrong?
@marcinkluska Because your $.getJson call fails
$.getJSON("http://ip-api.com/json").done(function(ipJson) {
console.log("done");
var url = "http://api.openweathermap.org/data/2.5/weather?q=" + ipJson.city + "&units=imperial&APPID=090df93fca915b0729df1d32d8d37595";
$("#data").html(url);
}).fail(function() {
console.log("fail")
});;
why is fail?
http://ip-api.com/json -> {"as":"AS29007 Petrotel's commercial IP network Chemikow 7, Plock Poland","city":"Płock","country":"Poland","countryCode":"PL","isp":"Petrotel Sp. z o.o.","lat":52.55,"lon":19.7,"org":"Petrotel Sp. z o.o.","query":"46.182.102.221","region":"MZ","regionName":"Masovian Voivodeship","status":"success","timezone":"Europe/Warsaw","zip":"09-400"}
@marcinkluska http://codepen.io/marcinkl1987/pen/pEPrLR
This just happened to me. Have you checked that your appid is valid? Also, you may want to change the name of your variable. url might be confusing things.
it works now thank you for help @Otto-AA
marcinkluska sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 365 | @otto-aa |http://www.freecodecamp.com/otto-aa
@TheTessaMurphy if you’re using Chrome, I highly recommend adding the extension JSONView for when you are looking at JSON in the browser.
Right now I'm using firefox but chrome is my usual browser. How do I add that?
Is it in developer tools?
On the right side of the URL form there are 3 dots
Click settings
Then extensions
Check the box next to developer mode at the top
oh, nvm
Click this and add it to chrome, lol
This should work for firefox https://addons.mozilla.org/en-us/firefox/addon/jsonview/
Wow, either firefox has become buggy or something's going on with my wifi. Chrome works fine, though.
@SEGrooms thank you again!
thetessamurphy sends brownie points to @segrooms :sparkles: :thumbsup: :sparkles:
:warning: thetessamurphy already gave segrooms points
You’re welcome! iIt helped me out with the API projects :)
@sorinr
Whoops.
@sorinr is there any way to separate the function in order to be able to call it directly elsewhere?
H?ey all
can somebody pls tell me how can i fix "about me" section's width. I want tomake it 100% but something is going wrong
@nitinraghav What's wrong with the section width?
@nitinraghav It looks fine to me.
@nitinraghav it looks fine to me too.
what's wrong?
it's not 100%
you can see an empty space on the right
@DanStockham @SEGrooms theres some empty space
which i want to remove
@nitinraghav I didn’t realize it popped up when you scrolled.
@nitinraghav You have extra margin on the right side
@nitinraghav set the
margin to 0. Or to be specific margin-right should be 0
@DanStockham tried margin-right: 0; did nothing
its still the same]
@nitinraghav in the
.about selector?
@nitinraghav change the div from .row to .container-fluid
@DanStockham
.about{
margin: 0px;
}
margin: 0px;
}
you need to ask about @someone!
type that
fixed
@nitinraghav it worked for me!
@DanStockham now i tried removing width:100%; and adding margin-right: 0; it worked
In Chrome, if I use https, I can get geolocation to work, but not the Open Weather API. If I use http, the weather api works but geolocation doesn't. Has anybody run into this issue and if so, found a workaround?
@SEGrooms did u remove width: 100%??
@nitinraghav if you just add
margin:0 in your .about selector that would work.
@nitinraghav nope, just switched from .row to .container-fluid
@nitinraghav The problem was there was extra margin on the right side.
@DanStockham margin: 0 worked too
@SEGrooms thanks
nitinraghav sends brownie points to @segrooms :sparkles: :thumbsup: :sparkles:
:cookie: 377 | @segrooms |http://www.freecodecamp.com/segrooms
@DanStockham thanks
nitinraghav sends brownie points to @danstockham :sparkles: :thumbsup: :sparkles:
:cookie: 514 | @danstockham |http://www.freecodecamp.com/danstockham
@nitinraghav No problem! :D
i guess i need to check out difference between container and container-fluid again.
@nitinraghav glad to be of help :smile:
container has a defined width
container-fluid will always take up 100% of the container that holds it.
that makes it quite clear..
Container has breakpoints such as: lg, md, sm, xs
Container fluid doesn’t have breakpoints and will always be 100% width.
better?
yes thanks
:+1:
also as u can see i dint use bootstrap for navbar.
reason being I cudnt find a way around to style a defaut or inverse navbar. is it something thats possible to do
.navbar-inverse will invert the colors of your navbar
It turns the navbar black
great.
i ll go through that link
@SEGrooms thanks agn
nitinraghav sends brownie points to @segrooms :sparkles: :thumbsup: :sparkles:
:warning: nitinraghav already gave segrooms points
np! :)
Hi everyone. I'm working on the twitch.tv api and having some trouble getting getting the json. If I put the url in the browser, I get it, but when I try to make the request in codepen, it isn't completing. Here's my code:
$.ajax({
dataType: "json",
url: 'https://wind-bow.hyperdev.space/twitch-api/users/tictac_hs',
success: function() {
console.log("wow!");
}
});
$.ajax({
dataType: "json",
url: 'https://wind-bow.hyperdev.space/twitch-api/users/tictac_hs',
success: function() {
console.log("wow!");
}
});
$.ajax({
dataType: "json",
url: 'https://wind-bow.hyperdev.space/twitch-api/users/tictac_hs',
success: function() {
console.log("wow!");
}
});
@bd1887 I was just making it easier to read
@bd1887 Does the twitch api need a key?
@bd1887 I don’t think that is the right request, because it isn’t returning data about the game.
@bd1887 One of the user stories is that your can see additional details about what they are streaming
@oppiniated It does, but that url is a pass-through given as part of the challenge
@SEGrooms In that case, I'd just replace /users with /channels, but neither are completing the ajax call
hello there
@bd1887 can you post the codepen link?
@bd1887 still thinking
@bd1887 have you gotten an API key?
@oppiniated sure but none of the js is up yet.
@SEGrooms Free Code Camp recommends using this url in order to avoid having to get an api key from twitch (I think it might be kind of complicated. I'm not sure.)
oh right!
error
"{"error":"Unprocessable Entity","status":422,"message":"Channel 'channel is unavailable"}"
Sorry @bd1887 , I forgot that they did that. I couldn’t get hyperdev to work, so I just got an API key. Twitch allows you to show it too, so you aren’t breaking any rules.
If you use an API key, you can make a request the usual way.
$.ajax({
dataType: 'json',
url: 'https://api.twitch.tv/kraken/streams/ESL_SC2',
headers: {
'Accept': 'application/vnd.twitchtv.v3+json',
'Client-ID': '1cif9hquapcfo1i4h9kcr5eubsrx5ek'
},
success: throw a dance part,
error: cry yourself to sleep
});
@bd1887 wish I could be of more help
@SEGrooms Oh ok. I was worried it might be hyperdev, so I tried to sign up for a twitch api key. But it requires that I fill in a Redirect URI... I'm not even sure what that is.
That will take you to your dashboard. I don’t remember anything about a URI
@bd1887 if you go to the link, you should be able to hit show key, and PRESTO!
@SEGrooms @oppiniated Awesome, thanks. It's working now. I won't have to cry myself to sleep.
:cookie: 323 | @oppiniated |http://www.freecodecamp.com/oppiniated
bd1887 sends brownie points to @segrooms and @oppiniated :sparkles: :thumbsup: :sparkles:
:cookie: 378 | @segrooms |http://www.freecodecamp.com/segrooms
@bd1887 haha! :+1:
Done with the challenges, too lazy to start with the projects :worried:
Hey, I just got to the build a tribute page project and.... I don't even know where to start. Does anyone have some good tips? I haven't really been doing this consistently so it's like all of the useful information I had been trying to remember has just disappeared from my brain >.<
@KeskahJune step1: take a deep breath
@KeskahJune step2: realize that you can’t do anything wrong
Haha, thank you
@KeskahJune step3: start putting in some html
@KeskahJune you can use the Bootstrap library you've been using on the previous challenges to help style your page
they have pretty good documentation and examples if you forgot a few things
@KeskahJune @coymeetsworld stole my punchline! ;)
sorry :)
@coymeetsworld @SEGrooms Thank you so much!!
keskahjune sends brownie points to @coymeetsworld and @segrooms :sparkles: :thumbsup: :sparkles:
:cookie: 379 | @segrooms |http://www.freecodecamp.com/segrooms
:star2: 1492 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
haha np!
:ok_hand: good luck with it @KeskahJune
@KeskahJune the biggest thing for me was not being scared of messing up the project. Will it look like a million bucks? Probably not, but you’re new!!!!
@KeskahJune Bootstrap did wonders for me. Best of luck!
@SEGrooms Exactly! That's the hardest thing to get over, hah, and thank you again! I'll get to it...
keskahjune sends brownie points to @segrooms :sparkles: :thumbsup: :sparkles:
:warning: keskahjune already gave segrooms points
yeah don't worry about it being perfect, just try to get something going and pass the User Stories
you can always go back and improve on it later
thats what i did on alot of my projects when i didn't dig deeper into CSS
I've made changes and heres my final portfolio, kindly comment/ suggest improvements. thanks
http://codepen.io/nitinraghav/pen/QGwaeP?editors=1100
http://codepen.io/nitinraghav/pen/QGwaeP?editors=1100
wow @nitinraghav that looks great!
The dropdown doesn’t close when clicked, but other than that it is excellent. Better than mine!
@SEGrooms thanks shawn. n also added bootstrap to this one. its responsive for small screens
nitinraghav sends brownie points to @segrooms :sparkles: :thumbsup: :sparkles:
:cookie: 380 | @segrooms |http://www.freecodecamp.com/segrooms
:)
I need to add some pretty photos to mine, lol
dropdown works fine for me
What browser are you using?
chrome
@nitinraghav I like the font choice
i would change the font color of My Work to something that contrasts the orange though
@SEGrooms i picked these photos from unsplash.com
@nitinraghav The buttons are working, but the menu isn’t closing when you click one. You have to manually toggle the icon-bars
also minor detail is when you hover over your buttons on your navbar the navbar height increases to make room for the underline
@coymeetsworld thanks. ya u rite it sort of mixes with BG ill change that
nitinraghav sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 1493 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
i would try to fix it so that it doesn't do that, but overall nice work
@coymeetsworld i hope you wouldnt notice height of navbar ;)
i tried fixing that but cudnt..
if you give it a fixed height it should work
@SEGrooms oh k i get what u mean
but not a big deal, its something you can always look at later
@coymeetsworld will try that
JavaScript more important to learn than that
@nitinraghav thanks for the photo link! These are excellent!
:cookie: 264 | @nitinraghav |http://www.freecodecamp.com/nitinraghav
segrooms sends brownie points to @nitinraghav :sparkles: :thumbsup: :sparkles:
@SEGrooms my pleasure sir :)
nice work @nitinraghav
suddenly the world seems lik a happy place... when ur code starts to work
hahhhaha
i was struggling from 2 days with it
@coymeetsworld thanks :)
nitinraghav sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:warning: nitinraghav already gave coymeetsworld points
yeah I know, felt like that when I got done with the last 2 D3 projects recently, and tic-tac-toe months ago
@coymeetsworld well I know who I’m talking to in a couple weeks!
hah yeah I'm around, usually
right now just procrastinating learning React
I’m just trying to zip through the last few frontend projects before they come out with the new curriculum!
I have 5 algos, and the advanced projects left!
yeah a little annoyed at what i was hearing, they're taking away alot of the meat
not sure if anything changed but sounds like they're making it easier
Don’t get ahead of yourself though! You won’t know until it arrives :)
there are some things that do get a little annoying and i understand, like Twitch did make some changes to their API and everyone project broke
but it wasn't a big deal to fix it, took me a few hours i think
Yeah the twitch challenge was pretty bad, but I’m looking forward to it.
The biggest thing that I don’t think FCC really predicted was how active of a community they would have.
i like that they're adding more sections
I have not done any of the projects yet.
just don't want them to remove projects, unless they're adding other projects as replacements
Breaking it up was a nice touch
They’re still going to have projects
but yeah well see
Anyways, I g2g for now. I’m still chipping away at my calculator.
@nankeuriseu thanks
c0d0er sends brownie points to @nankeuriseu :sparkles: :thumbsup: :sparkles:
:cookie: 376 | @nankeuriseu |http://www.freecodecamp.com/nankeuriseu
I need your guys' (and gals') opinion. Is the single application design still trending?
Or is there a different layout that people are into?
Having trouble with the JS calculator. I made a function to add numbers to an array and another function to clear out the array. But the clear function only works sometimes and not other times. Any ideas?
http://codepen.io/tyl-er/pen/vyYbmV?editors=0011
var prob = [];
function clear(){
var prob = [];
console.log(prob);
}
function addOne(num) {
prob.push(num);
console.log(prob);
}
I know there are other ways to remove the items. I'm just curious why this isn't working
@DanStockham Yeah, well. Everybody wants to have an app in one window w/o reloads (you too, I bet). As far as 'normal' websites go - whatever works for a client, layout is a preference, but one pagers are still up & feelin' good.
@tyl-er you're 'trying' to empty your local variable in function clear. this
prob is different than the one declared outside your functions
Hey, I'm having trouble with my for loop and the streamArray. Its displays "ESL_SC2,OgamingSC2,cretetion,freecodecamp,storbeck,mfnmanifest,RobotCaleb,comster404freecodecamp" in the list item.
var streamArray = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "mfnmanifest", "RobotCaleb", "comster404"];
var list = "";
// var key = 'https://wind-bow.hyperdev.space/twitch-api/streams/' + streamArray[0 + i] + '?callback=?';
for (var i = 0; i < 3; i++) {
$.getJSON('https://wind-bow.hyperdev.space/twitch-api/streams/' + streamArray.slice(0,1) + '?callback=?', function(data) {
console.log(data);
streamArray += streamArray[i];
list += "<li class='list-group-item'> <span class='badge'>" + data.stream.viewers + "</span>" + streamArray +"</li>";
console.log(list);
$("#listId").html(list);
@kat-mag Oh got it. Thanks
tyl-er sends brownie points to @kat-mag :sparkles: :thumbsup: :sparkles:
:cookie: 397 | @kat-mag |http://www.freecodecamp.com/kat-mag
@MitchWilkins what's that supposed to be?
streamArray += streamArray[i];
@kat-mag I changed it to this but it still only works once.
var prob = [];
function addOne(num) {
prob.push(num);
console.log(prob);
}
function clear(){
prob.splice(0, prob.length);
console.log(prob);
}
@tyl-er
prob = []; maybe... but c'mon. you're overdoing it ;D overthinking. It'd work without some 'not-so-fancy' arrays ;P
strings would be enough & easier to work with
@kat-mag good call, thanks for the help. I thought that would help increment the values. As in it one iteration would be streamArray[0], the next streamArray[1], etc. Apparently that just added them all up and stored them (that makes sense to me now).
mitchwilkins sends brownie points to @kat-mag :sparkles: :thumbsup: :sparkles:
:cookie: 398 | @kat-mag |http://www.freecodecamp.com/kat-mag
@MitchWilkins exactly. These things are easy to mess up :fire:
@kat-mag i also changed the list variable to equal
list += "<li class='list-group-item'> <span class='badge'>" + data.stream.viewers + "</span>" + streamArray[i] +"</li>"; it now just prints out the last iteration 4 times
@kat-mag Thanks I know I am overthinking lol. I'm trying to do it without just googling "how to make a js calculator", but that might be a bad idea.
tyl-er sends brownie points to @kat-mag :sparkles: :thumbsup: :sparkles:
:warning: tyl-er already gave kat-mag points
@tyl-er don't google 'how to'. just stop & think 'is there an easier way to make it work?'. In this case - there is.
@tyl-er and btw... this website should be your new friend ;D
I'm out, gotta sleep :wave:
@kat-mag 👍
I've just started the Random Quote Machine project, why is the no mention of the issues you can run into when making cross domain api calls in any of the previous lessons.
To develop read-search-ask skills I guess haha @WhiteCaneGamer