These are chat archives for FreeCodeCamp/HelpFrontEnd

15th
Dec 2017
chadcuomo
@chadcuomo
Dec 15 2017 00:28
is it common for the projects to change while you''re in the middle of them? lol I was supposed to design a portfolio page and when i finally finish I go back and now its a tribute page
AbrisM
@AbrisM
Dec 15 2017 00:29
Hi does anyone know if freecodecamp offers Java IDE examples for operationals/conditions/arrays?
@chadcuomo What do you mean? :)
If it changes than more than likely you are using an IDE that has edit/teamwork enabled
If your using an online IDE. If it's a regular IDE, then no :)
chadcuomo
@chadcuomo
Dec 15 2017 00:31
@AbrisM When i finished the HTML/CSS portion there was a project to create a portfolio page. When I went back to submit the project it said the project was to create a Tribute page
Jacky Lui
@Recelis
Dec 15 2017 00:33
@chadcuomo when did you start? I started last year and the Tribute page was the first project followed by portfolio.
chadcuomo
@chadcuomo
Dec 15 2017 00:33
hmm maybe i somehow skipped the tribute page lol i just started a few weeks ago
AbrisM
@AbrisM
Dec 15 2017 00:35
That's possible :)
I've been doing schoolwork instead of freecode examples, so i'm not sure :o:
Do you know if they offer Java projects here?
chadcuomo
@chadcuomo
Dec 15 2017 00:36
yeah, thats exactly what i did. when i move to the next page after tribute page it takes me to the portfolio project
Kaz Baig
@kbaig
Dec 15 2017 00:44
@AbrisM We focus on JS here
AbrisM
@AbrisM
Dec 15 2017 00:52
Hmm so no JS
I mean, Java IDE's :)
Isaiah Trembley
@IsaiahCT
Dec 15 2017 00:52
kmao
lmao
stio
we do js here
AbrisM
@AbrisM
Dec 15 2017 00:53
Yes, I have been doing functions and .this statements in JS :)
My most recent project was an e-commerce like site
chadcuomo
@chadcuomo
Dec 15 2017 01:04
if anyone would be willing to give me some feedback on my site i would appreciate it https://chadcuomo.github.io/
AbrisM
@AbrisM
Dec 15 2017 01:18
Chaduomo, :)
The <p> as your introduction needs to be moved down abit more, as it looks squashed
moved up*
Also the picture as well in the <div> element
I have tested the input values in your site
You don't have networking integrated yet I see, as there is a 450
Yes, you have minor issues with text/picture placement. Right now the content looks like it's sliding outside of the <div> container
Tom
@moT01
Dec 15 2017 01:21
@chadcuomo the nav might be a little too transparent
AbrisM
@AbrisM
Dec 15 2017 01:21
Putting it inside of the white-box would be recommended
Tom
@moT01
Dec 15 2017 01:22
clicking portfolio takes you too high on the page
meaning the title is too low - so you can see the above section
the other buttons work good enough
AbrisM
@AbrisM
Dec 15 2017 01:23
I see you have jquery library in your script :)
Recommended to use a CSS centering option than inside of the HTML
Tom
@moT01
Dec 15 2017 01:24
the hover effect on the buttons at the bottom dont have the whole icons in the effect
AbrisM
@AbrisM
Dec 15 2017 01:24
There is an unclosed <div> element on line 38, I believe
Also an "alt" recommended for your picture, just incase if it doesn't render
The role form is not needed for your form element, since you've declared it at the begining line 132
Line 205 you need the proper copyright symbol.
chadcuomo
@chadcuomo
Dec 15 2017 01:26
thanks for the help guys i'll try to fix some of these
AbrisM
@AbrisM
Dec 15 2017 01:26
There is also an unclosed </div> element
Tom
@moT01
Dec 15 2017 01:27
@chadcuomo that's a big list
Kaz Baig
@kbaig
Dec 15 2017 01:28
@chadcuomo https://www.w3schools.com/tags/tag_center.asp Center tag is not supported in HTML5. You can use css to replicate :)
Tom
@moT01
Dec 15 2017 01:28
the overall look is pretty good - some minor issues i mentioned that most people wouldnt notice
AbrisM
@AbrisM
Dec 15 2017 01:29
@chadcuomo also your missing an cols attribute for <textarea>
https://codepen.io/anon/pen/eyNKJO I have placed your code inside of codepen
Other than that, your blog/site looks very modern :)
You could also have your contact and about page hosted on seperate pages
chadcuomo
@chadcuomo
Dec 15 2017 01:33
ohh never heard of validator before. cool site
AbrisM
@AbrisM
Dec 15 2017 01:35
Yes, I believe <center> will be phased out at some point
Kaz Baig
@kbaig
Dec 15 2017 01:35
It already has been
AbrisM
@AbrisM
Dec 15 2017 01:35
Yes :o:
Kaz Baig
@kbaig
Dec 15 2017 01:35
It's only supported by browsers for legacy code
AbrisM
@AbrisM
Dec 15 2017 01:35
Hahaha, even though I have used it. I am bad! :)
Logging off now
AbrisM
@AbrisM
Dec 15 2017 02:52
Back :)
chadcuomo
@chadcuomo
Dec 15 2017 02:54
That wasn't very long lol
AbrisM
@AbrisM
Dec 15 2017 03:06
Yes :)
chadcuomo
@chadcuomo
Dec 15 2017 03:20
What are you going to school for?
AbrisM
@AbrisM
Dec 15 2017 03:51
?
Programming/Software Developer
I also do Web Design
AbrisM
@AbrisM
Dec 15 2017 04:09
Next I will be doing Networking :)
Muna Mohamed
@mooneyd12
Dec 15 2017 05:07
Hi everyone! Is there anyone that can help me with a Javascript problem?
I'm trying to decrease the scale of an element using a Javascript for loop when an a tag is clicked but just can't seem to figure out
Sorin Ruse
@sorinr
Dec 15 2017 05:19
@mooneyd12 can u post your code on codepen and share the link?
Muna Mohamed
@mooneyd12
Dec 15 2017 05:32
hi! sorry I just say your post
Chris Tram
@ctram
Dec 15 2017 05:44
One thing is, 'main-content' is an id, but you're are using the method to find by class, no?
Muna Mohamed
@mooneyd12
Dec 15 2017 05:45
oh yes, my mistake. I corrected it
I think without some sort of timing function added it won't work but I'm not sure how to add one
Sorin Ruse
@sorinr
Dec 15 2017 05:52
@mooneyd12 why do you make the page responsive by using js and not css?
Muna Mohamed
@mooneyd12
Dec 15 2017 05:53
I haven't added responsiveness to the page yet @sorinr
I wanted to get the animation and transitions out the way first @sorinr
ohh you mean making the page interactive....it's because I'm trying to get out of my comfort zone of css and venture into more javascript
@sorinr
Sorin Ruse
@sorinr
Dec 15 2017 05:57
@mooneyd12 no. i meant why would you scale an element by js and not css?
Muna Mohamed
@mooneyd12
Dec 15 2017 06:06
Ahh I see, the reason is because I can't apply the css transition to the parent (#main-content) using the child element (the a tag), @sorinr
so I thought using js might be easier to do this with @sorinr
Chris Tram
@ctram
Dec 15 2017 06:21
@mooneyd12 Not sure why you cannot directly set the transform attribute; also, the method is getElementById, singular.
Can you have the function use the loop, but change the classes?
Chris Cullen
@123xylem
Dec 15 2017 06:28

Hi - I have this image gallery that I want to show the title of when hovered over. Any idea how to select the title attribute on hover?

#envira_shortcode_id_444 > a:hover {
transform:scaleX(2.3);
    transition:all 0.3s ease-in;
}

#envira_shortcode_id_444 > a:hover a[title]{
    color:white;
    position:absolute;
    top: 50%;
left: 50%;

}

Thats how im trying to select it which seems to work for most of it but not for the title attribute

The developer tools shows this for the title attribute::

<img id="envira-gallery-image-445" class="envira-gallery-image envira-gallery-image-1" data-envira-index="1" src="https://www.webdevchris.ga/wp-content/uploads/2017/12/pexels-photo-160107-1024x682-410x273_c.jpeg" data-envira-src="https://www.webdevchris.ga/wp-content/uploads/2017/12/pexels-photo-160107-1024x682-410x273_c.jpeg" data-envira-gallery-id="444" data-envira-item-id="445" data-envira-caption="Web Development" alt="HTML5, CSS3,  JavaScript,  WordPress,  NodeJS, Express  MongoDB,  Site Authentication,  Git GitHub" title="Web Development" itemprop="thumbnailUrl" data-envira-srcset="https://www.webdevchris.ga/wp-content/uploads/2017/12/pexels-photo-160107-1024x682-410x273_c.jpeg 400w,https://www.webdevchris.ga/wp-content/uploads/2017/12/pexels-photo-160107-1024x682-410x273_c.jpeg 2x" srcset="https://www.webdevchris.ga/wp-content/uploads/2017/12/pexels-photo-160107-1024x682-410x273_c.jpeg" style="opacity: 1;">

the site is www.webdevchris.ga
Thanks Guys!

its the envira gallery with 3 images at the top
Chris Tram
@ctram
Dec 15 2017 06:33
@123xylem You want to change the styling of the tooltip that appears based on the title attribute? https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title
e.g. <a title="i pop up for the link">I am a link</a>
?
Muna Mohamed
@mooneyd12
Dec 15 2017 06:41
I have tried doing that but still no luck @ctram
someone suggested using css instead so I'm playing around with css animations atm @ctram
Chris Cullen
@123xylem
Dec 15 2017 06:47
@ctram hi
when i hover on the image i want the title to appear
@ctram so im trying to target the images title attribute
and show it on hover
Adel
@AdelMahjoub
Dec 15 2017 07:18
@123xylem easiest using javascript I guess, but maybe because I'm not really good with css
@123xylem but if all those data attributes are rendered with a templating engine, put the title in the center of the image with display: none, and on hover set it to display block
@123xylem kinda of a barbaian css but it should work
Chris Cullen
@123xylem
Dec 15 2017 07:21
@AdelMahjoub its wordpress so its not so customisable
Adel
@AdelMahjoub
Dec 15 2017 07:21
@123xylem not even an inline script ?
Chris Cullen
@123xylem
Dec 15 2017 07:22
well i have a additional css area to add css
can i add a script to that?
Adel
@AdelMahjoub
Dec 15 2017 07:22
@123xylem if you can read the php file, you could easily add a script under the images section
Chris Cullen
@123xylem
Dec 15 2017 07:22
Im customising a plugin
Adel
@AdelMahjoub
Dec 15 2017 07:24
@123xylem open the php file and add a script tag and the logic inside a function like this, so nothing unexpected should happen
(function(){
/* script */
})()
Chris Cullen
@123xylem
Dec 15 2017 07:25
@AdelMahjoub its a bit above me
its a plugin so I dont have access to the php files
Adel
@AdelMahjoub
Dec 15 2017 07:26
@123xylem simple, all inline javascript is parsed while the browser is building the dom, you edit that php page and add <script></script> just under the images section
@123xylem and wrap the javascript that you'll write inside a function like above
Chris Cullen
@123xylem
Dec 15 2017 07:29
@AdelMahjoub I could add custom html
and add the images in it maybe
instead of the envira plugin
Adel
@AdelMahjoub
Dec 15 2017 07:29
@123xylem if you can add custom html, then you can add inline scripts
@123xylem this is an inline script
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <div></div>

  <!-- this is an inline script tag -->
  <script>
    /* javascript code */
  </script>

</body>
</html>
@123xylem it will be parsed by the browser when it parses the html to build the dom
@123xylem and it will be executed
Chris Cullen
@123xylem
Dec 15 2017 07:37
@AdelMahjoub thanks but even the custom html wont work for some reason.. Wont let me type in it
CamperBot
@camperbot
Dec 15 2017 07:37
123xylem sends brownie points to @adelmahjoub :sparkles: :thumbsup: :sparkles:
:cookie: 641 | @adelmahjoub |http://www.freecodecamp.org/adelmahjoub
Chris Cullen
@123xylem
Dec 15 2017 07:37
I think I just need a way to select the title attribute with a hover
Adel
@AdelMahjoub
Dec 15 2017 07:39
@123xylem I don't know much about wordpress, but I guess that the templating is similar than any php app, you open the wp_content folder, you find the file in which the image gallery is written, and you edit it. Unless you don't have access to the files
Chris Cullen
@123xylem
Dec 15 2017 07:40
@AdelMahjoub k going into the dark backend
@AdelMahjoub i havent used jquery in ages
what kind of code will i use?
Adel
@AdelMahjoub
Dec 15 2017 07:40
@123xylem use javascript if you don't feel using jquery
Chris Cullen
@123xylem
Dec 15 2017 07:41
getelementby id (title attribute) ?
Adel
@AdelMahjoub
Dec 15 2017 07:41
@123xylem yes, if you struggle open the dev tools and console.log anything you doubt
Chris Cullen
@123xylem
Dec 15 2017 07:41
. title on(hover) .addclass (show)
o boyt
Adel
@AdelMahjoub
Dec 15 2017 07:42
@123xylem :smile: use javascript, your text editor will do the rest if it have javascript code completition
Chris Cullen
@123xylem
Dec 15 2017 07:43
could u give me a rough sample of what i have to do?
I think it will be selecting something making it a variable then adding a class to it that has different style
Adel
@AdelMahjoub
Dec 15 2017 07:47
@123xylem select the image direct container, set it to position relative, create a span set it to position absolute, append the span to the image container, selet the text of the image titile attribute, set the span textContent to that title, on hover set the span display to block or any, on leave set it back to display none
@123xylem it depends on how the gallery is layed
Chris Cullen
@123xylem
Dec 15 2017 07:48
<img id="envira-gallery-image-445" class="envira-gallery-image envira-gallery-image-1" data-envira-index="1" src="https://www.webdevchris.ga/wp-content/uploads/2017/12/pexels-photo-160107-1024x682-410x273_c.jpeg" data-envira-src="https://www.webdevchris.ga/wp-content/uploads/2017/12/pexels-photo-160107-1024x682-410x273_c.jpeg" data-envira-gallery-id="444" data-envira-item-id="445" data-envira-caption="Web Development" alt="HTML5, CSS3,  JavaScript,  WordPress,  NodeJS, Express  MongoDB,  Site Authentication,  Git GitHub" title="Web Development" itemprop="thumbnailUrl" data-envira-srcset="https://www.webdevchris.ga/wp-content/uploads/2017/12/pexels-photo-160107-1024x682-410x273_c.jpeg 400w,https://www.webdevchris.ga/wp-content/uploads/2017/12/pexels-photo-160107-1024x682-410x273_c.jpeg 2x" srcset="https://www.webdevchris.ga/wp-content/uploads/2017/12/pexels-photo-160107-1024x682-410x273_c.jpeg" style="opacity: 1;">
Thats what i have to select with JS
Adel
@AdelMahjoub
Dec 15 2017 07:49
all the attributes ?
Chris Cullen
@123xylem
Dec 15 2017 07:49
just title really
but what im saying is I have to make JS target that element
Adel
@AdelMahjoub
Dec 15 2017 07:49
@123xylem those attributes are generated by the plugin you were using, it is too lazy to create classes, so it flooded it with data-x-*, so it will be easier to target
Chris Cullen
@123xylem
Dec 15 2017 07:49
and I dont really know how lol
Adel
@AdelMahjoub
Dec 15 2017 07:50
@123xylem you'll find out, so you refresh and review your javascript
Chris Cullen
@123xylem
Dec 15 2017 07:50
so i say getelementbyattribute('title')?
Adel
@AdelMahjoub
Dec 15 2017 07:51
@123xylem text editor + google and it'll be done in no time
@123xylem an occasion to review some js, you are building a portfolio and a blog about web development, so it is good time to refresh
Chris Cullen
@123xylem
Dec 15 2017 07:53
@AdelMahjoub hehe i know
its jus that im looking at a big Php file and I dont have a clue what it does
Adel
@AdelMahjoub
Dec 15 2017 07:56
@123xylem ctrl+f and search for those img tags
Chris Cullen
@123xylem
Dec 15 2017 07:56
img not found
its very bland Php
Adel
@AdelMahjoub
Dec 15 2017 07:57
@123xylem not the plugin file
@123xylem search in the templates
@123xylem the templates are rendered, so you look for the one you want, and search img tags
Chris Cullen
@123xylem
Dec 15 2017 08:14
@AdelMahjoub ok
checking
@AdelMahjoub I dont think its that simple.. Ive looked for the file and cant find it... the images are part of the plugin and encased in loads of classes etc
Adel
@AdelMahjoub
Dec 15 2017 08:22
@123xylem nothing could stop an inline script unless some csrf setups, if you knwo where the images will be rendered it should work
Adel
@AdelMahjoub
Dec 15 2017 08:27
@123xylem add the script in the footer
@123xylem open your page, inspect the images you are targeting, and meanwhile write a script in the page footer
@123xylem I think the footer is easily identified
@123xylem or you can try write the script and url encode it in the posts editor, it worked for some version of marked, maybe it works in wordpress posts editor
@123xylem or, find another plugin for centering text in images ? a desperate solution
Adel
@AdelMahjoub
Dec 15 2017 08:35
@123xylem those are barbarians solutions, in reality you can edit your wordpress themes, so unless you want to hack your way through, check that wordpress codex on how to customize and write plugins
Chris Cullen
@123xylem
Dec 15 2017 08:44
@AdelMahjoub thanks man
CamperBot
@camperbot
Dec 15 2017 08:44
123xylem sends brownie points to @adelmahjoub :sparkles: :thumbsup: :sparkles:
:cookie: 642 | @adelmahjoub |http://www.freecodecamp.org/adelmahjoub
Tychro van den Broeke
@tychro
Dec 15 2017 09:44
can anyone help me, i need to calculate with decimals in JS and i don't know how to do it????
Markus Kiili
@Masd925
Dec 15 2017 09:45
@tychro There is only one Number type in JS that are 64bit floats. You can round them or format into corresponding string representations.
var num = 1.23456;
Number(num.toFixed(2)); // 1.23
@tychro If you are doing the Exact change challenge, the robust way is to use penny amounts on comparisons that are safe integers.
Only small enough integers are guaranteed to have an exact representation as a float. Usually numbers are a bit off and rounding errors happen.
Tychro van den Broeke
@tychro
Dec 15 2017 09:50
thx
see if it works for me
Bartek Lewandowski
@Jabarlew
Dec 15 2017 11:48

hello guys i have to create pixel art app and i got problem with event if anyone could help me

https://codepen.io/Jabarlew/pen/LeVbXe?editors=0010

main problem is that if i unclick not on the canvas it wont stop drawing :) also sometimes instead of drawing i just drag table instead of drawing is it possible to block it somehow ?

ok i fixed problem with event but still need help with that draging table :D
primuscovenant
@primuscovenant
Dec 15 2017 12:02
@heroiczero thx
CamperBot
@camperbot
Dec 15 2017 12:02
primuscovenant sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 2106 | @heroiczero |http://www.freecodecamp.org/heroiczero
Hills
@Hillsie
Dec 15 2017 12:21
Hello, I’m trying to get a share button working for Facebook on a codepen random quote machine. Issue is I am getting a CodePen - No (or blocked ) Referrer. I also can’t figure out how to get the FB share to take the quote that’s generated. Anyone have any suggestions?
https://codepen.io/hillsie/full/zpGxQx/
Hills
@Hillsie
Dec 15 2017 12:36
Sorted.
Except I am still trying to figure out who to get a screen shot of the site.
into facebook.
Got it. … Helps just to say I have a problem sometimes :smile:
Bartek Lewandowski
@Jabarlew
Dec 15 2017 12:40
i solved draging too
thanks :D
Hills
@Hillsie
Dec 15 2017 12:40
:thumbsup:
Sweet Coding :)
@SweetCodingInc
Dec 15 2017 12:41
Let's celebrate the global say I have a problem to solve the problem day
Bartek Lewandowski
@Jabarlew
Dec 15 2017 12:42
:D
its like we rush to much to get answers from others
and what we really need
is some time
:D
Hills
@Hillsie
Dec 15 2017 12:44
:shipit: Sort of, I was scratching my head for about 2 hours and googling. As I posted the question, I tried a few things.
then tada... found a way
DecisiveIndecisive
@DecisiveIndecisive
Dec 15 2017 13:10
Morning everyone
Markus Kiili
@Masd925
Dec 15 2017 13:12
@DecisiveIndecisive Morning.
creator0323
@Amasian
Dec 15 2017 13:23
@DecisiveIndecisive Morning!
DecisiveIndecisive
@DecisiveIndecisive
Dec 15 2017 14:13
So I've been struggling with this issue for a while now, in fact I went and finished every other part of the project I could before coming back to this. I'm generating a new photo API call every time a certain button clicks, but the rest of my page loads before the photo
I've tried loading a second photo in the background and changing to that one, and I've tried delaying the info until it registers a statechange with the API call but It's not having it. I've been on stackoverflow and do not understand the solutions there for the life of me. Anyone have any experience with this?
linkin-park
@linkin-park
Dec 15 2017 14:29
help!
help! @Masd925
Christopher Brown
@ChrisBrownie55
Dec 15 2017 15:00
@DecisiveIndecisive Code?
There's a lot going on, but essentially when you click the Refresh Button I'd like to fade in a new image instead of calling the API and immediately removing the current one showing the blue background until the new image loads
Tom
@moT01
Dec 15 2017 15:18
@DecisiveIndecisive so i assume its the pause between the two background images
you want one to just fade in or something without that ugly solid color showing up
what lines in the code are you setting the images - how are you doing it?
DecisiveIndecisive
@DecisiveIndecisive
Dec 15 2017 15:20
The API call is in the function newImage()
In the Javascript I've got it so when you click the refresh button in the top right corner, it calls newImage()
Tom
@moT01
Dec 15 2017 15:25
the call to get the new image takes too long is one problem i think
so im trying to think of the process that it happening and how you can make it like you want
DecisiveIndecisive
@DecisiveIndecisive
Dec 15 2017 15:27
Well yeah, I'm rendering HD images. The question is, can I stop the function of my code until the new image is loaded entirely, and then proceed.
Or can I load it in the background and then "apply" it when I click refresh button
Tom
@moT01
Dec 15 2017 15:28
right
DecisiveIndecisive
@DecisiveIndecisive
Dec 15 2017 15:28
I understand what I need to do on paper, but writing the functionality has me running in cirlces
Tom
@moT01
Dec 15 2017 15:28
you can - somehow
but it would take some rewriting
that 1500 ms timeout
thats for just visual right?
meaning you didnt put that in to try and fix this picture thing
DecisiveIndecisive
@DecisiveIndecisive
Dec 15 2017 15:30
No, that's so the correct answer has time to display green before the new Image is called
Tom
@moT01
Dec 15 2017 15:34
hmm
you want to like start getting that image right when you click refresh
DecisiveIndecisive
@DecisiveIndecisive
Dec 15 2017 15:35
I'm nitpicking, the general functionality of this project is complete, I just need to get the Teet button to work and move on or I'll spend forever on this project :P
Tom
@moT01
Dec 15 2017 15:35
so instead of the timeout
do something like this
refresh.click -> 
  change the settings(color: green or whatever)
  getImage().then -> { change background }
so the right answer will turn green - and just stay green till the image is retrieved
and then the background will change - and you would probly want to change the newQuote in there as well or something
just throwing some thoughts out there
DecisiveIndecisive
@DecisiveIndecisive
Dec 15 2017 15:38
the newImage changes the background immediately though

$(".screen").css("background-image", "url('" + randomImage + "')");

This like right here immediately removes old background and begins loading the new background, so even if I change around the timeOut I'll have the same problem wont I?

Tom
@moT01
Dec 15 2017 15:40
well you would need to change that too
unless all you want to do is get the image to fade in - and dont care about that gap between the picture change
DecisiveIndecisive
@DecisiveIndecisive
Dec 15 2017 15:42
I don't see how I'm to separate the functions of getting the image, and then changing the background
Unless .then is an operator o.0
Tom
@moT01
Dec 15 2017 15:43
then just waits for the function to be done
so you could return the url
from the getImage
getImage.then(url => {  
  set new background here   }
and instead of setting the background in the getImage()
you would return the image url
DecisiveIndecisive
@DecisiveIndecisive
Dec 15 2017 15:51
Hmmm, I'll have to come back to this and wrap my head around it
Tom
@moT01
Dec 15 2017 15:57
yea, im playing with it - cant quite get it working like i had hoped
DecisiveIndecisive
@DecisiveIndecisive
Dec 15 2017 16:20
Well, I think I'm done with it for now. There are a few kinks I'd need to work out before really displaying it to anyone judging it for quality, but I'm happy with it as a first project :)
Stephen James
@sjames1958gm
Dec 15 2017 16:22
@DecisiveIndecisive :+1:
Muzamil
@mzmls
Dec 15 2017 18:02
hi campers, I am having trouble keeping the audio controls off the image on screens larger than 991px. I want to keep the audio controls below the <hr> element. How can I do this?
Yingjie (Iris) Hu
@huyingjie
Dec 15 2017 18:36
Could anyone click my website http://yingjiehu.com and tell me whether you can open it? My local machine cannot open the website with chrome and safari. But I can open it with ipad pro. It is frustrating.
Kudzu
@czhower
Dec 15 2017 18:36
opens here.
Opened in Chrome Desktop version on Windows.
Yingjie (Iris) Hu
@huyingjie
Dec 15 2017 18:37
@czhower Thank you.
CamperBot
@camperbot
Dec 15 2017 18:37
huyingjie sends brownie points to @czhower :sparkles: :thumbsup: :sparkles:
:cookie: 20 | @czhower |http://www.freecodecamp.org/czhower
Kudzu
@czhower
Dec 15 2017 18:37
Open the debugger and see the traffic
ctrl-shift-J in most desktop browsers.
Yingjie (Iris) Hu
@huyingjie
Dec 15 2017 18:37
This page isn’t working
yingjiehu.com didn’t send any data.
ERR_EMPTY_RESPONSE
The source code is empty.
Kudzu
@czhower
Dec 15 2017 18:37
Do you have a proxy or HTTP cache upline from you? Or AV software?
Yingjie (Iris) Hu
@huyingjie
Dec 15 2017 18:38
What is proxy or HHTP cache or AV software?
I am using https://tools.pingdom.com/ to see what slows it down
Kudzu
@czhower
Dec 15 2017 18:40
AV - Antivirus. HTTP cache - most ISPs have web caches such as squid etc and sometimes they are configured poorly or hold broken / old files.
Yingjie (Iris) Hu
@huyingjie
Dec 15 2017 18:42
My website is on github. I am not sure whether github uses HTTP cache or not.
Screen Shot 2017-12-15 at 1.43.14 PM.png
Blake
@BadSenju
Dec 15 2017 18:45
having trouble with some code trying to get them to line up correctly
Kudzu
@czhower
Dec 15 2017 18:46
It wouldnt be gh, but your internet provider.
Blake
@BadSenju
Dec 15 2017 18:46
'<div class="Main" id="MyPortfolio">
<h1>PORTFOLIO</h1>
<h2>Recent</h2>
<div class="row">
  <div class="column">
    <div class="content">
      <img src="#" alt="TBA" style="width:100%">
      <h3>In Proggress</h3>
      <p>Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodessest eos no.</p>
    </div>
  </div>
  <div class="column">
    <div class="content">
      <img src="#" alt="TBA" style="width:100%">
      <h3>In Proggress</h3>
      <p>Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodessest eos no.</p>
    </div>
  </div>
  <div class="column">
    <div class="content">
      <img src="#" alt="TBA" style="width:100%">
      <h3>In Proggress</h3>
      <p>Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodessest eos no.</p>
    </div>
  </div>
  <div class="column">
    <div class="content">
      <img src="#" alt="TBA" style="width:100%">
      <h3>In Proggress</h3>
      <p>Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodessest eos no.</p>
    </div>
  </div>
</div>

<div class="row">
  <div class="column">
    <div class="content">
      <img src="#" alt="TBA" style="width:100%">
      <h3>In Proggress</h3>
      <p>Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodessest eos no.</p>
    </div>
  </div>
  <div class="column">
    <div class="content">
      <img src="#" alt="TBA" style="width:100%">
      <h3>In Proggress</h3>
      <p>Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodessest eos no.</p>
    </div>
  </div>
  <div class="column">
    <div class="content">
      <img src="#" alt="TBA" style="width:100%">
      <h3>In Proggress</h3>
      <p>Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodessest eos no.</p>
    </div>
  </div>
  <div class="column">
    <div class="content">
      <img src="#" alt="TBA" style="width:100%">
      <h3>In Proggress</h3>
      <p>Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodessest eos no.</p>
    </div>
  </div>
</div>'
its for a that portfolio project..trying to let the gallery to line up correctly 2 rows and a main gallery to be placed at the bottom of the 2 previous rows
glandon22
@glandon22
Dec 15 2017 18:50
@huyingjie the page loaded slowly but worked fine. located in USA
Yingjie (Iris) Hu
@huyingjie
Dec 15 2017 18:52
@glandon22 Thank you.
CamperBot
@camperbot
Dec 15 2017 18:52
:cookie: 280 | @glandon22 |http://www.freecodecamp.org/glandon22
huyingjie sends brownie points to @glandon22 :sparkles: :thumbsup: :sparkles:
glandon22
@glandon22
Dec 15 2017 18:54
the API call to leancloud slowed it down alot. might be causing problems but i dont know
Yingjie (Iris) Hu
@huyingjie
Dec 15 2017 18:58
@glandon22 leancloud is a chinese website. It might be the problem
Tyrrance Wilson
@Wilsontyrrance
Dec 15 2017 19:04
Why won't the picture show?

extends structure/_layout.pug

block content

main.site-content

<h1 style="color:gold"class=""> Tribute to the King</h1>

<p1> Martin Luther King Jr. was the greatest African American Civil Rights leader.</p1> 
<img src="https:http://www.mactrast.com/wp-content/uploads/2015/01/Martin-Luther-King-Jr-thumb.jpg" alt="Martin Luther King Jr.">
glandon22
@glandon22
Dec 15 2017 19:06
you have http in there twice
in your img src
Tyrrance Wilson
@Wilsontyrrance
Dec 15 2017 19:07
thank you
glandon22
@glandon22
Dec 15 2017 19:09
np
Muzamil
@mzmls
Dec 15 2017 20:10
I am having trouble keeping the audio controls off the image on screens larger than 991px (https://codepen.io/mzmls/pen/vZYxNP) I want to keep everything aligned down the middle. How can I do this?
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Dec 15 2017 20:21
@mzmls I am not sure I get what you want... for me the audio controls are not in front of the image and everything is centered (https://screenshots.firefoxusercontent.com/images/0cc2d9f5-a0ab-425b-93ea-0fd614640676.png)
Suds-p
@Suds-p
Dec 15 2017 20:24
@Otto-AA The problem occurs on larger screens and views.
Muzamil
@mzmls
Dec 15 2017 20:25
try here on a screen bigger than 1000px https://s.codepen.io/mzmls/debug/vZYxNP/NQMzYnLGJDyk
thanks everyone, i appreciate the help
glandon22
@glandon22
Dec 15 2017 20:32
this works fine on my screen 1900px
Muzamil
@mzmls
Dec 15 2017 20:33
i updated the class from row to container in the header element and it fixed it
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Dec 15 2017 20:38
The image I posted was taken on a 1920px width screen ;)
Glad you fixed it
Jean Marco Romero
@volkranium
Dec 15 2017 22:56
Isnt there a way to automatically generate boilerplate ReactJS app?
It takes me so long to install all the dependencies and configure them
Tiago Correia
@tiagocorreiaalmeida
Dec 15 2017 23:00
@volkranium do it once upload for github
clone repo everytime :D
an yeah I know the feeling...
Kaz Baig
@kbaig
Dec 15 2017 23:02
@volkranium create-react-app
Jean Marco Romero
@volkranium
Dec 15 2017 23:03
@kbaig ?
Jean Marco Romero
@volkranium
Dec 15 2017 23:08
@kbaig ill definitely check that out
Kaz Baig
@kbaig
Dec 15 2017 23:19
@volkranium that's the industry standard tool to generate react boiletplate
pretty much all in-house tools to generate boilerplate are built on top of it
Jean Marco Romero
@volkranium
Dec 15 2017 23:27
@kbaig im getting an error after cloning
@kbaig when i do npm install -g create-react-app
Jean Marco Romero
@volkranium
Dec 15 2017 23:33
got it