FreeCodeCamp/HelpFrontEnd

Get help on our Front End Development projects.

Collin Beder

@CollinBird

yeah create an:
```.hr.star-bright {
}
and try to get it aligned correctly within your header

.hr.star-bright {
}

nvm that does’t work I’m not sure how to do it.

Phil

@mremotoo

@Dueldrawer8 to center a block in bootstrap, set it to center-block. I think it needs to be in a row class div

@Dueldrawer8 also try setting margin: 0 auto; in CSS

@Dueldrawer8 if you're using columns, try adding an offset class to it. Check booststrap documentation for offsetting

Brooks Van Buren

@brooksvb

Hey all, how can I make all these buttons centered within the navbar?

I tried containing the buttons within one div, within the bar, and giving the div margin: 0 auto; but that did not work

Elbert Cortez

@trip16661

const setShowcaseImg = function() {
        const thisProject = project[$(this).data("project")];
        //gets the name of the project to later use it to fetch properties from that project
        $showcaseImg.find("img").attr("src", thisProject.img);
        //gets the url of the imagen and set it
        $showcaseImg.find("p").text(thisProject.description);
        //gets the description 
        $showcaseImg.find("a").attr("href", thisProject.url);
        //gets the url 
        $showcaseImg.addClass("showcase-open");
        // then it opens a div containing this info 
    }

I have something like this to showcase some images with text and a link but when i close the showcase div and activates it again with a different images it just takes like 30ms to actually change the image it work, but i can still see the previous image for like 20ms and that's not good :worried:
any idea of why, or how to work around it? I guess i can just simplely add a conditional or a setTime function to delay it but if you ask me it sound cheap :worried:

Brooks Van Buren

@brooksvb

Nevermind! I found out all I have to do is add text-align: center; to the navbar, and it centers the button elements.

MeonAigeanta

@MeonAigeanta

I am trying to align my button and my temperature on the same line.
Ideally, I would like the button to be align to where the degree symbol should be, but I will settle for just getting them on the same line for now.

html

var code = "formatted";
<div class="row-fluid" id="pushDown">
    <div class="col-xs-12">
        <h1 id="temp"><h1>
                <button class = "btn btn-circle" id = "button" onclick = "switchScale()">C</button>
  </div>
</div>

css

var code = "formatted"
#button{
  width: 3vw;
  height: 3vw;
  text-align: center;
  padding: 1vw 0 ;
  font-size: 1vw;
  line-height: 1.42;
  border-radius: 2vw;
}
#pushDown {
  display: inline-block;
  margin-top: 10%;
}

Manuel Micu

@manu-4216

@khaduch ok thanks for the info. I updated it
http://codepen.io/manu4216/full/AXyBJE/

CamperBot

@camperbot

manu-4216 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:

:star2: 1475 | @khaduch |http://www.freecodecamp.com/khaduch

Manuel Micu

@manu-4216

help react

CamperBot

@camperbot

:point_right: building applications with react and flux [wiki]

Building applications with React and Flux

This is designed to run in a c9 environment.

Once installed, enter npm install into the bash terminal. Then type gulp from the bash terminal.

Your React development environment is now ready.

The environment will compile React JSX, Lint JSX and JS with ESlint, Bundle your JS and CSS files, Migrate the built app to the dist folder, and run a dev web-server.

github repository

Manuel Micu

@manu-4216

resources react

Adithya Reddy

@tallpants

Hey guys

Could anyone recommend some resources for me to get better at front-end, specifically responsive and mobile first sites

that freecodecamp got me isn't up to the level I want

Chris Katzmann

@cwkatzmann

@donaldpittard oh, duh. thank you.

CamperBot

@camperbot

cwkatzmann sends brownie points to @donaldpittard :sparkles: :thumbsup: :sparkles:

:cookie: 375 | @donaldpittard |http://www.freecodecamp.com/donaldpittard

Randy Goldsmith

@Dueldrawer8

i have somewhat of a deep technical question about css.. i basically hacked this together and cant figure out how i got the width of .calculator of 325 px.. should it be 320px? My .boxAnswer class has width of 305 and the .clear class has width of 95 plus two margins of 5px is 320.
http://codepen.io/duel_drawer8/pen/rLygWG

Gabe

@gaber85

Hey guys, I am trying to center a unorder list inside a div using bootstrap. However. the text centers but the bullets remain on the left.

how do I center the bullets as well >,< sorry I'm really beginner

Manuel Micu

@manu-4216

@Dueldrawer8 you told it to have 425px, so that's what you get. It divided that like so: (421 + 2*2px) border = 425px. The content inside it won't change it

Randy Goldsmith

@Dueldrawer8

@manu-4216 correct, i had to guess though.. if i set the width to 420 px.. the spans start to break apart

@qualitymanifest

@Dueldrawer8 IMO it would be better to use percentages for the buttons width and margin. that way you could change the size of .calculator and the buttons would work no matter what.

Randy Goldsmith

@Dueldrawer8

@qualitymanifest thanks! that works perfectly

CamperBot

@camperbot

dueldrawer8 sends brownie points to @qualitymanifest :sparkles: :thumbsup: :sparkles:

:star2: 1291 | @qualitymanifest |http://www.freecodecamp.com/qualitymanifest

Randy Goldsmith

@Dueldrawer8

@manu-4216 thanks for help

CamperBot

@camperbot

dueldrawer8 sends brownie points to @manu-4216 :sparkles: :thumbsup: :sparkles:

:cookie: 335 | @manu-4216 |http://www.freecodecamp.com/manu-4216

Sorin Ruse

@sorinr

@Dueldrawer8 or you can use flexbox for the layout

redixhumayun

@redixhumayun

http://codepen.io/redixhumayun/pen/JKryAZ?editors=0011

Hey, I'm having some issues, understanding why my timers are behaving really oddly in my script for the Simon game. Can anybody help me out here?

The values show up fine for the first three timer loops and then they just show undefined values.

Randy Goldsmith

@Dueldrawer8

@sorinr i wouldn't mind it but of course its not supported in all browsers apprently

so then how do i set the height for the .calculator div so that it encompasses all the buttons inside?

Sorin Ruse

@sorinr

@Dueldrawer8 i would go for flex column for the .calculator and flex row for the buttons

Randy Goldsmith

@Dueldrawer8

@sorinr tanks

@sorinr thanks

CamperBot

@camperbot

dueldrawer8 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:

:cookie: 521 | @sorinr |http://www.freecodecamp.com/sorinr

Randy Goldsmith

@Dueldrawer8

alright..how am i suppose to apply margin without my buttons breaking apart? buttons seem to overlap if you can see the white spaces betwen them.
http://codepen.io/duel_drawer8/pen/rLygWG

Beth Qiang

@bethqiang

does the openweathermap api give temperature in kelvin? it says my current temperature is 301.65...the only way that seems to make sense is if it was in kelvin :worried:

Randy Goldsmith

@Dueldrawer8

@bethqiang yes default is kelvin

Beth Qiang

@bethqiang

thanks, @Dueldrawer8!

Where communities thrive

People

Repo info

Activity

:point_right: building applications with react and flux [wiki]

Building applications with React and Flux