All solutions

Learnt more about position relative. Assumed it had to be used along with position absolute on the parent.

position relative can be set on any tag or element. This will make the tag's position relative to its original position in the html

Even though my work resembles the challenge , I don't think my code will scale well. 4 or 5 lines of code will have to be added for every new dropdown created. Will be looking around for how others approached this challenge.

Unfortunately, my form month and year accepts out of range (1-12) positive numbers. I have set an if else condition to check if inputs meet the condition. My tests however show that the failed test function is not receiving the parameters from the test functlon after the invalid eventListener is triggered

All suggestions welcome

I used an empty variable as a placeholder in the p and span tag. Assigning a value to this variable placeholder allowed me display and hide styles. These assignments were contingent on certain conditions. Really appreciated the flexibility.

Example code is below.

colorChessClub = message.activity === "Chess Club" ? "blue" : ""

showCommentedPicture = message.commentpicture === "" ? "dontshow" : ""

list += `

<div class=" ${newMessageClass} msglayout">

   <img src=${message.avatar} alt="image of ${message.person}">
   <p data-id="${message.id}">
           <span class="namestyling">${message.person}</span>  
           <span class="actionstyling" >${message.action}</span>  
           <span class="activitystyling ${colorChessClub}">${message.activity}</span> 
           <i class="${redDot} fa fa-solid fa-circle fa-sm" style="color: #ff1100;font-size:8px;"></i>

Iterating through this component, offered a visual demonstration of align-items:baseline. Using baseline reorganized my button and input element.

Most difficult part so far is removing the mobile share icons list when the link share button is clicked.

Built the steps review card using margins. Was refreshing when the thought occurred to me.

I fell victim to image and background size manipulation. Still need to iterate a lot more around around image and background manipulation.

The JS was fun, a great reminder of classList.toggle and a welcome introduction to classList.contains. Also tried experimenting with a database and data attributes, still working through that solution.

Struggled to overlap and align perfectly the average score card over the individual score cards.

Used display grid, grid row: 1fr. That didn't automatically align the horizontal lines of both cards. I used align self as well as height adjustments to align the cards.

Also used negative margins and index to create an overlap.

This challenge was difficult because I had little understanding of viewport width and viewport height.

My intention is to learn about (vw and vh) in detail and how to manipulate them for positioning. Any resources are welcome.

While setting the grid template columns, I firstly used repeat(3,1fr). However, doing so centered the car related content. Setting grid template columns to repeat(3,350px) automatically aligned content left, creating more space on the right of the car content.

Still curious what the cause is.

Border-radius has to be set to zero, ignoring to do so means media query automatically inherits existing border radius.

I found it difficult to

1. Fit the <img> in a container. Switched to background-image, worked fine. Until 2.I had to hardcode heights and widths for the container, the image and text content. It was definitely dry.

Learning: Project made me build mobile first. This is my first time building mobile first. Rewired my thinking.

1. I couldn't tell which color to use for the box-shadow glow effect. Any recommended tools?

The colors are sometimes confusing.

I was excited to learn that classes set for elements in script.js could be styled in the style.css file.

The colors in the style guide are different from those in the design. Struggled to find the corresponding color sometimes.

Why does emailInput variable need to be declared inside the fxn for validateEm() to run properly. Can anyone explain ?

Why use 3 ifs instead of if else?

1. To make the homepage responsive I used grid with span 2 repetitively on all children of the grid container. For example: #side-img-1{ grid-area:5/span 2; } #side-img-2{ grid-area:6/span 2; } #side-img-3{ grid-area:7/span 2;

In the spirit of dry, whats a more efficient approach ?