These are chat archives for FreeCodeCamp/HelpFrontEnd

25th
Nov 2017
lfvpCO
@lfvpCO
Nov 25 2017 02:40
Hello guys.
I have problems with koala to use sass with bootstrap4
Any suggestion ?
Toni Shortsleeve
@KoniKodes
Nov 25 2017 02:54
@AbrisM on CodePen, you call <script src="RansomeNoteJS.js"></script>. However, it can not connect with a script that is on your computer. You can try to load it to google drive and call it from there.
In CodePen the html is a little different. You need to only enter the first tag after the body tag down to the last tag before </body> tag. Anything in your meta tags can be placed somewhere else.
At the top of the screen on the right side is the gear icon for Settings. Place your meta tags in the header section at the bottom of the HTML Settings. In CSS settings you can add bootstrap and more. In JavaScript settings you can add Jquery, Bootstrap.js and more. I hope this helps.
Ken Haduch
@khaduch
Nov 25 2017 05:00
@KoniKodes @AbrisM - there is another way to separate code into different CodePen pens and use them on one project. You can save the JS in a separate pen - there is documentation on the CodePen help info - this link https://blog.codepen.io/documentation/editor/adding-external-resources/#other-pens should take you there. It's just another way to include code in a pen. Check out the docs!
Om Prakash Singh
@omps
Nov 25 2017 05:04
hi
Henry
@GitHub-Henry
Nov 25 2017 07:11
@omps :wave:
Samar Adbulbaset
@smr93
Nov 25 2017 07:21
Hi
creator0323
@Amasian
Nov 25 2017 07:48
Hello! it is a pleasure to meet you all! I am a beginner following courses of FreeCodecamp. May I ask questions here when I need help ?
Markus Kiili
@Masd925
Nov 25 2017 08:17
@Amasian This is the right place.
kerafyrm02
@kerafyrm02
Nov 25 2017 09:54
Anyone stuck?
pls , review this guys.
Daria Doronina
@Skidle
Nov 25 2017 11:04
@1532j0004kg okay so imo text in the header (we're focused towards blabla) is rather unreadable. You really need to change the color to white or some light shade of gray. Pictures of facilites are super small, it's better to use bigger ones and then adjust the text width to be the same as pic width or less. There's too much space between the end of your list of facilities and copyright in the footer. And you need to have responsive version
primuscovenant
@primuscovenant
Nov 25 2017 11:22
@heroiczero tx
CamperBot
@camperbot
Nov 25 2017 11:22
primuscovenant sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 2073 | @heroiczero |http://www.freecodecamp.org/heroiczero
Jack Lyons
@JackEdwardLyons
Nov 25 2017 11:47
hey all, im having some trouble clearing my setInterval and i'm not sure why, can someone help?
here's my pen
The progressbar gets cleared on each click, but the setInterval just gets faster and faster
i need to clear it on each click
MubashirAliSiddiqui.
@mubashiralisiddiqui
Nov 25 2017 11:48
any one here who can helpme in react native push notification
Jack Lyons
@JackEdwardLyons
Nov 25 2017 11:53
basically, the speed doubles on each click when it should stay the same...
Stephen James
@sjames1958gm
Nov 25 2017 11:54
@JackEdwardLyons Every click you start another timer. You probably need to have a check and if already started then stop the current.
Jack Lyons
@JackEdwardLyons
Nov 25 2017 11:54
oh, so like a flag variable?
Stephen James
@sjames1958gm
Nov 25 2017 11:56
@JackEdwardLyons yes, if you want the button to restart the progress
Quantomistro3178
@Quantomistro3178
Nov 25 2017 11:57
what's bootstrap's JumboTron?
Jack Lyons
@JackEdwardLyons
Nov 25 2017 11:57
hmm im not exactly sure tho, cause its similar to my original code... what am i doing wrong here ? @sjames1958gm
startProgress: function() {
      this.progress = 0;
      var progressBar 
      progressStarted = false; 
      if ( progressStarted = false ) {
        clearInterval(progressBar);
      }
      progressBar = setInterval(() => { 

        if (this.progress < 100) {
          progressStarted = true;
          this.progress++;
        } else {
          clearInterval(progressBar)
          progressStarted = false;
        }
      }, 200 )

    }
@Quantomistro3178 its a kind of page header --> https://www.w3schools.com/bootstrap/bootstrap_jumbotron_header.asp
Stephen James
@sjames1958gm
Nov 25 2017 11:59
@JackEdwardLyons progressStarted = false this is an assignment not a comparison.
I would put progressBar in your Vue data and if this.progressBar is not undefined then stop the timer
      if (this.progessBar) {
        clearInterval(this.progressBar)
        this.progressBar = undefined;
      }
      else {
        this.progressBar = setInterval(() => { 
          if (this.progress < 100) {
            console.log('progress: ', this.progress)
            this.progress++;
          } else {
            clearInterval(this.progressBar)
            this.progressBar = undefined;
          }
        }, 200 )
      }
  data: {
    effect: '',
    isOrange: true,
    progress: 0,
    progressBar: undefined
  },
Jack Lyons
@JackEdwardLyons
Nov 25 2017 12:01
thanks @sjames1958gm but that doesn't solve it... it still speeds up on each click
CamperBot
@camperbot
Nov 25 2017 12:01
jackedwardlyons sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8712 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Nov 25 2017 12:03
@JackEdwardLyons hmm
Jack Lyons
@JackEdwardLyons
Nov 25 2017 12:06
it's ok. no big deal.. thanks for the help
Stephen James
@sjames1958gm
Nov 25 2017 12:06
my code had a typo in the if statement
if (this.progessBar) { missing an r in progressBar
Quantomistro3178
@Quantomistro3178
Nov 25 2017 12:07
@JackEdwardLyons thanks!
CamperBot
@camperbot
Nov 25 2017 12:07
quantomistro3178 sends brownie points to @jackedwardlyons :sparkles: :thumbsup: :sparkles:
:cookie: 359 | @jackedwardlyons |http://www.freecodecamp.org/jackedwardlyons
Lance Ward
@Lanceward410
Nov 25 2017 12:34
hello world
Lance Ward
@Lanceward410
Nov 25 2017 12:42
Last 3 exercises for basic algorithm scripting
Spending the whole day at Panera to get to the Front-End projects
PSA passion papaya green tea trumps ALL but they don't serve machiattos...
Ken Haduch
@khaduch
Nov 25 2017 13:48
@Lanceward410 - good luck! Let us know if you need help!
abraham anak agung
@padunk
Nov 25 2017 14:44
@mubashiralisiddiqui perhaps, i still learn that one too.
DecisiveIndecisive
@DecisiveIndecisive
Nov 25 2017 15:55
Hey guys, really quick, can someone help me add a plugin via Github to my pen?
Specifically this one: https://github.com/jquery/jquery-color
But dont I need a .js file to add it into the Pen?
Tom
@moT01
Nov 25 2017 16:03
dont need a js file?
you should be able to go to https://cdnjs.com/
search for your library and copy url
paste it into the js scripts part on codepen
DecisiveIndecisive
@DecisiveIndecisive
Nov 25 2017 16:08
Oh nice, thank you!
kerafyrm02
@kerafyrm02
Nov 25 2017 16:38
Anyone stuck?
Toni Shortsleeve
@KoniKodes
Nov 25 2017 16:50
@khaduch I've not seen that. Thank you for sharing it. It makes sense that it is possible, as long as it is from a secure site and not from your computer.
AbrisM
@AbrisM
Nov 25 2017 19:36
https://jsfiddle.net/wme60v7q/ Hi, does someone know how to run this code WITHOUT jquery? Just plain old javascript and html?
Sorin Ruse
@sorinr
Nov 25 2017 19:51
@AbrisM you have to replace all jquery stuff with vannila javascript. ex: you have to change $("body") with document.getElementsByTagName("body") and so on (where appropriate you need to get the element by getElementsByClassName). As for the events: element.click() etc where element is document.getElementsByTagName("body") or whatever
AbrisM
@AbrisM
Nov 25 2017 20:02
Hmm, is there a convertor available that changes the jquery into Javascript?
Sorin Ruse
@sorinr
Nov 25 2017 20:04
@AbrisM i don't know. sorry as for the events it should be like element.addEventListener('click', function().....
@AbrisM why do u need a converter for less then 100 lines of js code where you have to change just a couple of lines where you are using jquery?
AbrisM
@AbrisM
Nov 25 2017 20:07
window.$ = document.querySelectorAll.bind(document) What about this code? I'm new to converting so I'm not exactly sure what to use
Sorin Ruse
@sorinr
Nov 25 2017 20:09
@AbrisM here some info that may help
AbrisM
@AbrisM
Nov 25 2017 20:20
@sorinr Thanks
CamperBot
@camperbot
Nov 25 2017 20:20
abrism sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1367 | @sorinr |http://www.freecodecamp.org/sorinr
Sorin Ruse
@sorinr
Nov 25 2017 20:20
@AbrisM welcome
juni
@junipberry
Nov 25 2017 21:50
hey guys, im having problems w my site
the header text context is not showing anymore
Adel
@AdelMahjoub
Nov 25 2017 21:53
@junipberry post a link to your site
my header text content is now showing, and I’m not sure how to get it back
could you guys take a look?
Adel
@AdelMahjoub
Nov 25 2017 21:58
@junipberry img-overlay is hiding it
@junipberry what img-overlay is used for
juni
@junipberry
Nov 25 2017 22:00
even if i get rid of it, it doesnt change
Sorin Ruse
@sorinr
Nov 25 2017 22:02
@junipberry try adding z-index: -1; to your .fullscreen-img
@junipberry and it will work
juni
@junipberry
Nov 25 2017 22:02
ohhh
ty @sorinr
that really helped
Sorin Ruse
@sorinr
Nov 25 2017 22:03
@junipberry :+1:
juni
@junipberry
Nov 25 2017 22:03
thanks @sorinr
CamperBot
@camperbot
Nov 25 2017 22:03
junipberry sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1368 | @sorinr |http://www.freecodecamp.org/sorinr
Sorin Ruse
@sorinr
Nov 25 2017 22:04
@junipberry welcome
juni
@junipberry
Nov 25 2017 22:04
i thought of changing the z-index around, but didnt think of using a negative!
is there a limit on z-index, as far as a certain number?
I got rid of the img overlay all together
Sorin Ruse
@sorinr
Nov 25 2017 22:10
@junipberry the best way to find out on using this property is reading here
juni
@junipberry
Nov 25 2017 22:10
awesome, ty again
@sorin, can I ask about another point?
Ive added sections down below, when you scroll down from the full screen image.. I want a block section. The block section is not fitting with the full screen image.
Sorin Ruse
@sorinr
Nov 25 2017 22:12
@junipberry sure. if i know i'll help or at least try to give u some directions
@junipberry try to update also the codepen so i can see what you talking about
juni
@junipberry
Nov 25 2017 22:14
I would like to make the section block, have the same perameter as the full screen img
ok, on it. one min, Ill update.
@sorinr I’ve updated the z-index and the text content color to make it more visible~ What I would like for the sections part to do is, not eat into the full screen image. I want the full screen image to take up all the view port space. And the sections to show when i scroll below the image
I would also like for the sections blocks to match the perameters of the full screen image, so there is page continuity
Sorin Ruse
@sorinr
Nov 25 2017 22:22
@junipberry i've seen it. do u care in using flexbox? if yes just change display: block; to display:flex; for #sections-container
@junipberry you will see the dif
juni
@junipberry
Nov 25 2017 22:28
oh I’ve heard of it before~ do I have to download anything to use it?
import a library or add the quick link?
Im not seeing it on the css settings for codepen
Sorin Ruse
@sorinr
Nov 25 2017 22:31
@junipberry nope. u don't have to download anything
@junipberry just use it in css. google for flexbox and u'll find a lot of resources
juni
@junipberry
Nov 25 2017 22:34
great, looking into it now!
appreciate it @sorinr !
Sorin Ruse
@sorinr
Nov 25 2017 22:36
@junipberry take ur time and read as much as u can. will save u lot of times
juni
@junipberry
Nov 25 2017 22:36
thanks a bunch @sorinr !
CamperBot
@camperbot
Nov 25 2017 22:36
junipberry sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
api offline
Sorin Ruse
@sorinr
Nov 25 2017 22:37
@junipberry trial and error will be ur best friend to understand how it works
juni
@junipberry
Nov 25 2017 22:37
best get an early start then ;)
so, would you say the sections part mismatch is more in the display part
then the padding/margins?
Sorin Ruse
@sorinr
Nov 25 2017 22:38
yep
juni
@junipberry
Nov 25 2017 22:40
got it
Sorin Ruse
@sorinr
Nov 25 2017 22:40
margins and padding have their own role but try to look over displaying them first
@junipberry i mean displaying the sections
juni
@junipberry
Nov 25 2017 22:50
@sorinr , um I wrote in flexcontainer, and my screen when dark
juni
@junipberry
Nov 25 2017 22:58
okay, nm I fixed it
Sorin Ruse
@sorinr
Nov 25 2017 22:58

@junipberry take a look:

.flexcontainer{
 display: inline-flex;
  width: 100vw;
  justify-content: space-between;
}

and decide if it is what you want

juni
@junipberry
Nov 25 2017 23:06
ohh its pretty close to what I want, I’ve updated it here with a few add onshttps://codepen.io/junipberry/pen/NwpPPx
but its still not matching the width of the full scrn img on scroll..
Sorin Ruse
@sorinr
Nov 25 2017 23:13
@junipberry thy are not 100% full width because of the class container in here: <div class="container flexcontainer" id="sections-container">
@junipberry just remove the container clas in the above and see what u get
juni
@junipberry
Nov 25 2017 23:15
ahhh
its funny, I added that bc my screen went dark after I added the flexcontainer, and it only came back after I added that in. Now, it works though even without it, the screen is not dark!
Sorin Ruse
@sorinr
Nov 25 2017 23:20
@junipberry in codepen->settings->behaviour and disable auto-updating-preview. anytime you make a change in code be it html/css/js yu will have to push the run btn.
juni
@junipberry
Nov 25 2017 23:22
ah, got it
Sorin Ruse
@sorinr
Nov 25 2017 23:22
@junipberry with auto-updating on, codepen will try to autocomplete any change you make to the code. thats why sometimes when changing css you see strange behaviours
juni
@junipberry
Nov 25 2017 23:23
thank you @sorinr , I’m really grateful
CamperBot
@camperbot
Nov 25 2017 23:23
junipberry sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1369 | @sorinr |http://www.freecodecamp.org/sorinr
Sorin Ruse
@sorinr
Nov 25 2017 23:26
@junipberry np at all. happy coding. off to bed. u can pm me if u have any other questions
juni
@junipberry
Nov 25 2017 23:31
thank you! good night~~
Sorin Ruse
@sorinr
Nov 25 2017 23:32
@junipberry thank you. some cookies for ur efforts
CamperBot
@camperbot
Nov 25 2017 23:32
sorinr sends brownie points to @junipberry :sparkles: :thumbsup: :sparkles:
api offline
juni
@junipberry
Nov 25 2017 23:33
@sorinr :smile:
Sorin Ruse
@sorinr
Nov 25 2017 23:33
@junipberry sorry. the bot is out of service :)
juni
@junipberry
Nov 25 2017 23:33
lol no worries
Sorin Ruse
@sorinr
Nov 25 2017 23:34
take care :+1: