12 files changed, 301 insertions, 0 deletions
diff --git a/usth/ICT3.2/prac/3/1-vanilla.html b/usth/ICT3.2/prac/3/1-vanilla.html
new file mode 100644
index 0000000..160b413
--- /dev/null
+++ b/usth/ICT3.2/prac/3/1-vanilla.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<body>
+  <h1>Introduction</h1>
+  <div>
+    <h1>About HTML</h1>
+    <h1>About CSS</h1>
+  </div>
+  <h1>About JavaScript</h1>
+
+  <script>
+    for (let parent of document.getElementsByTagName('div'))
+        for (let child of parent.children)
+            if (child.tagName == 'H1')
+                child.setAttribute('style', 'background-color: #436e58')
+  </script>
+</body>
+</html>
diff --git a/usth/ICT3.2/prac/3/1.html b/usth/ICT3.2/prac/3/1.html
new file mode 100644
index 0000000..6e4378d
--- /dev/null
+++ b/usth/ICT3.2/prac/3/1.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<script src='https://code.jquery.com/jquery-3.5.1.slim.min.js'
+        integrity='sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs='
+        crossorigin='anonymous'></script>
+
+<body>
+  <h1>Introduction</h1>
+  <div>
+    <h1>About HTML</h1>
+    <h1>About CSS</h1>
+  </div>
+  <h1>About JavaScript</h1>
+
+  <script>$('div > h1').css('background-color', '#436e58')</script>
+</body>
+</html>
diff --git a/usth/ICT3.2/prac/3/2-vanilla.html b/usth/ICT3.2/prac/3/2-vanilla.html
new file mode 100644
index 0000000..7f9a600
--- /dev/null
+++ b/usth/ICT3.2/prac/3/2-vanilla.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<body>
+  <a href='https://www.usth.edu.vn' id='usth'>USTH Website</a>
+  <script>
+    let usth = document.getElementById('usth');
+    usth.setAttribute('href', 'https://www.hust.edu.vn');
+    usth.innerHTML = 'HUST Website';
+  </script>
+</body>
+</html>
diff --git a/usth/ICT3.2/prac/3/2.html b/usth/ICT3.2/prac/3/2.html
new file mode 100644
index 0000000..5205f95
--- /dev/null
+++ b/usth/ICT3.2/prac/3/2.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<script src='https://code.jquery.com/jquery-3.5.1.slim.min.js'
+        integrity='sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs='
+        crossorigin='anonymous'></script>
+
+<body>
+  <a href='https://www.usth.edu.vn/' id='usth'>USTH Website</a>
+  <script>
+    $('#usth').attr('href', 'https://www.hust.edu.vn/').html('HUST Website')
+  </script>
+</body>
+</html>
diff --git a/usth/ICT3.2/prac/3/3-vanilla.html b/usth/ICT3.2/prac/3/3-vanilla.html
new file mode 100644
index 0000000..0cee920
--- /dev/null
+++ b/usth/ICT3.2/prac/3/3-vanilla.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<body>
+  <form>
+    <input id='field1' type='text' value='Field 1'>
+    <input id='field2' type='text' value='Field 2'>
+  </form>
+  <script>
+    document.getElementById('field1').addEventListener(
+      'blur', event => document.getElementsByTagName('body')[0]
+                               .setAttribute('style', 'background-color: #436e58'))
+  </script>
+</body>
+</html>
diff --git a/usth/ICT3.2/prac/3/3.html b/usth/ICT3.2/prac/3/3.html
new file mode 100644
index 0000000..4a6b76f
--- /dev/null
+++ b/usth/ICT3.2/prac/3/3.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<script src='https://code.jquery.com/jquery-3.5.1.min.js'
+        integrity='sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0='
+        crossorigin='anonymous'></script>
+
+<body>
+  <form>
+    <input id='field1' type='text' value='Field 1'>
+    <input id='field2' type='text' value='Field 2'>
+  </form>
+  <script>
+    $('#field1').blur((e) => $('body').css('background-color', '#436e58'))
+  </script>
+</body>
+</html>
diff --git a/usth/ICT3.2/prac/3/4-vanilla.html b/usth/ICT3.2/prac/3/4-vanilla.html
new file mode 100644
index 0000000..9ea396f
--- /dev/null
+++ b/usth/ICT3.2/prac/3/4-vanilla.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<script>
+let previous;
+function measure() {
+  current = Date.now();
+  if (previous !== undefined)
+    document.getElementById('log').innerHTML = `${current-previous} ms`;
+  previous = current;
+}
+</script>
+
+<body>
+  <h1>Heading1</h1>
+  <h2>Heading2</h2>
+  <p>Paragraph</p>
+  <button onclick='measure()'>Button</button>
+  <div id="log"></div>
+</body>
+</html>
diff --git a/usth/ICT3.2/prac/3/4.html b/usth/ICT3.2/prac/3/4.html
new file mode 100644
index 0000000..0444d1e
--- /dev/null
+++ b/usth/ICT3.2/prac/3/4.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<script src='https://code.jquery.com/jquery-3.5.1.min.js'
+        integrity='sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0='
+        crossorigin='anonymous'></script>
+
+<body>
+  <h1>Heading1</h1>
+  <h2>Heading2</h2>
+  <p>Paragraph</p>
+  <button>Button</button>
+  <div id="log"></div>
+  <script>
+    let previous;
+    $('button').click(function (event) {
+        current = Date.now();
+        if (previous !== undefined)
+            $('#log').html(`${current-previous} ms`);
+        previous = current;
+    })
+  </script>
+</body>
+</html>
diff --git a/usth/ICT3.2/prac/3/5.css b/usth/ICT3.2/prac/3/5.css
new file mode 100644
index 0000000..a4e920c
--- /dev/null
+++ b/usth/ICT3.2/prac/3/5.css
@@ -0,0 +1,47 @@
+.bd-placeholder-img {
+    font-size: 1.125rem;
+    text-anchor: middle;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+@media (min-width: 768px) {
+    .bd-placeholder-img-lg {
+        font-size: 3.5rem;
+    }
+}
+
+.container {
+    max-width: 960px;
+}
+
+/* Custom translucent site header */
+.site-header {
+    background-color: rgba(0, 0, 0, .85);
+    -webkit-backdrop-filter: saturate(180%) blur(20px);
+    backdrop-filter: saturate(180%) blur(20px);
+}
+.site-header a {
+    color: #999;
+    transition: ease-in-out color .15s;
+}
+.site-header a:hover {
+    color: #fff;
+    text-decoration: none;
+}
+
+/* Extra utilities */
+.flex-equal > * {
+    -ms-flex: 1;
+    flex: 1;
+}
+@media (min-width: 768px) {
+    .flex-md-equal > * {
+        -ms-flex: 1;
+        flex: 1;
+    }
+}
+
+.overflow-hidden { overflow: hidden; }
diff --git a/usth/ICT3.2/prac/3/5.html b/usth/ICT3.2/prac/3/5.html
new file mode 100644
index 0000000..44c13bc
--- /dev/null
+++ b/usth/ICT3.2/prac/3/5.html
@@ -0,0 +1,122 @@
+<!doctype html>
+<html lang='en'>
+<meta charset='utf-8'>
+<meta name='viewport'
+      content='width=device-width, initial-scale=1, shrink-to-fit=no'>
+<title>About Me</title>
+
+<link rel='icon' type='image/png' href='5.ico'>
+<link rel='stylesheet'
+      href='https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'
+      integrity='sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z'
+      crossorigin='anonymous'>
+<link rel='stylesheet' href='5.css'>
+
+<body>
+<div class='position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light'>
+  <div class='col-md-5 p-lg-5 mx-auto my-5'>
+    <h1 class='display-4 font-weight-normal'>Hello there!</h1>
+    <p class='lead font-weight-normal'>
+      I'm a Vietnamese undergrad student and a free software enthusiast.
+    </p>
+  </div>
+</div>
+
+<div class='d-md-flex flex-md-equal w-100 my-md-3 pl-md-3'>
+  <div class='bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden'>
+    <div class='my-3 py-3'>
+      <h2 class='display-5'>Contact Information</h2>
+      <p class='lead'>
+        For academic and business inquiry, write to
+        <a href='mailto:mcsinyx@disroot.org'>mcsinyx@disroot.org</a>.  I'm
+        also on <a href='https://matrix.to/#/@McSinyx:matrix.org'>[matrix]</a>,
+        drop by and say hi!
+      </p>
+    </div>
+  </div>
+  <div class='bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden'>
+    <div class='my-3 p-3'>
+      <h2 class='display-5'>Education and Qualifications</h2>
+      <p class='lead'>
+        I'm studying for my bachelor degree majoring in ICT at
+        <a href='https://usth.edu.vn/en/'>
+          University of Science and Technology of Hà Nội
+        </a>.
+      </p>
+    </div>
+  </div>
+</div>
+
+<div class='d-md-flex flex-md-equal w-100 my-md-3 pl-md-3'>
+  <div class='bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden'>
+    <div class='my-3 p-3'>
+      <h2 class='display-5'>Working Experiences</h2>
+      <p class='lead'>
+        Please refer to
+        <a href='https://mcsinyx.github.io/works.html'>this page</a>
+        for the complete list of my past works.
+      </a>
+    </div>
+  </div>
+  <div class='bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden'>
+    <div class='my-3 py-3'>
+      <h2 class='display-5'>Skills</h2>
+      <p class='lead'>
+        I am a patient Vimmer and a not-so-patient GNU/Linux user.
+      </p>
+    </div>
+  </div>
+</div>
+
+<div class='d-md-flex flex-md-equal w-100 my-md-3 pl-md-3'>
+  <div class='bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden'>
+    <div class='my-3 p-3'>
+      <h2 class='display-5'>Languages</h2>
+      <p class='lead'>
+        I am fluent in Vietnamese, English, Python, LaTeX and Lua.
+      </p>
+    </div>
+  </div>
+  <div class='bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden'>
+    <div class='my-3 py-3'>
+      <h2 class='display-5'>Hobbies</h2>
+      <p class='lead'>I love cubing and tinkering with obsolete systems.</p>
+    </div>
+  </div>
+</div>
+
+<div class='d-md-flex flex-md-equal w-100 my-md-3 pl-md-3'>
+  <div class='bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden'>
+    <div class='my-3 p-3'>
+      <h2 class='display-5'>Achievements</h2>
+      <p class='lead'>
+        I am a GSoC student for the Python Packaging Authority
+        <a href='https://summerofcode.withgoogle.com/projects/#5428041779511296'>
+          in 2020</a>.
+      </p>
+    </div>
+  </div>
+  <div class='bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden'>
+    <div class='my-3 py-3'>
+      <h2 class='display-5'>Personal Site</h2>
+      <p class='lead'>
+        Click <a href='https://mcsinyx.github.com'>here</a>
+        to go to my real personal website!
+      </p>
+    </div>
+  </div>
+</div>
+
+  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
+          integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
+          crossorigin="anonymous"></script>
+  <script>
+    if (!window.jQuery)
+        document.write(
+          '<script src="../assets/js/vendor/jquery.slim.min.js"><\/script>')
+  </script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
+          integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
+          crossorigin="anonymous"></script>
+</body>
+</html>
diff --git a/usth/ICT3.2/prac/3/5.ico b/usth/ICT3.2/prac/3/5.ico
new file mode 100644
index 0000000..6caeb4f
--- /dev/null
+++ b/usth/ICT3.2/prac/3/5.ico
Binary files differdiff --git a/usth/ICT3.2/prac/3/labwork.pdf b/usth/ICT3.2/prac/3/labwork.pdf
new file mode 100644
index 0000000..2ac71cc
--- /dev/null
+++ b/usth/ICT3.2/prac/3/labwork.pdf
Binary files differ