-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
205 lines (196 loc) · 16 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="0xelsherif's Code Snippets - Find useful code snippets and projects by Ahmed Hamza El-Sherif.">
<meta name="keywords" content="code snippets, web development, JavaScript, HTML, CSS">
<meta name="author" content="Ahmed Hamza El-Sherif">
<meta name="robots" content="index, follow">
<!-- Open Graph Meta Tags -->
<meta property="og:title" content="0xelsherif - Code Snippets">
<meta property="og:description" content="Find useful code snippets and projects by Ahmed Hamza El-Sherif.">
<meta property="og:image" content="https://avatars.githubusercontent.com/u/119296268?v=4?s=400">
<meta property="og:url" content="https://0xelsherif.github.io/snippets">
<meta property="og:type" content="website">
<!-- Twitter Card Meta Tags -->
<!-- <meta name="twitter:card" content="summary_large_image"> -->
<meta name="twitter:title" content="0xelsherif - Code Snippets">
<meta name="twitter:description" content="Find useful code snippets and projects by Ahmed Hamza El-Sherif.">
<meta name="twitter:image" content="https://avatars.githubusercontent.com/u/119296268?v=4?s=400">
<link rel="canonical" href="https://0xelsherif.github.io/snippets">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>0xelsherif - Code Snippets</title>
</head>
<body>
<div class="header">
<h2>0xelsherif Code Snippets</h2>
<div class="container">
<div id="greeting-container">
<p>
<span id="greeting"></span>
<span id="tag">Buddy</span>
</p>
</div>
<div id="toggle-container">
<label class="switch">
<input type="checkbox" id="themeToggle">
<span class="slider round"></span>
</label>
<span>Dark Mode</span>
</div>
</div>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>Word Counter Analyzer</h2>
<h5>Created on, APRIL 3, 2024</h5>
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="dyLJWRd" data-user="0xelsherif" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/0xelsherif/pen/dyLJWRd">
Word Counter Analyzer</a> by Ahmed Hamza El-Sherif (<a href="https://codepen.io/0xelsherif">@0xelsherif</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<p>A simple JavaScript function that calculates word count, letter count, reading time, speaking time, and paragraph count based on the text input.</p>
<div class="container">
<div class="badge-container">
<a href="https://github.com/0xelsherif/Word-Counter-Analyzer"><img src="https://img.shields.io/github/repo-size/0xelsherif/Word-Counter-Analyzer?style=social&logo=github"></a>
<a href="https://github.com/0xelsherif/Word-Counter-Analyzer"><img src="https://img.shields.io/github/stars/0xelsherif/Word-Counter-Analyzer.svg?style=social&label=Star" alt="GitHub Stars"></a>
<a href="https://github.com/0xelsherif/Word-Counter-Analyzer"><img src="https://img.shields.io/github/forks/0xelsherif/Word-Counter-Analyzer.svg?style=social&label=Fork" alt="GitHub Forks"></a>
<a href="https://github.com/0xelsherif/Word-Counter-Analyzer/discussions"><img src="https://img.shields.io/github/discussions/0xelsherif/Word-Counter-Analyzer?style=social&logo=github" alt="GitHub Discussions"></a>
<a href="https://github.com/0xelsherif/Word-Counter-Analyzer/issues"><img src="https://img.shields.io/github/issues/0xelsherif/Word-Counter-Analyzer?style=social&logo=github" alt="GitHub Issues"></a>
<a href="https://codepen.io/0xelsherif/full/dyLJWRd" target="_blank"><img src="https://img.shields.io/badge/CodePen-Project-blue?logo=codepen" alt="CodePen Project"></a>
<a href="https://0xelsherif.medium.com/mastering-text-analysis-with-javascript-a-step-by-step-guide-f9914fb5b5f1" target="_blank"><img src="https://img.shields.io/badge/Medium-Publication-green?logo=medium" alt="Medium Publication"></a>
</div>
<div class="flex items-center text-sm">
<div class="w-3 h-3 rounded-full mr-1 bg-yellow-300 opacity-60"></div>
<span class="text-base-content text-opacity-60">JavaScript</span>
</div>
</div>
</div>
<div class="card">
<h2>Time-based Greeting</h2>
<h5>Created on, FEBRUARY 7, 2024</h5>
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="XWGBggP" data-user="0xelsherif" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/0xelsherif/pen/XWGBggP">
Time-based Greeting</a> by Ahmed Hamza El-Sherif (<a href="https://codepen.io/0xelsherif">@0xelsherif</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<p>A simple webpage that dynamically greets the user based on the time of day, accompanied by a friendly tag. The greeting changes from "Good morning," to "Good afternoon," or "Good evening," depending on the current time. A waving hand emoji adds a playful touch to the message.</p>
<div class="container">
<div class="badge-container">
<a href="https://github.com/0xelsherif/Time-based-Greeting"><img src="https://img.shields.io/github/repo-size/0xelsherif/Time-based-Greeting?style=social&logo=github"></a>
<a href="https://github.com/0xelsherif/Time-based-Greeting"><img src="https://img.shields.io/github/stars/0xelsherif/Time-based-Greeting.svg?style=social&label=Star" alt="GitHub Stars"></a>
<a href="https://github.com/0xelsherif/Time-based-Greeting"><img src="https://img.shields.io/github/forks/0xelsherif/Time-based-Greeting.svg?style=social&label=Fork" alt="GitHub Forks"></a>
<a href="https://github.com/0xelsherif/Time-based-Greeting/discussions"><img src="https://img.shields.io/github/discussions/0xelsherif/Time-based-Greeting?style=social&logo=github" alt="GitHub Discussions"></a>
<a href="https://github.com/0xelsherif/Time-based-Greeting/issues"><img src="https://img.shields.io/github/issues/0xelsherif/Time-based-Greeting?style=social&logo=github" alt="GitHub Issues"></a>
<a href="https://codepen.io/0xelsherif/full/XWGBggP" target="_blank"><img src="https://img.shields.io/badge/CodePen-Project-blue?logo=codepen" alt="CodePen Project"></a>
<!-- <a href="https://0xelsherif.medium.com/building-a-text-highlighting-tool-for-web-pages-step-by-step-guide-839a9b0aa24c" target="_blank"><img src="https://img.shields.io/badge/Medium-Publication-green?logo=medium" alt="Medium Publication"></a> -->
</div>
<div class="flex items-center text-sm">
<div class="w-3 h-3 rounded-full mr-1 bg-yellow-300 opacity-60"></div>
<span class="text-base-content text-opacity-60">JavaScript</span>
</div>
</div>
</div>
<div class="card">
<h2>Search Text Highlighter</h2>
<h5>Created on, MARCH 27, 2024</h5>
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="ZEZJOLP" data-user="0xelsherif" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/0xelsherif/pen/ZEZJOLP">
Time-based Greeting</a> by Ahmed Hamza El-Sherif (<a href="https://codepen.io/0xelsherif">@0xelsherif</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<p>A simple text search and highlight tool that allows users to enter a search query and find matching text within a paragraph. The matching text is highlighted, and the number of results is displayed. If no matches are found, a message indicating so is shown.</p>
<div class="container">
<div class="badge-container">
<a href="https://github.com/0xelsherif/Search-Text-Highlighter"><img src="https://img.shields.io/github/repo-size/0xelsherif/Search-Text-Highlighter?style=social&logo=github"></a>
<a href="https://github.com/0xelsherif/Search-Text-Highlighter"><img src="https://img.shields.io/github/stars/0xelsherif/Search-Text-Highlighter.svg?style=social&label=Star" alt="GitHub Stars"></a>
<a href="https://github.com/0xelsherif/Search-Text-Highlighter"><img src="https://img.shields.io/github/forks/0xelsherif/Search-Text-Highlighter.svg?style=social&label=Fork" alt="GitHub Forks"></a>
<a href="https://github.com/0xelsherif/Search-Text-Highlighter/discussions"><img src="https://img.shields.io/github/discussions/0xelsherif/Search-Text-Highlighter?style=social&logo=github" alt="GitHub Discussions"></a>
<a href="https://github.com/0xelsherif/Search-Text-Highlighter/issues"><img src="https://img.shields.io/github/issues/0xelsherif/Search-Text-Highlighter?style=social&logo=github" alt="GitHub Issues"></a>
<a href="https://codepen.io/0xelsherif/full/ZEZJOLP" target="_blank"><img src="https://img.shields.io/badge/CodePen-Project-blue?logo=codepen" alt="CodePen Project"></a>
<a href="https://0xelsherif.medium.com/building-a-text-highlighting-tool-for-web-pages-step-by-step-guide-839a9b0aa24c" target="_blank"><img src="https://img.shields.io/badge/Medium-Publication-green?logo=medium" alt="Medium Publication"></a>
</div>
<div class="flex items-center text-sm">
<div class="w-3 h-3 rounded-full mr-1 bg-yellow-300 opacity-60"></div>
<span class="text-base-content text-opacity-60">JavaScript</span>
</div>
</div>
</div>
<div class="card">
<h2>URL QR Code Generator</h2>
<h5>Created on, MARCH 30, 2024</h5>
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="poBrEPJ" data-user="0xelsherif" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/0xelsherif/pen/poBrEPJ">
Time-based Greeting</a> by Ahmed Hamza El-Sherif (<a href="https://codepen.io/0xelsherif">@0xelsherif</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<p>This CodePen demonstrates a simple URL QR code generator. Enter a valid URL in the input field, and click the "Generate QR Code" button to generate a QR code representing the URL. If the entered URL is not valid or the input field is empty, appropriate error messages are displayed below the input field. The generated QR code will be displayed in the designated area.</p>
<div class="container">
<div class="badge-container">
<a href="https://github.com/0xelsherif/URL-QR-Code-Generator"><img src="https://img.shields.io/github/repo-size/0xelsherif/URL-QR-Code-Generator?style=social&logo=github"></a>
<a href="https://github.com/0xelsherif/URL-QR-Code-Generator"><img src="https://img.shields.io/github/stars/0xelsherif/URL-QR-Code-Generator.svg?style=social&label=Star" alt="GitHub Stars"></a>
<a href="https://github.com/0xelsherif/URL-QR-Code-Generator"><img src="https://img.shields.io/github/forks/0xelsherif/URL-QR-Code-Generator.svg?style=social&label=Fork" alt="GitHub Forks"></a>
<a href="https://github.com/0xelsherif/URL-QR-Code-Generator/discussions"><img src="https://img.shields.io/github/discussions/0xelsherif/URL-QR-Code-Generator?style=social&logo=github" alt="GitHub Discussions"></a>
<a href="https://github.com/0xelsherif/URL-QR-Code-Generator/issues"><img src="https://img.shields.io/github/issues/0xelsherif/URL-QR-Code-Generator?style=social&logo=github" alt="GitHub Issues"></a>
<a href="https://codepen.io/0xelsherif/full/poBrEPJ" target="_blank"><img src="https://img.shields.io/badge/CodePen-Project-blue?logo=codepen" alt="CodePen Project"></a>
<!-- <a href="https://0xelsherif.medium.com/building-a-text-highlighting-tool-for-web-pages-step-by-step-guide-839a9b0aa24c" target="_blank"><img src="https://img.shields.io/badge/Medium-Publication-green?logo=medium" alt="Medium Publication"></a> -->
</div>
<div class="flex items-center text-sm">
<div class="w-3 h-3 rounded-full mr-1 bg-yellow-300 opacity-60"></div>
<span class="text-base-content text-opacity-60">JavaScript</span>
</div>
</div>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h3>Search</h3>
<input type="text" id="searchInput" placeholder="Search...">
</div>
<div class="card">
<h2>About Me</h2>
<div class="fakeimg"><img src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExODFrcG9lbWQ3NW1zeXkxcHN2ZWJtejlzcWh1eWowc3RlbHhhZ3FncSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/gVlgj80ZLp9yo/giphy.gif" alt=""></div>
<p>A results-driven and versatile Senior Software Engineer and Technical Consultant with a proven track record in full-stack web application development. Armed with a master's in Software Engineering and an MBA, I bring over 7 years of experience and a passion for building innovative software solutions. Proficient in Node.js and Laravel, I am acclaimed for superior project management skills, supported by ITIL and PRINCE2 certifications, ensuring seamless project execution. Additionally, I am dedicated to providing technical guidance to drive business success, leading teams to deliver high-quality software products.</p>
</div>
<div class="card">
<h3>Follow Me</h3>
<div class="socialmediaicons">
<a href="https://www.linkedin.com/in/0xelsherif/" class="fa fa-linkedin"></a>
<a href="https://github.com/0xelsherif" class="fa fa-github"></a>
<a href="https://www.hackerrank.com/profile/0xelsherif" class="fa fa-code"></a>
<a href="https://twitter.com/intent/follow?screen_name=0xelsherif" class="fa fa-twitter"></a>
<a href="https://stackoverflow.com/users/23931990/0xelsherif" class="fa fa-stack-overflow"></a>
<a href="https://codepen.io/0xelsherif" class="fa fa-codepen"></a>
</div>
</div>
</div>
</div>
<div class="footer">
© Copyright <script>document.write(new Date().getFullYear())</script>, Made with
<span class="text-gray">
❤
</span> by <a href="https://github.com/0xelsherif" target="_blank">0xelsherif</a>.
</div>
<script src="app.js"></script>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<script data-name="BMC-Widget" data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="0xelsherif" data-description="Support me on Buy me a coffee!" data-message="" data-color="#ff6600" data-position="Right" data-x_margin="18" data-y_margin="18"></script>
<script type="text/javascript">
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "lqbt8k5pn0");
</script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-HB3RTCNPYN"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-HB3RTCNPYN');
</script>
</body>
</html>