-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
252 lines (220 loc) · 14.3 KB
/
index.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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-5JV11MNWMR"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-5JV11MNWMR');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="JavaScript Projects, logic and DOM, with AI images">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<link rel="shortcut icon" href="./assets/ico-JS.png" type="image/png">
<link rel="stylesheet" href="./css/styles.css">
<title>PROYECTOS JavaScript</title>
</head>
<body class="moon">
<header>
<nav id="nav-header">
<span class="shadow firma" id="logo">conancos.dev</span>
<!-- <ul class="nav-ul">
<li>1- Uno</li>
<li>2- Dos</li>
<li>About</li>
</ul> -->
<button id="btn-darkMode" class='bx bx-ghost ghostSun' aria-label="Change to dark-mode"></button>
</nav>
</header>
<main>
<h1 class="titolMoon">JavaScript Projects</h1>
<!-- <hr> Me lo pienso -->
<section class="contents">
<article class="logic">
<h2>Logic Projects</h2>
<section class="cards-container">
<article class="card">
<div class="card-body"> <!--🧲-->
<h3 class="titolSun">Palindrome Checker</h3>
<p>Machine that checks whether a word or phrase is a palindrome</p>
<div class="buttons-card">
<a href="./logica-js/PalindromeCheckingMachine/index.html" target="_blank" title="Play ↗"><button class="pulsar-dark">View APP</button></a>
<a href="https://github.com/conancos/palindrome-checker" target="_blank" title="GitHub ↗"><button class="pulsar-dark">View Code</button></a>
</div>
</div>
<div class="card-img">
<img src="./logica-js/PalindromeCheckingMachine/images/pal512-ref.jpg" alt="img logic 1" loading="eager">
<span class="img-explication">
A palindrome is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation,
upper/lower case, and spacing.
</span>
</div>
</article>
<article class="card">
<div class="card-body"> <!--🧲🧲-->
<h3 class="titolSun">Roman Num Converter</h3>
<p>Machine that transforms numbers into Roman numerals</p>
<!-- <p>2nd JavaScript Logic Project, Injected into a Beautiful Web Application with AI-generated images</p> -->
<div class="buttons-card">
<a href="./logica-js/RomanNumeralConverter/index.html" target="_blank" title="Play ↗"><button class="pulsar-dark">View APP</button></a>
<a href="https://github.com/conancos/roman-num-converter" target="_blank" title="GitHub ↗"><button class="pulsar-dark">View Code</button></a>
</div>
</div>
<div class="card-img">
<img src="./logica-js/RomanNumeralConverter/images/conversor555-PRO512.jpg" alt="img logic 2" loading="eager">
<span class="img-explication">
Convert the given number into a roman numeral.
All roman numerals answers should be provided in upper-case, and must be between 0 and 4000.
</span>
</div>
</article>
<article class="card">
<div class="card-body"> <!--🧲🧲🧲-->
<h3 class="titolSun">Caesar Cipher Machine</h3>
<p>Machine that encrypts or decrypts texts and makes them passwords undecipherables
</p>
<div class="buttons-card">
<a href="./logica-js/CaesarCipherMachine/index.html" target="_blank" title="Play ↗"><button class="pulsar-dark">View APP</button></a>
<a href="https://github.com/conancos/caesar-cipher-machine" target="_blank" title="GitHub ↗"><button class="pulsar-dark">View Code</button></a>
</div>
</div>
<div class="card-img">
<img src="./logica-js/CaesarCipherMachine/images/512-cipher-1.jpg" alt="img logic 3" loading="eager">
<span class="img-explication">
One of the simplest and most well-known ciphers is the Caesar Displacement Cipher.
A common modern use is the ROT13 encryption.
</span>
</div>
</article>
<article class="card">
<div class="card-body"> <!--🧲🧲🧲🧲-->
<h3 class="titolSun">Phone Num Validator</h3>
<p>Machine that validates United States telephone number formats</p>
<div class="buttons-card">
<a href="./logica-js/PhoneNumberValidator/index.html" target="_blank" title="Play ↗"><button class="pulsar-dark">View APP</button></a>
<a href="https://github.com/conancos/phone-number-validator" target="_blank" title="GitHub ↗"><button class="pulsar-dark">View Code</button></a>
</div>
</div>
<div class="card-img">
<img src="./logica-js/PhoneNumberValidator/images/512-validator-4.jpg" alt="img logic 4" loading="eager">
<span class="img-explication">
The system includes several pre-established formats, discarding invalid patterns for a specific geographical area.
</span>
</div>
</article>
<article class="card">
<div class="card-body"> <!--🧲🧲🧲🧲🧲-->
<h3 class="titolSun">The Jewel Show</h3>
<p>Absolute precision machine, handling decimals with JavaScript</p>
<div class="buttons-card">
<a href="./logica-js/CashRegister/index.html" target="_blank" title="Play ↗"><button class="pulsar-dark">View APP</button></a>
<a href="https://github.com/conancos/the-jewel-show" target="_blank" title="GitHub ↗"><button class="pulsar-dark">View Code</button></a>
</div>
</div>
<div class="card-img">
<img src="./logica-js/CashRegister/images/Unknown-512-ref.jpg" alt="img logic 5" loading="eager">
<!--512-cashRegister-73.jpg-->
<span class="img-explication">
Delight yourself with these wonderful jewels. Try to empty the money from the return box, and you'll receive a reward. Remember the price of the jewels; you will also have the chance to earn the Unknown stone.
</span>
</div>
</article>
</section>
</article>
<article class="dom">
<h2>DOM Manipulation Projects</h2>
<section class="cards-container">
<article class="card">
<div class="card-body">
<h3 class="titolSun">Colors Palette</h3>
<p>Randomly generate, and add or delete a pretty colors to your palette</p>
<div class="buttons-card">
<a href="./dom-js/PaletaDeColores/index.html" target="_blank" title="Play ↗"><button class="pulsar-dark">View APP</button></a>
<a href="https://github.com/conancos/paleta-colores-dom" target="_blank" title="GitHub ↗"><button class="pulsar-dark">View Code</button></a>
</div>
</div>
<div class="card-img">
<img src="./dom-js/PaletaDeColores/pallette512-2.jpg" alt="img dom 1" loading="lazy">
<span class="img-explication">
Immerse yourself in a simple app that will give you amazing colors for your toys or projects.
</span>
</div>
</article>
<article class="card">
<div class="card-body">
<h3 class="titolSun">2nd Project DOM</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti, sequi hic magni itaque illo ex ut, exercitationem autem eaque inventore voluptatem necessitatibus. Tempore, optio quod.</p>
<div class="buttons-card">
<a href="#"><button class="pulsar-dark no-operative">View APP</button></a>
<a href="#"><button class="pulsar-dark no-operative">View Code</button></a>
</div>
</div>
<div class="card-img">
<img src="./assets/enobras1.jpg" alt="img dom 2" loading="lazy">
<span class="img-explication">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, dolorum.
</span>
</div>
</article>
<article class="card">
<div class="card-body">
<h3 class="titolSun">3rd Project DOM</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis debitis tenetur inventore corrupti nam quae praesentium eum accusantium. Assumenda, ullam eum aliquam velit nostrum vero.</p>
<div class="buttons-card">
<a href="#"><button class="pulsar-dark no-operative">View APP</button></a>
<a href="#"><button class="pulsar-dark no-operative">View Code</button></a>
</div>
</div>
<div class="card-img">
<img src="./assets/enobras1.jpg" alt="img dom 3" loading="lazy">
<span class="img-explication">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis, ipsam!
</span>
</div>
</article>
<article class="card">
<div class="card-body">
<h3 class="titolSun">4th Project DOM</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique, saepe? Alias nesciunt quis quae, molestias reiciendis ratione omnis tempora ipsam, in aliquid voluptate fugiat ullam?</p>
<div class="buttons-card">
<a href="#"><button class="pulsar-dark no-operative">View APP</button></a>
<a href="#"><button class="pulsar-dark no-operative">View Code</button></a>
</div>
</div>
<div class="card-img">
<img src="./assets/enobras1.jpg" alt="img dom 4" loading="lazy">
<span class="img-explication">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia, suscipit.
</span>
</div>
</article>
<article class="card"> <!-- 5th project-->
<div class="card-body">
<h3 class="titolSun">5th Project DOM</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Omnis, maiores sunt quod expedita odio consectetur quos similique sequi sed quia ullam voluptas magni, neque explicabo.</p>
<div class="buttons-card">
<a href="#"><button class="pulsar-dark no-operative">View APP</button></a>
<a href="#"><button class="pulsar-dark no-operative">View Code</button></a>
</div>
</div>
<div class="card-img">
<img src="./assets/enobras1.jpg" alt="img dom 5" loading="lazy">
<span class="img-explication">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur, nesciunt?
</span>
</div>
</article>
</section>
</article>
</section>
</main>
<footer>
<nav id="nav-footer"></nav>
</footer>
<script src="./scripts/scripts.js"></script>
<script src="./scripts/dark-mode.js"></script>
</body>
</html>