From aa68d461b8a64627cca635ad5ea5287de438f1c1 Mon Sep 17 00:00:00 2001
From: Simen Svenningsen Hjelle <simenshj@stud.ntnu.no>
Date: Mon, 1 Nov 2021 18:12:38 +0100
Subject: [PATCH 1/2] Laget en start av projects, og calender. cssEndret
---
.DS_Store | Bin 0 -> 6148 bytes
calendar.html | 15 +++++++
projects.html | 36 +++++++++++++---
scripts/sortCalendar.js | 50 ++++++++++++++++++++++
scripts/transformProject.js | 80 ++++++++++++++++++++++++++++++++++++
styles/main.css | 68 ++++++++++++++++++++++++++++++
6 files changed, 243 insertions(+), 6 deletions(-)
create mode 100644 .DS_Store
create mode 100644 calendar.html
create mode 100644 scripts/sortCalendar.js
create mode 100644 scripts/transformProject.js
diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..1ab0df2bd9632c029b033443be878db0f9e653db
GIT binary patch
literal 6148
zcmeHKJ5EC}5S)b+L1|J_`U>2@ioywU0Yn~M;1wbLt2kGV#_XpcdeDU?nw8dLuXk*D
zinnh8*yc1m0c!wDx+A`Pn49mr&+M)uMx^tMcf8>PpEwT3S@!P%=RRP-h&@g}`TN7`
zI39dkCIzH`6p#W^Knh$@fhw-c)fLawQBpt(+=c@FeQ0#YUN|Mjr-MVZ0K^5uVVp-V
zL2Mo%_QENV5t=2Hm{hA4!;;Q;tGr$~B_<tK&4<;^Rvn7P?L5ClI;<yZlmb%VQi1zi
zuD$+0)BouIFG*TS0V!}(3fN-1+iv)zs;#rfd97{q7rN)1>290{g+r8MVw7Vpyc|D9
cQsy<EbH5i(i9u&P=tTVtxGpj&@ZSo21GF*~x&QzG
literal 0
HcmV?d00001
diff --git a/calendar.html b/calendar.html
new file mode 100644
index 0000000..080bc54
--- /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/main.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 1d49f91..db26a30 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/main.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 0000000..a54fd0a
--- /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 0000000..c583008
--- /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 766537b..3e448c0 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;
}
@@ -169,3 +170,70 @@ h1 {
border-radius: 10px;
margin: 5px;
}
+
+.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);
+}
--
GitLab
From 922cb31832c90f502cb1fb1c52d7c829c28780f0 Mon Sep 17 00:00:00 2001
From: Simen Svenningsen Hjelle <simenshj@stud.ntnu.no>
Date: Tue, 2 Nov 2021 12:58:35 +0100
Subject: [PATCH 2/2] lagde egen css for projects og calendar
---
calendar.html | 2 +-
projects.html | 2 +-
styles/main.css | 67 ---------------------------------------------
styles/projects.css | 66 ++++++++++++++++++++++++++++++++++++++++++++
4 files changed, 68 insertions(+), 69 deletions(-)
create mode 100644 styles/projects.css
diff --git a/calendar.html b/calendar.html
index 080bc54..602aa16 100644
--- a/calendar.html
+++ b/calendar.html
@@ -5,7 +5,7 @@
<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/main.css" />
+ <link rel="stylesheet" type="text/css" href="./styles/projects.css" />
</head>
<body>
<div id = "cal"></div>
diff --git a/projects.html b/projects.html
index db26a30..4e0d4a7 100644
--- a/projects.html
+++ b/projects.html
@@ -11,7 +11,7 @@
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="stylesheet" type="text/css" href="./styles/projects.css" />
</head>
<body>
diff --git a/styles/main.css b/styles/main.css
index 3e448c0..e0fe490 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -170,70 +170,3 @@ h1 {
border-radius: 10px;
margin: 5px;
}
-
-.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);
-}
diff --git a/styles/projects.css b/styles/projects.css
new file mode 100644
index 0000000..2d36659
--- /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);
+}
--
GitLab