Week3 js homework #111
Merged
Week3 js homework #111
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
MinyMeep1
reviewed
Jan 17, 2021
Comment on lines
1
to
25
| ### Week 3 - Constructing an analog clock using HTML, JS, and CSS | ||
|
|
||
| *Students will now use the knowledge and experience they've gained from building a digital clock to code a live analog clock that changes based on the user's selected timezone.* | ||
|
|
||
| #### Task 3: Adding numbers to your clock | ||
|
|
||
| Next, we need to set up the numbers on our clock. Go back to the HTML document and define divs for numbers 1-12 inside the clock div tags. Name the classes for these divs "number number[digit]" so for the first digit, the tag would look like: | ||
|
|
||
| `<div class="number number1">1</div>` | ||
|
|
||
| Repeat this for numbers 2-12. | ||
|
|
||
| Next, open up your `style.css` file and define a block `.clock .number` - this will target all target all divs with a class starting with `"number"` within a div with a `"clock"` class, a.k.a. all of the divs we just made for our numbers on the clock. | ||
|
|
||
| Here, you'll want to customize the appearance of the numbers on your clock. Firstly, and most importantly, set the `position` to `absolute` so that the numbers are anchored to the clock. Next, set the width and height to 100%. The method we're going to use to get the numbers in the correct position will involve us making a square around each number that we will later rotate. Setting the height and width to 100% will ensure that this square is always the same size as the clock background. | ||
|
|
||
| *Tip: You may want to add a border inside the `.clock .number` CSS section to help you better visualize what's going on in these next steps.* | ||
|
|
||
| Set the `text-align` to `center` so that the numbers stay centered at the top of the clock, no matter the clock's size. You may also want to change the font family or size here, as well as the text color. | ||
|
|
||
| At this point your clock should look something like this: | ||
|
|
||
|  | ||
|
|
||
| You'll notice that the numbers overlap in one spot and you can't read them. In the next step we'll use rotation tools to change the positioning of each digit on the clock. No newline at end of file |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
MinyMeep1
reviewed
Jan 17, 2021
Comment on lines
7
to
35
| To move the digits to their respective positions on the clock, we could individually position them using the `top` and `left` attributes, but this would be a very tedious task. Instead, we're going to use a trick to change the position of each digit using the `rotate()` tool in the `transform` attribue. | ||
|
|
||
| First, define a variable `--rotation` and set it equal to 0. This variable will hold the number of degrees that the text will be rotated so that it sits in the right position on the clock. Make sure to include the preceding dashes when defining `--rotation` as this is what will make this value a variable. Your code should look something like this: | ||
|
|
||
| `--rotation: 0;` | ||
|
|
||
| Next, use the `transform` attribute to call `rotate()` on your rotation variable. When using a variable in CSS, its important to surround your variable's name in the `var()` function like so: | ||
|
|
||
| `transform: rotate(var(--rotation));` | ||
|
|
||
| This line of code will rotate all divs inside both the clock class and any class with "number" in its name to rotate by a varying degree. Right now, this degree is set to 0 for all numbers. | ||
|
|
||
| Now, all that's left to do is assign varying degrees for each of the numbers. Since there are 12 numbers on a clock, and a circular clock is 360 degrees, each number will be placed 30 degrees apart. Starting with number 1 and ending with number 11, set the rotation variable of each number to increase by 30 degrees. | ||
|
|
||
| For example, the code for number 1 will look like this: | ||
|
|
||
| `.clock .number1 { --rotation: 30deg; }` | ||
|
|
||
| You should repeat this until you reach number 11, which should look like this: | ||
|
|
||
| `.clock .number11 { --rotation: 330deg; }` | ||
|
|
||
| If you refresh your HTML page, you'll see there's no need to change anything for `.clock .number12` since the 12 is sitting at the top of the clock by default. | ||
|
|
||
| Now, your clock should look something like this: | ||
|
|
||
|  | ||
|
|
||
| *Don't forget to delete the border from `.clock .number` after this step if you included it earlier.* |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
MinyMeep1
reviewed
Jan 17, 2021
| #### Task 5: Designing the hands of your clock | ||
|
|
||
| Style the hands so that the seconds hand is the longest and thinnest, and the hour hand is shortest and widest. These hands should also be set to rotate given a degree. No newline at end of file | ||
| Inside of your clock div define three divs - these will represent the hands on our clock. For each div, set the class to "hand [type of hand]" and set the data-* attribute to `data-[type of hand]-hand`. For example, the div tag for the hour hand would look like: |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
Update for 3.5
emsesc
requested changes
Jan 18, 2021
emsesc
approved these changes
Jan 22, 2021
Collaborator
|
@danzelo1 Resolve conflicts, but everything else is good |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.