These are chat archives for FreeCodeCamp/HelpFrontEnd

2nd
Apr 2018
Liam Docherty
@ldocherty1
Apr 02 2018 01:57

If you download my GitHub repo you can see it looks nothing like what is displayed on my GitHub pages on the safari browser.

I have deleted the repo and updated all the files. However, I'm having no luck, what should I do to fix this?

Locally when hosted my site homepage displays like this
https://ibb.co/gbgbEn

When hosted on gut pages it looks like this
https://ibb.co/eWsiun

Sorin Ruse
@sorinr
Apr 02 2018 02:49
@ldocherty1 check the links to the images.
Sorin Ruse
@sorinr
Apr 02 2018 03:47
@ldocherty1 it seems you get an 404 not found error when trying to load your css files
Ken Haduch
@khaduch
Apr 02 2018 04:11
@ldocherty1 - still having trouble? I cannot find your github repo to try and download it to see what it looks like... Or at least I'm getting some 404 error when I try to look at https://github.com/ldocherty1/ldocherty1.github.io Maybe you changed it, but there are console errors when I try to access that page?
coderNewby
@coderNewby
Apr 02 2018 04:23
@DarrenfJ thanks for the reply.. answered some Q's I had :D
CamperBot
@camperbot
Apr 02 2018 04:23
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2447 | @darrenfj |http://www.freecodecamp.org/darrenfj
Raghav Mundra
@Raghav17
Apr 02 2018 07:40
Hi!
If I want to change the colour of my div for 3 seconds and change it back to normal how can I do that using javascipt? I tried this but it isn't working.
$("#2").animate({
        "background-color": "white"
    })
    .delay(3000)
    .animate({
        "background-color": "blue"
    }, 1000);
Claudio Restifo
@Marmiz
Apr 02 2018 08:32

@Raghav17 You don't need JS to do stuff like this: CSS3 supports animations :)
You can set an animation using keyframes:

/* apply your animation to a class and add a duration */
.my-class {
  animation: NAME-YOUR-ANIMATION 3s
}

/* my animation definition */
@keyframes NAME-YOUR-ANIMATION {
  0%   { background-color: red; }
  50%  { background-color: blue; }
  100% { background-color: red; }
}

Or you can use transition if you want to react to specifics events (eg change color for 3 seconds after a hover or click)

Ehsan Shadmehri
@ehsansh
Apr 02 2018 08:46
hi, I am learning Full Stack Web App using Vue.js & Express.js by freeCodeCamp I have a problem when I send post request from client to server in cmd I could see the post request is received but I see this error in client page POST http://localhost:8081/register 404 (Not Found) what is the solution?
Tiago Correia
@tiagocorreiaalmeida
Apr 02 2018 08:47
well you are making a request to a route that's not handled by your server
Ehsan Shadmehri
@ehsansh
Apr 02 2018 08:48
I have written this code in my server app.js file app.get('/register',function(req,res){ console.log('post comes') res.send({ message:'hello world' }) })
Tiago Correia
@tiagocorreiaalmeida
Apr 02 2018 08:49
get and post are not the same thing :D
Ehsan Shadmehri
@ehsansh
Apr 02 2018 08:50
Oh, what a mistake! I did not see that. Thans a lot :)
Tiago Correia
@tiagocorreiaalmeida
Apr 02 2018 08:50
no worries, we all ahve been there :D
habibaatify
@habibatify_twitter
Apr 02 2018 09:09
Capture.PNG
callange.PNG
what is wrong
?
why it not working?
Tiago Correia
@tiagocorreiaalmeida
Apr 02 2018 09:10
can I see the code?
that is code
abraham anak agung
@padunk
Apr 02 2018 09:14
@habibatify_twitter as i remember, you need\SecondLine\, so you missed couple of \\
habibaatify
@habibatify_twitter
Apr 02 2018 09:18
thanks
Liam Docherty
@liamdocherty
Apr 02 2018 10:04

@khaduch Hi, I'm still having trouble.

hosted my site homepage displays like this
https://ibb.co/gbgbEn

When hosted on git pages it looks like this
https://ibb.co/eWsiun

https://github.com/liamdocherty/liamdocherty.github.io

Could it have something to do with these console errors? I have no idea how to fix them though.

liamdocherty.github.io/:108 Mixed Content: The page at 'https://liamdocherty.github.io/' was loaded over HTTPS, but requested an insecure image 'http://www.coolhdwallpapers.net/gallery/adidas-logo-black-background-wallpaper.jpg'. This content should also be served over HTTPS.
liamdocherty.github.io/:113 Mixed Content: The page at 'https://liamdocherty.github.io/' was loaded over HTTPS, but requested an insecure image 'http://www.gsfdcy.com/data/img/67/1913982-polo-wallpaper.jpg'. This content should also be served over HTTPS.
liamdocherty.github.io/:14 GET https://liamdocherty.github.io/css/animate.css net::ERR_ABORTED
liamdocherty.github.io/:15 GET https://liamdocherty.github.io/bower_components/Morphext/dist/morphext.css net::ERR_ABORTED
liamdocherty.github.io/:20 GET https://liamdocherty.github.io/CSS/design.css net::ERR_ABORTED
liamdocherty.github.io/:21 GET https://liamdocherty.github.io/CSS/media_queries.css net::ERR_ABORTED
liamdocherty.github.io/:224 GET https://liamdocherty.github.io/JS/smooth-scroll-master/dist/js/smooth-scroll.js net::ERR_ABORTED
liamdocherty.github.io/:226 GET https://liamdocherty.github.io/JS/javascript.js net::ERR_ABORTED
(index):224 GET https://liamdocherty.github.io/JS/smooth-scroll-master/dist/js/smooth-scroll.js net::ERR_ABORTED
Sorin Ruse
@sorinr
Apr 02 2018 10:14
@liamdocherty changing <link href="CSS/design.css" rel="stylesheet"> into <link href="css/design.css" rel="stylesheet"> solves your links problem. same for media_quries.css file
Sorin Ruse
@sorinr
Apr 02 2018 10:20
@liamdocherty just take care of the url's case sensitivity :)
Liam Docherty
@liamdocherty
Apr 02 2018 10:23
@sorinr What a silly error on my part sorry. Thanks 2 both of you @sorinr @khaduch
CamperBot
@camperbot
Apr 02 2018 10:23
liamdocherty sends brownie points to @sorinr and @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1412 | @sorinr |http://www.freecodecamp.org/sorinr
:star2: 3842 | @khaduch |http://www.freecodecamp.org/khaduch
Sorin Ruse
@sorinr
Apr 02 2018 10:25
@liamdocherty :+1:
habibaatify
@habibatify_twitter
Apr 02 2018 11:42
Capture.PNG
what is wrogn?
wrong?
Stephen James
@sjames1958gm
Apr 02 2018 11:45
@habibatify_twitter I imagine that the test is expecting you to assign the result of .pop to the variable.
It ends up being the same but some of the test checking is fairly specific
habibaatify
@habibatify_twitter
Apr 02 2018 11:47
no
it not working
Dmytro Holysh
@dmk1111
Apr 02 2018 11:48
@habibatify_twitter just try to refresh the page & run tests again
Stephen James
@sjames1958gm
Apr 02 2018 11:49
Like this?
// Only change code below this line.
var removedFromMyArray = myArray.pop();
habibaatify
@habibatify_twitter
Apr 02 2018 11:49
i did not working
thanks @sjames1958gm
CamperBot
@camperbot
Apr 02 2018 11:52
habibatify_twitter sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9158 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
tundeiness
@tundeiness
Apr 02 2018 13:06
any help with this?
https://codepen.io/highness/pen/LjBZgr?editors=1111
last challenge is to move all the search result as close as possible to the search icons
class container holds the search output and the wrap class. So what I did was to animate the wrap class so that it will go to the top of the container anytime i press the search icon. but the challenge right now is how to move the result closer to the top like the wrap class. Any heads up?
Tiago Correia
@tiagocorreiaalmeida
Apr 02 2018 13:44
image.png
are those real statements?
YuanLai
@AUROCHSY
Apr 02 2018 13:51
I can use google and youtube now,which means I successfully get through the internet firewall,but I can not still load this video...Is it important?
image.png
It is the video of the first project
Tiago Correia
@tiagocorreiaalmeida
Apr 02 2018 13:53
can you open youtube?
YuanLai
@AUROCHSY
Apr 02 2018 13:53
yes
image.png
image.png
And the speed is not bad
YuanLai
@AUROCHSY
Apr 02 2018 13:54
oh,thank you very much,it is very kind of you
Tiago Correia
@tiagocorreiaalmeida
Apr 02 2018 13:55
freecodecamp has all the videos around youtube so just check their chanel the next time you need a new one
YuanLai
@AUROCHSY
Apr 02 2018 13:56
OK,I got it.
Quantomistro3178
@Quantomistro3178
Apr 02 2018 14:00
so, the fcc weather API doesn't always give a link for the icon/image related to the weather, so is it ok as it is or....?
idk what to do. the image shows up in my weather app when the link is provided
so i know that my code works
?
Stephen James
@sjames1958gm
Apr 02 2018 14:15
@Quantomistro3178 If the API sometimes doesn't give an icon, for those cases you just don't show one.
This is somewhat real world where an API isn't always correct but your code should handle that case.
Liam Docherty
@liamdocherty
Apr 02 2018 14:45

Why isn't my navbar appearing on my website? I have reviewed my HTML, CSS AND JS and can't seem to identify the problem.

https://github.com/liamdocherty/liamdocherty.github.io

https://liamdocherty.github.io

HTML

  <!-- Navigation bar -->
 <nav class="navbar scrolled-nav navbar-expand-md fixed-top navbar-dark bg-dark">
   <a class="navbar-brand" href="#">Front End Web Developer</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar7">
        <span class="navbar-toggler-icon"></span>
        </button>
   <div class="navbar-collapse collapse justify-content-stretch" id="navbar7">
     <ul class="navbar-nav ml-auto">
       <li class="nav-item active"> <a class="nav-link" href="#home.html">Home</a>
       </li>
       <li class="nav-item active"> <a class="nav-link" href="#about.html">About</a>
       </li>
       <li class="nav-item active"> <a class="nav-link" href="#portfolio.html">Portfolio</a>
       </li>
       <li class="nav-item active"> <a class="nav-link" href="#about.html">Price</a>
       </li>
       <li class="nav-item active"> <a class="nav-link" href="#contact.html">Contact</a>
       </li>
     </ul>
   </div>
 </nav>

CSS

/*==================================
=           navbar                 =
==================================*/

.navbar {
  display: none;
  background-color: #f7f7f7;
}

nav ul li a {
  font-family: Montserrat, Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  color: #000;
}

nav ul li:after {
  text-decoration: underline;
  color: #000;
}

.navbar-brand {
  text-transform: uppercase;
  color: #000;
}

.abs-center-x {
  position: absolute;
  left: 50%;
  transform: translateX(-50);
}

.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

JS

var scroll = new SmoothScroll('a[href*="#"]');

jQuery(document).ready(function($) {


    $(document).on("scroll", function() {
        const features_top = $(".features-icons").position().top;
        const top_of_window = $(window).scrollTop();

        if (top_of_window >= features_top) {
$('.navbar').css('display', 'flex') // display: flex
        } else {
            $(".navbar").hide();
        }
    });
});
Ian
@toianw
Apr 02 2018 14:56
@liamdocherty Your .navbar has display: none; applied on line 126 of the design.css file
First react Page :O
rk
@rajkumart08_twitter
Apr 02 2018 15:01

hi,

  • I am new to kendo ui
  • I am trying to display a text box on the first column heading.
  • In the place of checkboxDisplay heading I need to replace with a text box.
  • can you tell me how to fix it.
  • providing my code below.

http://jsfiddle.net/on7zbd43/

```


    columns: [{
        field: "checkboxDisplay",
        title: "checkboxDisplay",

        template: "# if ('new' =='new') { # <input id = 'checkIDGrid' type='checkbox' checked=true class=''> # }else{# <span class='oldEventArrow'></span> #} #"


      },
```
rk
@rajkumart08_twitter
Apr 02 2018 16:13

Hi,

  • I am learning angular2.
  • during the initial page loads I need to change the add/edit prefrence color.
  • can you tell me how to fix it.
  • I googled for the load event..
  • but I am not able to find out anything.
  • providing my code below.

https://stackblitz.com/edit/angular-zddcxy?file=app/app.component.html

 public loadColor() {
      console.log('this.changeColor--->');
  }
    <span id="open1" (click)="loadColor()">add/edit prefrence</span>
Liam Docherty
@liamdocherty
Apr 02 2018 16:37

@toianw It was meant to be like that as it is meant to be hidden on section one. I found out what the issue was, it was to do with the following

<script src="js/smooth-scroll-master/dist/js/smooth-scroll.js"></script>
<script src="js/javascript.js"></script>

Thanks for the help anyway :)

CamperBot
@camperbot
Apr 02 2018 16:37
liamdocherty sends brownie points to @toianw :sparkles: :thumbsup: :sparkles:
:cookie: 513 | @toianw |http://www.freecodecamp.org/toianw
Ehsan Shadmehri
@ehsansh
Apr 02 2018 17:20

hi, what is the problem with my code:

const {User} = require('../models')

module.exports = {
    async register(req,res){
        try{
            const user = await User.create(req.body)
            res.send(user.toJSON())
        }catch (err){
            res.status(400).send({
                error:'This email is already in use'
            })
        }
    }
}

It gives an error for register function. Unexpected identifier.

Ehsan Shadmehri
@ehsansh
Apr 02 2018 17:26
My node version is 6.9.2 . it seems it is because of the node version. How could I update node on windows?
Nazar
@IsaakNazar
Apr 02 2018 17:29
@ehsansh download and install
the easiest single way
Kaz Baig
@kbaig
Apr 02 2018 17:30
@ehsansh async await is supported by 7.10.1 and above
Zebralight
@zebralight
Apr 02 2018 17:54
hello. I was wondering how I can configure an element such that its height isn't resized based on its child element:https://jsfiddle.net/3xthm5ss/1/
Kaz Baig
@kbaig
Apr 02 2018 17:55
@zebralight You could assign it a fixed height
Zebralight
@zebralight
Apr 02 2018 17:57
@kbaig thanks!
CamperBot
@camperbot
Apr 02 2018 17:57
zebralight sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 585 | @kbaig |http://www.freecodecamp.org/kbaig
Ehsan Shadmehri
@ehsansh
Apr 02 2018 18:34
@IsaakNazar @kbaig Thanks
CamperBot
@camperbot
Apr 02 2018 18:34
ehsansh sends brownie points to @isaaknazar and @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 586 | @kbaig |http://www.freecodecamp.org/kbaig
:cookie: 323 | @isaaknazar |http://www.freecodecamp.org/isaaknazar
Kaz Baig
@kbaig
Apr 02 2018 18:39
@ehsansh fyi http://node.green/
Onome Sotu
@onomesotu
Apr 02 2018 20:05
Hey guys, I am working on this exact exchange on advanced algorithm scripting
When I reduce the cid array to get the cash in drawer, it doesnt round up the significant figures accurately
for example, 1.01 + 2.05 returns 3.05999999996 instead of just 3.06
can someone explain this?
please?
Ken Haduch
@khaduch
Apr 02 2018 20:15
@onomesotu - I would recommend converting your values to whole integer units, that would be cents (pennies) in this case, and doing all the calculations without any possibility of floating point interferences...
Aditya
@ezioda004
Apr 02 2018 20:28
@onomesotu Thats because of something called floating point arithmetic. Since computers only understand 0's and 1's (base 2) it's hard for them to compute any decimals which arent in that base. Example for us (base 10) to write 1/3 we have to do 0.33333333 recurring digits and computers dont understand recurring digits either.
rk
@rajkumart08_twitter
Apr 02 2018 20:51
  • if I move text three before the input tag the check box is not disaappearing when I click third time.
  • but when I keep text three after input tag it works fine.
  • can you tell me how to fix it.
  • providing my code below
https://stackblitz.com/edit/angular-w6tqvn?file=app/app.component.html

<label [ngClass]="{'is-multiple-of-3':multipleOf3}">
    <span  id="redSquare"></span>
three
<input type="checkbox" name="rememberLogin" id="buttonId"  (click)="open()"> 
</label>
Onome Sotu
@onomesotu
Apr 02 2018 20:52
@khaduch @ezioda004 thanks guys.. I am just reading up on it
CamperBot
@camperbot
Apr 02 2018 20:52
onomesotu sends brownie points to @khaduch and @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 521 | @ezioda004 |http://www.freecodecamp.org/ezioda004
:star2: 3843 | @khaduch |http://www.freecodecamp.org/khaduch
Brad
@bradtaniguchi
Apr 02 2018 20:54
@rajkumart08_twitter I don't understand the issue you are facing from just the demo
Oh I understand, Its pretty obvious, the checkbox doesn't disappear at all, your red box covers it only when its on the left.
rk
@rajkumart08_twitter
Apr 02 2018 21:00
@bradtaniguchi can you update in stackblitz its so confusing :(
Brad
@bradtaniguchi
Apr 02 2018 21:01
@rajkumart08_twitter I don't know what you want, or expect to happen.You only stated what is currently happening.
rk
@rajkumart08_twitter
Apr 02 2018 21:06
@bradtaniguchi can you tell me how to achieve this one -----> if I move text three before the input tag the check box is not disaappearing
Brad
@bradtaniguchi
Apr 02 2018 21:07
@rajkumart08_twitter Cuse it doesn't ever disappear in the first place. Do you want to really hide it with display: none?
John Brann
@jdbrann
Apr 02 2018 21:30
Hi all- I am a definite newbie and I am working on completing my "Personal Portfolio Page" for the Basic Front End of FCC. I know this may be rough compared to some of the others I have seen but would like some feedback if possible. I feel like I am really struggling with the "look of my code" and still have very rough understanding of what I am doing. I felt like it was a big leap from the "challenges" I was completing at FCC to the actual project and felt like I was unprepared. But here you go feedback is welcome. https://codepen.io/jdbrann1972/pen/wmPGda
Brad
@bradtaniguchi
Apr 02 2018 21:39
@jdbrann Hello, I dislike the green blue color scheme, they seem "off" to my eyes, have you ever thought of using different colors so the complement each other better? Also parts of the page are grey, which I dislike. The employmet portfolio section looks very clean, and I think that part of the site is better than the rest. (align the read more buttons if possible)
just some quick things I noticed when looking
John Brann
@jdbrann
Apr 02 2018 21:42
Thanks @bradtaniguchi I appreciate the feedback. I will change the colors for sure. ...
CamperBot
@camperbot
Apr 02 2018 21:42
jdbrann sends brownie points to @bradtaniguchi :sparkles: :thumbsup: :sparkles:
:cookie: 442 | @bradtaniguchi |http://www.freecodecamp.org/bradtaniguchi
Brad
@bradtaniguchi
Apr 02 2018 21:43
@jdbrann I'm terrible with colors, I usually try to stick with color schemes defined by someone else (client, or otherwise)
include*engine
@newtothat
Apr 02 2018 21:47
how long it takes to come to portfolio page
how long it took you ?
Brad
@bradtaniguchi
Apr 02 2018 21:52
@newtothat I never really did the portfolio page officially, I already made one a while back and just linked that one (it used angularjs, was a github.io project) I got it 80% and said screw it.
Ken Haduch
@khaduch
Apr 02 2018 22:20

@jdbrann - welcome "newbie"! :) and I agree with you that the portfolio seems like a very large leap from the simple pages and basic concepts in the lessons. But the good thing about it is that as you go along and learn more, you can always come back and refine it. It's good to get some basics down and plan to revisit it, there's a lot to learn and you do pick up tips from other pages that you look at, especially once you have experienced creating a few yourself. Not to say that it gets easy really fast, but you just have to take it step-by-step.

I have a few comments about your page. The color scheme is not bad for my eye, but maybe I don't have a great eye for that. There are tools out there that can help you select color palettes, like Adobe's color wheel.
Another thing that I would recommend (I think that it is generally recommended), for better readability, is to limit the width of the text content on the page. For example, I opened your page on a wide screen and your "About" section fits on one line spanning the entire screen. There are readability guidelines (which I haven't read in a while) but they would recommend something like 80 characters max width. You can set up your page to have a central section that limits the width in a couple ways. Since you have Bootstrap, you could use the grid to control the width. I would try to apply the same principles to the section with the references - the images should be smaller in general, I would say, and it would look better if those sections were centered when they shift to a single column.

The last thing that I would like to mention now is that when you are using CodePen, the various sections of the code should be placed in the appropriate boxes. For example, your bootstrap.css and font-awesome.css should be entered in the CSS panel config box in the external stylesheets area. None of the <!DOCTYPE, <html>, <head> and <body> tags should be in the HTML panel. There are places in the HTML config for some of those head items, and the major page sections tags are supplied by the CodePen template. You can read more about it here And here. If you're just cutting and pasting into CodePen from your own editor, then maybe you don't want to bother, as long as your page displays well on all devices. Also it is best to avoid inline style attributes, it makes it harder to make changes to the page if you have to. Better to define some CSS classes and use those to style the various elements, it makes it a lot easier to be consistent throughout the document.

I hope that helps - it's definitely an ongoing project to develop these pages, looks like you have a lot of great material and a good start to getting it together...

zootechdrum
@zootechdrum
Apr 02 2018 22:55
function findLongestWord(str) {

  var longest = 0;
  var changedStr = str.split(' ');

for(var i = 0; i < str.length; i++){

}  
 console.log(changedStr[i].length);
}
findLongestWord("hel00 yoiii cool");
VM168:9 Uncaught TypeError: Cannot read property 'length' of undefined
at findLongestWord (<anonymous>:9:28)
at <anonymous>:11:1
Why am i getting the message on the bottom?
i am using the console in chrome to type in the function
Brad
@bradtaniguchi
Apr 02 2018 22:58
@zootechdrum Your console log uses i, but its outside of the for loop
so there is no i, thus i is undefined
Idk about your error tho, seems like its related to something else. Something might not be coming as expected ( can you printout str before the for loop?)
zootechdrum
@zootechdrum
Apr 02 2018 23:00
the main thing i want to do is get the length of the index that var i is on. For whatever reason I get an error saying cant get length of unde
@bradtaniguchi
Brad
@bradtaniguchi
Apr 02 2018 23:01
Oh ok yea
zootechdrum
@zootechdrum
Apr 02 2018 23:01
I tried this too

function findLongestWord(str) {

var longest = 0;
var changedStr = str.split(' ');

for(var i = 0; i < str.length; i++){
changedStr[i].length;
}

}

findLongestWord("hel00 yoiii cool");

Brad
@bradtaniguchi
Apr 02 2018 23:01
My original mention of this code: changedStr[i].length doesnt work
I think your string.length is off by 1
zootechdrum
@zootechdrum
Apr 02 2018 23:02
function findLongestWord(str) {

  var longest = 0;
  var changedStr = str.split(' ');

for(var i = 0; i < str.length; i++){
  changedStr[i].length;
}  

}

findLongestWord("hel00 yoiii cool");
let me see
Brad
@bradtaniguchi
Apr 02 2018 23:03
if your string was coolthe length is 4, but if you do changeString[4] its undefined, as thats the 5th spot
zootechdrum
@zootechdrum
Apr 02 2018 23:05
i think you might be on to something lo
l
Brad
@bradtaniguchi
Apr 02 2018 23:11
But then i < str.length wont work :/
so I might be wrong :/
Just double checked, it should work, BUT I noticed your trying to update the changedStr variable.
That's incorrect, since if you provide just 1 word, but your checking against the length of the string it will break
so your example has changedStr = ['hel00', 'yoii', 'cool']; so its length is just 3
but the str length is like 15 or so
UnorthodoxThing
@UnorthodoxThing
Apr 02 2018 23:21
Hello, does anyone know how to make a checkbox dropdown menu and checkbox dropdown submenu alltogether? I'm having a difficult time. :(
Brad
@bradtaniguchi
Apr 02 2018 23:24
@UnorthodoxThing Are you using a framework or trying to do this from scratch?
can someone help me ... i screwed up again .. i'm trying to get the "Search Wikipedia" button to the right of the form and put them in the center of the page under the title..... :worried:
grid system is confusing me :anguished:
UnorthodoxThing
@UnorthodoxThing
Apr 02 2018 23:30
@bradtaniguchi What do you mean by a 'framework'? I think mostly from scratch. I tried learning from a video online. I also be CSS and HTML only. This is what I've got so far... https://codepen.io/UnorthodoxThing/pen/oENvEX
Brad
@bradtaniguchi
Apr 02 2018 23:33
@UnorthodoxThing Well if you mean you want to make a dropdown with checkboxes in it I think you will need to create it from scratch using JS and css
If you don't or cant use JS for this, then you probably have to rely more on what html provides ( they have a multiselect option for select)
@JoEeeezy_twitter let me see
JoEezy
@JoEeeezy_twitter
Apr 02 2018 23:39
i changed it since @bradtaniguchi i ended up copying this code and modifying it https://i.imgur.com/XgEaWb3.png
i'm not sure if it works because of the form-inline class but i could've swore i've tried that before...
Brad
@bradtaniguchi
Apr 02 2018 23:40
If the form tag scares you, you can always change it to something else.
JoEezy
@JoEeeezy_twitter
Apr 02 2018 23:42
i think it's just that i'm confusing it with the input tag
John Brann
@jdbrann
Apr 02 2018 23:44
@khaduch Wow that was some great feedback and things I can look up and read up on more. I kinda feel I rushed in to making the page and maybe bit off more than I can chew without seeking out more training first but your feedback did a great job of highlighting some of the misses (I took notes down to look up your suggestions/"how to do...")that will help me grow and that is what I needed! Thanks!!!
CamperBot
@camperbot
Apr 02 2018 23:44
jdbrann sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3844 | @khaduch |http://www.freecodecamp.org/khaduch
Brad
@bradtaniguchi
Apr 02 2018 23:52
@JoEeeezy_twitter Just remember the form tag will try to "submit" to a backend if the user hits enter, or clicks on a button that isn't type="button"
JoEezy
@JoEeeezy_twitter
Apr 02 2018 23:55
@bradtaniguchi thanks , i was wondering why the button kept refreshing the page even though i hadn't set it up in js yet :smile:
CamperBot
@camperbot
Apr 02 2018 23:55
:cookie: 443 | @bradtaniguchi |http://www.freecodecamp.org/bradtaniguchi
joeeeezy_twitter sends brownie points to @bradtaniguchi :sparkles: :thumbsup: :sparkles:
Brad
@bradtaniguchi
Apr 02 2018 23:56
@JoEeeezy_twitter Yea you will need to override that behavior haha