forked from danna/html_practice
Compare commits
3 Commits
Author | SHA1 | Date | |
---|---|---|---|
f8deca4cbf | |||
36cde5283f | |||
2ba10858ea |
14
mycss.css
Normal file
14
mycss.css
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
html {
|
||||||
|
background-color: green;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
background: red;
|
||||||
|
padding: 10px;
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
20
myhtml.html
Normal file
20
myhtml.html
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<script src="myjs.js" defer></script>
|
||||||
|
<link rel="stylesheet" href="mycss.css"/>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<title>Dan's Homepage >3<</title>
|
||||||
|
<link rel="icon" href="file:///Users/dan/Pictures/IMG_9295.JPG" type="image/x-icon" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<img src="file:///Users/dan/Pictures/IMG_9295.JPG" alt="My test image" width="500" />
|
||||||
|
<h2>Hi, my name is Dan.</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Education</li>
|
||||||
|
<li>Work Experience</li>
|
||||||
|
<li>Languages</li>
|
||||||
|
<li>Hobbies</li>
|
||||||
|
</ul>
|
||||||
|
</body>
|
||||||
|
</html>
|
21
myjs.js
Normal file
21
myjs.js
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
const list = document.createElement('ul');
|
||||||
|
const info = document.createElement('p');
|
||||||
|
const html = document.querySelector('html');
|
||||||
|
|
||||||
|
info.textContent = 'Below is a dynamic list. Click anywhere on the page to add a new list item. Click an existing list item to change its text to something else.';
|
||||||
|
|
||||||
|
document.body.appendChild(info);
|
||||||
|
document.body.appendChild(list);
|
||||||
|
|
||||||
|
html.onclick = function() {
|
||||||
|
const listItem = document.createElement('li');
|
||||||
|
const listContent = prompt('What content do you want the list item to have?');
|
||||||
|
listItem.textContent = listContent;
|
||||||
|
list.appendChild(listItem);
|
||||||
|
|
||||||
|
listItem.onclick = function(e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
const listContent = prompt('Enter new content for your list item');
|
||||||
|
this.textContent = listContent;
|
||||||
|
}
|
||||||
|
}
|
@ -1,2 +0,0 @@
|
|||||||
untracked file
|
|
||||||
untracked file
|
|
Loading…
Reference in New Issue
Block a user