any advice on how to tackle the personal portfolio webpage?
like has anyone done it without looking at the example. lol
for me it was a lot of manual typing out the information
the rest of it was stuff that you learned in the lessons leading up
How should I create portfolio page? I am stuck... help pls..
i think it's too soon for this, because at this stage i can't have knowledge for that
@francorufo As a hint, you will need to find a way to make that code run after the user enters text in the textbox.
@sneshka90 i feel the same way...
@izanagichan we need help for real :D
someone??
The portfolio project is a big jump in difficulty. If you have both done all the freeCodeCamp challenges leading up to this project, then you have the vocabulary and basic understanding of how to do research now. Expect the project to take a good 20-30hrs. It is a big one that will require a lot of reading and web searching.
well that's why other camper can help, right? :worried:
*campers
@TylerMoeller I am confident in my webpage skills up to this point, but only as far as the last project. I guess my biggest question is how do you build a page by just looking at the full page?
by just looking at the full page as an example that is
@izanagichan Break it down into pieces - start at the top and build your navbar. Then build each <section>
Finish with a <form> and a <footer> below that. Then fill in each section with images, buttons, etc...
@izanagichan let's google little and than come back here
any react people here?
It helps to look at everything one piece at a time, or it can get overwhelming.
@TylerMoeller cool, that is at least something to start with
@TylerMoeller tnx anyway..
Good luck, lots of people here willing to help out when you get stuck
@eemebarbe React people hang out in https://gitter.im/FreeCodeCamp/HelpDataViz
thanks @TylerMoeller
eemebarbe sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1051 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@TylerMoeller so bootstrap is already in codepen right, no need to add it to the header?
@izanagichan No, not already in codepen. You will need to click the Settings button and then CSS. You can add it in one of those fields.
This is a good tour to show you how to set everything up: https://codepen.io/pen/tour/welcome/start
@TylerMoeller is it better to build a navbar with <div class="navbar"> ?
don't think the navbar was covered in the previous lessons
@izanagichan Check out the bootstrap docs, they show you how to build all the different navbar styles: http://getbootstrap.com/components/#navbar
Hello all. What is the difference between a <div> and a <section> and when should they best be used?
@jesushilariohernandez It's hard to explain in a few words. a <section> is usually made up of <div> elements. You can read about it in detail in the HTML 5 Spec:
https://www.w3.org/TR/html5/grouping-content.html#the-div-element
https://www.w3.org/TR/html5/sections.html#the-section-element
https://www.w3.org/TR/html5/grouping-content.html#the-div-element
https://www.w3.org/TR/html5/sections.html#the-section-element
@TylerMoeller Thanks Tyler
:star2: 1052 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
jesushilariohernandez sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
I cant seem to center my bootstrap buttons, i've tried everything. What am i doing wrong? http://codepen.io/TwitchyCake/pen/yVppBL
Guys hello, can you please check my zipline simon game. I'll appreciate any feedback http://codepen.io/Zooll/pen/jVGozK
@Twitchy-Cake They aren't centered because they are in 2 md-2 columns. There are 12 columns in a row, so they are taking up the first four columns on the left if that makes sense. Use grid offsets to put them in the center: https://getbootstrap.com/css/#grid-offsetting
@TylerMoeller Thanks bud, you're a lifesaver lol
:star2: 1053 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
twitchy-cake sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
For the Twitch TV channel project, is there a preferred way to handle requesting information for multiple channels at once? Is there some way to request info from all the channels with a single request instead of multiple $.getJSON()s? http://codepen.io/engineerwithoutfear/pen/PbmKrR <---this for loop did not work as expected, lol
I think it's cool your IDE in the lessons works like Sublime. Multiple cursors, highlighting and such.
I'm going to make the portfolio page. Just how are we 'graded' on this? I had a look at the example page and saw so much I didn't go over yet. What is expected, just that we follow the user stories?
Hey guys i just finished my tribute page' i was hoping someone could take a look and give me any suggestions thanks. http://codepen.io/Tron2097/pen/QGMJML
Are there any Senior Front End Devs in here?
how do i give my text input in my form a class
hey @Twitchy-Cake where did you find those awesome fonts?
@juniorjb - depending on the exercise you're doing -
<input type="text" class="className"> would do it?
@Boardley - what do you mean by "Senior Front End Devs"?
http://codepen.io/Asparism/pen/ENNxBP?editors=0010 hey, does anyone know why the yellow bars in this codepen will shrink the first time the timer counts down, but won't shrink after the timer has been reset?
@asparism - I'm just trying to sort out what your code is doing - I like the slider setting for the timers, that's cool! (Although it seems that you wouldn't want to make it go to zero?)
You might find it a little simpler to deal with the time values if you just store the countdown times in seconds, and just output to
I think that you might not be resetting the
I hope that gives you a little something to go on? I'm going to be checking out for the night, good luck with your project!
You might find it a little simpler to deal with the time values if you just store the countdown times in seconds, and just output to
mm:ss as needed, it eliminates the complication of tracking minutes and seconds and the manipulation of them.I think that you might not be resetting the
whichBlock variable after you count down, although from what I see when I run the clock, only the first bar shrinks, and then nothing else happens with the bars? I set the timer to 1 minute for each phase. It seems to stop after the first bar. I haven't tried to debug what's going on there?I hope that gives you a little something to go on? I'm going to be checking out for the night, good luck with your project!
thanks @khaduch !
asparism sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2022 | @khaduch |http://www.freecodecamp.com/khaduch
hello guys
can i get some help
@frankmaayn hi. whats the problem?
http://codepen.io/frankmaayn/pen/rWwEXJ?editors=1100 I'm working on this page, and I am having some trouble. What do you put so that the pictures, fonts, and characters will adjust to any screen size? I already included <head> <meta name="viewport" content="width=device-width, initial-scale=1></head>
When i click the page link on a phone.. all of the contents are smudge together; they don't adjust..
@frankmaayn try looking into media queries
or flexbox
@frankmaayn for the imgs use class="img-responsive" . for the fonts as @coymeetsworld said i would use media queries and make the font-size in em
em?
oh so it will adjust itself?
instead of a fixed size?
nvm i know what it means now lol
@frankmaayn :+1:
@frankmaayn and try to move all the inline styling in the css panel of codepen. its much easier to read the styling for all page
oh btw would i use "id" if i want one of the words to go directly to the content?
For example if i click on the word characters it will scroll down to the character section
because for the phone it might take a couple of scrolls just to get to one of the section
@frankmaayn yes. you can use in page links like: <a href="#characters"> and a <div id="characters"> to scroll to the section you want
@sorinr thank you so much!! :D
frankmaayn sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 877 | @sorinr |http://www.freecodecamp.com/sorinr
@frankmaayn welcome
r u lol fan?
@sorinr yes lol but i haven't been playing since my current laptop is a toaster and I'm waiting for an upgrade
@frankmaayn lol
@sorinr i was making toast each game.. i couldn't handle lol
@frankmaayn my older son is a lol team coach
@sorinr like professional? NA team?
@frankmaayn semi pro. they represented romania this year in jakarta
@sorinr wait are you from europe?
anybody?
/giphy hi
@frankmaayn yep
@sorinr thats so cool! i thought everyone here is from the US
@frankmaayn nope. there r fellows here from everywhere
I need help on updating
anybody use heroku/
@kboygit i can't help u with that
ok
@sorinr hey sorin how would i change the background of a heading
like instead of a plain color i want to use an img as a background
hiy guys
question here
I figured out a problem instead of putting down background inside a class
i put it inside the element that I wanted to
and worked
but inside the class it wont work
@frankmaayn in css add the appropriate selector and and use background-image property
but it will not respond or update when I deploy it to heroku
@sorinr what do you mean by selector?
@frankmaayn the html element for witch you want to apply that background-image
ok
heres my app
@sorinr the element is h1
and i added:
h1 {
background-image: http://na.leagueoflegends.com/sites/default/files/upload/art/akali_vs_baron_3.jpg;
}
h1 {
background-image: http://na.leagueoflegends.com/sites/default/files/upload/art/akali_vs_baron_3.jpg;
}
the image above rapollo events
@frankmaayn
h1 {
background-image: url ( path to your images you download the image );
}
@sorinr anyways the image above rapollo events thats the image I unput the background
i did that but it still wont show
post your code here
h1 {
background-image: http://na.leagueoflegends.com/sites/default/files/upload/art/akali_vs_baron_3.jpg;
}
background-image: http://na.leagueoflegends.com/sites/default/files/upload/art/akali_vs_baron_3.jpg;
}
or just add <h1><img src=" http://na.leagueoflegends.com/sites/default/files/upload/art/akali_vs_baron_3.jpg" alt="LOL"></h1>
@frankmaayn take a look: example
ohh so that's what i was missing lol
@frankmaayn what did you miss
I am triggerring an ajax call...which is getting executed successfully the chrome
dev tools show's status code 200
but the no response is recieved...any help on this?
dev tools show's status code 200
but the no response is recieved...any help on this?
the url()
@frankmaayn move all your inline style to codepen css panel
i just included the url and forgot about the "url()"
ok
so am I right?
yea
awesome
thanks
guys
question where are you studying at now for computer science
im barely starting
sorry im new at this
where you studying at now in LA
COC
college of canyons?
are you fil-am?
Hello, mates!
I just trying initialize some odometer here http://codepen.io/Xaz16/pen/oYpaqr
http://github.hubspot.com/odometer/ -- docs
From my function InitDepos
And from copy-paste code from docs.
But nothing is work.
On my project have error :
"Uncaught TypeError: Cannot read property 'odometer' of null(…)"
@kboygit yes lol is this like an interrogation xD
i think i can't call constructor function "Odometer" in function InitDepos
@frankmaayn no man :D i wanted to network to filams
@kboygit oh LOl r u filam?
@Xaz16 you have this in js: document.querySelector('#odometer'.... where is that element with the id="odometer" ?
yea
@frankmaayn I messaged you
lets not make this room a chat room
@sorinr on html <div id="odometer50"></div>. In js #odometer + odometer.id
@Xaz16 then odometer50 not #odometer
@kboygit im new to this.. how do i check the message
@Xaz16 sorry. didn't see you r adding also the id
@kboygit how do you open one to one convo lol I'm clicking on the message but it wont open up
@Xaz16 in the console you get an error that odometer is not defined. its something wrong within your function initDepos
double click it
@frankmaayn
i have done this, thanks all
@Xaz16 :+1:
Hey guys, I'm having a problem.
I'm unable to edit the last part of the code in the editor.
This is the page line-up-form-elements-responsively-with-bootstrap
try expanding the browser window to whole screen @sfshameem5
Uhm..... just wanted to ask how this is turning out ?? is it good enough ?? https://mr-kumar-abhishek.github.io/my-portfolio/
@Mr-Kumar-Abhishek :thumbsup:
thanks ! :D @kirbyedy
mr-kumar-abhishek sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1609 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
@coymeetsworld I did expand to the whole screen, but the same problem persists.
try refreshing your browser too @sfshameem5, if that doesn't work you should still be able to type into the editor it'll just look weird where the cursor is placed i believe, ive seen this happen before
@coymeetsworld I tried refreshing, signing out, and in two browsers. It didn't work.
try clicking at the end, then hitting space
my cursor went to the end
2
Can i load own json file to codepen?
@coymeetsworld WIll try and let you know. Thanks.
sfshameem5 sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 1569 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
np @sfshameem5 i see what youre seeing, but im able to get to the end
i will be logging off though its 2am here
@bpalij yes as long as you host the json file somewhere
or maybe embed it into the JS file, never tried that before
@bpalij you can just make a var myjson = {your json data in here} and work on it
hello guys
i need help for something i am stuck with
so basicly i have this website ldmalta.com and the main gallery is working fine on google Chrome
but it doesnt in fire fox
the strage thing is it runs on my pc fine on fire fox
but it doesnt when put in wordpress theme
How to add twitter button to random quote machine?
@ivoTsolov you checked the version?
@Byzgig Yes, I tried it several times.
Hey all, I am coding my Personal Portfolio webpage. I have used a bootstrap template and plan to switch out different parts of the format/arrangement to suit my needs. The problem I am currently having is putting an image in the timeline. The image I'm importing from cloudinary doesn't take up the whole circle? Any ideas why that might be? After I've got what I want laid out I plan to build it again using only html no bootstrap. I appreciate that's maybe not how some of you would go about it but it makes sense to me and the way that I learn. Anyway here's the pen, any ideas, I'd be very grateful if you could take a look. Thanks http://codepen.io/codecampamy/pen/gLRqGv
@ivoTsolov what's the issue?
@codecampamy are you referring to the water picture?
@codecampamy try manipulating the img-circle class in css
@codecampamy - the
img-circle class gives a 50% border-radius. That image is rectangular, so it becomes elliptical in shape.
@codecampamy keep the height and width of the image same either via css or by editing the image ~
@codecampamy also.... a better way would be to add css class with
img tag rather than div tags for cutting it off ... and also to give borders etc...
@MessiaHack @khaduch @Mr-Kumar-Abhishek I am trying all of this out now - will let you know how I get on... thank you!
codecampamy sends brownie points to @messiahack and @khaduch and @mr-kumar-abhishek :sparkles: :thumbsup: :sparkles:
:cookie: 126 | @messiahack |http://www.freecodecamp.com/messiahack
:cookie: 408 | @mr-kumar-abhishek |http://www.freecodecamp.com/mr-kumar-abhishek
:star2: 2023 | @khaduch |http://www.freecodecamp.com/khaduch
@codecampamy you could also look at my portfolio for getting an example of cutting of images ~ https://mr-kumar-abhishek.github.io/my-portfolio/
any ideas how to make better flash animation ???
http://s.codepen.io/Magiczny/debug/pNpWbw
http://s.codepen.io/Magiczny/debug/pNpWbw
@codecampamy - if you aren't familiar with the css-tricks website - that's a good one to use for all kinds of CSS "tricks" - https://css-tricks.com/ - like this article https://css-tricks.com/clipping-masking-css/ - good luck with the project!
Hi everyone
@codecampamy cloudinary have a lot of image manipulation that you can use. just read http://cloudinary.com/features their docs and try what is best suited for your project
@sorinr it is the first time I am looking at cloudinary .. or else I wouldn't have put images in git revision control ~ :/
@Mr-Kumar-Abhishek they have some really nice img manipulation you can do by url.
@sorinr yes I am signing up and checking them out :)
hello guys i am stuck on something for 3 days and i cant find the problem, anyone who has build slideshows before wanna give me a hand?
@sorinr I was using image magik from command line before for image manipulation
why am not getting anything?
how can i make the background spaces on my page different images ? http://codepen.io/bestintown23/pen/woPMBV?editors=1000
@bestintown23 who is that 'bob' ?
@sorinr im sorry what do you mean?
anything I should add to the functionality before doing the graphics?
it's the calculator btw
@bestintown23 you have in your code:
var wikiURL = 'https://en.wikipedia.org/w/api.php?action=query&list=search&format=json&srsearch=' + bob;
@sorinr i think you have the wrong person that is no where in my code
Hi guys. I'm having a frustrating problem with the Simon project. I have a timeout function cycling through an array of randomly generated numbers. As it gets to each number, it lights up a different color. The problem I'm having is it rushes through the first 1 or 2 colors before properly timing the rest of the colors, and I can't figure out where to put my timeout function to fix this. Here's my code:
http://codepen.io/bd1887/pen/qqpvzR?editors=0111
http://codepen.io/bd1887/pen/qqpvzR?editors=0111
If you push the "start" button, it will start cycling through the colors
@bestintown23 yep. sorry. this one was for @jyapujuju
@bd1887 i would use on mouseup instead of mousedown
hi
@bestintown23 To expand on what I was talking about yesterday with adding sections, remove your 800px margin-top from your CSS for all of your sections. Use min-height to specify how big you want each section to be. Add more sections as needed. You can apply a background image to individual sections or place <img> tags inside each section to display different images. A basic outline could be:
<header>
<nav></nav>
</header>
<main>
<section id="about"></section>
<section id="first-image-section"></section>
<section id="portfolio"></section>
<section id="second-image-section"></section>
<section id="contact"></section>
</main>
<footer></footer>This is a more detailed description of how to set it all up: http://blog.teamtreehouse.com/use-html5-sectioning-elements
Hey guys, I already posted this in the forum, but I'm having trouble figuring out why my divs that are nested inside others go all over the place on mobile. https://codepen.io/dylanmurphy/pen/LbeeOQ
@TylerMoeller ill give it a shot thanks
bestintown23 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1054 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
"game development" is shows vry big in phone scr but its nice in desktop. help !
@dmurphy5 Bootstrap grid requires a div with a container class, then another div with a row class inside of that, followed by more divs with up to 12 columns inside each row. Your elements are jumping around because you have set up a div as both a container and a row with more than 12 columns inside of that.
<div class="container">
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
</div>
</div>
@TylerMoeller That makes sense. I saw that on some other pages and I thought it was redundant.
It can get ugly, but it's required to structure it that way. Lots of other options / examples here: https://getbootstrap.com/css/#grid
How do I add an API? for the random quote machine
i cant seem to get a view of the photo whose i link i pasted in my html why is that
@sorinr Ok but that doesn't seem to fix the problem
@okmarq do you have s code snippet/
i don't even know what that is?
@LucaCras This article shows you how to use one of the many APIs out there - lots of other options, but this should help you get started: https://css-tricks.com/using-the-wp-api-to-fetch-posts/
can you show your code
<img src="https://drive.google.com/file/d/0BwyKgj0mADzQQzBOMlRpZUJDVVU/view?usp=sharing" alt="Life">
<h2>life</h2>
seem to work fine
do you have the img tag nested in another tag?
no
the photo worked?
yes
@okmarq The source URL should be: https://lh6.googleusercontent.com/ZirUp6TD3yJQVEhsddZGAPe_Sc02yOxif7yFrj13B8OVOiEojzq5aCqiaMIoAS9nsGL3SgdkjpWe_Wk=w1920-h1134-rw
okay then what am i doing wrong
You are linking to the page with the image, not the image itself
@bd1887 it seems u haven't changed anything to ur pen
how did you get the source url
Right-click the image and select "Copy Image Address" (In Google Chrome)
Or view the page source to find the URL
yes that did it for me
okay thanks
Does the Tribute Page assignment require us to use strictly Bootstrap an NO CSS? With the exception of the margin-top as pointed out in the instructions.
@onewebdeveloper nope. u can do it whatever u want
@sorinr Thanks.
onewebdeveloper sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 879 | @sorinr |http://www.freecodecamp.com/sorinr
Hello all
@onewebdeveloper welcome
has anyone else found out how to make API calls from CodePen. I've removed 's' from 'https://' and that is not working
also, checked the forums and found that disabling adblockers helps but i also have mine disabled and it is not working with that either. no calls getting through to any apis
@Duruzican It should work - are there any errors in your browser's console? (Ctrl+Shift+J)
Replace Ctrl with Command if on a Mac
it is telling me that document.ready is not a function
nvm... forgot my $
@Duruzican
$(document).ready(function(){ not (document).ready(function(){
wow lol
:)
thanks @TylerMoeller
duruzican sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1055 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@Duruzican Which project are you working on?
@TylerMoeller
https://codepen.io/iehab91/pen/aByaWa?editors=1000
that's perfect for both but, there's a deference between first img and both imgs.
am I doing the grid system correctly ?
btw, in phone screen all r same size
@clockwerkz I am working on the Show the Local Weather, I've got it working now
@Duruzican I'm having a similar issue with using the API. My code works fine locally, but when I upload it to codepen.io it's not working.
@clockwerkz So there are two things to check; if you have an adblocker, disable it for now or add codepen to the exceptions list; also go up to your browser's url bar and make sure you are loading codepen in http:// not https://
i was never told to look out for this until yesterday, so that was extremely frustrating trying to get things to work
unless you are failing to get your geolocation data, that is a different issue having to do with chrome
@Duruzican It's getting the geolocation, I tested for that. It doesn't prompt me to allow access through the codepen tho.. when I run it locally it prompts me
yeah, it would not prompt me either, are you using chrome?
Yup
let me see if I can link it.. I'm trying to "piece" it back together haha.
i think it has to do with the last few updates and chromes allowance of unsecured protocols, currently havent found a workaround to that yet other than just removing the 's' in https although that is not recommended
You can see there's a message about getPosition and watchPosition in the dev console there
So when I switch to https, I don't get that but I get other issues.
yeah, you need to get your geolocation from a different source, like the api i listed above, Chrome 50 update prevents apps from collecting geolocation data using that function. That was a specific problem i ran into. If you change that, your app should work
it has to do with the navigator function your are using
ahh
Which api did you mention? I scrolled up but I don't see it..
ahh nice, cool.. let me try that!
let me know how it works out
Yup, gonna try it out right now :)
my code isn't showing the current status of freecodecamp.com on twitch.tv
here it is///////http://codepen.io/whiz25/pen/jVaLxM?editors=0010
I have a question for the same project why are only two images displayed on the streamers list??
http://codepen.io/gebrutommy/pen/WoMvyj?editors=0011
Its not showing the offline streamers now...
http://codepen.io/gebrutommy/pen/WoMvyj?editors=0011
Its not showing the offline streamers now...
@whiz25 use this instead
UPDATE: Due to a change in conditions on API usage explained here Twitch.tv now requires an API key, but we've built a workaround. Use https://wind-bow.hyperdev.space/twitch-api instead of twitch's API base URL (i.e. https://api.twitch.tv/kraken ) and you'll still be able to get account information, without needing to sign up for an API key.
^^^^^^^^^^^ This is Objective 10 , from the twitch project page https://www.freecodecamp.com/challenges/use-the-twitchtv-json-api
@tommygebru Guess the other names in the streamer list are not accessible at all (No account anymore) So they don't show up in the success callback. They instead enter the error callback. You gotta handle that one
Question: I'm wrapping up my Twitch project. Even though I traverse the array of users in order, my listings of users/statuses populates in a different order every time I refresh. At first, I thought this was because of the asynchronous nature of ajax. However, I set async to false and it still populates in a different order. Sometimes, listings don't even show up. (This fails to meet one of the user stories that we must (always) be able to see if freecodecamp is streaming.) Any ideas? http://codepen.io/HomerAllen/pen/NbyqZv
@tommygebru Let me take a look
@tommygebru ah, ok, it looks like you got it solved
@alpox Nice I shall make a message for that :smile:
I need help with my Wikipedia website. I'm almost completly lost in the API documentation. I'm not sure exactly how to use it. Any help would be really appreciated
Hello, Can someone tell me why Clikcing the yellow box doesnt expand the search bar?
https://codepen.io/Waqas909/pen/yVooZE
https://codepen.io/Waqas909/pen/yVooZE
@donealbercier Yeah, it's a bit more complex then the openweatherapi isn't it? I had to stare at the documentation for awhile an play with it and do some searches.
@donealbercier YEAH, it's kinda tricky, documentation is poorly written . do you have anything
https://raw.githubusercontent.com/dariusk/corpora/master/data/games/jeopardy_questions.json hey guys.... how would i use this JSON file in my code pen
@James-N-M
$.getJSON( (link) , function(data){
//What you want to do with the JSON you just got
});
@Stivis So far I'm kind of rereading the main page hoping to get some inspiration lol. I'm just wondering how to get the right information
@homerallen Haha waay more complex. And yea thats what I'm doing
@donealbercier
i found this
//https://en.wikipedia.org/w/api.php?action=opensearch&limit=10&format=json&callback=portalOpensearchCallback&search=anything u put after search= shows possible search results
@Waqas909 https://github.com/dariusk/corpora/blob/master/data/games/jeopardy_questions.json how could i write that with this ?? Can you type it up for me just so i have a refference
@donealbercier I found the sandbox to be extremely helpful: https://en.wikipedia.org/wiki/Special:ApiSandbox#action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=jsonfm
@donealbercier not sure if it's the right one, but give it a try
I tried it. Not sure if its working its giving me an error
@homerallen Yea I'm using it right now. This is gonna take me a few hours to get down I'm sure
@Waqas909 Alright I removed https: and its working now thank you
donealbercier sends brownie points to @waqas909 :sparkles: :thumbsup: :sparkles:
:cookie: 271 | @waqas909 |http://www.freecodecamp.com/waqas909
@James-N-M
~~~
$.getJSON('https://raw.githubusercontent.com/dariusk/corpora/master/data/games/jeopardy_questions.json', function(data){
$('p').text(data.description); // puts the description property from the JSON file in the <paragraph> element
})
@James-N-M
$.getJSON('https://raw.githubusercontent.com/dariusk/corpora/master/data/games/jeopardy_questions.json', function(data){
$('p').text(data.description); // puts the description property from the JSON file in the <paragraph> element
})
try it, make sure you have a <p> </p> element in your html first
Nvm guys, I got it to work. Had a syntax error i think
@Waqas909 Unreal thank you !
james-n-m sends brownie points to @waqas909 :sparkles: :thumbsup: :sparkles:
:cookie: 272 | @waqas909 |http://www.freecodecamp.com/waqas909
@Waqas909 I forgot to add jquery in my javascript file LOL my bad got emm though
Alright so I am once again confused at why my API request isn't working. The link seems to work just fine on its own but not on my website. http://codepen.io/donealbercier/pen/PbQPqp?editors=1111
@donealbercier small change in wikiApi : var wikiApi = "https://en.wikipedia.org/w/api.php?action=opensearch&limit=10&format=json&callback=portalOpensearchCallback&search=london&callback=?" works for me....
@spieg Thank you Mr.Magician lol. I was getting very frustrated
donealbercier sends brownie points to @spieg :sparkles: :thumbsup: :sparkles:
:cookie: 263 | @spieg |http://www.freecodecamp.com/spieg
Can someone tell me how i can host my site on github
hi guys how do you require a user to input a data?? do you need if else for that?? or some kind of javascsript magic
anyone here do the twitch api zipline yet?
Can someone help me?
LOL does anyone else see that my icon is not working?
http://codepen.io/gebrutommy/pen/LbQGBQ?editors=1101
http://codepen.io/gebrutommy/pen/LbQGBQ?editors=1101
look at the STREAMERS there should be a down arrow
https://codepen.io/Waqas909/pen/yVooZE
2 Questions:
1- How do i expand my search bar from both sides, instead of just the right side, when clicked on.
2- Why does the transition not work when i focus the search bar
@homerallen To avoid the need of setting async: false, loop through the array with a callback. .map() is a good way to do it:
arrayOfUsers.map(function(user, i) { })
@chriemma there is a room on gitter
@TylerMoeller Thanks! aync: false didn't work anyway so what I ended up doing, maybe more complex than using map, was I used recursion: http://codepen.io/HomerAllen/pen/NbyqZv
homerallen sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1056 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@Waqas909 You should use both the -webkit:transition and -webkit:transformation methods
@homerallen That's a clever workaround ;)
@Waqas909 I did the same thing on my site http://codepen.io/donealbercier/pen/PbQPqp
@TylerMoeller Thanks Tyler, so is map! Very interesting!
:warning: homerallen already gave tylermoeller points
homerallen sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
@mhdavis @zKruki did you have questions?
@donealbercier Can u explain to me what they are?
@donealbercier Thanks!
waqas909 sends brownie points to @donealbercier :sparkles: :thumbsup: :sparkles:
:cookie: 264 | @donealbercier |http://www.freecodecamp.com/donealbercier
@tommygebru yea i actually have a few in terms of accessing the json files for streamers
@tommygebru Im having a problem with media queries. my columns won't clear floats at the desired device width
@Waqas909 You could remove the fixed positioning and center it by using a top margin with auto left/right margins:
input[type="text"]{
background-image: url('https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-128.png');
background-position: 96% 5px;
background-repeat: no-repeat;
padding: 0px 40px 0px 10px;
background-size: 25px 25px;
width: 200px;
border-radius: 6px;
transition: width 1s;
margin: 20vh auto 0;
}Now when you put focus on the textbox, it stays centered.
@mhdavis I am using a different api call
UPDATE: Due to a change in conditions on API usage explained here Twitch.tv now requires an API key, but we've built a workaround. Use https://wind-bow.hyperdev.space/twitch-api instead of twitch's API base URL (i.e. https://api.twitch.tv/kraken ) and you'll still be able to get account information, without needing to sign up for an API key.
@tommygebru it's not the kraken one i take it
yea
yeah it works fine
check out my codepen
@zKruki are you using floats in your code?
@TylerMoeller Thanks That fixed it, however when I focus it, it doesnt apply the transition, it instantly changes the width
waqas909 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
@Waqas909 No Problem
:star2: 1057 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@Waqas909 I didn't notice that, hmmm, I'll take a closer look
@tommygebru cool i was trying to find an example of the composition for the api call
@Waqas909 Set the desired width in the input:focus{} element and the transition in the input type
`
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
transition: 1s ease-in-out;`
@tommygebru ```body {
background-color: gray;
margin: 0;
padding: 0;
border: 0;
}
h4{
padding: 25px;
}
h1{
text-align: center;
}
.colummns:after{
content="";
display: block;
clear: both;
}
.content1:after{
content="";
display: block;
clear: both;
}
.content2:after{
content="";
display: block;
clear: both;
}
.content3:after{
content="";
display: block;
clear: both;
}
.contact:after{
content="";
display: block;
clear: both;
}
section, aside{
float:left;
width:48%;
padding: 1%;
margin: 1%;
}
img{
width:100%;
margin-right: 0;
padding: 0;
}
.content1{
float: left;
background-color: red;
width: 48%;
padding: 1%;
margin: 1%;
}
.img1{
float:;
width:;
margin:;
padding:;
}
.img2{
}
.content2{
float: left;
width: 48%;
padding: 1%;
margin: 1%;
background-color: blue;}
.content3{
float: left;
width: 48%;
padding: 1%;
margin: 1%;
background-color: green;
}
.forms{
background-color: green;
float: right;
width: 48%;
margin: 1%;
padding: 1%;
}
.closingnote{
background-color: green;
float: right;
width: 48%;
margin: 1%;
padding: 1%;
}
.foot-left{
float: left;
width: 48%;
padding: 1%;
margin: 1%;
background-color: teal;
}
.foot-right{
width: 48%;
padding: 1%;
margin: 1%;
float: left;
background-color: teal;
}
.copyright{
text-align: center;
}
.test{
border-style: solid;
border-size: 1px;
margin-top: 1px;
}
/ Media Queries /
@screen and(max-width: 766px){
section, aside{
float:none;
clear:left;
width:100%;
}
}
@screen and (max-width: 766px){
test{
background-color: red; }
}
@tommygebru have you tried creating links for your streamers yet? one thing ive seen reoccurring is that the links to take the user to the stream are busted for most folks
@Waqas909 Transition needs to be added to the :focus as well:
input[type="text"]{
background-image: url('https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-128.png');
background-position: 96% 5px;
background-repeat: no-repeat;
padding: 0px 40px 0px 10px;
background-size: 25px 25px;
width: 200px;
border-radius: 6px;
margin: 20vh auto 0;
transition: width 1s;
}
input[type="text"]:focus{
width: 500px;
transition: width 1s;
}```body {
background-color: gray;
margin: 0;
padding: 0;
border: 0;
}
h4{
padding: 25px;
}
h1{
text-align: center;
}
.colummns:after{
content="";
display: block;
clear: both;
}
.content1:after{
content="";
display: block;
clear: both;
}
.content2:after{
content="";
display: block;
clear: both;
}
.content3:after{
content="";
display: block;
clear: both;
}
.contact:after{
content="";
display: block;
clear: both;
}
section, aside{
float:left;
width:48%;
padding: 1%;
margin: 1%;
}
img{
width:100%;
margin-right: 0;
padding: 0;
}
.content1{
float: left;
background-color: red;
width: 48%;
padding: 1%;
margin: 1%;
}
.img1{
float:;
width:;
margin:;
padding:;
}
.img2{
}
.content2{
float: left;
width: 48%;
padding: 1%;
margin: 1%;
background-color: blue;}
.content3{
float: left;
width: 48%;
padding: 1%;
margin: 1%;
background-color: green;
}
.forms{
background-color: green;
float: right;
width: 48%;
margin: 1%;
padding: 1%;
}
.closingnote{
background-color: green;
float: right;
width: 48%;
margin: 1%;
padding: 1%;
}
.foot-left{
float: left;
width: 48%;
padding: 1%;
margin: 1%;
background-color: teal;
}
.foot-right{
width: 48%;
padding: 1%;
margin: 1%;
float: left;
background-color: teal;
}
.copyright{
text-align: center;
}
.test{
border-style: solid;
border-size: 1px;
margin-top: 1px;
}
/ Media Queries /
@screen and(max-width: 766px){
section, aside{
float:none;
clear:left;
width:100%;
}
}
@screen and (max-width: 766px){
test{
background-color: red; }
}
```
@mhdavis not yet im still trying to figure out the layout a little bit
@donealbercier Thanks
@TylerMoeller That fixed it!
@TylerMoeller That fixed it!
waqas909 sends brownie points to @donealbercier and @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: waqas909 already gave tylermoeller points
:warning: waqas909 already gave donealbercier points
@zKruki do you have a codepen instead?
@tommygebru yes
Cool effect, might have to do that with my wikipedia viewer :)
LOL why not share that?
@TylerMoeller i cant seem to get a simple icon to display
@tommygebru http://codepen.io/futuristicHat/pen/MbrpGb
its supposed to be a drop-down arrow
@tommygebru I'll take a look at your pen - where do you want the icon?
right there with ->> STREAMERS
@zKruki what did you want again?
@tommygebru i wanted to know why the media query wasnt working
basically i would like it if the columns would go back to thier original layout once the screen size is below 700px
by columns i mean the paragraphs
oh do you mean where there would be a grey background again?
@tommygebru Hmm, I can't get the ionicon to display either, would have to look into it more. If you are not against using Font Awesome, you can use the same icon with this code:
Just replace the ionicon CSS with the Font Awesome CSS in your codepen settings to get it working: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css
<div class="stream-bar flex center">STREAMERS <i class="fa fa-angle-down fa-lg" aria-hidden="true"></i></div>Just replace the ionicon CSS with the Font Awesome CSS in your codepen settings to get it working: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css
on the sides
@TylerMoeller LOL sorry i forgot to use the class!!!
:laughing:
It still didn't work when I did it though either lol, but I didn't read their documentation, just copied their code and put it in their strange <ion-icon> tags
@tommygebru like i want the two <p> in the first container to revert to thier original format with the use of the media queries once the screen size is below the threshhold
lol i dont understand the question but you can simply it like this
@media and(max-width: 766px){
section, aside{
float:none;
clear:left;
width:100%;
}
test{
background-color: red;
}
}
nvm...not a good container to test it out on
@TylerMoeller i got the icons to work but the worst thing about this project is that i cant view it in the large format on codepen like DebugMode...
I have to export the "pen" and then double click onthe files in my desktop to have it show on a new tab browser
@TylerMoeller could you look at the section, aside part in the css? http://codepen.io/futuristicHat/pen/MbrpGb
That is odd, there are some errors in the console to investigate in debug mode @tommygebru
Sure @zKruki
You want a single column below 700px and two columns above?
i havent dived in fully to address the js errors just yet
@TylerMoeller hmmm
Sorry, not sure what look you are trying to achieve with your media queries
i want the blocks to revert to before float: left
@zKruki do you want one of the elements to be hidden??
I'm sorry, I'm not sure I understand :( what to you mean by revert to before float: left?
i find floats confusing
i took two paragraphs and floated them to the left to form two colums because it looks nice on md+ screens...
i dont see anything to the left they are all in the middle
and im trying to use @media screen to clear all css at viewport size of around 700px
@tommygebru thats odd
https://codepen.io/Waqas909/pen/yVooZE?editors=1100
Why doesnt
#random{
margin: 5vh auto;
border-radius: 5px;
font-family: 'Yrsa',serif;
font-size: 15px;
}center the random id element?
@tommygebru @TylerMoeller thanks, i think i fixed it.
zkruki sends brownie points to @tommygebru and @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1058 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
:cookie: 781 | @tommygebru |http://www.freecodecamp.com/tommygebru
@zKruki I'm guessing you want this, but I'm sorry, I don't understand what you want it to look like below/above 700px. I understand clearing css and floating left, but not sure what you want to achieve visually by doing that.
<div class="container">
<div class="row about">
<div class="col-xs-12 col-sm-6">
<h1>Column 1</h1>
<p>
Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.
</p>
</div>
<div class="col-xs-12 col-sm-6">
<img class="img-responsive" src="http://cdn.neonsky.com/4bd5ec18d2ca3/images/lefestyle_web_adds_0001-2.jpg">
</div>
</div>
</div>
Also,
container.fluid should be container-fluid everywhere or just container if you want a fixed width
@TylerMoeller ok, ill send a full page link and you can resize the screen horizonally and you should be able to see in the top section how it flip flops
@zKruki Okay, I just did that in the pen I linked above - no CSS, just bootstrap grid
It breaks at 768px
@zKruki nice :smile:
@TylerMoeller intresting, maybe offsets would allow some extra areas on the sides for a background
You could also use padding to give some extra space on the sides
Just updated it to show what I mean
@TylerMoeller Why doesnt
#random{
margin: 5vh auto 0;
}Center the random id?
@TylerMoeller lol, i see how you did that
:)
@Waqas909 It needs to be a block element for that to work
@TylerMoeller had to look it from the inside out lol
@Waqas909
#random{
display: block;
margin: 5vh auto 0;
border-radius: 5px;
font-family: 'Yrsa',serif;
font-size: 15px;
}
@TylerMoeller Is button tag not considered a blocK?
@TylerMoeller Thanks tho
waqas909 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: waqas909 already gave tylermoeller points
@Waqas909 I believe they are considered inline-blocks
Oh
how can i make this picture cover the red background behind it? http://codepen.io/bestintown23/pen/woPMBV?editors=1100
@bestintown23 Make it a background image and use background-size: cover; http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover
@TylerMoeller so with my code if i try to do it that way, it does not show up. what could be wrong?