#theodinproject webdevelopment html css javascript | Explore Tumblr posts and blogs

resetpermalik · 4 years ago

Text

Recreating the Google Search Results Page

An Odin Project Challenge

From The Outset

I knew this would be a tedious process. It turns out, I was correct. While working on this challenge, I hammered out plenty of nesting and styling fundamentals. But, of more importance, throughout this build I got the opportunity to coast with the demands of HTML and CSS (meaning: I was simply reinforcing prior lessons learned.) This tempo of structuring and styling allowed me to think more freely about the behavior of certain elements — I was finally able to begin integrating JavaScript to create solutions. The subsequent paragraphs will administer some brief detail.

CSS: A Molehill and Mountain

When a Google Search Results page is produced (these days,) there are supplemental elements involved which aid any given search (by way of: ‘People also search for/ask’.) Each of these lists suggest multiple topics, websites and companies which may better address the initial query.

Typically, these references are housed by a border surrounding all sides. This border brings me to my first obstacle. And while solving this problem was quick and straightforward, I believe the answer I found will regularly come in handy down the road.

My issue presented as a parent element with a border which had gaps in the corners. And I intended there only to be a solid, continuous border.

When nesting siblings within a bordered-parent-element, the borders of the children need also be taken into account. Put simply: if there is styling for rounded border radius around all children — and those children have standard squared border radius — then the border corners of the outer children will create visual gaps (interrupting the integrity of the parent border.)

So this was an easy tweak. I altered the border radius of my outer children elements, such as to make both parent and child borders uniform. Then, my problem was resolved.

The second new CSS maneuver I utilized cured a great deal of stress. Attempting to clone the Google Search Results page means placing a waffle-menu icon paired with a sign-in button in the top right of the page.

I was under the assumption that by using a relatively-positioned parent and absolutely-positioned descendent, that my work would be done. I was very wrong.

See, by following this procedure, my coupling of elements in the top-right corner continued to stay fixed to the viewport edge. Problematic, for sure. The rest of the page moved together (when resizing the screen) while the waffle and sign-in kept glued to the side of the screen, leading to overlapping and clashing with all the other elements.

This was the most frustrating encounter during the whole project. I really didn’t understand what my mistake was (at first.) Admittedly, I kept shuffling the nesting of all navigation elements; thinking surely I just need to figure out the particular wrapper which will allow me to adjust positioning. It wasn’t the proper perspective. At all.

Eventually I realized how to frame my question and set off, thumbing through page after page of Google results. The answer was nauseatingly apparent when I stumbled into the concept of setting a minimal width for my containing div.

That was it! A minimal width would keep my elements from bleeding into my other elements at a lower viewport size, while allowing them to stretch with the screen as it grew. And so it was.

Toggling with JavaScript

One of the aforementioned sections (‘People also ask’) bears an X in the upper right corner, as a way for the user to collapse and remove the element from the flow of the page.

I first placed a button and span (housing the X) inside a div, wrapped by the parent element. This let me use CSS to position the X in its appropriate corner with the button stacked over top.

The button was then assigned an onmousedown event with a called function (closeBox); this would trigger my function when the mouse was actively pressed atop the button and perceivably on the underlying X.

In my JavaScript file, I defined the (closeBox) function and created an instance for my element id. By doing so, my html element in question could be manipulated by way of pressing down a mouse over the button.

Lastly, I used an if else statement to make the section display none when the button was pressed onmousedown.

In the remaining two sections of suggestions, each topic listed extends with a type of card which supplies more information. These topic headings are fit with their own chevrons, so as to invert and point up/down (respectively) determined by whether the card of info is actively being shown or not.

I knew the behavior needed to occur when each topic heading was clicked. So in my HTML file, I called a function (arrowOneTogg) with the onclick event attribute.

Using CSS, I created a class to transform and rotate my chevrons 180deg, ultimately making them point from down to up (and toggle back and forth with every click.)

Back in my JavaScript file, I defined the function. After which, I used const to create an instance for all of my individual spans (the spans which allowed me to add the initial chevrons).

I then wrote statements so as to refer to each variable and target classList, toggling the (rotateChev) class in order to rotate the specific chevrons onclick.

Conclusion

That’s that. I certainly didn’t want to spend much time on this HTML and CSS, but I did. However, as I press on, my chops get a bit more sharpened and the obvious pitfalls are more effectively avoided.

All things considered, I am pleased to have built my first solo JavaScript functions. The confidence is undeniable in comparison to having absolutely zero experience in this practice. Now, enough talking and onto the next project.

https://permalik.github.io/google-search-results-page

#theodinproject webdevelopment html css javascript

0 notes