'DonnDarrylDimayuga-FullStackExam'

contacts-app/src/App.js

@@ -1,23 +1,10 @@
-import logo from './logo.svg';
 import './App.css';
+import Main from "./Main/Main";
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <Main /> {/* calling the Main Component */}
     </div>
   );
 }

contacts-app/src/Contact/Contact.css

@@ -0,0 +1,124 @@
+/* This is my personal css code I used it on my ongoing resume website */
+/* Donn Darryl Dimayuga */
+
+@media (max-width: 1300px) {
+  .contact-details-button {
+      display: flex;
+      height: 80px;
+      flex-wrap: nowrap;
+      align-items: center;
+      justify-content: center;
+      margin: 0px 0px;
+  }
+
+  .contact-details {
+    display: contents !important;
+}
+
+}
+
+.contact-details {
+  display: flex;
+  justify-content: space-between; /* Distributes items evenly along the main axis */
+  align-items: center; /* Aligns items along the cross axis */
+}
+
+.contact-details-buttons {
+  display: flex;
+  width: 640px;
+  height: 80px;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center;
+  margin: 0px 0px;
+}
+
+.contact-div {
+  flex: 1; /* Distribute available space evenly among the items */
+  padding: 20px;
+  border: 1px solid #333;
+}
+
+
+button {
+  background: rgba(0,0,0,.3);
+  width: 160px;
+  height: 50px;
+  border-radius: 5px;
+  position: relative;
+  border: none;
+  cursor: pointer;
+  margin: 15px;
+}
+
+button:focus {
+  border: none;
+  box-shadow: none;
+}
+
+span {
+  color: #fff;
+  font-size: 11px;
+  text-transform: uppercase;
+  -webkit-transition-duration: 0.3s;
+  -moz-transition-duration: 0.3s;
+  -o-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+}
+
+.framed-top::before,
+.framed-top::after,
+.framed-bottom::before,
+.framed-bottom::after {
+  content: " ";
+  background: #00edff;
+  position: absolute;
+  -webkit-box-shadow: 0 0 7px 0 #00edff;
+  box-shadow: 0 0 7px 0 #00edff;
+  -webkit-transition-duration: 0.3s;
+  -moz-transition-duration: 0.3s;
+  -o-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+}
+
+.framed-top::before {
+  top: 0px;
+  left: 15px;
+  width: 1px;
+  height: 0px;
+}
+.framed-top::after {
+  top: 15px;
+  right: 0px;
+  width: 0px;
+  height: 1px;
+}
+.framed-bottom::before {
+  bottom: 15px;
+  left: 0px;
+  width: 0px;
+  height: 1px;
+}
+.framed-bottom::after {
+  bottom: 0px;
+  right: 15px;
+  width: 1px;
+  height: 0px;
+}
+
+button:hover
+.framed-top::before {
+  height: 44px;
+}
+button:hover
+.framed-top::after {
+  width: 150px;
+}
+button:hover
+.framed-bottom::before {
+  width: 150px;
+}
+button:hover
+.framed-bottom::after {
+  height: 44px;
+}

contacts-app/src/Contact/Contact.js

@@ -0,0 +1,124 @@
+import React, { useState } from "react";
+import Lang from "../utils";
+import './Contact.css';
+// import '../Main/Main.css';
+
+const Contact = ({ contact, updateContact, deleteContact, addContact }) => { 
+    /* state variables for edit, add, and edited field values */
+  const [isEditing, setIsEditing] = useState(false);
+  const [isAdding, setIsAdding] = useState(false);
+  const [editedName, setEditedName] = useState(contact.name);
+  const [editedEmail, setEditedEmail] = useState(contact.email);
+  const [editedPhone, setEditedPhone] = useState(contact.phone);
+
+  /* function to handle saving edited contact */
+  const handleSaveEdit = () => {
+    const updatedContact = {
+      ...contact,
+      name: editedName,
+      email: editedEmail,
+      phone: editedPhone,
+    };
+    updateContact(contact.id, updatedContact);
+    setEditedName(updatedContact.name);
+    setEditedEmail(updatedContact.email);
+    setEditedPhone(updatedContact.phone);
+    setIsEditing(false);
+  };
+
+  /* function to add a contact */
+  const handleAdd = () => {
+    setIsAdding(true);
+  };
+
+  /* function to save a new contact */
+  const handleSaveAdd = () => {
+    const newContact = {
+      name: editedName,
+      email: editedEmail,
+      phone: editedPhone,
+    };
+    addContact(newContact);
+    setIsAdding(false);
+  };
+
+  /* function to delete contact */
+  const handleDelete = () => {
+    /* setting the values to null or empty so that if you delete it, it will not be shown in the screen */
+    const updatedContact = {
+      ...contact,
+      name: "",
+      email: "",
+      phone: "",
+    };
+    /*  */
+    updateContact(contact.id, updatedContact);
+    setEditedName("");
+    setEditedEmail("");
+    setEditedPhone("");
+  };
+
+  return (
+    <div className="contact">
+      {isEditing || isAdding ? (
+        <div className="contact-edit-form">
+          <input
+            type="text"
+            value={editedName}
+            onChange={(e) => setEditedName(e.target.value)}
+          />
+          <input
+            type="text"
+            value={editedEmail}
+            onChange={(e) => setEditedEmail(e.target.value)}
+          />
+          <input
+            type="text"
+            value={editedPhone}
+            onChange={(e) => setEditedPhone(e.target.value)}
+          />
+          {isEditing ? (
+            <button onClick={handleSaveEdit}>
+              <span>{Lang.LBL_SAVE}</span>
+              <div class="framed-top"></div>
+              <div class="framed-bottom"></div>
+            </button>
+          ) : (
+            <button onClick={handleSaveAdd}>
+              <span>{Lang.LBL_ADD}</span>
+              <div class="framed-top"></div>
+              <div class="framed-bottom"></div>
+            </button>            
+          )}
+        </div>
+      ) : (
+        <div>
+            <div className="contact-details-buttons">
+                <button onClick={handleAdd}>
+                  <span>{Lang.LBL_ADD}</span>
+                  <div class="framed-top"></div>
+                  <div class="framed-bottom"></div>
+                </button>
+                <button onClick={() => setIsEditing(true)}>
+                  <span>{Lang.LBL_EDIT}</span>
+                  <div class="framed-top"></div>
+                  <div class="framed-bottom"></div>
+                </button>
+                <button onClick={handleDelete}>
+                  <span>{Lang.LBL_DELETE}</span>
+                  <div class="framed-top"></div>
+                  <div class="framed-bottom"></div>
+                </button>
+            </div>
+            <div className="contact-details">
+                <div className="contact-div">{Lang.LBL_NAME} {contact.name}</div>
+                <div className="contact-div">{Lang.LBL_EMAIL} {contact.email}</div>
+                <div className="contact-div">{Lang.LBL_PHONE} {contact.phone}</div>
+            </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Contact;

contacts-app/src/ContactController/ContactController.js

@@ -0,0 +1,49 @@
+import { useState } from "react";
+
+// this is the 
+const ContactController = (exampleContacts) => {
+    /* declaring the contacts as the data from the exampleContacts from the Content.js file */
+  const [contacts, setContacts] = useState([...exampleContacts]);
+
+  /* funtion to add new contact to the list of contacts and then update it in state */
+  const getAllContacts = () => {
+    return contacts;
+  };
+
+  /* function to get a contact by its ID */
+  const getContactById = (id) => {
+    return contacts.find((contact) => contact.id === id);
+  };
+
+  /* function to add a new contact */
+  const addContact = (newContact) => {
+    const id = contacts.length + 1;
+    setContacts([...contacts, { ...newContact, id }]);
+    return id;
+  };
+
+  /* function to update an existing contact */
+  const updateContact = (id, updatedContact) => {
+    const updatedContacts = contacts.map((contact) =>
+      contact.id === id ? { ...updatedContact, id } : contact
+    );
+    setContacts(updatedContacts);
+  };
+
+  /* function to delete a contact */
+  const deleteContact = (id) => {
+    const updatedContacts = contacts.filter((contact) => contact.id !== id);
+    setContacts(updatedContacts);
+  };
+
+  /* return an object containing all functions above */
+  return {
+    getAllContacts,
+    getContactById,
+    addContact,
+    updateContact,
+    deleteContact,
+  };
+};
+
+export default ContactController;

contacts-app/src/Content/Content.css

@@ -0,0 +1,9 @@
+.contact-list {
+    display: flex;
+    width: 640px;
+    height: 70px;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: center;
+    margin: 0px 0px;
+}

contacts-app/src/Content/Content.js

@@ -0,0 +1,52 @@
+import React, { useState } from "react";
+import Contact from "../Contact/Contact";
+import ContactController from "../ContactController/ContactController";
+import Lang from "../utils";
+import "./Content.css";
+
+/* so i created simple data that automatically has a value */
+const exampleContacts = [
+  {
+    id: 1,
+    name: "Donn Darryl Dimayuga",
+    email: "[email protected]",
+    phone: "+639172446461",
+  },
+];
+
+/* this is the start of the Content Component where it has a variables that came from the contact controller.js  */
+const Content = () => {
+  const {
+    getAllContacts,
+    addContact,
+    updateContact,
+    deleteContact,
+  } = ContactController(exampleContacts);
+
+  const contacts = getAllContacts();
+
+  return (
+    <div>
+
+      <div id="section-home" className="section-home">  {/* this is the section-home id that im talking about in the navbar.js file */}
+        <p className="section-list-home">{Lang.LBL_HOME}</p>
+      </div>
+      <div id="section-contact" className="section-contact"> {/* this is the section-contact id that im talking about in the navbar.js file */}
+        <p className="contact-list">{Lang.LBL_CONTACT_LIST}</p>
+
+        {/* so this is where you map the data of the contacts and declares the variables to use in contact.js */}
+        {contacts.map((contact) => (
+          <Contact
+            key={contact.id}
+            contact={contact}
+            addContact={addContact}
+            updateContact={updateContact}
+            deleteContact={deleteContact}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Content;

contacts-app/src/Main/Main.css

@@ -0,0 +1,8 @@
+@media (max-width: 1300px) {
+    .main {
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        align-items: center;
+    }
+  }