Skip to content

Commit 133ff2b

Browse files
NateWrNateWr
committed
Add exercisee on linking CSS and JS files
1 parent 0f8a735 commit 133ff2b

File tree

5 files changed

+238
-1
lines changed

5 files changed

+238
-1
lines changed

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"serve": "live-server",
99
"1": "live-server --open=week-1/1-parent-child",
1010
"2": "live-server --open=week-1/2-html-attributes",
11-
"3": "live-server --open=week-1/3-semantic-html"
11+
"3": "live-server --open=week-1/3-semantic-html",
12+
"4": "live-server --open=week-1/4-links-scripts"
1213
}
1314
}

‎week-1/4-links-scripts/css/missing-styles.css

+105
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
/* Base site colors and fonts */
2+
body,
3+
html {
4+
background: #25262f;
5+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
6+
font-size: 16px;
7+
line-height: 1.5em;
8+
}
9+
10+
/* Wrap the site content in a centred box */
11+
.site-wrapper {
12+
max-width: 30rem;
13+
margin-top: 5rem;
14+
margin-left: auto;
15+
margin-right: auto;
16+
background: #d6d8e1;
17+
border-radius: 3px;
18+
box-shadow: 0 2px 2px rgba(0,0,0,0.1);
19+
}
20+
21+
/* Buttons */
22+
.button {
23+
padding: 0.25em 0.5em;
24+
border: 1px solid rgba(0,0,0,0.1);
25+
border-radius: 2px;
26+
background: #4491db;
27+
color: #fff;
28+
text-decoration: none;
29+
cursor: pointer;
30+
}
31+
32+
/* Site title and top navigation */
33+
.site-header {
34+
display: flex;
35+
justify-content: space-between;
36+
align-items: center;
37+
padding: 0.5rem 1rem;
38+
color: rgba(255,255,255,0.9);
39+
background: #4491db;
40+
border-top-left-radius: 3px;
41+
border-top-right-radius: 3px;
42+
}
43+
44+
.site-header__title {
45+
margin: 0;
46+
font-size: 18px;
47+
font-weight: 700;
48+
}
49+
50+
/* Messages */
51+
.messages {
52+
padding-bottom: 0.5rem;
53+
}
54+
55+
.message {
56+
margin: 1rem 3rem 1rem 1rem;
57+
padding: 0.5rem;
58+
font-size: 14px;
59+
line-height: 1.8em;
60+
border-radius: 2px;
61+
background: #fff;
62+
box-shadow: 0 2px 2px rgba(0,0,0,0.1);
63+
}
64+
65+
.message__author {
66+
font-size: 12px;
67+
font-weight: 700;
68+
color: rgba(0,0,0,0.6);
69+
}
70+
71+
.message__content {
72+
margin: 0;
73+
}
74+
75+
.message__time {
76+
display: block;
77+
font-size: 12px;
78+
color: rgba(0,0,0,0.6);
79+
text-align: right;
80+
}
81+
82+
83+
/* Messages */
84+
.message {
85+
margin: 1rem 3rem 1rem 1rem;
86+
padding: 0.5rem;
87+
font-size: 14px;
88+
line-height: 1.8em;
89+
border-radius: 2px;
90+
background: #fff;
91+
box-shadow: 0 2px 2px rgba(0,0,0,0.1);
92+
}
93+
94+
/* Input area to add a new message */
95+
.add-message {
96+
padding: 0.5rem 1rem;
97+
}
98+
99+
.add-message__input {
100+
padding: 0.25em 0.5em;
101+
border: none;
102+
border-radius: 2px;
103+
box-shadow: 0 2px 2px rgba(0,0,0,0.1);
104+
background: #fff;
105+
}

‎week-1/4-links-scripts/index.html

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>4. Adding Links and Scripts - HTML, CSS and Git Exercises</title>
7+
</head>
8+
9+
<body>
10+
<div class="site-wrapper">
11+
<div class="site-header">
12+
<div class="site-header__title">Messages</div>
13+
</div>
14+
<div class="messages">
15+
<div class="message">
16+
<div class="message__author">Won</div>
17+
<p class="message__content">Where should we meet later?</p>
18+
<span class="message__time">7:25pm</span>
19+
</div>
20+
<div class="message">
21+
<div class="message__author">Luke</div>
22+
<p class="message__content">Let's meet at the iCafe in Merchant City. https://goo.gl/maps/aza4h9nUBhn</p>
23+
<span class="message__time">7:35pm</span>
24+
</div>
25+
<div class="message">
26+
<div class="message__author">Won</div>
27+
<p class="message__content">No, I prefer the one on Sauchiehall Street. https://goo.gl/maps/wKDoARcHDp42</p>
28+
<span class="message__time">7:38pm</span>
29+
</div>
30+
</div>
31+
</div>
32+
</body>
33+
34+
</html>

‎week-1/4-links-scripts/js/convertUrls.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/**
2+
* Convert URLs in messages into links
3+
*/
4+
(function() {
5+
var messages = document.querySelectorAll('.message__content');
6+
if (!messages.length) {
7+
alert('You have linked the JavaScript, but not at the correct location in the code. The script tag must be added near the end of the <body> tag.')
8+
}
9+
messages.forEach(function(message) {
10+
var urls = message.innerHTML.match(/\bhttps?:\/\/\S+/gi);
11+
if (urls) {
12+
urls.forEach(function(url) {
13+
message.innerHTML = message.innerHTML.replace(url, '<a href="' + url + '">' + url + '</a>');
14+
});
15+
}
16+
});
17+
})();

‎week-1/4-links-scripts/readme.md

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
# Adding Links and Scripts
2+
3+
This site is missing the CSS styles. It's also missing JavaScript code that will convert the URLs ("http://") into links that can be clicked.
4+
5+
Your colleagues have already written the .css and .js files. Complete the following steps to get this site working:
6+
7+
1. Add a `<link>` element that includes the `missing-styles.css` file in this exercise's directory. This should be placed in the `<head>` element.
8+
2. Add a `<script>` element that includes the `convertUrls.js` file in this exercise's directory. This should be placed at the end of the `<body>` element.
9+
10+
_Hint: When you are done, the messages should have the colors and layout like other exercises, and you should be able to click on the URLs ("http://") to go to them._
11+
12+
If you are having trouble, review the following information about including resources into an HTML page.
13+
14+
## Separation of Concerns
15+
16+
When building applications for the web, we separate content, presentation and behaviour.
17+
18+
- **Content** is the raw material of the website. It may be an article, a message, a video, or a list of links.
19+
- **Presentation** is the way that material is displayed. It controls the colors, typography and layout of the content.
20+
- **Behaviour** is anything that reacts to what the user does. When you type a message on Facebook and hit Send, the website is reacting to your behaviour.
21+
22+
To keep our projects organised, we separate these concerns and store them in different files. The content is written in HTML code and saved in .html files. The presentation is written in CSS code and saved in .css files. The behaviour is written in JavaScript code and saved in .js files.
23+
24+
## Linking a CSS file
25+
26+
HTML allows us to link a CSS file, so that we can apply presentation styles to our raw content. We use the `<link>` tag to do this:
27+
28+
```
29+
<link rel="stylesheet" href="style.css">
30+
```
31+
32+
This example has two attributes. The `rel` attribute indicates that our link is to a "stylesheet", a common name for a .css file. The `href` attribute points to the file.
33+
34+
This `<link>` tag goes into the `<head>` element of our HTML page:
35+
36+
```
37+
<html>
38+
<head>
39+
<title>Example Page</title>
40+
<link rel="stylesheet" href="style.css">
41+
</head>
42+
<body>
43+
<p>My page content.</p>
44+
</body>
45+
</html>
46+
```
47+
48+
## Linking a JavaScript file
49+
50+
HTML allows us to link a JavaScript file, so that we can react when viewers do something on our website. We use the `<script>` tag to do this:
51+
52+
```
53+
<script src="postMessage.js"></script>
54+
```
55+
56+
This example has one attribute. The `src` attribute points to the file.
57+
58+
Usually, the `<script>` tag appears near the end of the `<body>` element of our HTML page:
59+
60+
```
61+
<html>
62+
<head>
63+
<title>Example Page</title>
64+
</head>
65+
<body>
66+
<p>All of my page content.</p>
67+
<script src="postMessage.js"></script>
68+
</body>
69+
</html>
70+
```
71+
72+
## Linking to the right file location
73+
74+
When linking a CSS or JavaScript file, you must provide the correct path to the file. In this exercise, `missing-styles.css` is placed inside of a directory called `css`. Your `<link>` must point to the file inside of that directory:
75+
76+
```
77+
<link rel="stylesheet" href="css/missing-styles.css">
78+
```
79+
80+
Want to learn more? Read about [Relative Links](https://marksheet.io/html-links.html#relative-urls), [Absolute Links](https://marksheet.io/html-links.html#absolute-urls), and [how to choose the right one](https://marksheet.io/html-links.html#relative-or-absolute-links).

0 commit comments

Comments
 (0)