These are chat archives for FreeCodeCamp/HelpFrontEnd

6th
Feb 2016
Sujit Karki
@Swoozeki
Feb 06 2016 00:00
stuck
How in the world do you make that Pomodoro progress animation?
Trey Russell
@PenguinOfTheSky
Feb 06 2016 00:00
first, how accurate do u want it to be
?
second? milisecond?
Sujit Karki
@Swoozeki
Feb 06 2016 00:00
second
Trey Russell
@PenguinOfTheSky
Feb 06 2016 00:01
lotsa ways then. Consider setInterval
for more accurate, consider getting new Date objects
Sujit Karki
@Swoozeki
Feb 06 2016 00:01
hmm, that I know, and have done. But how would I go about making the progress bar-like animation?
Trey Russell
@PenguinOfTheSky
Feb 06 2016 00:02
and b4 u program, write/type up a... whatchemacallit. Those things u do before writing reports? An outline of what you're doing.
progress bar. % of stuff done/to go
so u need to know..... where you are... where you were.... and possibly where you're going
get vars of those
analyze
output
gotta do these things in steps/modules
Right, I've got everything, besides a visual representation of the pomodoro timer ticking down
Trey Russell
@PenguinOfTheSky
Feb 06 2016 00:04
oh, that far already?
i assume u have a variable from a div stating the time on the clock when u start?
25 min? 15? whatever it may be?
Sujit Karki
@Swoozeki
Feb 06 2016 00:04
right
Trey Russell
@PenguinOfTheSky
Feb 06 2016 00:04
and u know how to turn the current time into a % right?
Sujit Karki
@Swoozeki
Feb 06 2016 00:05
uh-huh
Trey Russell
@PenguinOfTheSky
Feb 06 2016 00:05
so just animations screwing u up?
Tim Bell
@MindfulBell
Feb 06 2016 00:05
Any people decent with React on?
Sujit Karki
@Swoozeki
Feb 06 2016 00:05
I don't even know how to go about the animation
FineBros @MindfulBell
Trey Russell
@PenguinOfTheSky
Feb 06 2016 00:05
well... if u don't want it to be fancy
Sujit Karki
@Swoozeki
Feb 06 2016 00:06
Well, my whole program isn't what I'd consider "fancy" anyway, haha
Trey Russell
@PenguinOfTheSky
Feb 06 2016 00:06
just create a <div background-color:#000 id = 'MEEEEE'> then pop a height=height+5px in there
in the jquery
easy peasy
or... think of the other 20 ways to do it
lol
hmm... width would probbably be better
Sujit Karki
@Swoozeki
Feb 06 2016 00:06
Oh yeah, that's true.
I was brain-freezing
Trey Russell
@PenguinOfTheSky
Feb 06 2016 00:06
happens
Sujit Karki
@Swoozeki
Feb 06 2016 00:06
Thank you @PenguinOfTheSky
CamperBot
@camperbot
Feb 06 2016 00:06
swoozeki sends brownie points to @penguinofthesky :sparkles: :thumbsup: :sparkles:
:star: 217 | @penguinofthesky | http://www.freecodecamp.com/penguinofthesky
Trey Russell
@PenguinOfTheSky
Feb 06 2016 00:06
i nearly ended up trying to do it in canvas with a 3d game engine
b4 i realized i could just css it
Sujit Karki
@Swoozeki
Feb 06 2016 00:07
Oh my, at least I think you learned things on Canvas
Trey Russell
@PenguinOfTheSky
Feb 06 2016 00:07
lol, something like that
penguin.meteor.com
buttons 4 and 5
(others are broke atm it hink
Sujit Karki
@Swoozeki
Feb 06 2016 00:08
That's amazing
I tried to get into 2d gamedev before, and even that was making my palms sweaty
Tim Bell
@MindfulBell
Feb 06 2016 00:09
const Test = (props) => {
  render
    return <div>Hello World!</div>
}

React.renderDOM(<Test />, document.getElementById('container'))
Trey Russell
@PenguinOfTheSky
Feb 06 2016 00:10
ah, u liked? it's not as hard as it looks really. Long as u don't try to make high-level graphics (requires advanced linear algebra/multivariable calc) lol
Tim Bell
@MindfulBell
Feb 06 2016 00:10
Why does that not work in React?
Trey Russell
@PenguinOfTheSky
Feb 06 2016 00:10
@Swoozeki
@MindfulBell thought u needed closures around the return? but maybe not if it's just one line
I just started learning react
do u have jsx loaded?
(babel)
Tim Bell
@MindfulBell
Feb 06 2016 00:11
@PenguinOfTheSky yes
Trey Russell
@PenguinOfTheSky
Feb 06 2016 00:11
am i wrong or is there a data vis channel?
Tim Bell
@MindfulBell
Feb 06 2016 00:11
I am taking a udemy course on it...and i am struggling wrapping my head around a few things...namely how props are passed around...
Trey Russell
@PenguinOfTheSky
Feb 06 2016 00:11
u might be in the wrong one
help channels
CamperBot
@camperbot
Feb 06 2016 00:11
no wiki entry for: channels
Trey Russell
@PenguinOfTheSky
Feb 06 2016 00:12
help channel
CamperBot
@camperbot
Feb 06 2016 00:12
no wiki entry for: channel
Trey Russell
@PenguinOfTheSky
Feb 06 2016 00:12
son of a bitcch camperbot
help rooms
CamperBot
@camperbot
Feb 06 2016 00:12

:point_right: help rooms [wiki]

Help Rooms

Choose the right room for your question!

:pencil: read more about help rooms on the FCC Wiki

Trey Russell
@PenguinOfTheSky
Feb 06 2016 00:12
yeah, there it is
ur in wrong channel for react
data viz is what u want
Tim Bell
@MindfulBell
Feb 06 2016 00:13
@PenguinOfTheSky why is it in data vis?
React is for UIs in general
Trey Russell
@PenguinOfTheSky
Feb 06 2016 00:14
the fcc site
has 3 certs
react is under data vis, not front end
also, react can be used server-side
but frankly they just decided to seperate beginner front-end from reactive programming in general
CSS preprocessing is also under data vis
Tim Bell
@MindfulBell
Feb 06 2016 00:25
@PenguinOfTheSky well, no one there...
Micah Bales
@micahbales
Feb 06 2016 01:27
Hi folks! Is anyone here tonight?
Bruce Young
@mutantspore
Feb 06 2016 01:28
lol ok right place.. now fo rteh question
Micah Bales
@micahbales
Feb 06 2016 01:28
Ok, great! This random quote generator is almost done, but I have a couple of questions for you CSS gurus out there. @ message me if you can help. Thanks! http://codepen.io/micahbales/pen/gPjJMY
My question has to do with the quote box,
which is not quite working as I want it to
I'd like the box around the quotes to be sized according to the amount of text,
And I'd like all the text to be centered both vertically and horizontally within the box, maybe with 10px of padding
haven't been able to figure out how to make this work dynamically, however
Trey Russell
@PenguinOfTheSky
Feb 06 2016 01:53
@micahbales still here? try align-content maybe?
CFCF
@CFCF
Feb 06 2016 02:00
@micahbales remove position-absolute from #quote-text
rushi
@rush86999
Feb 06 2016 02:00
hi guys i am getting confused at the tweet button i need help with the code if anyone can help?
challenge build a random quote machine
i just need to know why the jquery doesnt work
CFCF
@CFCF
Feb 06 2016 02:01
@micahbales And remove height from all instances of #quote-box
rushi
@rush86999
Feb 06 2016 02:03
should i past code?
or can everyone access the code there
var text = "Hello World"
var encoded = encodeURIComponent(text);
var url = "https://twitter.com/intent/tweet?text=" + encoded +
  "data-size=\"large\"";

$("tweet").click(function(){
  $("tweet-url").attr("href", url);
} );
Can anyone tell me why the code sometimes doesn't fully reset?
Some of the boxes seem to randomly keep an X or O
Is it because I'm using alert?
rushi
@rush86999
Feb 06 2016 02:04
<div id="flex-container">

  <button id="getQuote" class="btn btn-primary">Get Quote</button>


 <a name="tweet-url"><button class="btn btn-primary"
            id="tweet" href>Tweet</button></a>



</div>
CFCF
@CFCF
Feb 06 2016 02:08
@rush86999 <a id="tweet-url" href="#"> <button class="btn btn-primary" id="tweet" >Tweet</button> </a>
@rush86999 $("#tweet").click(function() { $("#tweet-url").attr("href", url); });
Bruce Young
@mutantspore
Feb 06 2016 02:10
@micahbales i cut out a lot of stuff I wasn’t sure that was actually helping. here’s a fork of yours
http://codepen.io/MutantSpore/pen/JGmyGG
Micah Bales
@micahbales
Feb 06 2016 02:11
@mutantspore Here's what I've got now: http://codepen.io/micahbales/pen/gPjJMY?editors=1100
rushi
@rush86999
Feb 06 2016 02:13
@CFCF i made the changes I realize i forgot the "#" in id still does not work?
Bruce Young
@mutantspore
Feb 06 2016 02:14
@micahbales ok well you have it working now .. in anothe away… some of which is the same :) though I’s not make it all caps and so bold as to make all the letters run into each other.
Joseph Morse
@jnmorse
Feb 06 2016 02:14
@rush86999 You can add the classes from the button and remove it, to still have a button appearance, second rather then call on click you could just change the href
Micah Bales
@micahbales
Feb 06 2016 02:15
@mutantspore Thanks for your help, though. I was interested to see you using vw for width. hadn't seen that before
CamperBot
@camperbot
Feb 06 2016 02:15
micahbales sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1084 | @mutantspore | http://www.freecodecamp.com/mutantspore
Bruce Young
@mutantspore
Feb 06 2016 02:15
@micahbales add yodaQuote(); to the end of your JS to make it put up a quote on loading
vw = viewer width vh = viewer height
rushi
@rush86999
Feb 06 2016 02:16
@jnmorse i am confused about add classes part? you mean $(“).addClass()?
@jnmorse so remove <a> and add it as jquerry link?
Joseph Morse
@jnmorse
Feb 06 2016 02:18
@rush86999 <a id="tweet-url" class="btn btn-primary" href>Tweet</a>
$("#tweet-url").attr("href", url);
kaizen711
@kaizen711
Feb 06 2016 02:19
Hey everybody this is my first time posting here, does any one know how to post a project from codepen here in the chat?
Zac Clemans
@zaclem01
Feb 06 2016 02:19
OK, think I finally finished my Simon game if anyone cares to take a quick glance for me. I know the sound drops on quick presses (usually when the same color is displayed twice in a row), but other than that, I think it's ready. Feedback welcome. http://codepen.io/thalpha/full/mVjggv/
Joseph Morse
@jnmorse
Feb 06 2016 02:19
@kaizen711 Just need to paste the url to your pen in chat
Bruce Young
@mutantspore
Feb 06 2016 02:20
@kaizen711 just paste the url of the pen
rushi
@rush86999
Feb 06 2016 02:21
@jnmorse okay so i cleaned the code. 2 questions why don’t i have to call <button> and still get a button and second why do i still click on it and there’s’ no pop up or anything?
kaizen711
@kaizen711
Feb 06 2016 02:21
thank you I've just been having a hard time fixing this problem in my portfolio site
the images in the portfolio section dont resize correctly when i make the window smaller
Joseph Morse
@jnmorse
Feb 06 2016 02:23
@rush86999 okay, so generally i believe its bad practice to put a button in a link, second, bootstrap styles the element that has the class 'btn ..' to look a certain way, and the last part I forgot you also should add a target="_blank" to you link
CFCF
@CFCF
Feb 06 2016 02:23
@rush86999 the button is created by the bootstrap CSS class btn
Joseph Morse
@jnmorse
Feb 06 2016 02:25
@rush86999 if you wanted to get a pop up window of a certain size then ya might want to check out window.open() but far as a link, you just change the href, adding a target just either opens a new tab or window depending on how your browser in set up
rushi
@rush86999
Feb 06 2016 02:29
@jnmorse ```
var url = 'target="https://twitter.com/intent/tweet?text=' + encoded +
'data-size=\"large\""';
var url = 'target="https://twitter.com/intent/tweet?text=' + encoded +
  'data-size=\"large\""';
@jnmorse is the syntax correct?
kaizen711
@kaizen711
Feb 06 2016 02:30
@zaclem01 thats looking really good, how long did it take you to make that?
Joseph Morse
@jnmorse
Feb 06 2016 02:30
@rush86999 you can lose the part after the encoded
rushi
@rush86999
Feb 06 2016 02:32
@jnmorse okay done i am using chrome in codepen but still no pop up?
Joseph Morse
@jnmorse
Feb 06 2016 02:32
@rush86999 actually no target doesn't go there, it goes on your a tag <a target="_blank" .. >link</a>
rushi
@rush86999
Feb 06 2016 02:34
@jnmorse okay i did it but it doesn’t go twitter?
var text = "Hello World"
var encoded = encodeURIComponent(text);
var url = "https://twitter.com/intent/tweet?text=" + encoded;


$("#tweet-url").attr("href", url);
<div id="flex-container">

  <button id="getQuote" class="btn btn-primary">Get Quote</button>


 <a name="tweet-url" 
    target="_blank"
    href="#"class="btn btn-primary"
            id="tweet" href>Tweet</a>
Joseph Morse
@jnmorse
Feb 06 2016 02:36
@rush86999 yeah you still are using name instead of id on your a tag
so your link is never getting updated
also you have two hrefs on your a tag now
rushi
@rush86999
Feb 06 2016 02:38
@jnmorse thank you works!!!!
@jnmorse oops
@jnmorse thank you works!!!!
CamperBot
@camperbot
Feb 06 2016 02:38
rush86999 sends brownie points to @jnmorse :sparkles: :thumbsup: :sparkles:
:star: 366 | @jnmorse | http://www.freecodecamp.com/jnmorse
Joseph Morse
@jnmorse
Feb 06 2016 02:39
@rush86999 still need to lose the second href, but glad it helped
rushi
@rush86999
Feb 06 2016 02:41
@jnmorse yea missed that thanks
CamperBot
@camperbot
Feb 06 2016 02:41
rush86999 sends brownie points to @jnmorse :sparkles: :thumbsup: :sparkles:
:warning: rush86999 already gave jnmorse points
Joseph Morse
@jnmorse
Feb 06 2016 02:41
@rush86999 I also learned something, wasn't aware of the encodeURIComponent function
rushi
@rush86999
Feb 06 2016 02:43
@jnmorse just wondering if you know anything flex box styling? can we use it in code pen or does it need to be added somehow. i hear about it on the web and was wondering to try it
Joseph Morse
@jnmorse
Feb 06 2016 02:44
@rush86999 I haven't used flex box much myself yet, but found this somewhere, helps explain it with a game http://flexboxfroggy.com/
its css properites
rushi
@rush86999
Feb 06 2016 02:45
so codepen just comes with it then I should be able to just write along those lines
Zac Clemans
@zaclem01
Feb 06 2016 02:45
@kaizen711 Thanks! Somewhere around a week working on it after I get home from my work.
CamperBot
@camperbot
Feb 06 2016 02:45
zaclem01 sends brownie points to @kaizen711 :sparkles: :thumbsup: :sparkles:
:star: 268 | @kaizen711 | http://www.freecodecamp.com/kaizen711
Zac Clemans
@zaclem01
Feb 06 2016 02:45
tic tac toe was way harder, but it and simon says both really helped me get better with timeouts
Joseph Morse
@jnmorse
Feb 06 2016 02:46
@rush86999 codepen doesn't come with it, its just part of the css specs that the browser understands
Zac Clemans
@zaclem01
Feb 06 2016 02:46
and asynchronous functions in general
Joseph Morse
@jnmorse
Feb 06 2016 02:46
@zaclem01 I have a small problem with your game btw, not sure if you have the colors change at all, but i'm color blind so I hear a sound but no other indication it did anything..
partial color blink rather, have trouble with shades of red and green
kaizen711
@kaizen711
Feb 06 2016 02:49
@zaclem01 yeah it's definitely looking great, hopefully I can get to that level soon
Zac Clemans
@zaclem01
Feb 06 2016 02:52
@jnmorse There is a slight brightening of the colors when they go through the sequence. I wonder if there's a way to make it more visible (especially on red/green)?
Joseph Morse
@jnmorse
Feb 06 2016 02:54
@zaclem01 strange, apparently the version of chrome I have on OpenSuse just isn't working with filter, I see it just fine in firefox
but then some of my api projects no longer work in chrome either..maybe I should just switch back to ubuntu, seems like I just run into more and more issues with OpenSuse
ahh nm, if you turn on autoprefixer in the css options it works
Zac Clemans
@zaclem01
Feb 06 2016 03:00
@jnmorse ah, I think Chrome is on webkit. I'm really bad about remembering browser prefixes
Joseph Morse
@jnmorse
Feb 06 2016 03:00
@zaclem01 well if you autoprefixer then ya don't have to worry about them heh, it worries about them for you
Zac Clemans
@zaclem01
Feb 06 2016 03:05
@jnmorse Handy. I'll have to activate on everything. Thanks!
CamperBot
@camperbot
Feb 06 2016 03:05
zaclem01 sends brownie points to @jnmorse :sparkles: :thumbsup: :sparkles:
:star: 367 | @jnmorse | http://www.freecodecamp.com/jnmorse
Joseph Morse
@jnmorse
Feb 06 2016 03:07
@zaclem01 I just wish browsers would stop with prefixes, if they are gonna support something support it, don't toss a prefix on it..
Zac Clemans
@zaclem01
Feb 06 2016 03:18
@jnmorse agreed. I think it makes the CSS look messy
and it's easy to forget
Chris Dziewa
@chrisdziewa
Feb 06 2016 03:19
@jnmorse it is due to the large amount of browsers available and different versions of the same browser
and the fact that people are always looking for the next cool thing
Joseph Morse
@jnmorse
Feb 06 2016 03:20
@chrisdziewa I don't see what any of that really has to do with anything.
Bruce Young
@mutantspore
Feb 06 2016 03:21
it’s a history thing… and also the way support is implemented may not be sufficiently defined till a standard is adopted
Chris Dziewa
@chrisdziewa
Feb 06 2016 03:22
@jnmorse developers are always looking for ways to do things that aren't available currently. Browsers can't keep up with the demand. If you tell someone they aren't going to be able to use something until it's standardized, progress stops
just look at javascript
you have people working on Es7 now and many things in es6 aren't even available natively in the browser
Joseph Morse
@jnmorse
Feb 06 2016 03:24
@chrisdziewa honestly I wish I didn't have to lol, I mean I've gotten to understand JavaScript better then I use to, but I still thinks its strange that some other language hasn't taking over front end
I mean if you compare the number of back end langues vs front end..
Chris Dziewa
@chrisdziewa
Feb 06 2016 03:26
@jnmorse well JS isn't necessarily the most beautiful language. I still am not a fan of semicolons, but it just happened to find a following at the right time and now we have it for better or worse
and the new versions of the language are starting to make it easier to write the same functionality
Joseph Morse
@jnmorse
Feb 06 2016 03:28
semicolons are fine to me, its just things like this not always referring to what you think it should, or possible endless chains and such
Bruce Young
@mutantspore
Feb 06 2016 03:28
if you go up to cockpit… you won’t find anyone at the controls
Chris Dziewa
@chrisdziewa
Feb 06 2016 03:29
@jnmorse yeah this is hated by a lot of people
Joseph Morse
@jnmorse
Feb 06 2016 03:29
course fist programming language I learned PHP and people say that is a ugly language, and yeah, people can write some really ugly code in it, but they can in most laugages
Chris Dziewa
@chrisdziewa
Feb 06 2016 03:30
@jnmorse very true. I've done some work in PHP I think WordPress is what made me not like it. It was convenient being able to put php code alongside html though
now we take a similar approach with templates anyway
Joseph Morse
@jnmorse
Feb 06 2016 03:31
@chrisdziewa I never really bothered to learn WordPress much, mainly cause I just never really liked how they implemented anything
Chris Dziewa
@chrisdziewa
Feb 06 2016 03:32
@jnmorse it was a nightmare trying to figure out where to edit things in that mess
Joseph Morse
@jnmorse
Feb 06 2016 03:33
@chrisdziewa I spent allot of time doing what I heard allot of the time not to do, "re-invent the wheel"; partly cause if I gonna use someone elses code I'd like to least understand how it functions so if something breaks I can fix it..
I kinda threw out almost all my old php code though, never thought it was good enough and was before I learned how to use github
Chris Dziewa
@chrisdziewa
Feb 06 2016 03:35
@jnmorse I like reinventing the wheel too ha. Especially with new concepts.
@jnmorse do you still work in PHP or have you left it?
Andrew Charlebois
@andrewchar
Feb 06 2016 03:38
hey guys. im just working on my portfolio and i am having a problem and cant see why.. My nav bar is sort of off the screen a bit.
http://codepen.io/andrewchar/pen/NxLeje#0
Joseph Morse
@jnmorse
Feb 06 2016 03:38
@chrisdziewa I never really "worked" in to begin with, it was just something I did from time to time for fun. There doesn't every seem to be many tech jobs near me, and wasn't really sure what I wanted to do, but started last year when I got fired from Walmart I decided I was gonna crack down more on trying to get somewhere with coding or computers in general, I was sorta facinated with the idea of programming in Kindergarden when I learned a bit of "BASIC" lol..
PHP just seems to be the easiest thing to find free information about for the longest time
and to set up
Chris Dziewa
@chrisdziewa
Feb 06 2016 03:40
@andrewchar you need a div nested inside nav around all the content with the class "container"
Andrew Charlebois
@andrewchar
Feb 06 2016 03:41
@chrisdziewa perfect thank you!
CamperBot
@camperbot
Feb 06 2016 03:41
andrewchar sends brownie points to @chrisdziewa :sparkles: :thumbsup: :sparkles:
:star: 500 | @chrisdziewa | http://www.freecodecamp.com/chrisdziewa
Andrew Charlebois
@andrewchar
Feb 06 2016 03:42
@chrisdziewa getting used to have to div like everything, first time i use bootstrap really
Chris Dziewa
@chrisdziewa
Feb 06 2016 03:42
@andrewchar haha yeah they use an excessive amount of divs
@jnmorse ah ok. At least there are remote jobs as a possibility
even in just over 3 years of focusing on code, so many resources have been made available. I wish some of it would've been there from the start but better late than never
Joseph Morse
@jnmorse
Feb 06 2016 03:48
@chrisdziewa lol..yeahs thats kinda what I've been thinking lately, I should have just put more effort into coding, seems like I'm playing allot of catch up now
so many languages that seems it would be good to learn but not many resources currently like go or swift
didn't know this till i was listening to a podcast but apparently Digital Ocean is using allot of go on there backend
Chris Dziewa
@chrisdziewa
Feb 06 2016 03:51
@jnmorse I think taking a month off requires catchup these days ha. I've read on more than one account of developers just being aware of new tech and only learning what is absolutely essential. I like that idea but it's so easy to jump on the bandwagon
@jnmorse them and quite a few others
I heard someone say that it is great but not necessarily on its own. For swift though, check out Rob Percival's ios developer course on udemy (when it's on sale for 10-15)
Joseph Morse
@jnmorse
Feb 06 2016 03:57
@chrisdziewa have you used udemy before, been debating when I get my taxes back what online course to take
Chris Dziewa
@chrisdziewa
Feb 06 2016 03:58
@jnmorse yeah I have bought about 6 courses from there. I did part of the swift course which was simple and great but my computer was too slow to handle xcode
I also bought 2 react courses
Joseph Morse
@jnmorse
Feb 06 2016 04:00
@chrisdziewa would you recommend either of the react ones? Been trying to get my head around that but Flux I haven't been quite able to understand yet
not sure they have xcode for linux, I'm kinda refusing to go back to Windows currently lol
Chris Dziewa
@chrisdziewa
Feb 06 2016 04:01
@jnmorse it's only available on mac osx
they do have a compiler for linux now I believe, but running the app simulator might not be as accurate
Joseph Morse
@jnmorse
Feb 06 2016 04:01
I see
Andrew Charlebois
@andrewchar
Feb 06 2016 04:01
do i need to download google fonts to use them in my portfolio
Chris Dziewa
@chrisdziewa
Feb 06 2016 04:01
I would say get the newest one. Stephen Grider's old one deals with flux and some of the info is dated. The new one deals with redux and webpack
I think it's much easier to understand
Bruce Young
@mutantspore
Feb 06 2016 04:02
@andrewchar no you’ll find a direct link if you look about
Joseph Morse
@jnmorse
Feb 06 2016 04:02
@andrewchar there are a number of ways to import google fonts into codepen, you can just add the link to the header under your html cog for one
Chris Dziewa
@chrisdziewa
Feb 06 2016 04:02
@andrewchar you want to use a link called quicklink
*quick use rather. It is right under the font on the website as a button
Joseph Morse
@jnmorse
Feb 06 2016 04:04
@chrisdziewa https://www.udemy.com/react-redux/ that one?
Andrew Charlebois
@andrewchar
Feb 06 2016 04:04
@chrisdziewa sorry on what website
Chris Dziewa
@chrisdziewa
Feb 06 2016 04:04
@jnmorse that's the one
It's the second button to the left of add to collection
it will give you a link that you will copy to place in the head of your page or in the html head section of codepen's settings
Joseph Morse
@jnmorse
Feb 06 2016 04:06
@chrisdziewa ok, thanks, I bookmarked it so can go back to it.
CamperBot
@camperbot
Feb 06 2016 04:06
jnmorse sends brownie points to @chrisdziewa :sparkles: :thumbsup: :sparkles:
:star: 502 | @chrisdziewa | http://www.freecodecamp.com/chrisdziewa
Andrew Charlebois
@andrewchar
Feb 06 2016 04:07
@chrisdziewa perfect thank you
CamperBot
@camperbot
Feb 06 2016 04:07
andrewchar sends brownie points to @chrisdziewa :sparkles: :thumbsup: :sparkles:
:warning: andrewchar already gave chrisdziewa points
Chris Dziewa
@chrisdziewa
Feb 06 2016 04:07
@jnmorse I only wish authentication was covered but the teacher keeps expanding the course with more content
Joseph Morse
@jnmorse
Feb 06 2016 04:09
@chrisdziewa speaking of authentication, another thing I heard of recent was jwt think they even mention react in there video there https://jwt.io/
Chris Dziewa
@chrisdziewa
Feb 06 2016 04:14
@jnmorse my backend api that I am connecting to my front end right now uses jwt
I'm a little unsure if it is secure enough though
I learned about it in the book MEAN machine which is very helpful (the first half)
Joseph Morse
@jnmorse
Feb 06 2016 04:15
@chrisdziewa sounds fairly secure to me, but hard to say not knowing
Chris Dziewa
@chrisdziewa
Feb 06 2016 04:17
@jnmorse yeah I always wonder if I'm doing things the correct way ha. Right now it stores a cookie containing the token when authentication passes and then on every authenticated route, the request checks for the cookie, decodes it and sends the user to the route as a parameter. I've heard that CSRF attacks are still possible though. Too much to know ha
Joseph Morse
@jnmorse
Feb 06 2016 04:23
@chrisdziewa wouldn't say its a good thing to keep looking out for things that could go wrong, usually encryption itself isn't what is attacted directly, but they find ways around it.
Chris Dziewa
@chrisdziewa
Feb 06 2016 04:24
@jnmorse hmmm Never thought about it that way
Andrew Charlebois
@andrewchar
Feb 06 2016 04:26
anyone here good with bootstrap
actually not sure if this a bootstrap question or not..
Joseph Morse
@jnmorse
Feb 06 2016 04:26
http://www.codenewbie.org/stories episode 72 and 70 had to do with security if you interested, was fairly interesting
really like that podcast since I found it, which wasn't log ago one of the news links I think
@andrewchar whats up?
@chrisdziewa reallyized I just said that wrong, would say its a good thing..
Andrew Charlebois
@andrewchar
Feb 06 2016 04:27

My portfolio so far
http://codepen.io/andrewchar/pen/NxLeje#0

What i kind of want to do is put a box around my text in my jumbotron. the box to be slightly transparent. can i pull this effect off here?

because the letters blend in a bit with my background image
i wanna seperate a little to make it easier to see
separate *
Joseph Morse
@jnmorse
Feb 06 2016 04:29
@andrewchar sure its possible, just have to use rgba to set your background color on the jumbo
or could add a background color your self on a wraping div if you wanted
Chris Dziewa
@chrisdziewa
Feb 06 2016 04:30
@jnmorse added to my list to check out, thanks
CamperBot
@camperbot
Feb 06 2016 04:30
chrisdziewa sends brownie points to @jnmorse :sparkles: :thumbsup: :sparkles:
:star: 368 | @jnmorse | http://www.freecodecamp.com/jnmorse
Andrew Charlebois
@andrewchar
Feb 06 2016 04:30
so wrapping just my text will work to put a box around it
i was unsure if i was able to do this within a jumbotron
with the background being a picture already
Chris Dziewa
@chrisdziewa
Feb 06 2016 04:31
@andrewchar don't let jumbotron fool you
it's just a class name
Joseph Morse
@jnmorse
Feb 06 2016 04:31
@andrewchar lol..well the background is on the parent div, so you can add other background or whatever use you wanted to child nodes
Chris Dziewa
@chrisdziewa
Feb 06 2016 04:31
you can always nest elements
Andrew Charlebois
@andrewchar
Feb 06 2016 04:31
could i just do a row and col?
Chris Dziewa
@chrisdziewa
Feb 06 2016 04:32
@andrewchar do you really need a row?
Andrew Charlebois
@andrewchar
Feb 06 2016 04:32
im just thinking lol im not sure
Chris Dziewa
@chrisdziewa
Feb 06 2016 04:33
usually you want rows when you are putting content next to each other
you should be able to put a div around your text, give it some dimensions and then set a background color
and to keep it in the middle use margin: 0 auto; and change the first number for top and bottom margin
Dan Stockham
@DanStockham
Feb 06 2016 04:36
I still don't understand minimax.
How will the computer know what is a good move or a bad move? There has to be context to a move.
Joseph Morse
@jnmorse
Feb 06 2016 04:41
okay off for the night, later all
Chris Dziewa
@chrisdziewa
Feb 06 2016 04:41
@jnmorse night
@DanStockham looks confusing
Dan Stockham
@DanStockham
Feb 06 2016 04:42
@chrisdziewa No shit :(
Chris Dziewa
@chrisdziewa
Feb 06 2016 04:42
@DanStockham do you have to know it?
are you working on tic tac toe?
Dan Stockham
@DanStockham
Feb 06 2016 04:43
@chrisdziewa I can't think of any other way to build the tic tac toe game.
Chris Dziewa
@chrisdziewa
Feb 06 2016 04:43
@DanStockham I never touched minimax
go to wikipedia
there is a great section on understanding the moves
I suppose there is a similarity in that approach but without all the extra confusion
Dan Stockham
@DanStockham
Feb 06 2016 04:44
I'll look.
Chris Dziewa
@chrisdziewa
Feb 06 2016 04:44
you process each move as a list of possible moves.
basically trial and error
Dan Stockham
@DanStockham
Feb 06 2016 04:45
@chrisdziewa That's where it gets confusing. I think there is multiple factors in each potential move.
Chris Dziewa
@chrisdziewa
Feb 06 2016 04:45
Win: If the player has two in a row, they can place a third to get three in a row.

Block: If the opponent has two in a row, the player must play the third themselves to block the opponent.

Fork: Create an opportunity where the player has two threats to win (two non-blocked lines of 2).

Blocking an opponent's fork:

Option 1: The player should create two in a row to force the opponent into defending, as long as it doesn't result in them creating a fork. For example, if "X" has a corner, "O" has the center, and "X" has the opposite corner as well, "O" must not play a corner in order to win. (Playing a corner in this scenario creates a fork for "X" to win.)

Option 2: If there is a configuration where the opponent can fork, the player should block that fork.
Center: A player marks the center. (If it is the first move of the game, playing on a corner gives "O" more opportunities to make a mistake and may therefore be the better choice; however, it makes no difference between perfect players.)

Opposite corner: If the opponent is in the corner, the player plays the opposite corner.

Empty corner: The player plays in a corner square.

Empty side: The player plays in a middle square on any of the 4 sides.
@DanStockham there is a bit more but consider each of those as a function that the computer has to consider everytime it wants to place a move
Sorry for the wall of text everyone ha
Dan Stockham
@DanStockham
Feb 06 2016 04:49
I try that first.
Then maybe get a grip on minimax
Chris Dziewa
@chrisdziewa
Feb 06 2016 04:50
@DanStockham best of luck man
Dan Stockham
@DanStockham
Feb 06 2016 04:50
@chrisdziewa Thanks
CamperBot
@camperbot
Feb 06 2016 04:50
danstockham sends brownie points to @chrisdziewa :sparkles: :thumbsup: :sparkles:
:star: 503 | @chrisdziewa | http://www.freecodecamp.com/chrisdziewa
Chris Dziewa
@chrisdziewa
Feb 06 2016 04:51
alright I'm off. Night, everyone. Happy coding!
Andrew Charlebois
@andrewchar
Feb 06 2016 05:17
well i know its not much yet but im happy so far
http://codepen.io/andrewchar/pen/NxLeje
Salman Shahid
@salman-shahid
Feb 06 2016 05:23
Hey, I made a simple Hello World page on codepen but there is no animation shake on my text. Can someone check it out and tell me if they have the same issue? Thanks. http://codepen.io/himynameissal/pen/gPBGMq
kaizen711
@kaizen711
Feb 06 2016 05:34
@mynameissal did you add jQuery under settings in codepen?
@mynameissal in codepen go to settings -> javascript -> quick add -> jQuery
and it should work
Salman Shahid
@salman-shahid
Feb 06 2016 06:35
@kaizen711 I'll try now
Thanks @kaizen711
CamperBot
@camperbot
Feb 06 2016 06:36
mynameissal sends brownie points to @kaizen711 :sparkles: :thumbsup: :sparkles:
:star: 269 | @kaizen711 | http://www.freecodecamp.com/kaizen711
Salman Shahid
@salman-shahid
Feb 06 2016 06:37
Is there a way to set a bunc h of div tags to buttons using JavaScript?
Munish Tayal
@munishtayal
Feb 06 2016 06:50
$(document).ready(function(){
    var latitude;
    var longitude;
    var description;
    var temperature;
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            latitude =  position.coords.latitude;
            longitude = position.coords.longitude;
        });
    }

    $.getJSON("api.openweathermap.org/data/2.5/weather?lat='"+latitude+"'&lon='"+longitude+"'&units=metric", function(json){
        description = json.weather.description;
        temperature = json.main.temp;
    });

    $("h1").text(latitude);
});
Need Help! why h1 is not showing the latitude?
Bruce Young
@mutantspore
Feb 06 2016 06:51
@munishtayal it’s all asynchronous. call your getJson from within the nav bit and set H! there also
Manoj Singh
@manojansh
Feb 06 2016 06:52
can we make our zipline projects in notepad++ and then paste it to Codepen???
Bruce Young
@mutantspore
Feb 06 2016 06:52
@manojansh of course . I usually use Atom to do just that
Munish Tayal
@munishtayal
Feb 06 2016 06:53
@mutantspore sorry but i didn't understand. Can you explain in detail
Manoj Singh
@manojansh
Feb 06 2016 06:53
@mutantspore my javascript is not getting integrated with html???!!! what to do?
any one??
I am stuck at the very first step!!! :(
Bruce Young
@mutantspore
Feb 06 2016 06:56
@munishtayal show me your pen
@manojansh did you do th einto exercise fo rteh ziplines?
Munish Tayal
@munishtayal
Feb 06 2016 06:56
Manoj Singh
@manojansh
Feb 06 2016 06:58
@mutantspore what is an into exercise?
Bruce Young
@mutantspore
Feb 06 2016 06:58
@manojansh which project are you doing?
Manoj Singh
@manojansh
Feb 06 2016 06:59
Quote Machine @mutantspore
Bruce Young
@mutantspore
Feb 06 2016 06:59
@manojansh so you have used codepen already then?
Manoj Singh
@manojansh
Feb 06 2016 07:00
yes, but since it was very congested to use, so i am making my projects in notepad++
@mutantspore
Bruce Young
@mutantspore
Feb 06 2016 07:00
@manojansh yes I totally agree
Munish Tayal
@munishtayal
Feb 06 2016 07:00
@mutantspore so i can't call the values outside that function?
Manoj Singh
@manojansh
Feb 06 2016 07:02

@mutantspore - i am using this in my html head

<script type="text/javascript" src="C:\Users\manoj\Desktop\project1.2\javascript_quote.js"></script>

Bruce Young
@mutantspore
Feb 06 2016 07:02
@munishtayal both the geolocate and teh getjson fo rteh weather are asychronous processes. that means they wil go off on their own to do teh job they have to while the main JS wil just keep going. You don’t know when they wil come back with an answer
@manojansh are you asking how to make this run on your local computer or run in codepen?
Munish Tayal
@munishtayal
Feb 06 2016 07:03
@mutantspore Ok thanks :)
CamperBot
@camperbot
Feb 06 2016 07:03
munishtayal sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1085 | @mutantspore | http://www.freecodecamp.com/mutantspore
Manoj Singh
@manojansh
Feb 06 2016 07:03
local computer @mutantspore
Bruce Young
@mutantspore
Feb 06 2016 07:04
@munishtayal you can wrap the getjson in a function and call it from within the geolocate if you’d ike to make it look better. just keep track of teh scope of the lat and lon though
Munish Tayal
@munishtayal
Feb 06 2016 07:04
ok @mutantspore
Bruce Young
@mutantspore
Feb 06 2016 07:04
@manojansh well you ‘d normally have afolder with the html file and sub-folders called js and css and img to put the resources you need in
then you link to them in a relative way like /js/javascript_quote.js
Manoj Singh
@manojansh
Feb 06 2016 07:06
yes that's what i did, still its not running @mutantspore

This is my javascript

$(document).ready(function(){

$('div').click(function(){

    $('div').hide();

});

});

Bruce Young
@mutantspore
Feb 06 2016 07:07
have you also included a link to jQuery ? @manojansh
you are using it
sigursiguros
@sigursiguros
Feb 06 2016 07:08
Hi guys, I'm with the calculator challenge and I'm stuck.
Manoj Singh
@manojansh
Feb 06 2016 07:08

@mutantspore this does not work for jquery???

<script type="text/javascript" src="C:\Users\manoj\Desktop\project1.2\javascript_quote.js"></script>

Bruce Young
@mutantspore
Feb 06 2016 07:08
@manojansh you’ll eithe rneed to download it for local use or link to teh CDN online
Manoj Singh
@manojansh
Feb 06 2016 07:08
i learnt from codecademy, and there we used this link only
sigursiguros
@sigursiguros
Feb 06 2016 07:09
Originally the text was displaying fine in my display, then suddenly it was gone. I've checked my code and nothing seem to be wrong. Anyone mind help taking a look?
Salman Shahid
@salman-shahid
Feb 06 2016 07:09
Anyone have any recommendations for tutorials on the parallex effect used on the Personal Portfolio project?
Bruce Young
@mutantspore
Feb 06 2016 07:09
@manojansh your code snippet is jquery so you’ll need to link to it to use it. possibly codecademy had it already done fo ryou
@mynameissal it’s not really a parallax effect but simply a series of divs with their background images set. some are fixed, some are scroll
Manoj Singh
@manojansh
Feb 06 2016 07:10

@mutantspore this is what i need to add?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

Bruce Young
@mutantspore
Feb 06 2016 07:11
@manojansh ye sthat look like it
Manoj Singh
@manojansh
Feb 06 2016 07:11
oh let me check, and i will let you know
Bruce Young
@mutantspore
Feb 06 2016 07:11
@manojansh add it at the bottom of your html
Salman Shahid
@salman-shahid
Feb 06 2016 07:12
@mutantspore I see, thanks. I will try to find more information.
CamperBot
@camperbot
Feb 06 2016 07:12
mynameissal sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1086 | @mutantspore | http://www.freecodecamp.com/mutantspore
Manoj Singh
@manojansh
Feb 06 2016 07:12
ok @mutantspore
after closing </body> ?? @mutantspore
Bruce Young
@mutantspore
Feb 06 2016 07:13
@manojansh no.. just before @manojansh
Manoj Singh
@manojansh
Feb 06 2016 07:14
ok and the path pointing to my jQuery file would be as I already did, right?? @mutantspore
@mutantspore we can write jquery in javascript file ???
Bruce Young
@mutantspore
Feb 06 2016 07:14
yes of course
Manoj Singh
@manojansh
Feb 06 2016 07:15
Its not working :( @mutantspore
Bruce Young
@mutantspore
Feb 06 2016 07:15
the path you have pasted for you js file is a ful system absolute link. it should work but you only need a file path relative to where the html file is though
Manoj Singh
@manojansh
Feb 06 2016 07:16
    <head>
        <link rel="stylesheet" type="text/css" href="C:\Users\manoj\Desktop\project1.2\style_quote.css">
        <script type="text/javascript" src="C:\Users\manoj\Desktop\project1.2\javascript_quote.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

        <!-- Latest compiled JavaScript -->
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

        <title>Quote Machine</title>
    </head>

    <body style="background-color:#58FAF4">
    <div><h1>manoj</h1></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    </body>

</html>
this is my code @mutantspore

```$(document).ready(function(){

$('div').click(function(){

    $('div').hide();

});

}); ``` this is the script

Bruce Young
@mutantspore
Feb 06 2016 07:18
@manojansh so you have a folder called project1.2 ?
and everything is just in that folder?
no sub-folders?
Manoj Singh
@manojansh
Feb 06 2016 07:19
yes @mutantspore
Bruce Young
@mutantspore
Feb 06 2016 07:20
@manojansh try this
    <head>
        <link rel="stylesheet" type="text/css" href="style_quote.css">
        <script type="text/javascript" src="javascript_quote.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

        <!-- Latest compiled JavaScript -->
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

        <title>Quote Machine</title>
    </head>

    <body style="background-color:#58FAF4">
    <div><h1>manoj</h1></div>

    </body>
Manoj Singh
@manojansh
Feb 06 2016 07:21
@mutantspore i tried my code in codepen its working there, but not in notpad++
@mutantspore - still not working
:(
should i try in atom?
is it easy to use?
Bruce Young
@mutantspore
Feb 06 2016 07:23
@manojansh so you have this html in a html file called ? index.html ? and it is in the very sam folder teh js and css files are. the js and css are not in sub folders?
and you are loading the index file into a web browser
Atom is great but it won’t make any difference if your files aren’t organised and linked properly
Manoj Singh
@manojansh
Feb 06 2016 07:24
no sub folders @mutantspore
and the parent html is thedeveloper.html
all are in same folders
Bruce Young
@mutantspore
Feb 06 2016 07:25
and you just cut and pasted my code in over yours?
Manoj Singh
@manojansh
Feb 06 2016 07:25
yes @mutantspore
Bruce Young
@mutantspore
Feb 06 2016 07:25
you wil only need the actual js and css file names… not the windows path to them
what’s actually not working? your jquery ? can you see teh actual html you wrote
Manoj Singh
@manojansh
Feb 06 2016 07:27
yes @mutantspore css and html are working fine, jquery is not!
Bruce Young
@mutantspore
Feb 06 2016 07:27
your code basically hides a div if it’s clicked on i guess
ok you were asking about linking it in before
Manoj Singh
@manojansh
Feb 06 2016 07:28
yes simple hiding
this is very frustrating @mutantspore
Salman Shahid
@salman-shahid
Feb 06 2016 07:30
Hey, any ideas on why I can't see the text inside my div? http://codepen.io/himynameissal/pen/obaGJJ
Bruce Young
@mutantspore
Feb 06 2016 07:30
@manojansh ok as you said it works in codepen (just tried it).
@manojansh so it sounds like your html is not seeing your js file. can you show me what you have now
Manoj Singh
@manojansh
Feb 06 2016 07:32
What i have...where?? @mutantspore :worried:
Bruce Young
@mutantspore
Feb 06 2016 07:35
you have a js file called javascript_quote.js ? yes? and in it is a small bit of jQuery that works.
you also have a html file that is supposed to link to that file . show me teh html again . obviously both bits work but are not connected. do you also ckech your browser console for error messages?
@mynameissal set yoru text color to black color: black; and that link to imgur won’t work as it has stopped people using it like that
@mynameissal basically you are printing white text on a white background
Manoj Singh
@manojansh
Feb 06 2016 07:38
ok let me @mutantspore
Bruce Young
@mutantspore
Feb 06 2016 07:38
@mynameissal the oteh rissue as to why you can’t actually see it is that it’s under teh nav bar. you’ll beed to fix that.. i’ll look up teh css
Salman Shahid
@salman-shahid
Feb 06 2016 07:39
@mutantspore Ok, what image hosts should I use for codepen?
Bruce Young
@mutantspore
Feb 06 2016 07:39
@mynameissal
body {
  padding-top: 50px;
}
Salman Shahid
@salman-shahid
Feb 06 2016 07:39
Thanks for your help so far @mutantspore OH I SEE!
CamperBot
@camperbot
Feb 06 2016 07:39
mynameissal sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:warning: mynameissal already gave mutantspore points
Manoj Singh
@manojansh
Feb 06 2016 07:39
@mutantspore
Bruce Young
@mutantspore
Feb 06 2016 07:40
@mynameissal http://postimage.org will work or use a public link to your own dropbox if you have it
Manoj Singh
@manojansh
Feb 06 2016 07:40
    <head>
        <link rel="stylesheet" type="text/css" href="style_quote.css">
        <script type="text/javascript" src="javascript_quote.js"></script>
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

        <!-- Latest compiled JavaScript -->
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

        <title>Quote Machine</title>
    </head>

    <body style="background-color:#58FAF4">
    <div><h1>manoj</h1></div>

    </body>
</html>
@mutantspore - console says
Uncaught ReferenceError: $ is not defined
Bruce Young
@mutantspore
Feb 06 2016 07:40
@mynameissal you need to move it all down below teh fixed nav bar
Salman Shahid
@salman-shahid
Feb 06 2016 07:40
@mutantspore Ok, thanks :smile:
CamperBot
@camperbot
Feb 06 2016 07:40
mynameissal sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:warning: mynameissal already gave mutantspore points
Bruce Young
@mutantspore
Feb 06 2016 07:41
@manojansh wel that’s telling you that jquery is not linked
Salman Shahid
@salman-shahid
Feb 06 2016 07:41
I will find out how but I understand I have to use padding now
Manoj Singh
@manojansh
Feb 06 2016 07:41
@mutantspore hmmmmm :(
what to do ?
Bruce Young
@mutantspore
Feb 06 2016 07:42
http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js is the link codepen provide
Eran Finkle
@finklez
Feb 06 2016 07:45
@manojansh is this in codepan?
Manoj Singh
@manojansh
Feb 06 2016 07:45
@mutantspore not working
Eran Finkle
@finklez
Feb 06 2016 07:45
there are few things to fix here
Manoj Singh
@manojansh
Feb 06 2016 07:46
hi finkelz @finklez plz tell me
Eran Finkle
@finklez
Feb 06 2016 07:46
is this in codepan?
Manoj Singh
@manojansh
Feb 06 2016 07:46
@finklez its not in codepen, its in notepad++
Eran Finkle
@finklez
Feb 06 2016 07:46
kk
Manoj Singh
@manojansh
Feb 06 2016 07:47

``` <!DOCTYPE html>

<html>
<head>
<link rel="stylesheet" type="text/css" href="style_quote.css">
<script type="text/javascript" src="javascript_quote.js"></script>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <!-- Latest compiled JavaScript -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <title>Quote Machine</title>
</head>

<body style="background-color:#58FAF4">
<div><h1>manoj</h1></div>

</body>

</html>
``` this is my html

Eran Finkle
@finklez
Feb 06 2016 07:47
and this is your code javascript_quote.js ?
Manoj Singh
@manojansh
Feb 06 2016 07:47
oops
yes @finklez
Eran Finkle
@finklez
Feb 06 2016 07:47
you have to load it after jQuery if you use jQuery
and don't load 2 jQuerys
Manoj Singh
@manojansh
Feb 06 2016 07:48
so just before closing </head>, i should provide the link??
@finklez
Eran Finkle
@finklez
Feb 06 2016 07:49
your script always must come last, and basically JS should always be before the closing </body> tag
   <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="style_quote.css">

        <title>Quote Machine</title>
    </head>

    <body style="background-color:#58FAF4">
    <div><h1>manoj</h1></div>

        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <!-- Latest compiled JavaScript -->
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="javascript_quote.js"></script>

    </body>
</html>
Bruce Young
@mutantspore
Feb 06 2016 07:49
@manojansh bacisally the css lons can be ion teh head but teh JS should be at the bottom just before teh closing body tag. load the jquery file before the js file
Manoj Singh
@manojansh
Feb 06 2016 07:50
@finklez - you are awesome man
Eran Finkle
@finklez
Feb 06 2016 07:50
yw :D
Manoj Singh
@manojansh
Feb 06 2016 07:50
its running now!!!!! :)
thanks a ton @finklez
CamperBot
@camperbot
Feb 06 2016 07:50
manojansh sends brownie points to @finklez :sparkles: :thumbsup: :sparkles:
:star: 454 | @finklez | http://www.freecodecamp.com/finklez
Manoj Singh
@manojansh
Feb 06 2016 07:50
@mutantspore thanks to you too alot sir, for being so patient with me
CamperBot
@camperbot
Feb 06 2016 07:50
manojansh sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1087 | @mutantspore | http://www.freecodecamp.com/mutantspore
Manoj Singh
@manojansh
Feb 06 2016 07:51
@finklez can you please explain why do we add the link in the end??
Bruce Young
@mutantspore
Feb 06 2016 07:52
@manojansh to try to get the other stuff loaded first... order matters
Eran Finkle
@finklez
Feb 06 2016 07:52
@manojansh you mean why JS should be at the bottom and not in the head?
Manoj Singh
@manojansh
Feb 06 2016 07:52
@finklez yes !
Eran Finkle
@finklez
Feb 06 2016 07:54
few reasons, JS will delay the loading of the page. mostly your code cannot run anyway until the page is ready, and if there's JS error the page will be stuck, not good for viewers
that's why you always see $.ready(function, but if your script loads at the bottom you don't need it
Salman Shahid
@salman-shahid
Feb 06 2016 07:55
@mutantspore It looks like Dropbox has stopped direct linking for images even for premium users. The Imgur links were working but the image wasn't displaying because of the padding issue. Thanks, again.
CamperBot
@camperbot
Feb 06 2016 07:55
mynameissal sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:warning: mynameissal already gave mutantspore points
Eran Finkle
@finklez
Feb 06 2016 07:55
on the other hand CSS should load in the head, otherwise your page will load without CSS first, and only then you'll see the styling, very ugly
Manoj Singh
@manojansh
Feb 06 2016 07:56
oh i now understand @finklez thank you!!
CamperBot
@camperbot
Feb 06 2016 07:56
manojansh sends brownie points to @finklez :sparkles: :thumbsup: :sparkles:
:warning: manojansh already gave finklez points
Bruce Young
@mutantspore
Feb 06 2016 07:56
@mynameissal this is a link to an imag ein my dropbox
https://dl.dropboxusercontent.com/u/50030503/img/test.jpeg
it works.
imgur may work for you as it’s your account. but otehrsmay not see it. this has been a widespread issue for many campers for the last few months
Salman Shahid
@salman-shahid
Feb 06 2016 07:58
I see, how did you generate the dropbox image link?
I am using the desktop client on windows.
Bruce Young
@mutantspore
Feb 06 2016 07:59
@mynameissal show me the link you tried for dropbox. it’s a public link?
That's the link I get when I right click image -> share Dropbox link (windows explorer
Bruce Young
@mutantspore
Feb 06 2016 08:00
well i can see it .. a forest but i’ll show you what wil work for sure
one sec
Salman Shahid
@salman-shahid
Feb 06 2016 08:01
Ok, thanks. I see the pattern in the URL.
Bruce Young
@mutantspore
Feb 06 2016 08:01
:)
Eran Finkle
@finklez
Feb 06 2016 08:03
@mynameissal nice pic, did you take it?
Munish Tayal
@munishtayal
Feb 06 2016 08:03
$(document).ready(function(){
    var latitude;
    var longitude;
    var description;
    var temperature;
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            latitude =  position.coords.latitude;
            longitude = position.coords.longitude;
            $.getJSON("api.openweathermap.org/data/2.5/weather?lat='"+latitude+"'&lon='"+longitude+"'&units=metric", function(json){
                //description = json.weather.description;
                //temperature = json.main.temp;
                $("h1").text(JSON.stringify(json));
            });


        });
    }
Is there anything wrong in code. I am not getting the string output ?
Eran Finkle
@finklez
Feb 06 2016 08:04
why do you quote the values? '"+latitude+"'
Bruce Young
@mutantspore
Feb 06 2016 08:04
remove the single quotes
Munish Tayal
@munishtayal
Feb 06 2016 08:05
@finklez i saw somewhere written like that. But after removing also i am not getting the output
Bruce Young
@mutantspore
Feb 06 2016 08:06
@munishtayal remove the and leave the
@munishtayal your pen again?
Munish Tayal
@munishtayal
Feb 06 2016 08:07
"api.openweathermap.org/data/2.5/weather?lat="+latitude+"&lon="+longitude+"&units=metric"
Bruce Young
@mutantspore
Feb 06 2016 08:07
@munishtayal ok you also need an api key
Munish Tayal
@munishtayal
Feb 06 2016 08:07
this is the way right?
@mutantspore from where can i get that
Bruce Young
@mutantspore
Feb 06 2016 08:08
@munishtayal and you also need to add http:// to the front of the URL
Salman Shahid
@salman-shahid
Feb 06 2016 08:08
@finklez No, I wish! https://pixabay.com/photo-931706/
Eran Finkle
@finklez
Feb 06 2016 08:08
@mynameissal :D maybe one day
Bruce Young
@mutantspore
Feb 06 2016 08:08
@munishtayal go to the open weather map site and sign up (free)
Munish Tayal
@munishtayal
Feb 06 2016 08:08
@mutantspore ok
@mutantspore i got the api key. now how to use that?
Bruce Young
@mutantspore
Feb 06 2016 08:12
@munishtayal well you’ll need to add it to your URL &APPID=OWM_API_KEY
Munish Tayal
@munishtayal
Feb 06 2016 08:12
@mutantspore ok thanks again :)
CamperBot
@camperbot
Feb 06 2016 08:12
munishtayal sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1088 | @mutantspore | http://www.freecodecamp.com/mutantspore
Bruce Young
@mutantspore
Feb 06 2016 08:13
don’t forget to add http://to the front of the URL
Munish Tayal
@munishtayal
Feb 06 2016 08:22
@mutantspore Done with getting json. but now i am getting everything except weather.description Don't know why
Bruce Young
@mutantspore
Feb 06 2016 08:22
@munishtayal json.weather[0].description it’s in an array also
Munish Tayal
@munishtayal
Feb 06 2016 08:24
@mutantspore you are awesome
Bruce Young
@mutantspore
Feb 06 2016 08:24
lol
Munish Tayal
@munishtayal
Feb 06 2016 08:27
@mutantspore One more question. where can i check that how many type of weathers it show because i have to display the pics accordingly
like cloudy rainy etc?
Bruce Young
@mutantspore
Feb 06 2016 08:28
scroll down a bit
Munish Tayal
@munishtayal
Feb 06 2016 08:30
@mutantspore got it
tommy
@tommygebru
Feb 06 2016 08:40
I have created an image and want to use as an icon so I can use it in my code ....
how do i do this ? So I can change its color, size, background, etc. :smile:
kirbyedy
@kirbyedy
Feb 06 2016 08:42
are you familiar with any of the raster based manipulating software?
like photoshop or gimp
tommy
@tommygebru
Feb 06 2016 08:57
@kirbyedy I used affinity designer and was able to export as .png :smile:
Bruce Young
@mutantspore
Feb 06 2016 08:57
@tommygebru with transparent areas?
css can resize it and you can put it over a colored back ground
i did see something about filters to chnage it’s color
tommy
@tommygebru
Feb 06 2016 09:01
@mutantspore I have it in my codepen :+1: yes, i want it to have negative space :smile:
http://codepen.io/gebrutommy/pen/KVGywq
Bruce Young
@mutantspore
Feb 06 2016 09:05
@tommygebru well just the normal height and width will deal with it’s size in css
are you trying to fill it like the demo?
tommy
@tommygebru
Feb 06 2016 09:06
@mutantspore I want to be able to use the space around the gray area like an icon or image so that I can place icons within it like your pomodoro :smile:
Bruce Young
@mutantspore
Feb 06 2016 09:07
oooh lol well it can be a background to a div
mine is html5 canvas overlaid with a div positioned exactly “above” it
@tommygebru i used some font icons from Icomoon but fontawesome would work also for the play, pause, stop etc
tommy
@tommygebru
Feb 06 2016 09:11
@mutantspore I can get new icons :wink2: but i am not able to change the current image like an icon ..... that is my issue :worried:
tommy
@tommygebru
Feb 06 2016 09:26
ok thanks i will try this :smile: @mutantspore
CamperBot
@camperbot
Feb 06 2016 09:26
tommygebru sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1089 | @mutantspore | http://www.freecodecamp.com/mutantspore
Bruce Young
@mutantspore
Feb 06 2016 09:32
@tommygebru i just had a small play with making a colored background and resizing it.
you could position icons in a div and also use the z-index attribute to make sure things are on top of what you want
http://codepen.io/MutantSpore/pen/xZyPRM
mess about with border radius to make a circular div (50%)
tommy
@tommygebru
Feb 06 2016 09:36
@mutantspore Yes i understand i can work around it but it would have been cool to be able to change the color and make it darker or even ...like if i make something like this and want to share it ....what do i do ?
Bruce Young
@mutantspore
Feb 06 2016 09:36
you want the actual grey bits of your png to change color?
Bruce Young
@mutantspore
Feb 06 2016 09:45
@tommygebru I think you really should go back a step or two and look at SVG. perhaps your image creation program can export your “icon” as that. you’ll have much more flexibility then.
yes the program you mention seems to deal with SVG
Maddah Anass
@unlimiworks
Feb 06 2016 09:48
Can anyone please check if i'm taking the right approach JS wise for my project ? I feel like my code is hackish and filled with chained JQuery methods
Please excuse the eyesore design, it's just a minimum viable product
steve
@davidsonsteve
Feb 06 2016 10:32
gmorning/afternoon/evening everybody, if anyone is around I was just curious if anyone had any suggestions about where to host an image in order to use it in these dev projects?
fluffystub
@RakshithNM
Feb 06 2016 10:39
when my viewport is small and when the i click on the icon bars it doesnot show the nav bar contents
how do i do it?
tommy
@tommygebru
Feb 06 2016 10:43
@davidsonsteve i have been using photobucket :smile: imgur is buggy and removes my images from codepen !
fluffystub
@RakshithNM
Feb 06 2016 10:52
@davidsonsteve @tommygebru i use photobucket
Tomáš Kalný
@Sleepy-guy
Feb 06 2016 11:15
http://codepen.io/Sleepy-guy/pen/adqjjq?editors=0010 I am asking for like 10 time now ... CAN SOMEONE HELP ? parseInt is probably not working and also line 28.... I tried to search on google but i have found no solution...
Sacharias Sjöqvist
@sacharias
Feb 06 2016 11:32
Is this weather app broken for someone else except me? http://codepen.io/FreeCodeCamp/full/bELRjV
Salman Shahid
@salman-shahid
Feb 06 2016 11:51
@sacharias It is broken for me, too.
kirbyedy
@kirbyedy
Feb 06 2016 12:18
does not work @sacharias
Robert Uivarosi
@URobert
Feb 06 2016 12:27
@sacharias works fine for me
Sacharias Sjöqvist
@sacharias
Feb 06 2016 12:27
Well it could be my location (Stockholm, Sweden). Do someone have a working weather app I can take a look at? :)
Eran Finkle
@finklez
Feb 06 2016 12:35
@sacharias aye, a sec
it's not styled well, but i hope it works http://codepen.io/finklez/full/KVBdgG/
Robert Uivarosi
@URobert
Feb 06 2016 12:40
Micha
@radogost
Feb 06 2016 12:40
Hi guys. I have a question regarding the wikipedia viewer (Here is my version): http://codepen.io/radogost/pen/KVeZMd If you click at the icon, it opens, you can close it by clicking at the cross. However, a bar of the cross remains until the input element is fully closed. Can someone explain to me this behavior and how I may fix this?
Salman Shahid
@salman-shahid
Feb 06 2016 12:41

For: https://jsfiddle.net/himynameissal/ms81jtkr/16/

How do I get this to work:

#home {
  padding-top: 50px;
  background-image: url("https://dl.dropboxusercontent.com/s/v0x70o7ofppmmjk/forest-931706.jpg");
  height: auto;
  width: 100%;
}
Eran Finkle
@finklez
Feb 06 2016 12:41
@URobert i get Not Available on everything?
Robert Uivarosi
@URobert
Feb 06 2016 12:41
@finklez is geo location feedback accepted by your browser?
@finklez works fine for me, and for several other people
Eran Finkle
@finklez
Feb 06 2016 12:42
i didn't get that popup at all
Salman Shahid
@salman-shahid
Feb 06 2016 12:42
I am trying to set a background image in my home div tag where the width is 100% and height is adjusted so it fits the whole screen.
Robert Uivarosi
@URobert
Feb 06 2016 12:42
@finklez what os ?
@finklez and which browser?
Eran Finkle
@finklez
Feb 06 2016 12:42
divs don't need width 100%, it's their default settings @mynameissal
@URobert Win7 Chrome latest
Salman Shahid
@salman-shahid
Feb 06 2016 12:43
Nvm, I will research.
Robert Uivarosi
@URobert
Feb 06 2016 12:43
@finklez strange. works fine for me. I get the pop-up even when accessing from a mobile device (tablet and phone)
Eran Finkle
@finklez
Feb 06 2016 12:44
@mynameissal you prob need this html, body { height:100%; } both in fiddler and codepan , then add on your divs height:100% instead of auto
Robert Uivarosi
@URobert
Feb 06 2016 12:44
@finklez did you try to open from gitter or dif window ?
Eran Finkle
@finklez
Feb 06 2016 12:45
@URobert trying
ok, twas my issue, i prob disabled all requests from codepan, now it works
Salman Shahid
@salman-shahid
Feb 06 2016 12:47
@finklez for my portfolio I need 4 different background images would I have my 4 divs for each background image in the body and set each to 25% height while body is 100% height?
Eran Finkle
@finklez
Feb 06 2016 12:48
@radogost are you using jQuery hide()?
@mynameissal depends on how you want it, first have a common class on all 4 so it's easier to control, if you set it to 100% then each will be height of screen, if 25% you'll have 4 divs inside 1 screen and no scroll
Manoj Singh
@manojansh
Feb 06 2016 12:50
@finklez sir you there?
Salman Shahid
@salman-shahid
Feb 06 2016 12:50
@finklez I see..thanks I will do more research. Thanks :smile:
CamperBot
@camperbot
Feb 06 2016 12:50
mynameissal sends brownie points to @finklez :sparkles: :thumbsup: :sparkles:
:star: 456 | @finklez | http://www.freecodecamp.com/finklez
Manoj Singh
@manojansh
Feb 06 2016 12:51
I need some help
Eran Finkle
@finklez
Feb 06 2016 12:52
@manojansh aye :D
@mynameissal regarding the top space for nav, you should have the padding on the body not the #page
Manoj Singh
@manojansh
Feb 06 2016 12:53
@finklez - did you see the sample quote machine which is already provided in ziplines?
Eran Finkle
@finklez
Feb 06 2016 12:53
@mynameissal here's an updated ver https://jsfiddle.net/ms81jtkr/21/
@manojansh aye did that
Manoj Singh
@manojansh
Feb 06 2016 12:54
@finklez -when we click for next quote the background also changes, so can we apply random function and integrate with replace class to change the background?
Salman Shahid
@salman-shahid
Feb 06 2016 12:55
@finklez Wow, thanks. Hopefully I remember this for next time.
CamperBot
@camperbot
Feb 06 2016 12:55
mynameissal sends brownie points to @finklez :sparkles: :thumbsup: :sparkles:
:warning: mynameissal already gave finklez points
Eran Finkle
@finklez
Feb 06 2016 12:56
@manojansh just have few classes ready for diff backgrounds, and change class each time, you can have a lookup obj for those classes
or an array, and do random on the array index
Manoj Singh
@manojansh
Feb 06 2016 12:57
ok @finklez and also i need to know if we can change the background color of whole page without styling the body tag, if it is possible to set background color by styling div??
Eran Finkle
@finklez
Feb 06 2016 12:59
everything with classes, class color1, color2, then randomize a number and do removeClass().addClass('color'+randomNumber)
you can ofc, also do it inline randomize the hex numbers and use css({backgroundColor: '#'+randHex})
Micha
@radogost
Feb 06 2016 13:01
@finklez : No, I don't use jquery hide() since I toggle the class open with a cross.click
Sebastian Chirila
@DrSebic
Feb 06 2016 13:02
Hey guys! I have a question about playing an audio file for the Simon zipline. How can I have the sound played for a second and then pause for a second, then repeat the process?
Manoj Singh
@manojansh
Feb 06 2016 13:03
@finklez - thank you :)
CamperBot
@camperbot
Feb 06 2016 13:03
manojansh sends brownie points to @finklez :sparkles: :thumbsup: :sparkles:
:star: 457 | @finklez | http://www.freecodecamp.com/finklez
Eran Finkle
@finklez
Feb 06 2016 13:04
@DrSebic if you use the video tag it has an api you can control
i.e https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video
var v = document.getElementsByTagName("video")[0];
v.play();
v.pause();
Sebastian Chirila
@DrSebic
Feb 06 2016 13:06
Thanks @finklez , I am checking it out now.
CamperBot
@camperbot
Feb 06 2016 13:06
drsebic sends brownie points to @finklez :sparkles: :thumbsup: :sparkles:
:star: 458 | @finklez | http://www.freecodecamp.com/finklez
Raghu
@RaghuChandrasekaran
Feb 06 2016 14:12
Hi all
:)
Lee Croydon
@leeCroydon
Feb 06 2016 14:14
Hi everyone, can someone please explain to me where I'm going wrong here please. is it scope? or the call to input the inspiration objects into #quote/#author that is the issue for the string not sliding back down? http://codepen.io/leecroydon/pen/WrgeGx?editors=1010
Raghu
@RaghuChandrasekaran
Feb 06 2016 14:17
I have a question regarding the design which i saw in a site that I was browsing.
Link
In that site from the place where it starts "A day at the Box Office",I find that even if we scroll it gives a feeling that the page is almost static with content alone changing.
What is that effect called?
Salman Shahid
@salman-shahid
Feb 06 2016 14:40
brownies for anyone who can notice the cool thing I did for my portfolio site! https://jsfiddle.net/himynameissal/ms81jtkr/88/
@RaghuChandrasekaran Nvm, I'm wrong I thought you were talking abou the scrolling motion.
Salman Shahid
@salman-shahid
Feb 06 2016 14:46
Also, that site is so cool. I hope I can make something similar some day.
Andrew Schmidthuber
@calicode
Feb 06 2016 14:47
@mynameissal is it the navbar color change?
Salman Shahid
@salman-shahid
Feb 06 2016 14:52
@calicode Thanks :D I feel amazing even though I know it's something small. ahaha
CamperBot
@camperbot
Feb 06 2016 14:52
mynameissal sends brownie points to @calicode :sparkles: :thumbsup: :sparkles:
:star: 322 | @calicode | http://www.freecodecamp.com/calicode
Eran Finkle
@finklez
Feb 06 2016 15:10
@RaghuChandrasekaran i don't know if it has a name, i believe they detect the range of the scrollbar, and make the div fixed position, then change its content until the scroll position pass a certain point, then just continue normally
Salman Shahid
@salman-shahid
Feb 06 2016 15:12
For the quote machine challenge can we hardcode the quotes or should we use an API?
Sacharias Sjöqvist
@sacharias
Feb 06 2016 15:13
I can't make a $.getJSON request, can somebody understand what I have done wrong? https://jsfiddle.net/sasjoq/kqeowetx/
Eran Finkle
@finklez
Feb 06 2016 15:13
@RaghuChandrasekaran it seems like they use this plugin http://janpaepke.github.io/ScrollMagic/
@mynameissal i hard coded it
Sacharias Sjöqvist
@sacharias
Feb 06 2016 15:13
@mynameissal I hardcoded it too :)
PenJones
@PenJones
Feb 06 2016 15:14
Anyone know what's up with the Javscript here? http://codepen.io/PenJones/full/NxLdXY/
This is the javacscript itself, I think It might be not closing something but I can't see it

```
var time;
var minutes;
var seconds;
var sMinutes;
var sSeconds;
var on = false;
var breaking = false;
var interval;
var breakTime = $("#breakT").text();
var workTime = $("#workT").text();

$("#Start").on("click", function() {
time = $("#timer").text().split(":");
minutes = time[0];
seconds = time1;
if (on == false) {
on = true;
$("#Start").text("Stop");
$("#Start").css("background-color", "red");
$("#middle").text("On")

interval = setInterval(function() {
    seconds++;

    if (seconds == 59) {
      minutes++;
      seconds = 0;
    }

    if (breaking == false) {
      if (workTime == minutes) {
        minutes = 0;
        seconds = 0;
        breaking = true;
        $("middle").text("Breaking");
        alert("Break Time!");
      } else {
        if (minutes == breakTime) {
          minutes = 0;
          seconds = 0;
          breaking = false;
          $("middle").text("Working");
          alert("Work Time!");
        }
      }

      if (minutes < 10 && minutes > 0) {
        sMinutes = "0" + minutes;
      } else {
        sMinutes = minutes;
      }

      if (seconds < 10) {
        sSeconds = "0" + seconds;
      } else {
        sSeconds = seconds;
      }

      $("#timer").text(sMinutes + ":" + sSeconds);

    }, 1000);
} else if (on == true) {
  on = false;
  $("#Start").text("Start");
  $("#Start").css("background-color", "#33cc33");
  $("#middle").text("Paused")

  clearInterval(interval);
} else {
  $("#timer").text("ERROR");
}

}
});

$("#Reset").on("click", function() {
if (on == false) {
$("#timer").text("00:00")
$("#middle").text("Blank")
}
});

$("#bPlus").on("click", function() {
if (on == false) {
breakTime++;
$("#breakT").text(breakTime);
}
});

$("#bMinus").on("click", function() {
if (breakTime > 0 && on == false) {
breakTime--;
$("#breakT").text(breakTime);
}
});

$("#wPlus").on("click", function() {
if (on == false) {
workTime++;
$("#workT").text(workTime);
}
});

$("#wMinus").on("click", function() {
if (workTime > 0 && on == false) {
workTime--;
$("#workT").text(workTime);
}
});
``

oh, well that didn't work xD

```
var time;
var minutes;
var seconds;
var sMinutes;
var sSeconds;
var on = false;
var breaking = false;
var interval;
var breakTime = $("#breakT").text();
var workTime = $("#workT").text();

$("#Start").on("click", function() {
time = $("#timer").text().split(":");
minutes = time[0];
seconds = time1;
if (on == false) {
on = true;
$("#Start").text("Stop");
$("#Start").css("background-color", "red");
$("#middle").text("On")

interval = setInterval(function() {
    seconds++;

    if (seconds == 59) {
      minutes++;
      seconds = 0;
    }

    if (breaking == false) {
      if (workTime == minutes) {
        minutes = 0;
        seconds = 0;
        breaking = true;
        $("middle").text("Breaking");
        alert("Break Time!");
      } else {
        if (minutes == breakTime) {
          minutes = 0;
          seconds = 0;
          breaking = false;
          $("middle").text("Working");
          alert("Work Time!");
        }
      }

      if (minutes < 10 && minutes > 0) {
        sMinutes = "0" + minutes;
      } else {
        sMinutes = minutes;
      }

      if (seconds < 10) {
        sSeconds = "0" + seconds;
      } else {
        sSeconds = seconds;
      }

      $("#timer").text(sMinutes + ":" + sSeconds);

    }, 1000);
} else if (on == true) {
  on = false;
  $("#Start").text("Start");
  $("#Start").css("background-color", "#33cc33");
  $("#middle").text("Paused")

  clearInterval(interval);
} else {
  $("#timer").text("ERROR");
}

}
});

$("#Reset").on("click", function() {
if (on == false) {
$("#timer").text("00:00")
$("#middle").text("Blank")
}
});

$("#bPlus").on("click", function() {
if (on == false) {
breakTime++;
$("#breakT").text(breakTime);
}
});

$("#bMinus").on("click", function() {
if (breakTime > 0 && on == false) {
breakTime--;
$("#breakT").text(breakTime);
}
});

$("#wPlus").on("click", function() {
if (on == false) {
workTime++;
$("#workT").text(workTime);
}
});

$("#wMinus").on("click", function() {
if (workTime > 0 && on == false) {
workTime--;
$("#workT").text(workTime);
}
});
``

Salman Shahid
@salman-shahid
Feb 06 2016 15:17
This message was deleted
This message was deleted
PenJones
@PenJones
Feb 06 2016 15:18
wait where?
Salman Shahid
@salman-shahid
Feb 06 2016 15:19
Nvm, I think I am wrong. I don't know.
PenJones
@PenJones
Feb 06 2016 15:19
kk
Raghu
@RaghuChandrasekaran
Feb 06 2016 15:20
@mynameissal @finklez Thanks guys
CamperBot
@camperbot
Feb 06 2016 15:20
raghuchandrasekaran sends brownie points to @mynameissal and @finklez :sparkles: :thumbsup: :sparkles:
:star: 281 | @mynameissal | http://www.freecodecamp.com/mynameissal
:star: 461 | @finklez | http://www.freecodecamp.com/finklez
Raghu
@RaghuChandrasekaran
Feb 06 2016 15:21
@mynameissal What is NVM by the way?
@finklez Scrollmagic it is :)
PenJones
@PenJones
Feb 06 2016 15:21
@RaghuChandrasekaran NVM = nevermind
Eran Finkle
@finklez
Feb 06 2016 15:21
@sacharias open your console. you'll see the prob Mixed Content: The page at 'https://fiddle.jshell.net/sasjoq/kqeowetx/show/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=xx'. This request has been blocked; the content must be served over HTTPS.
Raghu
@RaghuChandrasekaran
Feb 06 2016 15:22
@PenJones alryt :+1:
Eran Finkle
@finklez
Feb 06 2016 15:23
@PenJones if you run into problems, use your console. you might find errors that will guide you, or use some js linter like http://www.jslint.com/
PenJones
@PenJones
Feb 06 2016 15:23
@finklez wait there's a console, how do I open it?
Eran Finkle
@finklez
Feb 06 2016 15:23
on windows F12
and go to console tab
Tomáš Kalný
@Sleepy-guy
Feb 06 2016 15:52
http://codepen.io/Sleepy-guy/pen/adqjjq .... I think from line 25-28 is not working can you help me with that?
Eran Finkle
@finklez
Feb 06 2016 16:00
@Sleepy-guy first issue #27 indexOf(test) , indexOf is used on str/array str.indexOf(x)
PenJones
@PenJones
Feb 06 2016 16:01
hmmm
my javascript still isn't work for some reason
Eran Finkle
@finklez
Feb 06 2016 16:01
@Sleepy-guy to get values jQuery has val() so $(this).attr('value') => $(this).val()
you already have the value var test = $(this).attr('value');, why getting it again here operation = $(this).attr('value');, you can just do operation = test
don't repeat $('#answer').val('xx') keep it in a var var $ans = $('#answer'), and use $and.val('xx') each time you do that jQuery looks for the element
Eran Finkle
@finklez
Feb 06 2016 16:07
@PenJones do you understand how pomodoro works? you have to count backwards starting with the time set by the +/-
PenJones
@PenJones
Feb 06 2016 16:08
?
oh right
so I have to take work time and when it equals 0 goto break time
that's no hard
to fix
oh wow
right
Tomáš Kalný
@Sleepy-guy
Feb 06 2016 16:14
@finklez oh my god thank you you saved me ... i was fighting with this for 2 weeks and for 3 days I was looking at code and had no idea whats wrong with him and even when I asked nobody answered... now its working well at least + is i will work on other operations :D
CamperBot
@camperbot
Feb 06 2016 16:14
sleepy-guy sends brownie points to @finklez :sparkles: :thumbsup: :sparkles:
:star: 463 | @finklez | http://www.freecodecamp.com/finklez
Eran Finkle
@finklez
Feb 06 2016 16:15
@Sleepy-guy i can only suggest strongly to keep the browser console open, hopefully you are familiar with that
when i opened the console it was there, first thing to notice
Tridev
@TridevGuha
Feb 06 2016 16:19
Hello, I am confused how to start to code on http://www.freecodecamp.com/challenges/build-a-pomodoro-clock
Dan Stockham
@DanStockham
Feb 06 2016 16:24
I'm starting to understand this tic tac toe better. There needs to be a state for the ai go off by.
Andrew Charlebois
@andrewchar
Feb 06 2016 16:26
I can't make up my mind with what font i want to use for my portfolio lol
to many to pick from
Brett
@BLayman
Feb 06 2016 16:39
Just getting started on my calculator. I'm not sure how to get rid of the "undefined" that appears first on my screen when I type in some numbers. I understand that it appears because there is initially no content on the screen, but I don't know how to resolve that without making things complicated. Here it is: http://codepen.io/BrettPen/pen/jWeLgN
Eran Finkle
@finklez
Feb 06 2016 16:44
@BLayman lol where is the = sign?
i don't see any undefined, do you see it immediately?
Brett
@BLayman
Feb 06 2016 16:46
I forgot to save it before copying the link, here's the newer version: http://codepen.io/BrettPen/pen/jWeLgN?editors=1010
So far I just want the numbers to show up on the screen
Matt Yamamoto
@MattYamamoto
Feb 06 2016 16:47
@BLayman just initialize output as an empty string.
@BLayman or, if you're insistent on using a selector there (although there isn't really a reason), you need to use jQuery's html method with the jQuery selector. var output = $(".screen").html();
Eran Finkle
@finklez
Feb 06 2016 16:49
@BLayman don't mix jQuery elements with JS functions $(".screen").innerHTML, either .html() or $(".screen")[0].innerHTML
:D as said above
Matt Yamamoto
@MattYamamoto
Feb 06 2016 16:50
:+1:
Brett
@BLayman
Feb 06 2016 16:59
Yeah I'm completely new to using DOM and jquery, so I don't really know how to use them. It's too bad there aren't many tutorials on those. I tried replacing .innerHTML with .html(), and now it doesn't work. I also tried initializing "output" as a string, and then setting it equal to the screen's content, but I still have the same problem. I guess I'm not sure what you meant by that.
Rex Schrader
@SaintPeter
Feb 06 2016 17:02

Saturday Summit is Live on Twitch.Tv

http://www.twitch.tv/freecodecamp
Bruce Young
@mutantspore
Feb 06 2016 17:03
@BLayman var input = $(this).html();
Matt Leonard
@matty22
Feb 06 2016 17:11
Working on Local Weather app. I have parsed out the city name from the object, but there doesn't seem to be anything in that object that would allow me to grab a US state? suggestions on how to do that?
Brett
@BLayman
Feb 06 2016 17:20
@MattYamamoto @finklez Got it working by using .html(), had some syntax errors at first. Thanks guys. Btw, is there a downside to using jquery over regular DOM javascript? I've been using it because there are more tutorials out there on it, but in many cases I guess it's unnecessary.
CamperBot
@camperbot
Feb 06 2016 17:20
blayman sends brownie points to @mattyamamoto and @finklez :sparkles: :thumbsup: :sparkles:
:star: 905 | @mattyamamoto | http://www.freecodecamp.com/mattyamamoto
:star: 465 | @finklez | http://www.freecodecamp.com/finklez
Eran Finkle
@finklez
Feb 06 2016 17:21
@BLayman on the contrary, always use jQuery for DOM stuff, it addresses browser compatibility, but you might want to use pure JS for anything else
you really don't want to write diff events etc for each browser, and to go around all sorta quirks
Brett
@BLayman
Feb 06 2016 17:24
@finklez That's good to know, jQuery seems easier to use as well.
Eran Finkle
@finklez
Feb 06 2016 17:24
alot easier yes
try to do an ajax call with JS you'll see the diff
but don't abandon JS, when/if you want to do real programming, you must have good JS skills
Brett
@BLayman
Feb 06 2016 17:31
Yeah I might want to try using JS sometimes just to learn the methods.
Dan Stockham
@DanStockham
Feb 06 2016 17:45
writing the pseudo code is helping me a little bit but I'm unsure of my logic.
//build an object constructor that tells us the state of the game.
  //if parma old is not undefined
    //takes the old object and creates an updated one.    
  //else
    //create state object with reset values within properties


//terminal function. Tests if game is over
  //call constructor to build state object
  //is there a match horizontally on the grid?
    //return true
  //is there a match vertically on the grid?
    //return true
  //is there a match diagonally on the grid?
    //return true
  //have all the spaces been taken on the grid?
    //return "Draw"
    //pass undefined to State constructor 

//turn function. 
  //AI movement 
    //minimax algo will help the ai make the  perfect move
    //if terminal called and returns true
      //AI wins
  //Player movement
    //player chooses empty square to place symbol
    //if terminal called and returns true
      //player wins
Natalia
@petajamaja
Feb 06 2016 18:57
Hello, I am in the middle of doing my first zipline (portfolio) and I have trouble with links. I tested it on Firefox 44.0 & Safari 8.0.8 , Mac OS X 10.10.5 - the problem is that no links are being opened. The common solution of adding target="_blank" to my href doesn't help at all. I also tried embedding JavaScript code with event handling inside the anchor element but that didn't work either. The problematic place is for example at section 105 of my pen
I would be extremely grateful for any suggestions.
Eddy Mogollon Soto
@Eddymogollon
Feb 06 2016 19:06
Anyone here finished the Camper News zipline?
Tom Lorimer
@Ellf
Feb 06 2016 19:15
yes
Any suggestions for creating the UI for Simon game? I've started with Canvas but seems cumbersome - what about paper.js or another library.
Eddy Mogollon Soto
@Eddymogollon
Feb 06 2016 19:17
@Ellf Do you know how to make this: timePosted: 1454708798444 to Fri, 05 Feb 2016?
Tom Lorimer
@Ellf
Feb 06 2016 19:17
it's a unix time
Eddy Mogollon Soto
@Eddymogollon
Feb 06 2016 19:21
awesome, thanks!!
Tom Lorimer
@Ellf
Feb 06 2016 19:29
you're welcome :)
Natalia
@petajamaja
Feb 06 2016 19:31
Have just tested it on Opera... no result either
Shannon Latham
@shannon-latham
Feb 06 2016 19:42
@petajamaja It appears that your word cload image that you use for your background is actually on top of your other content. If you set the display of that image to display: none; in DevTools you can see that your links start working. Essentially, all your mouse events are being caught be the image.
@petajamaja The simple fix for that would be to add pointer-events: none to that image's css
Andrew Charlebois
@andrewchar
Feb 06 2016 20:00
hi campers. i am having a problem and unsure how to even search google to fix it
ill inlk my pen. so as you see my home page. i have a welcome message but its having its brightness reduced along with my background picture and im unsure how to make this not happen
Irina
@2Irina2
Feb 06 2016 20:03
Hi there!
Anyone available to help me fix a bug on my calculator?
Tom Lorimer
@Ellf
Feb 06 2016 20:05
Hi @andrewchar - it's the brightness filter you have in your css that's doing that
Hi @2Irina2 I can try to help
Andrew Charlebois
@andrewchar
Feb 06 2016 20:05
yes i just want the filter to do it for my picture and not my text
For now, just the sqrt, 1/x and * buttons are working
the problem is that the second operation always returns zero
the first operation i do returns the correct answer, but after that, i dont know why, no operation works fine and it just displays zero
Deepak Mahudeswaran
@mdepak
Feb 06 2016 20:09
Andrew Charlebois
@andrewchar
Feb 06 2016 20:10
i fixed the problem, needed a pseudo class
Tom Lorimer
@Ellf
Feb 06 2016 20:12
nice @andrewchar
Tom Lorimer
@Ellf
Feb 06 2016 20:24
@2Irina2 - sorry I got busy at work - put ' around the equal so it's '''$("[value='equal']").click(function(){'''
CamperBot
@camperbot
Feb 06 2016 20:24
:bulb: to format code use backticks! ``` more info
Tom Lorimer
@Ellf
Feb 06 2016 20:24
$("[value='equal']").click(function(){
Irina
@2Irina2
Feb 06 2016 20:25
@Ellf sorry but that did not fix it :/
Tom Lorimer
@Ellf
Feb 06 2016 20:26
Hey @mdepak there's a broken link on one of your images.looks like your "like" image. The images all being resized makes some of them seem strange to look at
@2Irina2 let me check again what I did
Irina
@2Irina2
Feb 06 2016 20:27
@Ellf sure
Tom Lorimer
@Ellf
Feb 06 2016 20:29
For me it works if it's the first time I've clicked on =. If I then press CE and try again the 2nd time it returns 0, 0
if (op == "multiply") { console.log('multiply'); console.log(firstNumber, secondNumber); answer = multiply(firstNumber, secondNumber); } equal();
help code
CamperBot
@camperbot
Feb 06 2016 20:30

:point_right: 10 steps to plan better so you can write less code [wiki]

Learn how to plan your future project!

Blog post written by BiancaMihai - GitHub / Twitter

An ounce of preparation is worth a pound of cure. That's true in medicine, and that's definitely true in software development.

Here's a structured 10-step workflow that will guide you through the app planning process, with the goal of saving you from writing a lot of unnecessary code.

Together, we'll plan out a simple "To-do" single-page web app. We'll also plan for an API backend for a future mobile app.

1) Create our Trello board

Trello is a fun, free way to break your planning and development process into small tasks that can be tracked.

Image of Trello board

Here's what our Trello board will eventually look like. I prefer to split my tasks into 3 columns (depending on the complexity of the project):

Tom Lorimer
@Ellf
Feb 06 2016 20:30
lol wrong help
Matt Yamamoto
@MattYamamoto
Feb 06 2016 20:34
@2Irina2 you have a click binding issue where you are creating multiple click events. In your getOperation() function you are creating a click event for your equals button. Well everytime you run getOperation() you create another click event... so the second time you click an operator you actually run your click event twice, and the second time it runs everything is zero, so the result is zero.
Irina
@2Irina2
Feb 06 2016 20:34
@Ellf well yeah, that's the problem.. it should not return 0
@MattYamamoto ooh so you are saying i should take the $("[value=equal]").click out of getOperation() ?
Matt Yamamoto
@MattYamamoto
Feb 06 2016 20:37
@2Irina2 yes... but you'll have to refactor a bit since that is dependant upon the var op
Natalia
@petajamaja
Feb 06 2016 20:40
@shannon-latham Thanks a lot, I will try this solution and let you know if it works!
CamperBot
@camperbot
Feb 06 2016 20:40
petajamaja sends brownie points to @shannon-latham :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for shannon-latham
Matt Yamamoto
@MattYamamoto
Feb 06 2016 20:41
@2Irina2 alternatively you could just unbind the click event in your equal() function, though that wouldn't be my first choice.
Natalia
@petajamaja
Feb 06 2016 20:43
@shannon-latham Heeey thanks it worked! Huge thanks and have a nice day (or night)
CamperBot
@camperbot
Feb 06 2016 20:43
petajamaja sends brownie points to @shannon-latham :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for shannon-latham
Shannon Latham
@shannon-latham
Feb 06 2016 20:44
@petajamaja You're welcome! Happy to help. (day)
Irina
@2Irina2
Feb 06 2016 20:45
@MattYamamoto thank you so much!
CamperBot
@camperbot
Feb 06 2016 20:45
2irina2 sends brownie points to @mattyamamoto :sparkles: :thumbsup: :sparkles:
:star: 906 | @mattyamamoto | http://www.freecodecamp.com/mattyamamoto
Irina
@2Irina2
Feb 06 2016 20:45
@MattYamamoto it's working now :)
Tom Lorimer
@Ellf
Feb 06 2016 20:45
Times like these when I realize I still have lots to learn.
Catalin Scripcariu
@CatalinScr
Feb 06 2016 20:48
Hi, I have finished the interface of the pomodoro. Any feedback: http://s.codepen.io/CatalinScr/debug/XXEKya
Matt Yamamoto
@MattYamamoto
Feb 06 2016 20:48
@mdepak the images are all streched out, which looks kind of weird. Also, you are setting the styles inline, better practice would be to use css for that.
@CatalinScr looks good. For some reason I don't like the times in the boxes with the shadow, but that might just be a persona preference. Also, there is small horizontal scroll.
Tom Lorimer
@Ellf
Feb 06 2016 21:01
@CatalinScr I agree with @MattYamamoto I also think you should look at how to disable the selector box from appearing when you click the start button.
Jesse Jafa
@awareness481
Feb 06 2016 21:02

I'm trying to place background images similar to the Personal Portofolio example http://codepen.io/FreeCodeCamp/full/VemmoX/. Anyway pointers on what I should search or do?

Basically what I'm trying to do is make the background image 'fill' the whole div, if that makes sense.

Tom Lorimer
@Ellf
Feb 06 2016 21:03
have a search for CSS "cover"
Jesse Jafa
@awareness481
Feb 06 2016 21:03
Alright, thanks @Ellf
CamperBot
@camperbot
Feb 06 2016 21:03
tstusr441 sends brownie points to @ellf :sparkles: :thumbsup: :sparkles:
:star: 317 | @ellf | http://www.freecodecamp.com/ellf
Catalin Scripcariu
@CatalinScr
Feb 06 2016 21:04
@Ellf @MattYamamoto thanks for feedback
CamperBot
@camperbot
Feb 06 2016 21:04
catalinscr sends brownie points to @ellf and @mattyamamoto :sparkles: :thumbsup: :sparkles:
:star: 318 | @ellf | http://www.freecodecamp.com/ellf
:star: 907 | @mattyamamoto | http://www.freecodecamp.com/mattyamamoto
Catalin Scripcariu
@CatalinScr
Feb 06 2016 21:05
@Ellf I'm not quite sure at what are you refering
Shannon Latham
@shannon-latham
Feb 06 2016 21:05
@tstusr441 Are you referring to your images in your portfolio section?
Jesse Jafa
@awareness481
Feb 06 2016 21:06
@shannon-latham no, the background images
Tom Lorimer
@Ellf
Feb 06 2016 21:08
you're background images already fill the whole div. I'm not sure what you mean now.
Jesse Jafa
@awareness481
Feb 06 2016 21:09
The codepen I linked above is just the examle provided from freecodecamp, I'm still working on mine :P
Shannon Latham
@shannon-latham
Feb 06 2016 21:10
@tstusr441 That's what was confusing me. I haven't completed that challenge so I didn't realize that was the example.
Jesse Jafa
@awareness481
Feb 06 2016 21:11
Hehe, my apologies. I didn't want to link what I've done so far because it's still a mess.
Catalin Scripcariu
@CatalinScr
Feb 06 2016 21:15
@Ellf I finally understand. Removed
kaizen711
@kaizen711
Feb 06 2016 21:27
Hey hows it going everybody? Does anybody know what is going on with these images not displaying properly when I resize the window to a small size?
http://codepen.io/kaizen7/pen/BjOQoB
any help is appreciated. thank you
its the images in the portfolio section and the image in the nav bar
Catalin Scripcariu
@CatalinScr
Feb 06 2016 21:33
@kaizen711 at wich image do you refear? At mine all are responsive.
@kaizen711 here are some differences:
kaizen711
@kaizen711
Feb 06 2016 21:35
in the portfolio section, project 7 and project 8 images skip to different rows instead of being side by side how I want them to be when I resize the window small
Catalin Scripcariu
@CatalinScr
Feb 06 2016 21:35
Capture.PNG
kaizen711
@kaizen711
Feb 06 2016 21:35
yep thats it
Catalin Scripcariu
@CatalinScr
Feb 06 2016 21:36
@kaizen711 the problem starts at project 3
Amir Ghafouri
@amirghafouri
Feb 06 2016 21:36
.
kaizen711
@kaizen711
Feb 06 2016 21:37
what is it around project 3
@CatalinScr I dont see it, could the padding be the problem?
Catalin Scripcariu
@CatalinScr
Feb 06 2016 21:41
@kaizen711 there is a difference at project 3 and project 4
Amir Ghafouri
@amirghafouri
Feb 06 2016 21:41
What is the difference between
$("#tweet-button").on("click", tweetQuote);
and
$("#tweet-button").click(tweetQuote);
?
Austin West
@scienceoflife
Feb 06 2016 21:43
.on is an event listener that takes different arguments, .click is a very specific event listener
.click = faster && less memory
kaizen711
@kaizen711
Feb 06 2016 21:44
@CatalinScr I don't see a difference in the code but definitely yes I see the pictures have different dimensions, could that be the problem?
Matt Yamamoto
@MattYamamoto
Feb 06 2016 21:45
@kaizen711 yes, that is your problem... so the columns they are in don't have the same height.
kaizen711
@kaizen711
Feb 06 2016 21:46
@MattYamamoto is it necessary for the pictures to have the same height to be aligned side by side how I want them?
@CatalinScr btw thank you Catalin
CamperBot
@camperbot
Feb 06 2016 21:47
kaizen711 sends brownie points to @catalinscr :sparkles: :thumbsup: :sparkles:
:star: 312 | @catalinscr | http://www.freecodecamp.com/catalinscr
Matt Yamamoto
@MattYamamoto
Feb 06 2016 21:47
@kaizen711 no, I'm looking at a solution give your strucutre as you have it. Otherwise You'd need to restructure you html so you have a div containing the image in each row maybe? Let me think a sec unless somebody else has some insight.
Preston Porter
@code7777
Feb 06 2016 21:48
im having a hard time getting anything done on my ziplines... I have a few that are in progress but I just cant seem to get anywhere and I can tell my psychology is starting to enter flight mode where I don't want to work on it ... does anyone have any suggestions???
I also have adhd
Matt Yamamoto
@MattYamamoto
Feb 06 2016 21:49
@amirghafouri I don't believe that .click is more performant, but I'm not 100% on that. However, there is one major difference, and that is that .on can be used when you have dynamically added elements, .click. cannot. I can't remember where I originally read that, but this discussion gets at the gist of it: http://stackoverflow.com/questions/9122078/difference-between-onclick-vs-click
Catalin Scripcariu
@CatalinScr
Feb 06 2016 21:49
@kaizen711 I changed the pictures adress and is working. Now I don't understand why at project 8 not.
This message was deleted
kaizen711
@kaizen711
Feb 06 2016 21:51
@CatalinScr yep I see it
@CatalinScr I've been trying to resolve that image problem since yesterday
@CatalinScr either way thank you I appreciate your help
CamperBot
@camperbot
Feb 06 2016 21:53
:warning: kaizen711 already gave catalinscr points
kaizen711 sends brownie points to @catalinscr :sparkles: :thumbsup: :sparkles:
Catalin Scripcariu
@CatalinScr
Feb 06 2016 21:53
@kaizen711 men no problem. Next time don't waste so many days :) Ask for help.
kaizen711
@kaizen711
Feb 06 2016 21:54
@CatalinScr lol yeah definitely
Matt Leonard
@matty22
Feb 06 2016 21:54
Ok, need some help with Local Weather!
I'm trying to grab out the img src for their built in weather icons.
Here's my JS:
Catalin Scripcariu
@CatalinScr
Feb 06 2016 21:54
It seems that picture have the same domension are reacting different
Matt Leonard
@matty22
Feb 06 2016 21:54
//var apiKey = 810a0a8ee3d2a52f12f66932cfe8cf0c;

$(document).ready(function(){

    navigator.geolocation.getCurrentPosition(function(position) {
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;
    console.log(lat);
    console.log(lon);

        $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&APPID=810a0a8ee3d2a52f12f66932cfe8cf0c", function(json) {
            var weatherObj = json;
            console.log(weatherObj);
            //return weatherObj;
            document.getElementById("currentCity").innerHTML = weatherObj.name;
            document.getElementById("tempBlock").innerHTML = Math.round(weatherObj.main.temp * 9/5 - 459.67) + "&deg; F";
            console.log("http://www.openweathermap.org/img/w/" + weatherObj.weather[0].icon + ".png");
            document.getElementById("weatherIconImage").src = "http://openweathermap.org/img/w/" + weatherObj.weather[0].icon + ".png";

        });   
    });

});

//Set Date in UI to current date in user's location and format it nicely
var date = new Date().toDateString();
var dateArr = date.split(" ");
document.getElementById("date").innerHTML = dateArr[1] + " " + dateArr[2];


//Ping for the minute each second and update if necessary. Makes the clock functional in real time
//Set time in UI to current tim
setInterval(function(){

    var hour = new Date().getHours();
    var amPm = "a";

    if (hour > 12) {
        hour -= 12;
        amPm = "p"
    }

    var minute = new Date().getMinutes();
    //If minute is less than 10, prepend a 0
    if (minute < 10) {
        minute = "0" + minute;
    }
    document.getElementById("time").innerHTML = hour + ":" + minute + amPm;}, 1000);
Actually here it is with a comment to the troublesome line:
Bruce Young
@mutantspore
Feb 06 2016 21:55
@amirghafouri yes what @MattYamamoto said. it’s called delegated events and you’ll find it on the jQuery .on page http://api.jquery.com/on/
Matt Leonard
@matty22
Feb 06 2016 21:56
//var apiKey = 810a0a8ee3d2a52f12f66932cfe8cf0c;

$(document).ready(function(){

    navigator.geolocation.getCurrentPosition(function(position) {
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;
    console.log(lat);
    console.log(lon);

        $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&APPID=810a0a8ee3d2a52f12f66932cfe8cf0c", function(json) {
            var weatherObj = json;
            console.log(weatherObj);
            //return weatherObj;
            document.getElementById("currentCity").innerHTML = weatherObj.name;
            document.getElementById("tempBlock").innerHTML = Math.round(weatherObj.main.temp * 9/5 - 459.67) + "&deg; F";
            console.log("http://www.openweathermap.org/img/w/" + weatherObj.weather[0].icon + ".png");
            //The following line is where I'm trying to build the src for the image inside the HTML.
            //The console says "TypeError: document.getElementById(...) is null"
            document.getElementById("weatherIconImage").src = "http://openweathermap.org/img/w/" + weatherObj.weather[0].icon + ".png";

        });   
    });

});

//Set Date in UI to current date in user's location and format it nicely
var date = new Date().toDateString();
var dateArr = date.split(" ");
document.getElementById("date").innerHTML = dateArr[1] + " " + dateArr[2];


//Ping for the minute each second and update if necessary. Makes the clock functional in real time
//Set time in UI to current tim
setInterval(function(){

    var hour = new Date().getHours();
    var amPm = "a";

    if (hour > 12) {
        hour -= 12;
        amPm = "p"
    }

    var minute = new Date().getMinutes();
    //If minute is less than 10, prepend a 0
    if (minute < 10) {
        minute = "0" + minute;
    }
    document.getElementById("time").innerHTML = hour + ":" + minute + amPm;}, 1000);
kaizen711
@kaizen711
Feb 06 2016 21:56
@CatalinScr yea i've tried typing that section all over to see if I made a small syntax error or something and it happens again
Catalin Scripcariu
@CatalinScr
Feb 06 2016 22:01
@kaizen711 I think <div class="row padding"> give you some problems
Loren Baca
@vbroskas
Feb 06 2016 22:01
Hey guys, I just got to the Build a Personal Portfolio Webpage, challenge, and I have a stupid question to ask
Catalin Scripcariu
@CatalinScr
Feb 06 2016 22:03
@vbroskas What is the question?
Loren Baca
@vbroskas
Feb 06 2016 22:03
so back when i was going through the html/css challenges, if you wanted to add an image to a website, it needed to have a source address. So does that mean if you want to add an image to a page youre building, it needs to be hosted online somewhere?
what if you wanted to add an image that you took on your camera but was only local to your computer?
kaizen711
@kaizen711
Feb 06 2016 22:04
@CatalinScr I was thinking that or that maybe it's because I put the images in a col 7 lg units wide and I want two images side by side, but ive tried changing both those things and the problem persisted
Bruce Young
@mutantspore
Feb 06 2016 22:05
@vbroskas you can host it on http://postimage.org or even your own dropbox if you have it… needs to be publically available
Loren Baca
@vbroskas
Feb 06 2016 22:06
ok sweet, thanks @mutantspore
CamperBot
@camperbot
Feb 06 2016 22:06
vbroskas sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1090 | @mutantspore | http://www.freecodecamp.com/mutantspore
Austin West
@scienceoflife
Feb 06 2016 22:06
@vrobskas do you plan on hosting your own portfolio page on the web? if so wherever you host it you use a local address such as src="./images/image003header.jpg"
Catalin Scripcariu
@CatalinScr
Feb 06 2016 22:06
@vbroskas you can use http://tinypic.com/ . in my case this was the best
Bruce Young
@mutantspore
Feb 06 2016 22:06
@vbroskas getting the dropbox url right is a bit trickey .. i can fix it if you post what you think it should be
Austin West
@scienceoflife
Feb 06 2016 22:06
@vbroskas you really dont want to host it via drop box if you are going to pay for website hosting anyway.
@vbroskas and until you get the site hosted and upload the image you can use one of these https://placehold.it/
Tom Lorimer
@Ellf
Feb 06 2016 22:07
I use cloudinary.com
Loren Baca
@vbroskas
Feb 06 2016 22:07
@scienceoflife what is the best method for hosting a portfolio page? do most people just create the page and then pay to have a company host it?
this is my first time every attempting to make a web page so im very lost haha
Austin West
@scienceoflife
Feb 06 2016 22:08
@vbroskas whoever you want to pay for hosting. a simple non-webapp (anything that doesnt require a backend/db) you can host to godaddy/bluehost/etc
Bruce Young
@mutantspore
Feb 06 2016 22:08
@vbroskas people use a variety of things ..even github
Austin West
@scienceoflife
Feb 06 2016 22:09
https://pages.github.com/ @vbroskas as @mutantspore said
and github will allow you to upload images, so you can serve locally
Loren Baca
@vbroskas
Feb 06 2016 22:09
@mutantspore ah ok, so you design it and then just pay github? or will github host for free?
Austin West
@scienceoflife
Feb 06 2016 22:10
@vbroskas its free, but you dont get to use a custom domain name. it will be yourUsernameHere.github.io
Catalin Scripcariu
@CatalinScr
Feb 06 2016 22:11
@kaizen711 I deleted the 7 and 8 and is owrking. The problem is trat after 6 he puts a invisible div. If you want not to waste many hours on this problem you can go with 6.
Bruce Young
@mutantspore
Feb 06 2016 22:11
@vbroskas github wil be free. My suggestions were to get you through this exercise. If you want “your” site … yes pay fo hosting. Depends if you are serious and ready though. I have my own personal site but most campers just use free resources to get this activity done.
Loren Baca
@vbroskas
Feb 06 2016 22:11
@scienceoflife ah ok. so in the context of this challenge to make a portfolio page, once Im done designing this thing, where does it reside? on CodePen?
Catalin Scripcariu
@CatalinScr
Feb 06 2016 22:12
@kaizen711 I deleted the 5 and 6 and replace with 3 nd 4 and now are working all 8
Loren Baca
@vbroskas
Feb 06 2016 22:12
@mutantspore ah ok, yeah I figured I would probably use plenty of free stuff for a while as I continue learning, then then once my stuff is looking clean, consider paying for hosting
Bruce Young
@mutantspore
Feb 06 2016 22:12
@vbroskas you need to make your code accessable to FCC somewhere so they can review it. I have mine there and also on my own site.
Catalin Scripcariu
@CatalinScr
Feb 06 2016 22:13
Loren Baca
@vbroskas
Feb 06 2016 22:14
@mutantspore ok sweet, ill keep trying to figure this out and plug along then
thanks for all the great help @mutantspore , @scienceoflife !
CamperBot
@camperbot
Feb 06 2016 22:14
vbroskas sends brownie points to @mutantspore and @scienceoflife :sparkles: :thumbsup: :sparkles:
:warning: vbroskas already gave mutantspore points
:star: 57 | @scienceoflife | http://www.freecodecamp.com/scienceoflife
Tom Lorimer
@Ellf
Feb 06 2016 22:14
@mutantspore I like your portfolio website very cool
Loren Baca
@vbroskas
Feb 06 2016 22:15
@CatalinScr thanks for the image rec's!
CamperBot
@camperbot
Feb 06 2016 22:15
vbroskas sends brownie points to @catalinscr :sparkles: :thumbsup: :sparkles:
Bruce Young
@mutantspore
Feb 06 2016 22:15
:)
CamperBot
@camperbot
Feb 06 2016 22:15
:star: 313 | @catalinscr | http://www.freecodecamp.com/catalinscr
kaizen711
@kaizen711
Feb 06 2016 22:16
@CatalinScr an invisible div eh? thats crazy.
@CatalinScr nice, I'm gonna check it right now
Vadali Soumitri
@svadali2
Feb 06 2016 22:22
hey guys
i am doing my first zipline the personal project and am having some problems
alignment help!.png
so i feel i am unable to get the box to align with the picture
and that is a bit annoying, any tips on how to align both the boxes?
Austin West
@scienceoflife
Feb 06 2016 22:23
@svadali2 can you send the link to the codepen and not a screenshot please?
Vadali Soumitri
@svadali2
Feb 06 2016 22:24
sure!
@scienceoflife
Austin West
@scienceoflife
Feb 06 2016 22:24
and what exactly are you trying to line up? the white box in the middle of the sports photo?
Vadali Soumitri
@svadali2
Feb 06 2016 22:25
yes! with the black picture on the left
Austin West
@scienceoflife
Feb 06 2016 22:25
so you want the black command-line photo to be centered above the white box?
Vadali Soumitri
@svadali2
Feb 06 2016 22:25
yes exactly
kaizen711
@kaizen711
Feb 06 2016 22:25
@CatalinScr I see you put them all in one row
Vadali Soumitri
@svadali2
Feb 06 2016 22:25
@scienceoflife
Mahou Kiq
@MahouK
Feb 06 2016 22:28
Hi All!
where do I get info about the weather for my weather app?
and like, how can I acess that?
Bruce Young
@mutantspore
Feb 06 2016 22:29
@MahouK most people are using the Open Weather Map API
Mahou Kiq
@MahouK
Feb 06 2016 22:29
twitter was so easy D:
Oh thanks @mutantspore
CamperBot
@camperbot
Feb 06 2016 22:29
mahouk sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
Mahou Kiq
@MahouK
Feb 06 2016 22:29
<3
CamperBot
@camperbot
Feb 06 2016 22:29
:star: 1091 | @mutantspore | http://www.freecodecamp.com/mutantspore
Mahou Kiq
@MahouK
Feb 06 2016 22:29
lovely
Tom Lorimer
@Ellf
Feb 06 2016 22:29
@svadali2 if you're going to use bootstrap you're missing the external javascript include for it
Bruce Young
@mutantspore
Feb 06 2016 22:30
Vadali Soumitri
@svadali2
Feb 06 2016 22:30
@Ellf hmm...i thought i included it, could you send me the link so i could double check?
Tom Lorimer
@Ellf
Feb 06 2016 22:30
actually, you don't need to include a <head> in codepen
just add it in the setting for your pen
Vadali Soumitri
@svadali2
Feb 06 2016 22:31
@o
Austin West
@scienceoflife
Feb 06 2016 22:31
@svadali2 theres quite alot of stuff interfering with each other here, and alot of unnecessarily nested items/attributes
kaizen711
@kaizen711
Feb 06 2016 22:31
@CatalinScr I put the original pictures in your version of the site and the same problem happened again, so it appears that the problem is the images for sure
Tom Lorimer
@Ellf
Feb 06 2016 22:31
ignore me
oh my bad you have head not header
actually I need to go to sleep ha ha
Vadali Soumitri
@svadali2
Feb 06 2016 22:32
@scienceoflife hmm...i see,any suggestions on the aligning issue? i will tidy up things a bit later I think. my apologies for the messy code!
@Ellf no worries! thank you for your help and comments!
CamperBot
@camperbot
Feb 06 2016 22:32
svadali2 sends brownie points to @ellf :sparkles: :thumbsup: :sparkles:
:star: 319 | @ellf | http://www.freecodecamp.com/ellf
Vadali Soumitri
@svadali2
Feb 06 2016 22:33
whoa
ok
haha
Tom Lorimer
@Ellf
Feb 06 2016 22:33
but you will need to add the javascript bootstrap include - click on the setting button on the top right of you pen page and select javascript then use the dropdown to 'include' bootstrap
Austin West
@scienceoflife
Feb 06 2016 22:34
@svadali2 its like a trail of conflicting things, so its tough to give direct advice. I'd suggest breaking out a new html document with just the content from this area and see if you can get it aligned how you want it. If you can get it working in another document, that means somewhere else in your markup is an issue causing you to not be able to align those boxes
Vadali Soumitri
@svadali2
Feb 06 2016 22:37
@scienceoflife really? i do not think there are that many conflicting components...i mean, its just 30-40lines, it was messy but nothing that bad...its okay, i will figure it out.
@scienceoflife thanks anyway!
CamperBot
@camperbot
Feb 06 2016 22:37
svadali2 sends brownie points to @scienceoflife :sparkles: :thumbsup: :sparkles:
:star: 58 | @scienceoflife | http://www.freecodecamp.com/scienceoflife
Tom Lorimer
@Ellf
Feb 06 2016 22:37
@svadali2 you're also missing some of the basic framework for using bootstrap
like a class = "container" div and a class = "row" div
Austin West
@scienceoflife
Feb 06 2016 22:38
@svald
Pawan
@pawan92
Feb 06 2016 22:38
can anyone give me a tip on how to start the JS for pomodoro timer
Austin West
@scienceoflife
Feb 06 2016 22:38
@svadali2 or defend it? its conflicting and your css is all over the place
James C. Smith
@JamesCSmithPDX
Feb 06 2016 22:41
Building a Personal Website - anyone know if there is a way to change the color of <small> text with an H1 header?
<h1 class="text-center">TrajectoryDS <small>James C. Smith</small></h1>
Austin West
@scienceoflife
Feb 06 2016 22:42
Just an fyi you shouldnt be using <small> within an h1 (bad practices) but beyond that
you can add a class or a style attrib to that <small> tag
James C. Smith
@JamesCSmithPDX
Feb 06 2016 22:42
ok
Bruce Young
@mutantspore
Feb 06 2016 22:45
@pawan92 you’ll need to lookup setInterval() and clearInterval()
Vadali Soumitri
@svadali2
Feb 06 2016 22:48
@scienceoflife no need to be rude. you did not even help me.
Austin West
@scienceoflife
Feb 06 2016 22:49
i told you what to do, did you do it?
@svadali2 right before you said it wasnt bad, i had posted a message on how to isolate it. No need to take your code personally (including claiming that there wasnt anything wrong with it).
Vadali Soumitri
@svadali2
Feb 06 2016 22:51
yes, i did isolate it and i have to say, your fantastic advice was so helpful, solved all my problems! what a pro coder you are @scienceoflife
@scienceoflife i will solve it on my own, please do not help anymore.
Chris Dziewa
@chrisdziewa
Feb 06 2016 22:51
@JamesCSmithPDX just use a span tag and use an h1 span selector
Austin West
@scienceoflife
Feb 06 2016 22:52
@svadali2 again, no need to take things personally. I cant give you instant magic advice, I however to have a few years experience as a frontend web developer, so I can generally point you in the right direction.
Vadali Soumitri
@svadali2
Feb 06 2016 22:55
@scienceoflife yes, this is a even bigger joke, that with a few years front end experience you cannot even align two boxes in a 30-40 line code. i never expected magic advice, i didn't ask you to cure cancer, i asked you how to align two boxes. please stop replying now.
Austin West
@scienceoflife
Feb 06 2016 22:56
@svadali2 again you really shouldnt take this so personally. I'm sorry you somehow feel like this is some sort of insult to you, or that you feel its productive to insult, but I want to emphasize how important it is that you don't take comments about your code as personal insults.
Chris Dziewa
@chrisdziewa
Feb 06 2016 22:57
let's keep it friendly here
Tom Lorimer
@Ellf
Feb 06 2016 22:59
@JamesCSmithPDX you can create a css 'id' selector and give it whatever style you want.
.mySmall {
color: red;
}
Vadali Soumitri
@svadali2
Feb 06 2016 23:00
@scienceoflife i am not taking it personally. your incompetence is just freaking hilarious. I do not wish to talk to you further. have a good day!
Austin West
@scienceoflife
Feb 06 2016 23:01
@svadali2 this really is a place to contribute and get feedback, not a place for personal insults. It doesnt help you or anyone else.
Vadali Soumitri
@svadali2
Feb 06 2016 23:01
@scienceoflife ok.have a great day!
Chris Dziewa
@chrisdziewa
Feb 06 2016 23:01
come on guys just let it go
Tom Lorimer
@Ellf
Feb 06 2016 23:02
Need to get back to my Simon challenge
Chris Dziewa
@chrisdziewa
Feb 06 2016 23:03
@Ellf that's a fun one good luck!
Tom Lorimer
@Ellf
Feb 06 2016 23:04
why thank you - I'm still deciding on the best way to do the graphics.
Chris Dziewa
@chrisdziewa
Feb 06 2016 23:04
@Ellf the sky's the limit ha
I did a google image search and took some of the design elements I liked from the many different models that have been made
Tom Lorimer
@Ellf
Feb 06 2016 23:12
yeah I've been looking at the classic images of the old ones I used to play with and throw across the floor in disgust
Andrew Charlebois
@andrewchar
Feb 06 2016 23:14
fontawesome doesnt have the freecodecamp icon?!?!?! er mer gerd
Tom Lorimer
@Ellf
Feb 06 2016 23:14
I made my own
Andrew Charlebois
@andrewchar
Feb 06 2016 23:15
how did you do that
i need a ffc icon for my contact me page lol
maybe i can just use the fire icon. it looks kind of similar
I made this one just using photoshop
very easy
Chris Dziewa
@chrisdziewa
Feb 06 2016 23:16
@andrewchar I used the fire icon
Andrew Charlebois
@andrewchar
Feb 06 2016 23:16
@Ellf will my background color show through the white parts?
Chris Dziewa
@chrisdziewa
Feb 06 2016 23:16
@Ellf ha I think if I would've owned one, I would have thrown it out quickly
Matt Yamamoto
@MattYamamoto
Feb 06 2016 23:16
@svadali2 I don't know what you're after... and you're clearly not endearing yourself to the room. But let's go slow and get you some help. I think the comment about your code being messy was inteded to help, that is often the root source of the problem/issue you are working through may actually lie at some lower level with something you might not even think is related. I can see you are using bootstrap. However, you are missing a container div and you have this huge horizontal scroll going on. Really, until you solve these issues it is kind of pointless to try to fix other layout issues since reworking your html and css will probably affect any curent changes you make.
Right now you have the image and the <p> you are trying to layout in a column that is only 4 units wide... so nothing in there will be in the center of the screen no matter what, it's living in a column that is the left 30% of the screen. Maybe I misunderstood your question, but I think that's the issue there. Try giving that column an offset of 4 to center it. Do you want the image and the <p> to live side by side? you can put them in seperate columns.... or, given you have enough width in one column, make the display:inline-block (or maybe float them). However, until you fix your other problems, I don't think should tackle the image and <p> issue.
Amir Ghafouri
@amirghafouri
Feb 06 2016 23:17

Thanks @scienceoflife , although it looks like a lot of people think .on is faster. What made you think .click is faster?

Thanks @MattYamamoto , what is your best example of a "dynamically added element"? I'll check out that stackoverflow link for sure - thanks

Thanks @mutantspore , I'll check it out but it looks very long and heavy - maybe just ctrl-f for "delegated events"? Or will I need all that other stuff for context.

P.S. I've been looking at your "basic elements of the pomodoro timer" and learning a lot from messing around with your code. Right now I'm trying to change the fill effect so that it reduces opacity of a single background-image for #clockface ( a waterfall) over time of session length instead of increasing height of #fill. Started by messing around with the CSS width property instead of height to make the circle fill from left to right instead of bottom to top. Cheers

CamperBot
@camperbot
Feb 06 2016 23:17
amirghafouri sends brownie points to @scienceoflife and @mattyamamoto and @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 908 | @mattyamamoto | http://www.freecodecamp.com/mattyamamoto
:star: 1092 | @mutantspore | http://www.freecodecamp.com/mutantspore
:star: 60 | @scienceoflife | http://www.freecodecamp.com/scienceoflife
Tom Lorimer
@Ellf
Feb 06 2016 23:17
@andrewchar yes the background shows through
feel free to copy it and use it if you want
please don't link to my cloudinary file though
Mohamud Gedi
@Mogedi
Feb 06 2016 23:22
Working on the TicTacToe game, I was wondering if anyone has any advice on how to get started with building the AI?
Chris Dziewa
@chrisdziewa
Feb 06 2016 23:25
@Mogedi I just used the rules for a perfect game on wikipedia
treat every possible situation as its own function and go down the list in order of importance until you get the best move for that turn
for instance if the computer can win in the next move, play that spot, otherwise if the player can win in the next move, block that spot and so on
Mohamud Gedi
@Mogedi
Feb 06 2016 23:28
@chrisdziewa so would I have to write hundreds of functions to account for every situation? :worried:
Chris Dziewa
@chrisdziewa
Feb 06 2016 23:28
@Mogedi not hundreds
just about 6 or 7 I think
but you can also look into a more complex computer science like approach and figure out minimax
Andrew Charlebois
@andrewchar
Feb 06 2016 23:30
@Ellf thank you very much
CamperBot
@camperbot
Feb 06 2016 23:30
andrewchar sends brownie points to @ellf :sparkles: :thumbsup: :sparkles:
:star: 320 | @ellf | http://www.freecodecamp.com/ellf
Andrew Charlebois
@andrewchar
Feb 06 2016 23:30
@Ellf i suppose i would not be able to change the black color to a different once using css?
Mohamud Gedi
@Mogedi
Feb 06 2016 23:30
@chrisdziewa i was looking into minimax, but trying to take the concept and apply it using JS sounds so impossibly hard
Bruce Young
@mutantspore
Feb 06 2016 23:31
@amirghafouri Hi @MattYamamoto and I are talking about teh same thing. Yes just read that bit on delegated events. Basically if your JS changes the DOM elements , like adding or removing a button, you can’t refer to it directly . you talk to teh element above it and mention the one you actually want. I had to do it in my Pomodoro as I was adding/removing/changing clickable items.
Chris Dziewa
@chrisdziewa
Feb 06 2016 23:31
@Mogedi most of the functions will return more than one acceptable choice in an array and so you would simply pick the first one
Tom Lorimer
@Ellf
Feb 06 2016 23:31
Afraid not - well maybe if you use css filters
Chris Dziewa
@chrisdziewa
Feb 06 2016 23:31
@Mogedi I took a few glances at minimax and my eyes practically glazed over
Mohamud Gedi
@Mogedi
Feb 06 2016 23:32
@chrisdziewa hahaha I felt the same way, cool theory but implementing not so much
Tom Lorimer
@Ellf
Feb 06 2016 23:32
@Mogedi I also tried to get my head around minimax but decided in order to get tic tac toe completed before this century to hard code some responses and use random if all else fails. I cant beat it only draw.
Mohamud Gedi
@Mogedi
Feb 06 2016 23:34
@Ellf that sounds like a very practical approach
Chris Dziewa
@chrisdziewa
Feb 06 2016 23:34
@Mogedi I'm a big fan of simplicity and, in my opinion, things can be explained in much easier ways sometimes than by slapping fancy obscure names on them
Tom Lorimer
@Ellf
Feb 06 2016 23:35
I think it's a subject that needs a teacher in front of you helping you understand why and how it works
Chris Dziewa
@chrisdziewa
Feb 06 2016 23:35
@Ellf that
Mohamud Gedi
@Mogedi
Feb 06 2016 23:35
@Ellf @chrisdziewa how would the AI know what to categorize as a winning move for either it or for the opponent which it would need to stop
Chris Dziewa
@chrisdziewa
Feb 06 2016 23:36
@Mogedi you visualize the current board (in code with a loop) and see possible moves either for the computer's current and future moves or the player's current or future moves
Tom Lorimer
@Ellf
Feb 06 2016 23:37
I made my board 3x3 (of course) then recorded the moves in a simple array of 9 elements. so the top row was 1, 2 3 next row 3, 4, 5 ext. So to check for a win X would have to be in 1, 2 and 3 or any of the combinations that make up a 3 in a row
Chris Dziewa
@chrisdziewa
Feb 06 2016 23:37
you say if I played here, could I win
Tom Lorimer
@Ellf
Feb 06 2016 23:37
or O would have to be in the same winning combinations (to check if the other player wins)
ryanvargas
@ryanvargas
Feb 06 2016 23:38
Hello everyone does anyone know what the ans key is supposed to do in the calculator zipline?
Mohamud Gedi
@Mogedi
Feb 06 2016 23:39
@Ellf @chrisdziewa ok, so the AI would have to check every possible move it can make to see if it can win or if the opponent can win and make that move? Am i getting it now?
Tom Lorimer
@Ellf
Feb 06 2016 23:40
move to win or move to block, yes
Chris Dziewa
@chrisdziewa
Feb 06 2016 23:40
exactly
move, block, try to do a double threat, block opponent double threat
Matt Yamamoto
@MattYamamoto
Feb 06 2016 23:41
@amirghafouri if, in the execution of your code, you needed to create another div that should also have that click function bound to it, you can just create the div with the right class, add it to your html, and the click function will be bound to that new div as well (if done properly). Here's a quick example: http://jsbin.com/wenuyomosi/edit?html,js,console,output
Mohamud Gedi
@Mogedi
Feb 06 2016 23:41
@chrisdziewa yeah I was worried about double threats, but I could code it to watch out for it in another function
Chris Dziewa
@chrisdziewa
Feb 06 2016 23:41
just run down the list of things you need to block. You may still run into some cases that are harder to block and someone will point out that they can still win, so then you just fix it until they can't win
@Mogedi exactly
when you look at it as simple steps, it isn't nearly as daunting
Mohamud Gedi
@Mogedi
Feb 06 2016 23:43
@chrisdziewa @Ellf Thank you SOOO much, I was freaking out that this might require minimax to implement. Know that I don't make this manageable lol
CamperBot
@camperbot
Feb 06 2016 23:43
mogedi sends brownie points to @chrisdziewa and @ellf :sparkles: :thumbsup: :sparkles:
:star: 506 | @chrisdziewa | http://www.freecodecamp.com/chrisdziewa
:star: 321 | @ellf | http://www.freecodecamp.com/ellf
Chris Dziewa
@chrisdziewa
Feb 06 2016 23:43
@Mogedi awesome, best of luck!
Tom Lorimer
@Ellf
Feb 06 2016 23:44
yeah have fun with it - it's a blast when something you create beats you even if it is just x and o's
Sujit Karki
@Swoozeki
Feb 06 2016 23:48
Ok, this is driving me up the walls.
I have this^ program where I have a problem with a div I made for emulating a progress bar
upon resizing, and specifically after 778px the browser window, the progress decreases in width auto
I've tried padding:0; and margin:0; on everything
Help would be appreciated
CamperBot
@camperbot
Feb 06 2016 23:50
no wiki entry for: would be appreciated
Sujit Karki
@Swoozeki
Feb 06 2016 23:50
Shhh camperbot
sean9
@sean9
Feb 06 2016 23:51
thanks @camperbot
CamperBot
@camperbot
Feb 06 2016 23:51
sean9 sends brownie points to @camperbot :sparkles: :thumbsup: :sparkles:
:star: 1115 | @camperbot | http://www.freecodecamp.com/camperbot
sean9
@sean9
Feb 06 2016 23:51
is more like it
Bruce Young
@mutantspore
Feb 06 2016 23:58
@Swoozeki well class jumbotron is probably loaded with css that’s going to cause trouble . I make it simpler for me .. i just renamed the jumbotron class to jumbotrons throught your code and css… that’s then your class not bootstraps. does this fork of your code do what you wanted?