Javascript3 week2/soheib #4
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
✅ Deploy Preview for tweat ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
ahmagdy
approved these changes
Feb 1, 2025
index.html
Outdated
| <label> | ||
| <input type="text" class="recipeIngredient" placeholder="Ingredient"> | ||
| <input type="number" class="ingredientAmount" placeholder="Amount"> | ||
| <select type="dropdown" class="ingredientUnit" placeholder="Unit"><option value="unitTypes.weight[0]" selected>gr</option><option value="unitTypes.weight[1]">kg</option><option value="unitTypes.volume[0]">ml</option><option value="unitTypes.volume[1]">dl</option><option value="unitTypes.volume[2]">l</option><option value="unitTypes.volume[3]">cup</option><option value="unitTypes.volume[4]">tbsp</option><option value="unitTypes.volume[5]">tsp</option><option value="unitTypes.counts[0]">pieces</option><option value="unitTypes.counts[1]">dozen</option><option value="unitTypes.counts[2]">bottle</option><option value="unitTypes.counts[3]">pack</option><option value="unitTypes.counts[4]">clove</option></select> |
There was a problem hiding this comment.
Can we do these options dynamically from JS?
| return [...builtInRecipes, ...userRecipes]; | ||
| }; | ||
|
|
||
| getAllRecipes() |
There was a problem hiding this comment.
why are we calling getAllRecipes two times? Is the first one just an experiment?
| //if the recipe is editable, add an edit button and delete button | ||
| if (obj.edit) { | ||
| const editButton = document.createElement('a'); | ||
| editButton.innerHTML = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 106.86 122.88" style="enable-background:new 0 0 106.86 122.88" xml:space="preserve"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style><g><path class="st0" d="M39.62,64.58c-1.46,0-2.64-1.41-2.64-3.14c0-1.74,1.18-3.14,2.64-3.14h34.89c1.46,0,2.64,1.41,2.64,3.14 c0,1.74-1.18,3.14-2.64,3.14H39.62L39.62,64.58z M46.77,116.58c1.74,0,3.15,1.41,3.15,3.15c0,1.74-1.41,3.15-3.15,3.15H7.33 c-2.02,0-3.85-0.82-5.18-2.15C0.82,119.4,0,117.57,0,115.55V7.33c0-2.02,0.82-3.85,2.15-5.18C3.48,0.82,5.31,0,7.33,0h90.02 c2.02,0,3.85,0.83,5.18,2.15c1.33,1.33,2.15,3.16,2.15,5.18v50.14c0,1.74-1.41,3.15-3.15,3.15c-1.74,0-3.15-1.41-3.15-3.15V7.33 c0-0.28-0.12-0.54-0.31-0.72c-0.19-0.19-0.44-0.31-0.72-0.31H7.33c-0.28,0-0.54,0.12-0.73,0.3C6.42,6.8,6.3,7.05,6.3,7.33v108.21 c0,0.28,0.12,0.54,0.3,0.72c0.19,0.19,0.45,0.31,0.73,0.31H46.77L46.77,116.58z M98.7,74.34c-0.51-0.49-1.1-0.72-1.78-0.71 c-0.68,0.01-1.26,0.27-1.74,0.78l-3.91,4.07l10.97,10.59l3.95-4.11c0.47-0.48,0.67-1.1,0.66-1.78c-0.01-0.67-0.25-1.28-0.73-1.74 L98.7,74.34L98.7,74.34z M78.21,114.01c-1.45,0.46-2.89,0.94-4.33,1.41c-1.45,0.48-2.89,0.97-4.33,1.45 c-3.41,1.12-5.32,1.74-5.72,1.85c-0.39,0.12-0.16-1.48,0.7-4.81l2.71-10.45l0,0l20.55-21.38l10.96,10.55L78.21,114.01L78.21,114.01 z M39.62,86.95c-1.46,0-2.65-1.43-2.65-3.19c0-1.76,1.19-3.19,2.65-3.19h17.19c1.46,0,2.65,1.43,2.65,3.19 c0,1.76-1.19,3.19-2.65,3.19H39.62L39.62,86.95z M39.62,42.26c-1.46,0-2.64-1.41-2.64-3.14c0-1.74,1.18-3.14,2.64-3.14h34.89 c1.46,0,2.64,1.41,2.64,3.14c0,1.74-1.18,3.14-2.64,3.14H39.62L39.62,42.26z M24.48,79.46c2.06,0,3.72,1.67,3.72,3.72 c0,2.06-1.67,3.72-3.72,3.72c-2.06,0-3.72-1.67-3.72-3.72C20.76,81.13,22.43,79.46,24.48,79.46L24.48,79.46z M24.48,57.44 c2.06,0,3.72,1.67,3.72,3.72c0,2.06-1.67,3.72-3.72,3.72c-2.06,0-3.72-1.67-3.72-3.72C20.76,59.11,22.43,57.44,24.48,57.44 L24.48,57.44z M24.48,35.42c2.06,0,3.72,1.67,3.72,3.72c0,2.06-1.67,3.72-3.72,3.72c-2.06,0-3.72-1.67-3.72-3.72 C20.76,37.08,22.43,35.42,24.48,35.42L24.48,35.42z"/></g></svg>`; |
There was a problem hiding this comment.
Can't we just have a normal button instead of using svg?
| recipesList.forEach((recipe)=>{ | ||
| // cheking only in the relevant parts of the recipe | ||
| let found = false; | ||
| if (recipe.title.toLowerCase().includes(cleanStr)) { |
There was a problem hiding this comment.
Consider doing for loop to reduce logic duplication
const textFields = [recipe.title, recipe.pitch,..... so-on];
for (let field of textFields){
if (field.toLower().includes(cleanStr){
found = true;
break
}
}
| const maxIngredients = 20; | ||
| addNewIngredientsBtn.addEventListener('click', ()=>{ | ||
| if (ingredientCount < maxIngredients) { | ||
| moreIngredientsContainer.innerHTML += ` |
There was a problem hiding this comment.
Can we use DOM javascript here instead of using HTML?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Dear Mentor,
I have addressed the comments from the previous pull requests, and added styles.
Please just consider "app.js" as the other js files are only some old functions I'm still migrating.
I still have more functions to implement before the presentation.
Thank you so much in advance