London10-Afsha_Hossain_TV_dom_project #1

Afsha10 · 2023-05-08T00:12:52Z

Level 300 WIP

…and using the script.js to get the data from episode.js file Restructured the index.html and changed the names a bit. We moved on from the using html to create the webpage. Instead converted the html elements to JS by creating variables in JS and appended the variables inside other variables so that it represents the our html tree. Also made changes to the pseudocode and css. Added the source in the footer. To complete level 100, I need to remove the <p> from the episode descriptions and also made the episodeInfoCards fit in the cardsContainer. And probably several other things...

…de description

…r to fix the layout

Changed .episode-name-num-holder width size to 20rem in css.

Correcting the last comment in script.js file

Need to find a way to stop the description text going out of the episodeInfoHolder.

Just need to make every the episode container size same.

Added some divs using JS particularly around images to have a cage for wild images. Added a bit of pseudocode for level 200. Corrected the previous h1 and h2 elements to span and p elements. Created input element for the search bar.

…n CSS

…suedocode.md

netlify · 2023-05-08T00:12:59Z

✅ Deploy Preview for cyf-afsha10-tv1 ready!

Name	Link
🔨 Latest commit	`a6b92fb`
🔍 Latest deploy log	https://app.netlify.com/sites/cyf-afsha10-tv1/deploys/64833c1654132e000812803d
😎 Deploy Preview	https://deploy-preview-1--cyf-afsha10-tv1.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify · 2023-05-08T00:13:18Z

✅ Deploy Preview for cyf-afsha10-tvv ready!

Name	Link
🔨 Latest commit	`a6b92fb`
🔍 Latest deploy log	https://app.netlify.com/sites/cyf-afsha10-tvv/deploys/64833c160fdf8d0008425807
😎 Deploy Preview	https://deploy-preview-1--cyf-afsha10-tvv.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

style.css

Made the episodes page responsive by using % for width instead of rem

Made the show page responsive by using the flexbox instead of grid to arrange the elements inside the show cards. To use the flexbox, I created a new div container called "showImageSummaryInfoContainer" and I've put three other elements inside this container in a row.

…n css and changed variable names Made some the 4 small info description bold using CSS, gave comma and spacing between different genres using .split and .join and changed some variable names.

…ch bar Created a function to be able to search shows in the search bar. It is same as episodes. I only changed the episodes to shows.

…ng between shows and episodes Fixed switching appearing of unnecessary dropdown menus while switching between shows and episodes by hiding visibility and allowing visibility.

…nite loop

Corrected the infinite loop by taking the eventlistener in line 211 outside the for loop

Created 2 separate search bars- one for episodes and the other for shows. W make them visible and hide them same like we did with episode and show dropdowns in makePageForEpisodes and makePageForShows

Cleared the search input entered in show page and episode by episodeSearchInputHtml.value = "" where makePageForShow is called and by showSearchInputHtml.value = "" where makePageForEpisode is called.

…ave created it in JS.

script.js

faisalamin0206 · 2023-06-03T10:19:08Z

script.js

+
+  episodeSearchResultDisplayHtml.style.display = "inline";
+  showSearchResultDisplayHtml.style.display = "none"; // hide episode search result from show page
+


It looks like you're doing the same thing 6 times which is very repetitive. Is there possibly a good word to possibly describe what we're doing. Is there a function name that we can use, using that word.

Thank you very much for pointing this out! Is the word to display and hide called called "toggle"?

Hi Afsha,
That is up to you. What I would say is that you should try it and see how it goes with "toggle()" and if you need any more help let myself or one of the team know :)

I might be able to manage this one. There are a lot of other bug I need to fix. It feels overwhelming sometimes. Thank you for you so much for your kind offer!

No problem! Trust me I am still learning as well so do not worry one bit. A bit of advice I can give in terms of feeling overwhelmed is to try and tell someone or write down al the problems you are having as you can tend to find the answer while you're speaking about the problem.

i hope this helps and let me know if you need anything else!

Hey Faisal,
I have made some changes to reduce some repetition by using a toggleVisibility function.
For me there is nothing like speaking about the problem. It gives me clarity. However, rarely I get to speak about the coding problems. I have been making checklists about the all the coding related problems in a notebook and have made some progress. Thank you for the reminder!
I am currently struggling a few small assignments related to fetch and API and we are starting React. Would you be interested in to pair programming sometime?

Hi Afsha,
I apologise for the late reply. I did not see this until today when I logged into Gituhub. Yes I would be happy to start pair programming. I am not super strong in programming as I have not done much since I finished my degree however, I still practice in my free time. I would be happy to do it. Let me know when you want to do it.

Hey Faisal!
No worries about the delay. Before we start pair programming, it would be great if you could join our in-person training sessions on Saturdays. It'll give us a chance to meet face-to-face and discuss pair programming and our projects in more detail.
Let me know if you're interested, and I'll share the details of the upcoming Saturday session. You can also find the information in our Slack channel. Feel free to check it out.

Hi Afsha,
Yes I will be more than happy to come in person for a session. I won't be able to attend tomorrow as I am away for the weekend however nest Saturday works perfectly for me. Could you please forward me the details and I will see you then!

Tomorrow it will be remote. Next week it will probably be at Lego, which is exciting! Feel free to DM on slack or here if you need the address.

illicitonion

This is generally looking really solid, nicely put together!

One usability thing I noticed using your page - if you filter by searching in the text box, the page moves around a bit - can you work out why this is? Can you think how to improve this?

illicitonion · 2023-06-03T10:40:38Z

script.js

+  episodeList.forEach((episode, index) => {
+    // Get the episode name, season number, episode number, and combine them
+    const episodeName = episode.name;
+    const paddedSeasonNum = ("0" + episode.season).slice(-2);


Rather than repeating this code on this and the next line, maybe we could extract a function with a clear name which shows what it's doing?

Thank you for pointing this out! I created 2 different functions to format the name in the episode dropdown list and to format episode titles in episode cards. I had to create two functions because they are formatted slightly differently.

illicitonion · 2023-06-03T10:43:03Z

script.js

+  // Display selectedEpisode
+  rootHtml.innerHTML = "";
+  makePageForEpisodes(selectedEpisode);
+  // buildEpisodeDropdownList(selectedShows);


I'd recommend deleting the commented code, it makes it easier to follow what's actually going on (and easier to review!)

Apologies for that. I have removed those comments and the unnecessary console logs.

illicitonion · 2023-06-03T10:44:52Z

script.js

+
+    // creating a status element and its value inside showBasicInfoContainerHtml
+
+    const showStatusValueHtml = document.createElement("span");


I'm seeing a pattern of a lot of "document.createElement ; element.classList.add ; element.innerHTML =" (and also then appendChild) - is there a useful function to extract here which does these three things? It may make it more clear to see what's going on.

You are right about the pattern. Will it be something like createElementAddClassAppend function?
I'm not sure about the innerHTML. Sometimes we use .innerHTML and sometimes we use .src.

…ow and episode elements Used a function to show and hide episode and show elements when the show and episode pages are displayed

…les in the episodeCards and episodeTitles in episodeDropdownMenu Created 2 different functions to format the name in the episode dropdown list and also episode titles in episode cardsRemoved unnecessary comments and console.logs.

Fixed the episode and show pages to appear at the top the of page by using this code: window.scrollTo(0, 0) ;

illicitonion

This is looking really well put together - good job!

illicitonion · 2023-06-16T20:16:21Z

script.js

+  const paddedSeasonNum = ("0" + episode.season).slice(-2);
+  const paddedEpisodeNum = ("0" + episode.number).slice(-2);


This looks a lot like you're implementing the same thing in this function and in getFormattedEpisodeNameInDropdown - is there a third function you could extract, which you could call from both of those, to avoid having to write this twice?

illicitonion · 2023-06-16T20:17:28Z

script.js

-  const rootElem = document.getElementById("root");
-  rootElem.textContent = `Got ${episodeList.length} episode(s)`;
+  // make the episode dropdown list visible and hide the show dropdown list
+  toggleVisibility(episodeSelectHtml, showSelectHtml);


"toggle" implies "swap" (i.e. that if you call toggle once it will change something, and call it again it will change it back) - I think what you're really doing in toggleVisibility is hiding the elements - can you think of a more clear name for the function?

illicitonion · 2023-06-16T20:19:47Z

script.js

+
+    const episodeNameNumSeasonComboHolderHtml = document.createElement("div");
+    const episodeNameNumSeasonComboTextHtml = document.createElement("span");
+    episodeNameNumSeasonComboHolderHtml.classList.add(


It looks like every element you create, you add a class-name for - can you maybe extract a function which would mean you could write something like:

const episodeNameNumSeasonComboHolderHtml = createElement("div", "episode-name-num-holder");

instead of keep having to the same things over and over?

Are there more things you're repeatedly doing you could also extract into this function, as well?

Afsha10 added 27 commits April 22, 2023 13:06

Added full name and user name to the index.html file

6ab880a

Personalised index.html title

f682bb4

Personalised index.html title

715dd15

Updated index.html and style.css and wrote pseudocode in script.js

ed2c0b7

Removed the <p> from the beginning and </p> from the end of the episo…

51cee25

…de description

Changed the body and cardsContainer background colour and added borde…

e9b15ef

…r to fix the layout

Trying to solve level 100 with only display flex

2d1f09d

Completed level 100 using flex box

9610ce3

Update style.css

49f2bdb

Update style.css

0e10058

Changed .episode-name-num-holder width size to 20rem in css.

Update script.js

b265ca4

Correcting the last comment in script.js file

Almost completed level 100 using the grid method.

9a774e2

Need to find a way to stop the description text going out of the episodeInfoHolder.

Updated index.html, style.css pseudocode script.js

9cf11b5

Clearing unnecessary code

74edfaa

Almost done with level 100

1235ffa

Just need to make every the episode container size same.

Completed Level 100

b5852b8

Completed level 100

b285f42

Deleted unnecessary files

7e9c109

Started working on level 200

12852aa

Added some divs using JS particularly around images to have a cage for wild images. Added a bit of pseudocode for level 200. Corrected the previous h1 and h2 elements to span and p elements. Created input element for the search bar.

made some minor changes like changing div to span in JS and changes i…

e5ce719

…n CSS

Tried to make the search bar using scritp.js but failed

f8a42f1

Cleared a few things

11d4ff2

Tried to refactor to complete level 200

e9cefc3

Corrected my HTML pseudocode

7683176

Completed level 200

a059f93

Tried to do level 300. Updated index.html, script.js, style.css and p…

3fb47f1

…suedocode.md

Afsha10 requested a review from Mpanasetckiy May 8, 2023 00:12

Mpanasetckiy reviewed May 27, 2023

View reviewed changes

style.css Outdated Show resolved Hide resolved

Mpanasetckiy reviewed May 27, 2023

View reviewed changes

style.css Outdated Show resolved Hide resolved

Mpanasetckiy reviewed May 27, 2023

View reviewed changes

style.css Show resolved Hide resolved

Mpanasetckiy reviewed May 27, 2023

View reviewed changes

style.css Outdated Show resolved Hide resolved

Afsha10 added 2 commits May 27, 2023 23:59

Made the episodes page responsive

725fd93

Made the episodes page responsive by using % for width instead of rem

Afsha10 changed the title ~~Level 300 TV dom project~~ London10-Afsha_Hossain-Level 300-TV_dom_project May 28, 2023

Afsha10 changed the title ~~London10-Afsha_Hossain-Level 300-TV_dom_project~~ London10-Afsha_Hossain-Level300-TV_dom_project May 28, 2023

Afsha10 changed the title ~~London10-Afsha_Hossain-Level300-TV_dom_project~~ London10-Afsha_Hossain-Level300_TV_dom_project May 28, 2023

Afsha10 added 11 commits May 28, 2023 19:15

Changed how showGenre innerHtml is written, bolded infoDescriptions i…

989bc32

…n css and changed variable names Made some the 4 small info description bold using CSS, gave comma and spacing between different genres using .split and .join and changed some variable names.

Created the function displaySearchedShows and connected with the sear…

96d512d

…ch bar Created a function to be able to search shows in the search bar. It is same as episodes. I only changed the episodes to shows.

Fixed switching appearing of unnecessary dropdown menus while switchi…

c9fbf7b

…ng between shows and episodes Fixed switching appearing of unnecessary dropdown menus while switching between shows and episodes by hiding visibility and allowing visibility.

Changed variable name created two event listeners and created an infi…

535cb69

…nite loop

Corrected the infinite loop

878af31

Corrected the infinite loop by taking the eventlistener in line 211 outside the for loop

Created 2 separate search bars for episode and shows

d037ad8

Created 2 separate search bars- one for episodes and the other for shows. W make them visible and hide them same like we did with episode and show dropdowns in makePageForEpisodes and makePageForShows

Corrected some styling in style.css

b9d3cec

Update style.css

65f0548

Fixed a bug and think I completed level 500

ca36470

Cleared the search input entered in show page and episode by episodeSearchInputHtml.value = "" where makePageForShow is called and by showSearchInputHtml.value = "" where makePageForEpisode is called.

Minor styling changes

1e3da01

Removed unnecessary text in Html for displaying search results as I h…

2bbd0d3

…ave created it in JS.

Afsha10 changed the title ~~London10-Afsha_Hossain-Level300_TV_dom_project~~ London10-Afsha_Hossain_TV_dom_project May 31, 2023

faisalamin0206 reviewed Jun 3, 2023

View reviewed changes

script.js Show resolved Hide resolved

faisalamin0206 reviewed Jun 3, 2023

View reviewed changes

illicitonion reviewed Jun 3, 2023

View reviewed changes

Created a function called toggleVisibility to change visibility of sh…

c39fca6

…ow and episode elements Used a function to show and hide episode and show elements when the show and episode pages are displayed

Afsha10 closed this Jun 7, 2023

Afsha10 reopened this Jun 9, 2023

Fixed the episode and show pages to appear at the top the of page

a6b92fb

Fixed the episode and show pages to appear at the top the of page by using this code: window.scrollTo(0, 0) ;

illicitonion reviewed Jun 16, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

London10-Afsha_Hossain_TV_dom_project #1

London10-Afsha_Hossain_TV_dom_project #1

Afsha10 commented May 8, 2023 •

edited

Loading

netlify bot commented May 8, 2023 •

edited

Loading

netlify bot commented May 8, 2023 •

edited

Loading

faisalamin0206 Jun 3, 2023

Afsha10 Jun 7, 2023

faisalamin0206 Jun 7, 2023

Afsha10 Jun 7, 2023

faisalamin0206 Jun 7, 2023

Afsha10 Jun 8, 2023

faisalamin0206 Jun 13, 2023

Afsha10 Jun 15, 2023

faisalamin0206 Jun 16, 2023

Afsha10 Jun 16, 2023

illicitonion left a comment

illicitonion Jun 3, 2023

Afsha10 Jun 9, 2023

illicitonion Jun 3, 2023

Afsha10 Jun 9, 2023

illicitonion Jun 3, 2023

Afsha10 Jun 9, 2023

illicitonion left a comment

illicitonion Jun 16, 2023

illicitonion Jun 16, 2023

illicitonion Jun 16, 2023


		episodeSearchResultDisplayHtml.style.display = "inline";
		showSearchResultDisplayHtml.style.display = "none"; // hide episode search result from show page


		// creating a status element and its value inside showBasicInfoContainerHtml

		const showStatusValueHtml = document.createElement("span");

		const paddedSeasonNum = ("0" + episode.season).slice(-2);
		const paddedEpisodeNum = ("0" + episode.number).slice(-2);

London10-Afsha_Hossain_TV_dom_project #1

Are you sure you want to change the base?

London10-Afsha_Hossain_TV_dom_project #1

Conversation

Afsha10 commented May 8, 2023 • edited Loading

netlify bot commented May 8, 2023 • edited Loading

✅ Deploy Preview for cyf-afsha10-tv1 ready!

netlify bot commented May 8, 2023 • edited Loading

✅ Deploy Preview for cyf-afsha10-tvv ready!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

illicitonion left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

illicitonion left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Afsha10 commented May 8, 2023 •

edited

Loading

netlify bot commented May 8, 2023 •

edited

Loading

netlify bot commented May 8, 2023 •

edited

Loading