Coding Challenge - Pull Request

CodingChallenge.FamilyTree/Solution.cs

@@ -6,7 +6,23 @@ public class Solution
     {
         public string GetBirthMonth(Person person, string descendantName)
         {
-            throw new NotImplementedException();
+            string result = DFS(person, descendantName);
+            return result ?? "";
+        }
+        private static string DFS(Person node, string targetName)
+        {
+            if (node.Name == targetName)
+                return node.Birthday.ToString("MMMM");
+
+
+
+            foreach (var child in node.Descendants)
+            {
+                string result = DFS(child, targetName);
+                if (result != null)
+                    return result;
+            }
+            return null;
         }
     }
 }

CodingChallenge.PirateSpeak/Solution.cs

@@ -1,4 +1,5 @@
 using System;
+using System.Collections.Generic;
 using System.Linq;
 
 namespace CodingChallenge.PirateSpeak
@@ -7,7 +8,17 @@ public class Solution
     {
         public string[] GetPossibleWords(string jumble, string[] dictionary)
         {
-            throw new NotImplementedException();
+            var outputList = new List<string>();
+            var charArray = jumble.ToLower().ToCharArray();
+            Array.Sort(charArray);
+            foreach (var word in dictionary)
+            {
+                var wordCharArray = word.ToLower().ToCharArray();
+                Array.Sort(wordCharArray);
+                if (charArray.Length == wordCharArray.Length && charArray.SequenceEqual(wordCharArray))
+                    outputList.Add(word);
+            }
+            return outputList.ToArray();
         }
     }
 }

CodingChallenge.UI/TodoChallenge/src/App.js

@@ -1,33 +1,101 @@
-import React, {Component} from 'react';
-import TodoList from "./components/todo/TodoList";
-import "./App.scss";
+import React, { Component } from 'react';
+import Chart from 'chart.js/auto';
+import TodoList from './components/todo/TodoList';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSave } from '@fortawesome/free-solid-svg-icons';
+import './App.scss';
 import './button.scss';
 
 class App extends Component {
   constructor(props) {
     super(props);
 
     this.state = {
-      newTodo: ''
+      newTodo: '',
+      dueDate: '', // Add dueDate to state
+      todos: [],
     };
   }
 
-  textInputChange = (e) =>  {
-    this.setState({...this.state, newTodo: e.target.value});
+  componentDidMount() {
+    const storedTodos = localStorage.getItem('todos');
+    if (storedTodos) {
+      this.setState({ todos: JSON.parse(storedTodos) });
+    }
+
+    const chartCanvas = document.getElementById('todoChart').getContext('2d');
+
+    const numComplete = this.state.todos.filter((todo) => todo.completed).length;
+    const numIncomplete = this.state.todos.length - numComplete;
+
+    new Chart(chartCanvas, {
+      type: 'doughnut',
+      data: {
+        labels: ['Complete', 'Incomplete'],
+        datasets: [
+          {
+            data: [numComplete, numIncomplete],
+            backgroundColor: ['#28a745', '#dc3545'],
+          },
+        ],
+      },
+    });
+  }
+
+  textInputChange = (e) => {
+    this.setState({ ...this.state, newTodo: e.target.value });
+  }
+
+  dueDateInputChange = (e) => {
+    this.setState({ ...this.state, dueDate: e.target.value }); // Add due date input change handler
   }
 
   addNewTodo = () => {
-    console.warn('not implemented');
+    const { newTodo, dueDate } = this.state;
+
+    if (newTodo.trim() !== '') {
+      const newTodoItem = {
+        id: Date.now(),
+        text: newTodo,
+        completed: false,
+        dueDate, // Include the due date
+      };
+
+      this.setState(
+        (prevState) => ({
+          todos: [...prevState.todos, newTodoItem],
+          newTodo: '',
+          dueDate: '', // Clear the due date input
+        }),
+        () => {
+          localStorage.setItem('todos', JSON.stringify(this.state.todos));
+        }
+      );
+    }
   }
 
   render() {
     return (
       <div className="App">
-        <input type="text" value={this.state.newTodo} onChange={this.textInputChange}></input>
-        <button className={"btn--default"} onClick={this.addNewTodo}>Add</button>
-        <TodoList />
+        <canvas id="todoChart" width="200" height="200"></canvas>
+        <input
+          type="text"
+          value={this.state.newTodo}
+          onChange={this.textInputChange}
+          placeholder="Add a new todo"
+        />
+        <input
+          type="date"
+          value={this.state.dueDate} // Add input for due date
+          onChange={this.dueDateInputChange}
+        />
+        <button className="btn--default" onClick={this.addNewTodo}>
+          <FontAwesomeIcon icon={faSave} /> Add
+        </button>
+        <TodoList todos={this.state.todos} />
       </div>
-  )}
+    );
+  }
 }
 
-export default App;
+export default App;

CodingChallenge.UI/TodoChallenge/src/App.scss

@@ -1,48 +1,88 @@
 .App {
-  text-align: left;
+  text-align: center;
+  font-family: Arial, sans-serif;
+  background-color: #f0f0f0;
   padding: 20px;
 
-  input[type=text] {
-    height: 38px;
-    width: 400px;
-  }
+  .input-container {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
 
-  input + .btn--default {
-    margin-left: 10px;
-  }
-}
+    input {
+      flex: 1;
+      padding: 10px;
+      font-size: 18px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      outline: none;
+    }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
+    button {
+      background-color: #007BFF;
+      color: #fff;
+      border: none;
+      border-radius: 4px;
+      padding: 10px 20px;
+      margin-left: 10px;
+      cursor: pointer;
+      transition: background-color 0.3s;
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
+      &:hover {
+        background-color: #0056b3;
+      }
+    }
   }
-}
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
+  .edit-icon {
+    color: blue;
+    font-size: 24px;
   }
-  to {
-    transform: rotate(360deg);
+
+  .todo-list {
+    ul {
+      list-style: none;
+      padding: 0;
+    }
+
+    li {
+      background-color: #fff;
+      margin-bottom: 10px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 10px;
+
+      .todo-text {
+        flex: 1;
+        font-size: 16px;
+      }
+
+      .todo-actions {
+        display: flex;
+
+        button {
+          background-color: #007BFF;
+          color: #fff;
+          border: none;
+          border-radius: 4px;
+          padding: 5px 10px;
+          margin-left: 5px;
+          cursor: pointer;
+          transition: background-color 0.3s;
+
+          &:hover {
+            background-color: #0056b3;
+          }
+        }
+      }
+    }
+
+    .completed {
+      background-color: #d4edda;
+      border-color: #c3e6cb;
+    }
   }
 }

CodingChallenge.UI/TodoChallenge/src/components/todo/Todo.js

@@ -1,15 +1,14 @@
-import React, {useState} from 'react';
-import {TodoModel} from "../../TodoModel";
+import React, { useState } from 'react';
+import { TodoModel } from "../../TodoModel";
 import PropTypes from "prop-types";
 import './todo.scss';
 
 const Todo = (props) => {
-    const [editing, setStateEditing] =  useState(false);
+    const [editing, setStateEditing] = useState(false);
     const [editingText, setStateEditText] = useState(props.todo.text);
 
-
     const toggleComplete = () => {
-        props.onCompleteChange({...props.todo, isComplete: !props.todo.isComplete});
+        props.onCompleteChange({ ...props.todo, isComplete: !props.todo.isComplete });
     }
 
     const toggleEditText = () => {
@@ -27,17 +26,32 @@ const Todo = (props) => {
     }
 
     const displayText = () => {
-        if (editing)
-        {
-            return <input onChange={onChangeEditText} value={editingText}></input>
+        if (editing) {
+            return (
+                <div>
+                    <input onChange={onChangeEditText} value={editingText}></input>
+                    <input
+                        type="date"
+                        value={props.todo.dueDate}
+                        onChange={(e) => {
+                            props.onDueDateChange(e.target.value, props.todo.id);
+                        }}
+                    />
+                </div>
+            )
         }
-        else
-        {
-            return props.todo.text;
+        else {
+            return (
+                <div>
+                    <span>{props.todo.text}</span>
+                    <span>Due Date: {props.todo.dueDate}</span>
+                </div>
+            )
         }
     }
+
     const getClassName = () => {
-        const {isComplete} = props.todo;
+        const { isComplete } = props.todo;
         return `todo-item ${isComplete ? 'complete' : 'incomplete'}`;
     }
 
@@ -56,7 +70,8 @@ const Todo = (props) => {
 Todo.propTypes = {
     todo: PropTypes.shape(TodoModel),
     onTextChange: PropTypes.func,
-    onCompleteChange: PropTypes.func
+    onCompleteChange: PropTypes.func,
+    onDueDateChange: PropTypes.func, // Add the prop for due date change
 };
 
-export default Todo;
+export default Todo;