Appointment Planner Challenge Project (React)

tjupp · June 22, 2023, 8:55pm

Check your import for typos.

tjupp · June 22, 2023, 9:28pm

Check how you’re passing your handleSubmit props for typos and logic.

tjupp · June 23, 2023, 5:34pm

Here is my solution to the Appointment Planner project with a gratuitous phone number formatter and working netlify form submission how-to-integrate-netlifys-form-handling-in-a-react-app
https://appointment-planner-cc.netlify.app

gizmapps · July 5, 2023, 4:05am

Hello learners i wonder if there is a step by step guide for this project. It is a bit more difficult than any other task.

isaacisewede · July 8, 2023, 3:54pm

Hi Community.
Here is my solution to the Appointment Planner deployed using surge.
Link to Deployed APP
GitHub Repo

cmastris · July 9, 2023, 5:08pm

I couldn’t see a step by step guide, but I managed to complete everything according to the requirements and I committed changes in approximately the same order as the instructions. So, if you take a look at my commit history that might help you figure out what’s going wrong!

fullstack_3 · July 18, 2023, 2:32pm

Hello, I got an error, and don’t have any idea what’s causing it. Because I literally double checked it. The error message is in the image on bottom, and the code where the error is shown is here
"import React from “react”;
import {Tile} from ‘…/tile/Tile’

export const TileList = ({props}) => {
return (

{props.map((object, index) => )}

);
};"

Please help me out

ruronite · July 24, 2023, 9:21pm

hello, you are getting an error because of how you tried to extract the array from props.
When you’re trying to use destructuring assignment there has to be a property match.
eg
x = {
name: “fullstack_3”,
site: “fullstack.com”
}
There are two properties in x, which are name and site.
we can access the values by using dot notation:
x.name and x.site

or use destructuring {name,site}.

if you compare the example I gave above to your code, you’d notice you’re trying to access name and site properties by doing {x} which is wrong.

here’s my working code

export const TileList = (props) => {
let data = props.contacts || props.appointments;
console.log(data)
return (
{data.map((item,index)=>{
let {name, …description} = item;
return
  })}
  
</div>
);
};

thisispetrus · August 2, 2023, 8:11am

I’m not sure either about Kalewine, but Traversy Media tutorial is an excellent practice for many of us learners, figuring out the Appointment Planner.
In my case, I just did the tuto, came back to Appointment Planner and did it with a clear picture in my mind of how to do it. The guy explains concepts while showing examples as he goes which made me clear quite a lot of concepts in mi mind.
No idea how to make useful videos for your students Codecademy? You must give it a go!
Just saying …

milluher · August 8, 2023, 1:45pm

Hi, Below is my Appointment planner challenge.

gist.github.com

https://gist.github.com/codecademydev/21a5beffc1382224c72259c12b4725cf

App.js

import React from "react";
import { RouterProvider, createBrowserRouter, createRoutesFromElements, Route, Navigate } from "react-router-dom"
import Root, { ROUTES } from "./components/root/Root";
import { AppointmentsPage } from "./containers/appointmentsPage/AppointmentsPage";
import { ContactsPage } from "./containers/contactsPage/ContactsPage";

function App() {
  /*
  Define state variables for 
  contacts and appointments

This file has been truncated. show original

figgenfenk · August 14, 2023, 3:01pm

Hey All,

I completed the project and stuck my code on Github. Feel free to review and reach out if you have any questions.

I did get it deployed on Netlify using the helpful link from @tjupp but took it down cus I’m running out of space there and need it for other courses I’m doing.

I didn’t add any additional features but one thing I did differently from the example code was wrapping the addContact and addAppointment functions in useCallback(). I have default arrays of contact & appointment data that would disappear upon adding either a new contact or a new appointment. This function was used in the Jammming project (also very tough) and I’m not sure why but in this instance it helped prevent disappearing default state values.

If anyone knows why useCallback works like this, let me know. The React docs and most of Stackoverflow say that your app should work without it.

mega6990778649 · August 28, 2023, 11:37am

Hi!

Here’s my Appointment Planner. Feel free to comment or ask if you have any questions
Git Repository

Esa

johnny_bettencourt · August 28, 2023, 5:42pm

Hi There, I just finished up my project! Here is a link to my repo! https://github.com/johnnyBettencourt/Appointment-Planner

daviddaill · August 29, 2023, 12:28pm

Hi Everyone
I also just finished the Appointment planner project. Feel free to have a look and let me know if you see any possible improvement.
Link to my: Git-Hub Repo.

PS: Would love to connect with more student, As the course is getting more intense, Let me know…

daviddaill · August 30, 2023, 7:47am

Hi Johnny.

i just had a look at your code and it looks really good,
I saw you used this line of code:

  const addContact = (name, phone, email) => {
    setContacts((prev) => [...prev, {name, phone, email}]);
  };

I didn’t know we could initiate the key and value of an object this way (by only referring to the parameter of the function).
This is very useful, thank you! How is this method called?

How is the course going for you so far? I noiticed that you are also a light designer. I happen to also be in the industry

johnny_bettencourt · August 30, 2023, 3:36pm

That’s awesome dude! I have used codecademy off and on for quite a few years, but it wasn’t till recently that I started to use it with the goal of changing industries in mind. I like it because I feel like I get to learn at my own pace and take time on concepts I struggle to grasp and then speed through stuff that I get quickly.
I’m not sure what it is called, but I have seen that way of building an object before, and I just picked it up.

travelingtramp · September 20, 2023, 1:31am

Finished Code.
I started from scratch. Didn’t know what we were supposed to do with the ‘description’ prop since none of the components or values have a description attribute. Used Redux with some util function to simulate using the Router Form to send data to a database/api source.