hey just finishing my first tribute page if anyone can give me a few critiques before moving onto the next project it would be much obliged. https://codepen.io/sosomomo/pen/bwNwZp
I already notice there is a formatting error with the quote timeline which drops it into text
@somoking Everything looks great on my mobile except anything below "timeline"
@somoking I noticed <h1> Lawrence is misspelled.
@somoking - perhaps some typos - "Lawrance" in the heading,
"Lawrence" in the text. Typos in the timeline "wedlockin wales" => "wedlock in Wales", "august" => "August"
"Lawrence" in the text. Typos in the timeline "wedlockin wales" => "wedlock in Wales", "august" => "August"
@somoking - as the window is narrowed, the timeline text and the quote "I Loved You so..." overlap.
yes I used a relative position and top to adjust the text downwards manually but i am wondering if there is a cleaner way to do that and still have the nicely centred timeline. I tried vertical center from how to center css but it did not work. By the way thank you all for your support @khaduch @mchor38 @U-ways
:cookie: 119 | @mchor38 |http://www.freecodecamp.com/mchor38
:cookie: 345 | @u-ways |http://www.freecodecamp.com/u-ways
somoking sends brownie points to @khaduch and @mchor38 and @u-ways :sparkles: :thumbsup: :sparkles:
:star2: 1642 | @khaduch |http://www.freecodecamp.com/khaduch
i am refering to the timeline text. I assumed margins would help deal with this but it seems like it isent helping.
can someone tell me why none of the other users are being displayed!?!?
http://codepen.io/nickey_vee/pen/yaNzxQ?editors=0010
http://codepen.io/nickey_vee/pen/yaNzxQ?editors=0010
@nickeyvee - right now, I'm not seeing anything - looks like there is (perhaps) and error being flagged in the javascript window of the CodePen UI?
@khaduch look now
its only showing the follower with an error.
its not showing the rest
@nickeyvee - you must be running into the closure problem where you have a for loop to set up ajax transactions, but due to the way that the varioiables are evaluated within a closure, each instance ends up using the same value as the last location in the array, i this case, I see this error repeated several times:
https://api.twitch.tv/kraken/streams/comster404 404 (Not Found)
@khaduch should i bind it to a variable outside of the loop?
@nickeyvee - you can read about it here in this article: http://javascriptissexy.com/understand-javascript-closures-with-ease/ - I think that it is the third item in the article "Closures Gone Awry". There is a way to use IIFE to get the values captured within the closure, I found that using some data that comes back from the return, such as picking out the username and then constructing the URL for the next data fetch worked (although I haven't finished this project nor have I looked at it in a while.)
Hi guys
I was trying to flush all of my results everytime new search being entered but it just doesn't work. Any advice
, please?
``
//Innitiation
html = "";
resList = [];
function FormatRes(title,snippet){
this.title = title;
this.snippet = snippet;
};
getWiki = function(data){
$('#target').empty();
console.log("before: " + resList);
resList.length = 0;
console.log("after: " + resList);
resArray = data.query.search;
for ( var i in resArray){
resList.push( new FormatRes(resArray[i].title, resArray[i].snippet));
html += '<div class="result"><a href="https://en.wikipedia.org/wiki/' + resList[i].title + '" target="blank">' + '<h4>' + resList[i].title + '</h4><br><p>' + resList[i].snippet + '</div>';
$('#target').html(html); };
};
$(document).ready(function(){
function search() {
$.getJSON("https://crossorigin.me/https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=" + $('#searchBox').val() + "&prop=info&inprop=url&utf8=&format=json", getWiki)
};
// Enter to search
$("#searchBox").keypress(function(e) {
if(e.which == 13 || e.which == 1 ) {
search();
}
});
});
``
what editor all of you use?
webstorm or sublime?
@q281589190 Codepen ^^
and others man?
i like notepad++
@KoniKodes you can take a look into vue here: https://laracasts.com/series/learning-vue-step-by-step
@kn1ghtdave can we see your pen
@kn1ghtdave I you set up your variable html outside the function and then you add by
html += - inside the function first make sure html is empty if not you will just add to what you have.
Hi, guys! you guys know if I'm doing this right? I need to push the odd numbers from 1 through 9 to myArray using a for loop. here's my code:
for (var i = 0; i < 10; i += 2){
if (i % 2 !==0){
ourArray.push(i);
}}
but isn't working :c
can anyone check out my portfolio page, i would really appreciate the feedback http://codepen.io/ald1413/pen/mAbZzy
Guys when you create projects, can you choose pictures that aren't your own? For exeample if i choose to make a landing page about an actor, do i need to worry about copyrights right or should i not give a **?
@maeswilliam good point! I have been happily copying and pasting content for my fanpage, but actually should I? We are training up to be responsible, proffesional developers. I did a quick search and found http://lifehacker.com/5992419/the-best-ways-to-be-sure-youre-legally-using-online-photos. Even though what we are doing here is not going to been seen in the wild, we are developing our habits and work patterns. So my answer is, yes, give a **!
@Argestis I think that your loop is counting up in 2s so i = 0, 2, 4, 6, 8, during loop, so i % 2 always equals 0. use i++ on the counter. I think it probably is working, you are just not getting any results!
@q281589190 Atom is great and free, but I use vim because it feels hardcore! :smile:
@leonormes @maeswilliam Wikimedia images are normally safe
@labiej Tiens ssalut le belge :P
hi, where can I find a quotes' API?
@maeswilliam Ouais, je suis flamand donc mon francais n'est pas bien
@DonnieTrente Didn't they provide an example in the assignment?
@labiej Ik ben drietalig, dus zowiezo geen probleem voor ons te kunnen begrijpen ^^
@labiej wel leuk dat er tenminste een belg van die facebook groep aanwezig is ;)
Gitter staat meestal op de achtergrond open, altijd handig om te kijken wat anderen doen
@labiej, yep, thanks very much!
donnietrente sends brownie points to @labiej :sparkles: :thumbsup: :sparkles:
:cookie: 443 | @labiej |http://www.freecodecamp.com/labiej
@DonnieTrente I seem to have misremembered. I used this one
Test
@DonnieTrente the API I used calls for the usage of a proxy (crossorigin.me) to avoid CORS issues
@labiej ja idd
hello does anyone know a website that generate google fonts combinations for a website?
why i put img and input together,i can't align them at a line
they are all have floated
Hi guys! I am newbie in this. And I have a client that I need to show my (front-end) work. I have no idea what's the best way. Is there any web app that you guys normally use? Do you own your own server? How do you do? IS there a tutorial out there (XD)?
hey guys
hey all
Hello
I just got a major part of functionality to work on my new (revamped) portfolio site. I still have a TON of cleanup to do with the code and layouts etc, but I just wanted to know what you guys think of how it functions and the overall layout (which changes based on screen-size): https://amitp88.github.io/New-Portfolio/
I also plan on changing the colors too btw
@alejandroariasag If they are purely frontend you can use https://pages.github.com
I think the functionality is good, the design is a bit overwhelming, too much movement. Also, hard to follow the flow
@AmitP88 the colours seem to clash with the pictures, it seems "messy". It's very hard to make that kind of layout work out nicely
i.e. what @sjames1958gm said already :D
@labiej yeah, I'm hoping to use Adobe color panel to help with better color selection
ah ok
I got the inspiration for the layout from this site: https://amarula.com/#!/
The problem is that in general your projects will use vastly different schemes themselves. You'll need a very clean scheme to pull it off
hmmmm, what if I did an inset border on the project images? do you think that will work?
@AmitP88 Each of the sections on that page are related to the same concept. Maybe a unified color scheme will help.
I had trouble knowing where to look
I had trouble knowing where to look
It might help. Lighter/brighter colours could help though
ah ok. I was also debating on adding the little blended in arrows in the info panels like how the amarula site has theirs
So what do you guys think of my calculator layout? https://codepen.io/labiej/pen/rVoPpz
@labiej I'm guessing the functionality hasn't been coded yet, but as far as the layout itself, not bad :)
I'm not sure about the flat look though, since they're buttons, but that's just imo
I like the color inversion though on hover
I might add some depth but I'll have to check what that means regarding for flexboxes and usage of viewport lengths
@labiej I found some interesting buttons on here if you wanna check them out https://www.sanwebe.com/2014/02/css3-buttons-examples-with-effects-animations
I think I'm going to keep it like this for now (rounded the corners a bit though), just to get the functionality done
Hi, i want to ask this, if there is $heading-font: Helvetica, sans-serif; what does the dollar sign $ mean?
what does it select?
It's a variable you can use in e.g. SCSS
Ehm, okay. Because 'plain' css don't recognized the $ symbol. I reviewed some pens for my portfolio project. Thanks
@labiej @AmitP88 I actually like the flat look. Retro! Joris, it looks great and is responsive. You nailed it!
@ventjejle It's quite useful, you can use it to define your style at the top of your file and switch to a different color scheme in seconds
@leonormes thanks
labiej sends brownie points to @leonormes :sparkles: :thumbsup: :sparkles:
:cookie: 119 | @leonormes |http://www.freecodecamp.com/leonormes
Hellp how do i create de Contact Me http://codepen.io/PredaRobert/pen/rrVmmk?editors=1100#0
I would wait until you know backend development
Otherwise there are huge security risks
e.g. spammers utilising your form to send thousands of mails
@labiej Thank you
predarobert sends brownie points to @labiej :sparkles: :thumbsup: :sparkles:
:cookie: 444 | @labiej |http://www.freecodecamp.com/labiej
almost so demotivated. Working for days on a button; just to show up #bootstrap #fontawesome. :worried: :smile:
can someone check if my fonts and bottom icons are displaying correctly in ie? http://codepen.io/swetz/pen/yaymBa
@mesmoiron - what's the problem, if you are still having one? want to post a link to your code?
Got my problem fixed, thanks all!
Does anyone have a good alternative to www.palettable.io/
I am color challenged and need my palettable
@IMLaing yes coolors.co
@IMLaing is really fun
@flopywood Thank you I will look now!
imlaing sends brownie points to @flopywood :sparkles: :thumbsup: :sparkles:
:cookie: 319 | @flopywood |http://www.freecodecamp.com/flopywood
Wicked nice @flopywood Thank you
imlaing sends brownie points to @flopywood :sparkles: :thumbsup: :sparkles:
:warning: imlaing already gave flopywood points
@123xylem
function alertUWin(){
var box=$("#alertBox");
box.style.display='block';
$("#alertBox").css("display","block").text("You Win!");
};Can some one advise how to make this function display the following AlertBox
#alertBox{
display:none;
z-index:10;
opacity:0.9;
position:fixed;
top:29%;
left:36%;
width:320px;
height:260px;
}The box is set to display none.. when function activates i want to change the display to block thereby making it appear
@IMLaing you're welcome!
@123xylem you're not alerting anything
@123xylem wait. As far as I know, an alert message is displayed : alert("...");
I've never tried alerting anything with jQuery
This message was deleted
@flopywood alertbox is a hidden div. When i use alertfunction it unhides that div
@123xylem http://api.jquery.com/toggleclass/
@123xylem oh wait then I would advise dong something like a toggle
@123xylem @IMLaing yes exactly a toggle would be great
@flopywood got you fam
@aszwet1 https://d.pr/fqoF
that or accessing the dom and assign your div = ""; and then create a function that onclick changes the value to = "#"
why the element don't move? https://codepen.io/WuRui/pen/pEJgkA?editors=0010
@qq1009479218 what do you want to make them do?
http://codepen.io/huluoyang/pen/GZbBwL @flopywood like this
@qq1009479218 mmm I don't know. I'm sorry, I can't help you
thank you
@qq1009479218 but if you want to center the input element and the buttons, I would recommend chaingin the class to class="form-horizontal"
@flopywood @IMLaing thanks looking into it
123xylem sends brownie points to @flopywood and @imlaing :sparkles: :thumbsup: :sparkles:
:cookie: 329 | @imlaing |http://www.freecodecamp.com/imlaing
:cookie: 320 | @flopywood |http://www.freecodecamp.com/flopywood
..ok!1
@123xylem good luck
@qq1009479218
Replace
<div class="col-xs-8 col-sm-8">
<input type="text" class="form-control dm-content" placeholder="说点什么吧！" />
</div>
<div class="col-sm-2 col-xs-2">
<button class="btn btn-primary btn-block dm-launch">发射弹幕</button>
</div>
<div class="col-sm-2 col-xs-2">
<button class="btn btn-primary btn-block dm-remove">清除弹幕</button>
</div>with
<div class="row">
<div class="col-xs-8 col-sm-8 col-md-offset-2">
<input type="text" class="form-control dm-content" placeholder="说点什么吧！" />
</div>
</div>
<div class="row">
<div class="col-sm-2 col-xs-2 col-md-offset-4">
<button class="btn btn-primary btn-block dm-launch">发射弹幕</button>
</div>
<div class="col-sm-2 col-xs-2">
<button class="btn btn-primary btn-block dm-remove">清除弹幕</button>
</div>
</div>@IMLaing
#alertBox{
display:none;
z-index:10;
opacity:0.9;
position:fixed;
top:29%;
left:36%;
width:320px;
height:260px;
background-color:grey;
color:black;
border:2px solid black;
border-radius:4px;
}
.alertBoxShow{
display:block;
}This is the class i add
function alertUWin(){
$("#alertBox").toggleClass("alertBoxShow").text("You Win!");
};this is how I add it.. Its not working though?
@123xylem the # is going to be taken first - I think you need !important
and are you getting an console errors?
@IMLaing no console errors.. so the Class doesnt override the id? hmm where/ how do I add !important
you add !important before the ;
so display: block !important;
@IMLaing thanks!@
123xylem sends brownie points to @imlaing :sparkles: :thumbsup: :sparkles:
:warning: 123xylem already gave imlaing points
Remember that # gets more points towards targeting than a . so id is stronger than class
I THINK - to be honest CSS is the death of me
- I mean I know that classes are less than ids for selectors - I THINK - that will fix the problem.
It worked
Wicked
ur a god
LOL
it was all you - just pushed you along
":)
god status seems easy to come by nowadays
just have to know a little CSS
;)
what do this guy using ! is it HTML ? xD
@Ahmed-Ayman html and bootstrap
how to do this Navigation bar then plz
could u give some resources
give me *
@Ahmed-Ayman are you using codepen?
yea
you need to add bootstrap's CSS and JS to the settings of your codepen
click the gear icon
at the top
yea I did
and then in the CSS tab, quick-add bootstrap
and then in the JS, quick-add jquery and then bootstrap in that order
but why JS .. we didn't take it yet
@dhcodes @IMLaing pagans used to think the sun was a god.. Im just at pagan status
@Ahmed-Ayman https://getbootstrap.com/examples/navbar/
@Ahmed-Ayman then you can use the sample code here: http://getbootstrap.com/components/#navbar
praise the sun
But Any idea why the button inside the hidden div doesnt also show? I never set the button to display hide?http://codepen.io/123xylem/pen/JKqYZY
the jquery is required to get the mobile dropdown menu to work @Ahmed-Ayman
@Ahmed-Ayman you don't really need to "know" js to use the navbar
@123xylem the button is isn't the div
it just requires js to work
alright sounds cool :)
<div id="alertBox">
<button id="Ok" onclick="end()">OK!</button>
</div>
the button has no display properties but acts invisble
@Ahmed-Ayman here's a video if it helps: https://www.youtube.com/watch?v=qpWlaOeGZ_4
alright @dhcodes @IMLaing thanks ..I'll start looking for those examples and I'll brb if there were any troubles ..thanks for helping
ahmed-ayman sends brownie points to @dhcodes and @imlaing :sparkles: :thumbsup: :sparkles:
:cookie: 330 | @imlaing |http://www.freecodecamp.com/imlaing
:star2: 1396 | @dhcodes |http://www.freecodecamp.com/dhcodes
@123xylem yes- but the div is invisible the button is in the div therefore the button will be invisible -
is that your question?
@IMLaing yes.. but when the div becomes visible shouldnt the button also?
Ah, I see - it should. You could also just point the toggleClass to the button directly
do you have a codepen @123xylem
@IMLaing
@123xylem the button isn't even showing up in the DOM hold on a second here...
@123xylem Yeah I am not sure - I dont like putting click events on buttons in the HTML because it sometimes acts screwy for me
@IMLaing hmm
il look into it.. tough to google this one though
cheers.. il ask more in here aswell
@123xylem if you are already using jQuery you might just want to build the entire element in JS
jQuery*
Just a thought.
yea may have to but i dont see why an onclick event in html would have anyeffect on it showing or not
Hello, just started learning HTML and CSS! Glad to be here!! :)
@IMLaing good link...
It explains that the children of toggled divs dont get the toggle property
But applying that isnt easy
(build it in Jquery)
make a variable alerbox that has all the elements
then do .html(alertbox) on an empty position:absolute; div where you want it
Can anyone help me with sublime text 3?
@dhcodes
@IMLaing im not sure how to build it in js.. il have a look
@MohammadHasham maybe
@123xylem you just take the elements and add it to $('#yourElement').html()
@IMLaing can you tell me why my css is not working?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Mohammad Hasham - Web Developer</title>
</head>
<body>
<nav class = "navbar navbar-default">
<div class = "container" style="color:blue;">
<a class = "navbar-brand" href="#">Portfolio</a>
<ul class = "nav navbar-nav navbar-right">
<li class = "active"><a href="#"> Home </a></li>
<li><a href="#">Skills</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Contact </a></li>
</ul>
</div>
</nav>
</body>
</html>
variable myHTML = <div><button>OK</...
put variable in to the .html()
@MohammadHasham do you have the index.html file in a folder and then inside that folder do you have a folder title css with your style sheet called style.css in it?
OHHHHHHH the inline styles? @MohammadHasham
@IMLaing @IMLaing so i leave the elements defined in CSS.. then add them to html via jquery?
@123xylem one second I think I have an example
$('.showResults').append('<div class="wikiInfo"><a href=" '+ response[3][i] +' "><h2>'+response[1][i]+'</h2><p>' + response[2][i] + '</p></a></div>');
super complicated one lol
so append - adds to the end of the element where as html will change the entire inner html
@IMLaing Yes! i guess i have it right
my filename is portfolio.html
@MohammadHasham in the link tag at the top remove the css/ part and leave just style.css
<link rel="stylesheet" type="text/css" href="style.css">
what you are saying is go from where the html file is into a css folder, however, that html file is already in the same folder, you don't need to send it to a different path
@IMLaing Thanks
mohammadhasham sends brownie points to @imlaing :sparkles: :thumbsup: :sparkles:
:cookie: 331 | @imlaing |http://www.freecodecamp.com/imlaing
That worked
You are welcome
Hi all, I have near about completed my Tribute Page but am getting a little confused on how to make two
iframes responsive using bootstrap, here is a link to my code pen
Hi All..Help me on Build a Personal Portfolio Webpage, its next challenge
they seem to look good in normal, and tablet view however when in a smaller width than mobile view they stop being responsive
I have completed tribute page and here is that link My Living legend Page https://codepen.io/muralikumarch/pen/rrVvAG
also any constructive criticism (or just criticism !) would be great
i am stuck on the <img....i just cnt get pic into the page...i copied the link too but its not loading
Iframes are really a pain
@Rajatk95828 post your code as it is
@IMLaing <img class="img-responsive img-thumbnail" src="https://commons.wikimedia.org/wiki/File:Bill_gates_portrait.jpg">
@IMLaing @IMLaing IT BLOODY WORKS!
You were up one from the actual image @Rajatk95828
wow - hope everyone likes that
@123xylem Righteous - html() and append() for the win
@Rajatk95828 You were linking a webpage to an img element not a .jpg file
oohk bro
GREAT help
thanks
i can sleep now ;0
Have a good one - code on
@123xylem its been a pleasure
How can i add a background image to the whole tab including the navbar
<body>
<div class = "container">
<div class = "home">
<nav class = "navbar navbar">
<a class = "navbar-brand" href="#">Portfolio</a>
<ul class = "nav navbar-nav navbar-right">
<li class = "active"><a href="#"> Home </a></li>
<li><a href="#">Skills</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Contact </a></li>
</ul>
</div>
</nav>
</div>
</body>
@IMLaing
My CSS:
.home
{
background-image: url("home_bck.jpg");
background-size:cover;
}
it is only covering the navbar but not the whole page
@MohammadHasham You need to have a background-image style in your css for the entire container like the css you have
If you want it to cover everything
put the closing nav in the div
as it should be, watch your indents
if you want it to be the background of EVERYTHING you can always do it tied to the body element
that will have it so all your other elements rest on top of the image.
@IMLaing but it would cover all the tabs like about me,contact etc/
i want the background just for the home stuff.
So just fixed the nav closing tab being outside the div - that should leave just the .home div with that backgroudn
<div class = "container">
<div class = "home">
<nav class = "navbar navbar">
<a class = "navbar-brand" href="#">Portfolio</a>
<ul class = "nav navbar-nav navbar-right">
<li class = "active"><a href="#"> Home </a></li>
<li><a href="#">Skills</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Contact </a></li>
</ul>
</nav>
</div>
</div>
is it okay now?
Yes - but the UL should be nested under the A
Sorry but can you elaborate ?
@IMLaing
hey so I am doing the weather app and it needs me to change the bg image according to the weather
i found doing so was possible by getting the description value
my problem is
i don't know all of the values this description value can get
anyone know wherei can find this data?
<div class = "container">
<div class = "home">
<nav class = "navbar navbar">
<a class = "navbar-brand" href="#">Portfolio</a>
<ul class = "nav navbar-nav navbar-right">
<li class = "active"><a href="#"> Home </a></li>
<li><a href="#">Skills</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Contact </a></li>
</ul>
</nav>
</div>
</div>
@KlausMana Look in the weather API docs it is there - a bit hard to find
@MohammadHasham like that above
see how you can easily look down and see what is containing what
oh ok thank you @IMLaing
klausmana sends brownie points to @imlaing :sparkles: :thumbsup: :sparkles:
:cookie: 332 | @imlaing |http://www.freecodecamp.com/imlaing
@IMLaing Still the same problem :worried:
@KlausMana just in case http://openweathermap.org/weather-conditions
@MohammadHasham do you have it up on codepen?
no i am wroking on sublime :worried:
thanks a bunch :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Mohammad Hasham - Web Developer</title>
</head>
<body>
<div class = "container">
<div class = "home">
<nav class = "navbar navbar">
<a class = "navbar-brand" href="#">Portfolio</a>
<ul class = "nav navbar-nav navbar-right">
<li class = "active"><a href="#"> Home </a></li>
<li><a href="#">Skills</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Contact </a></li>
</ul>
</nav>
</div>
</div>
</body>
</body>
</html>
@IMLaing
Here is the code
if you can figure out
it seems to work fine for me
What are you trying to do different from that?
No but as you can see the whole page is not being covered of red its just the navbar
so you want the whole page
Yes
@IMLaing :smile:
target body
But that would be for all the tabs i.e: about me ,contact us etc. is there a way that i can limit it to the home tab only?
@IMLaing
Hey guys, How do I set this up in my own page?
@MohammadHasham so you do NOT want the whole page you want only the active button?
killing me man =)
@IMLaing Yeah
is there a way?
There is always a way @MohammadHasham Just need to select the right object
element*
Its just on the tag but not on the page :sparkles:
@IMLaing
That is what you asked for
But that would be for all the tabs i.e: about me ,contact us etc. is there a way that i can limit it to the home tab only?
that is on the home tab only
Maybe i am not good at linguistics.But why is the whole page not being covered?
@IMLaing
just the home page
So
hmmm
So you want the whole page like the second example?
Can it cover the whole page?Yeah i guess
like for example when home is clicked it has a background color blue
but when contact us is clicked it has red
I hope i made sense this time :smile:
@IMLaing
@MohammadHasham I am a bit confused - can you use MS PAINT and sort of draw what you want to happen? I apologize.
@IMLaing
when home is clicked it is red
but as we click on contact us or something else it is just as default
ok
so you can change the font color using color: ;
yes
but what about the background
@IMLaing
that can be changed with backgroudn
background: ;
@IMLaing Thanks by the way you couldn't get my point or maybe i have failed to explain right
mohammadhasham sends brownie points to @imlaing :sparkles: :thumbsup: :sparkles:
:warning: mohammadhasham already gave imlaing points
@MohammadHasham Sorry man I am not sure what you mean
You can change the background of something by using background on the containing element - you can change font color by using color you can change the link color when clicked by doing a:clicked
I have not been able to make weather icon larger... If anyone has a suggestion, it will be greatly appreciated... Here is the link for my Local Weather project (http://codepen.io/sanjay-t/pen/XKLXLj)
@SanjayAtGit Your css will need to apply to the img, not the div container:
.icon img {
height: 100px;
}
thanks! let me try that @TylerMoeller
sanjayatgit sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 801 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Yes it worked out... Thanks @TylerMoeller
sanjayatgit sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: sanjayatgit already gave tylermoeller points
@SanjayAtGit The icons from openweathermap tend to be small, unfortunately. You might want to try these icons instead: https://erikflowers.github.io/weather-icons/
Yes, these are much better
How do I use them @TylerMoeller ? download them to my machine or is it an API?
@SanjayAtGit You'll need to include the .css file for them and then add them to your html like:
<i class="wi wi-cloudy"></i>. The main .css file is at: https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css, others are listed here: https://cdnjs.com/libraries/weather-icons
I will try this out... thanks @TylerMoeller
sanjayatgit sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: sanjayatgit already gave tylermoeller points
Hello, everyone! I need some help with my wikipedia viewer. I finished the project but when the results display, they don't appear position center and I would like to show them centered. What can I do? Here's the pen: http://codepen.io/flopy_dv/full/QKwzPq/
hey
@flopywood maybe add <center></center> ?
@KlausMana thanks! I'll try!!
flopywood sends brownie points to @klausmana :sparkles: :thumbsup: :sparkles:
:cookie: 273 | @klausmana |http://www.freecodecamp.com/klausmana
@flopywood add it to the div with the ID wikiSearchResults I think
hello all
@BeerDRinker hello and welcome!
I working on wikipedia viewer
hey i ned some help too
and have som problems
can someone take a look at my code and tell me why my screenshot isn't showing up? http://codepen.io/TrayBanks/pen/NRKvGg
i need help with the weather app
@KlausMana thanks! it DID work!!
@KlausMana what do you need help with?
here is my project
@flopywood so i have already integrated the API but idk how to access things in it
I do API query
@KlausMana that part was hard for me too so I went to youtube and followed this tutorial https://www.youtube.com/watch?v=eM4OAiPOHbs
but it is do not shown on my page
thanks @flopywood :D
@flopywood @KlausMana The <center> tag is not supported in HTML5. http://caniuse.com/#search=%3Ccenter%3E
A better way to fix this is to use bootstrap grids with offsets: http://getbootstrap.com/css/#grid-offsetting
A better way to fix this is to use bootstrap grids with offsets: http://getbootstrap.com/css/#grid-offsetting
klausmana sends brownie points to @flopywood :sparkles: :thumbsup: :sparkles:
:cookie: 321 | @flopywood |http://www.freecodecamp.com/flopywood
Can someone look this over and help me figure out why my jQuery might not be working. Need a new set of eyes.
http://codepen.io/NoboFish/pen/grVbAR?editors=1011
http://codepen.io/NoboFish/pen/grVbAR?editors=1011
@TylerMoeller oh, well, I'll give it an offset then thanks!
flopywood sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 802 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@AndrewDylan I feel like there's something missing, like have you generated a key?
I have generated a key.
can some one help me
?
@BeerDRinker what do you need help with?
@TrayBanks The src for your image needs to be a full URL with http://
<img class="img-responsive" src="naruto.jpg" >
ok, then I don't know. I'm sorry, I did that part with a youtube tutorial I linked just right before
@BeerDRinker yes what do you need help with?
@KlausMana I working on Wiki viewer
what is your problem?
@BeerDRinker ok what do you need help with?
I do API query
but do not have it on my page
@AndrewDylan Are you using chrome? navigator.geolocation requires HTTPS on Chrome, but your weather api only supports HTTP. You'll have to use a weather api that supports HTTPS or use a less accurate way to get location that works over HTTP, like http://ip-api.com/json
please see my code here
but it's easier to do it in codepen
@TylerMoeller I had used that location API before I switched to navigator.geolocation and had the same issue as now.
@TylerMoeller But its a screenshot...? there is no url. I am trying to link it to the page using the image
@AndrewDylan navigator.geolocation will only work on chrome with https
I will switch it back to it and see if I can make anymore progress.
use this instead http://ip-api.com/json
@TrayBanks Web apps can't load images from your local computer, upload the screenshot to https://postimg.org and get a URL you can use.
@AndrewDylan Found the bug, make sure you put
http:// in front of your API URL: var weatherAPI = "http://api.openweathermap.org.....
@BeerDRinker Create a
gh-pages branch on that repo so we can inspect it more easily. This will allow you to view the page at: https://BeerDRinker.github.io/Wikipedia-Viewer
@TylerMoeller Thanks! That fixed it. Love tiny little errors.
andrewdylan sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 803 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
:)
hello everyone how r u dng
@babuharry hello!!!!
Hey, guys! I've finished my Wikipedia Viewer. Can anyone take a look before I submit it?? http://codepen.io/flopy_dv/full/QKwzPq/
THANKS SO MUCH, YOU DONT KNOW HOW LONG IT TOOK ME TO FIGURE THIS OUT @TylerMoeller
traybanks sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 804 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
do u know how to use HTML5 Shiv
@TylerMoeller btw his code is wrong. that is why image wont show. I trying to tell them.. :S
he put link in alt.... not src
he put link in alt.... not src
@babuharry not really sorry
@texas2010 I think he fixed that before I saw the code, it was using a path to an image like src="naruto.jpg"
@TylerMoeller, i saw that. but you need to look at alt. it is in wrong place
nice one @flopywood
@babuharry thanks!
flopywood sends brownie points to @babuharry :sparkles: :thumbsup: :sparkles:
:cookie: 78 | @babuharry |http://www.freecodecamp.com/babuharry
oh well. it seem like he fix it anyway
is there a way that i can make my image a little bit center(not actually center) without compromising on responsiveness on mobile and other devices
@texas2010 @TylerMoeller
@texas2010 @TylerMoeller
@MohammadHasham use a grid
used that as well
col-xs-6
@MohammadHasham If you're using bootstrap, use grid offsets: http://getbootstrap.com/css/#grid-offsetting
like, col-md-6 offset
@MohammadHasham you have to offset it
^^ Exactly
what does offset do?
It's like putting an empty grid before the grid where your picture is
on left or right?
or i shall mention that?
It offsets from the left
@texas2010 can we change it to top or right ? @TylerMoeller
No, thats not how the grid system works
@MohammadHasham Please read about grid offsets and let us know if you have more questions: http://getbootstrap.com/css/#grid-offsetting
This message was deleted
@TylerMoeller https://beerdrinker.github.io/Wikipedia-Viewer/
This message was deleted
Hey guys! I know I'm close, could someone please provide some insight?
function titleCase(str) {
var lowerCaseSplit = str.toLowerCase().split(" ");
var newArrayUppercased = [];
for (i = 0; i < lowerCaseSplit.length; i ++) {
newArrayUppercased = (lowerCaseSplit[0].charAt(0).toUpperCase());
}
return newArrayUppercased;
}
I was wondering what did you guys use to build tic tac toe grid?
I'm thinking using <ul> or just a couple of arrays one for col and other for rows
I'm thinking using <ul> or just a couple of arrays one for col and other for rows
Anybody?
@sebtn I just used buttons
@aszwet1
hey all, how are things going?
I was wondering if someone could take a look at this and see if it will meet the criteria for the portolio project. https://codepen.io/swetz/pen/yaymBa
I know there isn't any real info in there, but I think the project definitely served it's purpose....
@aszwet1 just put some dummy projects on there
It's fine otherwise
@gbsimon87 what's wrong with your code?
@aszwet1 no idea, I'm somewhat lost
maybe stick to html elements for the grid is a good idea
@gbsimon87 what's wrong with your output?
@adithyakreddy what kind of dummy projects? I mean it'd just be changing the image and the text right?
It's giving me I I I I S H
I have no idea why tbh
@aszwet1 just create some grids and put fake projects on there with a title and description
and some placeholder image
Give me an input @gbsimon87
if you look at the projects, and click one of those, those are the "fake project" placeholders
@TylerMoeller Thanks that offset is a magic :sparkles:
mohammadhasham sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 805 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
when you click them they have placeholder spots for the description and title
@adithyakreddy
function titleCase(str) {
var lowerCaseSplit = str.toLowerCase().split(" ");
var newArrayUppercased = [];
for (i = 0; i < lowerCaseSplit.length; i ++) {
newArrayUppercased = (lowerCaseSplit[0].charAt(0).toUpperCase());
}
console.log(newArrayUppercased);
return newArrayUppercased;
}
can some one help me?
@BeerDRinker I'd help you but I haven't yet worked on that sorry buds
@gbsimon87 Here's a solution
@BeerDRinker You have curly quotes around your id="article", change that to straight quotes and it should work fine:
<div id="article">
function titleCase(str) {
var lowerCaseString = str.toLocaleLowerCase();
var lowerCaseArray = lowerCaseString.split(' ');
var finalArray = [];
lowerCaseArray.forEach(function (word) {
var tempStr = word[0].toUpperCase();
for (var i = 1; i < word.length; i++) {
str += word[i];
}
finalArray.push(str);
});
return finalArray.join(' ');
}
whoops
sorry
function titleCase(str) {
var lowerCaseString = str.toLowerCase();
var lowerCaseArray = lowerCaseString.split(' ');
var finalArray = [];
lowerCaseArray.forEach(function(word) {
var str = word[0].toUpperCase();
for (var i = 1; i < word.length; i++) {
str += word[i];
}
finalArray.push(str);
});
return finalArray.join(' ');
}
@adithyakreddy thanks, I'll take a look at it when I get back
cheers and thanks again
cheers and thanks again
gbsimon87 sends brownie points to @adithyakreddy :sparkles: :thumbsup: :sparkles:
:cookie: 298 | @adithyakreddy |http://www.freecodecamp.com/adithyakreddy
I'm trying to do the simon project
But I have absolutely no idea how to make something like that in CSS
could someone point me to some resources to learn?
@TylerMoeller you my hero!
what is the syntax of borders in html like in border-radius :5px 6px 7px 8px; what do there refer to?
@adithyakreddy
@TylerMoeller
@BeerDRinker lol, hard to catch that one
@TylerMoeller thank you!
beerdrinker sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 806 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@MohammadHasham border-radius means you get rounded corners
but what do there 5px,6px,7px,8px refer to?
one more question
Upper left corner, upper right corner, lower right corner, lower left corner
clockwise
@adithyakreddy Thanks
mohammadhasham sends brownie points to @adithyakreddy :sparkles: :thumbsup: :sparkles:
:cookie: 299 | @adithyakreddy |http://www.freecodecamp.com/adithyakreddy
how to fix "lockal wether app" HTTPS issue?
@adithyakreddy I was going to say, those properties are helpful for creating a round simon board
what https issue?
@adithyakreddy did you take a look at the project placeholders that were already on the page? You want me to change those to real "fake images"? if you click them they show a description and a link
@TylerMoeller my issue so far is making all the elements "stick" together, if you get what i mean
@adithyakreddy 5sec
@aszwet1 check out mine: https://adithyakreddy.github.io/
just make some dummy projects like that
@adithyakreddy yeah I have those already, if you look in projects, the circles are clickable
oh yea didn't know that
that's pretty good
Oh good, I'll make the directions clearer on the projects page
but I think I'm gonna call it good for now and move on!
thanks for the help
thanks @adithyakreddy
aszwet1 sends brownie points to @adithyakreddy :sparkles: :thumbsup: :sparkles:
:cookie: 300 | @adithyakreddy |http://www.freecodecamp.com/adithyakreddy
width:38em;
height:25em;
border:5px solid white;
padding: 10em;
margin:5em;
@adithyakreddy I think I fixed that by wrapping the four colors in a div and applying a background color to that div that's the same color as the borders around the four colors (if that makes sense)
I'm working on the Tic Tac Toe project. Trying to get the AI to respond. I looked at the minimax stuff and saw that switch function could a way to approach it. I may need to add other functions though. I just not sure what...
Here is the code:
https://codepen.io/flindip/pen/JRdwXp
Here is the code:
https://codepen.io/flindip/pen/JRdwXp
can someone help me w/ simple algorithm challenge?
@BrianCodes33 what's up?
@flindip The AI is actually much more complicated than it seems, have you gotten the rest of your game working?
If you have then just code a simple random AI and then come back to this one when you're a bit more experienced
Is it possible to read the temperature of your CPU or get hardware information in JavaScript??
width:38em;
height:25em;
border:5px solid white;
padding: 10em;
margin:5em;
@adithyakreddy
@TylerMoeller
@booleanhunter You could probably do that using Node
@MohammadHasham Yes, using exact widths instead of percentages will affect the responsiveness of your page. You can test this out yourself. Use the code and resize the page to see what happens.
@TylerMoeller Thanks
mohammadhasham sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 807 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@booleanhunter you can use this: https://github.com/sebhildebrandt/systeminformation
i have a menu with an overly. when a link is clicked, the overlay doesnt disappear. what have i done wrong?
I am having problems with a bootstrap basic collapsible. Can anyone check what I might be wrong?
@adithyakreddy - But it would show me information of the CPU where the server's running, not necessarily the user's (who wants to see it in a browser), correct??
<div class="jumbotron">
<div class="row">
<div class="col-sm-3 text-center"><a href="#webdev" class="btn btn-default fa fa-cogs" data toggle="collapse"> Web Development </a>
<div id="webdev" class="collapse">I help companies build complete online sites front to back
</div>
</div>
<div class="col-sm-3 text-center"><a href="#webdes" class="btn btn-info fa fa-file-image-o" data toggle="collapse"> Web Design</a>
<div id="webdes" class="collapse">I help companies design the look and feel of their websites
</div>
<div class="col-sm-3 text-center"><a href="#userex" class="btn btn-success fa fa-users" data toggle="collapse"> User Experience </a>
<div id="userex" class="collapse">I help companies design excellent user experiences
</div>
<div class="col-sm-3 text-center"><a href="#data" class="btn btn-warning fa fa-database" data toggle="collapse"> Data Analysis </a>
<div id="data" class="collapse">I help companies structure data analysis
</div>
<div class="row">
<div class="col-sm-3 text-center"><a href="#webdev" class="btn btn-default fa fa-cogs" data toggle="collapse"> Web Development </a>
<div id="webdev" class="collapse">I help companies build complete online sites front to back
</div>
</div>
<div class="col-sm-3 text-center"><a href="#webdes" class="btn btn-info fa fa-file-image-o" data toggle="collapse"> Web Design</a>
<div id="webdes" class="collapse">I help companies design the look and feel of their websites
</div>
<div class="col-sm-3 text-center"><a href="#userex" class="btn btn-success fa fa-users" data toggle="collapse"> User Experience </a>
<div id="userex" class="collapse">I help companies design excellent user experiences
</div>
<div class="col-sm-3 text-center"><a href="#data" class="btn btn-warning fa fa-database" data toggle="collapse"> Data Analysis </a>
<div id="data" class="collapse">I help companies structure data analysis
</div>
@booleanhunter You could make an application that'll run on the user's machine
but it's not gonna be possible in a browser
@TylerMoeller does using percentage in padding or margins do not effect responsiveness at all?
@adithyakreddy
Percentage is generally better than using px
so it won't effect responsiveness ?
@adithyakreddy
Mostly not
@adithyakreddy Well, I've made it that I can play against myself. But I'm trying to do a very simple AI that will fill in a random box when the user(1 or 2)is not present
@adithyakreddy Interestingly enough this seems to be a harder project than the Simon game...
@adithyakreddy Thanks
mohammadhasham sends brownie points to @adithyakreddy :sparkles: :thumbsup: :sparkles:
:cookie: 301 | @adithyakreddy |http://www.freecodecamp.com/adithyakreddy
@sorinr Excellent! Thank you.
konikodes sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 687 | @sorinr |http://www.freecodecamp.com/sorinr
@KoniKodes welcome
@khaduch thnx; I inched further. I'll keep your offer for next time.
mesmoiron sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1645 | @khaduch |http://www.freecodecamp.com/khaduch
@KoniKodes just sent you a pm with a nice link on react
hey I need some help
@KlausMana got code?
yes
$( document ).ready(function() {
$.ajax ({url : "http://ip-api.com/json"
}).done(function(data) {
Weather(data.lat,data.lon);
}).fail(function(err) {
console.log(err);
});
});
function Weather(latitude , longtitude){
console.log(latitude, longtitude);
var apiKey = "fffc77f90fb489748fe36ae1b79ac8b5";
$.ajax ({
dataType : "json",
url : "http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longtitude + "&APPID=" + apiKey,
type : "GET"
}).done(function(json){
console.log(json);
var currentWeather = json.weather[0].description;
var timeGet = new Date();
var time = timeGet.getTime();
var sunrise = json.sys.sunrise;
var sunset = json.sys.sunset;
var ico;
if(currentWeather = "clear sky"){
if(time > sunset || time < sunrise){
var ico = "https://s21.postimg.org/mq89fighf/Clear_Sky_Night.png";
document.getElementById("testimg").setAttribute("src" , ico);
}else{
var ico = "https://s21.postimg.org/z3l3mf65v/Clear_Sky_Day.png";
document.getElementById("testimg").setAttribute("src" , ico);
}
}
if(currentWeather = "few clouds"){
if(time > sunset || time < sunrise){
var ico = "https://s21.postimg.org/aqwr87awj/Few_Clouds_Night.png";
document.getElementById("testimg").setAttribute("src" , ico);
}else{
var ico = "https://s21.postimg.org/lp80qdzhv/Few_Clouds_Day.png";
document.getElementById("testimg").setAttribute("src" , ico);
}
}
if(currentWeather = "scattered clouds"){
var ico = "https://s21.postimg.org/44a3f0t83/Scattered_Clouds.png";
document.getElementById("testimg").setAttribute("src" , ico);
}
if(currentWeather = "broken clouds"){
var ico = "https://s21.postimg.org/44a3f0t83/Scattered_Clouds.png";
document.getElementById("testimg").setAttribute("src" , ico);
}
if(currentWeather = "shower rain"){
var ico = "https://s21.postimg.org/efmg7okxf/Shower_Rain.png";
document.getElementById("testimg").setAttribute("src" , ico);
}
if(currentWeather = "rain"){
var ico = "https://s21.postimg.org/4sixxyrxv/Rain.png";
document.getElementById("testimg").setAttribute("src" , ico);
}
if(currentWeather = "thunderstorm"){
var ico = "https://s21.postimg.org/ofhcnkw6r/Thunderstorm.png";
document.getElementById("testimg").setAttribute("src" , ico);
}
if(currentWeather = "snow"){
var ico = "https://s21.postimg.org/khu2y69df/Snow.png";
document.getElementById("testimg").setAttribute("src" , ico);
}
if(currentWeather = "mist"){
var ico = "https://s21.postimg.org/xtna7dcdv/Mist.png";
document.getElementById("testimg").setAttribute("src" , ico);
}
});
}
when I execute the code, it always sets the last img
like the one that is in the last if statement
your not using equality sign
Because you are not using
if else
@KlausMana
you are assigning it
oh yes
ty
you're welcome
taks @drurenia
wow
thanks @drurenia
klausmana sends brownie points to @drurenia :sparkles: :thumbsup: :sparkles:
:cookie: 310 | @drurenia |http://www.freecodecamp.com/drurenia
This message was deleted
@KlausMana also it is better to use
else ifs instead of ifs all over the place
This message was deleted
This message was deleted
You could make everything cleaner by using an array to store your ico links and access them using the currentWeather as the key. By doing so you wouldn't need this whole bunch of ifs. You would access and use them like this:
document.getElementById("testimg").setAttribute("src" , links[currentWeather]);
of course you would need to initialize the array beforehand with all links
@KlausMana
The errors i get from running "bundle install" into jekyll repo's - is that a conflict of ruby versions? I am told to manually install "redcloth", but i thought it was done through "bundle install"? anyone who can enlighten me of what this really means?
@KlausMana here is some info regarding openweather api that will help you rethink all the if statements: http://openweathermap.org/weather-conditions
Hey need help with the twitchtv API. I'm trying to get my data into an underscored list.
$("#online").append("<li>" game + logo + views + url "</li>");
using this gives me an error: unexpected identifier.
here's the codepen
@tyl-er because you use tu much ""
@pawelrus91 Sorry not exactly sure what you're trying to say. ¯_(ツ)_/¯
Am I using too many variables
@tyl-er $("#offline").append("<li>"+ game + logo + views + url +"</li>");
@tyl-er no syntax incorrect, because you
...
Ok, i have a problem with full width footer. Problem exist onli in codepen
@sorinr @pawelrus91 Got it thanks, but I still can't see my info.
tyl-er sends brownie points to @sorinr and @pawelrus91 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for pawelrus91
:cookie: 688 | @sorinr |http://www.freecodecamp.com/sorinr
@tyl-er its because freecodecamp chanell is offline and your data.stream is null. you have to test it first and make assignments based on that
@tyl-er see this examples
var $newdiv1 = $( "<div id='object1'></div>" ),
newdiv2 = document.createElement( "div" ),
existingdiv1 = document.getElementById( "foo" );
$( "body" ).append( $newdiv1, [ newdiv2, existingdiv1 ] );
I found this on oficall user manual
Can somebody help me? i have a problem with full width footer. Problem exist onli in codepen
but in independet server every works alright http://elonmusk.c0.pl/
Hey, I have a question
<script>
$(document).ready(function() {
$("button").addClass("animated bounce");
$(".well").addClass("animated shake");
});
</script>
Why is a period before well needed, but not before button?
Is it because button is an element and well is a class?
http://codepen.io/mikail1998/pen/ozgXzb
I have two issues right now with my pomodoro
I have two issues right now with my pomodoro
- When seconds start counting the first minute that passes(on the clock) passes in two minutes.
- Im trying to reduce for one number(the minute) so It doesn't count one extra but not successful at that too. Maybe its because i have two intervals for minutes and seconds i dont know but. I will appreciate any kind of help
@pawelrus91 I'm not sure why that's not working for you, it seems like there's an issue with your rows. I can tell you that you are for sure missing some important closing tags so I'd go over your code and do some cleanup work
@aszwet1 a checked every open and close tag
maybe i overylooked some
@LenaSUI you are right. Well I'd a class and button a element.
@pawelrus91 http://codepen.io/swetz/pen/PGqLwE
@pawelrus91 I fixed it!!!
@pawelrus91 OK, so if you go to the settings under HTML. You need to remove all the stuff in "Add Classes to HTML" as well as the <link rel= stuff in the "stuff for head section"
hi guys. can anybody give me a hint how to use switch method to show the weather icon?
shouldn't the arguement for the icon be based on the id number that corresponded to the img?
I think it is ID in the api object
it is based on this data.weather[0].main
I gave it a variable
use it as argument function getIcons(here)?
Yes the id# can be used to pull the image if I remember correctly
It wasn't fun though that API was a pain
“wther” is the variable of the data.weather[0].main
@lpy1994 You can get the full url of the icon by doing:
var iconSrc = 'http://openweathermap.org/img/w/' + data.weather[0].icon + '.png';
it looks good!
@TylerMoeller then I don’t need a if/swtich method ?
@lpy1994 Correct. No need for a switch statement if you want to use the OpenWeatherMap icons. If you want to use different icons, then you'll have to use a switch statement (or similar) to categorize all the weather condition codes.
@TylerMoeller can you give me hint about the one I want to use?
kind of confused for me on this part
@lpy1994 It comes down to the design you want for your web app. If you like the OpenWeatherMap icons, there is no need for a switch statement since they give you the icon name in the JSON object.
yeah, what you give me is far more easy than what i am trying to do here
You can always change it later, I rewrote my weather app after I got better with JavaScript
true tho
ok, let me figure out how to use the one you suggest
@TylerMoeller var iconSrc = 'http://openweathermap.org/img/w/' + data.weather[0].icon + '.png';
$("#wather").html(iconSrc);
$("#wather").html(iconSrc);
it seems not working
hello guys, im working on my 1st project. I having trouble to align my text and picture together.
I want my text to be in the middle height of the picture*
Oups this is the lastest version https://codepen.io/mad311/pen/bwdYOy?editors=1000
using padding @marcandre311
thanks @lpy1994 I created a div to the text and add padding. This is not very responsive to the size of the screen but it works for now
marcandre311 sends brownie points to @lpy1994 :sparkles: :thumbsup: :sparkles:
:cookie: 275 | @lpy1994 |http://www.freecodecamp.com/lpy1994
yeah, or you can try bootstrap
@lpy1994 Add a div for your icon:
<div id="weather-icon"></div> and then do: var iconSrc = 'http://openweathermap.org/img/w/' + data.weather[0].icon + '.png';
$("#weather-icon").html('<img src="' + iconSrc + '">')
@TylerMoeller woud it be working if I use $getJson function?
Im having a bit of trouble with images on my build a tribute page
I have 2 images placed together on the same row and they were originally overlapping which i fixed by scaling down their width, but now im trying to add a space between them so its basically 1 image on 1 side of the page and 1 image on the other side
@TylerMoeller thank you !!!
lpy1994 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 810 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@lpy1994 Yes, I would put it in your $.getJSON function, right beneath where you're setting the other variables for temp, wther, etc
got it, but it doesnt show the icon until i click the temp button tho
@lpy1994 That's because it is in your .click() function for your temp button
all of the code you put in this function will only run when you click the temp button:
$("#fahrenheit-btn").on("click", function() {
yeah i just move it, now it works
moving on to the next project
hello guys, i have a question. In project "Build a Tribute Page" i should copy this same page? I mean write this same page from 0? Or maybe i must invent my own new page?
@khaduch thanks for the article man i appreciate it
nickeyvee sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1646 | @khaduch |http://www.freecodecamp.com/khaduch
@gitPyexp You need to follow the guidelines of it, but you can make it your own (i.e the layout/design does not have to match)
@JLuboff okay, thanks :)
gitpyexp sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:cookie: 356 | @jluboff |http://www.freecodecamp.com/jluboff
Hey guys and gals! I have a quick, not-project-related question:
I'm just starting the JavaScript portion of the Front-End track and would like to play around with it outside of FCC. I was wondering if there is an IDE (preferably free) that I could download that works with user input such as "prompt()" and popups like "alert()"? I'm currently using Sublime Text 3 and it doesn't support it/it's not working for me. I've also been using the browser console, but would really like to start using IDEs more.
Thanks in advance!
generally I do testing in the browser @NettyBetty which i think is fine for testing user input. As far as free IDEs I like Visual Studio Code which has alot of plugins. Also Atom is nice
can't say if there is an IDE that you can do UI testing on, probably better to just use browser so you see what your page would look from a normal user anyways
@NettyBetty That's interesting. Are you building the prompts or alerts into a website? To answer your question though really depends on what you want to do. I use Brackets for front-end and it supports a lot of languages. If you want to be more Java heavy I know a lot of people like NetBeans, IntelliJ, and Android Studio
https://blog.idrsolutions.com/2015/03/the-top-11-free-ide-for-java-coding-development-programming/
Thanks for the suggestions, @coymeetsworld ! I'll be sure to check them out.
@unscodst Right now, I'm just trying to practice what I've been learning. I'm not building websites just yet. :) I'm going to give the IDEs you mentioned a try and thanks for the link!
:star2: 1360 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
nettybetty sends brownie points to @coymeetsworld and @unscodst :sparkles: :thumbsup: :sparkles:
:cookie: 26 | @unscodst |http://www.freecodecamp.com/unscodst
Hello!
Why
Sorry 😑
Hello world
welcome to FreeCodeCamp @samconnor!
What's the best website maker for embedding stuff (I've tried wordpress and blogger so far)
@poigirl2001 try wix
http://codepen.io/sauravxezio/pen/gwpJKm can someone review this and give me some good inputs on how to improve this?
Hey anyone here that knows react pretty well ?
https://github.com/phumberdroz/pizzastore/blob/master/client/modules/Product/Product.js
https://github.com/phumberdroz/pizzastore/blob/master/client/modules/Product/components/CreateWidget/CreateWidget.js
If i add a product it does not fetchCategories any more and does not save them to the state …
If there is no product in state categories are in the state
Why does
http://codepen.io/Hadouken/pen/ozXVkk?editors=0010
users[i] is displayed as "undefined" instead of the actual array element?http://codepen.io/Hadouken/pen/ozXVkk?editors=0010
fixed it
anyone want to help me identify my mistake with API call to wikipedia? coming back error every time for me
@Harry97 This is an asynch issue. for loops are fast, so you don't want to call functions or APIs inside of them. Use a forEach with a callback instead.
users.forEach(function(user, i) {^^ replace your for loop with that and then add a closing parenthesis ) at the end of your function
@TylerMoeller simple and precise, thanks alot!
harry97 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 812 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@jrandallhansen Your error will always fire because it isn't in a function to capture error messages. Try this instead:
error: function(err) {
alert("Error ", err)
},To fix your API call, use dataType: "jsonp":
$.ajax({
type: "GET",
url: apiUrl,
async: false,
dataType: "jsonp",
.......
Anyone need some motivation? :) http://codepen.io/TylerMoeller/pen/oLKEyq