Hi, Everyone!
I just completed My Random Quote Machine Project. Here is the link https://codepen.io/rudrapranaykumar/full/WGaZox
Please have a look, and I would like to get some feedback good or bad.
I just completed My Random Quote Machine Project. Here is the link https://codepen.io/rudrapranaykumar/full/WGaZox
Please have a look, and I would like to get some feedback good or bad.
Honestly, it looks better than mine. http://codepen.io/porygonj/pen/OXjxOd
I did notice, though, that when I try to tweet :
" To find yourself, think for yourself. "
~ Socrates
it tweets:
To find yourself, think for yourself. ~ ~ Socrates
I did notice, though, that when I try to tweet :
" To find yourself, think for yourself. "
~ Socrates
it tweets:
To find yourself, think for yourself. ~ ~ Socrates
It works fine overall, though.
I am starting with Build a Tribute Page. We can use all the Bootstrap features?
Hi everyone! I'm having trouble to finish polishing my pomodoro zipline, could anyone help me? I just don't get why my pomodoro's timer handler doesn't adds up minutes. Here's my pen:
@chaitanyajosen yeah, you can use everything you like. In fact, many times you won't be able to complete a zipline if you don't use things you haven't seen so far in FCC
Thank you!!! @FatTone225 I will work on that part
djangoearnhardt sends brownie points to @fattone225 :sparkles: :thumbsup: :sparkles:
:cookie: 382 | @fattone225 |http://www.freecodecamp.com/fattone225
Hi everyone. I have designed my portfolio website , and I want to know what do you think about it. thanks : https://postimg.org/gallery/2v20q87yw/
hey everyone. I just want some feedback on my Twitch TV Project http://codepen.io/sammyb123/pen/rWNbEe
@c0d0er you should multiply *60 each timer (break timer, and work timer), because you're running the clock over seconds and not minutes
@c0d0er everything else seems working fine to me
@ElRodrigote i already multiply*60
hi!! Did somebody use OpenWeather api with google chrome??
@c0d0er yeah but after that, you divide / 60 inside counting1 and counting2
@ElRodrigote thanks
c0d0er sends brownie points to @elrodrigote :sparkles: :thumbsup: :sparkles:
:cookie: 299 | @elrodrigote |http://www.freecodecamp.com/elrodrigote
@c0d0er but deleting the divition by 60 won't do the trick, it will just put more seconds to the counter. Now you'll see the amount of minutes translated to seconds
you could try dividing the miliseconds by 1000, then grab the reminder % 60, and you make all that a Math.floor
@c0d0er you'll get something like this to get seconds:
```js
Math.floor((t / 1000) % 60); //seconds
Math.floor((t / 1000 / 60) % 60); //minutes
Math.floor((t / (1000 60 60)) % 24); //hours
```js
Math.floor((t / 1000) % 60); //seconds
Math.floor((t / 1000 / 60) % 60); //minutes
Math.floor((t / (1000 60 60)) % 24); //hours
@ElRodrigote thanks
c0d0er sends brownie points to @elrodrigote :sparkles: :thumbsup: :sparkles:
:warning: c0d0er already gave elrodrigote points
@c0d0er something like this:
Math.floor((t / 1000) % 60); //seconds
Math.floor((t / 1000 / 60) % 60); //minutes
Math.floor((t / (1000 60 60)) % 24); //hours
where "t" is the amount of milliseconds
1000 60 60 for hours, dunno why it did show up like that
@gofighting123 thanks
c0d0er sends brownie points to @gofighting123 :sparkles: :thumbsup: :sparkles:
:cookie: 311 | @gofighting123 |http://www.freecodecamp.com/gofighting123
@ElRodrigote thanks
c0d0er sends brownie points to @elrodrigote :sparkles: :thumbsup: :sparkles:
:warning: c0d0er already gave elrodrigote points
@c0d0er If the execution is impossible, it is queued. ....
Anyone know how to get a button to act like pressing repeatedly, but your actually press and holding?
i need help tweeting out my quote please and thank you https://codepen.io/s31181/pen/pEMjqX?editors=1111
does anybody know why i use
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script> to add jquery ui causes error? how could i correctly add jquery ui with script tag?
@c0d0er where did you put this in your html file ?
@dyczol bottom of the body
anybody know how the FCC's tribute page has a different font and background?
I am following their html and nothing shows font or colors
got it! Needed to add: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
to the css settings
@c0d0er before the "script.js" file ?
@dyczol yes
@c0d0er can you go to the console and take a look what the error was ?
jQuey not recognized @dyczol
@bill have you tried a more recent version ?
never mind, this is the stable version..
@c0d0er might need to include jquery then jquery.ui
@dyczol it shows in the console
jquery-ui.js:14 Uncaught ReferenceError: jQuery is not defined(…)
@coffeebeanzz i already include jquery
@c0d0er if you want to use jQuery UI specifically you would have to include something like this in your html file
<link rel="stylesheet" href="jquery-ui.min.css">
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.min.js"></script>
are you looking for jQuery or jQuery UI ?
jquery-ui
this is the case if the jQuery file was on your disk. instead, i think you can do something like this
<script src="https://code.jquery.com/jquery-3.1.1.slim.js"></script>
what is
<link rel="stylesheet"?
@c0d0er have you tried including it in the <head> tags
@c0d0er u are working in codepen?
@walidashri yes
@coffeebeanzz yes
u have a link? and which error u get
@walidashri codepen is fine, but i cannot load jquery ui locally, do you know how?
@coffeebeanzz @dyczol thanks!
c0d0er sends brownie points to @coffeebeanzz and @dyczol :sparkles: :thumbsup: :sparkles:
:cookie: 282 | @dyczol |http://www.freecodecamp.com/dyczol
:star2: 1250 | @coffeebeanzz |http://www.freecodecamp.com/coffeebeanzz
@c0d0er for codepen u include the libraries using the gear in the js tab
thanks!
Nvm
@coffeebeanzz yep, i loaded
@c0d0er did u load jQuery before u load the ui?
@walidashri yes
so what is the error or it's not loading/
I c u used the combined ver so js and css
@walidashri thanks
c0d0er sends brownie points to @walidashri :sparkles: :thumbsup: :sparkles:
:cookie: 584 | @walidashri |http://www.freecodecamp.com/walidashri
@NitinNair89 so where are you in the challanges did you complete javascript
@atharvajava Sorry I wasn't online. I am stuck at the Number to Roman challenge :(
Hello World :) Have a Coding Weekend! :D
welcome to FreeCodeCamp @NitinNair89!
hi yall, anyone know using animate.css class="animated hinge" how to avoid dropping the item and only let is swing?
is there a open source community were u can help? i mean i want to enhance my skills by joining even tho its free. #juniordevforlife
Guys, can someone help me with the 'responsive' thing in my project? It works well for medium size screens, but when you reduce the size it just breaks everything
@gastikirs add
min-width: 250px to #calculadora selector
@marzelin It goes crazy
@marzelin I, i have to keep the 23%
@marzelin That solved the problem mate, ty. One more question. What is the best way to align the "DEL" button under the 0?
gastikirs sends brownie points to @marzelin :sparkles: :thumbsup: :sparkles:
:cookie: 905 | @marzelin |http://www.freecodecamp.com/marzelin
With relative position?
@Robertb4 Thank you, I knew it had to have something to do with grids but was getting lost in my <div> element tags.
bmcelroy19827 sends brownie points to @robertb4 :sparkles: :thumbsup: :sparkles:
:cookie: 117 | @robertb4 |http://www.freecodecamp.com/robertb4
@gastikirs try to understand concept of
row grid system like col-sm-12 and col-offset-sm-4 it will help you in long run
Guys
Is there a way to generate auto preview of an URL?
Hey guys, do you have an idea how to place my div at the center of the page, so it would stay at center no meter what size of the screen?
@TatjanaBezsazna try with margin: 0 auto
@TatjanaBezsazna You can use the margin trick
@kirbyedy nothing changes
@TatjanaBezsazna
#bg {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
z-index: -1;
}
.main-div{
z-index: 1;
margin: 0 auto;
}
check the change in z-index
you can also add blank columns on both sides, but since you haven't used any rows and columns, it does not matter.
@NitinNair89 yeah, b ut now it takes 100% of width. It is the same as bootstrap col-sm-12, but I want it to be at the center of the screen on large screen but still small itself - not of the width of a screen
use width in %
for example 70%
@TatjanaBezsazna I understood what you wanted, that's why I said, you can either use columns or add some offsets or try @kirbyedy method :)
@TatjanaBezsazna put
main-div in another div ,and then use flexbox or inline-block with text-align
@NitinNair89 I tried both - doesn't work as I want it
@TatjanaBezsazna it does, I just tried it with 60% width on the main-div
@kirbyedy I did :) than it is 60% of small screen as well - looks silly. I found the sollution - max-width together with margin auto :)
@TatjanaBezsazna
<div class = "container-fluid text-center main-div" >
<div class="row">
<div class="col-sm-3 col-md-3 cl-lg-3"></div>
<div class="col-sm-6 col-md-6 col-lg-6">
<h1>Random Quote Machine</h1>
<div class="well">
<span id = "quote"></span>
<br>
<span id = "author"></span>
</div>
<button class = "btn btn-default" id = "new_quote">New Quote</button>
<button class = "btn btn-default " id="tweet_out">Tweet Out</button>
</div>
<div class="col-sm-6 col-md-3 cl-lg-3"></div>
</div>
This is what I meant by adding blank columns
Hello. I am having trouble with this project can someone can please help me?
https://codepen.io/FreeCodeCamp/full/NNvBQW/
I cannot figure out how to position my text underneath the image the same as the mock-up.
Here's mine:
@instacoder Please move all your CSS content inside the CSS window.
The text is in the center but your image is moved aside a bit. Try this:
img {
height:100%;
width:100%;
}
Will someone please tell me why I cant make this navbar transparent
Thank You @NitinNair89
instacoder sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 343 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Did somebody use Open Weather api in chrome navigator?. The navigator is blocking me the request because im not using https
@j1417 yes thats a known issue
you can either use another weather api, or cheat with crossorigin.me
@burningPluto I think it is transparent, but there is just nothing behind it (img is below)
@Otto-AA the image is at 100% for height and width but for some reason there is something white behind it
i cannot figure out what it is
@kirbyedy what is the idea of crossorigin.me?
it will serve the openweather api over https
so chrome will not complain
@kirbyedy thanks!
j1417 sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1507 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
@burningPluto there is nothing white behind it except the "default whiteness" of the body
@burningPluto The picutre is just below your navbar so it is not under it
it has to do with the list not the image
@burningPluto It isn't the nav-bar. Make it 50% width and give it any background-color to see it.
@burningPluto The white thing you see is 99.9% sure the body
If I give it a sticky property then that should fix the problem right?
@burningPluto Yeah, I'd try it with position: absolute or fixed
I should put fixed on the nav{} css right
@burningPluto fixed if you always want it to be at the top
I'm trying to make a navbar that is transparent at the very top but when i scroll down it becomes visible
@burningPluto +
z-index: 1;
@burningPluto So that it changes depending on the scroll?
yes
@burningPluto your nav is transparent only that you have your body color as white so you actually you don't see its transparency. add to the div that wraps the nav a class like "hero" and change in css the #banner1 to .hero to see what happens
when i put fixed on it the nav disappeared
@burningPluto then add
z-index: 1;to it
and google that for your scroll-thing: bootstrap navbar transparent to visible scroll
I did both @Otto-AA
hailo
your nav should be like that:
nav {
height: 40px;
width: 50%;
background-color: red;
position: fixed;
z-index: 1;
}
(works for me)
I put the nav in the first div @sorinr and it worked :D
@Otto-AA im going to add what you told me
and i think ill be set
thanks guys !
@burningPluto found a nice example for the scroll-nav: http://jsfiddle.net/sDLp2/2/
Thanks @Otto-AA
burningpluto sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 360 | @otto-aa |http://www.freecodecamp.com/otto-aa
Is there anywhere to quickly learn how to make it collapse without having to use bootstrap? I don't like using bootstrap with something like this
@burningPluto do you want something like: example ?
@sorinr yeah I've got the nav working now
@burningPluto :+1:
Do you know how i can make it collapse without having to use bootstrap
nav like this site
@burningPluto css transitions
& media queries
you just basically do one ul & two styles for mobile & desktop
is there any place to read up on that?
Hmmm, yep. I've seen sth, w8
mkay, the rules would be like here > link
the difference is that they got that nav expanding on hover, but that's not a problem
Thanks!!!! Fantastic this is the stuff i need to know. I'm past the basics but working on the design now just trying to mimic a few sites for practice
and the mini nav on mobile turns on when you add 'open' class to the nav... that can be done with a few lines of JS. You can skip their 'modernizr' elements for now
Anyone want to help me with a CSS issue on my JS Calculator?
I’m having issues with the last two rows of buttons
I’m challenging myself to only use CSS instead of bootstrap.
Need help. I am working on the Pomodoro Clock zipline. I want one single button to start and pause my timer but cant do that.
http://codepen.io/harshil1712/full/vyYKPy/
http://codepen.io/harshil1712/full/vyYKPy/
@SEGrooms http://codepen.io/marzelin/pen/YpPXvR
@harshil1712 Set a boolean flag on button click.. If true then start timer else stop timer
Thank you @marzelin ! Did you seriously just throw it in a div and send the text to the left??
:cookie: 906 | @marzelin |http://www.freecodecamp.com/marzelin
segrooms sends brownie points to @marzelin :sparkles: :thumbsup: :sparkles:
Bye World. See ya tomorrow. :wave:
That was it? hahaha good job! @marzelin :clap:
Hi all I'm running into one issue with my pomodoro clock. For some reason the text in my timer moves slightly when the numbers change. I want everything to stay put but I can't find a solution to this issue. I've tried setting a width to my parent container but that forces me to lose my timer's centering.. Can anyone give me a hand? here is my app kkindorf.github.io/pomodoro-clock
@oppiniated THANK YOU!
kkindorf sends brownie points to @oppiniated :sparkles: :thumbsup: :sparkles:
:cookie: 304 | @oppiniated |http://www.freecodecamp.com/oppiniated
@oppiniated why does monospace work and not the font I chose? That's pretty crazy
Hey guys i'm trying to make a quote machine but this code is not working when i push the button
$(document).ready(function() {
$("#getQuotes").on("click", function(){
$.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?", function(json){
$(".message").html(JSON.stringify(json));
});
});
});
and the code pen is this:
@aarya1302 CORS issues, take a look at your devtools. use https://crossorigin.me/ or sth like that
@aarya1302 just put this link in front of your api url
http://codepen.io/TheFancyMuffin/pen/pNvjoP I just started working on the tic tac toe project and I can't figure out how to make the font size within the table bigger without also adjusting the size of the table itself, help?
@TheMightyPingu it probably reacts to you setting the heights & widths in a table in ems
@kkindorf Monospace means each character has the same width. Which is not the case in other fonts
@oppiniated :+1:
Hi guys I am trying to link my HTML to bootstrap but is not working does anybody know the code to do this?
thanks
http://getbootstrap.com/getting-started/ @angelogianopulos ?
Reading the docs never hurts, you know ;p
thanks
@kat-mag it worked
does anybody know how to get mp3 url link from any sound website e.g. freesound.org?
{ _id: 581e10b496f5e612f898790d,
title: 'Who\'s cute',
author: 581cc1a4a750092fe8c839b3,
__v: 0,
options:
[ { _id: 581e10b496f5e612f8987910 },
{ _id: 581e10b496f5e612f898790f },
{ _id: 581e10b496f5e612f898790e } ] }ok...how do i get actual stuff in options array?
the schema is this
var Poll = new Schema({
title: {
type: String,
required: true
},
options: [{text:String, count: Number}],
author: {
type: Schema.ObjectId,
ref: 'Account',
}
});
help with twitch project. why is there a small space between the userlogo and the div? on full desktop mode. the background is red for testing purposes.
also if i add padding to the txt on the right it brings down the div on the left with it.
no wiki entry for:
with twitch project why is there a small space between the userlogo and the div on full desktop mode the background is red for testing purposesalso if i add padding to the txt on the right it brings down the div on the left with ithttpscodepenioemmanuelamadorpenyamwob
or am I doing it wrong lol
@emamador
why is there a small space between the userlogo and the div?
which div are you talking about ?
why is there a small space between the userlogo and the div?
which div are you talking about ?
<html lang="en" ng-app="myapp">
myapp is defined in the controllers folder in a module angular.module('myapp')
but when i run the indix.html file i am getting errors as file not found like plugins ,css, etc...but actully all the files are present in the folders itself any help as i amnew to angular js ...or am i doing something wrong
@Rakesh18754 are you linking them in the html itself?
@kat-mag its a separate JS file in the controllers folders
duh. Are you linking it?
as you normally would link a js file
yes
the fact that you declare it as an ng-app doesn't do the linking itself.
@kat-mag http://stackoverflow.com/questions/40442175/angular-js-project-not-invoking heres my Q
angular.module('myapp', [
'ui.bootstrap',
])
.controller('mainCtrl', mainCtrl);
'ui.bootstrap',
])
.controller('mainCtrl', mainCtrl);
and in the controller i have defined this
@kat-mag any suggestions?
you might have to manually link the css if you are using the bootstrap as a plugin
ok..is my folder structure all right?
or the index.html has to be inside the controllers folder/
?
doesn't matter. matters what are your links to the files in your html
ok
i'm working on the random quote machine, but i don't understand why my quote generator api only calls the api once
this is my code :http://codepen.io/sparklie3/full/ENaVMJ/
@mones-cse 
in the JS, i'm just making a simple .getJSON call, but it doesn't seem to refresh
anyone see anything wrong with the code itself?
@mones-cse http://i.share.pho.to/0acec8ec_o.png
@emamador there' probably the space
becaues you decided to do text-center
nope, tried that, nm
@sparklie3 i did text center to center the entire div. your right though if i remove text center it disappears but then it's aligned to the left
it's because the img file you pull from twitch is that way
i see it in your js code
@emamador youre pulling some img src
<img src="'+two.logo+'">
nm
this: https://static-cdn.jtvnw.net/jtv_user_pictures/freecodecamp-profile_image-d9514f2df0962329-300x300.png it doesn't have sa space on the left
you can just change the code to this
<div class="disname text-left"><img src="'+two.logo+'">
it's because of inheritence
this is what you want, right?
yeah......wow.
i inserted the text-left from bootstrap
in this div class that you're inserting to this img
ok thanks. now try to add padding on the text on the right to push it more down
which overrides the
<div class="row text-center">
so, two suggestions
you shouldn't be writing all of those
div in the js
as a good practice
lol
all you really need is the img, which is why you're making a getJson
you're just getting this img itself
and then, all the rest of the formatting, should be handled in the html
that's a fundamentally better practice
oh ok.
that makes sense
but yeah, that would require considerable refactoring of your JS code
but to make the img be left aligned, i basically assigned a pull-left
which overrode the css of text-center that you put in
div class="row
that's because the
text-center applies to Child element, which in this case, you were placing the img under the div class='row'
so the img was getting centered, which is why the space
another question if i add padding to the right div where the text is it phuses down the left div aswell. like i want the text to be lower
sorry, don't understand your padding question...you have lots of div in your code so i don't know what you're referring to for me to answer
oh ok.anyways your a genius
@sparklie3 thanks
emamador sends brownie points to @sparklie3 :sparkles: :thumbsup: :sparkles:
:cookie: 278 | @sparklie3 |http://www.freecodecamp.com/sparklie3
@emamador np, happy to help
@sparklie3 what are you currently working on?
AJAX JS call issue, building a random quote generator to tweet
Hello :D
Hi guys. I have a small question that isn't directly related to FCC projects. I am using a <select> menu with onClick to call a javascript function. It works fine other then that I can't select the same select option mulitple times in a row. Whatever option is highlighted wont execute the onClick javascript function. Is there a way to change this behavior?
@sparklie3 thehttp://quotesondesign.com/wp-json/posts?id= with a random id here doesn't work
exactly, not really sure why and i don't really see why i even have to pass in an rand id
ah, i think i found the possible docs
i think i can figure it out from here
@sparklie3 https://quotesondesign.com/api-v4-0/
yeah, i couldn't get that to work even having read that
sorry i meant to say onChange in my question not onClick
@sparklie3 you specify the number of quotes at the end and then with your rand function pick one at random
but i feel that's really inefficient, i know you can do http://quotesondesign.com/wp-json/post/<id>
if you know that id, i'm just trying to get a list of id, rather than to return 36 objects and then have to randomly pick a number of 0 - 36 in the array
why have the system pass me so much data back when i just need 1 quote
@sparklie3 oh ok
trying to be more efficient in my code writing since
i don't need 36 quotes, i need 1 random quote. if i can figure out how to get all the possible <id> my rand can be from that list
@sparklie3 well this one code gives you one random quote http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1
but the problem is that it does the work fo you
yeah, i can't get that to change
when it call it the second time
which is odd to me
oh i see
it works on my browser
it doesn't work when I make the ajax call
which i don't understand why it wouldn't
i think partly is that it might be returning a string and not JSON
@emamador but i appreicate the help
My first guess would be border-radius is needed.
I’ll look more closely though.
@nankeuriseu even i put border-radius, doesnt help, makes it more ugly
Still looking. I didn’t actually implement that part. I didn’t consider it “functionality” when I did mine. ;)
Hello everyone! Maybe one of you can help me: I am working on the Show The Local Weather Challenge. I have made it possible to look for the weather in any city. I am using Open Weather Map but their API has an issue where the sunrise and sunset times are given for the previous day for cities in remote time zones (remote compared to mine I mean). To make this clearer, if I call the API at 8pm on November, 5th in my time zone (GMT), it is 7am in Sydney on November 6th (GMT+11). But the API will give me Sydney's sunrise / sunset data for November 5th, which is useless since it is in the past.
What I want to do is choose a day or a night icon representing the weather, and the only idea that I have is using sunrise / sunset to know if it is day or night.
I was wondering if any of you had that issue and found an alternative. Thanks
What I want to do is choose a day or a night icon representing the weather, and the only idea that I have is using sunrise / sunset to know if it is day or night.
I was wondering if any of you had that issue and found an alternative. Thanks
@c0d0er Could you try using a linear-gradient with alpha to fill? That is, make the object transparent, but gradually fill it with the color by adjusting the position of the gradient? (It need not be an actual gradient.)
@nankeuriseu thanks, doesnt find solution yet
c0d0er sends brownie points to @nankeuriseu :sparkles: :thumbsup: :sparkles:
:cookie: 371 | @nankeuriseu |http://www.freecodecamp.com/nankeuriseu
does someone know why I can't seem to change my h1 tag's color? http://codepen.io/mixu1308/pen/EgVpPY
@mixu1308 there is a dot before your h1, could be the issue
@arya45 yup! Thanks! that solved it
mixu1308 sends brownie points to @arya45 :sparkles: :thumbsup: :sparkles:
:cookie: 289 | @arya45 |http://www.freecodecamp.com/arya45
@mixu1308 np happy to help :)
@arya45 do you know of way of how I could make it that when you click on the twitter button, it'll tweet out the quote?
@mixu1308 I used it for my Quotes Machine as well: https://dev.twitter.com/web/tweet-button
@mixu1308 You will need something like this in your html
<div id="tweet"><a class="twitter-share-button" data-size="large" href="https://twitter.com/intent/tweet">Tweet</a></div>
Oh I wondered if there was something where I could create my own button because twitter's button is kinda intrusive and ugly
@c0d0er You still there?
@nankeuriseu yep
This is very crude, but it can give you an idea.
@nankeuriseu thanks
c0d0er sends brownie points to @nankeuriseu :sparkles: :thumbsup: :sparkles:
:warning: c0d0er already gave nankeuriseu points
You might also be able to accomplish the same thing with background-position instead.
@mixu1308 I wonder if you can still use the Twitter widget and just use some CSS to hide it, and make your own button part of the same div so that when you click on your custom button, it still activates the Twitter widget
I’d have to think through how to do that.
@arya45 yeah but should be possible to use some js like encodeURIComponent or something like that
hi :) working on my tribute page - I got the picture to center using text-center (not sure this is the correct way...), but I can't figure out how to get the caption to center below it (text-center is not working for it). I put them in figure and figcaption tags but it doesn't seem to make a difference : https://codepen.io/Cassanne/pen/mOyyKp
@mixu1308 yes, the way I did it was that when the button was clicked, the URL passed to the a tag (with class "twitter-share-button") was changed to something like
"https://twitter.com/intent/tweet?text="+encodeURIComponent([quote])"
@Cassanne look into bootstrap’s offset for the grid (e.g., col-xs-offset-X).
@arya45 yeah I'm trying that it should work but I'm not sure how would make it work I'm trying
window.open(url,'_blank')
@mixu1308 yep it works!
has anyone else received this error message before? Failed to load resource: net::ERR_INSECURE_RESPONSE
@mixu1308 Try using <a> rather than <button>. That way JS is unnecessary to open the URL.
@Cassanne figure and figcaption are not the best way as it's just an image with a text below. u could make it a div with a bootstrap class
thumbnail, put an img inside it, and then a div with a class caption.
also, you don't close an img tag with </img> :P
@Cassanne it seems to work if you remove the "text-center" class to your figcaption and add the code below in your CSS (though I don't get why your code is not working :\ )
figcaption p {
margin: 0 auto;
}
@asonder Where did you run into that? It’s possible that you were trying to access an insecure resource (HTTP) from a secure page (HTTPS).
@asonder This seems to answer your issue. http://stackoverflow.com/questions/22083453/console-errors-failed-to-load-resource-neterr-insecure-response
@Cassanne and you shouldn't be using <head> element this way. It's supposed to be <header>
same goes for body... shouldn't be there
you can make it <main>
ok, I fixed the tags... looking it up apparently got me more confused :p
I also got the picture+caption to work, though I know it's not the official bootstrap way. Does anyone want to look again and maybe give me more advice?
Looks fine. It should fulfill the user stories.
If you want the text below the image to be narrower, you can accomplish that a few ways. You can add “col-lg-offset-3 col-lg-6” to the containing <div>
Or, you can use the suggestion by @arya45.
With some mods.
Yes, I think I'll just leave it as it is for now and come back after I learn more about bootstrap :) Thanks for the feedback!
No problem
Having trouble with the JS calculator. Trying to use buttons to push numbers to an array but not matter what I do it logs an empty array.
var myApp = angular.module('myApp', []);
myApp.controller('mainController', function($scope) {
var problem = [];
var b1 = document.getElementById('b1'), b2 = document.getElementById('b2');
b1.onClick = function(){
problem.push(1);
}
b2.onclick = function(){
problem.push(2);
}
console.log(problem);
});
@nankeuriseu Thanks. I'm getting the error when my random quote generator makes the API request. I've googled it a bit but I'm at the point where I want a quick answer. You know how it goes. I'll take a look at that link you sent. I appreciate the help.
asonder sends brownie points to @nankeuriseu :sparkles: :thumbsup: :sparkles:
:cookie: 372 | @nankeuriseu |http://www.freecodecamp.com/nankeuriseu
@tyl-er I’m not familiar with Angular, but it might be your case. You have “onClick” and “onclick”.
@asonder Mind posting the code pen?
@nankeuriseu it's actually on github: https://asonder.github.io/random-quote-machine/
Got it.
You’re attempting to access via HTTPS. If you use HTTP, it works fine.
However, because you’re using GitHub, which is HTTPS, you’ll get cross-origin errors.
Try using Crossorigin.me
@nankeuriseu oh wow that is so cool. i had no idea something like that existed. thank you very much!
asonder sends brownie points to @nankeuriseu :sparkles: :thumbsup: :sparkles:
:warning: asonder already gave nankeuriseu points
You’re welcome. :)
Aaaaannnddd it works now: https://asonder.github.io/random-quote-machine/
Nice!
You can remove the crossorigin.me from the Twitter link. It’s unnecessary as it’s simply a link rather than a resource.
When I disable an button, I want the color to remain the same as when it's enabled. I used the :disabled selector in CSS to try this, but the button still has the faded-out look to it. Is there a way to stop the faded look?
I disabled it by using jQuery: $("#button").prop("disabled", true);
ah cool. will do. i was wondering about that.
@ryanapolinar Generally, it’s better to have some indication that a button is disabled. However, you might look to see if there are some other styles overriding your styles.
@nankeuriseu Ah okay, I'm just trying to disable the buttons for the Simon Game so that when the button combination is playing, the user can't interrupt it, but I want the colors to remain the same so there isn't any confusion
Can you link to the CodePen? I’ll look over it an make a suggestion.
@nankeuriseu Here's the CodePen for the Simon Game
@nankeuriseu I haven't implemented a way to show the combo to the player yet, so it prints out in the console
I like the appearance!
I need to make sure I understand correctly. Do you want the button to be “on”, “off”, or retain state when disabled?
For example, if the button’s state is “on” and the button is enabled or disabled it should be the same color, correct?
Yes, it should retain the same color regardless of whether it's disabled/enabled
ok
Try eliminating the :disabled styles, and create “on” and “off” classes.
he
:disabled
heh
Does that make sense? :)
Can someone help with my timer? I can get it to work, but it won't switch over to the break until I hit start again...
So
- create on and off classes
- add/remove them to buttons based on their state
https://codepen.io/TheFancyMuffin/pen/pNvjoP How do i change the font size so the x's and o's fit the table better without making the table itself bigger?
@nankeuriseu Mm okay I get what you mean, but is there a way to make buttons unclickable with CSS classes?
@ryanapolinar Not to my knowledge. (It would probably violate the separation of concerns for which CSS was created.)
@nankeuriseu Ah alright, thanks for your advice!
ryanapolinar sends brownie points to @nankeuriseu :sparkles: :thumbsup: :sparkles:
:cookie: 374 | @nankeuriseu |http://www.freecodecamp.com/nankeuriseu
If you create an “on” class and an “off” class, you can flip between the two as needed. You’d treat that separately from the disabled. (Disabled, without styles in this case, should not change the color. That is, unless there is some other style making the change.) Then you can enable/disable as necessary.
How do I write text in what appears to be a margin of an image, such as you see beneath the image here? https://codepen.io/FreeCodeCamp/full/NNvBQW/
@Cadburylion Look into
<figure>and <figcaption>.
Ah, okay! Thanks! I'll give that a shot.
The page in that link has a gray background. There seems to be a white margin beneath the picture in which the caption is. When I use <figure> my caption comes out after that white margin and over the gray background.
Hi everyone . how can I use a function everytime I click a button ? I did use the click method but it runs for once : http://codepen.io/mradil16/pen/VmYaog
@nankeuriseu Finally figured it out! Disabling a button would lower the opacity by default, just needed to set the
:disable css to have the property opacity: 1;. I don't know why I decided to share this with you lol
@ryanapolinar That way we can all rejoice in your win. :)
Glad you figured it out.
With the projects I can use bootstrap. Does that mean I can download the bootstrap and then copy and past the CSS HTML and JS and just edit it all?
@nankeuriseu thanks
c0d0er sends brownie points to @nankeuriseu :sparkles: :thumbsup: :sparkles:
:cookie: 375 | @nankeuriseu |http://www.freecodecamp.com/nankeuriseu
@Zaeroso not recommended you should really try to figure it out yourself... its much more rewarding and it benefits you
@Rav404 Ok thank you, I'll give it a shot from scratch :)
zaeroso sends brownie points to @rav404 :sparkles: :thumbsup: :sparkles:
:cookie: 295 | @rav404 |http://www.freecodecamp.com/rav404
@Zaeroso no problem just a recommendation
But for future purposes I can use a full bootstrap though?
ehhh
i wouldn't but you do you
I'm wasn't planing on it but I just thought that would make things too easy to complete. ^^
indeed it would + they check for plagiarism when getting your certificates
in my code, the
-,+ and 1,2 need to be adjusted into the button, any idea to fix? http://codepen.io/c0d0er/pen/KNwggG
Hi guys! Can someone tell me what's wrong with my code? Look at JS, when I simply output data into my html everything works, but when I use variable it does nothing. WHY? help, please... (I commented working row).
http://codepen.io/primchuk/pen/LbEGJx/
http://codepen.io/primchuk/pen/LbEGJx/