How to know that I am ready to learn a javascript framework?
A good indicator is if you have a good somewhat solid understanding of JavaScript and have built a handful of projects with it, along with the essential prerequisite of understanding basis CSS and HTML. This is also the intended order to go through the FreeCodeCamp curriculum.
Hope this helps. 
2 Likes
// items
const menu = [
{
id: 1,
title: "Dark chocolate bar",
category: "Chocolates",
price: 300,
img: "chocolate-bars-dark-chocolate-1.jpg",
desc: `The dark chocolate bar has a rich, dark chocolate flavor that is smooth and creamy. The texture is soft and crumbly, with a slight crunch when biting into it.`,
},
{
id: 2,
title: "Chocolate torte",
category: "Tortes",
price: 650,
img: "chocolate-torte 1.jpg",
desc: `Chocolate Tortes are a great way to add a touch of sweetness and flavor to any meal. They are also a great way to boost the taste buds and create a unique and delicious dessert experience.`,
},
{
id: 3,
title: "Black forest gateaux ",
category: "Gateaux",
price: 40,
img: "black forest gateaux 1.jpg",
desc: `The Black Forest cake is a delicious and unique dessert that combines the sweetness of black forest flower with the richness of vanilla and chocolate. The cake is soft and moist, with a crisp and creamy texture that is perfect for sharing with friends and family.`,
},
{
id: 4,
title: "Black and white cookies ",
category: "Cookies",
price: 360,
img: "black and white cookies 1.png",
desc: `The taste of black and white cookies is quite sweet and has a rich, creamy texture. The flour and sugar combine to create a smooth, creamy batter that is topped with a thin layer of chocolate or butter. The combination of flour and sugar also helps to keep the cookies moist and prevent them from sticking together.`,
},
{
id: 5,
title: "Milk chocolate bar",
category: "Chocolates",
price: 80,
img: "milk-chocolate2.jpg",
desc: `roviding a creamy and smooth texture to the chocolate.`,
},
{
id: 6,
title: "Dark chocolate mousse",
category: "Tortes",
price: 300,
img: "dark chocolate mousse torte 2.jpeg",
desc: `The Chocolate Mousse Torte is a decadent and rich dessert with layers of fluffy dark chocolate mousse sandwiched between moist chocolate cake. It's a show-stopping dessert that will impress any chocolate lover.`,
},
{
id: 7,
title: "Welly gateaux",
category: "Gateaux",
price: 42,
img: "welly gateaux 2.jpg",
desc: `Welly Gateaux are the perfect mix of moist cake with caramel cream and sablé pieces .`,
},
{
id: 8,
title: "Peanut butter cookies ",
category: "Cookies",
price: 350,
img: "peanut butter blossoms cookies 2.jpg",
desc: `Peanut butter blossom cookies are a delicious and creamy treat that combines the sweet and savory flavors of peanut butter with the tangy and crunchy texture of blossom.`,
},
{
id: 9,
title: "White chocolate bar ",
category: "Chocolates",
price: 200,
img: "white chocolate bar 3.jpg",
desc: `White chocolate is a rich, warm, and inviting taste that is both sweet and creamy. Its texture is soft and smooth, with a slight crunch that makes it easy to chew.`,
},
{
id: 10,
title: "red velvet vanilla",
category: "Tortes",
price: 450,
img: "red velvet vanilla torte 3.jpg",
desc: `The red velvet vanilla torte is a sweet and warm dessert, with a rich and floral taste that is both inviting and comforting. The texture is soft and luxurious, with a crisp and creamy consistency that makes it easy to hold and enjoy.`,
},
{
id: 11,
title: "Chocolate and rasperry",
category: "Gateaux",
price: 95,
img: "chocolate and rasperry gateaux 3.jpg",
desc: `The taste of a chocolate cake is rich and sweet, with a hint of vanilla and caramel. The texture is soft and creamy, with a slight crunch and a hint of cocoa. The taste of a raspberry cake is warm and fruity.`,
},
{
id: 12,
title: "Plain cookies ",
category: "Cookies",
price: 140,
img: "plain cookies 3.jpg",
desc: `A cookie, a bite of sweet deliciousness, A treasure, a memory, a sweet treat.`,
},
{
id: 13,
title: "Caramel chocolate",
category: "Chocolates",
price: 80,
img: "caramel-chocolate3.jpg",
desc: `Caramel chocolate, a fragrant sweet, A delightful taste that's hard to miss.`,
},
{
id: 14,
title: "Peach jelly cheese",
category: "Tortes",
price: 430,
img: "peach jelly cream cheese torte 4.jpg",
desc: `peach Jelly cream cheese cake, A delightful treat, With a rich, creamy texture, And a warm, inviting taste.`,
},
{
id: 15,
title: "Chocolate gateaux",
category: "Gateaux",
price: 40,
img: "gateux 4.jpg",
desc: `A warm, sweet chocolate cake, With a hint of vanilla, and a hint of spice.`,
},
{
id: 16,
title: "Nut cookies ",
category: "Cookies",
price: 230,
img: "nut cookies 4.jpg",
desc: `Crisp, sweet, and delicious, Nuts and cookies, a perfect blend.`,
},
{
id: 17,
title: "Oreo cheesetarte ",
category: "Tortes",
price: 420,
img: "oreo cheesecake 5.jpg",
desc: `In a world of sweet and sour, An Oreo cheesecake, a fusion of flavors.`,
},
{
id: 18,
title: "Carmel chocolate mousse ",
category: "Gateaux",
price: 60,
img: "carmel chocolate mousse gateaux 5.jpg",
desc: `Caramel chocolate mousse gateaux,A sweet and warm delight, With a hint of vanilla, And a touch of cinnamon, The flavors of caramel, And chocolate, Blended together, Nature's sweetest delight.`,
},
{
id: 19,
title: "Chocolate nut cookies ",
category: "Cookies",
price: 250,
img: "chocolate nut cookies 5.jpg",
desc: `In the sweet and warmth of chocolate, Nut cookies bloom with a harmonious blend.`,
},
{
id: 20,
title: "Chocolate world special ",
category: "Tortes",
price: 700,
img: "chocolate world special 6.jpg",
desc: `The Chocolate world special Torte is a decadent and rich dessert with layers of fluffy dark chocolate special sandwiched between moist chocolate cake. It's a show-stopping dessert that will impress any chocolate lover.`,
},
{
id: 21,
title: "White forest",
category: "Gateaux",
price: 40,
img: "gateaux 5.jpg",
desc: `The White Forest cake is a delicious and unique dessert that combines the sweetness of white forest flower with the richness of vanilla and chocolate. The cake is soft and moist, with a crisp and creamy texture.`,
}
];
const sectionCenter = document.querySelector(".section-center");
const container = document.querySelector(".btn-container");
// load items
window.addEventListener("DOMContentLoaded", function() {
diplayMenuItems(menu);
displayBtns();
})
function diplayMenuItems(menuItems) {
let displayMenu = menuItems.map(function(item) {
return`<article class="menu-item">
<img src="${item.img}" class="photo" alt="${item.title}">
<div class="item-info">
<header>
<h4> ${item.title}</h4>
<h4 class="price"><sup>EGB</sup> ${item.price}</h4>
</header>
<p class="item-text">${item.desc}</p>
</div>
</article>`;
})
displayMenu = displayMenu.join('');
sectionCenter.innerHTML = displayMenu;
};
function displayBtns() {
const categories = menu.reduce(function(values, item) {
if (!values.includes(item.category)) {
values.push(item.category);
}
return values;
},["Full-menu"])
const categoryBtns = categories.map(function(category) {
return`<button class="btn-38" type="button" data-category=${category} role="button">${category}</button>`
}).join("");
container.innerHTML = categoryBtns;
const btn38 = document.querySelectorAll(".btn-38");
btn38.forEach(btn => {
btn.addEventListener("click", function(e) {
const category = e.currentTarget.dataset.category;
const menuCategory = menu.filter(function(menuItem) {
if(menuItem.category === category) {
return menuItem;
}
});
if(category === "Full-menu") {
diplayMenuItems(menu);
}else{
diplayMenuItems(menuCategory);
};
});
});
}
Is that enough or i need to learn more in addition to i finished the javascript at fcc curriculum and i made 13 javascript projects
is that enough?
As said, you should have some basics in place.
But you won’t ever really be ready because frameworks have their own rules and ways of doing things. So a good foundation is good to have but it won’t prepare you for the framework’s way of doing things, like its reactivity system, the templating, or any DSL used (domain-specific language).
Then it should be fine to start learning a framework.
I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
1 Like
thanks for the advise 
and I really appreciate that from you