Skip to content
Snippets Groups Projects
Commit f9b320c1 authored by Sebastian Rosauer's avatar Sebastian Rosauer
Browse files

Merge branch 'develop' into 'master' 

Merge Version 2

See merge request !1
parents 95fdf08a d09cd556
No related branches found
No related tags found
2 merge requests!2Resync master and develop,!1Merge Version 2
This commit is part of merge request !2. Comments created here will be created in the context of that merge request.
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 118761 additions and 0 deletions
.gitignore 0 → 100644
+ 23
− 0
Edit View file @ f9b320c1
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
README.md 0 → 100644
+ 24
− 0
Edit View file @ f9b320c1
# homepage
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
babel.config.js 0 → 100644
+ 3
− 0
Edit View file @ f9b320c1
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"]
};
package-lock.json 0 → 100644
+ 12051
− 0
Edit View file @ f9b320c1
This diff is collapsed.
package.json 0 → 100644
+ 54
− 0
Edit View file @ f9b320c1
{
"name": "homepage",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuetify": "^2.2.11"
},
"devDependencies": {
"@mdi/font": "^5.5.55",
"@vue/cli-plugin-babel": "^4.5.0",
"@vue/cli-plugin-eslint": "^4.5.0",
"@vue/cli-plugin-router": "^4.5.0",
"@vue/cli-service": "^4.5.0",
"@vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^6.2.2",
"prettier": "^1.19.1",
"sass": "^1.19.0",
"sass-loader": "^8.0.0",
"vue-cli-plugin-vuetify": "^2.0.7",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.3.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended",
"@vue/prettier"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
public/favicon.ico 0 → 100644
+ 0
− 0
View file @ f9b320c1
public/favicon.ico

4.19 KiB

public/index.html 0 → 100644
+ 19
− 0
Edit View file @ f9b320c1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
public/we_tasks/images/Batman.jpg 0 → 100644
+ 0
− 0
View file @ f9b320c1
public/we_tasks/images/Batman.jpg

52.1 KiB

public/we_tasks/images/Hulk.jpg 0 → 100644
+ 0
− 0
View file @ f9b320c1
public/we_tasks/images/Hulk.jpg

61.3 KiB

public/we_tasks/images/Ironman.jpg 0 → 100644
+ 0
− 0
View file @ f9b320c1
public/we_tasks/images/Ironman.jpg

66.9 KiB

public/we_tasks/task02/2_3.html 0 → 100644
+ 58
− 0
Edit View file @ f9b320c1
<html>
<head>
<title>&Uuml;1.2</title>
</head>
<body>
<h1>&Uuml;bung 1.2: Inventors of the Web</h1>
<ul>
<li><mark><u><b>Tim Berners-Lee:</b></u></mark> WWW, HTTP, HTML, URI</li>
<li><b>Hakom Lie and Bert Bos:</b> CSS</li>
<li><b>Brendan Eich:</b> JavaScript</li>
</ul>
<hr>
<br>
<h2>Inventors of the WWW</h2>
<table border="6">
<tr>
<th colspan="4">Inventors of the WWW</th>
</tr>
<tr>
<th>WWW</th>
<th>HTML</th>
<th>CSS</th>
<th>JavaScript</th>
</tr>
<tr>
<td><mark>Tim Berners-Lee</mark></td>
<td><mark>Tim Berners-Lee</mark></td>
<td>Hakom Lie und Bert Bos</td>
<td>Brendan Eich</td>
</tr>
</table>
<hr>
<table>
<tr>
<th colspan="3">Inventors of the WWW</td>
<hr>
</tr>
<tr>
<th><b>HTML</b></th>
<th><b>|</b></th>
<th><b>JavaScript</b></th>
</tr>
<tr>
<td><img width="125px" src="https://kaul.inf.h-brs.de/data/2018/we/img/tbl.jpg" alt="Tim Berners-Lee"></td>
<td><b>|</b></td>
<td><img width="125x" src="https://kaul.inf.h-brs.de/data/2018/we/img/eich.jpg" alt="Brendan Eich"></td>
</tr>
<tr>
<td><mark>im Berners-Lee</mark></td>
<td><b>|</b></td>
<td>Brendan Eich</td>
</tr>
</table>
<hr>
</body>
</html>
\ No newline at end of file
public/we_tasks/task02/2_4.html 0 → 100644
+ 107
− 0
Edit View file @ f9b320c1
<html>
<head>
<style>
* {
font-family: Arial, Helvetica, sans-serif;
}
body {
background-color: #9BDCD0;
}
h1 {
margin: 20px;
text-align: center;
font-size: 2.5em;
}
div.content {
background-color: white;
font-size: 1em;
text-align: center;
margin: 30px;
padding: 40px 100px 40px 100px;
border-radius: 4px;
}
table {
margin: 0 auto;
margin-top: 10px;
}
td {
width: 50%;
vertical-align: top;
padding-top: 20px;
padding-right: 10px;
}
td:first-child {
padding-top: 25px;
text-align: right;
}
td:nth-child(2) {
line-height: 30px;
}
input[type="text"],
input[type="number"] {
width: 250px;
}
select{
width: 175px;
}
</style>
</head>
<body>
<h1>Survey Form</h1>
<div class="content">
Let us know how we can improve freeCodeCamp<br>
<table>
<tr>
<td>* Name:</td>
<td>
<input type="text" placeholder="Enter your name">
</td>
</tr>
<tr>
<td>* Email:</td>
<td>
<input type="text" placeholder="Enter your Email">
</td>
</tr>
<tr>
<td>* Age:</td>
<td>
<input type="number" placeholder="Age">
</td>
</tr>
<tr>
<td>Which option best describes your current role?</td>
<td>
<select>
<option value="Student">Student</option>
</select>
</td>
</tr>
<tr>
<td>* How likely is that your would recommend freeCodeCamp to a friend?</td>
<td>
<input type="radio" name="recommend" value="definitely">Definitely<br>
<input type="radio" name="recommend" value="maybe">Maybe<br>
<input type="radio" name="recommend" value="notsure">Not sure
</td>
</tr>
<tr>
<td>What do you like most in FCC:</td>
<td>
<select>
<option value="">Select an option</option>
</select>
</td>
</tr>
<tr>
<td>Things that should be improved in the future (Check all that apply):</td>
<td>
<input type="checkbox" value="frontend">Front-end Projects<br>
<input type="checkbox" value="backend">Back-end Projects<br>
<input type="checkbox" value="datavisualization">Data Visualization
</td>
</tr>
</table>
</div>
</body>
</html>
\ No newline at end of file
public/we_tasks/task03/3_1.html 0 → 100644
+ 94
− 0
Edit View file @ f9b320c1
<html>
<head>
<title>Flex Desktop First</title>
<style>
:root {
--containerMargin: 20px;
--itemMargin: 10px;
}
body {
margin: 0;
}
.flex_container {
display: flex;
flex-wrap: wrap;
margin: var(--containerMargin);
width: calc(100vw - 2*var(--containerMargin));
height: calc(100vh - 2*var(--containerMargin));
}
.flex_item {
margin: var(--itemMargin);
}
.red {
background-color: red;
width: calc(100% - 2*var(--itemMargin));
height: calc(20% - 2*var(--itemMargin));
}
.green {
background-color: green;
width: calc(20% - 2*var(--itemMargin));
height: calc(80% - 2*var(--itemMargin));
}
.blue {
background-color: blue;
width: calc(60% - 2*var(--itemMargin));
height: calc(80% - 2*var(--itemMargin));
}
.violet {
background-color: violet;
width: calc(20% - 2*var(--itemMargin));
height: calc(80% - 2*var(--itemMargin));
}
@media screen and (max-width: 1200px){
:root {
--containerMargin: 10px;
--itemMargin: 5px;
}
.green {
height: calc(110% - 2*var(--itemMargin));
}
.blue {
width: calc(80% - 2*var(--itemMargin));
height: calc(110% - 2*var(--itemMargin));
}
.violet {
width: calc(100% - 2*var(--itemMargin));
height: calc(20% - 2*var(--itemMargin));
}
}
@media screen and (max-width: 600px) {
:root {
--itemMargin: 0px;
}
.flex_item {
width: calc(100% - 2*var(--itemMargin));
}
.green {
height: calc(20% - 2*var(--itemMargin));
}
.blue {
height: calc(160% - 2*var(--itemMargin));
}
.violet {
height: calc(20% - 2*var(--itemMargin));
}
}
</style>
</head>
<body>
<div class="flex_container">
<div class="flex_item red"></div>
<div class="flex_item green"></div>
<div class="flex_item blue"></div>
<div class="flex_item violet"></div>
</div>
</body>
</html>
\ No newline at end of file
public/we_tasks/task03/3_2.html 0 → 100644
+ 91
− 0
Edit View file @ f9b320c1
<html>
<head>
<title>Flex Mobile First</title>
<style>
:root {
--containerMargin: 10px;
}
body {
margin: 0;
}
.flex_container {
margin: var(--containerMargin);
display: flex;
flex-wrap: wrap;
width: calc(100vw - 2*var(--containerMargin));
height: calc(100vh - 2*var(--containerMargin));
}
.flex_item {
width: 100%;
}
.red {
background-color: red;
height: 20%;
}
.green {
background-color: green;
height: 20%;
}
.blue {
background-color: blue;
height: 160%;
}
.violet {
background-color: violet;
height: 20%;
}
@media screen and (min-width: 600px) {
:root {
--itemMargin: 5px;
}
.flex_item {
margin: var(--itemMargin);
}
.red {
width: calc(100% - 2*var(--itemMargin));
height: calc(20% - 2*var(--itemMargin));
}
.green {
width: calc(20% - 2*var(--itemMargin));
height: calc(110% - 2*var(--itemMargin));
}
.blue {
width: calc(80% - 2*var(--itemMargin));
height: calc(110% - 2*var(--itemMargin));
}
}
@media screen and (min-width: 1200px) {
:root {
--containerMargin: 20px;
--itemMargin: 10px;
}
.green {
height: calc(80% - 2*var(--itemMargin));
}
.blue {
width: calc(60% - 2*var(--itemMargin));
height: calc(80% - 2*var(--itemMargin));
}
.violet {
width: calc(20% - 2*var(--itemMargin));
height: calc(80% - 2*var(--itemMargin));
}
}
</style>
</head>
<body>
<div class="flex_container">
<div class="flex_item red"></div>
<div class="flex_item green"></div>
<div class="flex_item blue"></div>
<div class="flex_item violet"></div>
</div>
</body>
</html>
\ No newline at end of file
public/we_tasks/task03/3_3.html 0 → 100644
+ 90
− 0
Edit View file @ f9b320c1
<html>
<head>
<title>Grid Desktop First</title>
<style>
:root {
--containerMargin: 20px;
--itemMargin: 10px;
}
body {
margin: 0;
}
.flex_container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: 1fr 4fr;
grid-template-areas:
"red red red "
"green blue violet"
"green blue violet";
grid-gap: var(--itemMargin);
margin: var(--containerMargin);
width: calc(100vw - 2*var(--containerMargin));
height: calc(100vh - 2*var(--containerMargin));
}
.red {
background-color: red;
grid-area: red;
}
.green {
background-color: green;
grid-area: green;
}
.blue {
background-color: blue;
grid-area: blue;
}
.violet {
background-color: violet;
grid-area: violet;
}
@media screen and (max-width: 1200px) {
:root {
--containerMargin: 10px;
--itemMargin: 5px;
}
.flex_container {
grid-template-columns: 1fr 4fr;
grid-template-rows: 1fr 5fr 1fr;
grid-template-areas:
"red red"
"green blue"
"violet violet";
height: calc(150vh - 2*var(--containerMargin));
}
}
@media screen and (max-width: 600px) {
:root {
--itemMargin: 0px;
}
.flex_container {
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 7fr 1fr;
grid-template-areas:
"red"
"green"
"blue"
"violet";
height: calc(200vh - 2*var(--containerMargin));
}
}
</style>
</head>
<body>
<div class="flex_container">
<div class="flex_item red"></div>
<div class="flex_item green"></div>
<div class="flex_item blue"></div>
<div class="flex_item violet"></div>
</div>
</body>
</html>
\ No newline at end of file
public/we_tasks/task03/3_4.html 0 → 100644
+ 88
− 0
Edit View file @ f9b320c1
<html>
<head>
<title>Grid Mobile First</title>
<style>
:root {
--containerMargin: 10px;
}
body {
margin: 0;
}
.flex_container {
margin: var(--containerMargin);
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 7fr 1fr;
grid-template-areas:
"red"
"green"
"blue"
"violet";
height: calc(200vh - 2*var(--containerMargin));
}
.red {
grid-area: red;
background-color: red;
}
.green {
grid-area: green;
background-color: green;
}
.blue {
grid-area: blue;
background-color: blue;
}
.violet {
grid-area: violet;
background-color: violet;
}
@media screen and (min-width: 600px) {
:root {
--marginItem: 5px;
}
.flex_container {
grid-template-columns: 1fr 4fr;
grid-template-rows: 1fr 5fr 1fr;
grid-template-areas:
"red red"
"green blue"
"violet violet";
grid-gap: var(--marginItem);
height: calc(150vh - 2*var(--containerMargin));
}
}
@media screen and (min-width: 1200px) {
:root {
--marginItem: 10px;
--marginContainer: 20px;
}
.flex_Container {
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: 1fr 4fr;
grid-template-areas:
"red red red "
"green blue violet"
"green blue violet";
margin: var(--containerMargin);
width: calc(100vw - 2*var(--containerMargin));
height: calc(100vh - 2*var(--containerMargin));
}
}
</style>
</head>
<body>
<div class="flex_container">
<div class="flex_item red"></div>
<div class="flex_item green"></div>
<div class="flex_item blue"></div>
<div class="flex_item violet"></div>
</div>
</body>
</html>
\ No newline at end of file
public/we_tasks/task05/5_1.html 0 → 100644
+ 29
− 0
Edit View file @ f9b320c1
<html>
<head>
<title>Einkaufsliste!</title>
</head>
<body>
<h1>Einkaufsliste!</h1>
<label>Artikelname: </label>
<input id="input" type="text"></input>
<button id="add">Hinzufügen!</button>
<ul id="shoppingList"></ul>
</body>
<script>
const input = document.querySelector('#input');
const add = document.querySelector('#add');
const shoppingList = document.querySelector('#shoppingList');
add.onclick = function(){
const listItem = document.createElement('li');
listItem.innerHTML = `${input.value} <button>Löschen!</button>`;
const deleteButton = listItem.querySelector('button');
deleteButton.onclick = function (){
shoppingList.removeChild(listItem);
}
shoppingList.appendChild(listItem);
input.value = "";
}
</script>
</html>
\ No newline at end of file
public/we_tasks/task05/5_2.html 0 → 100644
+ 58
− 0
Edit View file @ f9b320c1
<html>
<head>
<title>
Rednerliste!
</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Rednerliste</h1>
<label>Neuer Redner: </label>
<input id="input" type="text">
<button id="button">Los!</button>
<ul id="list"></ul>
</body>
<script>
const input = document.querySelector('#input');
const button = document.querySelector('#button');
const list = document.querySelector('#list');
const stopper = [];
button.onclick = function(){
const speakerElement = document.createElement('li');
speakerElement.innerHTML = `${input.value} <span>00:00:00</span> <button>Stop!</button>`;
const time = new Date();
time.setHours(0,0,0,0);
const timeField = speakerElement.querySelector('span');
const button = speakerElement.querySelector('button');
var repeater;
const start = function(){
stopper.forEach(element => {
element();
});
repeater = setInterval(() => {
time.setSeconds(time.getSeconds() +1);
// timeField.innerText = `${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`
timeField.innerText = `${time.toLocaleTimeString("de-DE")}`
}, 1000);
button.onclick = stop;
button.innerText = "Stop!";
};
const stop = () => {
clearInterval(repeater);
button.innerText = "Start!";
button.onclick = start;
};
list.appendChild(speakerElement);
stopper.push(stop);
start();
}
</script>
</html>
\ No newline at end of file
public/we_tasks/task05/5_3.html 0 → 100644
+ 105936
− 0
Edit View file @ f9b320c1
This diff is collapsed.
public/we_tasks/task06/6_1.html 0 → 100644
+ 36
− 0
Edit View file @ f9b320c1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Aufgabe 1</title>
</head>
<body>
<div id="content">
Hier steht gleich Inhalt!
</div>
</body>
<script>
const contentDiv = document.querySelector('#content');
var textA = '';
var textB = '';
Promise.all([
fetch('./textA.txt')
.then(response => response.text())
.then(text => textA = text.match(/[^\r\n]+/g)),
fetch('./textB.txt')
.then(response => response.text())
.then(text => textB = text.match(/[^\r\n]+/g))
])
.then(() => {
for (let i=0; i<textA.length; i++){
contentDiv.innerHTML += textA[i].concat(textB[i]) +'<br><br>';
}
});
</script>
</html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment