Skip to content

Commit 9ab94d9

Browse files
jamesqquickjamesqquick
committed
Checking in source code, readme's, and screenshots
1 parent f5c833b commit 9ab94d9

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

75 files changed

+4607
-1
lines changed

‎Part-1/README.md

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
2+
## 1. Getting Familiar With the Tools (Visual Studio Code, Google Chrome, and Chrome Developer Tools)
3+
4+
[Go to the video]()
5+
6+
7+
8+
In this video, we will talk about the tools we will be using in this course. I want to make sure that everyone is on the same page as we progress throughout the course. We will talk about various shortcuts and extensions in Visual Studio Code as well as a brief introduction to the Chrome Developer Tools to inspect elements and their styles as well as the console to inspect output from out Javascript. It is highly recommended that you attempt to follow along and use the shortcuts that are available as they will help speed up your development process in the future!
9+
10+
### References
11+
12+
- [Download Google Chrome](https://www.google.com/chrome/browser/desktop/index.html)
13+
14+
- [Visual Studio Code](https://code.visualstudio.com/)
15+
16+
- [Chrome Developer Tools](https://developer.chrome.com/devtools)
17+
18+
- [Visual Studio Code Key Bindings](https://code.visualstudio.com/docs/getstarted/keybindings)
19+
20+
- [Visual Studio Code Marketplace for Extensions/Plugins](https://marketplace.visualstudio.com/)
21+
22+
- [Emmet Shortcuts](https://docs.emmet.io/)

‎Part-1/app.css

Whitespace-only changes.

‎Part-1/app.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
console.log("Hello from Javascript");

‎Part-1/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+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Link Saver</title>
9+
<link rel="stylesheet" href="app.css">
10+
</head>
11+
12+
<body>
13+
14+
<!-- Emmet Practice -->
15+
16+
<!-- Create an H1 -->
17+
<!-- h1 -> tab -->
18+
19+
<!-- Create a Div with class of container -->
20+
<!-- .container -> tab -->
21+
22+
<!-- Create an H1 with class of header -->
23+
<!-- h1.header -> tab -->
24+
25+
<!-- Create a ul with a li child -->
26+
<!-- ul>li -< tab -->
27+
28+
<!-- Create a ul with 3 li children -->
29+
<!-- ul>li*3 -->
30+
31+
<script src="app.js"></script>
32+
</body>
33+
34+
</html>

‎Part-10/README.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
## 10. Adding Edit and Delete Functionality
2+
3+
[Go to the video]()
4+
5+
6+
7+
In this video, we will add the ability to edit and delete links. We will save code by reusing the same add link form and event listener, both when a user is adding a new link and editing an old link. This video will serve as a reinforcement of previous videos in working with DOM elements, event listeners, arrow functions, etc.

‎Part-10/app.css

+162
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
/* ------------------------- */
2+
/* Variables */
3+
/* ------------------------- */
4+
5+
:root {
6+
--main-accent:#fc575e;
7+
--light-accent-color: #f0f1f5;
8+
--dark-accent-color: #333;
9+
--main-grey: #555;
10+
}
11+
12+
/* ------------------------- */
13+
/* Resets */
14+
/* ------------------------- */
15+
*{
16+
margin: 0;
17+
padding: 0;
18+
font-family: Arial, Helvetica, sans-serif;
19+
box-sizing: border-box;
20+
}
21+
22+
/* ------------------------- */
23+
/* Global */
24+
/* ------------------------- */
25+
body {
26+
background-color: var(--light-accent-color);
27+
}
28+
29+
a {
30+
text-decoration: none
31+
}
32+
33+
a:hover {
34+
cursor: pointer;
35+
}
36+
37+
.container {
38+
width: 80%;
39+
margin: 0 auto;
40+
}
41+
42+
.hidden {
43+
display: none;
44+
}
45+
46+
.header {
47+
font-size: 24px;
48+
margin-bottom: 10px;
49+
color: var(--main-grey);
50+
}
51+
52+
53+
/* ------------------------- */
54+
/* Navbar */
55+
/* ------------------------- */
56+
#nav {
57+
height: 60px;
58+
background: var(--dark-accent-color);
59+
margin-bottom: 25px;
60+
}
61+
62+
#navContainer {
63+
display: flex;
64+
flex-direction: row;
65+
height: 100%;
66+
align-items: center;
67+
justify-content: space-between;
68+
}
69+
70+
.nav-header {
71+
color: var(--light-accent-color);
72+
font-size: 28px;
73+
}
74+
75+
#addBtn {
76+
font-size: 24px;
77+
color: var(--light-accent-color);
78+
}
79+
80+
/* ------------------------- */
81+
/* Panel */
82+
/* ------------------------- */
83+
.panel {
84+
background: white;
85+
border-radius: 5px;
86+
box-shadow: 0px 0px 3px var(--main-grey);
87+
padding: 40px 20px 20px 20px;
88+
margin: 10px;
89+
}
90+
91+
92+
93+
/* ------------------------- */
94+
/* Form */
95+
/* ------------------------- */
96+
.form-control {
97+
width: 100%;
98+
margin: 8px 0;
99+
height: 34px;
100+
border-radius: 5px;
101+
border: 1px solid var(--main-grey);
102+
padding: 5px 15px;
103+
font-size: 14px;
104+
color: var(--main-grey);
105+
}
106+
107+
/* ------------------------- */
108+
/* Buttons */
109+
/* ------------------------- */
110+
input[type='submit'], button {
111+
padding: 8px 22px;
112+
border-radius: 5px;
113+
border: 1px solid var(--main-accent);
114+
background-color: var(--main-accent);
115+
color: var(--light-accent-color);
116+
font-size: 16px;
117+
}
118+
119+
input[type='submit']:hover, button:hover {
120+
cursor: pointer;
121+
color: var(--main-accent);
122+
background: white;
123+
}
124+
125+
.btn-sm {
126+
font-size: 10px;
127+
padding: 5px 10px;
128+
}
129+
130+
/* ------------------------- */
131+
/* Link */
132+
/* ------------------------- */
133+
134+
.link {
135+
position: relative;
136+
}
137+
138+
.link-options {
139+
position: absolute;
140+
top: 5px;
141+
right: 5px;
142+
}
143+
144+
.link-date {
145+
font-size: 14px;
146+
font-style: italic;
147+
}
148+
149+
.category {
150+
font-weight: bold;
151+
padding: 5px;
152+
margin: 5px 2px;
153+
border: 1px solid var(--main-accent);
154+
border-radius: 5px;
155+
font-size: 10px;
156+
background-color: var(--main-accent);
157+
color: var(--light-accent-color);
158+
}
159+
160+
#addedCategories {
161+
margin-bottom: 15px;
162+
}

0 commit comments

Comments
 (0)