This is a repository for various functions and ideas that I would like to share. Feel free to use and modify anything you find here.
Main File
cssdemo.html
Description:
A demonstration of various CSS and JavaScript Skills. Including:
a. Lights Out Game
Simple Lights Out game. When you click a box, that box and horizontally/vertically adjacent boxes toggle on or off.
b. Dragbar Resizer
The vertical bar in the center is used to increase/decrease the size of the other windows. This uses mostly JavaScript/jquery to modify CSS values. Also uses flexbox to organize the left div, middle bar div, and right div.
c. Dynamic Color Theme Changes
Click the radio buttons to change the values. CSS variables are held in :root. Every color used on the page is called from one of those variables. Using jquery, the values of the variables can be changed, which changes all of the colors on the page. Additionally, the left div contains an iframe, which means the css values in the iframe are also modified dynamically.
d. Responsive Design
Flexboxes and min-width breakpoints are used to cause elements to change their placement as the width of the farme changes. Several breakpoints are used to represent different devices: Extra large monitor (2000px+ wide), large monitor/tablet (1007px+ wide), vertical tablet or smart phone (639px+ wide), low-resolution smart phones (638px or lower wide).
I used w3schools guide to help me create the column classes:
https://www.w3schools.com/css/css_rwd_intro.asp
Dependencies:
- assets/jsarchanimation.css
- assets/jsarchanimation.js
- assets/jquery.js
Main File
jsarchanimation.html
Description:
A simple arching zoom animation using javascript and CSS. As seen on my portfolio page: https://www.danteacher.com
Dependencies:
- assets/jsarchanimation.css
- assets/jsarchanimation.js
- assets/jquery.js
Daniel White - 2021
Feel free to use anything from this website.