Merge pull request #1 from DRIF7ER/feature/Iteration_0_Layout

Feature/iteration 0 layout
DRIF7ER · Apr 10, 2024 · 4ba5c2c · 4ba5c2c
2 parents 6bbd331 + 5ca5a46
commit 4ba5c2c
Show file tree

Hide file tree

Showing 3 changed files with 172 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" type="text/css" href="styles.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
+        <style>
+        body {
+          font-family: "Sofia", sans-serif;
+        }
+        </style>
+</head>
+<body>
+<div class="main">
+    <div class="mainContainer">
+        <div class="ideaBoxContainer">
+            <div class="ideaBox">
+            <h1>IdeaBox</h1>
+            </div>
+        </div>
+    </div>
+    <div class="textBoxContainer">
+        <div class="fields">
+            <div class="inputField1">
+                <label for="title" class="spanTitle">Title</label>
+                <input id="title_field" type="text" class="title" name="title" />
+            </div>
+            <div class="inputField">
+                <label for="title" class="spanBody">Body</label>
+                <input id="body_field" type="text" class="body" name="body" />
+            </div>
+            <button class="save_button"><span class="spanSave">Save</span></button>
+        </div>
+        <div class="emptyBox">
+        </div>
+    </div>
+</div>
+<script src="main.js"></script>
+</body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,25 @@
+//~~~~linking data model~~~~//
+var ideas = [];
+
+//~~~~~~~querySelectors go here~~~~~~~//
+var saveButton = document.querySelector('.save_button')
+var titleInput = document.querySelector('input[name="title"]')
+var bodyInput = document.querySelector('input[name="body"]')
+
+
+//~~~~~~~eventListeners go here~~~~~~~//
+saveButton.addEventListener('click', saveIdea)
+
+
+//~~~~~~~functions go here~~~~~~//
+function saveIdea(){
+  var title = titleInput.value;
+  var body = bodyInput.value;
+  var newIdea = {
+    title: title,
+    body: body,
+    id: ideas.length+1
+  };
+  ideas.push(newIdea);
+  console.log(newIdea);
+}
diff --git a/styles.css b/styles.css
@@ -0,0 +1,105 @@
+html {
+    width: 100vw;
+}
+
+body {
+    background-color: #EAEAF4;
+    margin: 0;
+}
+
+h1 {
+    color: white;
+    font-size: 75px;
+}
+
+.ideaBox {
+    display: flex;
+    flex-direction: row;
+    height: 100vh;
+    width: 18vw;
+    justify-content: center;
+    background-color: #1F1F3C;
+    position: fixed;
+}
+
+.inputField1{
+    display: flex;
+    align-items: center;
+    padding-bottom: 50px;
+}
+
+
+.fields {
+    background-color: #A8AAD2;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-end;
+    height: 50vh;
+    width: 94.6vw;
+    padding-right: 100px;
+}
+
+.emptyBox {
+    background-color: #EAEAF4;
+    display: flex;
+    height: 50vh;
+    width: 100%;
+}
+
+.spanSave {
+    color: #EAEAF4;
+    font-size: 30px;
+}
+
+.save_button {
+    background-color: #1F1F3C;
+    display: flex;
+    border: 0px;
+    width: 60.25vw;
+    height: 4rem;
+    align-items: center;
+    justify-content: center;
+    margin-top: 10px;
+    padding: 0px;
+    cursor: pointer;
+}
+
+.textBoxContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100vw;
+}
+
+.title {
+    height: 2rem;
+    width: 60vw;
+    margin-bottom: 10px;
+    border-color: #1F1F3C;
+    border-width: 3px;
+    padding: 0px;
+}
+
+.body {
+    height: 4rem;
+    width: 60vw;
+    margin-bottom: 10px;
+    border-color: #1F1F3C;
+    border-width: 3px;
+    padding: 0px;
+}
+
+.spanTitle {
+    color:#1F1F3C;
+    font-size: 30px;
+    padding-right: 10px;
+    padding-bottom: 15px;
+}
+
+.spanBody {
+    color: #1F1F3C;
+    font-size: 30px;
+    padding-right: 10px;
+}