FromDayToNight-CreatingInteractiveColorPalettesWithJavaScript #240
Conversation
new correct pr!
added loom video to proposal.md
|
|
||
| Congrats on adding an interactive color component to your Tiny City! | ||
|
|
||
| Throughout this tutorial, we created and designed buttons in JavaScript, and learned how to stylize and link features to these buttons in HTML and CSS. |
There was a problem hiding this comment.
Yay, thanks for reviewing my blog!
| @@ -0,0 +1,394 @@ | |||
| # From Day to Night - Creating Interactive Color Palettes with JavaScript | |||
|
|
|||
| Now that you have completed setting up your Tiny City in HTML and CSS, have you ever wondered what your Tiny City would look like at night? Let's create a day-to-night color palette change by adding interactive buttons with JavaScript! JavaScript is a programming language that allows web developers to add interactive designs to websites, such as buttons, pop-up windows, and so on. | |||
There was a problem hiding this comment.
You say interactive here twice, I would change "adding interactive buttons" to just "adding buttons" since you say interactive designs later!
| ... | ||
| ``` | ||
|
|
||
| To prepare for our planned color changes, we shall assign an `id` attribute for each element that is involved, and this allows these elements to be stylized in CSS and manipulate in JavaScript. |
There was a problem hiding this comment.
"shall" seems a little formal for this blog, I would say "we should" or "we need to"
| ... | ||
| ``` | ||
|
|
||
| By setting the `position` attribute to `relative`, this will allow us to adjust the location of the buttons from its "normal" position, which is the center of the webpage, using the `top` and `right` attributes—the values that we inputted will move buttons to the area below our sun. We will also set the buttons' color to white using the `background-color` attribute. |
| ... | ||
| ``` | ||
|
|
||
| For all the border properties to show up, the `border-style` attribute first must be set. Above, we set our buttons' borders to `solid` that will result in a solid colored border. Feel free to experiment with different kinds of borders from this [CSS Border Styles list](https://www.w3schools.com/css/css_border.asp). As for the additional border attributes, `border-width` and`border-color` adjust the border's thickness and color, respectively, and `border-radius` adjusts the roundness of the corners of the border—this particular property allows up to four values, each value accessing each corner of the element. |
There was a problem hiding this comment.
"the border—this particular property" — for these dashes, you need a space on either side — like this! (please change this for all the big dashes that act like this one. You don't use spaces when you are using these smaller-sized dashes to connect to words)
| ... | ||
| ``` | ||
|
|
||
| Since we already established the `moon` element for our planned color palette change, we should also choose the color we want to our night sky. |
There was a problem hiding this comment.
"... the color we want" our night sky to be? It sounds a little off the way you've said it
|
|
||
| Congrats on adding an interactive color component to your Tiny City! | ||
|
|
||
| Throughout this tutorial, we created and designed buttons in JavaScript, and learned how to stylize and link features to these buttons in HTML and CSS. |
There was a problem hiding this comment.
Please add a little more to the conclusion — even just a sentence. Options include further implementations of what you learned, other features that they can try to add on their own, why these skills are useful in the real world, etc. This helps wrap things up a little more!
|
@alliebailey Thank you so much for the helpful feedback! :) |
Reference to issue
Description of the changes proposed in the pull request
Link to Code SandBox
Link to Loom video (if blog/workshop completed)
Reviewers requested: