Image

client/src/App.jsx

@@ -4,13 +4,17 @@ import Header from "./components/Header";
 import { DndProvider } from "react-dnd";
 import Backend from "react-dnd-html5-backend";
 import Button from "./components/Button";
+import Homepage2 from "./pages/Homepage2";
 
 const App = () => {
     return (
         <DndProvider backend={Backend}>
             <Header />
             <Button/>
+
             <Homepage />
+
+            <Homepage2 />
 
         </DndProvider>
     );z

client/src/components/Button.jsx

@@ -1,15 +1,22 @@
 import React from "react";
-
-const Button = () => {
-    return (
-
-<button id="addEvent">
-Add Event
-</button>
-
-
-
-    );
-};
-
-export default Button;
+import PopUp from "./Popup"; 
+export default class App extends React.Component {
+  state = {
+   seen: false
+   };
+  togglePop = () => {
+   this.setState({
+    seen: !this.state.seen
+   });
+  };
+render() {
+  return (
+   <div>
+    <div className="btn" onClick={this.togglePop}>
+      <button id="addEvent">Add Event</button>
+    </div>
+    {this.state.seen ? <PopUp toggle={this.togglePop} /> : null}
+   </div>
+  );
+ }
+}

client/src/components/Popup.jsx

@@ -0,0 +1,116 @@
+import React, { Component } from "react";
+export default class PopUp extends Component {
+
+
+    constructor(props){
+        super(props)
+
+        this.state ={
+
+            event: '',
+            time: '',
+            day: '',
+            notes: ''
+
+
+        }
+
+        this.handleSubmit = this.handleSubmit.bind(this)
+    }
+
+    handleEventChange = (event) => {
+
+        this.setState({
+        event: event.target.value
+        })
+    }
+
+    handleTimeChange = (event) => {
+        this.setState({
+        time: event.target.value
+        })
+    }
+
+    handleDayChange = (event) => {
+        this.setState({
+        day: event.target.value
+        })
+    }
+
+    handleNotesChange = event => {
+        this.setState({
+        notes: event.target.value
+        })
+    }
+
+
+     handleSubmit = event => {
+
+
+
+    if(this.state.event === '' || this.state.time === '' || this.state.notes === '' || this.state.day === ''){
+        alert(`One or more of the inputs are empty`)
+        event.preventDefault();
+     } else{
+
+        this.setState( { event: '' });
+        this.setState( { time: '' });
+        this.setState({  day:''});
+        this.setState({  notes:''});
+
+         event.preventDefault();
+    }
+
+}
+
+
+
+
+  handleClick = () => {
+   this.props.toggle();
+  };
+
+
+
+render() {
+
+
+  return (
+
+   <div className="modal">
+     <div className="modal_content" >
+     <span className="close" onClick={this.handleClick}>&times;    </span>
+     <form onSubmit={this.handleSubmit}>
+<p class = "inputs" >
+
+    <p>Event Name: </p>
+    <textarea id="inputs" value={this.state.event} type='text' onChange = {this.handleEventChange} placeholder='Event'  name='event'/></p>
+
+    <p class = "inputs">
+    <p>Time: </p>
+    <textarea id="inputs" value={this.state.time} type='text' onChange = {this.handleTimeChange} placeholder='Time' name='time'   /></p>
+
+    <p class = "inputs" >
+    <p>Day of Week: </p>
+     <textarea id="inputs"  value={this.state.day} type='text' onChange = {this.handleDayChange} placeholder='Day of Week' name='day' /></p>
+
+     <p class = "inputs" >
+    <p>Notes: </p>
+    <textarea id="notes" value={this.state.notes} type='text' onChange = {this.handleNotesChange} placeholder='Notes:' name='notes' /> </p>
+
+
+
+
+    <p>
+
+        <button class="formButton" >Submit</button>
+
+        </p>
+    </form>
+
+    </div>
+   </div>
+  );
+ }
+}
+

client/src/data/index.js

@@ -40,7 +40,14 @@ const statuses = [{
     status: "Thursday",
     icon: "✅",
     color: "#3981DE"
-}, {
+}
+
+
+
+];
+
+const statuses2 = [
+   {
     status: "Friday",
     icon: "✅",
     color: "#3981DE"
@@ -59,4 +66,4 @@ const statuses = [{
 ];
 
 
-export { data, statuses };
+export { data, statuses,statuses2 };

client/src/pages/Homepage2.jsx

@@ -0,0 +1,54 @@
+import React, { useState } from "react";
+import Item from "../components/Item";
+import DropWrapper from "../components/DropWrapper";
+import Col from "../components/Col";
+import { data, statuses2 } from "../data";
+
+const Homepage2 = () => {
+    const [items, setItems] = useState(data);
+
+    const onDrop = (item, monitor, status) => {
+        const mapping = statuses.find(si => si.status === status);
+
+        setItems(prevState => {
+            const newItems = prevState
+                .filter(i => i.status !== item.status)
+                .concat({ ...item, status, icon: mapping.icon });
+            return [ ...newItems ];
+        });
+    };
+
+    const moveItem = (dragIndex, hoverIndex) => {
+        const item = items[dragIndex];
+        setItems(prevState => {
+            const newItems = prevState.filter((i, idx) => idx !== dragIndex);
+            newItems.splice(hoverIndex, 0, item);
+            return  [ ...newItems ];
+        });
+    };
+
+    return (
+        <div className={"row"}>
+            {statuses2.map(s => {
+                return (
+                    <div id="row">
+                    <div id="rectangle" key={status} className={"col-wrapper"}>
+                        <h2 className={"col-header"}>{s.status.toUpperCase()}</h2>
+                        <DropWrapper onDrop={onDrop} status={s.status}>
+                        <Col>
+                            {items
+                                    .filter(i => i.status === s.status)
+                                    .map((i, idx) => <Item key={i.status} item={i} index={idx} moveItem={moveItem} status={s} />)
+                                }
+                            </Col>
+
+                        </DropWrapper>
+                    </div>
+                    </div>
+                );
+            })}
+        </div>
+    );
+};
+
+export default Homepage2;

client/style/index.css

@@ -7,14 +7,18 @@
 }
 
 html {
-    background: rgb(0,73,191);
-    background: linear-gradient(90deg, rgba(0,73,191,1) 0%, rgba(190,190,255,1) 46%, rgba(0,212,255,1) 100%);
+    background-image: url(./background.png);
+    width: 100%;
+    height: auto;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
 }
 
 body {
     color: var(--text-color);
     font-family: sans-serif;
     margin: 0;
+
 }
 
 a {
@@ -34,12 +38,12 @@ label {
     display: block;
 }
 
-button:not(#addEvent), input {
+button:not(#addEvent,.formButton), input {
     padding: 4px;
     border: 1px solid var(--disabled-color);
 }
 
-button:not(#addEvent) {
+button:not(#addEvent,.formButton) {
     outline: none;
     background: transparent;
     border-radius: 5px;
@@ -48,11 +52,11 @@ button:not(#addEvent) {
     cursor: pointer;
 }
 
-button:not(#addEvent).active {
+button:not(#addEvent,.formButton).active {
     color: var(--primary-color);
 }
 
-button:not(#addEvent).active:after {
+button:not(#addEvent,.formButton).active:after {
     content: "";
     display: block;
     margin: 0 auto;
@@ -216,10 +220,71 @@ color: #172b4d;
 
 
   }
+
+  .modal {
+    position: fixed;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    background-color: transparent;
+  }
 
-#rectangle {
+  .modal_content {
+    background-color: white;
+
+   margin-left: auto;
+   margin-right: auto;
+   top: 10%;
+    width: 30%;
+    padding: 20px;
+    border-radius: 2px;
+    border: 2px solid black;
+  }
 
-
+
+  #notes{
+
+    text-align: left;
+    padding-left:0;
+    padding-top:0;
+    padding-bottom:0.4em;
+    padding-right: 0.4em;
+     width: 500px;
+    height: 300px;
+    resize: none;
+  }
+
+  #inputs{
+    text-align: left;
+    padding-left:0;
+    padding-top:0;
+    padding-bottom:0.4em;
+    padding-right: 0.4em;
+     width: 500px;
+    height: 15px;
+    resize: none;
+  }
+
+  #addEvent{
+    background-color:gray;
+    border: none;
+    padding: 5px 25px;
+    font-weight: 600;
+    font-size: 20px;
+    border-radius: 6px;
+    color:#172b4d;
+
+
+  }
+
+  .formButton{
+    background-color:gray;
+    border: none;
+    padding: 5px 20px;
+    font-weight: 600;
+    font-size: 15px;
+    border-radius: 6px;
+    color:#172b4d;
   }
 
-
+