diff --git a/02_advanced/projekte/js-advanced-dashboard-template/.gitignore b/02_advanced/projekte/js-advanced-dashboard-template/.gitignore new file mode 100644 index 0000000..54f07af --- /dev/null +++ b/02_advanced/projekte/js-advanced-dashboard-template/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? \ No newline at end of file diff --git a/02_advanced/projekte/js-advanced-dashboard-template/README.md b/02_advanced/projekte/js-advanced-dashboard-template/README.md new file mode 100644 index 0000000..601f2df --- /dev/null +++ b/02_advanced/projekte/js-advanced-dashboard-template/README.md @@ -0,0 +1,17 @@ +## License and terms of use + +© Web Professional Institute Inc. All rights reserved. + +This material is provided solely for students enrolled in courses offered by Web Professional Institute Inc. By accessing or using this code, you acknowledge that it is strictly for educational use within the context of Web Professional Institute Inc. programs. + +**Usage Restrictions:** + +- Redistribution, sharing, or copying of this material outside the course environment is strictly prohibited. +- The content is designed to support your learning objectives and is not authorized for commercial projects, public repositories, or applications beyond the course scope. +- Unauthorized commercial use or open-source distribution is strictly prohibited and may result in expulsion from the program and legal action. + +**Agreement & Rights:** + +As a student, you have agreed to these terms as part of your enrollment agreement, which includes additional details on permitted uses, restrictions, and policies. The author and Web Professional Institute Inc. retain all rights to this material, including the code base and instructional content. + +For any questions regarding these terms, please contact Web Professional Institute Inc. for clarification. diff --git a/02_advanced/projekte/js-advanced-dashboard-template/index.html b/02_advanced/projekte/js-advanced-dashboard-template/index.html new file mode 100644 index 0000000..0d354ae --- /dev/null +++ b/02_advanced/projekte/js-advanced-dashboard-template/index.html @@ -0,0 +1,62 @@ + + + + + Recipe Explorer Dashboard + + + +

Recipe Explorer Dashboard

+ +
+ + +
+ +
Loading...
+
+ + + + + + + + + + + + +
Recipe NameCuisinePreparation Time (mins)
+ + + + + + + diff --git a/02_advanced/projekte/js-advanced-dashboard-template/scripts.js b/02_advanced/projekte/js-advanced-dashboard-template/scripts.js new file mode 100644 index 0000000..69b0e04 --- /dev/null +++ b/02_advanced/projekte/js-advanced-dashboard-template/scripts.js @@ -0,0 +1,122 @@ +(() => { + // ===== DOM & VARIABLES ===== + const RECIPES_URL = 'https://dummyjson.com/recipes'; + + const searchInput = document.querySelector('#search-input'); + const searchButton = document.querySelector('#search-button'); + const recipesTableBody = document.querySelector('#recipes-table tbody'); + const loadingIndicator = document.querySelector('#loading'); + const errorMessage = document.querySelector('#error-message'); + + const modal = document.querySelector('#recipe-modal'); + const modalTitle = document.querySelector('#modal-title'); + const modalImage = document.querySelector('#modal-image'); + const modalCategory = document.querySelector('#modal-category'); + const modalTime = document.querySelector('#modal-time'); + const modalIngredients = document.querySelector('#modal-ingredients'); + const modalInstructions = document.querySelector('#modal-instructions'); + const closeModal = document.querySelector('.close'); + + let allRecipes = []; + + // ===== INIT ===== + const init = () => { + // TODO: Fetch and display all recipes on initial load + + // Event Listeners + closeModal.addEventListener('click', closeModalEvent); + window.addEventListener('click', windowClickEvent); + }; + + // ===== EVENT LISTENERS ===== + const searchButtonEvent = () => { + const query = searchInput.value.trim().toLowerCase(); + if (query !== '') { + // TODO: Implement search functionality + } else { + // TODO: Display all recipes if search input is empty + } + }; + + // Close Modal Event + const closeModalEvent = () => { + modal.style.display = 'none'; + }; + + // Close Modal when clicking outside the modal content + const windowClickEvent = (event) => { + if (event.target == modal) { + modal.style.display = 'none'; + } + }; + + // ===== FUNCTIONS ===== + // Fetches all recipes from the API and displays them. + const fetchAndDisplayRecipes = async () => { + showLoading(true); + showError(false, ''); + + try { + // TODO: Fetch data from API + } catch (error) { + console.error(error); + showError(true, 'An error occurred while fetching recipes.'); + } finally { + showLoading(false); + } + }; + + // Searches for recipes by name and displays the results. + const searchRecipes = async (query) => { + showLoading(true); + showError(false, ''); + + try { + // TODO: Search for recipes by name + } catch (error) { + console.error(error); + showError(true, 'An error occurred while searching for recipes.'); + } finally { + showLoading(false); + } + }; + + // Displays a list of recipes in the table. + const displayRecipes = (recipes) => { + clearTable(); + + // TODO: Iterate over the recipes and display them in the table + }; + + // Displays detailed information about a selected recipe in a modal. + const showRecipeDetails = (recipe) => { + // TODO: Calculate total preparation time + // TODO: Set image source + // TODO: Populate ingredients + // TODO: Show modal + }; + + // Shows or hides the loading indicator. + const showLoading = (show) => { + loadingIndicator.style.display = show ? 'block' : 'none'; + }; + + // Displays or hides an error message. + const showError = (show, message) => { + if (show) { + errorMessage.textContent = message; + errorMessage.style.display = 'block'; + } else { + errorMessage.textContent = ''; + errorMessage.style.display = 'none'; + } + }; + + // Clears the recipes table. + const clearTable = () => { + recipesTableBody.innerHTML = ''; + }; + + // ===== CALL INIT ===== + init(); +})(); diff --git a/02_advanced/projekte/js-advanced-dashboard-template/styles.css b/02_advanced/projekte/js-advanced-dashboard-template/styles.css new file mode 100644 index 0000000..fc642eb --- /dev/null +++ b/02_advanced/projekte/js-advanced-dashboard-template/styles.css @@ -0,0 +1,124 @@ +body { + font-family: Arial, sans-serif; + margin: 20px; +} + +h1 { + text-align: center; + color: #4d7c0f; +} + +#search-container { + text-align: center; + margin-bottom: 20px; +} + +#search-input { + width: 300px; + padding: 10px; + font-size: 16px; + border: 2px solid #65a30d; + border-radius: 5px; +} + +#search-button { + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + background-color: #4d7c0f; + color: white; + border: none; + border-radius: 5px; + margin-left: 10px; +} + +#search-button:hover { + background-color: #65a30d; + transition: 0.1s; +} + +#recipes-table { + width: 100%; + border-collapse: collapse; + margin-bottom: 20px; + max-width: 1000px; + margin-inline: auto; +} + +#recipes-table th, +#recipes-table td { + border: 1px solid #ddd; + padding: 12px; + text-align: left; +} + +#recipes-table th { + background-color: #4d7c0f; + color: white; +} + +#recipes-table tr:nth-child(even) { + background-color: #f9f9f9; +} + +#recipes-table tr:hover { + background-color: #ecfccb; + cursor: pointer; +} + +/* Modal styling */ +.modal { + display: none; + position: fixed; + z-index: 1; + padding-top: 100px; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0, 0, 0, 0.4); +} + +.modal-content { + background-color: #fff; + margin: auto; + padding: 20px; + border: 1px solid #888; + width: 60%; + border-radius: 10px; + position: relative; +} + +.close { + color: #aaa; + position: absolute; + top: 15px; + right: 25px; + font-size: 30px; + font-weight: bold; + cursor: pointer; +} + +.close:hover, +.close:focus { + color: black; + text-decoration: none; +} + +/* Loading Indicator */ +#loading { + display: none; + text-align: center; + font-size: 18px; + color: #4d7c0f; +} + +/* Error Message */ +#error-message { + display: none; + text-align: center; + color: red; + font-size: 18px; + margin-bottom: 20px; +} diff --git a/02_advanced/projekte/js-advanced-javascript-cafe-template/.gitignore b/02_advanced/projekte/js-advanced-javascript-cafe-template/.gitignore new file mode 100644 index 0000000..54f07af --- /dev/null +++ b/02_advanced/projekte/js-advanced-javascript-cafe-template/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? \ No newline at end of file diff --git a/02_advanced/projekte/js-advanced-javascript-cafe-template/README.md b/02_advanced/projekte/js-advanced-javascript-cafe-template/README.md new file mode 100644 index 0000000..601f2df --- /dev/null +++ b/02_advanced/projekte/js-advanced-javascript-cafe-template/README.md @@ -0,0 +1,17 @@ +## License and terms of use + +© Web Professional Institute Inc. All rights reserved. + +This material is provided solely for students enrolled in courses offered by Web Professional Institute Inc. By accessing or using this code, you acknowledge that it is strictly for educational use within the context of Web Professional Institute Inc. programs. + +**Usage Restrictions:** + +- Redistribution, sharing, or copying of this material outside the course environment is strictly prohibited. +- The content is designed to support your learning objectives and is not authorized for commercial projects, public repositories, or applications beyond the course scope. +- Unauthorized commercial use or open-source distribution is strictly prohibited and may result in expulsion from the program and legal action. + +**Agreement & Rights:** + +As a student, you have agreed to these terms as part of your enrollment agreement, which includes additional details on permitted uses, restrictions, and policies. The author and Web Professional Institute Inc. retain all rights to this material, including the code base and instructional content. + +For any questions regarding these terms, please contact Web Professional Institute Inc. for clarification. diff --git a/02_advanced/projekte/js-advanced-javascript-cafe-template/index.js b/02_advanced/projekte/js-advanced-javascript-cafe-template/index.js new file mode 100644 index 0000000..b74d7a5 --- /dev/null +++ b/02_advanced/projekte/js-advanced-javascript-cafe-template/index.js @@ -0,0 +1,76 @@ +'use strict'; + +const menu = [ + { + category: 'Beverages', + items: [ + { name: 'Coffee', price: 3.5 }, + { name: 'Tea', price: 2.5 }, + { name: 'Juice', price: 4 }, + ], + }, + { + category: 'Pastries', + items: [ + { name: 'Croissant', price: 2.75 }, + { name: 'Muffin', price: 2.5 }, + { name: 'Bagel', price: 2.25 }, + ], + }, + { + category: 'Sandwiches', + items: [ + { name: 'Ham Sandwich', price: 5.5 }, + { name: 'Veggie Sandwich', price: 5 }, + { name: 'Turkey Sandwich', price: 6 }, + ], + }, +]; + +// ADD YOUR CODE BELOW +const listMenuItems = (menu) => {}; + +const calculateAveragePrice = (menu) => {}; + +const findItemsByCategory = (menu, categoryName) => {}; + +// ===== TEST CASES (DO NOT MODIFY) ===== + +// 1. List All Menu Items +const menuItems = listMenuItems(menu); +console.log('All Menu Items:\n', menuItems); + +// 2. Calculate Average Price +const averagePrice = calculateAveragePrice(menu); +console.log('Average Price of All Items:', averagePrice); + +// 3. Find Items by Category +const searchCategory = 'Pastries'; +const pastries = findItemsByCategory(menu, searchCategory); +console.log(`Items in "${searchCategory}" \nItems:`, pastries); + +/* +===== EXPECTED OUTPUT ===== + +All Menu Items: +[ + 'Coffee', + 'Tea', + 'Juice', + 'Croissant', + 'Muffin', + 'Bagel', + 'Ham Sandwich', + 'Veggie Sandwich', + 'Turkey Sandwich' +] + +Average Price of All Items: 3.78 + +Items in "Pastries" +Items: [ + { name: 'Croissant', price: 2.75 }, + { name: 'Muffin', price: 2.5 }, + { name: 'Bagel', price: 2.25 } +] +*/ diff --git a/03_dom.zip b/03_dom.zip new file mode 100644 index 0000000..00df49a Binary files /dev/null and b/03_dom.zip differ diff --git a/03_dom/uebungen/u01_almost-quotes/assets/css/styles.css b/03_dom/uebungen/u01_almost-quotes/assets/css/styles.css new file mode 100644 index 0000000..d4c6b71 --- /dev/null +++ b/03_dom/uebungen/u01_almost-quotes/assets/css/styles.css @@ -0,0 +1,368 @@ +/* -------------------------------------------- Haupt CSS fuer alle Seiten -------------------------------------------- */ + +/* ---------------- CSS-Reset ------------------- */ +html, +body, +a, +div, +h1, +h2, +h3, +h4, +h5, +h6, +span, +p, +img, +strong, +ul, +li, +table, +th, +td, +tr { + margin: 0px; + padding: 0px; + border: 0px none; + font-weight: normal; + font-style: inherit; + font-family: inherit; + font-variant: inherit; + text-decoration: none; + table-layout: inherit; +} + +/* ---------------- Body / HTML ------------------- */ + +html { + font-size: 100%; + background-color: #fffef7; +} + +body { + font-family: Helvetica, Arial, sans-serif; + font-size: 1.2em; + font-weight: normal; + color: black; + margin: 0rem auto 2rem auto; +} + +/* ---------------- layout ------------------- */ + +header { + background: url(../img/js_header.png) left top no-repeat transparent; + background-size: cover; + height: 250px; + min-width: 850px; +} + +header:after { + content: ' '; + display: block; + height: 250px; + background: rgba(255, 254, 247, 0); + background: -moz-linear-gradient( + top, + rgba(255, 254, 247, 0) 0%, + rgba(255, 254, 247, 0.55) 22%, + rgba(255, 254, 247, 0.7) 42%, + rgba(255, 254, 247, 0.71) 43%, + rgba(255, 254, 247, 0.78) 61%, + rgba(255, 254, 247, 0.92) 75%, + rgba(255, 254, 247, 1) 87%, + rgba(255, 254, 247, 1) 100% + ); + background: -webkit-gradient( + left top, + left bottom, + color-stop(0%, rgba(255, 254, 247, 0)), + color-stop(22%, rgba(255, 254, 247, 0.55)), + color-stop(42%, rgba(255, 254, 247, 0.7)), + color-stop(43%, rgba(255, 254, 247, 0.71)), + color-stop(61%, rgba(255, 254, 247, 0.78)), + color-stop(75%, rgba(255, 254, 247, 0.92)), + color-stop(87%, rgba(255, 254, 247, 1)), + color-stop(100%, rgba(255, 254, 247, 1)) + ); + background: -webkit-linear-gradient( + top, + rgba(255, 254, 247, 0) 0%, + rgba(255, 254, 247, 0.55) 22%, + rgba(255, 254, 247, 0.7) 42%, + rgba(255, 254, 247, 0.71) 43%, + rgba(255, 254, 247, 0.78) 61%, + rgba(255, 254, 247, 0.92) 75%, + rgba(255, 254, 247, 1) 87%, + rgba(255, 254, 247, 1) 100% + ); + background: -o-linear-gradient( + top, + rgba(255, 254, 247, 0) 0%, + rgba(255, 254, 247, 0.55) 22%, + rgba(255, 254, 247, 0.7) 42%, + rgba(255, 254, 247, 0.71) 43%, + rgba(255, 254, 247, 0.78) 61%, + rgba(255, 254, 247, 0.92) 75%, + rgba(255, 254, 247, 1) 87%, + rgba(255, 254, 247, 1) 100% + ); + background: -ms-linear-gradient( + top, + rgba(255, 254, 247, 0) 0%, + rgba(255, 254, 247, 0.55) 22%, + rgba(255, 254, 247, 0.7) 42%, + rgba(255, 254, 247, 0.71) 43%, + rgba(255, 254, 247, 0.78) 61%, + rgba(255, 254, 247, 0.92) 75%, + rgba(255, 254, 247, 1) 87%, + rgba(255, 254, 247, 1) 100% + ); + background: linear-gradient( + to bottom, + rgba(255, 254, 247, 0) 0%, + rgba(255, 254, 247, 0.55) 22%, + rgba(255, 254, 247, 0.7) 42%, + rgba(255, 254, 247, 0.71) 43%, + rgba(255, 254, 247, 0.78) 61%, + rgba(255, 254, 247, 0.92) 75%, + rgba(255, 254, 247, 1) 87%, + rgba(255, 254, 247, 1) 100% + ); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 ); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 ); +} + +main, +footer { + width: 70%; + margin: 3rem auto; + min-width: 850px; + padding: 0 20px; + box-sizing: border-box; +} + +/* ---------------- Content ------------------- */ + +h1 { + color: #93412b; + font-size: 3em; + margin-bottom: 20px; + font-weight: bold; +} + +h2 { + color: #93412b; + font-size: 2.5em; + margin-bottom: 15px; +} + +h3 { + color: #93412b; + font-size: 2em; + margin-bottom: 10px; +} + +p { + line-height: 15px; + margin-bottom: 15px; + line-height: 1.7em; +} + +.cited { + font-style: italic; + font-size: 0.8em; +} + +.u { + text-decoration: underline; +} +.b { + font-weight: bold; +} +.i { + font-style: italic; +} +.align_right { + text-align: right; +} +.align_left { + text-align: left; + margin-right: 10px; +} +.align_center { + text-align: center; +} +.float_left { + float: left; +} +.float_right { + float: right; +} +.clear_both { + clear: both; +} +strong { + font-weight: bold; +} +.special { + color: #b7595b; + font-weight: bold; +} +.keyword { + color: #db6f50; + font-weight: bold; + font-style: italic; +} +.gray { + color: gray; +} + +/* Links */ +main a:link, +main a:visited { + color: #eb690b; + font-weight: bold; +} + +main a:focus, +main a:hover, +main a:active { + color: #eb690b; +} + +ul { + list-style-position: outside; + margin-bottom: 20px; + padding-left: 22px; +} + +ol { + margin-bottom: 20px; + padding-left: 30px; +} + +li { + line-height: 1.4em; +} + +/* ------- Article ------- */ + +h1 { + color: #93412b; + font-size: 2.7em; + margin-bottom: 20px; +} + +#buy_form input[type='button'] { + display: inline-block; + padding: 1px 20px 3px 20px; + background-color: #93412b; + color: white; + border: 1px solid white; + font-size: 1em; + height: 32px; +} + +#buy_form input[type='button']:hover { + background-color: white; + color: #93412b; + border: 1px solid #93412b; +} + +#buy_form select { + display: inline-block; + font-size: 1em; + background-color: white; + color: #93412b; + border: 1px solid #93412b; + height: 32px; +} + +/* ------- Chat ------- */ + +#chat { + width: 100%; + background-color: white; + border: 1px solid #9c352f; + height: 20rem; + position: relative; +} + +#chat_window { + background-color: white; + width: 85%; + float: left; + height: 95%; +} + +#chat_history { + position: absolute; + bottom: 8%; + max-height: 92%; + padding: 0px 0px 5px 7px; +} + +#chat_history p { + font-size: 0.6em; + margin: 0; +} + +#chat_text { + height: 8%; + position: absolute; + bottom: 0; + width: 85%; +} + +#chat_text input { + width: 98%; + display: block; + margin: auto; +} + +#chat_members { + list-style-type: none; + height: 100%; + width: 15%; + margin-left: 85%; + border-left: 1px solid #9c352f; + text-align: right; + box-sizing: border-box; + min-width: 100px; + font-size: 0.8em; + padding-top: 5px; +} + +#chat_members li { + line-height: 1.2em; + padding: 5px 10px 2px 15px; +} + +#chat_members .highlighted { + background-color: #c14d45; + color: white; +} +.chat_member { + font-weight: bold; +} +.chat_member1 { + color: #3626c8; +} +.chat_member2 { + color: #e38d0b; +} + +#member_search { + position: absolute; + right: 0; + bottom: 0; + width: 15%; + height: 8%; +} + +#member_search input { + width: 88%; + display: block; + margin: auto; + text-align: right; +} diff --git a/03_dom/uebungen/u01_almost-quotes/assets/img/favicon.icon b/03_dom/uebungen/u01_almost-quotes/assets/img/favicon.icon new file mode 100644 index 0000000..bd2cd28 Binary files /dev/null and b/03_dom/uebungen/u01_almost-quotes/assets/img/favicon.icon differ diff --git a/03_dom/uebungen/u01_almost-quotes/assets/img/js_header.png b/03_dom/uebungen/u01_almost-quotes/assets/img/js_header.png new file mode 100644 index 0000000..4d14ceb Binary files /dev/null and b/03_dom/uebungen/u01_almost-quotes/assets/img/js_header.png differ diff --git a/03_dom/uebungen/u01_almost-quotes/index.html b/03_dom/uebungen/u01_almost-quotes/index.html new file mode 100644 index 0000000..ee1d05f --- /dev/null +++ b/03_dom/uebungen/u01_almost-quotes/index.html @@ -0,0 +1,35 @@ + + + + + + Übung 1: Almost Famous Quotes 1 + + + + +
+ +
+

Famous Quotes

+ +
+
+ + + diff --git a/03_dom/uebungen/u02_tasse-01001/assets/css/styles.css b/03_dom/uebungen/u02_tasse-01001/assets/css/styles.css new file mode 100644 index 0000000..c30a2d3 --- /dev/null +++ b/03_dom/uebungen/u02_tasse-01001/assets/css/styles.css @@ -0,0 +1,266 @@ +/* -------------------------------------------- Haupt CSS fuer alle Seiten -------------------------------------------- */ + +/* ---------------- CSS-Reset ------------------- */ +html, body, a, div, h1, h2, h3, h4, h5, h6, span, p, img, strong, ul, li, table, th, td, tr { + margin: 0px; + padding: 0px; + border: 0px none; + font-weight: normal; + font-style: inherit; + font-family: inherit; + font-variant: inherit; + text-decoration: none; + table-layout: inherit; +} + + +/* ---------------- Body / HTML ------------------- */ + +html { + font-size: 100%; + background-color: #fffef7; +} + +body { + font-family: Helvetica, Arial, sans-serif; + font-size: 1.2em; + font-weight: normal; + color: black; + margin: 0rem auto 2rem auto; +} + +/* ---------------- layout ------------------- */ + +header { + + background: url(../img/js_header.png) left top no-repeat transparent; + background-size: cover; + height: 250px; + min-width: 850px; +} + +header:after { + content: ' '; + display: block; + height: 250px; +background: rgba(255,254,247,0); +background: -moz-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%); +background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,254,247,0)), color-stop(22%, rgba(255,254,247,0.55)), color-stop(42%, rgba(255,254,247,0.7)), color-stop(43%, rgba(255,254,247,0.71)), color-stop(61%, rgba(255,254,247,0.78)), color-stop(75%, rgba(255,254,247,0.92)), color-stop(87%, rgba(255,254,247,1)), color-stop(100%, rgba(255,254,247,1))); +background: -webkit-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%); +background: -o-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%); +background: -ms-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%); +background: linear-gradient(to bottom, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%); +filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 ); +filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 ); +} + +main, +footer { + width: 70%; + margin: 3rem auto; + min-width: 850px; + padding: 0 20px; + box-sizing: border-box; +} + + + + + +/* ---------------- Content ------------------- */ + + + +h1 { + color: #93412b; + font-size: 3em; + margin-bottom: 20px; + font-weight: bold; +} + + +h2 { + color: #93412b; + font-size: 2.5em; + margin-bottom: 15px; +} + +h3 { + color: #93412b; + font-size: 2em; + margin-bottom: 10px; +} + +p { + line-height: 15px; + margin-bottom: 15px; + line-height: 1.7em; +} + +.cited { + font-style: italic; + font-size: .8em; +} + +.u {text-decoration: underline;} +.b {font-weight: bold;} +.i {font-style: italic} +.align_right {text-align: right;} +.align_left {text-align: left; margin-right: 10px;} +.align_center {text-align: center;} +.float_left {float: left;} +.float_right {float: right;} +.clear_both {clear: both;} +strong {font-weight: bold;} +.special { color: #b7595b; font-weight: bold; } +.keyword { color: #db6f50; font-weight: bold; font-style: italic;} +.gray {color: gray;} + +/* Links */ +main a:link, +main a:visited { + color: #eb690b; + font-weight: bold; +} + +main a:focus, +main a:hover, +main a:active {color: #eb690b;} + +ul { + list-style-position: outside; + margin-bottom: 20px; + padding-left: 22px; +} + +ol { + margin-bottom: 20px; + padding-left: 30px; +} + +li { + line-height: 1.4em; +} + + +/* ------- Article ------- */ + + +h1 { + color: #93412b; + font-size: 2.7em; + margin-bottom: 20px; +} + +#buy_form input[type=button] { + display: inline-block; + padding: 1px 20px 3px 20px; + background-color: #93412b; + color: white; + border: 1px solid white; + font-size: 1em; + height: 32px; +} + +#buy_form input[type=button]:hover { + background-color: white; + color: #93412b; + border: 1px solid #93412b; +} + +#buy_form select { + display: inline-block; + font-size: 1em; + background-color: white; + color: #93412b; + border: 1px solid #93412b; + height: 32px; +} + + +/* ------- Chat ------- */ + + +#chat { + width: 100%; + background-color: white; + border: 1px solid #9c352f; + height: 20rem; + position: relative; + +} + +#chat_window { + background-color: white; + width: 85%; + float: left; + height: 95%; +} + +#chat_history { + position: absolute; + bottom: 8%; + max-height: 92%; + padding: 0px 0px 5px 7px; +} + +#chat_history p { + font-size: .6em; + margin: 0; +} + +#chat_text { + height: 8%; + position: absolute; + bottom: 0; + width: 85%; +} + +#chat_text input { + width: 98%; + display: block; + margin: auto; +} + +#chat_members { + list-style-type: none; + height: 100%; + width: 15%; + margin-left: 85%; + border-left: 1px solid #9c352f; + text-align: right; + box-sizing: border-box; + min-width: 100px; + font-size: .8em; + padding-top: 5px; + +} + +#chat_members li { + line-height: 1.2em; + padding: 5px 10px 2px 15px; +} + + +#chat_members .highlighted { + background-color: #c14d45; + color: white; +} +.chat_member {font-weight: bold;} +.chat_member1 { color: #3626c8;} +.chat_member2 { color: #e38d0b;} + +#member_search { + position: absolute; + right: 0; + bottom: 0; + width: 15%; + height: 8%; +} + +#member_search input { + width: 88%; + display: block; + margin: auto; + text-align: right; +} diff --git a/03_dom/uebungen/u02_tasse-01001/assets/img/favicon.ico b/03_dom/uebungen/u02_tasse-01001/assets/img/favicon.ico new file mode 100644 index 0000000..bd2cd28 Binary files /dev/null and b/03_dom/uebungen/u02_tasse-01001/assets/img/favicon.ico differ diff --git a/03_dom/uebungen/u02_tasse-01001/assets/img/js_header.png b/03_dom/uebungen/u02_tasse-01001/assets/img/js_header.png new file mode 100644 index 0000000..4d14ceb Binary files /dev/null and b/03_dom/uebungen/u02_tasse-01001/assets/img/js_header.png differ diff --git a/03_dom/uebungen/u02_tasse-01001/assets/img/logo.png b/03_dom/uebungen/u02_tasse-01001/assets/img/logo.png new file mode 100644 index 0000000..bbd9fcc Binary files /dev/null and b/03_dom/uebungen/u02_tasse-01001/assets/img/logo.png differ diff --git a/03_dom/uebungen/u02_tasse-01001/assets/img/newsboard_empty.png b/03_dom/uebungen/u02_tasse-01001/assets/img/newsboard_empty.png new file mode 100644 index 0000000..d650b1b Binary files /dev/null and b/03_dom/uebungen/u02_tasse-01001/assets/img/newsboard_empty.png differ diff --git a/03_dom/uebungen/u02_tasse-01001/assets/img/newsboard_paperclip.png b/03_dom/uebungen/u02_tasse-01001/assets/img/newsboard_paperclip.png new file mode 100644 index 0000000..7f24721 Binary files /dev/null and b/03_dom/uebungen/u02_tasse-01001/assets/img/newsboard_paperclip.png differ diff --git a/03_dom/uebungen/u02_tasse-01001/assets/img/newsboard_sheets.png b/03_dom/uebungen/u02_tasse-01001/assets/img/newsboard_sheets.png new file mode 100644 index 0000000..14680cb Binary files /dev/null and b/03_dom/uebungen/u02_tasse-01001/assets/img/newsboard_sheets.png differ diff --git a/03_dom/uebungen/u02_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif b/03_dom/uebungen/u02_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif new file mode 100644 index 0000000..3a9c8ad Binary files /dev/null and b/03_dom/uebungen/u02_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif differ diff --git a/03_dom/uebungen/u02_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg b/03_dom/uebungen/u02_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg new file mode 100644 index 0000000..4399460 Binary files /dev/null and b/03_dom/uebungen/u02_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg differ diff --git a/03_dom/uebungen/u02_tasse-01001/index.html b/03_dom/uebungen/u02_tasse-01001/index.html new file mode 100644 index 0000000..1994999 --- /dev/null +++ b/03_dom/uebungen/u02_tasse-01001/index.html @@ -0,0 +1,104 @@ + + + + + + 010010000100111101010100 + + + + + + + +
+ +
+

+ Hot Binary Heat Changing Mug + "010010000100111101010100" +

+ + Hot Binary Heat Changing Mug + +

Description

+ +

+ Numbers make up + everything in our digital world. They flow around us, invisible like the Force or + the Matrix, controlling all our many computer-y devices. Two numbers, in particular: + 0 and 1. Off and On. Well, we can tell you this: when + there's no coffee in our cup, we're completely OFF our game. But when our mug is full of hot coffee, we're + totally ON. And now, with the Hot Binary Heat Changing Mug, there's a mug that + tells us which state our mug is in. In binary! +

+ +

+ See, the + Hot Binary Heat Changing Mug + looks like just a dark mug with binary numbers all over it. That's its OFF or cold state. Add hot coffee (or any + liquid) and a series of digits will turn white. Read them continuously from left to right, and you'll read: + 010010000100111101010100. That's in binary. Of course, + your + Hot Binary Heat Changing Mug + could just be paying you a compliment. Cheeky, mug. +

+ +

+ 010010000100111101010100 +

+ +

Product Specifications

+ + + +

You wanna buy it?

+ +

If you like to buy this brilliant mug, just do the following steps:

+ +
    +
  1. Select how many items do you want.
    2. +
  2. Press "buy".
    3. +
+ +
+ + +
+
+ + + + + + diff --git a/03_dom/uebungen/u03_tasse-01001/assets/css/styles.css b/03_dom/uebungen/u03_tasse-01001/assets/css/styles.css new file mode 100644 index 0000000..c30a2d3 --- /dev/null +++ b/03_dom/uebungen/u03_tasse-01001/assets/css/styles.css @@ -0,0 +1,266 @@ +/* -------------------------------------------- Haupt CSS fuer alle Seiten -------------------------------------------- */ + +/* ---------------- CSS-Reset ------------------- */ +html, body, a, div, h1, h2, h3, h4, h5, h6, span, p, img, strong, ul, li, table, th, td, tr { + margin: 0px; + padding: 0px; + border: 0px none; + font-weight: normal; + font-style: inherit; + font-family: inherit; + font-variant: inherit; + text-decoration: none; + table-layout: inherit; +} + + +/* ---------------- Body / HTML ------------------- */ + +html { + font-size: 100%; + background-color: #fffef7; +} + +body { + font-family: Helvetica, Arial, sans-serif; + font-size: 1.2em; + font-weight: normal; + color: black; + margin: 0rem auto 2rem auto; +} + +/* ---------------- layout ------------------- */ + +header { + + background: url(../img/js_header.png) left top no-repeat transparent; + background-size: cover; + height: 250px; + min-width: 850px; +} + +header:after { + content: ' '; + display: block; + height: 250px; +background: rgba(255,254,247,0); +background: -moz-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%); +background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,254,247,0)), color-stop(22%, rgba(255,254,247,0.55)), color-stop(42%, rgba(255,254,247,0.7)), color-stop(43%, rgba(255,254,247,0.71)), color-stop(61%, rgba(255,254,247,0.78)), color-stop(75%, rgba(255,254,247,0.92)), color-stop(87%, rgba(255,254,247,1)), color-stop(100%, rgba(255,254,247,1))); +background: -webkit-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%); +background: -o-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%); +background: -ms-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%); +background: linear-gradient(to bottom, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%); +filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 ); +filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 ); +} + +main, +footer { + width: 70%; + margin: 3rem auto; + min-width: 850px; + padding: 0 20px; + box-sizing: border-box; +} + + + + + +/* ---------------- Content ------------------- */ + + + +h1 { + color: #93412b; + font-size: 3em; + margin-bottom: 20px; + font-weight: bold; +} + + +h2 { + color: #93412b; + font-size: 2.5em; + margin-bottom: 15px; +} + +h3 { + color: #93412b; + font-size: 2em; + margin-bottom: 10px; +} + +p { + line-height: 15px; + margin-bottom: 15px; + line-height: 1.7em; +} + +.cited { + font-style: italic; + font-size: .8em; +} + +.u {text-decoration: underline;} +.b {font-weight: bold;} +.i {font-style: italic} +.align_right {text-align: right;} +.align_left {text-align: left; margin-right: 10px;} +.align_center {text-align: center;} +.float_left {float: left;} +.float_right {float: right;} +.clear_both {clear: both;} +strong {font-weight: bold;} +.special { color: #b7595b; font-weight: bold; } +.keyword { color: #db6f50; font-weight: bold; font-style: italic;} +.gray {color: gray;} + +/* Links */ +main a:link, +main a:visited { + color: #eb690b; + font-weight: bold; +} + +main a:focus, +main a:hover, +main a:active {color: #eb690b;} + +ul { + list-style-position: outside; + margin-bottom: 20px; + padding-left: 22px; +} + +ol { + margin-bottom: 20px; + padding-left: 30px; +} + +li { + line-height: 1.4em; +} + + +/* ------- Article ------- */ + + +h1 { + color: #93412b; + font-size: 2.7em; + margin-bottom: 20px; +} + +#buy_form input[type=button] { + display: inline-block; + padding: 1px 20px 3px 20px; + background-color: #93412b; + color: white; + border: 1px solid white; + font-size: 1em; + height: 32px; +} + +#buy_form input[type=button]:hover { + background-color: white; + color: #93412b; + border: 1px solid #93412b; +} + +#buy_form select { + display: inline-block; + font-size: 1em; + background-color: white; + color: #93412b; + border: 1px solid #93412b; + height: 32px; +} + + +/* ------- Chat ------- */ + + +#chat { + width: 100%; + background-color: white; + border: 1px solid #9c352f; + height: 20rem; + position: relative; + +} + +#chat_window { + background-color: white; + width: 85%; + float: left; + height: 95%; +} + +#chat_history { + position: absolute; + bottom: 8%; + max-height: 92%; + padding: 0px 0px 5px 7px; +} + +#chat_history p { + font-size: .6em; + margin: 0; +} + +#chat_text { + height: 8%; + position: absolute; + bottom: 0; + width: 85%; +} + +#chat_text input { + width: 98%; + display: block; + margin: auto; +} + +#chat_members { + list-style-type: none; + height: 100%; + width: 15%; + margin-left: 85%; + border-left: 1px solid #9c352f; + text-align: right; + box-sizing: border-box; + min-width: 100px; + font-size: .8em; + padding-top: 5px; + +} + +#chat_members li { + line-height: 1.2em; + padding: 5px 10px 2px 15px; +} + + +#chat_members .highlighted { + background-color: #c14d45; + color: white; +} +.chat_member {font-weight: bold;} +.chat_member1 { color: #3626c8;} +.chat_member2 { color: #e38d0b;} + +#member_search { + position: absolute; + right: 0; + bottom: 0; + width: 15%; + height: 8%; +} + +#member_search input { + width: 88%; + display: block; + margin: auto; + text-align: right; +} diff --git a/03_dom/uebungen/u03_tasse-01001/assets/img/favicon.ico b/03_dom/uebungen/u03_tasse-01001/assets/img/favicon.ico new file mode 100644 index 0000000..bd2cd28 Binary files /dev/null and b/03_dom/uebungen/u03_tasse-01001/assets/img/favicon.ico differ diff --git a/03_dom/uebungen/u03_tasse-01001/assets/img/js_header.png b/03_dom/uebungen/u03_tasse-01001/assets/img/js_header.png new file mode 100644 index 0000000..4d14ceb Binary files /dev/null and b/03_dom/uebungen/u03_tasse-01001/assets/img/js_header.png differ diff --git a/03_dom/uebungen/u03_tasse-01001/assets/img/logo.png b/03_dom/uebungen/u03_tasse-01001/assets/img/logo.png new file mode 100644 index 0000000..bbd9fcc Binary files /dev/null and b/03_dom/uebungen/u03_tasse-01001/assets/img/logo.png differ diff --git a/03_dom/uebungen/u03_tasse-01001/assets/img/newsboard_empty.png b/03_dom/uebungen/u03_tasse-01001/assets/img/newsboard_empty.png new file mode 100644 index 0000000..d650b1b Binary files /dev/null and b/03_dom/uebungen/u03_tasse-01001/assets/img/newsboard_empty.png differ diff --git a/03_dom/uebungen/u03_tasse-01001/assets/img/newsboard_paperclip.png b/03_dom/uebungen/u03_tasse-01001/assets/img/newsboard_paperclip.png new file mode 100644 index 0000000..7f24721 Binary files /dev/null and b/03_dom/uebungen/u03_tasse-01001/assets/img/newsboard_paperclip.png differ diff --git a/03_dom/uebungen/u03_tasse-01001/assets/img/newsboard_sheets.png b/03_dom/uebungen/u03_tasse-01001/assets/img/newsboard_sheets.png new file mode 100644 index 0000000..14680cb Binary files /dev/null and b/03_dom/uebungen/u03_tasse-01001/assets/img/newsboard_sheets.png differ diff --git a/03_dom/uebungen/u03_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif b/03_dom/uebungen/u03_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif new file mode 100644 index 0000000..3a9c8ad Binary files /dev/null and b/03_dom/uebungen/u03_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif differ diff --git a/03_dom/uebungen/u03_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg b/03_dom/uebungen/u03_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg new file mode 100644 index 0000000..4399460 Binary files /dev/null and b/03_dom/uebungen/u03_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg differ diff --git a/03_dom/uebungen/u03_tasse-01001/index.html b/03_dom/uebungen/u03_tasse-01001/index.html new file mode 100644 index 0000000..4469b6c --- /dev/null +++ b/03_dom/uebungen/u03_tasse-01001/index.html @@ -0,0 +1,106 @@ + + + + + + 010010000100111101010100 + + + + + + + +
+ +
+

+ Hot Binary Heat Changing Mug + "010010000100111101010100" +

+ + Hot Binary Heat Changing Mug + +

Description

+ +

+ Numbers make up + everything in our digital world. They flow around us, invisible like the Force or + the Matrix, controlling all our many computer-y devices. Two numbers, in particular: + 0 and 1. Off and On. Well, we can tell you this: when + there's no coffee in our cup, we're completely OFF our game. But when our mug is full of hot coffee, we're + totally ON. And now, with the Hot Binary Heat Changing Mug, there's a mug that + tells us which state our mug is in. In binary! +

+ +

+ See, the + Hot Binary Heat Changing Mug + looks like just a dark mug with binary numbers all over it. That's its OFF or cold state. Add hot coffee (or any + liquid) and a series of digits will turn white. Read them continuously from left to right, and you'll read: + 010010000100111101010100. That's in binary. Of course, + your + Hot Binary Heat Changing Mug + could just be paying you a compliment. Cheeky, mug. +

+ +

+ 010010000100111101010100 +

+ +

Product Specifications

+ + + +

You wanna buy it?

+ +

If you like to buy this brilliant mug, just do the following steps:

+ +
    +
  1. Select how many items do you want.
    2. +
  2. Press "buy".
    3. +
+ +
+ + +
+
+ + + + + + diff --git a/03_dom/uebungen/u04_tasse-01001/assets/css/styles.css b/03_dom/uebungen/u04_tasse-01001/assets/css/styles.css new file mode 100644 index 0000000..c30a2d3 --- /dev/null +++ b/03_dom/uebungen/u04_tasse-01001/assets/css/styles.css @@ -0,0 +1,266 @@ +/* -------------------------------------------- Haupt CSS fuer alle Seiten -------------------------------------------- */ + +/* ---------------- CSS-Reset ------------------- */ +html, body, a, div, h1, h2, h3, h4, h5, h6, span, p, img, strong, ul, li, table, th, td, tr { + margin: 0px; + padding: 0px; + border: 0px none; + font-weight: normal; + font-style: inherit; + font-family: inherit; + font-variant: inherit; + text-decoration: none; + table-layout: inherit; +} + + +/* ---------------- Body / HTML ------------------- */ + +html { + font-size: 100%; + background-color: #fffef7; +} + +body { + font-family: Helvetica, Arial, sans-serif; + font-size: 1.2em; + font-weight: normal; + color: black; + margin: 0rem auto 2rem auto; +} + +/* ---------------- layout ------------------- */ + +header { + + background: url(../img/js_header.png) left top no-repeat transparent; + background-size: cover; + height: 250px; + min-width: 850px; +} + +header:after { + content: ' '; + display: block; + height: 250px; +background: rgba(255,254,247,0); +background: -moz-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%); +background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,254,247,0)), color-stop(22%, rgba(255,254,247,0.55)), color-stop(42%, rgba(255,254,247,0.7)), color-stop(43%, rgba(255,254,247,0.71)), color-stop(61%, rgba(255,254,247,0.78)), color-stop(75%, rgba(255,254,247,0.92)), color-stop(87%, rgba(255,254,247,1)), color-stop(100%, rgba(255,254,247,1))); +background: -webkit-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%); +background: -o-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%); +background: -ms-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%); +background: linear-gradient(to bottom, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%); +filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 ); +filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 ); +} + +main, +footer { + width: 70%; + margin: 3rem auto; + min-width: 850px; + padding: 0 20px; + box-sizing: border-box; +} + + + + + +/* ---------------- Content ------------------- */ + + + +h1 { + color: #93412b; + font-size: 3em; + margin-bottom: 20px; + font-weight: bold; +} + + +h2 { + color: #93412b; + font-size: 2.5em; + margin-bottom: 15px; +} + +h3 { + color: #93412b; + font-size: 2em; + margin-bottom: 10px; +} + +p { + line-height: 15px; + margin-bottom: 15px; + line-height: 1.7em; +} + +.cited { + font-style: italic; + font-size: .8em; +} + +.u {text-decoration: underline;} +.b {font-weight: bold;} +.i {font-style: italic} +.align_right {text-align: right;} +.align_left {text-align: left; margin-right: 10px;} +.align_center {text-align: center;} +.float_left {float: left;} +.float_right {float: right;} +.clear_both {clear: both;} +strong {font-weight: bold;} +.special { color: #b7595b; font-weight: bold; } +.keyword { color: #db6f50; font-weight: bold; font-style: italic;} +.gray {color: gray;} + +/* Links */ +main a:link, +main a:visited { + color: #eb690b; + font-weight: bold; +} + +main a:focus, +main a:hover, +main a:active {color: #eb690b;} + +ul { + list-style-position: outside; + margin-bottom: 20px; + padding-left: 22px; +} + +ol { + margin-bottom: 20px; + padding-left: 30px; +} + +li { + line-height: 1.4em; +} + + +/* ------- Article ------- */ + + +h1 { + color: #93412b; + font-size: 2.7em; + margin-bottom: 20px; +} + +#buy_form input[type=button] { + display: inline-block; + padding: 1px 20px 3px 20px; + background-color: #93412b; + color: white; + border: 1px solid white; + font-size: 1em; + height: 32px; +} + +#buy_form input[type=button]:hover { + background-color: white; + color: #93412b; + border: 1px solid #93412b; +} + +#buy_form select { + display: inline-block; + font-size: 1em; + background-color: white; + color: #93412b; + border: 1px solid #93412b; + height: 32px; +} + + +/* ------- Chat ------- */ + + +#chat { + width: 100%; + background-color: white; + border: 1px solid #9c352f; + height: 20rem; + position: relative; + +} + +#chat_window { + background-color: white; + width: 85%; + float: left; + height: 95%; +} + +#chat_history { + position: absolute; + bottom: 8%; + max-height: 92%; + padding: 0px 0px 5px 7px; +} + +#chat_history p { + font-size: .6em; + margin: 0; +} + +#chat_text { + height: 8%; + position: absolute; + bottom: 0; + width: 85%; +} + +#chat_text input { + width: 98%; + display: block; + margin: auto; +} + +#chat_members { + list-style-type: none; + height: 100%; + width: 15%; + margin-left: 85%; + border-left: 1px solid #9c352f; + text-align: right; + box-sizing: border-box; + min-width: 100px; + font-size: .8em; + padding-top: 5px; + +} + +#chat_members li { + line-height: 1.2em; + padding: 5px 10px 2px 15px; +} + + +#chat_members .highlighted { + background-color: #c14d45; + color: white; +} +.chat_member {font-weight: bold;} +.chat_member1 { color: #3626c8;} +.chat_member2 { color: #e38d0b;} + +#member_search { + position: absolute; + right: 0; + bottom: 0; + width: 15%; + height: 8%; +} + +#member_search input { + width: 88%; + display: block; + margin: auto; + text-align: right; +} diff --git a/03_dom/uebungen/u04_tasse-01001/assets/img/favicon.ico b/03_dom/uebungen/u04_tasse-01001/assets/img/favicon.ico new file mode 100644 index 0000000..bd2cd28 Binary files /dev/null and b/03_dom/uebungen/u04_tasse-01001/assets/img/favicon.ico differ diff --git a/03_dom/uebungen/u04_tasse-01001/assets/img/js_header.png b/03_dom/uebungen/u04_tasse-01001/assets/img/js_header.png new file mode 100644 index 0000000..4d14ceb Binary files /dev/null and b/03_dom/uebungen/u04_tasse-01001/assets/img/js_header.png differ diff --git a/03_dom/uebungen/u04_tasse-01001/assets/img/logo.png b/03_dom/uebungen/u04_tasse-01001/assets/img/logo.png new file mode 100644 index 0000000..bbd9fcc Binary files /dev/null and b/03_dom/uebungen/u04_tasse-01001/assets/img/logo.png differ diff --git a/03_dom/uebungen/u04_tasse-01001/assets/img/newsboard_empty.png b/03_dom/uebungen/u04_tasse-01001/assets/img/newsboard_empty.png new file mode 100644 index 0000000..d650b1b Binary files /dev/null and b/03_dom/uebungen/u04_tasse-01001/assets/img/newsboard_empty.png differ diff --git a/03_dom/uebungen/u04_tasse-01001/assets/img/newsboard_paperclip.png b/03_dom/uebungen/u04_tasse-01001/assets/img/newsboard_paperclip.png new file mode 100644 index 0000000..7f24721 Binary files /dev/null and b/03_dom/uebungen/u04_tasse-01001/assets/img/newsboard_paperclip.png differ diff --git a/03_dom/uebungen/u04_tasse-01001/assets/img/newsboard_sheets.png b/03_dom/uebungen/u04_tasse-01001/assets/img/newsboard_sheets.png new file mode 100644 index 0000000..14680cb Binary files /dev/null and b/03_dom/uebungen/u04_tasse-01001/assets/img/newsboard_sheets.png differ diff --git a/03_dom/uebungen/u04_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif b/03_dom/uebungen/u04_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif new file mode 100644 index 0000000..3a9c8ad Binary files /dev/null and b/03_dom/uebungen/u04_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif differ diff --git a/03_dom/uebungen/u04_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg b/03_dom/uebungen/u04_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg new file mode 100644 index 0000000..4399460 Binary files /dev/null and b/03_dom/uebungen/u04_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg differ diff --git a/03_dom/uebungen/u04_tasse-01001/index.html b/03_dom/uebungen/u04_tasse-01001/index.html new file mode 100644 index 0000000..694e4fa --- /dev/null +++ b/03_dom/uebungen/u04_tasse-01001/index.html @@ -0,0 +1,106 @@ + + + + + + 010010000100111101010100 + + + + + + + +
+ +
+

+ Hot Binary Heat Changing Mug + "010010000100111101010100" +

+ + Hot Binary Heat Changing Mug + +

Description

+ +

+ Numbers make up + everything in our digital world. They flow around us, invisible like the Force or + the Matrix, controlling all our many computer-y devices. Two numbers, in particular: + 0 and 1. Off and On. Well, we can tell you this: when + there's no coffee in our cup, we're completely OFF our game. But when our mug is full of hot coffee, we're + totally ON. And now, with the Hot Binary Heat Changing Mug, there's a mug that + tells us which state our mug is in. In binary! +

+ +

+ See, the + Hot Binary Heat Changing Mug + looks like just a dark mug with binary numbers all over it. That's its OFF or cold state. Add hot coffee (or any + liquid) and a series of digits will turn white. Read them continuously from left to right, and you'll read: + 010010000100111101010100. That's in binary. Of course, + your + Hot Binary Heat Changing Mug + could just be paying you a compliment. Cheeky, mug. +

+ +

+ 010010000100111101010100 +

+ +

Product Specifications

+ + + +

You wanna buy it?

+ +

If you like to buy this brilliant mug, just do the following steps:

+ +
    +
  1. Select how many items do you want.
    2. +
  2. Press "buy".
    3. +
+ +
+ + +
+
+ + + + + + diff --git a/03_dom/uebungen/u05_tasse-01001/assets/css/styles.css b/03_dom/uebungen/u05_tasse-01001/assets/css/styles.css new file mode 100644 index 0000000..c30a2d3 --- /dev/null +++ b/03_dom/uebungen/u05_tasse-01001/assets/css/styles.css @@ -0,0 +1,266 @@ +/* -------------------------------------------- Haupt CSS fuer alle Seiten -------------------------------------------- */ + +/* ---------------- CSS-Reset ------------------- */ +html, body, a, div, h1, h2, h3, h4, h5, h6, span, p, img, strong, ul, li, table, th, td, tr { + margin: 0px; + padding: 0px; + border: 0px none; + font-weight: normal; + font-style: inherit; + font-family: inherit; + font-variant: inherit; + text-decoration: none; + table-layout: inherit; +} + + +/* ---------------- Body / HTML ------------------- */ + +html { + font-size: 100%; + background-color: #fffef7; +} + +body { + font-family: Helvetica, Arial, sans-serif; + font-size: 1.2em; + font-weight: normal; + color: black; + margin: 0rem auto 2rem auto; +} + +/* ---------------- layout ------------------- */ + +header { + + background: url(../img/js_header.png) left top no-repeat transparent; + background-size: cover; + height: 250px; + min-width: 850px; +} + +header:after { + content: ' '; + display: block; + height: 250px; +background: rgba(255,254,247,0); +background: -moz-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%); +background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,254,247,0)), color-stop(22%, rgba(255,254,247,0.55)), color-stop(42%, rgba(255,254,247,0.7)), color-stop(43%, rgba(255,254,247,0.71)), color-stop(61%, rgba(255,254,247,0.78)), color-stop(75%, rgba(255,254,247,0.92)), color-stop(87%, rgba(255,254,247,1)), color-stop(100%, rgba(255,254,247,1))); +background: -webkit-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%); +background: -o-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%); +background: -ms-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%); +background: linear-gradient(to bottom, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%); +filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 ); +filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 ); +} + +main, +footer { + width: 70%; + margin: 3rem auto; + min-width: 850px; + padding: 0 20px; + box-sizing: border-box; +} + + + + + +/* ---------------- Content ------------------- */ + + + +h1 { + color: #93412b; + font-size: 3em; + margin-bottom: 20px; + font-weight: bold; +} + + +h2 { + color: #93412b; + font-size: 2.5em; + margin-bottom: 15px; +} + +h3 { + color: #93412b; + font-size: 2em; + margin-bottom: 10px; +} + +p { + line-height: 15px; + margin-bottom: 15px; + line-height: 1.7em; +} + +.cited { + font-style: italic; + font-size: .8em; +} + +.u {text-decoration: underline;} +.b {font-weight: bold;} +.i {font-style: italic} +.align_right {text-align: right;} +.align_left {text-align: left; margin-right: 10px;} +.align_center {text-align: center;} +.float_left {float: left;} +.float_right {float: right;} +.clear_both {clear: both;} +strong {font-weight: bold;} +.special { color: #b7595b; font-weight: bold; } +.keyword { color: #db6f50; font-weight: bold; font-style: italic;} +.gray {color: gray;} + +/* Links */ +main a:link, +main a:visited { + color: #eb690b; + font-weight: bold; +} + +main a:focus, +main a:hover, +main a:active {color: #eb690b;} + +ul { + list-style-position: outside; + margin-bottom: 20px; + padding-left: 22px; +} + +ol { + margin-bottom: 20px; + padding-left: 30px; +} + +li { + line-height: 1.4em; +} + + +/* ------- Article ------- */ + + +h1 { + color: #93412b; + font-size: 2.7em; + margin-bottom: 20px; +} + +#buy_form input[type=button] { + display: inline-block; + padding: 1px 20px 3px 20px; + background-color: #93412b; + color: white; + border: 1px solid white; + font-size: 1em; + height: 32px; +} + +#buy_form input[type=button]:hover { + background-color: white; + color: #93412b; + border: 1px solid #93412b; +} + +#buy_form select { + display: inline-block; + font-size: 1em; + background-color: white; + color: #93412b; + border: 1px solid #93412b; + height: 32px; +} + + +/* ------- Chat ------- */ + + +#chat { + width: 100%; + background-color: white; + border: 1px solid #9c352f; + height: 20rem; + position: relative; + +} + +#chat_window { + background-color: white; + width: 85%; + float: left; + height: 95%; +} + +#chat_history { + position: absolute; + bottom: 8%; + max-height: 92%; + padding: 0px 0px 5px 7px; +} + +#chat_history p { + font-size: .6em; + margin: 0; +} + +#chat_text { + height: 8%; + position: absolute; + bottom: 0; + width: 85%; +} + +#chat_text input { + width: 98%; + display: block; + margin: auto; +} + +#chat_members { + list-style-type: none; + height: 100%; + width: 15%; + margin-left: 85%; + border-left: 1px solid #9c352f; + text-align: right; + box-sizing: border-box; + min-width: 100px; + font-size: .8em; + padding-top: 5px; + +} + +#chat_members li { + line-height: 1.2em; + padding: 5px 10px 2px 15px; +} + + +#chat_members .highlighted { + background-color: #c14d45; + color: white; +} +.chat_member {font-weight: bold;} +.chat_member1 { color: #3626c8;} +.chat_member2 { color: #e38d0b;} + +#member_search { + position: absolute; + right: 0; + bottom: 0; + width: 15%; + height: 8%; +} + +#member_search input { + width: 88%; + display: block; + margin: auto; + text-align: right; +} diff --git a/03_dom/uebungen/u05_tasse-01001/assets/img/favicon.ico b/03_dom/uebungen/u05_tasse-01001/assets/img/favicon.ico new file mode 100644 index 0000000..bd2cd28 Binary files /dev/null and b/03_dom/uebungen/u05_tasse-01001/assets/img/favicon.ico differ diff --git a/03_dom/uebungen/u05_tasse-01001/assets/img/js_header.png b/03_dom/uebungen/u05_tasse-01001/assets/img/js_header.png new file mode 100644 index 0000000..4d14ceb Binary files /dev/null and b/03_dom/uebungen/u05_tasse-01001/assets/img/js_header.png differ diff --git a/03_dom/uebungen/u05_tasse-01001/assets/img/logo.png b/03_dom/uebungen/u05_tasse-01001/assets/img/logo.png new file mode 100644 index 0000000..bbd9fcc Binary files /dev/null and b/03_dom/uebungen/u05_tasse-01001/assets/img/logo.png differ diff --git a/03_dom/uebungen/u05_tasse-01001/assets/img/newsboard_empty.png b/03_dom/uebungen/u05_tasse-01001/assets/img/newsboard_empty.png new file mode 100644 index 0000000..d650b1b Binary files /dev/null and b/03_dom/uebungen/u05_tasse-01001/assets/img/newsboard_empty.png differ diff --git a/03_dom/uebungen/u05_tasse-01001/assets/img/newsboard_paperclip.png b/03_dom/uebungen/u05_tasse-01001/assets/img/newsboard_paperclip.png new file mode 100644 index 0000000..7f24721 Binary files /dev/null and b/03_dom/uebungen/u05_tasse-01001/assets/img/newsboard_paperclip.png differ diff --git a/03_dom/uebungen/u05_tasse-01001/assets/img/newsboard_sheets.png b/03_dom/uebungen/u05_tasse-01001/assets/img/newsboard_sheets.png new file mode 100644 index 0000000..14680cb Binary files /dev/null and b/03_dom/uebungen/u05_tasse-01001/assets/img/newsboard_sheets.png differ diff --git a/03_dom/uebungen/u05_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif b/03_dom/uebungen/u05_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif new file mode 100644 index 0000000..3a9c8ad Binary files /dev/null and b/03_dom/uebungen/u05_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif differ diff --git a/03_dom/uebungen/u05_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg b/03_dom/uebungen/u05_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg new file mode 100644 index 0000000..4399460 Binary files /dev/null and b/03_dom/uebungen/u05_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg differ diff --git a/03_dom/uebungen/u05_tasse-01001/index.html b/03_dom/uebungen/u05_tasse-01001/index.html new file mode 100644 index 0000000..f8d6c7a --- /dev/null +++ b/03_dom/uebungen/u05_tasse-01001/index.html @@ -0,0 +1,109 @@ + + + + + + 010010000100111101010100 + + + + + + + +
+ +
+

+ Hot Binary Heat Changing Mug + "010010000100111101010100" +

+ + Hot Binary Heat Changing Mug + +

Description

+ +

+ Numbers make up + everything in our digital world. They flow around us, invisible like the Force or + the Matrix, controlling all our many computer-y devices. Two numbers, in particular: + 0 and 1. Off and On. Well, we can tell you this: when + there's no coffee in our cup, we're completely OFF our game. But when our mug is full of hot coffee, we're + totally ON. And now, with the Hot Binary Heat Changing Mug, there's a mug that + tells us which state our mug is in. In binary! +

+ +

+ See, the + Hot Binary Heat Changing Mug + looks like just a dark mug with binary numbers all over it. That's its OFF or cold state. Add hot coffee (or any + liquid) and a series of digits will turn white. Read them continuously from left to right, and you'll read: + 010010000100111101010100. That's in binary. Of course, + your + Hot Binary Heat Changing Mug + could just be paying you a compliment. Cheeky, mug. +

+ +

+ 010010000100111101010100 +

+ +

Product Specifications

+ + + +

You wanna buy it?

+ +

If you like to buy this brilliant mug, just do the following steps:

+ +
    +
  1. Select how many items do you want.
    2. +
  2. Press "buy".
    3. +
+ +
+ + + +
+
+ + + + + + diff --git a/03_dom/uebungen/uebungen-1-5.zip b/03_dom/uebungen/uebungen-1-5.zip new file mode 100644 index 0000000..aed49cc Binary files /dev/null and b/03_dom/uebungen/uebungen-1-5.zip differ diff --git a/03_dom/unterricht/tag21/01_vorwort/vorwort.md b/03_dom/unterricht/tag21/01_vorwort/vorwort.md new file mode 100644 index 0000000..fabe20a --- /dev/null +++ b/03_dom/unterricht/tag21/01_vorwort/vorwort.md @@ -0,0 +1,22 @@ +| Bezeichnung | Abkürzung | +| ----------- | ------------------------------------- | +| DOM | Document Object Model | +| API | Application Programming Interface | +| ROCA | Resource-Oriented Client Architecture | +| SEO |  Search Engine Optimization | +| SEA | Search Engine Advertising | +| Vanilla JS | reines JavaScript ohne Framework | + +## Links: Warum kein jQuery mehr? + +- +- +- +- + +## Links: Warum jQuery yeah! + +- +- +- +- diff --git a/03_dom/unterricht/tag21/02_document-query-selector/index.html b/03_dom/unterricht/tag21/02_document-query-selector/index.html new file mode 100644 index 0000000..8a7f2b4 --- /dev/null +++ b/03_dom/unterricht/tag21/02_document-query-selector/index.html @@ -0,0 +1,27 @@ + + + + + + document.querySelector() - Hello World + + + +
+
+

document.querySelector() - Hello World

+
+
+ + + diff --git a/03_dom/unterricht/tag21/03_css-selektoren/index.html b/03_dom/unterricht/tag21/03_css-selektoren/index.html new file mode 100644 index 0000000..cd08ca3 --- /dev/null +++ b/03_dom/unterricht/tag21/03_css-selektoren/index.html @@ -0,0 +1,70 @@ + + + + + + CSS Selektoren + + + + + +
+
+

CSS Selektoren

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis iusto ea id quos dolor accusantium ipsum at + natus quidem commodi dolorem aspernatur a porro, vitae cumque. Soluta temporibus quis facilis? +

+
Box
+ + image +
+
+ + + diff --git a/03_dom/unterricht/tag21/04_document-query-selector-all/index.html b/03_dom/unterricht/tag21/04_document-query-selector-all/index.html new file mode 100644 index 0000000..41226c9 --- /dev/null +++ b/03_dom/unterricht/tag21/04_document-query-selector-all/index.html @@ -0,0 +1,41 @@ + + + + + + document.querySelectorAll() + + + +
+
+

document.querySelectorAll()

+
+

Quod eligendi saepe voluptates eveniet.

+

Architecto reiciendis magnam modi inventore.

+

Modi ipsum, velit rem ipsam.

+

Provident, officia quisquam aliquam deserunt!

+
+
+ + + diff --git a/03_dom/unterricht/tag21/05_css-attribut-selektoren/index.html b/03_dom/unterricht/tag21/05_css-attribut-selektoren/index.html new file mode 100644 index 0000000..e857853 --- /dev/null +++ b/03_dom/unterricht/tag21/05_css-attribut-selektoren/index.html @@ -0,0 +1,87 @@ + + + + + + CSS Attribut Selektor + + + + +
+
+

CSS Attribut Selektor

+
+ + + +

Bilder

+

Erstellte Bilder über Dummyimage.com

+
    +
    • +
    • +
    • +
    • +
+

+ Lorem, ipsum dolor sit amet consectetur Zur GFN Webseite adipisicing elit. + Veniam quisquam quidem ut eos dolorem corrupti aut Link sed rerum voluptate dolore quod unde + explicabo architecto numquam eaque in, qui possimus voluptatem? +

+
+
+ + + diff --git a/03_dom/unterricht/tag21/06_css-combinator-selektoren/index.html b/03_dom/unterricht/tag21/06_css-combinator-selektoren/index.html new file mode 100644 index 0000000..2650cfe --- /dev/null +++ b/03_dom/unterricht/tag21/06_css-combinator-selektoren/index.html @@ -0,0 +1,86 @@ + + + + + + CSS Kombinator Selektor + + + + +
+
+

CSS Kombinator Selektor

+
+ + + +

Bilder

+

Erstellte Bilder über Dummyimage.com

+
    +
    • +
    • +
    • +
    • +
+

+ Lorem, ipsum dolor sit amet consectetur Zur GFN Webseite adipisicing elit. + Veniam quisquam quidem ut eos dolorem corrupti aut Link sed rerum voluptate dolore quod unde + explicabo architecto numquam eaque in, qui possimus voluptatem? +

+
+
+ + + diff --git a/03_dom/unterricht/tag21/07_css-pseudoklassen/index.html b/03_dom/unterricht/tag21/07_css-pseudoklassen/index.html new file mode 100644 index 0000000..849dd07 --- /dev/null +++ b/03_dom/unterricht/tag21/07_css-pseudoklassen/index.html @@ -0,0 +1,200 @@ + + + + + + CSS Selektor - Pseudoklassen + + + + + +
+
+

CSS Selektor - Pseudoklassen

+
+

+ Eine + Pseudoklasse + in CSS ist ein Schlüsselbegriff, welcher hinter einen Selektor gestellt wird, um einen besonderen Zustand + abzufragen. So steht beispielsweise :hover für Elemente, die gerade mit dem Mauszeiger berührt + werden. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameBeschreibung
:nth-child + Die Pseudo-Klasse spricht das x-te Kind-Element an — im Beispiel das fünfte Element innerhalb von ul, + falls es vom Tag-Typ li ist. +
:first-childDie Pseudo-Klasse selektiert das erste Kind-Element, sofern es vom richtigen Tag-Typ ist..
:last-child + Äquivalent zu :first-child selektieren Sie hier das letzte Kind-Element, sofern es vom richtigen Tag-Typ + ist. +
:empty + Mit dieser Pseudo-Klasse sprechen Sie nur Elemente an, die ohne Kind-Elemente sind. Inhalt in Form von + Text wird dabei ebenfalls als Kind-Element betrachtet. +
:not(selector) + Negation. Wählt Elemente aus, wenn sie nicht dem in Klammern angegebenen Selektor entsprechen. Im + Beispiel würde alles außer span-Elementen ausgewählt. +
:only-child + Diese Klasse selektiert ein Element nur, wenn es sich um das einzige Kind eines angegebenen + Eltern-Elementes handelt. +
:checkedDiese Klasse selektiert eine Checkbox oder ein Radio-button nur, wenn es ausgewählt wurde.
+ +
+ + +
+
+
+ + + diff --git a/03_dom/unterricht/tag21/08_document-vs-element-selektion/index.html b/03_dom/unterricht/tag21/08_document-vs-element-selektion/index.html new file mode 100644 index 0000000..4e3cbf0 --- /dev/null +++ b/03_dom/unterricht/tag21/08_document-vs-element-selektion/index.html @@ -0,0 +1,38 @@ + + + + + + document.querySelector() vs. element.querySelector() + + + +
+
+

document.querySelector() vs. element.querySelector()

+
+
    +
  • 1
    • +
  • 2
    • +
+
    +
  • 3
    • +
  • 4
    • +
+
+
+ + + diff --git a/03_dom/unterricht/tag21/09_$-$$-helper/index.html b/03_dom/unterricht/tag21/09_$-$$-helper/index.html new file mode 100644 index 0000000..508d14b --- /dev/null +++ b/03_dom/unterricht/tag21/09_$-$$-helper/index.html @@ -0,0 +1,45 @@ + + + + + + Helferfunktion $ und $$ + + + + +
+
+

Helferfunktion $ und $$

+
+

Lorem ipsum dolor sit amet.

+

Quod eligendi saepe voluptates eveniet.

+

Architecto reiciendis magnam modi inventore.

+

Modi ipsum, velit rem ipsam.

+

Provident, officia quisquam aliquam deserunt!

+
+
+ + +