From Front Desk to Front End p.31 Dictionary App - More CSS + JS Dropdown Menu

Photo by Roberto Sorin on Unsplash

Hi, I'm Tauri! I am a Front End Developer and a student (and enrollment counselor) with Skillcrush, the online coding and design school with a heart! I am looking for employment with a company, and working on adding to my skillset every day! This blog is chronicling my most recent projects! Thank you for reading!

My current active project is building this API UI interface with Front End Mentor. I am also reading through Eloquent JS by Marjin Haverbeke, which has been amazing so far! The job search and application process is taking a lot of my time and energy outside of work so unfortunately I'm not able to spend as much time on these as I truly like, but a little every day has still been some satisfying progress! 💪✨

Highlights of this week:

• This week was a lower code week than usual. My house was being tented for termites so we had a lot of prep to do, living out of a hotel, and errands to run + at the tail end of that experience I drove to a city a few hours away to attend the memorial service of my grandma.
• I learned that customizing the underline of text is a lot more difficult and nuanced than it sounds like! I wasn't surprised tho, such is HTML/CSS, esp if you want to keep it accessible and cross-browser friendly! (see Wednesday)
• Checkout Saturday for a quick divert to an older project in order to install my first dropdown menu with JS!

Monday 4/24/23:

I've taken over another room as a temporary office so I could be directly connected to the ethernet cord. Now we've finally moved the modem and router to a better room, and I can return to my office! I'm seewww heppy! Meg Marion from Robin Hood: Men in Tights. Mostly because I have a really wide screen! So I had to take some extra time to clone my repo from Github, and update my VS code, redownload the SASS compiler extension, and redownload Figma + the design comp. Then I had a little bit of time to start tweaking the size of the container over all of the material, and start styling the synonym section. The overall layout limitations need to still be brought in more so that the left-most content is lining up better, but gotta get on dinner now and more prepatations so I'll play with it all later. Which unfortunately will be from a hotel room so back to my laptop, because our house is being tented for termites over the next few days starting tomorrow!

Tuesday 4/25/23:

We did a lot over the next few days to clear the many house plants, take cuttings of the plants directly against the house in planters bc they're probs going to die (thriving rosemary, mint, lemongrass, and geranium), and bag up the massive Costco-stocked pantry. But this day was still filled with a bunch of bagging for the fridge (we ate it down, but sooo many condiments!) and freezer and packing things we've been using up until now. Then off to the hotel, consoling the sad and very anxious pets, and catching up with my girlfriend's brother who is visiting for a memorial so had to shack up with us in the hotel room instead of being able to stay in the guest bedroom. Outside of doing from-home work for the day, I did not get any coding or job applying done. It was nice to give my brain a little break to clear my purpose in my head tho!

Wednesday 4/26/23:

Realized I must've really been kinda frazzled while trying to squeeze in some coding on Mon before jumping up to finish preparing to leave to the hotel room. While excited to get a little bit of coding between taking care of the pets and run some errands, I went to pull the code from my remote repo and got the dreaded message "Already up to date". I didn't push the code I did on Mon!!! :face-palm: Went onto Github to confirm and whomp whomp. 🎺 It's ok, I know how to resolve conflicting merges so moving onto the next section that needs styling, just not ideal.

I used some extra time I had while my girlfriend went to her art class to style the final divs of the mobile standard design. First I adjusted the quote are, which was nice and easy. I think I still need to make sure I'm following all the font-sizes indicated by the comp. So I'll be doing a last tweak-through before moving onto the tablet styles.

I could tell the underline for the header of the source section was different than the standard, so I looked up a resource about adjusting that. Found a nice one on CSS Tricks. In order to understand this properly I had to look up what ascenders and descenders are and found a great source through Google Fonts. So ascenders are the parts that ascend above the base letterform as in "b" and "d" and descenders descend downwards past it as in "p" and "g".
So if you see the original styles compared to the design comp, you can see that the design comp has an underline that matches the color of the font it underlines and it's lower from the word than the standard style. I read in the CSS Tricks article that the underline will automatically follow the color of the font it is applied to which wasn't happening to I moved my style from being for the entire source div (because the source link is also underlined) to being applied directly to the h4 so that would work.
I wasn't super happy about the solutions proposed in the CSS articles list tho, including making a false-underline with a border instead and some styling options that don't have a lot of cross-browser support. A look at Stack Overflow for ideas pointed me in the direction of text-underline-offset so I looked into this further and found from mdn web docs that it has fairly descent cross browser support (just don't use percentage values), where the glaring outlier is for everyone that used Firefox on their Android. I did find that the default browser for Android depends on the brand of the phone, where stock is Chrome, Apple is Safari, and Samsung is Samsung Internet browser all of which this is compatible with so I decided I was comfortable with that. Looks much better now. And that's a wrap for today!

-->

Thursday-Friday:

I left the hotel to go straight to my Grandma's memorial in a city hours away from where we live on Thursday, so that day was completely dedicated to returning to changing out the water in our fish tank and returning the fish from their jars + driving + family. Friday was spent driving back, emptying all the food from Nylofume bags, and bringing plants inside as well as some recovery.

Saturday:

All code day and so much fun! So I am trying to join a 5 day collaborative development project thru Chingu. I needed to get an independent coding project approved in order to join, so I submitted my Grid Component, which at the time was all HTML/CSS. So they requested that I add some very simple JS in order to show a sample of my JS skills. The admin suggested a simply scroll to top button, but I don't feel that made a lot of sense for this fairly small component. So instead I decided to do a dropdown menu! I've never done one before, so I found a great resource thru javaTpoint and went for it! It's pretty simple:

1. Set up the structure in HTML with either options or name divs accordingly and use a elements, which is what I chose to do.
2. Implement styles to the menu and list items with CSS. I made sure to include hover effects for the list items for accessibility in terms of ease to see what you are selecting + screen readers.
3. Put a show_hide function into your JS!