diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..1ab0df2bd9632c029b033443be878db0f9e653db
Binary files /dev/null and b/.DS_Store differ
diff --git a/calendar.html b/calendar.html
new file mode 100644
index 0000000000000000000000000000000000000000..602aa1608507ada9e3aaa3f833544e88ce557547
--- /dev/null
+++ b/calendar.html
@@ -0,0 +1,15 @@
+<!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">
+ <title>Calender</title>
+ <link rel="stylesheet" type="text/css" href="./styles/projects.css" />
+</head>
+<body>
+ <div id = "cal"></div>
+
+</body>
+<script src = scripts/sortCalendar.js></script>
+</html>
\ No newline at end of file
diff --git a/projects.html b/projects.html
index 1d49f91c7c600b6983960611ace907766b73ff81..4e0d4a71aac7ffe1e4b6f2955ce331c237502480 100644
--- a/projects.html
+++ b/projects.html
@@ -2,14 +2,38 @@
<html lang="no" dir="ltr">
<head>
<meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1">
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Det Norske Nye Storband — Prosjekter</title>
- <link rel="preconnect" href="https://fonts.googleapis.com">
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
- <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;1,700&display=swap" rel="stylesheet">
- <link rel="stylesheet" type="text/css" href="./styles/main.css">
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+ <link
+ href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;1,700&display=swap"
+ rel="stylesheet"
+ />
+ <link rel="stylesheet" type="text/css" href="./styles/projects.css" />
+
</head>
<body>
+ <!-- Kan vurdere å knytte onclick-funksjonen til hele div-en istedet for kun headeren -->
+ <div id = "p1" class = "projects">
+ <h1 id = "header1" onmouseenter="onEnterHeader(this.id)" onmouseleave="onLeaveHeader(this.id)" onclick="clickHeader(this.id)" class = "headerRight">Header1</h1>
+ <img id = pic1 class = "projectImagesLeft" src = "images/contact images/contact1.jpg" alt="img1" > <!-- MÃ¥ legge inn riktige bilder her -->
+ <p id = "par1" class = "parRight">"Lorem ipsum dolor sit amet, consectetur adipiscing 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.
+ Lorem ipsum dolor sit amet, consectetur adipiscing 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.
+ Lorem ipsum dolor sit amet, consectetur adipiscing 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.
+ Lorem ipsum dolor sit amet, consectetur adipiscing 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.
+ Lorem ipsum dolor sit amet, consectetur adipiscing 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.
+ Lorem ipsum dolor sit amet, consectetur adipiscing 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>
+ </div>
+
+ <div id = "p2" class = "projects">
+ <h1 id = "header2" onmouseenter="onEnterHeader(this.id)" onmouseleave="onLeaveHeader(this.id)" onclick="clickHeader(this.id)" class = "headerLeft">Header2</h1>
+ <img id = pic2 class = "projectImagesRight" src = "images/contact images/contact1.jpg" alt = "img2" > <!-- MÃ¥ legge inn riktige bilder her -->
+ <p id = "par2" class = "parLeft">"Lorem ipsum dolor sit amet, consectetur adipiscing 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>
+
+ </div>
+
</body>
-</html>
\ No newline at end of file
+ <script src = scripts/transformProject.js></script> <!-- Skal denne plasseres et annet sted? -->
+</html>
diff --git a/scripts/sortCalendar.js b/scripts/sortCalendar.js
new file mode 100644
index 0000000000000000000000000000000000000000..a54fd0a23b7d2e53678338d73bda0f8ea03e672f
--- /dev/null
+++ b/scripts/sortCalendar.js
@@ -0,0 +1,50 @@
+class newEvent {
+ constructor(name, date, timeOfDay, place){
+ this.name = name;
+ this.date = date;
+ this.timeOfDay = timeOfDay;
+ this.place = place;
+ }
+}
+
+class Calendar {
+ constructor(events){
+ this.events = events;
+ }
+ addEvent(event){
+ this.events.push(event);
+ }
+}
+
+let myCalendar = new Calendar([]);
+let event1 = new newEvent("name1", "01.02.22", "17.00", "place To Be");
+myCalendar.addEvent(event1);
+let event2 = new newEvent("name2", "02.02.22", "18.00", "place To Be2");
+myCalendar.addEvent(event2);
+
+
+let theCalendar = document.getElementById("cal");
+
+for (i = 0 ; i<myCalendar.events.length ; i++){
+ let newEvent = document.createElement("a");
+ let eventInQ = myCalendar.events[i];
+
+ newEvent.innerText = eventInQ.name + ", " + eventInQ.date+ ", " + eventInQ.timeOfDay + ", " + eventInQ.place;
+ theCalendar.appendChild(newEvent);
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/scripts/transformProject.js b/scripts/transformProject.js
new file mode 100644
index 0000000000000000000000000000000000000000..c583008ab54c33b913b07257cb73ca8f41c154e9
--- /dev/null
+++ b/scripts/transformProject.js
@@ -0,0 +1,80 @@
+//Legge inn funksjon som bestemmer når headeren skal være fixed og når den skal være relative
+
+/* let p1 = document.getElementById("p1");
+let p2 = document.getElementById("p2");
+
+
+let h1 = p1.children[0]
+let h2 = p2.children[0]
+
+
+console.log(p1.childNodes)
+console.log(p1.children[0])
+
+
+
+
+function makeFixed(h){
+ let string = h.id
+ h.style.position = "fixed";
+
+
+}
+
+function makeUnFixed(h) {
+ h.style.position = ".headerRight";
+}
+
+
+
+window.onscroll = function windowScroller(){
+ if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
+ makeFixed(h1);
+ } else {
+ makeUnFixed(h2)
+ makeFixed(h2)
+ }
+} */
+
+function onEnterHeader(headerID){
+ let header = document.getElementById(headerID);
+ header.style.color = "green"
+}
+
+function onLeaveHeader(headerID){
+ let header = document.getElementById(headerID);
+ header.style.color = ""
+}
+
+
+function clickHeader(headerID){
+
+ let header = document.getElementById(headerID);
+
+ //For å hente ut id til paragrafen stripper jeg id til parent
+ let parent = header.parentNode;
+ let nr = parent.id;
+ let nr2 = nr.substr(1);
+
+ let paragraph = document.getElementById("par" + nr2)
+
+ if(paragraph.style.visibility == "visible"){
+ paragraph.style.visibility = "hidden";
+ header.style.marginLeft = "10%";
+ header.style.marginRight = "10%";
+ header.style.marginTop = "15%";
+
+ }else{
+ paragraph.style.visibility = "visible";
+ header.style.marginLeft = "5%";
+ header.style.marginRight = "";
+ header.style.marginTop = "0%"
+ }
+
+}
+
+//Kan evt se på muligheten for å legge inn animasjon for onclick-funskjonen, s.a det er smudere.
+// https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_push
+
+
+
diff --git a/styles/main.css b/styles/main.css
index 766537b172702722db278d5e129d1cbd0342ffd6..e0fe49040845b429962258a6e57b0f133e3246a6 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -36,6 +36,7 @@ td {
}
body {
+ /* -Skal vi ha en felles bakgrunn på body? */
line-height: 1;
}
diff --git a/styles/projects.css b/styles/projects.css
new file mode 100644
index 0000000000000000000000000000000000000000..2d3665942e793fb7ff84d9473ad8a97db595147a
--- /dev/null
+++ b/styles/projects.css
@@ -0,0 +1,66 @@
+.projects {
+ border: solid black;
+ border-radius: 2px;
+ overflow-y: auto; /* Skal dette være med? */
+ width: auto;
+ height: 400px;
+}
+/* Burde kanskje fikse s.a bildet står i ro, selv om vi legger inn slider */
+
+.projectImagesLeft {
+ float: left;
+ height: 396px; /* Trekker fra 4 px pga border, vurdere om denne skal bort */
+ width: auto;
+}
+.projectImagesRight {
+ float: right;
+ height: 396px;
+ width: auto;
+}
+.parLeft {
+ visibility: hidden; /* Dette skal endres ved onclick! */
+ text-align: left;
+ margin-top: 10%;
+}
+.parRight {
+ visibility: hidden; /* Dette skal endres ved onclick! */
+ text-align: left;
+ margin-top: 10%;
+}
+.headerLeft {
+ float: left;
+ margin-top: 15%;
+ margin-left: 10%;
+ /* padding: 10%; */
+}
+.headerRight {
+ float: right;
+ margin-top: 15%;
+ margin-right: 10%;
+ /* padding: 10%; */
+}
+
+#p1 {
+ background-color: lightblue;
+}
+
+#p2 {
+ background-color: lightcoral;
+}
+
+#cal {
+ margin-top: 50px;
+ float: right;
+ width: 15%;
+ height: 300px;
+ overflow-y: auto;
+}
+
+#cal a {
+ background-color: #eee;
+ color: black;
+ display: block;
+ padding: 12px;
+ text-decoration: none;
+ border: solid rgb(173, 163, 163);
+}