forked from ufxela/daily-tech-wksh-asst1
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstep7.html
53 lines (47 loc) · 2.62 KB
/
step7.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!-- Step 7: It all comes together... -->
<!-- We've got all of the building blocks for creating the full "look" of our form now! -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="step7.css">
</head>
<body>
<h1 id="the_title">So you wanna set up a Stanford Daily email newsletter?</h1>
<!-- Step 7.1
In the previous step, you added more text areas into the div with id "featured_fields3"
Bring those changes into this file
-->
<div id="featured_fields3">
<span>Featured content headline</span>
<textarea></textarea>
</div>
<!-- Step 7.2
Our newsletter would be pretty empty if it just contained a single article. In reality, in
addition to a single featured content headline, we have 3 articles from each of the following categories:
"News Article", "Ops Article", "Sports Article", "Arts & Life Article", "Grind Article", and "Satire Article".
Your job is to write the code for each of these items! Remember--copy & paste is your friend :)!
Also, note that you won't need an image link or image text for any of these new sections--our newsletter only includes
an image for the featured content article.
A note on CSS styling: you might notice that the current featured content headline div is given the
id "featured_fields3" and that corresponding styling in step7.css. As you might guess, this means
that we want you to also add "featured_fields2" and "featured_fields1" id selectors to the css file.
correspondingly, you'll want the first article's div in each group of 3 to have the id "featured_fields1",
the second article's div to have "featured_fields2", etc. You should also use CSS to make the color of
each featured_fields type have a different color!
-->
<button onclick="alert('This is an Alert!')">Submit all changes</button>
</body>
</html>
<!-- Step 7.3
As a final step for this assignment, you should go through each of your text areas and
give them a unique id. E.g. "featured_content_headline_text", "news_article_1_author_name_text", "life_article_1_links_text", etc.
You won't have to create a corresponding id selector in the css file, since we won't actually
be using these id's for styling! We won't be using these id's right now, so this may not initially make sense,
but it will next week!
-->
<!-- Step 7.4
Congrats! At this point, you've finished the entire look of the UI!
Now, all we need to do is write the "logic" to take the user's inputs and
create a preview of the newsletter from those inputs when the user clicks submit.
We'll be using Javascript for that!
-->