LAB 1: HTML5
Description
A table “Music rating” made with the help of HTML5, CSS3.
Deploy link
https://pikuzamarie.github.io/rsoi-lab-repo/lab1/
LAB 2: CSS3
Description
A table “Kid A Excursion” dedicated to the Radiohead album made with the help of HTML5, CSS3.
Deploy link
https://pikuzamarie.github.io/rsoi-lab-repo/lab2/
LAB 3: Block layout
Description
A two-page website dedicated to Norway made with the help of HTML5, CSS3, JS.
Deploy link
https://pikuzamarie.github.io/rsoi-lab-repo/lab3/pages/main
Description
The form is built with HTML5, CSS3, and JS, consisting of two pages: the form page and the results page.
Form Page
- Usage of HTML5 and JS validation features
- Usage of FileReader to save an image file
- Save data to localStorage
Results Page
- Pagination with 5 rows on each page; the number of pages is calculated
- Convert birth date to the number of years old and display this value
- Button to delete stored data
Deploy link
https://pikuzamarie.github.io/rsoi-lab-repo/lab4/main
LAB 5: DHTML
Description
The form allows you to transliterate and style Russian and English words in two inputs. After the submission, the ordered list with transliterated word pairs is displayed.
Features
- Usage of HTML5 and JS validation features
- Additional checks for empty inputs and different word amounts in inputs
- Style inputs dynamically using the
className attribute
- Dynamically generated ordered list with transliteration results
- Can be enhanced: transliteration for letter pairs, now it works only for single letters
Deploy link
https://pikuzamarie.github.io/rsoi-lab-repo/lab5
LAB 6: IndexedDB
Description
The program allows you to manage house residents.
Features
- Create, delete a record with the following fields: full name, flat number, flat area, privatized status
- Add a new address field to an existing record by ID
- Delete all the records in the table
- The select element with IDs is automatically updated to correspond with table info
- Show full names of residents with max and min flat area
- Store info in the table and manage it using IndexedDB toolkit
Deploy link
https://pikuzamarie.github.io/rsoi-lab-repo/lab6
LAB 7: AJAX & JQuery
Description
The program allows to send async requests to JSON APIs and update content on page. An also to laugh a bit :)
Features
- Choose amount of quotes/memes b/w 1 and 8
- Set text color and font family for quotes and memes titles
- Use AJAX and JQuery to send async requests
- Update data on screen without reloading the page (thanks to AJAX)
API sources
- Quote API: https://dummyjson.com/docs/quotes
- Memes API: https://github.com/D3vd/Meme_Api
Deploy link
https://pikuzamarie.github.io/rsoi-lab-repo/lab7
Enjoy!
By MariePikuza / 2024