These are chat archives for FreeCodeCamp/HelpFrontEnd

18th
Aug 2018
Jesse
@ki4jgt
Aug 18 2018 08:49

Hey guys, I have a problem:
I need to make the rest of a site's pages look like this: http://jakewakefieldtarot.com/blog/

So, I've been fiddling around with this stupid navbar all night, trying to evenly space the td elements within a table: https://codepen.io/ki4jgt/pen/vaowRG

I tried table-layout: fixed; but it's not working. All the td elements are left-aligned. What am I doing wrong?

Rogério Dalot
@Dalot
Aug 18 2018 08:51
Hey @ki4jgt
Jesse
@ki4jgt
Aug 18 2018 08:51
@Dalot Yeah?
Hey.
Rogério Dalot
@Dalot
Aug 18 2018 08:52
Try to apply a class to tr and then to this class you apply a display flex
Plus justify-content:center
Jesse
@ki4jgt
Aug 18 2018 08:53
That's not working either.
Rogério Dalot
@Dalot
Aug 18 2018 08:55
oh sorry
remove the class
Jesse
@ki4jgt
Aug 18 2018 08:55
@Dalot Nothing to be sorry about. Just did. Thanks for your help.
Rogério Dalot
@Dalot
Aug 18 2018 08:55
and apply those properties to navbar
Jesse
@ki4jgt
Aug 18 2018 08:57
@Dalot That just centers the cells within the table. It doesn't make them equal width.
Rogério Dalot
@Dalot
Aug 18 2018 09:01
oh okay
wait a second
Jesse
@ki4jgt
Aug 18 2018 09:02
I think Bootstrap is messing with the code in some way but I'll wait.
Rogério Dalot
@Dalot
Aug 18 2018 09:02
oh you are using bootstrap
yes
Jesse
@ki4jgt
Aug 18 2018 09:03
Yes.
Rogério Dalot
@Dalot
Aug 18 2018 09:03
the best way to do this, if you want to keep bootstrap is just to search for their documentation
they surely have a class
to properly space out these guys
Jesse
@ki4jgt
Aug 18 2018 09:04
I've searched Google and everything. If there is, my Google-fu is horrid.
look at the third example
It might be what you are looking for
is that what you were looking for @ki4jgt
?
Jesse
@ki4jgt
Aug 18 2018 09:12
Completely. Thank you. What all did you do?
I'll read your code and find thank you though.
Rogério Dalot
@Dalot
Aug 18 2018 09:13
I just followed the bootstrap docs
And I kind erased what you had was just being overwritten of overriding bootstrap
or overriding*
So, yes you were right when you said that "bootstrap" was messing up your code
Jesse
@ki4jgt
Aug 18 2018 09:15
Well, that was a few hours I'll never get back. Gotta start reading the docs more clearly.
Rogério Dalot
@Dalot
Aug 18 2018 09:15
now you just have to play along to put those border you wanted and maybe to contain the table width
Oh do not worry about those hours
Jesse
@ki4jgt
Aug 18 2018 09:15
:D.
Rogério Dalot
@Dalot
Aug 18 2018 09:16
Believe me
I already spent those long hours with "stupid" things
it just makes part of the learning process
:D
Jesse
@ki4jgt
Aug 18 2018 09:17
Well thanks again. You're a lifesaver. I've been really busy around my house as of late -- have family moving and I've had to pack boxes. I was supposed to have this done for my client a couple days ago but couldn't get to it. Told him I'd have it by today.
Abhi
@abhigk
Aug 18 2018 09:30
Is front end dev certification divided into sections? as there are different certificates in front end curriculum
Rogério Dalot
@Dalot
Aug 18 2018 09:59
@ki4jgt Wish you good luck! If you get stuck again just ask here for help :P
@abhigk I am not sure if you are asking for official certificates but if you are asking about FCC yes, Certificates are divided into sections. Back in my time ,you had at least front-end and back end certificate
@abhigk I am not sure how it is divided at the moment
Abhi
@abhigk
Aug 18 2018 10:01

@abhigk I am not sure if you are asking for official certificates but if you are asking about FCC yes, Certificates are divided into sections. Back in my time ,you had at least front-end and back end certificate

Yes I also remember, earlier there were only 3 certificates

Aditya
@ezioda004
Aug 18 2018 11:16
@abhigk You can still get previous legacy certs (frontend, backend and data viz) by just completing the required projects, go to your profile and you'll see these certs and required projects for them.
Rob
@PGFracing
Aug 18 2018 12:45
www.pgfracing.com/wisdom.html (why don’t I have a black border at the bottom of this image?
alpox
@alpox
Aug 18 2018 17:31
@PGFracing I do see a black border on the bottom
Oros Alexandru
@AlexOros
Aug 18 2018 18:41
@PGFracing
In chrome and firefox I see a bottom black border
Ivan Ngundela
@ingundela
Aug 18 2018 18:43
Screen Shot 2018-08-18 at 20.42.51.png
Hi everyone, Please help me..I’m stuck here with this error:
Screen Shot 2018-08-18 at 20.41.24.png
Screen Shot 2018-08-18 at 20.41.24.png
This is the forkify project
Screen Shot 2018-08-18 at 20.43.56.png
looking around to see what is wrong with my code for hour but don’t find it… may you please help me.. I’m following exactly the same code as the lesson..
Ghost
@ghost~59209a78d73408ce4f6102e8
Aug 18 2018 18:55
@ingundela ca n you paste all of the code
Ivan Ngundela
@ingundela
Aug 18 2018 18:56
@willybeans Hi...
Screen Shot 2018-08-18 at 20.56.00.png
Thanks
Ghost
@ghost~59209a78d73408ce4f6102e8
Aug 18 2018 18:56
can you please not send images
Ivan Ngundela
@ingundela
Aug 18 2018 19:00

``
import Search from './models/Search';
import * as searchView from './views/searchView';
import { elements } from './views/base';

const state = {};

const controlSearch = async () => {
// 1) Get query from view
const query = searchView.getInput();
console.log(query);

if (query) {
    // 2) New search object and add to state
    state.search = new Search(query);

    // 3) Prepare UI for results
    searchView.clearInput();
    searchView.clearResults();
    // 4) Search for recipes
    await state.search.getResults();

    // 5) render results on UI
    searchView.renderResults(state.search.result);
}

}

elements.searchForm.addEventListener('submit', e => {
e.preventDefault();
controlSearch();
});
``

Ghost
@ghost~59209a78d73408ce4f6102e8
Aug 18 2018 19:00
you were right the first time it needs three
Ivan Ngundela
@ingundela
Aug 18 2018 19:00
@willybeans I’m not able to paste this code more clearly
Ghost
@ghost~59209a78d73408ce4f6102e8
Aug 18 2018 19:00
import Search from './models/Search';
import * as searchView from './views/searchView';
import { elements } from './views/base';

const state = {};

const controlSearch = async () => {
    // 1) Get query from view
    const query = searchView.getInput(); 
    console.log(query);

    if (query) {
        // 2) New search object and add to state
        state.search = new Search(query);

        // 3) Prepare UI for results
        searchView.clearInput();
        searchView.clearResults();
        // 4) Search for recipes
        await state.search.getResults();

        // 5) render results on UI
        searchView.renderResults(state.search.result);
    }
}

elements.searchForm.addEventListener('submit', e => {
    e.preventDefault();
    controlSearch();
});
and the code for search view?
Ivan Ngundela
@ingundela
Aug 18 2018 19:02
import { elements } from './base';

export const getInput = () => elements.searchInput.value;

export const clearInput = () => {
    elements.searchInput.value = '';
};

export const clearResults = () => {
    elements.searchResList.innerHTML = '';
};

const renderRecipe = recipe => {
    const markup = ` 
        <li>
            <a class="results__link" href="#${recipe.recipe_id}">
                <figure class="results__fig">
                    <img src="${recipe.image_url}" alt="${recipe.title}">        
                </figure>
                <div class="results__data">
                     <h4 class="results__name">${recipe.title}</h4>
                     <p class="results__author">${recipe.publisher}</p>
                </div>        
            </a>
         </li>
    `;
    elements.searchResList.insertAdjacentHTML('beforeend', markup);
}

export const renderResults = recipes => {
    recipes.forEach(renderRecipe);
}
Ghost
@ghost~59209a78d73408ce4f6102e8
Aug 18 2018 19:02
when you console.log(query) are you getting anything?
if im not mistaken your error is telling you that this is broken: const query = searchView.getInput(); console.log(query);
Can you send the code for base.js as well
Ivan Ngundela
@ingundela
Aug 18 2018 19:05
export const elements = {
    searchForm: document.querySelector('.search'),
    searchInput: document.querySelector('.search_field'),
    searchResList: document.querySelector()

};
@willybeans not sure.. this is confusing… as it say error at line
Screen Shot 2018-08-18 at 21.05.44.png
Ghost
@ghost~59209a78d73408ce4f6102e8
Aug 18 2018 19:06
Right so
Ivan Ngundela
@ingundela
Aug 18 2018 19:06
Search view 11
Ghost
@ghost~59209a78d73408ce4f6102e8
Aug 18 2018 19:06
you have to follow the tunnel
Its saying you are sending it an empty value at Object.getInput
so i assume you arent getting the value from the function in search view : export const getInput = () => elements.searchInput.value;
uhhh. let me see the html file
Ivan Ngundela
@ingundela
Aug 18 2018 19:13
@willybeans not able to paste the html file (very long file) how to I do it?
Ghost
@ghost~59209a78d73408ce4f6102e8
Aug 18 2018 19:13
A few things id suggest you do:
1) console log in search view and check the function getInput is getting the input from class .search-field
2) check your console.log is logging something from query @ const query = searchView.getInput(); console.log(query);
3) check to make sure your class in your html file doesnt have a typo at .search-feild
Ivan Ngundela
@ingundela
Aug 18 2018 19:15
@willybeans OK
Ghost
@ghost~59209a78d73408ce4f6102e8
Aug 18 2018 19:15
if you want to send the html dont send the entire thing, just send what is inside of the body tag
Ivan Ngundela
@ingundela
Aug 18 2018 19:16
<div class="results">
            <ul class="results__list">
                <!--
                <li>
                    <a class="results__link results__link--active" href="#23456">
                        <figure class="results__fig">
                            <img src="img/test-1.jpg" alt="Test">
                        </figure>
                        <div class="results__data">
                            <h4 class="results__name">Pasta with Tomato ...</h4>
                            <p class="results__author">The Pioneer Woman</p>
                        </div>
                    </a>
                </li>
@willybeans I think this is part of the code used in search view
Ghost
@ghost~59209a78d73408ce4f6102e8
Aug 18 2018 19:17
nope
do a ctrl + f and search for search
Ivan Ngundela
@ingundela
Aug 18 2018 19:36
@willybeans I got it mate….. solved..THANKS
Ghost
@ghost~59209a78d73408ce4f6102e8
Aug 18 2018 19:36
@ingundela congrats! happy learning!