Add assigment

Exercise 1-2/questions.md

@@ -2,7 +2,7 @@
 
 ## 1. Why does inline style CSS override rules defined in style elements and external stylesheets?
 
-  inline style CSS overrides external stylesheets because it's the most specific ruleset. Rules from external stylesheets might match the object, but if you know that this specific element should be styled differently, it could be written explicitly in the tag options of the element. However, best practise would be to use an ID.
+  inline style CSS overrides external stylesheets because it's the most specific ruleset. Rules from external stylesheets might match the object, but if you know that this specific element should be styled differently, it could be written explicitly in the tag options of the element. However, in this case it would be best practise to use an ID and specify the rules in a stylesheet.
 
 ## 2. Give a brief example of when to use ID ( #id ) and when to use classes ( .class ) in CSS.
  
@@ -12,7 +12,7 @@
 
   RGBA is an acronym meaning "Red, Green, Blue, Alpha" where the three first represent subpixel brightness values and the fourth represents opacity. With the RGB colors, you can express most colors that anyone can think of on the top of their head. Usually, we express them with a bitdepth of 8, meaning you can specify each individual color value to a range of 2^8 values -> between 0 and 255. With the alpha channel added, we can also specify how transparent the color should be. This is especially useful for things like non-square icons, watermarks and in web development - see-through floating windows. An example of a color that could be expressed with RGBA would be a 50% seethrough yellow, RGB(255,255,0, 127), or with alternative hexadecimal syntax -> #FFFF007f.
   
-  Note that the actual amount of colors you can express with RGBA depends on several other factors like your monitor, the colorspace, the brightness in the room you're sitting
+  Note that the actual amount of colors you can express with RGBA depends on several other factors like your monitor, the colorspace, the brightness in the room you're sitting.
   
   ![Diagram showing hue along the x axis and opacity along the y axis](https://upload.wikimedia.org/wikipedia/commons/0/0b/RGBA_comp.png)
 
@@ -23,7 +23,27 @@
 ## 5. What CSS selector matches all the p elements inside the article element in the following HTML?
 
   ```HTML
+  <p>This should not match.</p>
+  <article>
+    <h2>This should not match</h2>
+    <p>This should match.</p>
+    <p>This should also match.</p>
+    <p>Do not forget about this one!</p>
+  </article>
+  ```
+
+  Here, we have two options. You could either do
+
+  ```CSS
     article p {}
   ```
  
-  This specifies all `<p>` elements inside the `<article>`, in contrast to `article > p {}` which would only specify `<p>` elements directly beneath the `<article>`.
+  which specifies all `<p>` elements inside the `<article>`.
+  
+  The other option would be 
+  
+  ```CSS
+    article > p {}
+  ```
+  
+  which would only specify `<p>` elements directly beneath the `<article>`. But since `<article>` has no `<p>` subchildren, both will work.

Exercise 3/a.txt

@@ -0,0 +1,11 @@
+1. The difference between `position: absolute;` and `position: fixed;` is that the absolute element is fixed onto the page itself, but the fixed element is fixed onto the "screen" or web browser so to say. If you scroll down, the fixed element won't move, but the absolute value will follow the page as any other unstyled element.
+
+2. 
+
+```CSS
+  element > anotherElement:nth-of-type(3n) {
+    ...
+  }
+```
+
+[//]: # vim: set syntax=markdown:

Exercise 3/css/style.css

@@ -0,0 +1,34 @@
+html, body{
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+
+/* Part 3 */
+
+.wrapper {
+  padding-bottom: 60px;
+}
+
+.wrapper footer {
+  position: fixed;
+  bottom: 0;
+  padding: 20px 40px;
+  font-size: 20px;
+  color: white;
+  background-color: #404040C0;
+  margin-block-end: 0;
+  width: 100%;
+  text-align: center;
+}
+
+
+/* Part 4 */
+
+li {
+  list-style-type: square;
+}
+
+ul > ul > li:last-child {
+  font-weight: 900;
+}

Exercise 3/list.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>A list apart</title>
+    <link rel="stylesheet" href="css/style.css">
+  </head>
+  <body>
+
+    <div class="wrapper">
+      <h1>This is a list</h1>
+
+      <ul>
+        <li>HTML5</li>
+        <li>CSS</li>
+        <ul>
+          <li>LESS</li>
+          <li>Sass</li>
+          <li>SCSS</li>
+        </ul>
+        <li>JavaScript</li>
+        <ul>
+          <li>React</li>
+          <li>Node</li>
+          <li>Jquery</li>
+          <li>AngularJS</li>
+          <li>Backbone</li>
+          <li>Ember</li>
+          <li>Babel</li>
+        </ul>
+      </ul>
+      <footer>Here's some footer text</footer>
+    </div>
+
+  </body>
+</html>

Exercise 3/position.html

@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>IT2805</title>
+
+  <style type="text/css">
+
+    html, body{
+      margin: 0;
+      padding: 0;
+      height: 100%;
+    }
+    /* Part 1 */
+
+    .header{
+      font-family: sans-serif;
+      padding-top: 30px;
+      margin-bottom: 40px;
+    }
+
+    .box{
+      border-width: 2px;
+      border-color: #0060A3;
+      border-style: solid;
+      height: 400px;
+
+      margin: 0 25%;
+    }
+
+    .one{
+      width: 100px;
+      height: 100px;
+      border-width: 2px;
+      border-color: #FAA21B;
+      border-style: solid;
+
+      margin-top: 25px;
+      margin-left: 25px;
+    }
+
+    .two{
+      width: 100px;
+      height: 100px;
+      border-width: 2px;
+      border-color: #FAA21B;
+      border-style: solid;
+      background-color: #fff;
+
+      margin-left: 25px;
+      position: relative;
+      top: 145px;
+      
+    }
+
+    .three{
+      width: 100px;
+      height: 100px;
+      border-width: 2px;
+      border-color: #FAA21B;
+      border-style: solid;
+      background-color: #fff;
+
+      margin-left: auto;
+      position: relative;
+      left: 50px;
+      bottom: 150px;
+
+    }
+
+    .five{
+      bottom: 10px;
+      font-size: 35px;
+      font-family: sans-serif;
+
+      text-align: right;
+      margin-right: 25px;
+    }
+
+    .four{
+      width: 50px;
+      height: 50px;
+      border-width: 2px;
+      border-color: #FAA21B;
+      border-style: solid;
+      
+      margin: 25px auto;
+    }
+
+    /* Part 2 */
+
+    a {
+      color:blue;
+    }
+
+    a:hover {
+      color: cyan;
+    }
+
+    a::selection {
+      background-color: orange;
+    }
+
+    a:visited {
+      color: purple;
+    }
+    
+    a:visited:hover {
+      color: green;
+    }
+
+  </style>
+</head>
+<body>
+
+    <div class="header">
+      <h1>Assignment 3: position</h1>
+    </div>
+
+    <div class="box">
+      <div class="one"></div>
+      <div class="two"></div>
+      <div class="three">
+        <div class="four"></div>
+      </div>
+      <div class="five">
+        <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS is awesome</a>
+      </div>
+    </div>
+
+
+
+</body>
+</html>

Exercise 4/css/style.css

@@ -0,0 +1,57 @@
+  * {
+    margin: 0;
+    padding: 0;
+  }
+
+  body {
+    background: white;
+    font-family: arial, sans-serif;
+  }
+
+  #screen {
+    position: relative;
+  }
+
+  video {
+    height: auto;
+    width: 100%;
+  }
+
+  #mobile-image {
+    height: auto;
+    width: 100%;
+    display: none;
+  }
+    
+  #title {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  #title > img {
+    width: 100%;
+  }
+
+  article {
+    width: 80%; /* 100% - 10% left - 10% right = 80% */
+    margin: 20px auto;
+  }
+
+  p {
+    color: black;
+    font-size: 16px;
+    line-height: 1.5;
+  }
+
+
+@media screen and (max-width: 940px) {
+  video {
+    display: none;
+  }
+  #mobile-image {
+    display: block;
+  }
+}
+

Exercise 4/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+      <title>HTML5 Video and CSS</title>
+      <meta charset="utf-8">
+      <link rel="stylesheet" href="css/style.css">
+  </head>
+  <body>
+    <div id="screen">
+
+      <video autoplay muted loop poster="img/hovedbygget.png">
+        <source src="videos/hovedbygget.mp4" type="video/mp4">
+        <source src="videos/hovedbygget.ogv" type="video/ogv">
+        <source src="videos/hovedbygget.webm" type="video/webm">
+      </video>
+      <img id="mobile-image" src="img/hovedbygget.png" alt="Hovedbygget på ntnu">
+
+      <div id="title">
+        <img src="img/ntnu.png" alt="NTNU" />
+      </div>
+
+    </div>
+
+    <article class="content">
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </article>
+
+  </body>
+</html>

Exercise 4/questions.txt

@@ -0,0 +1,25 @@
+# Questions
+
+1. Mobile phones usually ignore the autoplay tag in order to save cellular data.
+
+2. The css snippet 
+  ```CSS
+    @media only screen
+      and (min-device-width : 768px)
+      and (max-device-width : 1024px) {
+        #logo {
+          display: none;
+        }
+    }
+  ```
+  will make no difference for a device with `320 x 568` resolution because the device' height, `568px`, is not between `768` and `1024`
+
+3. There is several advantages of using a responsive website. Some of them are:
+
+  * A collected codebase: There is not as much work to do as if you were to make two different sites.
+
+  * The user is guaranteed the same info: The HTML will stay the same no matter how the CSS is written, and there will be less occurences of the mobile website not having the same services/options/information as the desktop website or vice versa.
+
+  * Easier networking: No need for any special redirection proxys or desktop/mobile specific load balancer. You can just serve the website as is.
+
+[//]: # vim: set syntax=markdown:

Exercise 5/index.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>IT2805 assignment 5: JavaScript introduction</title>
+
+  <style>
+    .box {
+      /* Sets the size and position of each box */
+      width: 200px;
+      height: 200px;
+      background-color: #185D8B;
+      margin: 10px;
+
+      /* Sets the font within each box*/
+      color: #fff;
+      font-family: Helvetica, Arial, sans-serif;
+      text-align: center;
+      line-height: 200px;
+      font-size: 100px;
+    }
+
+    .buttons {
+      width: 200px;
+      margin: 10px;
+      text-align: center;
+    }
+  </style>
+  <script src="./script.js" defer></script>
+  <!-- 
+    I am including it here because it makes sense for
+    everything that's not content to be placed in the <head>.
+    I do know however that this usually causes problems with
+    accessing the DOM, because the script runs before the page
+    is loaded. The defer option will take care of this.
+  -->
+
+
+</head>
+
+<body>
+
+  <h1 id='title'></h1>
+
+  <h2>Part 5</h2>
+  <div class='buttons'>
+    <button id='displayButton'>Display: none </button>
+    <button id='visibilityButton'>Visibility: hidden</button>
+    <button id='resetButton'>Reset</button>
+  </div>
+  <div class='box' id='magic'> 1 </div>
+  <div class='box'> 2 </div>
+
+  <h2>Part 6</h2>
+  <ul id='tech'>
+  </ul>
+
+</body>
+
+</html>

Exercise 5/script.js

@@ -0,0 +1,95 @@
+/* -------------------------------------------------------------------------- */
+/*                                   Part 2                                   */
+/* -------------------------------------------------------------------------- */
+
+console.log('PART 2')
+
+/* Log i from 1 until i is no longer less than or equal to 20 */
+for (i=1; i<=20; i++) {
+  console.log(i);
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                   Part 3                                   */
+/* -------------------------------------------------------------------------- */
+
+console.log('PART 3')
+
+const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
+
+/* A function that returns eplekake, eple, kake or n based on what n can be divided by */
+const eplekakeCheck = (n) => {
+  /* if it's divisible by 15 (which is 3*5), it's also divisible by both 3 and 5 */
+  if (i % 15 == 0) return 'eplekake';
+  else if (i % 3 == 0) return 'eple';
+  else if (i % 5 == 0) return 'kake';
+  else return String(n);
+}
+
+/* Print the output of eplekakeCheck for each element in numbers */
+for (i of numbers) {
+  console.log(eplekakeCheck(i));
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                   Part 4                                   */
+/* -------------------------------------------------------------------------- */
+
+/* Store the DOM node as a variable and change its innerText */
+const title = document.getElementById("title");
+title.innerText = 'Hello JavaScript';
+
+/* -------------------------------------------------------------------------- */
+/*                                   Part 5                                   */
+/* -------------------------------------------------------------------------- */
+
+const magicBox = document.getElementById('magic');
+
+function changeDisplay () {
+  magicBox.style.display = 'none'
+}
+
+function changeVisibility () {
+  magicBox.style.display = 'block'
+  magicBox.style.visibility = 'hidden'  
+}
+
+function reset () {
+  magicBox.style.display = 'block'
+  magicBox.style.visibility = 'visible'
+}
+
+/* Connect each button to their respective function */
+document.getElementById('displayButton').addEventListener('click', changeDisplay);
+document.getElementById('visibilityButton').addEventListener('click', changeVisibility);
+document.getElementById('resetButton').addEventListener('click', reset);
+
+/* -------------------------------------------------------------------------- */
+/*                                   Part 6                                   */
+/* -------------------------------------------------------------------------- */
+
+const technologies = [
+    'HTML5',
+    'CSS3',
+    'JavaScript',
+    'Python',
+    'Java',
+    'AJAX',
+    'JSON',
+    'React',
+    'Angular',
+    'Bootstrap',
+    'Node.js'
+];
+
+const technologyList = document.getElementById("tech");
+
+/* 
+  for each technology, create an HTML element, add the technology as innertext and append
+  the element as a child of the list
+*/
+for (technology of technologies) {
+  const listElement = document.createElement('li');
+  listElement.innerText = technology;
+  technologyList.appendChild(listElement);
+}