Skip to content

Commit 8109264

Browse files
FoamyGuyFoamyGuy
committed
initial files
1 parent 87600ac commit 8109264

File tree

6 files changed

+175
-0
lines changed

6 files changed

+175
-0
lines changed

‎css/style.css

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
body, html{
2+
background-color: #303030;
3+
color: #B0B0B0;
4+
font-family: "Bitstream Vera Sans Mono", sans-serif;
5+
}
6+
7+
input{
8+
background-color: #404040;
9+
color: #B0B0B0;
10+
}
11+
12+
button{
13+
background-color: #5050AA;
14+
color: #B0B0B0;
15+
padding-left: 30px;
16+
padding-right: 30px;
17+
}
18+
19+
.requirement_row img{
20+
position: relative;
21+
top: 3px;
22+
23+
}
24+
25+
.indent_1 span{
26+
position: relative;
27+
top: -3px;
28+
}
29+
30+
.lib_input{
31+
background-color: rgba(0,0,0,0);
32+
border: 0;
33+
font-family: "Bitstream Vera Sans Mono", sans-serif;
34+
font-size: 19px;
35+
width: 90%;
36+
position: relative;
37+
top: -4px;
38+
}
39+
40+
.requirement_row{
41+
height: 28px;
42+
}
43+
44+
.requirement_row:nth-child(odd){
45+
background-color: #404040;
46+
}
47+
48+
#input_container{
49+
position: relative;
50+
left: 100px;
51+
top: 6px;
52+
}
53+
54+
#requirements_list_container{
55+
padding: 40px;
56+
border: 2px dashed #B0B0B0;
57+
position: relative;
58+
top: 40px;
59+
left: 100px;
60+
width: 600px;
61+
}
62+
63+
.hidden_file{
64+
opacity: 50%;
65+
}
66+
67+
.indent_1{
68+
margin-left: 27px;
69+
}
70+
.indent_2{
71+
margin-left: 54px;
72+
}
73+
74+
.icon_img{
75+
width: 24px;
76+
}

‎img/file.png

12.3 KB
Loading

‎img/folder.png

5.58 KB
Loading

‎index.html

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
6+
<title></title>
7+
<link href="css/style.css" rel="stylesheet">
8+
</head>
9+
<body>
10+
11+
<div id="input_container">
12+
<label for="name_input">Name:</label>
13+
<input id="name_input" type="text">
14+
<button id="add_btn">Add</button>
15+
</div>
16+
<div id="requirements_list_container">
17+
<div class="requirement_row">
18+
<img class="icon_img" src="img/folder.png">
19+
<span>CIRCUITPY</span>
20+
</div>
21+
<div class="requirement_row">
22+
<span style="position: relative; top: -4px">&#9654;</span>
23+
<div style="display: inline;" class="hidden_file">
24+
<img class="icon_img" src="img/folder.png">
25+
<span style="position: relative; top: -3px;">.fseventsd</span>
26+
</div>
27+
</div>
28+
<div class="requirement_row">
29+
<div class="indent_1 hidden_file">
30+
<img class="icon_img" src="img/file.png">
31+
<span>.metadata_never_index</span>
32+
</div>
33+
34+
</div>
35+
<div class="requirement_row indent_1">
36+
<img class="icon_img hidden_file" src="img/file.png">
37+
<span class="hidden_file">.Trashes</span>
38+
</div>
39+
<div class="requirement_row">
40+
<div class="indent_1">
41+
<img class="icon_img" src="img/file.png">
42+
<span>boot_out.txt</span>
43+
</div>
44+
</div>
45+
<div class="requirement_row">
46+
<div class="indent_1">
47+
<img class="icon_img" src="img/file.png">
48+
<span>code.py</span>
49+
</div>
50+
</div>
51+
<div class="requirement_row">
52+
<span style="position: relative; top: -4px">&#9660;</span>
53+
<div style="position: relative; left: -4px; display: inline;" class="">
54+
<img class="icon_img" src="img/folder.png">
55+
<span>lib</span>
56+
</div>
57+
</div>
58+
59+
</div>
60+
61+
<script src="js/jquery-3.6.0.min.js"></script>
62+
<script src="js/script.js"></script>
63+
</body>
64+
</html>

‎js/jquery-3.6.0.min.js

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/script.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
let $name_input = $("#name_input");
2+
let $add_btn = $("#add_btn");
3+
4+
let $requirement_container = $("#requirements_list_container");
5+
6+
$name_input.on('keypress',function(e) {
7+
if (e.which == 13) {
8+
$add_btn.click();
9+
}
10+
});
11+
12+
$add_btn.click(function () {
13+
if ($name_input.val() !== "") {
14+
let $new_img, $new_text, $new_div;
15+
if ($name_input.val().endsWith(".mpy") || $name_input.val().endsWith(".py")) {
16+
$new_img = $('<img class="icon_img" src="img/file.png">');
17+
}else{
18+
$new_img = $('<img class="icon_img" src="img/folder.png">');
19+
}
20+
21+
$new_text = $(`<input class="lib_input" type="text" value="${$name_input.val()}">`);
22+
23+
$new_div = $('<div class="requirement_row"></div>');
24+
25+
$new_indent_div = $('<div class="indent_2"></div>');
26+
$new_indent_div.append($new_img);
27+
$new_indent_div.append(" ");
28+
$new_indent_div.append($new_text);
29+
$new_div.append($new_indent_div);
30+
31+
$requirement_container.append($new_div);
32+
}
33+
});

0 commit comments

Comments
 (0)