Lecture 08: Codeponents pt. 2

Jessica Trinh
Jan 31 · 3 min read

Today’s lecture is dedicated to give students practice building codeponents.

Practice Problems

Complete Try this! (1c) if you haven’t already. Then apply a similar technique to make the 3 rectangles different colors.

Everyone must have a solid understanding of codeponent basics before we move on. You should now have enough tools to complete the Try this! (2) without assistance.

Try this! (2): Create a codeponent called “MySquare” with a custom side length. Use MySquare to make two squares anywhere on your page. They should both be able to hold text in the (horizontal and vertical) center. Let their fallback font be serif. Both will have different color backgrounds and different color font texts. Write these colors as hexadecimal values with the general shades specified. Recall: you can hover over a color in .css and use the built in color picker to help you out with this.

The first MySquare should have:

  • yellow background color
  • “Indie Flower” font with a font size of 10px
  • purple text that reads “Square 1”

The second MySquare should have:

  • red background color
  • “Shadows Into Light” font with a font size of 20px
  • black text that reads “Square 2”

If you were able to complete the above exercise by yourself, congratulations on writing your first codeponent! You are exactly at the level you should be at this point. Try out the next exercises if you’d like additional practice, but you aren’t required to.

Now if you asked for help, no worries — practice makes perfect. Please go through as many Try this! exercises as you need until you are able to independently write a codeponent. You may refer to past lecture notes if needed.

Try this! (3): Make a codeponent called “Snowman.” Use this to stack three circles vertically adjacent to one another. You might be wondering how, since we’ve only used <div> to make rectangles and squares so far. Go about this task as you would normally, but set border radius to 50%. This rounds off the <div>’s corners to give it a circular appearance. Refer to colors by their names instead of their hex values for this exercise.

Top Snowman: height and width both 100px, lightblue background color

Middle Snowman: height and width both 120px, skyblue background color

Bottom Snowman: height and width both 140px, darkblue background color

Try this! (4): Make a codeponent called “PointingTriangle.” You can make a rightward pointing yellowgreen triangle by using the following style attributes:

borderTop: “50px solid transparent”, borderLeft: “100px solid yellowgreen”, borderBottom: “50px solid transparent”

With that in mind, figure out what parameter values to pass through to make a maroon triangle that points upward.

Try this! (5): Repeat exercise 3, but figure out how to make the circles ovals instead. Retain the property of make them increasingly large going down.

Try this! (6): Make a Circle codeponent, and use it to place two circles of different colors and anywhere on your webpage. Give one circle an opacity of 0.5, and have it display the letter ‘a’ in the middle. Give the other circle an opacity of 0.2, and have it display the letter ‘b’ in the middle. Both circles should be the same size but have different font families.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

[Aside] Common mistakes that compiler may not catch:

  • Hex color has wrong number of numbers. Only 3 or 6 digits are accepted (invalid: “#08080” // valid: “#008080”)
  • Neglecting case sensitivity in the names of custom values. Must be identical everywhere you use it. (invalid: calling custom value myColor in Shapes.js but referring to it as mycolor in App.js // valid: either calling it myColor in both or calling it mycolor in both, as long as you are consistent with you own naming convention)
  • Specifying nonexistent font family names. Watch out for typos. (invalid: “Indie Flowers” // valid: “Indie Flower”)
  • Not separate style names with commas. (invalid: style = {{backgroundColor: “yellow” color: “green”}} // valid: style = {{backgroundColor: “yellow”, color: “green”}})
  • Forgetting to pass custom attribute in as parameter. (invalid: <div>{username}</div> without passing ({username}) => into codeponent’s parameter // valid: passing all custom values into ( ) parameter)
  • Importing font family into wrong location (invalid: putting it directly into a .js file // valid: putting it into index.html in public directory)

XLRN 801.WD: Introduction to Front-End Web Development

This publication contains all the lecture notes from XLRN 801.WD.

Jessica Trinh

Written by

University of California, Santa Barbara

XLRN 801.WD: Introduction to Front-End Web Development

This publication contains all the lecture notes from XLRN 801.WD.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade