get help in general - we have more specialized help rooms here: https://gitter.im/FreeCodeCamp/home
you buy it from a domain name service provider @ismailhozain
or, do you mean setting up ismailhozain.github.io?
i am using surge.sh which is free
but it is not working out in my command prompt
@piteto
@ismailhozain you still need to buy a domain and then set it up with surge.sh from what I understand. They don't give you domain names for free
that is not my issue my issue is getting the thing to the web
that green link is not working
@piteto
I don't know how to connect to a custom surge.sh domain
I use github.com
that is not what i am talking about i need to get it to the web with whatever domain they give me i just need to get it there
do you have an index.html file at the root of your path?
c:/users/ismai/desktop/expermi/index.html
i have a .html file in the folder
it was made in sublime
@piteto
it needs to be named
index.html or your page at http://smoggy-sugar.surge.sh won't load
@ismailhozain
ok
This is where I found that issue: sintaxi/surge#245
ok thanks it worked
you're welcome
Does anyone here feel like they understand the following code?
function flatArray([x,...xs]){
return x ? [...Array.isArray(x) ? flatArray(x) : [x],...flatArray(xs)]
: [];
}I have a specific question about when the ternary operator evaluates to false ([x],…flatArray(xs)])
@santanaG it's a bit deep
readable though
@JanShah In principle I understand what it is doing and why but two things are annoying me if you might be able to help
go on
@JanShah why are we returning the element enclosed in an array ( [x]) instead of just the element x by itself?
All I can tell for sure is that it breaks because at some point the code attempts to perform something on the x element that it cannot do when flattening this array:
[[],[1,2],[3,[4,5]],[6,7,[[[8],9]]],10]
one sec, let me run it so I can understand better
does it fail the test on this array?
@santanaG
@JanShah When you take
([x],…flatArray(xs)]) and make it into ( x,…flatArray(xs)])
it fails
@santanaG yes
@korzo I do not understand why it needs to be enclosed in an array
@santanaG because you have to return array
@korzo Yes, but why?
@santanaG you have return at the start of the line. It mean that you have to return array.
Inside [] it makes destructing
Inside [] it makes destructing
so it has to be enclosed in []
anyone wanna help whith somthing that i think is simple just
how can i make those images tay in their divs
trying to make it responsive
<body>
<div class="container">
<div id="bigCircle">
<div class="row">
<div class="col">
<div>
<img class="img-responsive" src="greenCircle.png" alt="Green Circle">
</div>
<div>
<img class="img-responsive" src="redCircle.png" alt="Green Circle">
</div>
</div>
<div class="col">
<div>
<img class="img-responsive" src="yellowCircle.png" alt="Green Circle">
</div>
<div>
<img class="img-responsive" src="blueCircle.png" alt="Green Circle">
</div>
</div>
</div>
</div>
</div>
i tryed without that many divs either lol
Hi everyone having trouble with learnyounode, the module section
@korzo @JanShah Thanks for the assistance! I think I have it down after a few dozen times running different input through the function within chrome dev tools
santanag sends brownie points to @korzo and @janshah :sparkles: :thumbsup: :sparkles:
:cookie: 540 | @korzo |http://www.freecodecamp.com/korzo
:cookie: 547 | @janshah |http://www.freecodecamp.com/janshah
This is what i'm getting module.exports = function (directory, extName, function(err,files){
^^^^^^^^
SyntaxError: Unexpected token function
const fs = require("fs");
const path = require("path");
const ext = "extType."+(process.argv[3]);
const directory = (process.argv[2]);
const extName = path.extname(ext);
module.exports = function (directory, extName, function(err,files){
if (err){throw err;}
//Gives Error if there is an error
files.forEach(function(file) {
if ( file.includes(extName)){
return(file);
}
});
})
@bookofbash - did you just try this:
export function(directory, extName, function(err, files){ ? I'm not too familiar with modules and export, but that is the type of example that I see in some docs that I was looking at.
@khaduch That didnt work im looking at the assignment and it specifically callas for module.export = function (){...}
@bookofbash - this might not help, either, but on nodeschool/discussions#1304 one of the comments says:
The expression "module.exports" should be on the first line of your module and all the requirements inside the brackets.
I don't know if that is going to help?
@khaduch Thanks Im checking it out now
bookofbash sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3311 | @khaduch |http://www.freecodecamp.com/khaduch
evening fCC
:wave: Darren
@Gersho hey buddy
how goes it?
nothing much, slowing down a bit on the python/js because while it's fun, my react isn't making much progress
I hear yah
I'm always trying to learn a few too many things simultaneously
by the way, is there a way in gitter to mark all notification as read ? it's annoying when starting the day to have to go to each channel to cancel stuff i had no intention to read in the first place
you mean the 100 unread message?
yes, but for every rooms at once
mine has a x beside it and i can kill it that way
hmmm, be nice to have something for every room
good Q
that first one suggests you can change it
but when i go into configure defaults it doesn't come up as an option
you can change how it shows up or not, but i want it to show up as normal during the day, i just don't want to deal with 7 rooms to clear every day
maybe i should try switching the option before logging off, and turn it back when i log in
that third drop down option seems to make it go away
i'm gonna leave the room and if oyu type some stuff i can see if it gives me the count
is that so ?
seems to do it
i did it here and in the main room and it makes the 100 go away
and when your message came up it just showed as a dot with no number in it
@Gersho @DarrenfJ how can i get images aligned in a bootstrap col?
mind you, you lose the 'all notifications
ignore all the divs
lol
both are the same size i'll assume ?
yea
took a few day break from simon
@Gersho fyi this is what it looks like
i had tried with col but had to give up because i couldn't manage to get the centerpiece right
just the donut/dot
<body>
<div class="container">
<div id="bigCircle">
<div class="row">
<div class="col">
<div>
<img class="img-responsive" src="greenCircle.png" alt="Green Circle" style="float: left">
<img class="img-responsive" src="redCircle.png" alt="Green Circle" style="float: right">
</div>
<div class="col">
<img class="img-responsive" src="yellowCircle.png" alt="Green Circle" style="float: left">
<img class="img-responsive" src="blueCircle.png" alt="Green Circle" style="float: right">
</div>
</div>
</div>
</div>
<script>
cool i'll try Darren thanks tomorrow ^^ @DarrenfJ
gersho sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2047 | @darrenfj |http://www.freecodecamp.com/darrenfj
wait a sec that sentence makes no sense
i'll try tomorrow
@ericmiller777 you in bootstrap 4.0?
@ericmiller777 oh it's because you put both in the same one
@Gersho :D
bootstrap 3 but ill change to 4 if it will help
separate the 2 rows
naw. was gonna saw i don't know 4 enough
theres only 2 rows?
one div for each color, you'll use col twice as much
@ericmiller777 but apparently I don't know bootstrap either lol!
cause i thougth you had to define the size of each col
also why using an image ?
<div class="col">
no if you put no size it assumes all col are the same size
so if you have 2 it'll assume 6
you think I should just use a botton or a div?
and you can combo it with numbered ones , like col-1 + col + col + col-1 would have the 2 center col to be 5 each
i just cant get the shape right?
i went for a square div and border radius
oh
but let's say you keep images, the most important is the cols
like top left boardewre radius you can do right?
ah i thought you should define the size for everything
you know i will switch to that
but
thanks for the tip @Gersho
darrenfj sends brownie points to @gersho :sparkles: :thumbsup: :sparkles:
:cookie: 447 | @gersho |http://www.freecodecamp.com/gersho
I would like to know how to do this
you should do
first row
col .... col
second row
col ... col
rather than
both row
col...col
hangon a sec i'll need to recheck my code :P i'm not good enougth at css to know them perfect
<div class="col">
<div>
<img class="img-responsive" src="greenCircle.png" alt="Green Circle" style="float: left">
</div>
</div>
<div class="col">
<div>
<img class="img-responsive" src="redCircle.png" alt="Green Circle" style="float: right">
</div>
</div>
like that?
yeah, and the 2 other colors in another row (so there will be 2 "lines")
assuming green is the top left one
#green {
height: 245px;
width: 245px;
border-top-left-radius: 100%;
border-color: black;
border-width: 14px;
border-style: solid;
}
brb... puppies are demanding attention
well itll update in a sec
(coloration is in another class to allow color change on activation)
the images are not shrinking toi the size of the div tho....
yea i just remembered you can do the specific boarder radius's
thank you will make the project much easier
might be some conflict between imposed size, col and img-responsive i guess ? i'm not good at css :P
but these images driving me crazy
it could be i just made the buttons too big
i went for background color for each div
i know theres a way to do it tho
Ill probably make a button if i can
i don't use buttons much, i mostly use clickevent on divs
i mostly use buttons, its pretty much the same
yeah
as long as it gets the job done
@Gersho thanks
ericmiller777 sends brownie points to @gersho :sparkles: :thumbsup: :sparkles:
:cookie: 448 | @gersho |http://www.freecodecamp.com/gersho
@DarrenfJ thanks
ericmiller777 sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2048 | @darrenfj |http://www.freecodecamp.com/darrenfj
https://ericmiller777.github.io/Simon_Game_freeCodeCamp/ how can i center those buttons in the center.... I know i've done it before....
margin-top ? or margin alone ? something like that i guess
or having it's position dependant on it's parent (assuming the circle is parent)
I know it has somthing to do with that
i dont remember
maybe its just too late
well i haven't looked too much about how you did it, but margin-top should do the trick (prefer % values or it might not work when screen size changes)
@ericmiller777 You could use
margin-top: 20vh;
@Gersho thanks
ericmiller777 sends brownie points to @gersho :sparkles: :thumbsup: :sparkles:
:cookie: 452 | @gersho |http://www.freecodecamp.com/gersho
@JohnnyBizzel thanks
@ericmiller777 :+1:
@ericmiller777 Maybe revise these: https://www.w3schools.com/cssref/css_units.asp
@dkapexhiu
hi to all! how to make the footer full width?
<footer id="footer">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<center><div id="footerp"><p>© Copyright 2017</p></div></center>
</div>
</div>
</footer>
@dkapexhiu
since you are using bootstrap you can use cntainer-fluid as parent div
before row use container-fluid
@tiagocorreiaalmeida i have used it now without success
make sure that block is not nested nside a div.container
right click.. inspect element.. check the box model.. for padding or margins, if all ok.. then check its parent
right click.. inspect element.. check the box model.. for padding or margins, if all ok.. then check its parent
@dkapexhiu
<div class="container-fluid">
<section class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</section>
<section class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</section>
<footer class="row">
<div class="col"></div>
</footer>
</div>
@dkapexhiu example BS4 https://codepen.io/lydatech/pen/pWNrMr
@lydatech thank you very much
dkapexhiu sends brownie points to @lydatech :sparkles: :thumbsup: :sparkles:
:star2: 2467 | @lydatech |http://www.freecodecamp.com/lydatech
@ldocherty1 a jsfiddle would be very helpful yeah :)
sorry guys, got back late.. @Gersho @ericmiller777 just to finish the discussion.. i use click events on divs as well instead of buttons...
thanks for the disc.. gleaned some good tips @Gersho @ericmiller777
darrenfj sends brownie points to @gersho and @ericmiller777 :sparkles: :thumbsup: :sparkles:
:cookie: 302 | @ericmiller777 |http://www.freecodecamp.com/ericmiller777
:cookie: 453 | @gersho |http://www.freecodecamp.com/gersho
When I adjust my media query height % nothing happens to the height of my image. Is my max sizes correct?
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) {
.parallax {
height: 50%;
}
}
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767px) {
.parallax{
height: 70%;
}
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991px) {
.parallax{
height: 64%; }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199px) {
.parallax{
height: 75%; }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
.parallax{
height: 90%; }https://jsfiddle.net/srcdbyrm/
@ldocherty1 // is not valid CSS comment
your media queries are not closed (missing })
your media queries are not closed (missing })
@korzo I took out the comments. Can you show me with an example of the }} please?
@ldocherty1 Format for media queries is
@media (min-width: 992px) and (max-width: 1199px) {
}
@korzo Thanks it's working now :)
ldocherty1 sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 541 | @korzo |http://www.freecodecamp.com/korzo
https://codepen.io/santh/pen/qPbBjQ I added image on page four in css its not showing correctly
pls help me out
for all them people that helped me thanks so much I figured out the html entities so thanks @korzo and @thekholm80 you 2 open my eyes to how slow I am sometimes but helped me out a lot :) I even used your specialChars with a loop vs what you did @thekholm80 and used regex ;)
daddycardona sends brownie points to @korzo and @thekholm80 :sparkles: :thumbsup: :sparkles:
:cookie: 542 | @korzo |http://www.freecodecamp.com/korzo
:star2: 1481 | @thekholm80 |http://www.freecodecamp.com/thekholm80
hey guys, I'm trying to modify & implement some code off of this tutorial site (https://code.tutsplus.com/tutorials/create-an-html5-canvas-tile-swapping-puzzle--active-10747) for my 3 match game for the tile swap functionality. All was going well until I tried to implement the onPuzzleClick() function, where I'm running into issues with the drawImage method within the function (error says that the input is of incorrect type, basically that the input type is not an image). I've tried to fix this several ways but nothings panned out so far. Please help me understand how to fix this :grinning:
Here's my code: https://codepen.io/AmitP88/pen/pWyaNY?editors=0010
Here's my code: https://codepen.io/AmitP88/pen/pWyaNY?editors=0010
@daddycardona Good job :+1:
anyone know whats wrong with my code?
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
h2 {
font-family: Lobster, Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-xs-8">
<h2 class="text-primary text-center">CatPhotoApp</h2>
</div>
<div class="col-xs-4">
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "></a>
</div>
</div>
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera. ">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
</div>
</div>
<p>Things cats <span class="text-danger">love:</span></p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<div class="row">
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
</div>
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Loving</label>
</div>
<div clas="col-xs-4">
<label><input type="checkbox" name="personality"> Lazy</label>
</div>
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Crazy</label>
</div>
</div>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
@23beyblade can you put it in a codepen please?
ill try, not sure how, its been a hile
while*
@23beyblade Which test fails?
@23beyblade if you have a GitHub or Google account you should be able to login np
ok im tyring to
um
put the
check boxes in rows
like useing col-md-*
you are not using the boostrap link for
col-xs-8
@23beyblade
ok thanks @daddycardona
23beyblade sends brownie points to @daddycardona :sparkles: :thumbsup: :sparkles:
:cookie: 347 | @daddycardona |http://www.freecodecamp.com/daddycardona
and thanks @AmitP88
@23beyblade np :)
sorry i dont know if it sent points
@23beyblade no worries :)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
hey guys, I'm trying to modify & implement some code off of this tutorial site (https://code.tutsplus.com/tutorials/create-an-html5-canvas-tile-swapping-puzzle--active-10747) for my 3 match game for the tile swap functionality. All was going well until I tried to implement the onPuzzleClick() function, where I'm running into issues with the drawImage method within the function (error says that the input is of incorrect type, basically that the input type is not an image). I've tried to fix this several ways but nothings panned out so far. Please help me understand how to fix this :grinning:
Here's my code: https://codepen.io/AmitP88/pen/pWyaNY?editors=0010
Here's my code: https://codepen.io/AmitP88/pen/pWyaNY?editors=0010
I always use these but I am going to try to start using bootstrap 4 since its up now
ok ty
@daddycardona I'm glad you figured it out
winning feels good
any expert here looking to earn quick 5$ to help me fix error?
this is not a service support chat as far as I know beside that
show us the issue you have andif we can help it will be for no cust
This website http://wefunds.nyc/
it opens menu on mobile device
but it doesnt close it
how do i fix it?
done it in bootstrap
dont know if you used toggle
but that's a way
i did as you can see in code, but for some reason it doesn’t work
confusing sure isnt anything overwritting what you did?
@daxdax89 collapse and in are 2 different classes?
@daxdax89
yeah those are two different ones
I made it with one way
maybe not the best xd
and will make a simple solution into 5 lines of code
so there must be something wrong here
you writed the code for the click on the button or you used something like bs?
if you writted it can you show me?
@tiagocorreiaalmeida you wrote it and it worked for you ?
hey guys
so i made this for my simon game using javascript/jquery
how could i still get that div in the center like that with css?
and keep it responsive
also @DarrenfJ thanks, but its really the same, as a buttons in a div, just I like the way the buttons look
ericmiller777 sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2049 | @darrenfj |http://www.freecodecamp.com/darrenfj
Hello everyone
:wave:
@Gersho hello
i got that div in the center
using javascript
cant figure out how to do it with css
links updateing btw
is it updated now ?
yea
but ive noticed my resize doesnt position it correctly if the screen height is different
like mobile it only works in landscape
on my screen, it's a bit too much down, and even more down if i reduce width (with same height)
yes
any idea how to do the same thing with css\
how did you do it for the buttons ? the same methode doesn't work ?
i pretty much gave up yesterday, erased a loty today, and it just worked lol
i need the
middle div to go over the
buttons
so i know
i can use z position for that
lets see
isn't z index the one for superposition ?
the best i think would be to have the position of the menu dependant on the position of the simon
idk i used it for a nav bar once and it kept it at the top of the page
on top of everything
how do i make that not happen
how do i make a dif that doesnt change my other divs
x-index btw
z-index
lol
you know what
hmm?
that's what happened when i had tried to do it in columns
i suck?
told you i had given up on it and ended up doing it in fixed
because i couldn't fix that xD
i see
there's surely a solution
but i don't know it
well i got it a little better
looks like it, would it work if you changed it's margins padding and stuff to make it "move" ?
using relative values it might survive size change
work for you?
yep, even on rescaling (the whole thing become smaller if width is reduced)
@Gersho thanks
ericmiller777 sends brownie points to @gersho :sparkles: :thumbsup: :sparkles:
:cookie: 454 | @gersho |http://www.freecodecamp.com/gersho
now for the hard part
we can see the squares of each button when we click
yea
i think theres a easy way to fix that
im gonna take a break
yeah walk away from the css when you can xD